chartjs-plugin-chart2music 0.0.2 → 0.0.4

package/README.md

@@ -39,7 +39,8 @@ new Chart(canvasElement, {
 This plugin is currently in beta, so not all of the chart.js features are currently supported.
 
 A quick list of chart.js features we currently support includes:
-* Chart types: bar, line, pie, doughnut, polar, and combinations therein.
+* Chart types: bar, line, pie, doughnut, polar, radar, and combinations therein.
+* Boxplots using the `@sgratzl/chartjs-chart-boxplot` plugin (only support boxplots when there are no other chart types present)
 * Axes options: `title`, `min`, `max`, `type="linear"`, `type="logarithmic"`.
 * Chart title
 * Most data structures (not including `parsing` or non-standard axes identifiers)
@@ -55,4 +56,11 @@ Things we plan to support in the future:
 * Locale
 * Dataset visibility (when you show/hide a category from the legend)
 * Radar charts
-* Custom formatting for axis tick values
+* Custom formatting for axis tick values
+
+Plugins we plan to support in the future:
+* [chartjs-char-error-bars](https://www.npmjs.com/package/chartjs-chart-error-bars)
+* [chartjs-chart-matrix](https://www.npmjs.com/package/chartjs-chart-matrix)
+* [chartjs-chart-pcp](https://www.npmjs.com/package/chartjs-chart-pcp)
+* [chartjs-chart-wordcloud](https://www.npmjs.com/package/chartjs-chart-wordcloud)
+* [chartjs-plugin-zoom](https://www.npmjs.com/package/chartjs-plugin-zoom)

package/dist/plugin.js

@@ -0,0 +1,291 @@
+var chartjs2music = (function (c2mChart) {
+    'use strict';
+
+    const calcMedian = (nums) => (nums.length % 2) ? nums[Math.floor(nums.length / 2)] : (nums[nums.length / 2] + nums[nums.length / 2 - 1]) / 2;
+    const fiveNumberSummary = (nums) => {
+        const sortedNumbers = nums.sort();
+        let min, max, q1, q3;
+        const datamin = Math.min(...sortedNumbers);
+        const datamax = Math.max(...sortedNumbers);
+        const median = calcMedian(sortedNumbers);
+        const length = sortedNumbers.length;
+        if (length % 2) {
+            q1 = calcMedian(sortedNumbers.slice(0, Math.floor(length / 2)));
+            q3 = calcMedian(sortedNumbers.slice(Math.ceil(length % 2)));
+        }
+        else {
+            q1 = calcMedian(sortedNumbers.slice(0, length / 2 - 1));
+            q3 = calcMedian(sortedNumbers.slice(length / 2));
+        }
+        const iqr = q3 - q1;
+        if (datamax < q3 + iqr) {
+            max = datamax;
+        }
+        else {
+            max = sortedNumbers.reverse().find((num) => num < datamax) ?? datamax;
+        }
+        if (datamin < q1 - iqr) {
+            min = datamin;
+        }
+        else {
+            min = sortedNumbers.reverse().find((num) => num < datamin) ?? datamin;
+        }
+        const outlier = sortedNumbers.filter((num) => num < min || num > max);
+        return {
+            low: min,
+            high: max,
+            median,
+            q1,
+            q3,
+            ...(outlier.length > 0 ? { outlier } : {})
+        };
+    };
+    const whichBoxData = (data) => {
+        return data.map((row, index) => {
+            if (typeof row === "object" && "min" in row) {
+                return {
+                    ...row,
+                    low: row.min,
+                    high: row.max,
+                    x: index,
+                    ...("outliers" in row ? { outlier: row.outliers } : {})
+                };
+            }
+            if (Array.isArray(row)) {
+                return {
+                    ...fiveNumberSummary(row),
+                    x: index
+                };
+            }
+        });
+    };
+    const processBoxData = (data) => {
+        if (data.datasets.length === 1) {
+            return {
+                data: whichBoxData(data.datasets[0].data)
+            };
+        }
+        const groups = [];
+        const result = {};
+        data.datasets.forEach((obj, index) => {
+            const groupName = obj.label ?? `Group ${index + 1}`;
+            groups.push(groupName);
+            result[groupName] = whichBoxData(obj.data);
+        });
+        return { groups, data: result };
+    };
+
+    // let lastDataObj = "";
+    const chartjs_c2m_converter = {
+        bar: "bar",
+        line: "line",
+        pie: "pie",
+        polarArea: "bar",
+        doughnut: "pie",
+        boxplot: "box",
+        radar: "bar",
+        wordCloud: "bar"
+    };
+    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, c2m_types) => {
+        if (c2m_types === "box") {
+            return processBoxData(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);
+            if (chart.config.type === "wordCloud") {
+                delete axes.x.minimum;
+                delete axes.x.maximum;
+                delete axes.y.minimum;
+                delete axes.y.maximum;
+                if (!axes.x.label) {
+                    axes.x.label = "Word";
+                }
+                if (!axes.y.label) {
+                    axes.y.label = "Emphasis";
+                }
+            }
+            // Generate CC element
+            const cc = determineCCElement(chart.canvas, options.cc);
+            const { data, groups } = processData(chart.data, c2m_types);
+            // 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
+        }
+    };
+
+    return plugin;
+
+})(c2mChart);

package/dist/plugin.mjs

@@ -0,0 +1,288 @@
+import c2mChart from 'chart2music';
+
+const calcMedian = (nums) => (nums.length % 2) ? nums[Math.floor(nums.length / 2)] : (nums[nums.length / 2] + nums[nums.length / 2 - 1]) / 2;
+const fiveNumberSummary = (nums) => {
+    const sortedNumbers = nums.sort();
+    let min, max, q1, q3;
+    const datamin = Math.min(...sortedNumbers);
+    const datamax = Math.max(...sortedNumbers);
+    const median = calcMedian(sortedNumbers);
+    const length = sortedNumbers.length;
+    if (length % 2) {
+        q1 = calcMedian(sortedNumbers.slice(0, Math.floor(length / 2)));
+        q3 = calcMedian(sortedNumbers.slice(Math.ceil(length % 2)));
+    }
+    else {
+        q1 = calcMedian(sortedNumbers.slice(0, length / 2 - 1));
+        q3 = calcMedian(sortedNumbers.slice(length / 2));
+    }
+    const iqr = q3 - q1;
+    if (datamax < q3 + iqr) {
+        max = datamax;
+    }
+    else {
+        max = sortedNumbers.reverse().find((num) => num < datamax) ?? datamax;
+    }
+    if (datamin < q1 - iqr) {
+        min = datamin;
+    }
+    else {
+        min = sortedNumbers.reverse().find((num) => num < datamin) ?? datamin;
+    }
+    const outlier = sortedNumbers.filter((num) => num < min || num > max);
+    return {
+        low: min,
+        high: max,
+        median,
+        q1,
+        q3,
+        ...(outlier.length > 0 ? { outlier } : {})
+    };
+};
+const whichBoxData = (data) => {
+    return data.map((row, index) => {
+        if (typeof row === "object" && "min" in row) {
+            return {
+                ...row,
+                low: row.min,
+                high: row.max,
+                x: index,
+                ...("outliers" in row ? { outlier: row.outliers } : {})
+            };
+        }
+        if (Array.isArray(row)) {
+            return {
+                ...fiveNumberSummary(row),
+                x: index
+            };
+        }
+    });
+};
+const processBoxData = (data) => {
+    if (data.datasets.length === 1) {
+        return {
+            data: whichBoxData(data.datasets[0].data)
+        };
+    }
+    const groups = [];
+    const result = {};
+    data.datasets.forEach((obj, index) => {
+        const groupName = obj.label ?? `Group ${index + 1}`;
+        groups.push(groupName);
+        result[groupName] = whichBoxData(obj.data);
+    });
+    return { groups, data: result };
+};
+
+// let lastDataObj = "";
+const chartjs_c2m_converter = {
+    bar: "bar",
+    line: "line",
+    pie: "pie",
+    polarArea: "bar",
+    doughnut: "pie",
+    boxplot: "box",
+    radar: "bar",
+    wordCloud: "bar"
+};
+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, c2m_types) => {
+    if (c2m_types === "box") {
+        return processBoxData(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);
+        if (chart.config.type === "wordCloud") {
+            delete axes.x.minimum;
+            delete axes.x.maximum;
+            delete axes.y.minimum;
+            delete axes.y.maximum;
+            if (!axes.x.label) {
+                axes.x.label = "Word";
+            }
+            if (!axes.y.label) {
+                axes.y.label = "Emphasis";
+            }
+        }
+        // Generate CC element
+        const cc = determineCCElement(chart.canvas, options.cc);
+        const { data, groups } = processData(chart.data, c2m_types);
+        // 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,55 +1,59 @@
-{
-  "name": "chartjs-plugin-chart2music",
-  "version": "0.0.2",
-  "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",
-    "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"
-  }
-}
+{
+  "name": "chartjs-plugin-chart2music",
+  "version": "0.0.4",
+  "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",
+    "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",
+    "@sgratzl/chartjs-chart-boxplot": "^4.1.1",
+    "@types/jest": "^29.4.0",
+    "canvas": "^2.11.0",
+    "chartjs-chart-wordcloud": "^4.1.1",
+    "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"
+  }
+}