@react-magma/charts 12.0.0-next.1 → 12.0.0-next.3

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