chartjs-plugin-chart2music 0.0.6 → 0.0.7

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 CHANGED
@@ -1,372 +1,404 @@
1
1
  var chartjs2music = (function (c2mChart) {
2
2
  'use strict';
3
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 };
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
76
  };
77
77
 
78
- // let lastDataObj = "";
79
- const chartjs_c2m_converter = {
80
- bar: "bar",
81
- line: "line",
82
- pie: "pie",
83
- polarArea: "bar",
84
- doughnut: "pie",
85
- boxplot: "box",
86
- radar: "bar",
87
- wordCloud: "bar",
88
- scatter: "scatter"
89
- };
90
- const processChartType = (chart) => {
91
- const topLevelType = chart.config.type;
92
- const panelTypes = chart.data.datasets.map(({ type }) => type ?? topLevelType);
93
- const invalid = panelTypes.find((t) => !(t in chartjs_c2m_converter));
94
- if (invalid) {
95
- return {
96
- valid: false,
97
- invalidType: invalid
98
- };
99
- }
100
- if ([...new Set(panelTypes)].length === 1) {
101
- return {
102
- valid: true,
103
- c2m_types: chartjs_c2m_converter[panelTypes[0]]
104
- };
105
- }
106
- return {
107
- valid: true,
108
- c2m_types: panelTypes.map((t) => chartjs_c2m_converter[t])
109
- };
110
- };
111
- const generateAxisInfo = (chartAxisInfo, chart) => {
112
- const axis = {};
113
- if (chartAxisInfo?.min) {
114
- if (typeof chartAxisInfo.min === "string") {
115
- axis.minimum = chart.data.labels.indexOf(chartAxisInfo.min);
116
- }
117
- else {
118
- axis.minimum = chartAxisInfo.min;
119
- }
120
- }
121
- if (chartAxisInfo?.max) {
122
- if (typeof chartAxisInfo.max === "string") {
123
- axis.maximum = chart.data.labels.indexOf(chartAxisInfo.max);
124
- }
125
- else {
126
- axis.maximum = chartAxisInfo.max;
127
- }
128
- }
129
- const label = chartAxisInfo?.title?.text;
130
- if (label) {
131
- axis.label = label;
132
- }
133
- if (chartAxisInfo?.type === "logarithmic") {
134
- axis.type = "log10";
135
- }
136
- return axis;
137
- };
138
- const generateAxes = (chart) => {
139
- const axes = {
140
- x: {
141
- ...generateAxisInfo(chart.options?.scales?.x, chart),
142
- valueLabels: chart.data.labels.slice(0)
143
- },
144
- y: {
145
- ...generateAxisInfo(chart.options?.scales?.y, chart),
146
- format: (value) => value.toLocaleString()
147
- }
148
- };
149
- return axes;
150
- };
151
- const whichDataStructure = (data) => {
152
- if (Array.isArray(data[0])) {
153
- return data.map((arr, x) => {
154
- let [low, high] = arr.sort();
155
- return { x, low, high };
156
- });
157
- }
158
- return data;
159
- };
160
- const scrubX = (data) => {
161
- const blackboard = JSON.parse(JSON.stringify(data));
162
- let labels = [];
163
- if (Array.isArray(data)) {
164
- // console.log("not grouped");
165
- // Not grouped
166
- blackboard.forEach((item, x) => {
167
- if (typeof item === "object" && "x" in item) {
168
- labels.push(item.x);
169
- item.x = x;
170
- }
171
- });
172
- return { labels, data: blackboard };
173
- }
174
- };
175
- const processData = (data, c2m_types) => {
176
- if (c2m_types === "box") {
177
- return processBoxData(data);
178
- }
179
- let groups = [];
180
- if (data.datasets.length === 1) {
181
- return {
182
- data: whichDataStructure(data.datasets[0].data)
183
- };
184
- }
185
- const result = {};
186
- data.datasets.forEach((obj, index) => {
187
- const groupName = obj.label ?? `Group ${index + 1}`;
188
- groups.push(groupName);
189
- result[groupName] = whichDataStructure(obj.data);
190
- });
191
- return { groups, data: result };
192
- };
193
- const determineChartTitle = (options) => {
194
- if (options.plugins?.title?.text) {
195
- if (Array.isArray(options.plugins.title.text)) {
196
- return options.plugins.title.text.join(", ");
197
- }
198
- return options.plugins.title.text;
199
- }
200
- return "";
201
- };
202
- const determineCCElement = (canvas, provided) => {
203
- if (provided) {
204
- return provided;
205
- }
206
- const cc = document.createElement("div");
207
- canvas.insertAdjacentElement("afterend", cc);
208
- return cc;
209
- };
210
- const plugin = {
211
- id: "chartjs2music",
212
- afterInit: (chart, args, options) => {
213
- const { valid, c2m_types, invalidType } = processChartType(chart);
214
- if (!valid) {
215
- 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(", ")}`);
216
- return;
217
- }
218
- let axes = generateAxes(chart);
219
- if (chart.config.type === "wordCloud") {
220
- delete axes.x.minimum;
221
- delete axes.x.maximum;
222
- delete axes.y.minimum;
223
- delete axes.y.maximum;
224
- if (!axes.x.label) {
225
- axes.x.label = "Word";
226
- }
227
- if (!axes.y.label) {
228
- axes.y.label = "Emphasis";
229
- }
230
- }
231
- // Generate CC element
232
- const cc = determineCCElement(chart.canvas, options.cc);
233
- const { data, groups } = processData(chart.data, c2m_types);
234
- // lastDataObj = JSON.stringify(data);
235
- let scrub = scrubX(data);
236
- if (scrub?.labels && scrub?.labels?.length > 0) { // Something was scrubbed
237
- if (!chart.data.labels || chart.data.labels.length === 0) {
238
- axes.x.valueLabels = scrub.labels.slice(0);
239
- }
240
- }
241
- if (c2m_types === "scatter") {
242
- delete scrub?.data;
243
- delete axes.x.valueLabels;
244
- }
245
- axes = {
246
- ...axes,
247
- x: {
248
- ...axes.x,
249
- ...(options.axes?.x)
250
- },
251
- y: {
252
- ...axes.y,
253
- ...(options.axes?.y)
254
- },
255
- };
256
- const c2mOptions = {
257
- cc,
258
- element: chart.canvas,
259
- type: c2m_types,
260
- data: scrub?.data ?? data,
261
- title: determineChartTitle(chart.options),
262
- axes,
263
- options: {
264
- // @ts-ignore
265
- onFocusCallback: ({ point, index }) => {
266
- try {
267
- const highlightElements = [];
268
- if ("custom" in point) {
269
- highlightElements.push({
270
- datasetIndex: point.custom.group,
271
- index: point.custom.index
272
- });
273
- }
274
- else {
275
- for (let i = 0; i < (groups?.length ?? 1); i++) {
276
- highlightElements.push({
277
- datasetIndex: i,
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
- // /* istanbul-ignore-next */
354
- if (err) {
355
- options.errorCallback?.(err);
356
- }
357
- },
358
- // afterUpdate: (chart: Chart) => {
359
- // const {data} = processData(chart.data);
360
- // if(JSON.stringify(data) !== lastDataObj){
361
- // c2mChartRef?.setData(data);
362
- // lastDataObj = JSON.stringify(data);
363
- // }
364
- // },
365
- defaults: {
366
- cc: null,
367
- audioEngine: null,
368
- errorCallback: null
369
- }
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
+ const groups = ref._groups.slice(0);
377
+ if (ref._options.stack) {
378
+ groups.shift();
379
+ }
380
+ if (args.mode === "hide") {
381
+ const err = ref.setCategoryVisibility(groups[args.index], false);
382
+ chart.config.options.plugins.chartjs2music?.internal.visible_groups.splice(args.index, 1);
383
+ if (err) {
384
+ console.error(err);
385
+ }
386
+ return;
387
+ }
388
+ if (args.mode === "show") {
389
+ const err = ref.setCategoryVisibility(groups[args.index], true);
390
+ chart.config.options.plugins.chartjs2music.internal.visible_groups.push(args.index);
391
+ if (err) {
392
+ console.error(err);
393
+ }
394
+ return;
395
+ }
396
+ },
397
+ defaults: {
398
+ cc: null,
399
+ audioEngine: null,
400
+ errorCallback: null
401
+ }
370
402
  };
371
403
 
372
404
  return plugin;