chartjs-plugin-chart2music 0.6.0 → 0.7.0

package/dist/plugin.mjs

@@ -84,7 +84,8 @@ const chartjs_c2m_converter = {
     boxplot: "box",
     radar: "bar",
     wordCloud: "bar",
-    scatter: "scatter"
+    scatter: "scatter",
+    matrix: "matrix"
 };
 const processChartType = (chart) => {
     const topLevelType = chart.config.type;
@@ -109,7 +110,7 @@ const processChartType = (chart) => {
 };
 const generateAxisInfo = (chartAxisInfo, chart) => {
     const axis = {};
-    if (chartAxisInfo?.min) {
+    if (chartAxisInfo?.min !== undefined) {
         if (typeof chartAxisInfo.min === "string") {
             axis.minimum = chart.data.labels.indexOf(chartAxisInfo.min);
         }
@@ -117,7 +118,7 @@ const generateAxisInfo = (chartAxisInfo, chart) => {
             axis.minimum = chartAxisInfo.min;
         }
     }
-    if (chartAxisInfo?.max) {
+    if (chartAxisInfo?.max !== undefined) {
         if (typeof chartAxisInfo.max === "string") {
             axis.maximum = chart.data.labels.indexOf(chartAxisInfo.max);
         }
@@ -134,17 +135,20 @@ const generateAxisInfo = (chartAxisInfo, chart) => {
     }
     return axis;
 };
-const generateAxes = (chart) => {
+const generateAxes = (chart, options) => {
     const axes = {
         x: {
             ...generateAxisInfo(chart.options?.scales?.x, chart),
-            valueLabels: chart.data.labels.slice(0)
         },
         y: {
+            format: options?.axes?.y?.format || ((value) => value.toLocaleString()),
             ...generateAxisInfo(chart.options?.scales?.y, chart),
-            format: (value) => value.toLocaleString()
         }
     };
+    const xAxisValueLabels = chart.data.labels.slice(0);
+    if (xAxisValueLabels.length > 0) {
+        axes.x.valueLabels = xAxisValueLabels;
+    }
     return axes;
 };
 const whichDataStructure = (data) => {
@@ -156,6 +160,55 @@ const whichDataStructure = (data) => {
     }
     return data;
 };
+const labelIndex = (labels, value) => {
+    let index = labels.indexOf(value);
+    if (index === -1) {
+        labels.push(value);
+        index = labels.length - 1;
+    }
+    return index;
+};
+const processMatrixDataPoints = (data, datasetIndex, xLabels, yLabels) => {
+    return data.map((point, index) => {
+        const x = typeof point.x === "string" ? labelIndex(xLabels, point.x) : point.x;
+        const y = typeof point.y === "string" ? labelIndex(yLabels, point.y) : point.y;
+        return {
+            ...point,
+            x,
+            y,
+            custom: {
+                ...point.custom,
+                group: datasetIndex,
+                datasetIndex,
+                index
+            }
+        };
+    });
+};
+const processMatrixData = (data) => {
+    const xLabels = [];
+    const yLabels = [];
+    // Chart2Music represents matrix rows as groups and columns as points within
+    // each group. This preserves two-dimensional keyboard navigation.
+    const result = {};
+    data.datasets.forEach((obj, index) => {
+        const points = processMatrixDataPoints(obj.data, index, xLabels, yLabels);
+        points.forEach((point) => {
+            const rowLabel = typeof point.y === "number" && yLabels[point.y] !== undefined
+                ? yLabels[point.y]
+                : String(point.y);
+            const groupName = data.datasets.length === 1
+                ? rowLabel
+                : `${obj.label ?? `Group ${index + 1}`}: ${rowLabel}`;
+            if (!result[groupName]) {
+                result[groupName] = [];
+            }
+            result[groupName].push(point);
+        });
+    });
+    Object.values(result).forEach((row) => row.sort((a, b) => a.x - b.x));
+    return { groups: Object.keys(result), data: result, xLabels, yLabels };
+};
 const scrubX = (data) => {
     const blackboard = JSON.parse(JSON.stringify(data));
     let labels = [];
@@ -170,11 +223,18 @@ const scrubX = (data) => {
         });
         return { labels, data: blackboard };
     }
+    else {
+        // Grouped
+        return undefined;
+    }
 };
 const processData = (data, c2m_types) => {
     if (c2m_types === "box") {
         return processBoxData(data);
     }
+    if (c2m_types === "matrix") {
+        return processMatrixData(data);
+    }
     let groups = [];
     if (data.datasets.length === 1) {
         return {
@@ -206,26 +266,36 @@ const determineCCElement = (canvas, provided) => {
     canvas.insertAdjacentElement("afterend", cc);
     return cc;
 };
+const createDataSnapshot = (chart) => {
+    return JSON.stringify({
+        datasets: chart.data.datasets.map(ds => ds.data),
+        labels: chart.data.labels
+    });
+};
 const displayPoint = (chart) => {
     if (!chartStates.has(chart)) {
         return;
     }
-    const { c2m: ref, visible_groups } = chartStates.get(chart);
+    const { c2m: ref } = chartStates.get(chart);
     const { point, index } = ref.getCurrent();
+    // Use Chart2Music's internal visible group tracking
+    // @ts-ignore - accessing internal Chart2Music property
+    const visibleGroupIndices = ref._visible_group_indices?.slice(1) || [];
     try {
         const highlightElements = [];
         if ("custom" in point) {
+            const customPoint = point;
             highlightElements.push({
-                // @ts-ignore
-                datasetIndex: point.custom.group,
-                // @ts-ignore
-                index: point.custom.index
+                datasetIndex: customPoint.custom.datasetIndex ?? customPoint.custom.group,
+                index: customPoint.custom.index
             });
         }
         else {
-            visible_groups.forEach((datasetIndex) => {
+            // For stacked charts, Chart2Music includes an "All" group at index 0,
+            // so we subtract 1 to get the actual dataset index
+            visibleGroupIndices.forEach((groupIndex) => {
                 highlightElements.push({
-                    datasetIndex,
+                    datasetIndex: groupIndex - 1,
                     index
                 });
             });
@@ -241,11 +311,10 @@ const displayPoint = (chart) => {
 const generateChart = (chart, options) => {
     const { valid, c2m_types, invalidType } = processChartType(chart);
     if (!valid) {
-        // @ts-ignore
         options.errorCallback?.(`Unable to connect chart2music to chart. The chart is of type "${invalidType}", which is not one of the supported chart types for this plugin. This plugin supports: ${Object.keys(chartjs_c2m_converter).join(", ")}`);
         return;
     }
-    let axes = generateAxes(chart);
+    let axes = generateAxes(chart, options);
     if (chart.config.type === "wordCloud") {
         delete axes.x.minimum;
         delete axes.x.maximum;
@@ -260,8 +329,20 @@ const generateChart = (chart, options) => {
     }
     // Generate CC element
     const cc = determineCCElement(chart.canvas, options.cc);
-    const { data, groups } = processData(chart.data, c2m_types);
+    const processedData = processData(chart.data, c2m_types);
+    const { data } = processedData;
     // lastDataObj = JSON.stringify(data);
+    if (c2m_types === "matrix") {
+        if (processedData.xLabels?.length > 0) {
+            axes.x.valueLabels = processedData.xLabels.slice(0);
+        }
+        if (processedData.yLabels?.length > 0) {
+            // Category labels provide the Matrix Plot's Y-axis formatter.
+            // The general numeric formatter would otherwise announce row indexes.
+            delete axes.y.format;
+            axes.y.valueLabels = processedData.yLabels.slice(0);
+        }
+    }
     let scrub = scrubX(data);
     if (scrub?.labels && scrub?.labels?.length > 0) { // Something was scrubbed
         if (!chart.data.labels || chart.data.labels.length === 0) {
@@ -283,6 +364,13 @@ const generateChart = (chart, options) => {
             ...(options.axes?.y)
         },
     };
+    // Start with plugin's internal onFocusCallback
+    const pluginOnFocusCallback = () => {
+        displayPoint(chart);
+    };
+    // Merge user's options, wrapping onFocusCallback if provided
+    const userOptions = options.options || {};
+    const userOnFocusCallback = userOptions.onFocusCallback;
     const c2mOptions = {
         cc,
         element: chart.canvas,
@@ -291,10 +379,13 @@ const generateChart = (chart, options) => {
         title: determineChartTitle(chart.options),
         axes,
         options: {
-            // @ts-ignore
-            onFocusCallback: () => {
-                displayPoint(chart);
-            }
+            ...userOptions,
+            onFocusCallback: userOnFocusCallback
+                ? (point) => {
+                    pluginOnFocusCallback();
+                    userOnFocusCallback(point);
+                }
+                : pluginOnFocusCallback
         }
     };
     if (Array.isArray(c2mOptions.data)) {
@@ -303,8 +394,9 @@ const generateChart = (chart, options) => {
                 return {
                     ...point,
                     custom: {
-                        group: 0,
-                        index
+                        ...point.custom,
+                        group: point.custom?.group ?? 0,
+                        index: point.custom?.index ?? index
                     }
                 };
             });
@@ -323,10 +415,11 @@ const generateChart = (chart, options) => {
         }
     }
     else {
-        const groups = Object.keys(c2mOptions.data);
+        const dataObj = c2mOptions.data;
+        const groups = Object.keys(dataObj);
         groups.forEach((groupName, groupNumber) => {
-            if (!isNaN(c2mOptions.data[groupName][0])) {
-                c2mOptions.data[groupName] = c2mOptions.data[groupName].map((num, index) => {
+            if (!isNaN(dataObj[groupName][0])) {
+                dataObj[groupName] = dataObj[groupName].map((num, index) => {
                     return {
                         x: index,
                         y: num,
@@ -338,26 +431,25 @@ const generateChart = (chart, options) => {
                 });
             }
             else {
-                c2mOptions.data[groupName] = c2mOptions.data[groupName].map((point, index) => {
+                dataObj[groupName] = dataObj[groupName].map((point, index) => {
                     return {
                         ...point,
                         custom: {
-                            group: groupNumber,
-                            index
+                            ...point.custom,
+                            group: point.custom?.group ?? groupNumber,
+                            index: point.custom?.index ?? index
                         }
                     };
                 });
             }
         });
     }
-    // @ts-ignore
     if (chart.config.options?.scales?.x?.stacked) {
-        // @ts-ignore
-        c2mOptions.options.stack = true;
+        if (c2mOptions.options) {
+            c2mOptions.options.stack = true;
+        }
     }
-    // @ts-ignore
     if (options.audioEngine) {
-        // @ts-ignore
         c2mOptions.audioEngine = options.audioEngine;
     }
     if (c2mOptions.data.length === 0) {
@@ -369,7 +461,6 @@ const generateChart = (chart, options) => {
     const { err, data: c2m } = c2mChart(c2mOptions);
     /* istanbul-ignore-next */
     if (err) {
-        // @ts-ignore
         options.errorCallback?.(err);
         return;
     }
@@ -378,12 +469,32 @@ const generateChart = (chart, options) => {
     }
     chartStates.set(chart, {
         c2m,
-        visible_groups: groups?.map((g, i) => i) ?? []
+        lastDataSnapshot: createDataSnapshot(chart)
     });
+    if (c2m_types === "matrix") {
+        const matrixKeydown = (event) => {
+            if (event.key !== "ArrowUp" && event.key !== "ArrowDown") {
+                return;
+            }
+            event.preventDefault();
+            event.stopImmediatePropagation();
+            const actions = c2m._availableActions;
+            if (event.key === "ArrowUp") {
+                actions.next_category();
+            }
+            else {
+                actions.previous_category();
+            }
+        };
+        chart.canvas.addEventListener("keydown", matrixKeydown, true);
+        const state = chartStates.get(chart);
+        state.matrixKeydown = matrixKeydown;
+        state.matrixKeydownTarget = chart.canvas;
+    }
 };
 const plugin = {
     id: "chartjs2music",
-    afterInit: (chart, args, options) => {
+    afterInit: (chart, _args, options) => {
         if (!chartStates.has(chart)) {
             generateChart(chart, options);
             // Remove tooltip when the chart blurs
@@ -410,19 +521,17 @@ const plugin = {
         if (!chartStates.has(chart)) {
             generateChart(chart, options);
         }
-        const { c2m: ref, visible_groups } = chartStates.get(chart);
+        const { c2m: ref } = chartStates.get(chart);
         if (!ref) {
             return;
         }
-        // @ts-ignore
-        const groups = ref._groups.slice(0);
-        // @ts-ignore
-        if (ref._options.stack) {
+        const refInternal = ref;
+        const groups = refInternal._groups.slice(0);
+        if (refInternal._options.stack) {
             groups.shift();
         }
         if (args.mode === "hide") {
             const err = ref.setCategoryVisibility(groups[args.index], false);
-            visible_groups.splice(args.index, 1);
             if (err) {
                 console.error(err);
             }
@@ -430,24 +539,49 @@ const plugin = {
         }
         if (args.mode === "show") {
             const err = ref.setCategoryVisibility(groups[args.index], true);
-            visible_groups.push(args.index);
             if (err) {
                 console.error(err);
             }
             return;
         }
     },
+    afterDatasetsUpdate: (chart, _args, options) => {
+        const state = chartStates.get(chart);
+        if (!state?.c2m)
+            return;
+        // Check if data has changed
+        const currentSnapshot = createDataSnapshot(chart);
+        if (currentSnapshot === state.lastDataSnapshot) {
+            return; // No data change, skip update
+        }
+        // Get chart type
+        const { valid, c2m_types } = processChartType(chart);
+        if (!valid)
+            return;
+        // Process data and generate axes
+        const { data } = processData(chart.data, c2m_types);
+        const axes = generateAxes(chart, options);
+        // Update Chart2Music with new data
+        state.c2m.setData(data, axes);
+        // Update snapshot
+        state.lastDataSnapshot = currentSnapshot;
+    },
     afterDestroy: (chart) => {
-        const { c2m: ref } = chartStates.get(chart);
-        if (!ref) {
+        const state = chartStates.get(chart);
+        if (!state?.c2m) {
             return;
         }
+        const { c2m: ref } = state;
+        if (state?.matrixKeydown && state.matrixKeydownTarget) {
+            state.matrixKeydownTarget.removeEventListener("keydown", state.matrixKeydown, true);
+        }
         ref.cleanUp();
     },
     defaults: {
         cc: null,
         audioEngine: null,
-        errorCallback: null
+        errorCallback: null,
+        options: {}
     }
 };
 

package/package.json

@@ -1,12 +1,15 @@
 {
   "name": "chartjs-plugin-chart2music",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "type": "module",
   "description": "Chart.js plugin for Chart2Music. Turns chart.js charts into music so the blind can hear data.",
   "main": "dist/plugin.js",
   "module": "dist/plugin.mjs",
   "exports": {
-    "import": "./dist/plugin.mjs",
+    "import": {
+      "default": "./dist/plugin.mjs",
+      "types": "./dist/plugin.d.ts"
+    },
     "require": "./dist/plugin.cjs"
   },
   "types": "dist/plugin.d.ts",
@@ -31,7 +34,9 @@
   },
   "license": "MIT",
   "scripts": {
-    "start": "vite",
+    "start": "storybook dev -p 6006",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
     "build": "rollup -c rollup.config.js --silent && yarn build-cjs",
     "build-cjs": "babel ./dist/plugin.mjs --out-file ./dist/plugin.cjs",
     "test": "cross-env NODE_OPTIONS=--experimental-vm-modules jest",
@@ -40,29 +45,59 @@
     "prepack": "npm run clean && npm run build"
   },
   "devDependencies": {
-    "@babel/cli": "7.25.6",
-    "@babel/core": "7.25.2",
-    "@babel/plugin-transform-modules-commonjs": "7.24.8",
-    "@babel/preset-env": "7.25.4",
-    "@rollup/plugin-typescript": "12.1.0",
-    "@sgratzl/chartjs-chart-boxplot": "4.4.2",
-    "@types/jest": "29.5.13",
-    "canvas": "2.11.2",
-    "chartjs-chart-wordcloud": "4.4.2",
-    "chartjs-plugin-a11y-legend": "0.1.2",
-    "cross-env": "7.0.3",
+    "@babel/cli": "^8.0.4",
+    "@babel/core": "^8.0.1",
+    "@babel/plugin-transform-modules-commonjs": "^8.0.1",
+    "@babel/preset-env": "^8.0.2",
+    "@rollup/plugin-typescript": "12.3.0",
+    "@storybook/html-vite": "10.5.0",
+    "@sgratzl/chartjs-chart-boxplot": "4.4.5",
+    "@types/jest": "^30.0.0",
+    "canvas": "^3.2.3",
+    "chartjs-adapter-luxon": "1.3.1",
+    "chartjs-chart-matrix": "3.0.5",
+    "chartjs-chart-wordcloud": "4.4.5",
+    "chartjs-plugin-a11y-legend": "0.2.2",
+    "cross-env": "^10.1.0",
     "depcheck": "1.4.7",
-    "jest": "29.7.0",
-    "jest-environment-jsdom": "29.7.0",
-    "rollup": "4.22.5",
+    "jest": "^30.4.2",
+    "jest-environment-jsdom": "^30.4.1",
+    "luxon": "^3.7.2",
+    "rimraf": "^6.1.3",
+    "rollup": "^4.62.2",
     "rollup-plugin-copy": "3.5.0",
-    "ts-jest": "29.2.5",
-    "tslib": "2.7.0",
-    "typescript": "5.6.2",
-    "vite": "5.4.8"
+    "storybook": "10.5.0",
+    "ts-jest": "^29.4.11",
+    "tslib": "2.8.1",
+    "typescript": "5.9.3",
+    "vite": "^8.1.4"
   },
   "dependencies": {
-    "chart.js": "4.4.4",
-    "chart2music": "1.17.0"
+    "chart.js": "4.5.1",
+    "chart2music": "1.20.0"
+  },
+  "resolutions": {
+    "@babel/core": "^8.0.1",
+    "brace-expansion": "^1.1.13",
+    "@babel/cli/**/brace-expansion": "^1.1.13",
+    "@babel/cli/**/minimatch": "^3.1.4",
+    "@babel/cli/**/picomatch": "^2.3.2",
+    "@rollup/plugin-typescript/**/picomatch": "^4.0.4",
+    "canvas/**/tar-fs": "^2.1.3",
+    "depcheck/**/brace-expansion": "^2.0.3",
+    "depcheck/**/js-yaml": "^3.15.0",
+    "depcheck/**/lodash": "^4.18.1",
+    "depcheck/**/minimatch": "^7.4.8",
+    "depcheck/**/picomatch": "^2.3.2",
+    "depcheck/**/postcss": "^8.5.10",
+    "jest/**/brace-expansion": "^1.1.13",
+    "jest/**/js-yaml": "^3.15.0",
+    "jest/**/minimatch": "^3.1.4",
+    "jest/**/picomatch": "^2.3.2",
+    "rollup-plugin-copy/**/brace-expansion": "^1.1.13",
+    "rollup-plugin-copy/**/minimatch": "^3.1.4",
+    "rollup-plugin-copy/**/picomatch": "^2.3.2",
+    "**/ws": "^8.21.0",
+    "**/yaml": "^1.10.3"
   }
 }