chartjs-plugin-chart2music 0.6.0 → 0.7.0

package/dist/plugin.d.ts

@@ -1 +1,8 @@
-declare module "chartjs-plugin-chart2music";
+import type { Plugin } from "chart.js";
+import type { C2MChartConfig } from "chart2music";
+
+export type C2MPluginOptions = Pick<C2MChartConfig, "audioEngine" | "axes" | "cc" | "lang" | "options"> & {
+    errorCallback?: (err: string) => void;
+}
+declare const plugin: Plugin;
+export default plugin;

package/dist/plugin.js

@@ -85,7 +85,8 @@ var chartjs2music = (function (c2mChart) {
         boxplot: "box",
         radar: "bar",
         wordCloud: "bar",
-        scatter: "scatter"
+        scatter: "scatter",
+        matrix: "matrix"
     };
     const processChartType = (chart) => {
         const topLevelType = chart.config.type;
@@ -110,7 +111,7 @@ var chartjs2music = (function (c2mChart) {
     };
     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);
             }
@@ -118,7 +119,7 @@ var chartjs2music = (function (c2mChart) {
                 axis.minimum = chartAxisInfo.min;
             }
         }
-        if (chartAxisInfo?.max) {
+        if (chartAxisInfo?.max !== undefined) {
             if (typeof chartAxisInfo.max === "string") {
                 axis.maximum = chart.data.labels.indexOf(chartAxisInfo.max);
             }
@@ -135,17 +136,20 @@ var chartjs2music = (function (c2mChart) {
         }
         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) => {
@@ -157,6 +161,55 @@ var chartjs2music = (function (c2mChart) {
         }
         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 = [];
@@ -171,11 +224,18 @@ var chartjs2music = (function (c2mChart) {
             });
             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 {
@@ -207,26 +267,36 @@ var chartjs2music = (function (c2mChart) {
         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
                     });
                 });
@@ -242,11 +312,10 @@ var chartjs2music = (function (c2mChart) {
     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;
@@ -261,8 +330,20 @@ var chartjs2music = (function (c2mChart) {
         }
         // 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) {
@@ -284,6 +365,13 @@ var chartjs2music = (function (c2mChart) {
                 ...(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,
@@ -292,10 +380,13 @@ var chartjs2music = (function (c2mChart) {
             title: determineChartTitle(chart.options),
             axes,
             options: {
-                // @ts-ignore
-                onFocusCallback: () => {
-                    displayPoint(chart);
-                }
+                ...userOptions,
+                onFocusCallback: userOnFocusCallback
+                    ? (point) => {
+                        pluginOnFocusCallback();
+                        userOnFocusCallback(point);
+                    }
+                    : pluginOnFocusCallback
             }
         };
         if (Array.isArray(c2mOptions.data)) {
@@ -304,8 +395,9 @@ var chartjs2music = (function (c2mChart) {
                     return {
                         ...point,
                         custom: {
-                            group: 0,
-                            index
+                            ...point.custom,
+                            group: point.custom?.group ?? 0,
+                            index: point.custom?.index ?? index
                         }
                     };
                 });
@@ -324,10 +416,11 @@ var chartjs2music = (function (c2mChart) {
             }
         }
         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,
@@ -339,26 +432,25 @@ var chartjs2music = (function (c2mChart) {
                     });
                 }
                 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) {
@@ -370,7 +462,6 @@ var chartjs2music = (function (c2mChart) {
         const { err, data: c2m } = c2mChart(c2mOptions);
         /* istanbul-ignore-next */
         if (err) {
-            // @ts-ignore
             options.errorCallback?.(err);
             return;
         }
@@ -379,12 +470,32 @@ var chartjs2music = (function (c2mChart) {
         }
         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
@@ -411,19 +522,17 @@ var chartjs2music = (function (c2mChart) {
             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);
                 }
@@ -431,24 +540,49 @@ var chartjs2music = (function (c2mChart) {
             }
             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: {}
         }
     };