feat: add dashboards feature with draggable chart widgets#1552
Merged
Conversation
Contributor
gugu
commented
Feb 2, 2026
gugu
commented
- Add dashboards list page with search, create, edit, delete functionality
- Add dashboard view with Gridster-based drag/resize grid for charts
- Add chart widget renderer using ng2-charts (bar, line, pie, doughnut, polar)
- Add widget edit dialog for adding charts linked to saved queries
- Add dashboards service with rxResource for reactive data fetching
- Replace Charts nav tab with Dashboards tab
- Add link to manage saved queries from dashboards page
- Add dashboards list page with search, create, edit, delete functionality - Add dashboard view with Gridster-based drag/resize grid for charts - Add chart widget renderer using ng2-charts (bar, line, pie, doughnut, polar) - Add widget edit dialog for adding charts linked to saved queries - Add dashboards service with rxResource for reactive data fetching - Replace Charts nav tab with Dashboards tab - Add link to manage saved queries from dashboards page Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Refactor widget to only contain positioning data (position_x, position_y, width, height, query_id) - Move widget display properties (widget_type, chart_type, widget_options) to SavedQuery - Add dashboard-widget component to handle data fetching and widget rendering - Display widget name from saved query in widget header - Add drag and resize support for widgets in edit mode using angular-gridster2 v20 - Add "Label Type" option for bar/line charts with "Values" and "Datetime" options - Update all widget renderer tests to use new structure with preloaded data Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Separate chart configuration from preview section in chart-edit - Add "Configure Chart" link to dashboard widget menu - Rename "Edit" to "Change Query" for clarity - Add time-based X axis for datetime label type with gap support - Install chartjs-adapter-date-fns for Chart.js time scale Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Contributor
There was a problem hiding this comment.
Pull request overview
This PR adds a comprehensive dashboards feature enabling users to create custom dashboards with draggable/resizable chart widgets powered by Gridster2. The implementation replaces the "Charts" navigation tab with "Dashboards" and adds reactive data fetching using Angular's rxResource.
Changes:
- Added dashboards management UI with list, create, edit, and delete functionality
- Implemented dashboard view with Gridster2-based drag-and-drop grid for chart widgets
- Added chart widget renderers supporting multiple chart types (bar, line, pie, doughnut, polar) with datetime scale support
- Added reactive dashboards service using rxResource for efficient data fetching
- Updated navigation to replace "Charts" tab with "Dashboards"
Reviewed changes
Copilot reviewed 58 out of 59 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| frontend/yarn.lock | Added angular-gridster2 and chartjs-adapter-date-fns dependencies |
| frontend/package.json | Updated package.json with new gridster and chart adapter dependencies |
| frontend/src/app/services/dashboards.service.ts | New service implementing reactive dashboard/widget CRUD with rxResource |
| frontend/src/app/services/connections.service.ts | Updated visible tabs to replace 'charts' with 'dashboards' |
| frontend/src/app/services/connections.service.spec.ts | Updated tests to reflect 'dashboards' tab name change |
| frontend/src/app/models/saved-query.ts | Extended SavedQuery model with widget configuration fields |
| frontend/src/app/models/dashboard.ts | New model definitions for dashboards and widgets |
| frontend/src/app/components/dashboards/* | New dashboard components for list, view, edit, delete, and widget management |
| frontend/src/app/components/dashboards/widget-renderers/* | New widget renderer components for chart, table, counter, and text widgets |
| frontend/src/app/components/charts/chart-preview/chart-preview.component.ts | Enhanced chart preview with datetime scale support |
| frontend/src/app/components/charts/chart-edit/chart-edit.component.ts | Extended chart editor to save widget configuration with queries |
| frontend/src/app/app.component.ts | Updated navigation tab caption from 'Charts' to 'Dashboards' |
| frontend/src/app/app-routing.module.ts | Added new routes for dashboards list and dashboard view |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| action: 'Dashboards: add widget dialog opened', | ||
| }); | ||
|
|
||
| const result = await dialogRef.afterClosed().toPromise(); |
There was a problem hiding this comment.
The toPromise() method is deprecated in RxJS. Use firstValueFrom() or lastValueFrom() from 'rxjs' instead. For dialog results, firstValueFrom() is appropriate.
| action: 'Dashboards: edit widget dialog opened', | ||
| }); | ||
|
|
||
| const result = await dialogRef.afterClosed().toPromise(); |
There was a problem hiding this comment.
The toPromise() method is deprecated in RxJS. Use firstValueFrom() or lastValueFrom() from 'rxjs' instead. For dialog results, firstValueFrom() is appropriate.
| action: 'Dashboards: delete widget dialog opened', | ||
| }); | ||
|
|
||
| const result = await dialogRef.afterClosed().toPromise(); |
There was a problem hiding this comment.
The toPromise() method is deprecated in RxJS. Use firstValueFrom() or lastValueFrom() from 'rxjs' instead. For dialog results, firstValueFrom() is appropriate.
Add provideCharts(withDefaultRegisterables()) to test providers to fix "bar is not a registered controller" error. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
The component now includes label_type: 'values' in widget_options for bar/line charts by default. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.