You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Migrate HitKeep dashboard charts from PrimeNG p-chart and Chart.js to ngx-echarts before completing the PrimeNG 22 upgrade in #218.
Problem
Issue #218 upgrades the dashboard PrimeNG stack to v22, but the current dashboard chart components depend on PrimeNG's ChartModule, p-chart, and the chart.js package. That keeps analytics visualization coupled to PrimeNG's chart wrapper while the broader PrimeNG 22 migration is already blocked on the new PrimeUI licensing path.
Moving dashboard charts to ngx-echarts creates a cleaner charting boundary before the PrimeNG 22 upgrade and removes the need to keep Chart.js solely for PrimeNG charts.
Who Benefits
Dashboard users, contributors, self-hosted operators, managed cloud operators, and maintainers working on the PrimeNG 22 upgrade benefit from a clearer charting dependency boundary.
Proposed Solution
Replace all dashboard chart usage with ngx-echarts and Apache ECharts while preserving the current analytics chart behavior, visual density, dark mode support, loading states, empty states, comparison series, localized labels, and accessibility labels.
The smallest useful version should include:
Add ngx-echarts and echarts as dashboard dependencies.
Replace all PrimeNG p-chart usage with ECharts-backed components.
Remove ChartModule imports from dashboard chart components.
Remove chart.js from frontend/dashboard/package.json and frontend/dashboard/package-lock.json.
Refresh frontend/dashboard/package-lock.json from a clean install.
Preserve the current chart behavior for traffic, reusable series charts, trend lines, comparison series, legends, tooltips, grid styling, and responsive sizing.
The maintainer first migrates all dashboard charts away from PrimeNG p-chart and Chart.js.
The dashboard renders the same analytics chart states through ngx-echarts.
The PrimeNG 22 upgrade proceeds without chart behavior depending on PrimeNG's chart wrapper or Chart.js.
Success Criteria
All dashboard charts are replaced with ngx-echarts / Apache ECharts equivalents.
No dashboard component imports or renders primeng/chart or p-chart.
chart.js is no longer present in frontend/dashboard/package.json or frontend/dashboard/package-lock.json.
Existing chart states render correctly for loading, empty, single-period, comparison, short-range, and long-range data.
Chart labels, tooltip text, dates, and accessibility labels continue to respond to supported dashboard language changes.
Light and dark themes preserve the current HitKeep visual direction.
npm install does not report unresolved Angular peer dependency conflicts.
Frontend checks pass: npm run fmt:check, npm run lint, npm run test:ci, and npm run i18n:check from frontend/dashboard.
Alternatives Considered
Keep using PrimeNG p-chart during the PrimeNG 22 upgrade. This is the smallest immediate change, but leaves dashboard charts coupled to PrimeNG's licensed v22 path and future chart direction.
Use ng2-charts with the existing Chart.js dependency. This would be a smaller technical migration, but it would not satisfy the requirement to remove Chart.js.
Adopt a commercial charting library such as Highcharts or ApexCharts. That would introduce a separate licensing decision and should not block the PrimeNG 22 migration.
Constraints
This must remain a frontend dependency migration only and must not add hosted runtime services.
HitKeep's embedded single-binary dashboard model must remain unchanged.
The migration should avoid dashboard redesign; visual changes should be limited to matching current behavior in the new chart engine.
Dashboard copy and locale behavior must continue to use Transloco and existing locale helpers.
No PrimeUI license keys, chart vendor credentials, procurement details, or private eligibility evidence should be committed.
Release Notes
Not needed unless chart behavior or visible analytics presentation changes.
Summary
Migrate HitKeep dashboard charts from PrimeNG
p-chartand Chart.js tongx-echartsbefore completing the PrimeNG 22 upgrade in #218.Problem
Issue #218 upgrades the dashboard PrimeNG stack to v22, but the current dashboard chart components depend on PrimeNG's
ChartModule,p-chart, and thechart.jspackage. That keeps analytics visualization coupled to PrimeNG's chart wrapper while the broader PrimeNG 22 migration is already blocked on the new PrimeUI licensing path.Moving dashboard charts to
ngx-echartscreates a cleaner charting boundary before the PrimeNG 22 upgrade and removes the need to keep Chart.js solely for PrimeNG charts.Who Benefits
Dashboard users, contributors, self-hosted operators, managed cloud operators, and maintainers working on the PrimeNG 22 upgrade benefit from a clearer charting dependency boundary.
Proposed Solution
Replace all dashboard chart usage with
ngx-echartsand Apache ECharts while preserving the current analytics chart behavior, visual density, dark mode support, loading states, empty states, comparison series, localized labels, and accessibility labels.The smallest useful version should include:
ngx-echartsandechartsas dashboard dependencies.p-chartusage with ECharts-backed components.ChartModuleimports from dashboard chart components.chart.jsfromfrontend/dashboard/package.jsonandfrontend/dashboard/package-lock.json.frontend/dashboard/package-lock.jsonfrom a clean install.User Workflow
p-chartand Chart.js.ngx-echarts.Success Criteria
ngx-echarts/ Apache ECharts equivalents.primeng/chartorp-chart.chart.jsis no longer present infrontend/dashboard/package.jsonorfrontend/dashboard/package-lock.json.npm installdoes not report unresolved Angular peer dependency conflicts.npm run fmt:check,npm run lint,npm run test:ci, andnpm run i18n:checkfromfrontend/dashboard.Alternatives Considered
Keep using PrimeNG
p-chartduring the PrimeNG 22 upgrade. This is the smallest immediate change, but leaves dashboard charts coupled to PrimeNG's licensed v22 path and future chart direction.Use
ng2-chartswith the existing Chart.js dependency. This would be a smaller technical migration, but it would not satisfy the requirement to remove Chart.js.Adopt a commercial charting library such as Highcharts or ApexCharts. That would introduce a separate licensing decision and should not block the PrimeNG 22 migration.
Constraints
Release Notes
Not needed unless chart behavior or visible analytics presentation changes.
Additional Context
ngx-echarts: https://github.com/xieziyu/ngx-echartsngx-echarts22.0.0with Angular>=22.0.0peer support and MIT licensing.echartsis Apache-2.0 licensed.