chartjs-plugin-chart2music 0.0.3 → 0.0.5

package/README.md

@@ -5,6 +5,8 @@ chartjs plugin for chart2music.
 
 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.
 
+[Check out our CodePen collection of examples using the plugin.](https://codepen.io/collection/VYEvEQ)
+
 ## Getting started
 
 Add the chartjs2music plugin to your existing chart.js code like this:
@@ -39,7 +41,9 @@ 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)
+* Wordclouds using the `chartjs-chart-wordcloud` plugin
 * Axes options: `title`, `min`, `max`, `type="linear"`, `type="logarithmic"`.
 * Chart title
 * Most data structures (not including `parsing` or non-standard axes identifiers)
@@ -55,4 +59,10 @@ 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-plugin-zoom](https://www.npmjs.com/package/chartjs-plugin-zoom)

package/dist/plugin.js

@@ -1,13 +1,91 @@
 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"
+        doughnut: "pie",
+        boxplot: "box",
+        radar: "bar",
+        wordCloud: "bar",
+        scatter: "scatter"
     };
     const processChartType = (chart) => {
         const topLevelType = chart.config.type;
@@ -94,7 +172,10 @@ var chartjs2music = (function (c2mChart) {
             return { labels, data: blackboard };
         }
     };
-    const processData = (data) => {
+    const processData = (data, c2m_types) => {
+        if (c2m_types === "box") {
+            return processBoxData(data);
+        }
         let groups = [];
         if (data.datasets.length === 1) {
             return {
@@ -135,9 +216,21 @@ var chartjs2music = (function (c2mChart) {
                 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);
+            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
@@ -145,6 +238,10 @@ var chartjs2music = (function (c2mChart) {
                     axes.x.valueLabels = scrub.labels.slice(0);
                 }
             }
+            if (c2m_types === "scatter") {
+                delete scrub?.data;
+                delete axes.x.valueLabels;
+            }
             const c2mOptions = {
                 cc,
                 element: chart.canvas,
@@ -154,12 +251,23 @@ var chartjs2music = (function (c2mChart) {
                 axes,
                 options: {
                     // @ts-ignore
-                    onFocusCallback: ({ slice, index }) => {
+                    onFocusCallback: ({ point, index }) => {
                         try {
-                            const highlightElements = [{
-                                    datasetIndex: groups?.indexOf(slice) ?? 0,
-                                    index
-                                }];
+                            const highlightElements = [];
+                            if ("custom" in point) {
+                                highlightElements.push({
+                                    datasetIndex: point.custom.group,
+                                    index: point.custom.index
+                                });
+                            }
+                            else {
+                                for (let i = 0; i < (groups?.length ?? 1); i++) {
+                                    highlightElements.push({
+                                        datasetIndex: i,
+                                        index
+                                    });
+                                }
+                            }
                             chart?.setActiveElements(highlightElements);
                             chart?.tooltip?.setActiveElements(highlightElements, {});
                             chart?.update();
@@ -170,6 +278,62 @@ var chartjs2music = (function (c2mChart) {
                     }
                 }
             };
+            if (Array.isArray(c2mOptions.data)) {
+                if (isNaN(c2mOptions.data[0])) {
+                    c2mOptions.data = c2mOptions.data.map((point, index) => {
+                        return {
+                            ...point,
+                            custom: {
+                                group: 0,
+                                index
+                            }
+                        };
+                    });
+                }
+                else {
+                    c2mOptions.data = c2mOptions.data.map((num, index) => {
+                        return {
+                            x: index,
+                            y: num,
+                            custom: {
+                                group: 0,
+                                index
+                            }
+                        };
+                    });
+                }
+            }
+            else {
+                const groups = Object.keys(c2mOptions.data);
+                groups.forEach((groupName, groupNumber) => {
+                    if (!isNaN(c2mOptions.data[groupName][0])) {
+                        c2mOptions.data[groupName] = c2mOptions.data[groupName].map((num, index) => {
+                            return {
+                                x: index,
+                                y: num,
+                                custom: {
+                                    group: groupNumber,
+                                    index
+                                }
+                            };
+                        });
+                    }
+                    else {
+                        c2mOptions.data[groupName] = c2mOptions.data[groupName].map((point, index) => {
+                            return {
+                                ...point,
+                                custom: {
+                                    group: groupNumber,
+                                    index
+                                }
+                            };
+                        });
+                    }
+                });
+            }
+            if (chart.config.options?.scales?.x?.stacked) {
+                c2mOptions.options.stack = true;
+            }
             if (options.audioEngine) {
                 // @ts-ignore
                 c2mOptions.audioEngine = options.audioEngine;

package/dist/plugin.mjs

@@ -1,12 +1,90 @@
 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"
+    doughnut: "pie",
+    boxplot: "box",
+    radar: "bar",
+    wordCloud: "bar",
+    scatter: "scatter"
 };
 const processChartType = (chart) => {
     const topLevelType = chart.config.type;
@@ -93,7 +171,10 @@ const scrubX = (data) => {
         return { labels, data: blackboard };
     }
 };
-const processData = (data) => {
+const processData = (data, c2m_types) => {
+    if (c2m_types === "box") {
+        return processBoxData(data);
+    }
     let groups = [];
     if (data.datasets.length === 1) {
         return {
@@ -134,9 +215,21 @@ const plugin = {
             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);
+        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
@@ -144,6 +237,10 @@ const plugin = {
                 axes.x.valueLabels = scrub.labels.slice(0);
             }
         }
+        if (c2m_types === "scatter") {
+            delete scrub?.data;
+            delete axes.x.valueLabels;
+        }
         const c2mOptions = {
             cc,
             element: chart.canvas,
@@ -153,12 +250,23 @@ const plugin = {
             axes,
             options: {
                 // @ts-ignore
-                onFocusCallback: ({ slice, index }) => {
+                onFocusCallback: ({ point, index }) => {
                     try {
-                        const highlightElements = [{
-                                datasetIndex: groups?.indexOf(slice) ?? 0,
-                                index
-                            }];
+                        const highlightElements = [];
+                        if ("custom" in point) {
+                            highlightElements.push({
+                                datasetIndex: point.custom.group,
+                                index: point.custom.index
+                            });
+                        }
+                        else {
+                            for (let i = 0; i < (groups?.length ?? 1); i++) {
+                                highlightElements.push({
+                                    datasetIndex: i,
+                                    index
+                                });
+                            }
+                        }
                         chart?.setActiveElements(highlightElements);
                         chart?.tooltip?.setActiveElements(highlightElements, {});
                         chart?.update();
@@ -169,6 +277,62 @@ const plugin = {
                 }
             }
         };
+        if (Array.isArray(c2mOptions.data)) {
+            if (isNaN(c2mOptions.data[0])) {
+                c2mOptions.data = c2mOptions.data.map((point, index) => {
+                    return {
+                        ...point,
+                        custom: {
+                            group: 0,
+                            index
+                        }
+                    };
+                });
+            }
+            else {
+                c2mOptions.data = c2mOptions.data.map((num, index) => {
+                    return {
+                        x: index,
+                        y: num,
+                        custom: {
+                            group: 0,
+                            index
+                        }
+                    };
+                });
+            }
+        }
+        else {
+            const groups = Object.keys(c2mOptions.data);
+            groups.forEach((groupName, groupNumber) => {
+                if (!isNaN(c2mOptions.data[groupName][0])) {
+                    c2mOptions.data[groupName] = c2mOptions.data[groupName].map((num, index) => {
+                        return {
+                            x: index,
+                            y: num,
+                            custom: {
+                                group: groupNumber,
+                                index
+                            }
+                        };
+                    });
+                }
+                else {
+                    c2mOptions.data[groupName] = c2mOptions.data[groupName].map((point, index) => {
+                        return {
+                            ...point,
+                            custom: {
+                                group: groupNumber,
+                                index
+                            }
+                        };
+                    });
+                }
+            });
+        }
+        if (chart.config.options?.scales?.x?.stacked) {
+            c2mOptions.options.stack = true;
+        }
         if (options.audioEngine) {
             // @ts-ignore
             c2mOptions.audioEngine = options.audioEngine;

package/package.json

@@ -1,55 +1,59 @@
-{
-  "name": "chartjs-plugin-chart2music",
-  "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",
-    "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.5",
+  "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.9.0"
+  }
+}