@react-magma/charts 10.0.0 → 11.0.0-next.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.
Files changed (43) hide show
  1. package/dist/charts +13 -13
  2. package/dist/charts.js +1 -1
  3. package/dist/charts.js.map +1 -1
  4. package/dist/charts.map +1 -1
  5. package/dist/charts.modern.module.js +1 -1
  6. package/dist/charts.modern.module.js.map +1 -1
  7. package/dist/charts.umd.js +1 -1
  8. package/dist/charts.umd.js.map +1 -1
  9. package/dist/components/CarbonChart/CarbonChart.d.ts +10 -1
  10. package/dist/components/CarbonChart/CarbonChartArea.stories.d.ts +3 -0
  11. package/dist/components/CarbonChart/CarbonChartAreaStacked.stories.d.ts +1 -0
  12. package/dist/components/CarbonChart/CarbonChartBarGrouped.stories.d.ts +1 -0
  13. package/dist/components/CarbonChart/CarbonChartBarStacked.stories.d.ts +1 -0
  14. package/dist/components/CarbonChart/CarbonChartBoxplot.stories.d.ts +4 -0
  15. package/dist/components/CarbonChart/CarbonChartBubble.stories.d.ts +4 -0
  16. package/dist/components/CarbonChart/CarbonChartBullet.stories.d.ts +4 -0
  17. package/dist/components/CarbonChart/CarbonChartCombo.stories.d.ts +4 -0
  18. package/dist/components/CarbonChart/CarbonChartGauge.stories.d.ts +4 -0
  19. package/dist/components/CarbonChart/CarbonChartHistogram.stories.d.ts +4 -0
  20. package/dist/components/CarbonChart/CarbonChartLine.stories.d.ts +11 -0
  21. package/dist/components/CarbonChart/CarbonChartMeter.stories.d.ts +4 -0
  22. package/dist/components/CarbonChart/CarbonChartRadar.stories.d.ts +4 -0
  23. package/dist/components/CarbonChart/CarbonChartScatter.stories.d.ts +4 -0
  24. package/dist/components/CarbonChart/CarbonChartSparkline.stories.d.ts +4 -0
  25. package/dist/components/CarbonChart/CarbonChartStep.stories.d.ts +4 -0
  26. package/package.json +3 -3
  27. package/src/components/CarbonChart/CarbonChart.tsx +28 -1
  28. package/src/components/CarbonChart/CarbonChartArea.stories.tsx +272 -0
  29. package/src/components/CarbonChart/CarbonChartAreaStacked.stories.tsx +152 -0
  30. package/src/components/CarbonChart/CarbonChartBarGrouped.stories.tsx +124 -0
  31. package/src/components/CarbonChart/CarbonChartBarStacked.stories.tsx +125 -0
  32. package/src/components/CarbonChart/CarbonChartBoxplot.stories.tsx +274 -0
  33. package/src/components/CarbonChart/CarbonChartBubble.stories.tsx +606 -0
  34. package/src/components/CarbonChart/CarbonChartBullet.stories.tsx +89 -0
  35. package/src/components/CarbonChart/CarbonChartCombo.stories.tsx +1418 -0
  36. package/src/components/CarbonChart/CarbonChartGauge.stories.tsx +80 -0
  37. package/src/components/CarbonChart/CarbonChartHistogram.stories.tsx +767 -0
  38. package/src/components/CarbonChart/CarbonChartLine.stories.tsx +1050 -0
  39. package/src/components/CarbonChart/CarbonChartMeter.stories.tsx +216 -0
  40. package/src/components/CarbonChart/CarbonChartRadar.stories.tsx +479 -0
  41. package/src/components/CarbonChart/CarbonChartScatter.stories.tsx +467 -0
  42. package/src/components/CarbonChart/CarbonChartSparkline.stories.tsx +222 -0
  43. package/src/components/CarbonChart/CarbonChartStep.stories.tsx +173 -0
package/src/components/CarbonChart/CarbonChartCombo.stories.tsx ADDED
@@ -0,0 +1,1418 @@
1
+ import React from 'react';
2
+ import { Story, Meta } from '@storybook/react/types-6-0';
3
+ import { CarbonChart, CarbonChartProps, CarbonChartType } from '.';
4
+ import { Card } from 'react-magma-dom';
5
+
6
+ export default {
7
+ component: CarbonChart,
8
+ title: 'CarbonChart/Combo',
9
+ argTypes: {
10
+ isInverse: {
11
+ control: {
12
+ type: 'boolean',
13
+ },
14
+ },
15
+ type: {
16
+ control: {
17
+ type: 'select',
18
+ options: CarbonChartType,
19
+ },
20
+ },
21
+ },
22
+ } as Meta;
23
+
24
+ const Template: Story<CarbonChartProps> = args => (
25
+ <Card isInverse={args.isInverse} style={{ padding: '12px' }}>
26
+ <CarbonChart {...args} />
27
+ </Card>
28
+ );
29
+
30
+ export const ComboLineAndSimpleBarCustomConfigs = Template.bind({});
31
+ ComboLineAndSimpleBarCustomConfigs.args = {
32
+ isInverse: false,
33
+ type: CarbonChartType.combo,
34
+ dataSet: [
35
+ {
36
+ group: 'School A',
37
+ date: 'Monday',
38
+ value: 10000,
39
+ },
40
+ {
41
+ group: 'School A',
42
+ date: 'Tuesday',
43
+ value: 65000,
44
+ },
45
+ {
46
+ group: 'School A',
47
+ date: 'Wednesday',
48
+ value: 30000,
49
+ },
50
+ {
51
+ group: 'School A',
52
+ date: 'Thursday',
53
+ value: 49213,
54
+ },
55
+ {
56
+ group: 'School A',
57
+ date: 'Friday',
58
+ value: 49213,
59
+ },
60
+ {
61
+ group: 'Temperature',
62
+ date: 'Monday',
63
+ temp: 70,
64
+ },
65
+ {
66
+ group: 'Temperature',
67
+ date: 'Tuesday',
68
+ temp: 75,
69
+ },
70
+ {
71
+ group: 'Temperature',
72
+ date: 'Wednesday',
73
+ temp: 31,
74
+ },
75
+ {
76
+ group: 'Temperature',
77
+ date: 'Thursday',
78
+ temp: 31,
79
+ },
80
+ {
81
+ group: 'Temperature',
82
+ date: 'Friday',
83
+ temp: 43,
84
+ },
85
+ ],
86
+ options: {
87
+ title: 'Combo (Line + Simple bar) - custom configs',
88
+ axes: {
89
+ left: {
90
+ mapsTo: 'value',
91
+ scaleType: 'linear',
92
+ title: 'USA Summer School Attendance',
93
+ },
94
+ right: {
95
+ mapsTo: 'temp',
96
+ scaleType: 'linear',
97
+ title: 'Temperature (°F)',
98
+ correspondingDatasets: ['Temperature'],
99
+ },
100
+ bottom: {
101
+ title: 'Day of the Week',
102
+ mapsTo: 'date',
103
+ scaleType: 'labels',
104
+ },
105
+ },
106
+ comboChartTypes: [
107
+ {
108
+ type: 'simple-bar',
109
+ correspondingDatasets: ['School A'],
110
+ },
111
+ {
112
+ type: 'line',
113
+ options: {
114
+ points: {
115
+ radius: 5,
116
+ },
117
+ },
118
+ correspondingDatasets: ['Temperature'],
119
+ },
120
+ ],
121
+ height: '400px',
122
+ },
123
+ };
124
+
125
+ // Uncomment when adding new charts. Issues: #1054, #1055, #1056
126
+
127
+ // export const ComboLineAndStackedBar = Template.bind({});
128
+ // ComboLineAndStackedBar.args = {
129
+ // isInverse: false,
130
+ // type: CarbonChartType.combo,
131
+ // dataSet: [
132
+ // {
133
+ // group: 'Florida',
134
+ // key: 'Monday',
135
+ // value: 65000,
136
+ // },
137
+ // {
138
+ // group: 'Florida',
139
+ // key: 'Tuesday',
140
+ // value: 29123,
141
+ // },
142
+ // {
143
+ // group: 'Florida',
144
+ // key: 'Wednesday',
145
+ // value: 35213,
146
+ // },
147
+ // {
148
+ // group: 'Florida',
149
+ // key: 'Thursday',
150
+ // value: 51213,
151
+ // },
152
+ // {
153
+ // group: 'Florida',
154
+ // key: 'Friday',
155
+ // value: 16932,
156
+ // },
157
+ // {
158
+ // group: 'California',
159
+ // key: 'Monday',
160
+ // value: 32432,
161
+ // },
162
+ // {
163
+ // group: 'California',
164
+ // key: 'Tuesday',
165
+ // value: 21312,
166
+ // },
167
+ // {
168
+ // group: 'California',
169
+ // key: 'Wednesday',
170
+ // value: 56456,
171
+ // },
172
+ // {
173
+ // group: 'California',
174
+ // key: 'Thursday',
175
+ // value: 21312,
176
+ // },
177
+ // {
178
+ // group: 'California',
179
+ // key: 'Friday',
180
+ // value: 34234,
181
+ // },
182
+ // {
183
+ // group: 'Tokyo',
184
+ // key: 'Monday',
185
+ // value: 12312,
186
+ // },
187
+ // {
188
+ // group: 'Tokyo',
189
+ // key: 'Tuesday',
190
+ // value: 23232,
191
+ // },
192
+ // {
193
+ // group: 'Tokyo',
194
+ // key: 'Wednesday',
195
+ // value: 34232,
196
+ // },
197
+ // {
198
+ // group: 'Tokyo',
199
+ // key: 'Thursday',
200
+ // value: 12312,
201
+ // },
202
+ // {
203
+ // group: 'Tokyo',
204
+ // key: 'Friday',
205
+ // value: 34234,
206
+ // },
207
+ // {
208
+ // group: 'Temperature',
209
+ // key: 'Monday',
210
+ // temp: 23,
211
+ // },
212
+ // {
213
+ // group: 'Temperature',
214
+ // key: 'Tuesday',
215
+ // temp: 21,
216
+ // },
217
+ // {
218
+ // group: 'Temperature',
219
+ // key: 'Wednesday',
220
+ // temp: 32,
221
+ // },
222
+ // {
223
+ // group: 'Temperature',
224
+ // key: 'Thursday',
225
+ // temp: 34,
226
+ // },
227
+ // {
228
+ // group: 'Temperature',
229
+ // key: 'Friday',
230
+ // temp: 23,
231
+ // },
232
+ // ],
233
+ // options: {
234
+ // title: 'Combo (Line + Stacked bar)',
235
+ // axes: {
236
+ // left: {
237
+ // title: 'Disney Park Attendance',
238
+ // mapsTo: 'value',
239
+ // stacked: true,
240
+ // },
241
+ // bottom: {
242
+ // title: '2018 Annual Sales Figures',
243
+ // mapsTo: 'key',
244
+ // scaleType: 'labels',
245
+ // },
246
+ // right: {
247
+ // title: 'Temperature (°C)',
248
+ // mapsTo: 'temp',
249
+ // correspondingDatasets: ['Temperature'],
250
+ // },
251
+ // },
252
+ // comboChartTypes: [
253
+ // {
254
+ // type: 'stacked-bar',
255
+ // options: {},
256
+ // correspondingDatasets: ['Florida', 'California', 'Tokyo'],
257
+ // },
258
+ // {
259
+ // type: 'line',
260
+ // options: {},
261
+ // correspondingDatasets: ['Temperature'],
262
+ // },
263
+ // ],
264
+ // height: '400px',
265
+ // },
266
+ // };
267
+
268
+ // export const ComboLineAndGroupedBarCustomConfigs = Template.bind({});
269
+ // ComboLineAndGroupedBarCustomConfigs.args = {
270
+ // isInverse: false,
271
+ // type: CarbonChartType.combo,
272
+ // dataSet: [
273
+ // {
274
+ // group: 'Location 1',
275
+ // key: 'Monday',
276
+ // value: 65000,
277
+ // },
278
+ // {
279
+ // group: 'Location 1',
280
+ // key: 'Tuesday',
281
+ // value: -39123,
282
+ // },
283
+ // {
284
+ // group: 'Location 1',
285
+ // key: 'Wednesday',
286
+ // value: -35213,
287
+ // },
288
+ // {
289
+ // group: 'Location 1',
290
+ // key: 'Thursday',
291
+ // value: 51213,
292
+ // },
293
+ // {
294
+ // group: 'Location 1',
295
+ // key: 'Friday',
296
+ // value: 16932,
297
+ // },
298
+ // {
299
+ // group: 'Location 2',
300
+ // key: 'Monday',
301
+ // value: 32432,
302
+ // },
303
+ // {
304
+ // group: 'Location 2',
305
+ // key: 'Tuesday',
306
+ // value: -21312,
307
+ // },
308
+ // {
309
+ // group: 'Location 2',
310
+ // key: 'Wednesday',
311
+ // value: -56456,
312
+ // },
313
+ // {
314
+ // group: 'Location 2',
315
+ // key: 'Thursday',
316
+ // value: -21312,
317
+ // },
318
+ // {
319
+ // group: 'Location 2',
320
+ // key: 'Friday',
321
+ // value: 34234,
322
+ // },
323
+ // {
324
+ // group: 'Location 3',
325
+ // key: 'Monday',
326
+ // value: -12312,
327
+ // },
328
+ // {
329
+ // group: 'Location 3',
330
+ // key: 'Tuesday',
331
+ // value: 23232,
332
+ // },
333
+ // {
334
+ // group: 'Location 3',
335
+ // key: 'Wednesday',
336
+ // value: 34232,
337
+ // },
338
+ // {
339
+ // group: 'Location 3',
340
+ // key: 'Thursday',
341
+ // value: -12312,
342
+ // },
343
+ // {
344
+ // group: 'Location 3',
345
+ // key: 'Friday',
346
+ // value: -34234,
347
+ // },
348
+ // {
349
+ // group: 'Temperature',
350
+ // key: 'Monday',
351
+ // temp: 20,
352
+ // },
353
+ // {
354
+ // group: 'Temperature',
355
+ // key: 'Tuesday',
356
+ // temp: 23,
357
+ // },
358
+ // {
359
+ // group: 'Temperature',
360
+ // key: 'Wednesday',
361
+ // temp: 33,
362
+ // },
363
+ // {
364
+ // group: 'Temperature',
365
+ // key: 'Thursday',
366
+ // temp: 34,
367
+ // },
368
+ // {
369
+ // group: 'Temperature',
370
+ // key: 'Friday',
371
+ // temp: 34,
372
+ // },
373
+ // ],
374
+ // options: {
375
+ // title: 'Combo (Line + Grouped bar) - custom configs',
376
+ // axes: {
377
+ // left: {
378
+ // title: 'Sales',
379
+ // mapsTo: 'value',
380
+ // },
381
+ // bottom: {
382
+ // scaleType: 'labels',
383
+ // mapsTo: 'key',
384
+ // },
385
+ // right: {
386
+ // title: 'Temperature (°C)',
387
+ // mapsTo: 'temp',
388
+ // correspondingDatasets: ['Temperature'],
389
+ // },
390
+ // },
391
+ // comboChartTypes: [
392
+ // {
393
+ // type: 'grouped-bar',
394
+ // correspondingDatasets: ['Location 1', 'Location 2', 'Location 3'],
395
+ // },
396
+ // {
397
+ // type: 'line',
398
+ // options: {
399
+ // points: {
400
+ // filled: true,
401
+ // opacity: 0.5,
402
+ // },
403
+ // },
404
+ // correspondingDatasets: ['Temperature'],
405
+ // },
406
+ // ],
407
+ // height: '400px',
408
+ // },
409
+ // };
410
+
411
+ // export const ComboLineAndFloatingBar = Template.bind({});
412
+ // ComboLineAndFloatingBar.args = {
413
+ // isInverse: false,
414
+ // type: CarbonChartType.combo,
415
+ // dataSet: [
416
+ // {
417
+ // group: 'School A',
418
+ // date: 'Monday',
419
+ // value: 50000,
420
+ // },
421
+ // {
422
+ // group: 'School A',
423
+ // date: 'Tuesday',
424
+ // value: 45000,
425
+ // },
426
+ // {
427
+ // group: 'School A',
428
+ // date: 'Wednesday',
429
+ // value: 58000,
430
+ // },
431
+ // {
432
+ // group: 'School A',
433
+ // date: 'Thursday',
434
+ // value: 31000,
435
+ // },
436
+ // {
437
+ // group: 'School A',
438
+ // date: 'Friday',
439
+ // value: 33000,
440
+ // },
441
+ // {
442
+ // group: 'Temperature',
443
+ // date: 'Monday',
444
+ // temp: [65, 70],
445
+ // },
446
+ // {
447
+ // group: 'Temperature',
448
+ // date: 'Tuesday',
449
+ // temp: [67, 71],
450
+ // },
451
+ // {
452
+ // group: 'Temperature',
453
+ // date: 'Wednesday',
454
+ // temp: [75, 83],
455
+ // },
456
+ // {
457
+ // group: 'Temperature',
458
+ // date: 'Thursday',
459
+ // temp: [31, 42],
460
+ // },
461
+ // {
462
+ // group: 'Temperature',
463
+ // date: 'Friday',
464
+ // temp: [43, 55],
465
+ // },
466
+ // ],
467
+ // options: {
468
+ // title: 'Combo (Line + Floating bar)',
469
+ // axes: {
470
+ // left: {
471
+ // mapsTo: 'value',
472
+ // scaleType: 'linear',
473
+ // title: 'USA Summer School Attendance',
474
+ // correspondingDatasets: ['School A'],
475
+ // },
476
+ // right: {
477
+ // mapsTo: 'temp',
478
+ // title: 'Temperature (°F)',
479
+ // },
480
+ // bottom: {
481
+ // title: 'Day of the Week',
482
+ // mapsTo: 'date',
483
+ // scaleType: 'labels',
484
+ // },
485
+ // },
486
+ // comboChartTypes: [
487
+ // {
488
+ // type: 'simple-bar',
489
+ // correspondingDatasets: ['Temperature'],
490
+ // },
491
+ // {
492
+ // type: 'line',
493
+ // options: {
494
+ // points: {
495
+ // radius: 5,
496
+ // },
497
+ // },
498
+ // correspondingDatasets: ['School A'],
499
+ // },
500
+ // ],
501
+ // height: '400px',
502
+ // },
503
+ // };
504
+
505
+ // export const ComboHorizontalLineAndGroupedBar = Template.bind({});
506
+ // ComboHorizontalLineAndGroupedBar.args = {
507
+ // isInverse: false,
508
+ // type: CarbonChartType.combo,
509
+ // dataSet: [
510
+ // {
511
+ // group: 'Location 1',
512
+ // key: 'Monday',
513
+ // value: 65000,
514
+ // },
515
+ // {
516
+ // group: 'Location 1',
517
+ // key: 'Tuesday',
518
+ // value: -39123,
519
+ // },
520
+ // {
521
+ // group: 'Location 1',
522
+ // key: 'Wednesday',
523
+ // value: -35213,
524
+ // },
525
+ // {
526
+ // group: 'Location 2',
527
+ // key: 'Monday',
528
+ // value: 32432,
529
+ // },
530
+ // {
531
+ // group: 'Location 2',
532
+ // key: 'Tuesday',
533
+ // value: -21312,
534
+ // },
535
+ // {
536
+ // group: 'Location 2',
537
+ // key: 'Wednesday',
538
+ // value: -56456,
539
+ // },
540
+ // {
541
+ // group: 'Location 3',
542
+ // key: 'Monday',
543
+ // value: -12312,
544
+ // },
545
+ // {
546
+ // group: 'Location 3',
547
+ // key: 'Tuesday',
548
+ // value: 23232,
549
+ // },
550
+ // {
551
+ // group: 'Location 3',
552
+ // key: 'Wednesday',
553
+ // value: 34232,
554
+ // },
555
+ // {
556
+ // group: 'Temperature',
557
+ // key: 'Monday',
558
+ // temp: 20,
559
+ // },
560
+ // {
561
+ // group: 'Temperature',
562
+ // key: 'Tuesday',
563
+ // temp: 23,
564
+ // },
565
+ // {
566
+ // group: 'Temperature',
567
+ // key: 'Wednesday',
568
+ // temp: 33,
569
+ // },
570
+ // ],
571
+ // options: {
572
+ // title: 'Combo Horizontal (Line + Grouped bar)',
573
+ // axes: {
574
+ // top: {
575
+ // title: 'Sales',
576
+ // mapsTo: 'value',
577
+ // main: true,
578
+ // },
579
+ // left: {
580
+ // scaleType: 'labels',
581
+ // mapsTo: 'key',
582
+ // },
583
+ // bottom: {
584
+ // title: 'Temperature (°C)',
585
+ // mapsTo: 'temp',
586
+ // correspondingDatasets: ['Temperature'],
587
+ // },
588
+ // },
589
+ // comboChartTypes: [
590
+ // {
591
+ // type: 'grouped-bar',
592
+ // correspondingDatasets: ['Location 1', 'Location 2', 'Location 3'],
593
+ // },
594
+ // {
595
+ // type: 'line',
596
+ // correspondingDatasets: ['Temperature'],
597
+ // },
598
+ // ],
599
+ // height: '400px',
600
+ // },
601
+ // };
602
+
603
+ // export const HorizontalComboLineAndSimpleBar = Template.bind({});
604
+ // HorizontalComboLineAndSimpleBar.args = {
605
+ // isInverse: false,
606
+ // type: CarbonChartType.combo,
607
+ // dataSet: [
608
+ // {
609
+ // group: 'School A',
610
+ // date: 'Monday',
611
+ // value: 10000,
612
+ // },
613
+ // {
614
+ // group: 'School A',
615
+ // date: 'Tuesday',
616
+ // value: 65000,
617
+ // },
618
+ // {
619
+ // group: 'School A',
620
+ // date: 'Wednesday',
621
+ // value: 30000,
622
+ // },
623
+ // {
624
+ // group: 'School A',
625
+ // date: 'Thursday',
626
+ // value: 49213,
627
+ // },
628
+ // {
629
+ // group: 'School A',
630
+ // date: 'Friday',
631
+ // value: 49213,
632
+ // },
633
+ // {
634
+ // group: 'Temperature',
635
+ // date: 'Monday',
636
+ // temp: 70,
637
+ // },
638
+ // {
639
+ // group: 'Temperature',
640
+ // date: 'Tuesday',
641
+ // temp: 75,
642
+ // },
643
+ // {
644
+ // group: 'Temperature',
645
+ // date: 'Wednesday',
646
+ // temp: 31,
647
+ // },
648
+ // {
649
+ // group: 'Temperature',
650
+ // date: 'Thursday',
651
+ // temp: 31,
652
+ // },
653
+ // {
654
+ // group: 'Temperature',
655
+ // date: 'Friday',
656
+ // temp: 43,
657
+ // },
658
+ // ],
659
+ // options: {
660
+ // title: 'Horizontal Combo (Line + Simple bar)',
661
+ // axes: {
662
+ // top: {
663
+ // mapsTo: 'value',
664
+ // scaleType: 'linear',
665
+ // title: 'USA Summer School Attendance',
666
+ // },
667
+ // bottom: {
668
+ // mapsTo: 'temp',
669
+ // scaleType: 'linear',
670
+ // title: 'Temperature (°F)',
671
+ // correspondingDatasets: ['Temperature'],
672
+ // },
673
+ // left: {
674
+ // title: 'Day of the Week',
675
+ // mapsTo: 'date',
676
+ // scaleType: 'labels',
677
+ // },
678
+ // },
679
+ // comboChartTypes: [
680
+ // {
681
+ // type: 'simple-bar',
682
+ // options: {},
683
+ // correspondingDatasets: ['School A'],
684
+ // },
685
+ // {
686
+ // type: 'line',
687
+ // options: {},
688
+ // correspondingDatasets: ['Temperature'],
689
+ // },
690
+ // ],
691
+ // height: '400px',
692
+ // },
693
+ // };
694
+
695
+ // export const ComboLineAndArea = Template.bind({});
696
+ // ComboLineAndArea.args = {
697
+ // isInverse: false,
698
+ // type: CarbonChartType.combo,
699
+ // dataSet: [
700
+ // {
701
+ // group: 'Health',
702
+ // key: 'January',
703
+ // value: 312,
704
+ // },
705
+ // {
706
+ // group: 'Health',
707
+ // key: 'February',
708
+ // value: 232,
709
+ // },
710
+ // {
711
+ // group: 'Health',
712
+ // key: 'March',
713
+ // value: 432,
714
+ // },
715
+ // {
716
+ // group: 'Health',
717
+ // key: 'April',
718
+ // value: 712,
719
+ // },
720
+ // {
721
+ // group: 'Health',
722
+ // key: 'May',
723
+ // value: 834,
724
+ // },
725
+ // {
726
+ // group: 'Health',
727
+ // key: 'June',
728
+ // value: 800,
729
+ // },
730
+ // {
731
+ // group: 'Health',
732
+ // key: 'July',
733
+ // value: 612,
734
+ // },
735
+ // {
736
+ // group: 'Health',
737
+ // key: 'August',
738
+ // value: 442,
739
+ // },
740
+ // {
741
+ // group: 'Temperature',
742
+ // key: 'January',
743
+ // temp: -20,
744
+ // },
745
+ // {
746
+ // group: 'Temperature',
747
+ // key: 'February',
748
+ // temp: -12,
749
+ // },
750
+ // {
751
+ // group: 'Temperature',
752
+ // key: 'March',
753
+ // temp: 3,
754
+ // },
755
+ // {
756
+ // group: 'Temperature',
757
+ // key: 'April',
758
+ // temp: 18,
759
+ // },
760
+ // {
761
+ // group: 'Temperature',
762
+ // key: 'May',
763
+ // temp: 24,
764
+ // },
765
+ // {
766
+ // group: 'Temperature',
767
+ // key: 'June',
768
+ // temp: 34,
769
+ // },
770
+ // {
771
+ // group: 'Temperature',
772
+ // key: 'July',
773
+ // temp: 37,
774
+ // },
775
+ // {
776
+ // group: 'Temperature',
777
+ // key: 'August',
778
+ // temp: 30,
779
+ // },
780
+ // ],
781
+ // options: {
782
+ // title: 'Combo (Line + Area)',
783
+ // points: {
784
+ // enabled: false,
785
+ // },
786
+ // axes: {
787
+ // left: {
788
+ // title: 'Score',
789
+ // mapsTo: 'value',
790
+ // },
791
+ // bottom: {
792
+ // scaleType: 'labels',
793
+ // mapsTo: 'key',
794
+ // },
795
+ // right: {
796
+ // title: 'Temperature (°C)',
797
+ // mapsTo: 'temp',
798
+ // correspondingDatasets: ['Temperature'],
799
+ // },
800
+ // },
801
+ // comboChartTypes: [
802
+ // {
803
+ // type: 'area',
804
+ // options: {},
805
+ // correspondingDatasets: ['Health'],
806
+ // },
807
+ // {
808
+ // type: 'line',
809
+ // options: {
810
+ // points: {
811
+ // enabled: true,
812
+ // },
813
+ // },
814
+ // correspondingDatasets: ['Temperature'],
815
+ // },
816
+ // ],
817
+ // curve: 'curveNatural',
818
+ // height: '400px',
819
+ // },
820
+ // };
821
+
822
+ // export const ComboStackedAreaAndLine = Template.bind({});
823
+ // ComboStackedAreaAndLine.args = {
824
+ // isInverse: false,
825
+ // type: CarbonChartType.combo,
826
+ // dataSet: [
827
+ // {
828
+ // group: 'Dataset 1',
829
+ // date: '2023-01-01',
830
+ // value: 10000,
831
+ // },
832
+ // {
833
+ // group: 'Dataset 1',
834
+ // date: '2023-01-05',
835
+ // value: 65000,
836
+ // },
837
+ // {
838
+ // group: 'Dataset 1',
839
+ // date: '2023-01-08',
840
+ // value: 10000,
841
+ // },
842
+ // {
843
+ // group: 'Dataset 1',
844
+ // date: '2023-01-13',
845
+ // value: 49213,
846
+ // },
847
+ // {
848
+ // group: 'Dataset 1',
849
+ // date: '2023-01-17',
850
+ // value: 51213,
851
+ // },
852
+ // {
853
+ // group: 'Dataset 2',
854
+ // date: '2023-01-01',
855
+ // value: 20000,
856
+ // },
857
+ // {
858
+ // group: 'Dataset 2',
859
+ // date: '2023-01-05',
860
+ // value: 25000,
861
+ // },
862
+ // {
863
+ // group: 'Dataset 2',
864
+ // date: '2023-01-08',
865
+ // value: 60000,
866
+ // },
867
+ // {
868
+ // group: 'Dataset 2',
869
+ // date: '2023-01-13',
870
+ // value: 30213,
871
+ // },
872
+ // {
873
+ // group: 'Dataset 2',
874
+ // date: '2023-01-17',
875
+ // value: 55213,
876
+ // },
877
+ // {
878
+ // group: 'Dataset 3',
879
+ // date: '2023-01-01',
880
+ // value: 30000,
881
+ // },
882
+ // {
883
+ // group: 'Dataset 3',
884
+ // date: '2023-01-05',
885
+ // value: 20000,
886
+ // },
887
+ // {
888
+ // group: 'Dataset 3',
889
+ // date: '2023-01-08',
890
+ // value: 40000,
891
+ // },
892
+ // {
893
+ // group: 'Dataset 3',
894
+ // date: '2023-01-13',
895
+ // value: 60213,
896
+ // },
897
+ // {
898
+ // group: 'Dataset 3',
899
+ // date: '2023-01-17',
900
+ // value: 25213,
901
+ // },
902
+ // {
903
+ // group: 'Temperature',
904
+ // date: '2023-01-01',
905
+ // temp: 77,
906
+ // },
907
+ // {
908
+ // group: 'Temperature',
909
+ // date: '2023-01-05',
910
+ // temp: 65,
911
+ // },
912
+ // {
913
+ // group: 'Temperature',
914
+ // date: '2023-01-08',
915
+ // temp: 80,
916
+ // },
917
+ // {
918
+ // group: 'Temperature',
919
+ // date: '2023-01-13',
920
+ // temp: 43,
921
+ // },
922
+ // {
923
+ // group: 'Temperature',
924
+ // date: '2023-01-17',
925
+ // temp: 53,
926
+ // },
927
+ // ],
928
+ // options: {
929
+ // title: 'Combo (Stacked Area + Line)',
930
+ // axes: {
931
+ // left: {
932
+ // title: 'left',
933
+ // stacked: true,
934
+ // mapsTo: 'value',
935
+ // titleOrientation: 'right',
936
+ // },
937
+ // bottom: {
938
+ // scaleType: 'time',
939
+ // mapsTo: 'date',
940
+ // },
941
+ // right: {
942
+ // title: 'right',
943
+ // scaleType: 'linear',
944
+ // mapsTo: 'temp',
945
+ // correspondingDatasets: ['Temperature'],
946
+ // titleOrientation: 'left',
947
+ // },
948
+ // },
949
+ // curve: 'curveMonotoneX',
950
+ // comboChartTypes: [
951
+ // {
952
+ // type: 'stacked-area',
953
+ // options: {
954
+ // points: {
955
+ // enabled: false,
956
+ // },
957
+ // },
958
+ // correspondingDatasets: ['Dataset 1', 'Dataset 2', 'Dataset 3'],
959
+ // },
960
+ // {
961
+ // type: 'line',
962
+ // correspondingDatasets: ['Temperature'],
963
+ // },
964
+ // ],
965
+ // height: '400px',
966
+ // },
967
+ // };
968
+
969
+ // export const ComboLineAndScatterAndBar = Template.bind({});
970
+ // ComboLineAndScatterAndBar.args = {
971
+ // isInverse: false,
972
+ // type: CarbonChartType.combo,
973
+ // dataSet: [
974
+ // {
975
+ // group: 'Paris',
976
+ // key: 'Monday',
977
+ // temp: 25,
978
+ // },
979
+ // {
980
+ // group: 'Paris',
981
+ // key: 'Tuesday',
982
+ // temp: 33,
983
+ // },
984
+ // {
985
+ // group: 'Paris',
986
+ // key: 'Wednesday',
987
+ // temp: 27,
988
+ // },
989
+ // {
990
+ // group: 'Paris',
991
+ // key: 'Thursday',
992
+ // temp: 25,
993
+ // },
994
+ // {
995
+ // group: 'Paris',
996
+ // key: 'Friday',
997
+ // temp: 32,
998
+ // },
999
+ // {
1000
+ // group: 'Marseille',
1001
+ // key: 'Monday',
1002
+ // temp: 16,
1003
+ // },
1004
+ // {
1005
+ // group: 'Marseille',
1006
+ // key: 'Tuesday',
1007
+ // temp: 22,
1008
+ // },
1009
+ // {
1010
+ // group: 'Marseille',
1011
+ // key: 'Wednesday',
1012
+ // temp: 20,
1013
+ // },
1014
+ // {
1015
+ // group: 'Marseille',
1016
+ // key: 'Thursday',
1017
+ // temp: 22,
1018
+ // },
1019
+ // {
1020
+ // group: 'Marseille',
1021
+ // key: 'Friday',
1022
+ // temp: 25,
1023
+ // },
1024
+ // {
1025
+ // group: 'Avg Temperature',
1026
+ // key: 'Monday',
1027
+ // temp: 20.5,
1028
+ // },
1029
+ // {
1030
+ // group: 'Avg Temperature',
1031
+ // key: 'Tuesday',
1032
+ // temp: 27.5,
1033
+ // },
1034
+ // {
1035
+ // group: 'Avg Temperature',
1036
+ // key: 'Wednesday',
1037
+ // temp: 23.5,
1038
+ // },
1039
+ // {
1040
+ // group: 'Avg Temperature',
1041
+ // key: 'Thursday',
1042
+ // temp: 23.5,
1043
+ // },
1044
+ // {
1045
+ // group: 'Avg Temperature',
1046
+ // key: 'Friday',
1047
+ // temp: 28.5,
1048
+ // },
1049
+ // {
1050
+ // group: 'Attendance',
1051
+ // key: 'Monday',
1052
+ // value: 2650,
1053
+ // },
1054
+ // {
1055
+ // group: 'Attendance',
1056
+ // key: 'Tuesday',
1057
+ // value: 2553,
1058
+ // },
1059
+ // {
1060
+ // group: 'Attendance',
1061
+ // key: 'Wednesday',
1062
+ // value: 3433,
1063
+ // },
1064
+ // {
1065
+ // group: 'Attendance',
1066
+ // key: 'Thursday',
1067
+ // value: 3754,
1068
+ // },
1069
+ // {
1070
+ // group: 'Attendance',
1071
+ // key: 'Friday',
1072
+ // value: 3744,
1073
+ // },
1074
+ // ],
1075
+ // options: {
1076
+ // title: 'Combo (Line + Scatter + Bar)',
1077
+ // axes: {
1078
+ // left: {
1079
+ // mapsTo: 'value',
1080
+ // title: 'Attendance',
1081
+ // },
1082
+ // bottom: {
1083
+ // scaleType: 'labels',
1084
+ // mapsTo: 'key',
1085
+ // },
1086
+ // right: {
1087
+ // title: 'Temperature (°C)',
1088
+ // mapsTo: 'temp',
1089
+ // scaleType: 'linear',
1090
+ // correspondingDatasets: ['Avg Temperature', 'Paris', 'Marseille'],
1091
+ // },
1092
+ // },
1093
+ // curve: 'curveMonotoneX',
1094
+ // comboChartTypes: [
1095
+ // {
1096
+ // type: 'simple-bar',
1097
+ // correspondingDatasets: ['Attendance'],
1098
+ // },
1099
+ // {
1100
+ // type: 'scatter',
1101
+ // correspondingDatasets: ['Paris', 'Marseille'],
1102
+ // },
1103
+ // {
1104
+ // type: 'line',
1105
+ // correspondingDatasets: ['Avg Temperature'],
1106
+ // },
1107
+ // ],
1108
+ // height: '400px',
1109
+ // },
1110
+ // };
1111
+
1112
+ // export const ComboLineAndAreaTimeSeries = Template.bind({});
1113
+ // ComboLineAndAreaTimeSeries.args = {
1114
+ // isInverse: false,
1115
+ // type: CarbonChartType.combo,
1116
+ // dataSet: [
1117
+ // {
1118
+ // group: 'Health',
1119
+ // key: '2022-12-30',
1120
+ // value: 312,
1121
+ // },
1122
+ // {
1123
+ // group: 'Health',
1124
+ // key: '2023-01-06',
1125
+ // value: 232,
1126
+ // },
1127
+ // {
1128
+ // group: 'Health',
1129
+ // key: '2023-01-08',
1130
+ // value: 432,
1131
+ // },
1132
+ // {
1133
+ // group: 'Health',
1134
+ // key: '2023-01-15',
1135
+ // value: 712,
1136
+ // },
1137
+ // {
1138
+ // group: 'Health',
1139
+ // key: '2023-01-19',
1140
+ // value: 834,
1141
+ // },
1142
+ // {
1143
+ // group: 'Health',
1144
+ // key: '2023-02-01',
1145
+ // value: 800,
1146
+ // },
1147
+ // {
1148
+ // group: 'Health',
1149
+ // key: '2023-02-05',
1150
+ // value: 612,
1151
+ // },
1152
+ // {
1153
+ // group: 'Health',
1154
+ // key: '2023-02-13',
1155
+ // value: 442,
1156
+ // },
1157
+ // {
1158
+ // group: 'Temperature',
1159
+ // key: '2023-01-01',
1160
+ // temp: -20,
1161
+ // },
1162
+ // {
1163
+ // group: 'Temperature',
1164
+ // key: '2023-01-05',
1165
+ // temp: -12,
1166
+ // },
1167
+ // {
1168
+ // group: 'Temperature',
1169
+ // key: '2023-01-08',
1170
+ // temp: 3,
1171
+ // },
1172
+ // {
1173
+ // group: 'Temperature',
1174
+ // key: '2023-01-13',
1175
+ // temp: 18,
1176
+ // },
1177
+ // {
1178
+ // group: 'Temperature',
1179
+ // key: '2023-01-19',
1180
+ // temp: 24,
1181
+ // },
1182
+ // {
1183
+ // group: 'Temperature',
1184
+ // key: '2023-02-02',
1185
+ // temp: 34,
1186
+ // },
1187
+ // {
1188
+ // group: 'Temperature',
1189
+ // key: '2023-02-07',
1190
+ // temp: 37,
1191
+ // },
1192
+ // {
1193
+ // group: 'Temperature',
1194
+ // key: '2023-02-09',
1195
+ // temp: 30,
1196
+ // },
1197
+ // ],
1198
+ // options: {
1199
+ // title: 'Combo (Line + Area) Time series',
1200
+ // points: {
1201
+ // enabled: false,
1202
+ // },
1203
+ // axes: {
1204
+ // left: {
1205
+ // title: 'Score',
1206
+ // mapsTo: 'value',
1207
+ // },
1208
+ // bottom: {
1209
+ // scaleType: 'time',
1210
+ // mapsTo: 'key',
1211
+ // },
1212
+ // right: {
1213
+ // title: 'Temperature (°C)',
1214
+ // mapsTo: 'temp',
1215
+ // correspondingDatasets: ['Temperature'],
1216
+ // },
1217
+ // },
1218
+ // comboChartTypes: [
1219
+ // {
1220
+ // type: 'area',
1221
+ // options: {},
1222
+ // correspondingDatasets: ['Health'],
1223
+ // },
1224
+ // {
1225
+ // type: 'line',
1226
+ // options: {
1227
+ // points: {
1228
+ // enabled: true,
1229
+ // },
1230
+ // },
1231
+ // correspondingDatasets: ['Temperature'],
1232
+ // },
1233
+ // ],
1234
+ // curve: 'curveNatural',
1235
+ // timeScale: {
1236
+ // addSpaceOnEdges: 0,
1237
+ // },
1238
+ // height: '400px',
1239
+ // },
1240
+ // };
1241
+
1242
+ // export const ComboChartEmpty = Template.bind({});
1243
+ // ComboChartEmpty.args = {
1244
+ // isInverse: false,
1245
+ // type: CarbonChartType.combo,
1246
+ // dataSet: [],
1247
+ // options: {
1248
+ // title: 'Combo Chart (empty)',
1249
+ // axes: {
1250
+ // left: {
1251
+ // mapsTo: 'value',
1252
+ // title: 'Attendance',
1253
+ // },
1254
+ // bottom: {
1255
+ // scaleType: 'labels',
1256
+ // mapsTo: 'key',
1257
+ // },
1258
+ // right: {
1259
+ // title: 'Temperature (°C)',
1260
+ // mapsTo: 'temp',
1261
+ // scaleType: 'linear',
1262
+ // correspondingDatasets: ['Temperature'],
1263
+ // },
1264
+ // },
1265
+ // comboChartTypes: [
1266
+ // {
1267
+ // type: 'simple-bar',
1268
+ // correspondingDatasets: ['Attendance'],
1269
+ // },
1270
+ // {
1271
+ // type: 'line',
1272
+ // correspondingDatasets: ['Temperature'],
1273
+ // },
1274
+ // ],
1275
+ // height: '400px',
1276
+ // },
1277
+ // };
1278
+
1279
+ // export const ComboChartLoading = Template.bind({});
1280
+ // ComboChartLoading.args = {
1281
+ // isInverse: false,
1282
+ // type: CarbonChartType.combo,
1283
+ // dataSet: [
1284
+ // {
1285
+ // group: 'Paris',
1286
+ // key: 'Monday',
1287
+ // temp: 25,
1288
+ // },
1289
+ // {
1290
+ // group: 'Paris',
1291
+ // key: 'Tuesday',
1292
+ // temp: 33,
1293
+ // },
1294
+ // {
1295
+ // group: 'Paris',
1296
+ // key: 'Wednesday',
1297
+ // temp: 27,
1298
+ // },
1299
+ // {
1300
+ // group: 'Paris',
1301
+ // key: 'Thursday',
1302
+ // temp: 25,
1303
+ // },
1304
+ // {
1305
+ // group: 'Paris',
1306
+ // key: 'Friday',
1307
+ // temp: 32,
1308
+ // },
1309
+ // {
1310
+ // group: 'Marseille',
1311
+ // key: 'Monday',
1312
+ // temp: 16,
1313
+ // },
1314
+ // {
1315
+ // group: 'Marseille',
1316
+ // key: 'Tuesday',
1317
+ // temp: 22,
1318
+ // },
1319
+ // {
1320
+ // group: 'Marseille',
1321
+ // key: 'Wednesday',
1322
+ // temp: 20,
1323
+ // },
1324
+ // {
1325
+ // group: 'Marseille',
1326
+ // key: 'Thursday',
1327
+ // temp: 22,
1328
+ // },
1329
+ // {
1330
+ // group: 'Marseille',
1331
+ // key: 'Friday',
1332
+ // temp: 25,
1333
+ // },
1334
+ // {
1335
+ // group: 'Avg Temperature',
1336
+ // key: 'Monday',
1337
+ // temp: 20.5,
1338
+ // },
1339
+ // {
1340
+ // group: 'Avg Temperature',
1341
+ // key: 'Tuesday',
1342
+ // temp: 27.5,
1343
+ // },
1344
+ // {
1345
+ // group: 'Avg Temperature',
1346
+ // key: 'Wednesday',
1347
+ // temp: 23.5,
1348
+ // },
1349
+ // {
1350
+ // group: 'Avg Temperature',
1351
+ // key: 'Thursday',
1352
+ // temp: 23.5,
1353
+ // },
1354
+ // {
1355
+ // group: 'Avg Temperature',
1356
+ // key: 'Friday',
1357
+ // temp: 28.5,
1358
+ // },
1359
+ // {
1360
+ // group: 'Attendance',
1361
+ // key: 'Monday',
1362
+ // value: 2650,
1363
+ // },
1364
+ // {
1365
+ // group: 'Attendance',
1366
+ // key: 'Tuesday',
1367
+ // value: 2553,
1368
+ // },
1369
+ // {
1370
+ // group: 'Attendance',
1371
+ // key: 'Wednesday',
1372
+ // value: 3433,
1373
+ // },
1374
+ // {
1375
+ // group: 'Attendance',
1376
+ // key: 'Thursday',
1377
+ // value: 3754,
1378
+ // },
1379
+ // {
1380
+ // group: 'Attendance',
1381
+ // key: 'Friday',
1382
+ // value: 3744,
1383
+ // },
1384
+ // ],
1385
+ // options: {
1386
+ // title: 'Combo Chart (loading)',
1387
+ // axes: {
1388
+ // left: {
1389
+ // mapsTo: 'value',
1390
+ // title: 'Attendance',
1391
+ // },
1392
+ // bottom: {
1393
+ // scaleType: 'labels',
1394
+ // mapsTo: 'key',
1395
+ // },
1396
+ // right: {
1397
+ // title: 'Temperature (°C)',
1398
+ // mapsTo: 'temp',
1399
+ // scaleType: 'linear',
1400
+ // correspondingDatasets: ['Temperature'],
1401
+ // },
1402
+ // },
1403
+ // data: {
1404
+ // loading: true,
1405
+ // },
1406
+ // comboChartTypes: [
1407
+ // {
1408
+ // type: 'simple-bar',
1409
+ // correspondingDatasets: ['Attendance'],
1410
+ // },
1411
+ // {
1412
+ // type: 'line',
1413
+ // correspondingDatasets: ['Temperature'],
1414
+ // },
1415
+ // ],
1416
+ // height: '400px',
1417
+ // },
1418
+ // };