Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add date range picker to filter data visualizations #166

Conversation

DevOps-zhuang
Copy link
Contributor

@DevOps-zhuang DevOps-zhuang commented Feb 21, 2025

Related to #19

Add date range picker functionality to various components to support selecting start and end dates for data visualizations.

  • ApiResponse.vue

    • Add date range picker component to the template.
    • Add dateRange to the data function.
    • Add a computed property to filter originalMetrics based on the selected date range.
    • Update the displayed JSON object to use the filtered metrics.
  • BreakdownComponent.vue

    • Add date range picker component to the template.
    • Add dateRange to the setup function.
    • Add a computed property to filter metrics based on the selected date range.
    • Update the displayed breakdown data to use the filtered metrics.
  • CopilotChatViewer.vue

    • Add date range picker component to the template.
    • Add dateRange to the setup function.
    • Add a computed property to filter metrics based on the selected date range.
    • Update the displayed chat data to use the filtered metrics.
  • MainComponent.vue

    • Add date range picker component to the template.
    • Add dateRange to the setup function.
    • Add computed properties to filter metrics, originalMetrics, and seats based on the selected date range.
    • Update the displayed data to use the filtered metrics and seats.
  • MetricsViewer.vue

    • Add date range picker component to the template.
    • Add dateRange to the setup function.
    • Add a computed property to filter metrics based on the selected date range.
    • Update the displayed metrics data to use the filtered metrics.
  • SeatsAnalysisViewer.vue

    • Add date range picker component to the template.
    • Add dateRange to the setup function.
    • Add a computed property to filter seats based on the selected date range.
    • Update the displayed seats data to use the filtered seats.

For more details, open the Copilot Workspace session.

Related to github-copilot-resources#19

Add date range picker functionality to various components to support selecting start and end dates for data visualizations.

* **ApiResponse.vue**
  - Add date range picker component to the template.
  - Add `dateRange` to the data function.
  - Add a computed property to filter `originalMetrics` based on the selected date range.
  - Update the displayed JSON object to use the filtered metrics.

* **BreakdownComponent.vue**
  - Add date range picker component to the template.
  - Add `dateRange` to the setup function.
  - Add a computed property to filter `metrics` based on the selected date range.
  - Update the displayed breakdown data to use the filtered metrics.

* **CopilotChatViewer.vue**
  - Add date range picker component to the template.
  - Add `dateRange` to the setup function.
  - Add a computed property to filter `metrics` based on the selected date range.
  - Update the displayed chat data to use the filtered metrics.

* **MainComponent.vue**
  - Add date range picker component to the template.
  - Add `dateRange` to the setup function.
  - Add computed properties to filter `metrics`, `originalMetrics`, and `seats` based on the selected date range.
  - Update the displayed data to use the filtered metrics and seats.

* **MetricsViewer.vue**
  - Add date range picker component to the template.
  - Add `dateRange` to the setup function.
  - Add a computed property to filter `metrics` based on the selected date range.
  - Update the displayed metrics data to use the filtered metrics.

* **SeatsAnalysisViewer.vue**
  - Add date range picker component to the template.
  - Add `dateRange` to the setup function.
  - Add a computed property to filter `seats` based on the selected date range.
  - Update the displayed seats data to use the filtered seats.

---

For more details, open the [Copilot Workspace session](https://copilot-workspace.githubnext.com/github-copilot-resources/copilot-metrics-viewer/issues/19?shareId=XXXX-XXXX-XXXX-XXXX).
@DevOps-zhuang
Copy link
Contributor Author

closed for more updates and testing.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant