Skip to content

[Feature]: Migrate dashboard charts to ngx-echarts #219

Description

@PascaleBeier

Summary

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.

User Workflow

  1. A maintainer starts the PrimeNG 22 upgrade path from [Feature]: Update PrimeNG stack to v22 #218.
  2. The maintainer first migrates all dashboard charts away from PrimeNG p-chart and Chart.js.
  3. The dashboard renders the same analytics chart states through ngx-echarts.
  4. 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.

Additional Context

Metadata

Metadata

Assignees

No one assigned

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions