Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
chartjs-plugin-chart2music
Advanced tools
chartjs-plugin-chart2music - npm Package Compare versions
Comparing version 0.1.4 to 0.1.5
@@ -210,92 +210,128 @@ var chartjs2music = (function (c2mChart) { | ||
| }; | ||
| 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 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 | ||
| }); | ||
| } | ||
| 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"; | ||
| } | ||
| else { | ||
| visible_groups.forEach((datasetIndex) => { | ||
| highlightElements.push({ | ||
| datasetIndex, | ||
| index | ||
| }); | ||
| }); | ||
| } | ||
| // 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); | ||
| 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 (c2m_types === "scatter") { | ||
| delete scrub?.data; | ||
| delete axes.x.valueLabels; | ||
| }; | ||
| if (Array.isArray(c2mOptions.data)) { | ||
| if (isNaN(c2mOptions.data[0])) { | ||
| c2mOptions.data = c2mOptions.data.map((point, index) => { | ||
| return { | ||
| ...point, | ||
| custom: { | ||
| group: 0, | ||
| index | ||
| } | ||
| }; | ||
| }); | ||
| } | ||
| 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: ({ point, index }) => { | ||
| try { | ||
| const highlightElements = []; | ||
| if ("custom" in point) { | ||
| highlightElements.push({ | ||
| datasetIndex: point.custom.group, | ||
| index: point.custom.index | ||
| }); | ||
| } | ||
| else { | ||
| const { visible_groups } = chartStates.get(chart); | ||
| visible_groups.forEach((datasetIndex) => { | ||
| highlightElements.push({ | ||
| datasetIndex, | ||
| index | ||
| }); | ||
| }); | ||
| } | ||
| chart?.setActiveElements(highlightElements); | ||
| chart?.tooltip?.setActiveElements(highlightElements, {}); | ||
| chart?.update(); | ||
| else { | ||
| c2mOptions.data = c2mOptions.data.map((num, index) => { | ||
| return { | ||
| x: index, | ||
| y: num, | ||
| custom: { | ||
| group: 0, | ||
| index | ||
| } | ||
| catch (e) { | ||
| // console.warn(e); | ||
| } | ||
| } | ||
| } | ||
| }; | ||
| if (Array.isArray(c2mOptions.data)) { | ||
| if (isNaN(c2mOptions.data[0])) { | ||
| c2mOptions.data = c2mOptions.data.map((point, 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 { | ||
| ...point, | ||
| x: index, | ||
| y: num, | ||
| custom: { | ||
| group: 0, | ||
| group: groupNumber, | ||
| index | ||
@@ -307,8 +343,7 @@ } | ||
| else { | ||
| c2mOptions.data = c2mOptions.data.map((num, index) => { | ||
| c2mOptions.data[groupName] = c2mOptions.data[groupName].map((point, index) => { | ||
| return { | ||
| x: index, | ||
| y: num, | ||
| ...point, | ||
| custom: { | ||
| group: 0, | ||
| group: groupNumber, | ||
| index | ||
@@ -319,55 +354,56 @@ } | ||
| } | ||
| } | ||
| 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; | ||
| } | ||
| 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([], {}); | ||
| chart.update(); | ||
| }); | ||
| // Show tooltip when the chart receives focus | ||
| chart.canvas.addEventListener("focus", () => { | ||
| displayPoint(chart); | ||
| }); | ||
| } | ||
| if (chart.config.options?.scales?.x?.stacked) { | ||
| c2mOptions.options.stack = true; | ||
| } | ||
| if (options.audioEngine) { | ||
| // @ts-ignore | ||
| c2mOptions.audioEngine = options.audioEngine; | ||
| } | ||
| if (c2mOptions.data.length === 0) { | ||
| return; | ||
| } | ||
| const { err, data: c2m } = c2mChart(c2mOptions); | ||
| chartStates.set(chart, { | ||
| c2m, | ||
| visible_groups: groups?.map((g, i) => i) | ||
| }); | ||
| // /* istanbul-ignore-next */ | ||
| if (err) { | ||
| options.errorCallback?.(err); | ||
| } | ||
| }, | ||
| afterDatasetUpdate: (chart, args) => { | ||
| afterDatasetUpdate: (chart, args, options) => { | ||
| if (!args.mode) { | ||
| return; | ||
| } | ||
| if (!chartStates.has(chart)) { | ||
| generateChart(chart, options); | ||
| } | ||
| const { c2m: ref, visible_groups } = chartStates.get(chart); | ||
@@ -377,3 +413,5 @@ if (!ref) { | ||
| } | ||
| // @ts-ignore | ||
| const groups = ref._groups.slice(0); | ||
| // @ts-ignore | ||
| if (ref._options.stack) { | ||
@@ -380,0 +418,0 @@ groups.shift(); |
| { | ||
| "name": "chartjs-plugin-chart2music", | ||
| "version": "0.1.4", | ||
| "version": "0.1.5", | ||
| "type": "module", | ||
@@ -41,3 +41,3 @@ "description": "Chart.js plugin for Chart2Music. Turns chart.js charts into music so the blind can hear data.", | ||
| "@sgratzl/chartjs-chart-boxplot": "4.2.7", | ||
| "@types/jest": "29.5.5", | ||
| "@types/jest": "29.5.6", | ||
| "canvas": "2.11.2", | ||
@@ -47,7 +47,7 @@ "chartjs-chart-wordcloud": "4.3.2", | ||
| "cross-env": "7.0.3", | ||
| "depcheck": "1.4.6", | ||
| "depcheck": "1.4.7", | ||
| "jest": "29.7.0", | ||
| "jest-environment-jsdom": "29.7.0", | ||
| "rimraf": "5.0.5", | ||
| "rollup": "4.1.4", | ||
| "rollup": "4.1.5", | ||
| "ts-jest": "29.1.1", | ||
@@ -54,0 +54,0 @@ "tslib": "2.6.2", |
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by1.64%
34257
- Lines of code
- increased by9.52%
874
No dependency changes