@gravity-ui/chartkit 1.6.3 → 1.6.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.
- package/CHANGELOG.md +14 -0
- package/build/plugins/highcharts/__stories__/combined/ComboChartWithSameLegendValues.stories.d.ts +4 -0
- package/build/plugins/highcharts/__stories__/combined/ComboChartWithSameLegendValues.stories.js +12 -0
- package/build/plugins/highcharts/__stories__/mocks/combo-chart-with-same-legend-titles.d.ts +2 -0
- package/build/plugins/highcharts/__stories__/mocks/combo-chart-with-same-legend-titles.js +444 -0
- package/build/plugins/highcharts/renderer/components/HighchartsComponent.d.ts +3 -3
- package/build/plugins/highcharts/renderer/helpers/config/config.d.ts +3 -2
- package/build/plugins/highcharts/renderer/helpers/config/handleLegendItemClick.d.ts +2 -1
- package/build/plugins/highcharts/renderer/helpers/config/handleLegendItemClick.js +22 -17
- package/build/plugins/highcharts/renderer/helpers/graph.d.ts +3 -3
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,19 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## [1.6.5](https://github.com/gravity-ui/chartkit/compare/v1.6.4...v1.6.5) (2023-02-10)
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
### Bug Fixes
|
|
7
|
+
|
|
8
|
+
* **Highcharts plugin:** fix optional id usage for series identifier ([#125](https://github.com/gravity-ui/chartkit/issues/125)) ([f08b414](https://github.com/gravity-ui/chartkit/commit/f08b4145360db78c9efc6bd056772cd9f21a5fdb))
|
|
9
|
+
|
|
10
|
+
## [1.6.4](https://github.com/gravity-ui/chartkit/compare/v1.6.3...v1.6.4) (2023-02-09)
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
### Bug Fixes
|
|
14
|
+
|
|
15
|
+
* **Highcharts plugin:** fix on legend item click when it has duplicate name ([#123](https://github.com/gravity-ui/chartkit/issues/123)) ([005b9d2](https://github.com/gravity-ui/chartkit/commit/005b9d20d0613f3e98d487c8c72c50ec713870ec))
|
|
16
|
+
|
|
3
17
|
## [1.6.3](https://github.com/gravity-ui/chartkit/compare/v1.6.2...v1.6.3) (2023-02-08)
|
|
4
18
|
|
|
5
19
|
|
package/build/plugins/highcharts/__stories__/combined/ComboChartWithSameLegendValues.stories.js
ADDED
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { ChartKit } from '../../../../components/ChartKit';
|
|
3
|
+
import { data } from '../mocks/combo-chart-with-same-legend-titles';
|
|
4
|
+
import { ChartStory } from '../components/ChartStory';
|
|
5
|
+
export default {
|
|
6
|
+
title: 'Plugins/Highcharts/Combined Charts',
|
|
7
|
+
component: ChartKit,
|
|
8
|
+
};
|
|
9
|
+
const Template = () => {
|
|
10
|
+
return React.createElement(ChartStory, { height: "500px", data: data });
|
|
11
|
+
};
|
|
12
|
+
export const ComboChart = Template.bind({});
|
|
@@ -0,0 +1,444 @@
|
|
|
1
|
+
export const data = {
|
|
2
|
+
data: {
|
|
3
|
+
graphs: [
|
|
4
|
+
{
|
|
5
|
+
id: 'uniq-1',
|
|
6
|
+
title: 'Office Supplies',
|
|
7
|
+
tooltip: {
|
|
8
|
+
chartKitFormatting: true,
|
|
9
|
+
chartKitPrecision: 2,
|
|
10
|
+
},
|
|
11
|
+
data: [
|
|
12
|
+
{
|
|
13
|
+
y: 506.3000054359436,
|
|
14
|
+
dataLabels: {
|
|
15
|
+
enabled: false,
|
|
16
|
+
},
|
|
17
|
+
x: 1483228800000,
|
|
18
|
+
},
|
|
19
|
+
{
|
|
20
|
+
y: 453.8000063896179,
|
|
21
|
+
dataLabels: {
|
|
22
|
+
enabled: false,
|
|
23
|
+
},
|
|
24
|
+
x: 1483315200000,
|
|
25
|
+
},
|
|
26
|
+
{
|
|
27
|
+
y: 2070.3000507354736,
|
|
28
|
+
dataLabels: {
|
|
29
|
+
enabled: false,
|
|
30
|
+
},
|
|
31
|
+
x: 1483401600000,
|
|
32
|
+
},
|
|
33
|
+
{
|
|
34
|
+
y: 33.70000076293945,
|
|
35
|
+
dataLabels: {
|
|
36
|
+
enabled: false,
|
|
37
|
+
},
|
|
38
|
+
x: 1483660800000,
|
|
39
|
+
},
|
|
40
|
+
{
|
|
41
|
+
y: 335.6000015735626,
|
|
42
|
+
dataLabels: {
|
|
43
|
+
enabled: false,
|
|
44
|
+
},
|
|
45
|
+
x: 1483747200000,
|
|
46
|
+
},
|
|
47
|
+
{
|
|
48
|
+
y: 274.5,
|
|
49
|
+
dataLabels: {
|
|
50
|
+
enabled: false,
|
|
51
|
+
},
|
|
52
|
+
x: 1483920000000,
|
|
53
|
+
},
|
|
54
|
+
{
|
|
55
|
+
y: 810.899998664856,
|
|
56
|
+
dataLabels: {
|
|
57
|
+
enabled: false,
|
|
58
|
+
},
|
|
59
|
+
x: 1484179200000,
|
|
60
|
+
},
|
|
61
|
+
{
|
|
62
|
+
y: 4406.299995422363,
|
|
63
|
+
dataLabels: {
|
|
64
|
+
enabled: false,
|
|
65
|
+
},
|
|
66
|
+
x: 1484265600000,
|
|
67
|
+
},
|
|
68
|
+
{
|
|
69
|
+
y: 508.30000019073486,
|
|
70
|
+
dataLabels: {
|
|
71
|
+
enabled: false,
|
|
72
|
+
},
|
|
73
|
+
x: 1484352000000,
|
|
74
|
+
},
|
|
75
|
+
{
|
|
76
|
+
y: 2029.7999515533447,
|
|
77
|
+
dataLabels: {
|
|
78
|
+
enabled: false,
|
|
79
|
+
},
|
|
80
|
+
x: 1484438400000,
|
|
81
|
+
},
|
|
82
|
+
],
|
|
83
|
+
legendTitle: 'Office Supplies',
|
|
84
|
+
drillDownFilterValue: 'Office Supplies',
|
|
85
|
+
colorGuid: 'ac8dd226-3372-4212-bde7-17afc792a728',
|
|
86
|
+
yAxis: 0,
|
|
87
|
+
colorValue: 'Office Supplies',
|
|
88
|
+
shapeValue: 'Sales',
|
|
89
|
+
color: '#4DA2F1',
|
|
90
|
+
dashStyle: 'Solid',
|
|
91
|
+
type: 'line',
|
|
92
|
+
},
|
|
93
|
+
{
|
|
94
|
+
id: 'uniq-2',
|
|
95
|
+
title: 'Technology',
|
|
96
|
+
tooltip: {
|
|
97
|
+
chartKitFormatting: true,
|
|
98
|
+
chartKitPrecision: 2,
|
|
99
|
+
},
|
|
100
|
+
data: [
|
|
101
|
+
{
|
|
102
|
+
y: 712.300012588501,
|
|
103
|
+
dataLabels: {
|
|
104
|
+
enabled: false,
|
|
105
|
+
},
|
|
106
|
+
x: 1483315200000,
|
|
107
|
+
},
|
|
108
|
+
{
|
|
109
|
+
y: 3060,
|
|
110
|
+
dataLabels: {
|
|
111
|
+
enabled: false,
|
|
112
|
+
},
|
|
113
|
+
x: 1483747200000,
|
|
114
|
+
},
|
|
115
|
+
{
|
|
116
|
+
y: 528.7000126838684,
|
|
117
|
+
dataLabels: {
|
|
118
|
+
enabled: false,
|
|
119
|
+
},
|
|
120
|
+
x: 1484352000000,
|
|
121
|
+
},
|
|
122
|
+
{
|
|
123
|
+
y: 110.5999984741211,
|
|
124
|
+
dataLabels: {
|
|
125
|
+
enabled: false,
|
|
126
|
+
},
|
|
127
|
+
x: 1484438400000,
|
|
128
|
+
},
|
|
129
|
+
],
|
|
130
|
+
legendTitle: 'Technology',
|
|
131
|
+
drillDownFilterValue: 'Technology',
|
|
132
|
+
colorGuid: 'ac8dd226-3372-4212-bde7-17afc792a728',
|
|
133
|
+
yAxis: 0,
|
|
134
|
+
colorValue: 'Technology',
|
|
135
|
+
shapeValue: 'Sales',
|
|
136
|
+
color: '#FF3D64',
|
|
137
|
+
dashStyle: 'Solid',
|
|
138
|
+
type: 'line',
|
|
139
|
+
},
|
|
140
|
+
{
|
|
141
|
+
id: 'uniq-3',
|
|
142
|
+
title: 'Furniture',
|
|
143
|
+
tooltip: {
|
|
144
|
+
chartKitFormatting: true,
|
|
145
|
+
chartKitPrecision: 2,
|
|
146
|
+
},
|
|
147
|
+
data: [
|
|
148
|
+
{
|
|
149
|
+
y: 975.4000015258789,
|
|
150
|
+
dataLabels: {
|
|
151
|
+
enabled: false,
|
|
152
|
+
},
|
|
153
|
+
x: 1483228800000,
|
|
154
|
+
},
|
|
155
|
+
{
|
|
156
|
+
y: 913.4000244140625,
|
|
157
|
+
dataLabels: {
|
|
158
|
+
enabled: false,
|
|
159
|
+
},
|
|
160
|
+
x: 1483315200000,
|
|
161
|
+
},
|
|
162
|
+
{
|
|
163
|
+
y: 893,
|
|
164
|
+
dataLabels: {
|
|
165
|
+
enabled: false,
|
|
166
|
+
},
|
|
167
|
+
x: 1483833600000,
|
|
168
|
+
},
|
|
169
|
+
{
|
|
170
|
+
y: 37.70000076293945,
|
|
171
|
+
dataLabels: {
|
|
172
|
+
enabled: false,
|
|
173
|
+
},
|
|
174
|
+
x: 1484179200000,
|
|
175
|
+
},
|
|
176
|
+
{
|
|
177
|
+
y: 212.89999389648438,
|
|
178
|
+
dataLabels: {
|
|
179
|
+
enabled: false,
|
|
180
|
+
},
|
|
181
|
+
x: 1484265600000,
|
|
182
|
+
},
|
|
183
|
+
{
|
|
184
|
+
y: 19,
|
|
185
|
+
dataLabels: {
|
|
186
|
+
enabled: false,
|
|
187
|
+
},
|
|
188
|
+
x: 1484352000000,
|
|
189
|
+
},
|
|
190
|
+
],
|
|
191
|
+
legendTitle: 'Furniture',
|
|
192
|
+
drillDownFilterValue: 'Furniture',
|
|
193
|
+
colorGuid: 'ac8dd226-3372-4212-bde7-17afc792a728',
|
|
194
|
+
yAxis: 0,
|
|
195
|
+
colorValue: 'Furniture',
|
|
196
|
+
shapeValue: 'Sales',
|
|
197
|
+
color: '#8AD554',
|
|
198
|
+
dashStyle: 'Solid',
|
|
199
|
+
type: 'line',
|
|
200
|
+
},
|
|
201
|
+
{
|
|
202
|
+
id: 'uniq-4',
|
|
203
|
+
title: 'Furniture',
|
|
204
|
+
tooltip: {
|
|
205
|
+
chartKitFormatting: true,
|
|
206
|
+
chartKitPrecision: 0,
|
|
207
|
+
},
|
|
208
|
+
data: [
|
|
209
|
+
{
|
|
210
|
+
y: -8,
|
|
211
|
+
dataLabels: {
|
|
212
|
+
enabled: false,
|
|
213
|
+
},
|
|
214
|
+
x: 1483228800000,
|
|
215
|
+
},
|
|
216
|
+
{
|
|
217
|
+
y: -170,
|
|
218
|
+
dataLabels: {
|
|
219
|
+
enabled: false,
|
|
220
|
+
},
|
|
221
|
+
x: 1483315200000,
|
|
222
|
+
},
|
|
223
|
+
{
|
|
224
|
+
y: 80,
|
|
225
|
+
dataLabels: {
|
|
226
|
+
enabled: false,
|
|
227
|
+
},
|
|
228
|
+
x: 1483833600000,
|
|
229
|
+
},
|
|
230
|
+
{
|
|
231
|
+
y: 15,
|
|
232
|
+
dataLabels: {
|
|
233
|
+
enabled: false,
|
|
234
|
+
},
|
|
235
|
+
x: 1484179200000,
|
|
236
|
+
},
|
|
237
|
+
{
|
|
238
|
+
y: 53,
|
|
239
|
+
dataLabels: {
|
|
240
|
+
enabled: false,
|
|
241
|
+
},
|
|
242
|
+
x: 1484265600000,
|
|
243
|
+
},
|
|
244
|
+
{
|
|
245
|
+
y: 8,
|
|
246
|
+
dataLabels: {
|
|
247
|
+
enabled: false,
|
|
248
|
+
},
|
|
249
|
+
x: 1484352000000,
|
|
250
|
+
},
|
|
251
|
+
],
|
|
252
|
+
legendTitle: 'Furniture',
|
|
253
|
+
drillDownFilterValue: 'Furniture',
|
|
254
|
+
colorGuid: 'ac8dd226-3372-4212-bde7-17afc792a728',
|
|
255
|
+
yAxis: 0,
|
|
256
|
+
colorValue: 'Furniture',
|
|
257
|
+
shapeValue: 'Profit',
|
|
258
|
+
color: '#4DA2F1',
|
|
259
|
+
type: 'column',
|
|
260
|
+
stack: 'c44bfc70-a7a5-11ed-96a0-9bb7dddec993__',
|
|
261
|
+
},
|
|
262
|
+
{
|
|
263
|
+
id: 'uniq-5',
|
|
264
|
+
title: 'Office Supplies',
|
|
265
|
+
tooltip: {
|
|
266
|
+
chartKitFormatting: true,
|
|
267
|
+
chartKitPrecision: 0,
|
|
268
|
+
},
|
|
269
|
+
data: [
|
|
270
|
+
{
|
|
271
|
+
y: -177,
|
|
272
|
+
dataLabels: {
|
|
273
|
+
enabled: false,
|
|
274
|
+
},
|
|
275
|
+
x: 1483228800000,
|
|
276
|
+
},
|
|
277
|
+
{
|
|
278
|
+
y: -18,
|
|
279
|
+
dataLabels: {
|
|
280
|
+
enabled: false,
|
|
281
|
+
},
|
|
282
|
+
x: 1483315200000,
|
|
283
|
+
},
|
|
284
|
+
{
|
|
285
|
+
y: 703,
|
|
286
|
+
dataLabels: {
|
|
287
|
+
enabled: false,
|
|
288
|
+
},
|
|
289
|
+
x: 1483401600000,
|
|
290
|
+
},
|
|
291
|
+
{
|
|
292
|
+
y: 15,
|
|
293
|
+
dataLabels: {
|
|
294
|
+
enabled: false,
|
|
295
|
+
},
|
|
296
|
+
x: 1483660800000,
|
|
297
|
+
},
|
|
298
|
+
{
|
|
299
|
+
y: 76,
|
|
300
|
+
dataLabels: {
|
|
301
|
+
enabled: false,
|
|
302
|
+
},
|
|
303
|
+
x: 1483747200000,
|
|
304
|
+
},
|
|
305
|
+
{
|
|
306
|
+
y: -229,
|
|
307
|
+
dataLabels: {
|
|
308
|
+
enabled: false,
|
|
309
|
+
},
|
|
310
|
+
x: 1483920000000,
|
|
311
|
+
},
|
|
312
|
+
{
|
|
313
|
+
y: -1119,
|
|
314
|
+
dataLabels: {
|
|
315
|
+
enabled: false,
|
|
316
|
+
},
|
|
317
|
+
x: 1484179200000,
|
|
318
|
+
},
|
|
319
|
+
{
|
|
320
|
+
y: 152,
|
|
321
|
+
dataLabels: {
|
|
322
|
+
enabled: false,
|
|
323
|
+
},
|
|
324
|
+
x: 1484265600000,
|
|
325
|
+
},
|
|
326
|
+
{
|
|
327
|
+
y: 128,
|
|
328
|
+
dataLabels: {
|
|
329
|
+
enabled: false,
|
|
330
|
+
},
|
|
331
|
+
x: 1484352000000,
|
|
332
|
+
},
|
|
333
|
+
{
|
|
334
|
+
y: 266,
|
|
335
|
+
dataLabels: {
|
|
336
|
+
enabled: false,
|
|
337
|
+
},
|
|
338
|
+
x: 1484438400000,
|
|
339
|
+
},
|
|
340
|
+
],
|
|
341
|
+
legendTitle: 'Office Supplies',
|
|
342
|
+
drillDownFilterValue: 'Office Supplies',
|
|
343
|
+
colorGuid: 'ac8dd226-3372-4212-bde7-17afc792a728',
|
|
344
|
+
yAxis: 0,
|
|
345
|
+
colorValue: 'Office Supplies',
|
|
346
|
+
shapeValue: 'Profit',
|
|
347
|
+
color: '#FF3D64',
|
|
348
|
+
type: 'column',
|
|
349
|
+
stack: 'c44bfc70-a7a5-11ed-96a0-9bb7dddec993__',
|
|
350
|
+
},
|
|
351
|
+
{
|
|
352
|
+
id: 'uniq-6',
|
|
353
|
+
title: 'Technology',
|
|
354
|
+
tooltip: {
|
|
355
|
+
chartKitFormatting: true,
|
|
356
|
+
chartKitPrecision: 0,
|
|
357
|
+
},
|
|
358
|
+
data: [
|
|
359
|
+
{
|
|
360
|
+
y: -23,
|
|
361
|
+
dataLabels: {
|
|
362
|
+
enabled: false,
|
|
363
|
+
},
|
|
364
|
+
x: 1483315200000,
|
|
365
|
+
},
|
|
366
|
+
{
|
|
367
|
+
y: 680,
|
|
368
|
+
dataLabels: {
|
|
369
|
+
enabled: false,
|
|
370
|
+
},
|
|
371
|
+
x: 1483747200000,
|
|
372
|
+
},
|
|
373
|
+
{
|
|
374
|
+
y: 65,
|
|
375
|
+
dataLabels: {
|
|
376
|
+
enabled: false,
|
|
377
|
+
},
|
|
378
|
+
x: 1484352000000,
|
|
379
|
+
},
|
|
380
|
+
{
|
|
381
|
+
y: 27,
|
|
382
|
+
dataLabels: {
|
|
383
|
+
enabled: false,
|
|
384
|
+
},
|
|
385
|
+
x: 1484438400000,
|
|
386
|
+
},
|
|
387
|
+
],
|
|
388
|
+
legendTitle: 'Technology',
|
|
389
|
+
drillDownFilterValue: 'Technology',
|
|
390
|
+
colorGuid: 'ac8dd226-3372-4212-bde7-17afc792a728',
|
|
391
|
+
yAxis: 0,
|
|
392
|
+
colorValue: 'Technology',
|
|
393
|
+
shapeValue: 'Profit',
|
|
394
|
+
color: '#8AD554',
|
|
395
|
+
type: 'column',
|
|
396
|
+
stack: 'c44bfc70-a7a5-11ed-96a0-9bb7dddec993__',
|
|
397
|
+
},
|
|
398
|
+
],
|
|
399
|
+
},
|
|
400
|
+
config: {
|
|
401
|
+
withoutLineLimit: true,
|
|
402
|
+
hideHolidaysBands: true,
|
|
403
|
+
enableSum: true,
|
|
404
|
+
precision: 2,
|
|
405
|
+
hideHolidays: false,
|
|
406
|
+
normalizeDiv: false,
|
|
407
|
+
normalizeSub: false,
|
|
408
|
+
},
|
|
409
|
+
libraryConfig: {
|
|
410
|
+
chart: {
|
|
411
|
+
type: '',
|
|
412
|
+
zoomType: 'xy',
|
|
413
|
+
},
|
|
414
|
+
legend: {
|
|
415
|
+
symbolWidth: 38,
|
|
416
|
+
},
|
|
417
|
+
xAxis: {
|
|
418
|
+
endOnTick: false,
|
|
419
|
+
},
|
|
420
|
+
yAxis: {
|
|
421
|
+
opposite: false,
|
|
422
|
+
labels: {
|
|
423
|
+
y: 3,
|
|
424
|
+
},
|
|
425
|
+
type: 'linear',
|
|
426
|
+
},
|
|
427
|
+
tooltip: {},
|
|
428
|
+
plotOptions: {
|
|
429
|
+
series: {
|
|
430
|
+
dataGrouping: {
|
|
431
|
+
enabled: false,
|
|
432
|
+
},
|
|
433
|
+
dataLabels: {
|
|
434
|
+
allowOverlap: false,
|
|
435
|
+
},
|
|
436
|
+
},
|
|
437
|
+
},
|
|
438
|
+
axesFormatting: {
|
|
439
|
+
xAxis: [],
|
|
440
|
+
yAxis: [],
|
|
441
|
+
},
|
|
442
|
+
enableSum: true,
|
|
443
|
+
},
|
|
444
|
+
};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { ChartCallbackFunction, Options, Chart } from 'highcharts';
|
|
2
|
+
import Highcharts, { ChartCallbackFunction, Options, Chart } from 'highcharts';
|
|
3
3
|
import type { ChartKitProps } from '../../../../types';
|
|
4
4
|
import type { HighchartsWidgetData, StringParams } from '../../types';
|
|
5
5
|
import './HighchartsComponent.css';
|
|
@@ -360,7 +360,7 @@ export declare class HighchartsComponent extends React.PureComponent<Props, Stat
|
|
|
360
360
|
};
|
|
361
361
|
series: {
|
|
362
362
|
events: {
|
|
363
|
-
legendItemClick: (event:
|
|
363
|
+
legendItemClick: (event: Highcharts.SeriesLegendItemClickEventObject) => void;
|
|
364
364
|
mouseOver: () => void;
|
|
365
365
|
mouseOut: () => void;
|
|
366
366
|
click: (event: any) => void;
|
|
@@ -386,7 +386,7 @@ export declare class HighchartsComponent extends React.PureComponent<Props, Stat
|
|
|
386
386
|
pie: {
|
|
387
387
|
point: {
|
|
388
388
|
events: {
|
|
389
|
-
legendItemClick: (event:
|
|
389
|
+
legendItemClick: (event: Highcharts.SeriesLegendItemClickEventObject) => void;
|
|
390
390
|
};
|
|
391
391
|
};
|
|
392
392
|
};
|
|
@@ -518,7 +518,7 @@ export function prepareConfig(data: any, options: any, isMobile: any, holidays:
|
|
|
518
518
|
};
|
|
519
519
|
series: {
|
|
520
520
|
events: {
|
|
521
|
-
legendItemClick: (event:
|
|
521
|
+
legendItemClick: (event: Highcharts.SeriesLegendItemClickEventObject) => void;
|
|
522
522
|
mouseOver: () => void;
|
|
523
523
|
mouseOut: () => void;
|
|
524
524
|
click: (event: any) => void;
|
|
@@ -544,7 +544,7 @@ export function prepareConfig(data: any, options: any, isMobile: any, holidays:
|
|
|
544
544
|
pie: {
|
|
545
545
|
point: {
|
|
546
546
|
events: {
|
|
547
|
-
legendItemClick: (event:
|
|
547
|
+
legendItemClick: (event: Highcharts.SeriesLegendItemClickEventObject) => void;
|
|
548
548
|
};
|
|
549
549
|
};
|
|
550
550
|
};
|
|
@@ -580,3 +580,4 @@ export function prepareConfig(data: any, options: any, isMobile: any, holidays:
|
|
|
580
580
|
export const chartTypesWithoutCrosshair: string[];
|
|
581
581
|
export const chartTypesWithoutYCrosshair: string[];
|
|
582
582
|
export const chartTypesWithNativeTooltip: string[];
|
|
583
|
+
import Highcharts from "highcharts";
|
|
@@ -1 +1,2 @@
|
|
|
1
|
-
|
|
1
|
+
import Highcharts from 'highcharts';
|
|
2
|
+
export declare const handleLegendItemClick: (event: Highcharts.SeriesLegendItemClickEventObject) => void;
|
|
@@ -1,29 +1,32 @@
|
|
|
1
1
|
import { drawComments, hideComments } from '../comments/drawing';
|
|
2
2
|
import { isNavigatorSeries } from './utils';
|
|
3
|
-
const
|
|
4
|
-
|
|
3
|
+
const getSeriesIdentifier = (series) => {
|
|
4
|
+
return series.userOptions.id || series.name;
|
|
5
|
+
};
|
|
6
|
+
const needSetVisible = (seriesName, seriesVisible, chartSeries) => {
|
|
7
|
+
if (!seriesVisible) {
|
|
5
8
|
return false;
|
|
6
9
|
}
|
|
7
10
|
const hasAnotherVisibleSeries = chartSeries
|
|
8
|
-
.filter((
|
|
9
|
-
.some((
|
|
10
|
-
return
|
|
11
|
+
.filter((series) => series.options.showInLegend !== false && getSeriesIdentifier(series) !== seriesName)
|
|
12
|
+
.some((series) => series.visible);
|
|
13
|
+
return seriesVisible && !hasAnotherVisibleSeries;
|
|
11
14
|
};
|
|
12
|
-
const updateSeries = (
|
|
13
|
-
const
|
|
15
|
+
const updateSeries = (series, chartSeries, type) => {
|
|
16
|
+
const clickedSeriesName = getSeriesIdentifier(series);
|
|
14
17
|
switch (type) {
|
|
15
18
|
case 'extended': {
|
|
16
19
|
chartSeries.forEach((item) => {
|
|
17
|
-
if (item
|
|
20
|
+
if (getSeriesIdentifier(item) === clickedSeriesName) {
|
|
18
21
|
item.setVisible(!item.visible, false);
|
|
19
22
|
}
|
|
20
23
|
});
|
|
21
24
|
break;
|
|
22
25
|
}
|
|
23
26
|
case 'default': {
|
|
24
|
-
const visible = needSetVisible(
|
|
27
|
+
const visible = needSetVisible(getSeriesIdentifier(series), series.visible, chartSeries);
|
|
25
28
|
chartSeries.forEach((item) => {
|
|
26
|
-
if (item
|
|
29
|
+
if (getSeriesIdentifier(item) === clickedSeriesName) {
|
|
27
30
|
item.setVisible(true, false);
|
|
28
31
|
}
|
|
29
32
|
else {
|
|
@@ -43,15 +46,17 @@ const updateComments = (chart) => {
|
|
|
43
46
|
// https://api.highcharts.com/class-reference/Highcharts#.SeriesLegendItemClickCallbackFunction
|
|
44
47
|
export const handleLegendItemClick = (event) => {
|
|
45
48
|
event.preventDefault();
|
|
46
|
-
const
|
|
47
|
-
const chart =
|
|
48
|
-
const chartSeries =
|
|
49
|
-
|
|
49
|
+
const series = event.target;
|
|
50
|
+
const chart = series.chart ? series.chart : series.series.chart;
|
|
51
|
+
const chartSeries = series.chart
|
|
52
|
+
? chart.series
|
|
53
|
+
: series.series.data;
|
|
54
|
+
if (isNavigatorSeries(series)) {
|
|
50
55
|
return;
|
|
51
56
|
}
|
|
52
|
-
const
|
|
53
|
-
const type =
|
|
54
|
-
updateSeries(
|
|
57
|
+
const isExtended = event.browserEvent.ctrlKey || event.browserEvent.metaKey;
|
|
58
|
+
const type = isExtended ? 'extended' : 'default';
|
|
59
|
+
updateSeries(series, chartSeries, type);
|
|
55
60
|
updateComments(chart);
|
|
56
61
|
chart.redraw();
|
|
57
62
|
};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { ChartKitHolidays } from '../../../../types';
|
|
2
|
-
import type { HighchartsWidgetData, HighchartsComment, ExtendedHChart } from '../../types';
|
|
2
|
+
import type { Highcharts, HighchartsWidgetData, HighchartsComment, ExtendedHChart } from '../../types';
|
|
3
3
|
import type { ConfigOptions } from './types';
|
|
4
4
|
import './graph.css';
|
|
5
5
|
declare type GetGraphArgs = {
|
|
@@ -354,7 +354,7 @@ declare function getGraph({ options, data, comments, isMobile, holidays }: GetGr
|
|
|
354
354
|
};
|
|
355
355
|
series: {
|
|
356
356
|
events: {
|
|
357
|
-
legendItemClick: (event:
|
|
357
|
+
legendItemClick: (event: Highcharts.SeriesLegendItemClickEventObject) => void;
|
|
358
358
|
mouseOver: () => void;
|
|
359
359
|
mouseOut: () => void;
|
|
360
360
|
click: (event: any) => void;
|
|
@@ -380,7 +380,7 @@ declare function getGraph({ options, data, comments, isMobile, holidays }: GetGr
|
|
|
380
380
|
pie: {
|
|
381
381
|
point: {
|
|
382
382
|
events: {
|
|
383
|
-
legendItemClick: (event:
|
|
383
|
+
legendItemClick: (event: Highcharts.SeriesLegendItemClickEventObject) => void;
|
|
384
384
|
};
|
|
385
385
|
};
|
|
386
386
|
};
|
package/package.json
CHANGED