chartjs-plugin-chart2music 0.0.1 → 0.0.3

package/README.md

@@ -1,5 +1,9 @@
-# chartjs2music
-chartjs plugin for chart2music
+# chartjs-plugin-chart2music
+chartjs plugin for chart2music.
+
+**This is a beta release of this plugin**
+
+Turns your chart.js charts into music so the blind can hear data. This plugin will automatically add Chart2Music, an interactive sonification library, to your chart.js charts. The contents of the chart element will be modified to best support screen reader users, and the interactions will be visually synchronized to provide support for keyboard-only users.
 
 ## Getting started
 
@@ -7,17 +11,48 @@ Add the chartjs2music plugin to your existing chart.js code like this:
 
 ```js
 import {Chart} from "chart.js/auto";
-import chartjs2music from "chartjs2music";
+import plugin from "chartjs-plugin-chart2music";
 
-Chart.register(chartjs2music);
+Chart.register(plugin);
 ```
 
-## Contributing
+That will register the plugin globally. Alternatively, if you only want to enable for a given chart, you can do this:
+
+```js
+import {Chart} from "chart.js/auto";
+import chartjs2music from "chartjs-plugin-chart2music";
+
+new Chart(canvasElement, {
+    type: "bar",
+    data: {
+        datasets: [{
+            data: [1,4,2,8]
+        }]
+    },
+    plugins: [chartjs2music]
+})
+
+```
+
+## Supported features
+
+This plugin is currently in beta, so not all of the chart.js features are currently supported.
 
-To get started:
+A quick list of chart.js features we currently support includes:
+* Chart types: bar, line, pie, doughnut, polar, and combinations therein.
+* Axes options: `title`, `min`, `max`, `type="linear"`, `type="logarithmic"`.
+* Chart title
+* Most data structures (not including `parsing` or non-standard axes identifiers)
 
-1. run `yarn` to install dependencies
-2. run `yarn start` to start a server in watch mode
-3. point a browser to `localhost:5173`, or whichever port numberVite indicates after you ran `yarn start`.
+Note that visual-specific chart features are ignored. This includes things like color, padding, line thickness, etc.
 
-For tests, run `yarn test`.
+Things we plan to support in the future:
+* Interactions and updates
+* Other chart.js plugins
+* Complex `parsing` options for data
+* Date/Time support for axes
+* Subtitle
+* Locale
+* Dataset visibility (when you show/hide a category from the legend)
+* Radar charts
+* Custom formatting for axis tick values

package/dist/plugin.js

@@ -1,4 +1,4 @@
-var chartjs2music = (function (exports, c2mChart) {
+var chartjs2music = (function (c2mChart) {
     'use strict';
 
     // let lastDataObj = "";
@@ -194,8 +194,6 @@ var chartjs2music = (function (exports, c2mChart) {
         }
     };
 
-    exports.plugin = plugin;
+    return plugin;
 
-    return exports;
-
-})({}, c2mChart);
+})(c2mChart);

package/dist/plugin.mjs

@@ -0,0 +1,196 @@
+import c2mChart from 'chart2music';
+
+// let lastDataObj = "";
+const chartjs_c2m_converter = {
+    bar: "bar",
+    line: "line",
+    pie: "pie",
+    polarArea: "bar",
+    doughnut: "pie"
+};
+const processChartType = (chart) => {
+    const topLevelType = chart.config.type;
+    const panelTypes = chart.data.datasets.map(({ type }) => type ?? topLevelType);
+    const invalid = panelTypes.find((t) => !(t in chartjs_c2m_converter));
+    if (invalid) {
+        return {
+            valid: false,
+            invalidType: invalid
+        };
+    }
+    if ([...new Set(panelTypes)].length === 1) {
+        return {
+            valid: true,
+            c2m_types: chartjs_c2m_converter[panelTypes[0]]
+        };
+    }
+    return {
+        valid: true,
+        c2m_types: panelTypes.map((t) => chartjs_c2m_converter[t])
+    };
+};
+const generateAxisInfo = (chartAxisInfo, chart) => {
+    const axis = {};
+    if (chartAxisInfo?.min) {
+        if (typeof chartAxisInfo.min === "string") {
+            axis.minimum = chart.data.labels.indexOf(chartAxisInfo.min);
+        }
+        else {
+            axis.minimum = chartAxisInfo.min;
+        }
+    }
+    if (chartAxisInfo?.max) {
+        if (typeof chartAxisInfo.max === "string") {
+            axis.maximum = chart.data.labels.indexOf(chartAxisInfo.max);
+        }
+        else {
+            axis.maximum = chartAxisInfo.max;
+        }
+    }
+    const label = chartAxisInfo?.title?.text;
+    if (label) {
+        axis.label = label;
+    }
+    if (chartAxisInfo?.type === "logarithmic") {
+        axis.type = "log10";
+    }
+    return axis;
+};
+const generateAxes = (chart) => {
+    const axes = {
+        x: {
+            ...generateAxisInfo(chart.options?.scales?.x, chart),
+            valueLabels: chart.data.labels.slice(0)
+        },
+        y: {
+            ...generateAxisInfo(chart.options?.scales?.y, chart),
+            format: (value) => value.toLocaleString()
+        }
+    };
+    return axes;
+};
+const whichDataStructure = (data) => {
+    if (Array.isArray(data[0])) {
+        return data.map((arr, x) => {
+            let [low, high] = arr.sort();
+            return { x, low, high };
+        });
+    }
+    return data;
+};
+const scrubX = (data) => {
+    const blackboard = JSON.parse(JSON.stringify(data));
+    let labels = [];
+    if (Array.isArray(data)) {
+        // console.log("not grouped");
+        // Not grouped
+        blackboard.forEach((item, x) => {
+            if (typeof item === "object" && "x" in item) {
+                labels.push(item.x);
+                item.x = x;
+            }
+        });
+        return { labels, data: blackboard };
+    }
+};
+const processData = (data) => {
+    let groups = [];
+    if (data.datasets.length === 1) {
+        return {
+            data: whichDataStructure(data.datasets[0].data)
+        };
+    }
+    const result = {};
+    data.datasets.forEach((obj, index) => {
+        const groupName = obj.label ?? `Group ${index + 1}`;
+        groups.push(groupName);
+        result[groupName] = whichDataStructure(obj.data);
+    });
+    return { groups, data: result };
+};
+const determineChartTitle = (options) => {
+    if (options.plugins?.title?.text) {
+        if (Array.isArray(options.plugins.title.text)) {
+            return options.plugins.title.text.join(", ");
+        }
+        return options.plugins.title.text;
+    }
+    return "";
+};
+const determineCCElement = (canvas, provided) => {
+    if (provided) {
+        return provided;
+    }
+    const cc = document.createElement("div");
+    canvas.insertAdjacentElement("afterend", cc);
+    return cc;
+};
+const plugin = {
+    id: "chartjs2music",
+    afterInit: (chart, args, options) => {
+        const { valid, c2m_types, invalidType } = processChartType(chart);
+        if (!valid) {
+            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;
+        }
+        const axes = generateAxes(chart);
+        // Generate CC element
+        const cc = determineCCElement(chart.canvas, options.cc);
+        const { data, groups } = processData(chart.data);
+        // lastDataObj = JSON.stringify(data);
+        let scrub = scrubX(data);
+        if (scrub?.labels && scrub?.labels?.length > 0) { // Something was scrubbed
+            if (!chart.data.labels || chart.data.labels.length === 0) {
+                axes.x.valueLabels = scrub.labels.slice(0);
+            }
+        }
+        const c2mOptions = {
+            cc,
+            element: chart.canvas,
+            type: c2m_types,
+            data: scrub?.data ?? data,
+            title: determineChartTitle(chart.options),
+            axes,
+            options: {
+                // @ts-ignore
+                onFocusCallback: ({ slice, index }) => {
+                    try {
+                        const highlightElements = [{
+                                datasetIndex: groups?.indexOf(slice) ?? 0,
+                                index
+                            }];
+                        chart?.setActiveElements(highlightElements);
+                        chart?.tooltip?.setActiveElements(highlightElements, {});
+                        chart?.update();
+                    }
+                    catch (e) {
+                        // console.warn(e);
+                    }
+                }
+            }
+        };
+        if (options.audioEngine) {
+            // @ts-ignore
+            c2mOptions.audioEngine = options.audioEngine;
+        }
+        const { err, data: c2m } = c2mChart(c2mOptions);
+        // /* istanbul-ignore-next */
+        if (err) {
+            options.errorCallback?.(err);
+        }
+    },
+    // afterUpdate: (chart: Chart) => {
+    //     const {data} = processData(chart.data);
+    //     if(JSON.stringify(data) !== lastDataObj){
+    //         c2mChartRef?.setData(data);
+    //         lastDataObj = JSON.stringify(data);
+    //     }
+    // },
+    defaults: {
+        cc: null,
+        audioEngine: null,
+        errorCallback: null
+    }
+};
+
+export { plugin as default };

package/package.json

@@ -1,9 +1,13 @@
 {
   "name": "chartjs-plugin-chart2music",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "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"
+  },
   "files": ["dist/*"],
   "keywords": [
     "a11y",