chartjs-plugin-chart2music 0.5.0 → 0.6.0

package/dist/plugin.amd.js

@@ -0,0 +1,456 @@
+define(['chart2music'], (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 };
+    };
+
+    const chartStates = new Map();
+    const chartjs_c2m_converter = {
+        bar: "bar",
+        line: "line",
+        pie: "pie",
+        polarArea: "bar",
+        doughnut: "pie",
+        boxplot: "box",
+        radar: "bar",
+        wordCloud: "bar",
+        scatter: "scatter"
+    };
+    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" && item !== null && "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 displayPoint = (chart) => {
+        if (!chartStates.has(chart)) {
+            return;
+        }
+        const { c2m: ref, visible_groups } = chartStates.get(chart);
+        const { point, index } = ref.getCurrent();
+        try {
+            const highlightElements = [];
+            if ("custom" in point) {
+                highlightElements.push({
+                    // @ts-ignore
+                    datasetIndex: point.custom.group,
+                    // @ts-ignore
+                    index: point.custom.index
+                });
+            }
+            else {
+                visible_groups.forEach((datasetIndex) => {
+                    highlightElements.push({
+                        datasetIndex,
+                        index
+                    });
+                });
+            }
+            chart?.setActiveElements(highlightElements);
+            chart?.tooltip?.setActiveElements(highlightElements, {});
+            chart?.update();
+        }
+        catch (e) {
+            // console.warn(e);
+        }
+    };
+    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);
+        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);
+            }
+        }
+        if (c2m_types === "scatter") {
+            delete scrub?.data;
+            delete axes.x.valueLabels;
+        }
+        axes = {
+            ...axes,
+            x: {
+                ...axes.x,
+                ...(options.axes?.x)
+            },
+            y: {
+                ...axes.y,
+                ...(options.axes?.y)
+            },
+        };
+        const c2mOptions = {
+            cc,
+            element: chart.canvas,
+            type: c2m_types,
+            data: scrub?.data ?? data,
+            title: determineChartTitle(chart.options),
+            axes,
+            options: {
+                // @ts-ignore
+                onFocusCallback: () => {
+                    displayPoint(chart);
+                }
+            }
+        };
+        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
+                            }
+                        };
+                    });
+                }
+            });
+        }
+        // @ts-ignore
+        if (chart.config.options?.scales?.x?.stacked) {
+            // @ts-ignore
+            c2mOptions.options.stack = true;
+        }
+        // @ts-ignore
+        if (options.audioEngine) {
+            // @ts-ignore
+            c2mOptions.audioEngine = options.audioEngine;
+        }
+        if (c2mOptions.data.length === 0) {
+            return;
+        }
+        if (options.lang) {
+            c2mOptions.lang = options.lang;
+        }
+        const { err, data: c2m } = c2mChart(c2mOptions);
+        /* istanbul-ignore-next */
+        if (err) {
+            // @ts-ignore
+            options.errorCallback?.(err);
+            return;
+        }
+        if (!c2m) {
+            return;
+        }
+        chartStates.set(chart, {
+            c2m,
+            visible_groups: groups?.map((g, i) => i) ?? []
+        });
+    };
+    const plugin = {
+        id: "chartjs2music",
+        afterInit: (chart, args, options) => {
+            if (!chartStates.has(chart)) {
+                generateChart(chart, options);
+                // Remove tooltip when the chart blurs
+                chart.canvas.addEventListener("blur", () => {
+                    chart.setActiveElements([]);
+                    chart.tooltip?.setActiveElements([], {});
+                    try {
+                        chart.update();
+                    }
+                    catch (e) {
+                        // console.warn(e);
+                    }
+                });
+                // Show tooltip when the chart receives focus
+                chart.canvas.addEventListener("focus", () => {
+                    displayPoint(chart);
+                });
+            }
+        },
+        afterDatasetUpdate: (chart, args, options) => {
+            if (!args.mode) {
+                return;
+            }
+            if (!chartStates.has(chart)) {
+                generateChart(chart, options);
+            }
+            const { c2m: ref, visible_groups } = chartStates.get(chart);
+            if (!ref) {
+                return;
+            }
+            // @ts-ignore
+            const groups = ref._groups.slice(0);
+            // @ts-ignore
+            if (ref._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);
+                }
+                return;
+            }
+            if (args.mode === "show") {
+                const err = ref.setCategoryVisibility(groups[args.index], true);
+                visible_groups.push(args.index);
+                if (err) {
+                    console.error(err);
+                }
+                return;
+            }
+        },
+        afterDestroy: (chart) => {
+            const { c2m: ref } = chartStates.get(chart);
+            if (!ref) {
+                return;
+            }
+            ref.cleanUp();
+        },
+        defaults: {
+            cc: null,
+            audioEngine: null,
+            errorCallback: null
+        }
+    };
+
+    return plugin;
+
+}));

package/dist/plugin.cjs

@@ -5,23 +5,23 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 var _chart2music = _interopRequireDefault(require("chart2music"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
 function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
-function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
+function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 var calcMedian = function calcMedian(nums) {
   return nums.length % 2 ? nums[Math.floor(nums.length / 2)] : (nums[nums.length / 2] + nums[nums.length / 2 - 1]) / 2;
 };

package/dist/plugin.d.ts

@@ -0,0 +1 @@
+declare module "chartjs-plugin-chart2music";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "chartjs-plugin-chart2music",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "type": "module",
   "description": "Chart.js plugin for Chart2Music. Turns chart.js charts into music so the blind can hear data.",
   "main": "dist/plugin.js",
@@ -9,6 +9,7 @@
     "import": "./dist/plugin.mjs",
     "require": "./dist/plugin.cjs"
   },
+  "types": "dist/plugin.d.ts",
   "files": [
     "dist/*"
   ],
@@ -35,32 +36,33 @@
     "build-cjs": "babel ./dist/plugin.mjs --out-file ./dist/plugin.cjs",
     "test": "cross-env NODE_OPTIONS=--experimental-vm-modules jest",
     "depcheck": "depcheck",
-    "clean": "rimraf dist coverage"
+    "clean": "rimraf dist coverage",
+    "prepack": "npm run clean && npm run build"
   },
   "devDependencies": {
-    "@babel/cli": "7.24.1",
-    "@babel/core": "7.24.4",
-    "@babel/plugin-transform-modules-commonjs": "7.24.1",
-    "@babel/preset-env": "7.24.4",
-    "@rollup/plugin-typescript": "11.1.6",
-    "@sgratzl/chartjs-chart-boxplot": "4.3.1",
-    "@types/jest": "29.5.12",
+    "@babel/cli": "7.25.6",
+    "@babel/core": "7.25.2",
+    "@babel/plugin-transform-modules-commonjs": "7.24.8",
+    "@babel/preset-env": "7.25.4",
+    "@rollup/plugin-typescript": "12.1.0",
+    "@sgratzl/chartjs-chart-boxplot": "4.4.2",
+    "@types/jest": "29.5.13",
     "canvas": "2.11.2",
-    "chartjs-chart-wordcloud": "4.4.0",
-    "chartjs-plugin-a11y-legend": "0.1.1",
+    "chartjs-chart-wordcloud": "4.4.2",
+    "chartjs-plugin-a11y-legend": "0.1.2",
     "cross-env": "7.0.3",
     "depcheck": "1.4.7",
     "jest": "29.7.0",
     "jest-environment-jsdom": "29.7.0",
-    "rimraf": "5.0.5",
-    "rollup": "4.14.0",
-    "ts-jest": "29.1.2",
-    "tslib": "2.6.2",
-    "typescript": "5.4.3",
-    "vite": "5.2.8"
+    "rollup": "4.22.5",
+    "rollup-plugin-copy": "3.5.0",
+    "ts-jest": "29.2.5",
+    "tslib": "2.7.0",
+    "typescript": "5.6.2",
+    "vite": "5.4.8"
   },
   "dependencies": {
-    "chart.js": "4.4.2",
-    "chart2music": "1.16.1"
+    "chart.js": "4.4.4",
+    "chart2music": "1.17.0"
   }
 }