Skip to content

Add Chart.js charts to the dashexample module - #255

Merged
kpodemski merged 1 commit into
PrestaShop:masterfrom
nicosomb:add/dashexamplechartjs-module
Aug 6, 2026
Merged

Add Chart.js charts to the dashexample module#255
kpodemski merged 1 commit into
PrestaShop:masterfrom
nicosomb:add/dashexamplechartjs-module

Conversation

@nicosomb

@nicosomb nicosomb commented Jul 23, 2026

Copy link
Copy Markdown
Contributor

Description

Adds Chart.js charts to the existing dashexample module (merged in #254) instead of shipping a second demo module: the earlier dashexamplechartjs PoC validated Chart.js for spike PrestaShop/PrestaShop#41970, and its learnings are now folded into the single reference module for the migrated (Symfony) Back Office Dashboard (PrestaShop/PrestaShop#41968 / #254).

The module ships no charting library: it consumes the Chart.js bundle provided by the core dashboard page (global Chart + the psChart PrestaShop palette) from PrestaShop/PrestaShop#42135.

What it demonstrates

  • Four chart types across the three zones, covering the needs of the current native widgets:
    • Zone One — traffic-sources doughnut, no colors set: the core palette plugin colors it automatically (dashactivity equivalent);
    • Zone Two — sales-trend line with a previous-period overlay + goals-vs-actual bar, both picking explicit tokens from psChart.colors (dashtrends / dashgoals equivalents);
    • Zone Three — orders-by-status polar area, auto-colored per data point like the doughnut.
  • The two complementary color modes of the core bundle: zero-config auto-coloring vs explicit psChart tokens (a chart that defines any color is left untouched by the auto-coloring).
  • Blocks presented as Bootstrap cards (card / card-header / card-body / card-footer), the supported markup of the new BO theme.
  • Per-hook asset independence: each hook template loads exactly the assets its own blocks need, so every hook keeps working when the others are unregistered.
  • Hook parameters (date_from / date_to) surfaced in each card footer.
  • Sample/static data only — rendering/integration reference, not a reimplementation of the native widgets' data layer.

Requirements

Chart.js benchmark (from the spike)

Chart.js was selected among Chart.js / ApexCharts / Billboard.js: MIT license, ~67.5k★, ~54M downloads/month, ~68 KB gzip — over ApexCharts (proprietary relicensing in June 2025) and Billboard.js (heavier, keeps a D3 v7 dependency). Chart.js renders on <canvas>, invisible to screen readers by default: every canvas here carries role="img" + aria-label as a minimal baseline.

How to test

  1. On a 9.2.0+ shop with Add Chart.js as an independent core bundle with a PrestaShop palette for the Symfony dashboard PrestaShop#42135, enable the dashboard feature flag.
  2. Install the module: php bin/console prestashop:module install dashexample.
  3. Open the Dashboard: doughnut / line / bar / polar-area charts render as cards in the three zones, colored with the PrestaShop palette; the toolbar shows the module marker and the top/bottom zones their banners.

@nicosomb

Copy link
Copy Markdown
Contributor Author
2026-07-24 09 50 27 localhost 3a39e1e3783c

Charts are rendered with the Chart.js bundle provided by the core
dashboard page (global Chart + psChart palette mirroring the modern
PrestaShop branding) — the module ships no charting library. Blocks
now use the new-theme Bootstrap card markup, and each hook template
loads its own assets so hooks can be unregistered independently.
Zone One shows an auto-colored doughnut, Zone Two a line chart with
previous-period overlay and a goals bar chart using explicit palette
tokens, Zone Three an auto-colored polar area chart.
@jolelievre
jolelievre force-pushed the add/dashexamplechartjs-module branch from d3d0143 to 7055995 Compare August 5, 2026 19:15
@jolelievre jolelievre changed the title Add dashexamplechartjs module for the new Symfony dashboard hooks Add Chart.js charts to the dashexample module Aug 5, 2026
@kpodemski
kpodemski merged commit b2ab9a9 into PrestaShop:master Aug 6, 2026
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.

Dashboard Migration - Chart Librairies Benchmark

4 participants