Skip to content

Add dashexamplechartjs module for the new Symfony dashboard hooks - #255

Open
nicosomb wants to merge 2 commits into
PrestaShop:masterfrom
nicosomb:add/dashexamplechartjs-module
Open

Add dashexamplechartjs module for the new Symfony dashboard hooks#255
nicosomb wants to merge 2 commits into
PrestaShop:masterfrom
nicosomb:add/dashexamplechartjs-module

Conversation

@nicosomb

Copy link
Copy Markdown
Contributor

Description

PoC for spike PrestaShop/PrestaShop#41970 (chart library benchmark) — validates Chart.js as the replacement for D3 v3 + NVD3 on the migrated (Symfony) Back Office Dashboard, using the same integration contract as the reference dashexample module from PrestaShop/PrestaShop#41968 / #254.

What it demonstrates

  • Registers on the new dashboard hooks: displayAdminDashboardZoneOne, displayAdminDashboardZoneTwo, displayAdminDashboardToolbar. No legacy Smarty/HelperForm/Db::getInstance().
  • Renders hook content through module Twig templates ($this->get('twig')), self-hosts Chart.js v4.5.1 (MIT, no CDN dependency).
  • Covers the 4 chart types the current native widgets need: doughnut (dashactivity equivalent), line/area with a previous-period overlay (dashtrends equivalent), bar (dashgoals equivalent).
  • Sample/static data only — this is a rendering/integration PoC, not a full reimplementation of the native widgets' data layer.

Requirements

Known issues on the dependency (PrestaShop/PrestaShop#42077)

Building this PoC surfaced two bugs in the core PR this module depends on (reported there):

  • index.html.twig is missing |raw on toolbarContent/topContent, breaking the toolbar-based asset-loading pattern this module (and dashexample) rely on.
  • The date-range calendar form loses its security token on submit (GET form whose action already contains ?_token=..., dropped and rebuilt from form fields alone), redirecting to security/compromised.

Chart.js benchmark

Chart.js was selected as the primary recommendation among Chart.js / ApexCharts / Billboard.js: MIT license, ~67.5k★ on GitHub, ~54M downloads/month, ~68 KB gzip, no license risk — over ApexCharts (excluded: proprietary relicensing in June 2025, revenue-gated + no-redistribution clause) and Billboard.js (heavier bundle, smaller community, keeps a D3 v7 dependency).

Known gap surfaced by this PoC: Chart.js renders on <canvas>, invisible to screen readers by default. This PoC adds role="img" + aria-label as a minimal baseline; a real migration should budget explicit accessibility work per chart.

How to test

  1. On a 9.2.0+ shop with PR #42077 merged, enable the dashboard feature flag.
  2. Install the module: php bin/console prestashop:module install dashexamplechartjs.
  3. Open the Dashboard: doughnut/line/bar charts render in Zone One / Zone Two.

Draft PR — opening for early visibility/discussion while PrestaShop/PrestaShop#42077 is still open.

PoC for PrestaShop/PrestaShop#41970 (chart library benchmark): validates
Chart.js as the D3 v3 + NVD3 replacement, using the same integration
contract as dashexample (displayAdminDashboard* hooks, module Twig
templates, no Smarty/HelperForm/Db::getInstance()).
@nicosomb

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

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

2 participants