chartjs-plugin-chart2music 0.0.4 → 0.0.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/README.md +3 -1
  2. package/dist/plugin.js +78 -6
  3. package/dist/plugin.mjs +78 -6
  4. package/package.json +2 -2
package/README.md CHANGED
@@ -5,6 +5,8 @@ chartjs plugin for chart2music.
5
5
 
6
6
  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.
7
7
 
8
+ [Check out our CodePen collection of examples using the plugin.](https://codepen.io/collection/VYEvEQ)
9
+
8
10
  ## Getting started
9
11
 
10
12
  Add the chartjs2music plugin to your existing chart.js code like this:
@@ -41,6 +43,7 @@ This plugin is currently in beta, so not all of the chart.js features are curren
41
43
  A quick list of chart.js features we currently support includes:
42
44
  * Chart types: bar, line, pie, doughnut, polar, radar, and combinations therein.
43
45
  * Boxplots using the `@sgratzl/chartjs-chart-boxplot` plugin (only support boxplots when there are no other chart types present)
46
+ * Wordclouds using the `chartjs-chart-wordcloud` plugin
44
47
  * Axes options: `title`, `min`, `max`, `type="linear"`, `type="logarithmic"`.
45
48
  * Chart title
46
49
  * Most data structures (not including `parsing` or non-standard axes identifiers)
@@ -62,5 +65,4 @@ Plugins we plan to support in the future:
62
65
  * [chartjs-char-error-bars](https://www.npmjs.com/package/chartjs-chart-error-bars)
63
66
  * [chartjs-chart-matrix](https://www.npmjs.com/package/chartjs-chart-matrix)
64
67
  * [chartjs-chart-pcp](https://www.npmjs.com/package/chartjs-chart-pcp)
65
- * [chartjs-chart-wordcloud](https://www.npmjs.com/package/chartjs-chart-wordcloud)
66
68
  * [chartjs-plugin-zoom](https://www.npmjs.com/package/chartjs-plugin-zoom)
package/dist/plugin.js CHANGED
@@ -84,7 +84,8 @@ var chartjs2music = (function (c2mChart) {
84
84
  doughnut: "pie",
85
85
  boxplot: "box",
86
86
  radar: "bar",
87
- wordCloud: "bar"
87
+ wordCloud: "bar",
88
+ scatter: "scatter"
88
89
  };
89
90
  const processChartType = (chart) => {
90
91
  const topLevelType = chart.config.type;
@@ -237,6 +238,10 @@ var chartjs2music = (function (c2mChart) {
237
238
  axes.x.valueLabels = scrub.labels.slice(0);
238
239
  }
239
240
  }
241
+ if (c2m_types === "scatter") {
242
+ delete scrub?.data;
243
+ delete axes.x.valueLabels;
244
+ }
240
245
  const c2mOptions = {
241
246
  cc,
242
247
  element: chart.canvas,
@@ -246,12 +251,23 @@ var chartjs2music = (function (c2mChart) {
246
251
  axes,
247
252
  options: {
248
253
  // @ts-ignore
249
- onFocusCallback: ({ slice, index }) => {
254
+ onFocusCallback: ({ point, index }) => {
250
255
  try {
251
- const highlightElements = [{
252
- datasetIndex: groups?.indexOf(slice) ?? 0,
253
- index
254
- }];
256
+ const highlightElements = [];
257
+ if ("custom" in point) {
258
+ highlightElements.push({
259
+ datasetIndex: point.custom.group,
260
+ index: point.custom.index
261
+ });
262
+ }
263
+ else {
264
+ for (let i = 0; i < (groups?.length ?? 1); i++) {
265
+ highlightElements.push({
266
+ datasetIndex: i,
267
+ index
268
+ });
269
+ }
270
+ }
255
271
  chart?.setActiveElements(highlightElements);
256
272
  chart?.tooltip?.setActiveElements(highlightElements, {});
257
273
  chart?.update();
@@ -262,6 +278,62 @@ var chartjs2music = (function (c2mChart) {
262
278
  }
263
279
  }
264
280
  };
281
+ if (Array.isArray(c2mOptions.data)) {
282
+ if (isNaN(c2mOptions.data[0])) {
283
+ c2mOptions.data = c2mOptions.data.map((point, index) => {
284
+ return {
285
+ ...point,
286
+ custom: {
287
+ group: 0,
288
+ index
289
+ }
290
+ };
291
+ });
292
+ }
293
+ else {
294
+ c2mOptions.data = c2mOptions.data.map((num, index) => {
295
+ return {
296
+ x: index,
297
+ y: num,
298
+ custom: {
299
+ group: 0,
300
+ index
301
+ }
302
+ };
303
+ });
304
+ }
305
+ }
306
+ else {
307
+ const groups = Object.keys(c2mOptions.data);
308
+ groups.forEach((groupName, groupNumber) => {
309
+ if (!isNaN(c2mOptions.data[groupName][0])) {
310
+ c2mOptions.data[groupName] = c2mOptions.data[groupName].map((num, index) => {
311
+ return {
312
+ x: index,
313
+ y: num,
314
+ custom: {
315
+ group: groupNumber,
316
+ index
317
+ }
318
+ };
319
+ });
320
+ }
321
+ else {
322
+ c2mOptions.data[groupName] = c2mOptions.data[groupName].map((point, index) => {
323
+ return {
324
+ ...point,
325
+ custom: {
326
+ group: groupNumber,
327
+ index
328
+ }
329
+ };
330
+ });
331
+ }
332
+ });
333
+ }
334
+ if (chart.config.options?.scales?.x?.stacked) {
335
+ c2mOptions.options.stack = true;
336
+ }
265
337
  if (options.audioEngine) {
266
338
  // @ts-ignore
267
339
  c2mOptions.audioEngine = options.audioEngine;
package/dist/plugin.mjs CHANGED
@@ -83,7 +83,8 @@ const chartjs_c2m_converter = {
83
83
  doughnut: "pie",
84
84
  boxplot: "box",
85
85
  radar: "bar",
86
- wordCloud: "bar"
86
+ wordCloud: "bar",
87
+ scatter: "scatter"
87
88
  };
88
89
  const processChartType = (chart) => {
89
90
  const topLevelType = chart.config.type;
@@ -236,6 +237,10 @@ const plugin = {
236
237
  axes.x.valueLabels = scrub.labels.slice(0);
237
238
  }
238
239
  }
240
+ if (c2m_types === "scatter") {
241
+ delete scrub?.data;
242
+ delete axes.x.valueLabels;
243
+ }
239
244
  const c2mOptions = {
240
245
  cc,
241
246
  element: chart.canvas,
@@ -245,12 +250,23 @@ const plugin = {
245
250
  axes,
246
251
  options: {
247
252
  // @ts-ignore
248
- onFocusCallback: ({ slice, index }) => {
253
+ onFocusCallback: ({ point, index }) => {
249
254
  try {
250
- const highlightElements = [{
251
- datasetIndex: groups?.indexOf(slice) ?? 0,
252
- index
253
- }];
255
+ const highlightElements = [];
256
+ if ("custom" in point) {
257
+ highlightElements.push({
258
+ datasetIndex: point.custom.group,
259
+ index: point.custom.index
260
+ });
261
+ }
262
+ else {
263
+ for (let i = 0; i < (groups?.length ?? 1); i++) {
264
+ highlightElements.push({
265
+ datasetIndex: i,
266
+ index
267
+ });
268
+ }
269
+ }
254
270
  chart?.setActiveElements(highlightElements);
255
271
  chart?.tooltip?.setActiveElements(highlightElements, {});
256
272
  chart?.update();
@@ -261,6 +277,62 @@ const plugin = {
261
277
  }
262
278
  }
263
279
  };
280
+ if (Array.isArray(c2mOptions.data)) {
281
+ if (isNaN(c2mOptions.data[0])) {
282
+ c2mOptions.data = c2mOptions.data.map((point, index) => {
283
+ return {
284
+ ...point,
285
+ custom: {
286
+ group: 0,
287
+ index
288
+ }
289
+ };
290
+ });
291
+ }
292
+ else {
293
+ c2mOptions.data = c2mOptions.data.map((num, index) => {
294
+ return {
295
+ x: index,
296
+ y: num,
297
+ custom: {
298
+ group: 0,
299
+ index
300
+ }
301
+ };
302
+ });
303
+ }
304
+ }
305
+ else {
306
+ const groups = Object.keys(c2mOptions.data);
307
+ groups.forEach((groupName, groupNumber) => {
308
+ if (!isNaN(c2mOptions.data[groupName][0])) {
309
+ c2mOptions.data[groupName] = c2mOptions.data[groupName].map((num, index) => {
310
+ return {
311
+ x: index,
312
+ y: num,
313
+ custom: {
314
+ group: groupNumber,
315
+ index
316
+ }
317
+ };
318
+ });
319
+ }
320
+ else {
321
+ c2mOptions.data[groupName] = c2mOptions.data[groupName].map((point, index) => {
322
+ return {
323
+ ...point,
324
+ custom: {
325
+ group: groupNumber,
326
+ index
327
+ }
328
+ };
329
+ });
330
+ }
331
+ });
332
+ }
333
+ if (chart.config.options?.scales?.x?.stacked) {
334
+ c2mOptions.options.stack = true;
335
+ }
264
336
  if (options.audioEngine) {
265
337
  // @ts-ignore
266
338
  c2mOptions.audioEngine = options.audioEngine;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "chartjs-plugin-chart2music",
3
- "version": "0.0.4",
3
+ "version": "0.0.5",
4
4
  "type": "module",
5
5
  "description": "Chart.js plugin for Chart2Music. Turns chart.js charts into music so the blind can hear data.",
6
6
  "main": "dist/plugin.js",
@@ -54,6 +54,6 @@
54
54
  },
55
55
  "dependencies": {
56
56
  "chart.js": "^4.2.1",
57
- "chart2music": "^1.8.2"
57
+ "chart2music": "^1.9.0"
58
58
  }
59
59
  }