chartjs-plugin-chart2music 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 julianna-langston
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,23 @@
+# chartjs2music
+chartjs plugin for chart2music
+
+## Getting started
+
+Add the chartjs2music plugin to your existing chart.js code like this:
+
+```js
+import {Chart} from "chart.js/auto";
+import chartjs2music from "chartjs2music";
+
+Chart.register(chartjs2music);
+```
+
+## Contributing
+
+To get started:
+
+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`.
+
+For tests, run `yarn test`.

package/dist/plugin.js

@@ -0,0 +1,201 @@
+var chartjs2music = (function (exports, c2mChart) {
+    'use strict';
+
+    // 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
+        }
+    };
+
+    exports.plugin = plugin;
+
+    return exports;
+
+})({}, c2mChart);

package/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "chartjs-plugin-chart2music",
+  "version": "0.0.1",
+  "type": "module",
+  "description": "Chart.js plugin for Chart2Music. Turns chart.js charts into music so the blind can hear data.",
+  "main": "dist/plugin.js",
+  "files": ["dist/*"],
+  "keywords": [
+    "a11y",
+    "accessibility",
+    "chart.js",
+    "chart",
+    "dataviz",
+    "screen reader",
+    "sonification"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/julianna-langston/chartjs2music"
+  },
+  "bugs": {
+    "url": "https://github.com/julianna-langston/chartjs2music/issues"
+  },
+  "license": "MIT",
+  "scripts": {
+    "start": "vite",
+    "build": "rollup -c rollup.config.js --silent",
+    "test": "cross-env NODE_OPTIONS=--experimental-vm-modules jest",
+    "depcheck": "depcheck",
+    "clean": "rimraf dist coverage"
+  },
+  "devDependencies": {
+    "@rollup/plugin-typescript": "^11.0.0",
+    "@types/jest": "^29.4.0",
+    "canvas": "^2.11.0",
+    "cross-env": "^7.0.3",
+    "depcheck": "^1.4.3",
+    "jest": "^29.4.2",
+    "jest-environment-jsdom": "^29.4.2",
+    "rimraf": "^4.1.2",
+    "rollup": "^3.15.0",
+    "ts-jest": "^29.0.5",
+    "tslib": "^2.5.0",
+    "typescript": "^4.9.3",
+    "vite": "^4.1.0"
+  },
+  "dependencies": {
+    "chart.js": "^4.2.1",
+    "chart2music": "^1.8.2"
+  }
+}