chartjs-plugin-chart2music 0.1.0 → 0.1.1
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.
- package/dist/plugin.js +409 -0
- package/dist/plugin.mjs +406 -0
- package/package.json +1 -1
package/dist/plugin.js
ADDED
|
@@ -0,0 +1,409 @@
|
|
|
1
|
+
var chartjs2music = (function (c2mChart) {
|
|
2
|
+
'use strict';
|
|
3
|
+
|
|
4
|
+
const calcMedian = (nums) => (nums.length % 2) ? nums[Math.floor(nums.length / 2)] : (nums[nums.length / 2] + nums[nums.length / 2 - 1]) / 2;
|
|
5
|
+
const fiveNumberSummary = (nums) => {
|
|
6
|
+
const sortedNumbers = nums.sort();
|
|
7
|
+
let min, max, q1, q3;
|
|
8
|
+
const datamin = Math.min(...sortedNumbers);
|
|
9
|
+
const datamax = Math.max(...sortedNumbers);
|
|
10
|
+
const median = calcMedian(sortedNumbers);
|
|
11
|
+
const length = sortedNumbers.length;
|
|
12
|
+
if (length % 2) {
|
|
13
|
+
q1 = calcMedian(sortedNumbers.slice(0, Math.floor(length / 2)));
|
|
14
|
+
q3 = calcMedian(sortedNumbers.slice(Math.ceil(length % 2)));
|
|
15
|
+
}
|
|
16
|
+
else {
|
|
17
|
+
q1 = calcMedian(sortedNumbers.slice(0, length / 2 - 1));
|
|
18
|
+
q3 = calcMedian(sortedNumbers.slice(length / 2));
|
|
19
|
+
}
|
|
20
|
+
const iqr = q3 - q1;
|
|
21
|
+
if (datamax < q3 + iqr) {
|
|
22
|
+
max = datamax;
|
|
23
|
+
}
|
|
24
|
+
else {
|
|
25
|
+
max = sortedNumbers.reverse().find((num) => num < datamax) ?? datamax;
|
|
26
|
+
}
|
|
27
|
+
if (datamin < q1 - iqr) {
|
|
28
|
+
min = datamin;
|
|
29
|
+
}
|
|
30
|
+
else {
|
|
31
|
+
min = sortedNumbers.reverse().find((num) => num < datamin) ?? datamin;
|
|
32
|
+
}
|
|
33
|
+
const outlier = sortedNumbers.filter((num) => num < min || num > max);
|
|
34
|
+
return {
|
|
35
|
+
low: min,
|
|
36
|
+
high: max,
|
|
37
|
+
median,
|
|
38
|
+
q1,
|
|
39
|
+
q3,
|
|
40
|
+
...(outlier.length > 0 ? { outlier } : {})
|
|
41
|
+
};
|
|
42
|
+
};
|
|
43
|
+
const whichBoxData = (data) => {
|
|
44
|
+
return data.map((row, index) => {
|
|
45
|
+
if (typeof row === "object" && "min" in row) {
|
|
46
|
+
return {
|
|
47
|
+
...row,
|
|
48
|
+
low: row.min,
|
|
49
|
+
high: row.max,
|
|
50
|
+
x: index,
|
|
51
|
+
...("outliers" in row ? { outlier: row.outliers } : {})
|
|
52
|
+
};
|
|
53
|
+
}
|
|
54
|
+
if (Array.isArray(row)) {
|
|
55
|
+
return {
|
|
56
|
+
...fiveNumberSummary(row),
|
|
57
|
+
x: index
|
|
58
|
+
};
|
|
59
|
+
}
|
|
60
|
+
});
|
|
61
|
+
};
|
|
62
|
+
const processBoxData = (data) => {
|
|
63
|
+
if (data.datasets.length === 1) {
|
|
64
|
+
return {
|
|
65
|
+
data: whichBoxData(data.datasets[0].data)
|
|
66
|
+
};
|
|
67
|
+
}
|
|
68
|
+
const groups = [];
|
|
69
|
+
const result = {};
|
|
70
|
+
data.datasets.forEach((obj, index) => {
|
|
71
|
+
const groupName = obj.label ?? `Group ${index + 1}`;
|
|
72
|
+
groups.push(groupName);
|
|
73
|
+
result[groupName] = whichBoxData(obj.data);
|
|
74
|
+
});
|
|
75
|
+
return { groups, data: result };
|
|
76
|
+
};
|
|
77
|
+
|
|
78
|
+
const chartjs_c2m_converter = {
|
|
79
|
+
bar: "bar",
|
|
80
|
+
line: "line",
|
|
81
|
+
pie: "pie",
|
|
82
|
+
polarArea: "bar",
|
|
83
|
+
doughnut: "pie",
|
|
84
|
+
boxplot: "box",
|
|
85
|
+
radar: "bar",
|
|
86
|
+
wordCloud: "bar",
|
|
87
|
+
scatter: "scatter"
|
|
88
|
+
};
|
|
89
|
+
const processChartType = (chart) => {
|
|
90
|
+
const topLevelType = chart.config.type;
|
|
91
|
+
const panelTypes = chart.data.datasets.map(({ type }) => type ?? topLevelType);
|
|
92
|
+
const invalid = panelTypes.find((t) => !(t in chartjs_c2m_converter));
|
|
93
|
+
if (invalid) {
|
|
94
|
+
return {
|
|
95
|
+
valid: false,
|
|
96
|
+
invalidType: invalid
|
|
97
|
+
};
|
|
98
|
+
}
|
|
99
|
+
if ([...new Set(panelTypes)].length === 1) {
|
|
100
|
+
return {
|
|
101
|
+
valid: true,
|
|
102
|
+
c2m_types: chartjs_c2m_converter[panelTypes[0]]
|
|
103
|
+
};
|
|
104
|
+
}
|
|
105
|
+
return {
|
|
106
|
+
valid: true,
|
|
107
|
+
c2m_types: panelTypes.map((t) => chartjs_c2m_converter[t])
|
|
108
|
+
};
|
|
109
|
+
};
|
|
110
|
+
const generateAxisInfo = (chartAxisInfo, chart) => {
|
|
111
|
+
const axis = {};
|
|
112
|
+
if (chartAxisInfo?.min) {
|
|
113
|
+
if (typeof chartAxisInfo.min === "string") {
|
|
114
|
+
axis.minimum = chart.data.labels.indexOf(chartAxisInfo.min);
|
|
115
|
+
}
|
|
116
|
+
else {
|
|
117
|
+
axis.minimum = chartAxisInfo.min;
|
|
118
|
+
}
|
|
119
|
+
}
|
|
120
|
+
if (chartAxisInfo?.max) {
|
|
121
|
+
if (typeof chartAxisInfo.max === "string") {
|
|
122
|
+
axis.maximum = chart.data.labels.indexOf(chartAxisInfo.max);
|
|
123
|
+
}
|
|
124
|
+
else {
|
|
125
|
+
axis.maximum = chartAxisInfo.max;
|
|
126
|
+
}
|
|
127
|
+
}
|
|
128
|
+
const label = chartAxisInfo?.title?.text;
|
|
129
|
+
if (label) {
|
|
130
|
+
axis.label = label;
|
|
131
|
+
}
|
|
132
|
+
if (chartAxisInfo?.type === "logarithmic") {
|
|
133
|
+
axis.type = "log10";
|
|
134
|
+
}
|
|
135
|
+
return axis;
|
|
136
|
+
};
|
|
137
|
+
const generateAxes = (chart) => {
|
|
138
|
+
const axes = {
|
|
139
|
+
x: {
|
|
140
|
+
...generateAxisInfo(chart.options?.scales?.x, chart),
|
|
141
|
+
valueLabels: chart.data.labels.slice(0)
|
|
142
|
+
},
|
|
143
|
+
y: {
|
|
144
|
+
...generateAxisInfo(chart.options?.scales?.y, chart),
|
|
145
|
+
format: (value) => value.toLocaleString()
|
|
146
|
+
}
|
|
147
|
+
};
|
|
148
|
+
return axes;
|
|
149
|
+
};
|
|
150
|
+
const whichDataStructure = (data) => {
|
|
151
|
+
if (Array.isArray(data[0])) {
|
|
152
|
+
return data.map((arr, x) => {
|
|
153
|
+
let [low, high] = arr.sort();
|
|
154
|
+
return { x, low, high };
|
|
155
|
+
});
|
|
156
|
+
}
|
|
157
|
+
return data;
|
|
158
|
+
};
|
|
159
|
+
const scrubX = (data) => {
|
|
160
|
+
const blackboard = JSON.parse(JSON.stringify(data));
|
|
161
|
+
let labels = [];
|
|
162
|
+
if (Array.isArray(data)) {
|
|
163
|
+
// console.log("not grouped");
|
|
164
|
+
// Not grouped
|
|
165
|
+
blackboard.forEach((item, x) => {
|
|
166
|
+
if (typeof item === "object" && "x" in item) {
|
|
167
|
+
labels.push(item.x);
|
|
168
|
+
item.x = x;
|
|
169
|
+
}
|
|
170
|
+
});
|
|
171
|
+
return { labels, data: blackboard };
|
|
172
|
+
}
|
|
173
|
+
};
|
|
174
|
+
const processData = (data, c2m_types) => {
|
|
175
|
+
if (c2m_types === "box") {
|
|
176
|
+
return processBoxData(data);
|
|
177
|
+
}
|
|
178
|
+
let groups = [];
|
|
179
|
+
if (data.datasets.length === 1) {
|
|
180
|
+
return {
|
|
181
|
+
data: whichDataStructure(data.datasets[0].data)
|
|
182
|
+
};
|
|
183
|
+
}
|
|
184
|
+
const result = {};
|
|
185
|
+
data.datasets.forEach((obj, index) => {
|
|
186
|
+
const groupName = obj.label ?? `Group ${index + 1}`;
|
|
187
|
+
groups.push(groupName);
|
|
188
|
+
result[groupName] = whichDataStructure(obj.data);
|
|
189
|
+
});
|
|
190
|
+
return { groups, data: result };
|
|
191
|
+
};
|
|
192
|
+
const determineChartTitle = (options) => {
|
|
193
|
+
if (options.plugins?.title?.text) {
|
|
194
|
+
if (Array.isArray(options.plugins.title.text)) {
|
|
195
|
+
return options.plugins.title.text.join(", ");
|
|
196
|
+
}
|
|
197
|
+
return options.plugins.title.text;
|
|
198
|
+
}
|
|
199
|
+
return "";
|
|
200
|
+
};
|
|
201
|
+
const determineCCElement = (canvas, provided) => {
|
|
202
|
+
if (provided) {
|
|
203
|
+
return provided;
|
|
204
|
+
}
|
|
205
|
+
const cc = document.createElement("div");
|
|
206
|
+
canvas.insertAdjacentElement("afterend", cc);
|
|
207
|
+
return cc;
|
|
208
|
+
};
|
|
209
|
+
const plugin = {
|
|
210
|
+
id: "chartjs2music",
|
|
211
|
+
afterInit: (chart, args, options) => {
|
|
212
|
+
const { valid, c2m_types, invalidType } = processChartType(chart);
|
|
213
|
+
if (!valid) {
|
|
214
|
+
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(", ")}`);
|
|
215
|
+
return;
|
|
216
|
+
}
|
|
217
|
+
let axes = generateAxes(chart);
|
|
218
|
+
if (chart.config.type === "wordCloud") {
|
|
219
|
+
delete axes.x.minimum;
|
|
220
|
+
delete axes.x.maximum;
|
|
221
|
+
delete axes.y.minimum;
|
|
222
|
+
delete axes.y.maximum;
|
|
223
|
+
if (!axes.x.label) {
|
|
224
|
+
axes.x.label = "Word";
|
|
225
|
+
}
|
|
226
|
+
if (!axes.y.label) {
|
|
227
|
+
axes.y.label = "Emphasis";
|
|
228
|
+
}
|
|
229
|
+
}
|
|
230
|
+
// Generate CC element
|
|
231
|
+
const cc = determineCCElement(chart.canvas, options.cc);
|
|
232
|
+
const { data, groups } = processData(chart.data, c2m_types);
|
|
233
|
+
// lastDataObj = JSON.stringify(data);
|
|
234
|
+
let scrub = scrubX(data);
|
|
235
|
+
if (scrub?.labels && scrub?.labels?.length > 0) { // Something was scrubbed
|
|
236
|
+
if (!chart.data.labels || chart.data.labels.length === 0) {
|
|
237
|
+
axes.x.valueLabels = scrub.labels.slice(0);
|
|
238
|
+
}
|
|
239
|
+
}
|
|
240
|
+
if (c2m_types === "scatter") {
|
|
241
|
+
delete scrub?.data;
|
|
242
|
+
delete axes.x.valueLabels;
|
|
243
|
+
}
|
|
244
|
+
axes = {
|
|
245
|
+
...axes,
|
|
246
|
+
x: {
|
|
247
|
+
...axes.x,
|
|
248
|
+
...(options.axes?.x)
|
|
249
|
+
},
|
|
250
|
+
y: {
|
|
251
|
+
...axes.y,
|
|
252
|
+
...(options.axes?.y)
|
|
253
|
+
},
|
|
254
|
+
};
|
|
255
|
+
const c2mOptions = {
|
|
256
|
+
cc,
|
|
257
|
+
element: chart.canvas,
|
|
258
|
+
type: c2m_types,
|
|
259
|
+
data: scrub?.data ?? data,
|
|
260
|
+
title: determineChartTitle(chart.options),
|
|
261
|
+
axes,
|
|
262
|
+
options: {
|
|
263
|
+
// @ts-ignore
|
|
264
|
+
onFocusCallback: ({ point, index }) => {
|
|
265
|
+
try {
|
|
266
|
+
const highlightElements = [];
|
|
267
|
+
if ("custom" in point) {
|
|
268
|
+
highlightElements.push({
|
|
269
|
+
datasetIndex: point.custom.group,
|
|
270
|
+
index: point.custom.index
|
|
271
|
+
});
|
|
272
|
+
}
|
|
273
|
+
else {
|
|
274
|
+
const indices = chart.config.options?.plugins?.chartjs2music?.internal.visible_groups;
|
|
275
|
+
indices.forEach((datasetIndex) => {
|
|
276
|
+
highlightElements.push({
|
|
277
|
+
datasetIndex,
|
|
278
|
+
index
|
|
279
|
+
});
|
|
280
|
+
});
|
|
281
|
+
}
|
|
282
|
+
chart?.setActiveElements(highlightElements);
|
|
283
|
+
chart?.tooltip?.setActiveElements(highlightElements, {});
|
|
284
|
+
chart?.update();
|
|
285
|
+
}
|
|
286
|
+
catch (e) {
|
|
287
|
+
// console.warn(e);
|
|
288
|
+
}
|
|
289
|
+
}
|
|
290
|
+
}
|
|
291
|
+
};
|
|
292
|
+
if (Array.isArray(c2mOptions.data)) {
|
|
293
|
+
if (isNaN(c2mOptions.data[0])) {
|
|
294
|
+
c2mOptions.data = c2mOptions.data.map((point, index) => {
|
|
295
|
+
return {
|
|
296
|
+
...point,
|
|
297
|
+
custom: {
|
|
298
|
+
group: 0,
|
|
299
|
+
index
|
|
300
|
+
}
|
|
301
|
+
};
|
|
302
|
+
});
|
|
303
|
+
}
|
|
304
|
+
else {
|
|
305
|
+
c2mOptions.data = c2mOptions.data.map((num, index) => {
|
|
306
|
+
return {
|
|
307
|
+
x: index,
|
|
308
|
+
y: num,
|
|
309
|
+
custom: {
|
|
310
|
+
group: 0,
|
|
311
|
+
index
|
|
312
|
+
}
|
|
313
|
+
};
|
|
314
|
+
});
|
|
315
|
+
}
|
|
316
|
+
}
|
|
317
|
+
else {
|
|
318
|
+
const groups = Object.keys(c2mOptions.data);
|
|
319
|
+
groups.forEach((groupName, groupNumber) => {
|
|
320
|
+
if (!isNaN(c2mOptions.data[groupName][0])) {
|
|
321
|
+
c2mOptions.data[groupName] = c2mOptions.data[groupName].map((num, index) => {
|
|
322
|
+
return {
|
|
323
|
+
x: index,
|
|
324
|
+
y: num,
|
|
325
|
+
custom: {
|
|
326
|
+
group: groupNumber,
|
|
327
|
+
index
|
|
328
|
+
}
|
|
329
|
+
};
|
|
330
|
+
});
|
|
331
|
+
}
|
|
332
|
+
else {
|
|
333
|
+
c2mOptions.data[groupName] = c2mOptions.data[groupName].map((point, index) => {
|
|
334
|
+
return {
|
|
335
|
+
...point,
|
|
336
|
+
custom: {
|
|
337
|
+
group: groupNumber,
|
|
338
|
+
index
|
|
339
|
+
}
|
|
340
|
+
};
|
|
341
|
+
});
|
|
342
|
+
}
|
|
343
|
+
});
|
|
344
|
+
}
|
|
345
|
+
if (chart.config.options?.scales?.x?.stacked) {
|
|
346
|
+
c2mOptions.options.stack = true;
|
|
347
|
+
}
|
|
348
|
+
if (options.audioEngine) {
|
|
349
|
+
// @ts-ignore
|
|
350
|
+
c2mOptions.audioEngine = options.audioEngine;
|
|
351
|
+
}
|
|
352
|
+
const { err, data: c2m } = c2mChart(c2mOptions);
|
|
353
|
+
chart.config.options = {
|
|
354
|
+
...(chart.config.options ?? {}),
|
|
355
|
+
plugins: {
|
|
356
|
+
...chart.config.options?.plugins,
|
|
357
|
+
chartjs2music: {
|
|
358
|
+
...chart.config.options?.plugins?.chartjs2music,
|
|
359
|
+
internal: {
|
|
360
|
+
c2m,
|
|
361
|
+
visible_groups: groups?.map((g, i) => i)
|
|
362
|
+
}
|
|
363
|
+
}
|
|
364
|
+
}
|
|
365
|
+
};
|
|
366
|
+
// /* istanbul-ignore-next */
|
|
367
|
+
if (err) {
|
|
368
|
+
options.errorCallback?.(err);
|
|
369
|
+
}
|
|
370
|
+
},
|
|
371
|
+
afterDatasetUpdate: (chart, args) => {
|
|
372
|
+
if (!args.mode) {
|
|
373
|
+
return;
|
|
374
|
+
}
|
|
375
|
+
const ref = chart.config.options?.plugins?.chartjs2music?.internal.c2m;
|
|
376
|
+
if (!ref) {
|
|
377
|
+
return;
|
|
378
|
+
}
|
|
379
|
+
const groups = ref._groups.slice(0);
|
|
380
|
+
if (ref._options.stack) {
|
|
381
|
+
groups.shift();
|
|
382
|
+
}
|
|
383
|
+
if (args.mode === "hide") {
|
|
384
|
+
const err = ref.setCategoryVisibility(groups[args.index], false);
|
|
385
|
+
chart.config.options.plugins.chartjs2music?.internal.visible_groups.splice(args.index, 1);
|
|
386
|
+
if (err) {
|
|
387
|
+
console.error(err);
|
|
388
|
+
}
|
|
389
|
+
return;
|
|
390
|
+
}
|
|
391
|
+
if (args.mode === "show") {
|
|
392
|
+
const err = ref.setCategoryVisibility(groups[args.index], true);
|
|
393
|
+
chart.config.options.plugins.chartjs2music.internal.visible_groups.push(args.index);
|
|
394
|
+
if (err) {
|
|
395
|
+
console.error(err);
|
|
396
|
+
}
|
|
397
|
+
return;
|
|
398
|
+
}
|
|
399
|
+
},
|
|
400
|
+
defaults: {
|
|
401
|
+
cc: null,
|
|
402
|
+
audioEngine: null,
|
|
403
|
+
errorCallback: null
|
|
404
|
+
}
|
|
405
|
+
};
|
|
406
|
+
|
|
407
|
+
return plugin;
|
|
408
|
+
|
|
409
|
+
})(c2mChart);
|
package/dist/plugin.mjs
ADDED
|
@@ -0,0 +1,406 @@
|
|
|
1
|
+
import c2mChart from 'chart2music';
|
|
2
|
+
|
|
3
|
+
const calcMedian = (nums) => (nums.length % 2) ? nums[Math.floor(nums.length / 2)] : (nums[nums.length / 2] + nums[nums.length / 2 - 1]) / 2;
|
|
4
|
+
const fiveNumberSummary = (nums) => {
|
|
5
|
+
const sortedNumbers = nums.sort();
|
|
6
|
+
let min, max, q1, q3;
|
|
7
|
+
const datamin = Math.min(...sortedNumbers);
|
|
8
|
+
const datamax = Math.max(...sortedNumbers);
|
|
9
|
+
const median = calcMedian(sortedNumbers);
|
|
10
|
+
const length = sortedNumbers.length;
|
|
11
|
+
if (length % 2) {
|
|
12
|
+
q1 = calcMedian(sortedNumbers.slice(0, Math.floor(length / 2)));
|
|
13
|
+
q3 = calcMedian(sortedNumbers.slice(Math.ceil(length % 2)));
|
|
14
|
+
}
|
|
15
|
+
else {
|
|
16
|
+
q1 = calcMedian(sortedNumbers.slice(0, length / 2 - 1));
|
|
17
|
+
q3 = calcMedian(sortedNumbers.slice(length / 2));
|
|
18
|
+
}
|
|
19
|
+
const iqr = q3 - q1;
|
|
20
|
+
if (datamax < q3 + iqr) {
|
|
21
|
+
max = datamax;
|
|
22
|
+
}
|
|
23
|
+
else {
|
|
24
|
+
max = sortedNumbers.reverse().find((num) => num < datamax) ?? datamax;
|
|
25
|
+
}
|
|
26
|
+
if (datamin < q1 - iqr) {
|
|
27
|
+
min = datamin;
|
|
28
|
+
}
|
|
29
|
+
else {
|
|
30
|
+
min = sortedNumbers.reverse().find((num) => num < datamin) ?? datamin;
|
|
31
|
+
}
|
|
32
|
+
const outlier = sortedNumbers.filter((num) => num < min || num > max);
|
|
33
|
+
return {
|
|
34
|
+
low: min,
|
|
35
|
+
high: max,
|
|
36
|
+
median,
|
|
37
|
+
q1,
|
|
38
|
+
q3,
|
|
39
|
+
...(outlier.length > 0 ? { outlier } : {})
|
|
40
|
+
};
|
|
41
|
+
};
|
|
42
|
+
const whichBoxData = (data) => {
|
|
43
|
+
return data.map((row, index) => {
|
|
44
|
+
if (typeof row === "object" && "min" in row) {
|
|
45
|
+
return {
|
|
46
|
+
...row,
|
|
47
|
+
low: row.min,
|
|
48
|
+
high: row.max,
|
|
49
|
+
x: index,
|
|
50
|
+
...("outliers" in row ? { outlier: row.outliers } : {})
|
|
51
|
+
};
|
|
52
|
+
}
|
|
53
|
+
if (Array.isArray(row)) {
|
|
54
|
+
return {
|
|
55
|
+
...fiveNumberSummary(row),
|
|
56
|
+
x: index
|
|
57
|
+
};
|
|
58
|
+
}
|
|
59
|
+
});
|
|
60
|
+
};
|
|
61
|
+
const processBoxData = (data) => {
|
|
62
|
+
if (data.datasets.length === 1) {
|
|
63
|
+
return {
|
|
64
|
+
data: whichBoxData(data.datasets[0].data)
|
|
65
|
+
};
|
|
66
|
+
}
|
|
67
|
+
const groups = [];
|
|
68
|
+
const result = {};
|
|
69
|
+
data.datasets.forEach((obj, index) => {
|
|
70
|
+
const groupName = obj.label ?? `Group ${index + 1}`;
|
|
71
|
+
groups.push(groupName);
|
|
72
|
+
result[groupName] = whichBoxData(obj.data);
|
|
73
|
+
});
|
|
74
|
+
return { groups, data: result };
|
|
75
|
+
};
|
|
76
|
+
|
|
77
|
+
const chartjs_c2m_converter = {
|
|
78
|
+
bar: "bar",
|
|
79
|
+
line: "line",
|
|
80
|
+
pie: "pie",
|
|
81
|
+
polarArea: "bar",
|
|
82
|
+
doughnut: "pie",
|
|
83
|
+
boxplot: "box",
|
|
84
|
+
radar: "bar",
|
|
85
|
+
wordCloud: "bar",
|
|
86
|
+
scatter: "scatter"
|
|
87
|
+
};
|
|
88
|
+
const processChartType = (chart) => {
|
|
89
|
+
const topLevelType = chart.config.type;
|
|
90
|
+
const panelTypes = chart.data.datasets.map(({ type }) => type ?? topLevelType);
|
|
91
|
+
const invalid = panelTypes.find((t) => !(t in chartjs_c2m_converter));
|
|
92
|
+
if (invalid) {
|
|
93
|
+
return {
|
|
94
|
+
valid: false,
|
|
95
|
+
invalidType: invalid
|
|
96
|
+
};
|
|
97
|
+
}
|
|
98
|
+
if ([...new Set(panelTypes)].length === 1) {
|
|
99
|
+
return {
|
|
100
|
+
valid: true,
|
|
101
|
+
c2m_types: chartjs_c2m_converter[panelTypes[0]]
|
|
102
|
+
};
|
|
103
|
+
}
|
|
104
|
+
return {
|
|
105
|
+
valid: true,
|
|
106
|
+
c2m_types: panelTypes.map((t) => chartjs_c2m_converter[t])
|
|
107
|
+
};
|
|
108
|
+
};
|
|
109
|
+
const generateAxisInfo = (chartAxisInfo, chart) => {
|
|
110
|
+
const axis = {};
|
|
111
|
+
if (chartAxisInfo?.min) {
|
|
112
|
+
if (typeof chartAxisInfo.min === "string") {
|
|
113
|
+
axis.minimum = chart.data.labels.indexOf(chartAxisInfo.min);
|
|
114
|
+
}
|
|
115
|
+
else {
|
|
116
|
+
axis.minimum = chartAxisInfo.min;
|
|
117
|
+
}
|
|
118
|
+
}
|
|
119
|
+
if (chartAxisInfo?.max) {
|
|
120
|
+
if (typeof chartAxisInfo.max === "string") {
|
|
121
|
+
axis.maximum = chart.data.labels.indexOf(chartAxisInfo.max);
|
|
122
|
+
}
|
|
123
|
+
else {
|
|
124
|
+
axis.maximum = chartAxisInfo.max;
|
|
125
|
+
}
|
|
126
|
+
}
|
|
127
|
+
const label = chartAxisInfo?.title?.text;
|
|
128
|
+
if (label) {
|
|
129
|
+
axis.label = label;
|
|
130
|
+
}
|
|
131
|
+
if (chartAxisInfo?.type === "logarithmic") {
|
|
132
|
+
axis.type = "log10";
|
|
133
|
+
}
|
|
134
|
+
return axis;
|
|
135
|
+
};
|
|
136
|
+
const generateAxes = (chart) => {
|
|
137
|
+
const axes = {
|
|
138
|
+
x: {
|
|
139
|
+
...generateAxisInfo(chart.options?.scales?.x, chart),
|
|
140
|
+
valueLabels: chart.data.labels.slice(0)
|
|
141
|
+
},
|
|
142
|
+
y: {
|
|
143
|
+
...generateAxisInfo(chart.options?.scales?.y, chart),
|
|
144
|
+
format: (value) => value.toLocaleString()
|
|
145
|
+
}
|
|
146
|
+
};
|
|
147
|
+
return axes;
|
|
148
|
+
};
|
|
149
|
+
const whichDataStructure = (data) => {
|
|
150
|
+
if (Array.isArray(data[0])) {
|
|
151
|
+
return data.map((arr, x) => {
|
|
152
|
+
let [low, high] = arr.sort();
|
|
153
|
+
return { x, low, high };
|
|
154
|
+
});
|
|
155
|
+
}
|
|
156
|
+
return data;
|
|
157
|
+
};
|
|
158
|
+
const scrubX = (data) => {
|
|
159
|
+
const blackboard = JSON.parse(JSON.stringify(data));
|
|
160
|
+
let labels = [];
|
|
161
|
+
if (Array.isArray(data)) {
|
|
162
|
+
// console.log("not grouped");
|
|
163
|
+
// Not grouped
|
|
164
|
+
blackboard.forEach((item, x) => {
|
|
165
|
+
if (typeof item === "object" && "x" in item) {
|
|
166
|
+
labels.push(item.x);
|
|
167
|
+
item.x = x;
|
|
168
|
+
}
|
|
169
|
+
});
|
|
170
|
+
return { labels, data: blackboard };
|
|
171
|
+
}
|
|
172
|
+
};
|
|
173
|
+
const processData = (data, c2m_types) => {
|
|
174
|
+
if (c2m_types === "box") {
|
|
175
|
+
return processBoxData(data);
|
|
176
|
+
}
|
|
177
|
+
let groups = [];
|
|
178
|
+
if (data.datasets.length === 1) {
|
|
179
|
+
return {
|
|
180
|
+
data: whichDataStructure(data.datasets[0].data)
|
|
181
|
+
};
|
|
182
|
+
}
|
|
183
|
+
const result = {};
|
|
184
|
+
data.datasets.forEach((obj, index) => {
|
|
185
|
+
const groupName = obj.label ?? `Group ${index + 1}`;
|
|
186
|
+
groups.push(groupName);
|
|
187
|
+
result[groupName] = whichDataStructure(obj.data);
|
|
188
|
+
});
|
|
189
|
+
return { groups, data: result };
|
|
190
|
+
};
|
|
191
|
+
const determineChartTitle = (options) => {
|
|
192
|
+
if (options.plugins?.title?.text) {
|
|
193
|
+
if (Array.isArray(options.plugins.title.text)) {
|
|
194
|
+
return options.plugins.title.text.join(", ");
|
|
195
|
+
}
|
|
196
|
+
return options.plugins.title.text;
|
|
197
|
+
}
|
|
198
|
+
return "";
|
|
199
|
+
};
|
|
200
|
+
const determineCCElement = (canvas, provided) => {
|
|
201
|
+
if (provided) {
|
|
202
|
+
return provided;
|
|
203
|
+
}
|
|
204
|
+
const cc = document.createElement("div");
|
|
205
|
+
canvas.insertAdjacentElement("afterend", cc);
|
|
206
|
+
return cc;
|
|
207
|
+
};
|
|
208
|
+
const plugin = {
|
|
209
|
+
id: "chartjs2music",
|
|
210
|
+
afterInit: (chart, args, options) => {
|
|
211
|
+
const { valid, c2m_types, invalidType } = processChartType(chart);
|
|
212
|
+
if (!valid) {
|
|
213
|
+
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(", ")}`);
|
|
214
|
+
return;
|
|
215
|
+
}
|
|
216
|
+
let axes = generateAxes(chart);
|
|
217
|
+
if (chart.config.type === "wordCloud") {
|
|
218
|
+
delete axes.x.minimum;
|
|
219
|
+
delete axes.x.maximum;
|
|
220
|
+
delete axes.y.minimum;
|
|
221
|
+
delete axes.y.maximum;
|
|
222
|
+
if (!axes.x.label) {
|
|
223
|
+
axes.x.label = "Word";
|
|
224
|
+
}
|
|
225
|
+
if (!axes.y.label) {
|
|
226
|
+
axes.y.label = "Emphasis";
|
|
227
|
+
}
|
|
228
|
+
}
|
|
229
|
+
// Generate CC element
|
|
230
|
+
const cc = determineCCElement(chart.canvas, options.cc);
|
|
231
|
+
const { data, groups } = processData(chart.data, c2m_types);
|
|
232
|
+
// lastDataObj = JSON.stringify(data);
|
|
233
|
+
let scrub = scrubX(data);
|
|
234
|
+
if (scrub?.labels && scrub?.labels?.length > 0) { // Something was scrubbed
|
|
235
|
+
if (!chart.data.labels || chart.data.labels.length === 0) {
|
|
236
|
+
axes.x.valueLabels = scrub.labels.slice(0);
|
|
237
|
+
}
|
|
238
|
+
}
|
|
239
|
+
if (c2m_types === "scatter") {
|
|
240
|
+
delete scrub?.data;
|
|
241
|
+
delete axes.x.valueLabels;
|
|
242
|
+
}
|
|
243
|
+
axes = {
|
|
244
|
+
...axes,
|
|
245
|
+
x: {
|
|
246
|
+
...axes.x,
|
|
247
|
+
...(options.axes?.x)
|
|
248
|
+
},
|
|
249
|
+
y: {
|
|
250
|
+
...axes.y,
|
|
251
|
+
...(options.axes?.y)
|
|
252
|
+
},
|
|
253
|
+
};
|
|
254
|
+
const c2mOptions = {
|
|
255
|
+
cc,
|
|
256
|
+
element: chart.canvas,
|
|
257
|
+
type: c2m_types,
|
|
258
|
+
data: scrub?.data ?? data,
|
|
259
|
+
title: determineChartTitle(chart.options),
|
|
260
|
+
axes,
|
|
261
|
+
options: {
|
|
262
|
+
// @ts-ignore
|
|
263
|
+
onFocusCallback: ({ point, index }) => {
|
|
264
|
+
try {
|
|
265
|
+
const highlightElements = [];
|
|
266
|
+
if ("custom" in point) {
|
|
267
|
+
highlightElements.push({
|
|
268
|
+
datasetIndex: point.custom.group,
|
|
269
|
+
index: point.custom.index
|
|
270
|
+
});
|
|
271
|
+
}
|
|
272
|
+
else {
|
|
273
|
+
const indices = chart.config.options?.plugins?.chartjs2music?.internal.visible_groups;
|
|
274
|
+
indices.forEach((datasetIndex) => {
|
|
275
|
+
highlightElements.push({
|
|
276
|
+
datasetIndex,
|
|
277
|
+
index
|
|
278
|
+
});
|
|
279
|
+
});
|
|
280
|
+
}
|
|
281
|
+
chart?.setActiveElements(highlightElements);
|
|
282
|
+
chart?.tooltip?.setActiveElements(highlightElements, {});
|
|
283
|
+
chart?.update();
|
|
284
|
+
}
|
|
285
|
+
catch (e) {
|
|
286
|
+
// console.warn(e);
|
|
287
|
+
}
|
|
288
|
+
}
|
|
289
|
+
}
|
|
290
|
+
};
|
|
291
|
+
if (Array.isArray(c2mOptions.data)) {
|
|
292
|
+
if (isNaN(c2mOptions.data[0])) {
|
|
293
|
+
c2mOptions.data = c2mOptions.data.map((point, index) => {
|
|
294
|
+
return {
|
|
295
|
+
...point,
|
|
296
|
+
custom: {
|
|
297
|
+
group: 0,
|
|
298
|
+
index
|
|
299
|
+
}
|
|
300
|
+
};
|
|
301
|
+
});
|
|
302
|
+
}
|
|
303
|
+
else {
|
|
304
|
+
c2mOptions.data = c2mOptions.data.map((num, index) => {
|
|
305
|
+
return {
|
|
306
|
+
x: index,
|
|
307
|
+
y: num,
|
|
308
|
+
custom: {
|
|
309
|
+
group: 0,
|
|
310
|
+
index
|
|
311
|
+
}
|
|
312
|
+
};
|
|
313
|
+
});
|
|
314
|
+
}
|
|
315
|
+
}
|
|
316
|
+
else {
|
|
317
|
+
const groups = Object.keys(c2mOptions.data);
|
|
318
|
+
groups.forEach((groupName, groupNumber) => {
|
|
319
|
+
if (!isNaN(c2mOptions.data[groupName][0])) {
|
|
320
|
+
c2mOptions.data[groupName] = c2mOptions.data[groupName].map((num, index) => {
|
|
321
|
+
return {
|
|
322
|
+
x: index,
|
|
323
|
+
y: num,
|
|
324
|
+
custom: {
|
|
325
|
+
group: groupNumber,
|
|
326
|
+
index
|
|
327
|
+
}
|
|
328
|
+
};
|
|
329
|
+
});
|
|
330
|
+
}
|
|
331
|
+
else {
|
|
332
|
+
c2mOptions.data[groupName] = c2mOptions.data[groupName].map((point, index) => {
|
|
333
|
+
return {
|
|
334
|
+
...point,
|
|
335
|
+
custom: {
|
|
336
|
+
group: groupNumber,
|
|
337
|
+
index
|
|
338
|
+
}
|
|
339
|
+
};
|
|
340
|
+
});
|
|
341
|
+
}
|
|
342
|
+
});
|
|
343
|
+
}
|
|
344
|
+
if (chart.config.options?.scales?.x?.stacked) {
|
|
345
|
+
c2mOptions.options.stack = true;
|
|
346
|
+
}
|
|
347
|
+
if (options.audioEngine) {
|
|
348
|
+
// @ts-ignore
|
|
349
|
+
c2mOptions.audioEngine = options.audioEngine;
|
|
350
|
+
}
|
|
351
|
+
const { err, data: c2m } = c2mChart(c2mOptions);
|
|
352
|
+
chart.config.options = {
|
|
353
|
+
...(chart.config.options ?? {}),
|
|
354
|
+
plugins: {
|
|
355
|
+
...chart.config.options?.plugins,
|
|
356
|
+
chartjs2music: {
|
|
357
|
+
...chart.config.options?.plugins?.chartjs2music,
|
|
358
|
+
internal: {
|
|
359
|
+
c2m,
|
|
360
|
+
visible_groups: groups?.map((g, i) => i)
|
|
361
|
+
}
|
|
362
|
+
}
|
|
363
|
+
}
|
|
364
|
+
};
|
|
365
|
+
// /* istanbul-ignore-next */
|
|
366
|
+
if (err) {
|
|
367
|
+
options.errorCallback?.(err);
|
|
368
|
+
}
|
|
369
|
+
},
|
|
370
|
+
afterDatasetUpdate: (chart, args) => {
|
|
371
|
+
if (!args.mode) {
|
|
372
|
+
return;
|
|
373
|
+
}
|
|
374
|
+
const ref = chart.config.options?.plugins?.chartjs2music?.internal.c2m;
|
|
375
|
+
if (!ref) {
|
|
376
|
+
return;
|
|
377
|
+
}
|
|
378
|
+
const groups = ref._groups.slice(0);
|
|
379
|
+
if (ref._options.stack) {
|
|
380
|
+
groups.shift();
|
|
381
|
+
}
|
|
382
|
+
if (args.mode === "hide") {
|
|
383
|
+
const err = ref.setCategoryVisibility(groups[args.index], false);
|
|
384
|
+
chart.config.options.plugins.chartjs2music?.internal.visible_groups.splice(args.index, 1);
|
|
385
|
+
if (err) {
|
|
386
|
+
console.error(err);
|
|
387
|
+
}
|
|
388
|
+
return;
|
|
389
|
+
}
|
|
390
|
+
if (args.mode === "show") {
|
|
391
|
+
const err = ref.setCategoryVisibility(groups[args.index], true);
|
|
392
|
+
chart.config.options.plugins.chartjs2music.internal.visible_groups.push(args.index);
|
|
393
|
+
if (err) {
|
|
394
|
+
console.error(err);
|
|
395
|
+
}
|
|
396
|
+
return;
|
|
397
|
+
}
|
|
398
|
+
},
|
|
399
|
+
defaults: {
|
|
400
|
+
cc: null,
|
|
401
|
+
audioEngine: null,
|
|
402
|
+
errorCallback: null
|
|
403
|
+
}
|
|
404
|
+
};
|
|
405
|
+
|
|
406
|
+
export { plugin as default };
|
package/package.json
CHANGED