/**
 * Dashboard charts.
 *
 * The only screen in the app where something is drawn client-side rather than
 * rendered by the server — architecture §16 calls this out explicitly: "Charts
 * are Chart.js fed by a JSON blob rendered server-side into the page (no AJAX
 * endpoint, no extra request)". Chart.js itself is a local dependency bundled
 * by Vite, not a CDN script, for the same reason the fonts are self-hosted:
 * the production host sits behind a corporate network where a third-party
 * request may not resolve.
 *
 * Each chart is a <canvas data-chart="some-id"> paired with a
 * <script type="application/json" data-chart-config="some-id"> holding the
 * Chart.js constructor config. A type="application/json" script is inert —
 * the browser never executes it, so it carries data through the page without
 * needing an inline <script> that the CSP's script-src 'self' would block.
 */
import { Chart, registerables } from 'chart.js';

Chart.register(...registerables);

document.addEventListener('DOMContentLoaded', () => {
    document.querySelectorAll('canvas[data-chart]').forEach((canvas) => {
        const id = canvas.dataset.chart;
        const configEl = document.querySelector(`script[data-chart-config="${id}"]`);

        if (!configEl) {
            return;
        }

        const config = JSON.parse(configEl.textContent);
        new Chart(canvas, config);
    });
});
