@react-magma/charts 12.0.0-next.2 → 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 +11 -8
  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 +1 -1
  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/CarbonChartRadar.stories.tsx CHANGED
@@ -100,382 +100,380 @@ Radar.args = {
100
100
  },
101
101
  };
102
102
 
103
- // Uncomment when adding new charts. Issues: #1054, #1055, #1056
104
-
105
- // export const RadarCentered = Template.bind({});
106
- // RadarCentered.args = {
107
- // isInverse: false,
108
- // type: CarbonChartType.radar,
109
- // dataSet: [
110
- // {
111
- // product: 'Product 1',
112
- // feature: 'Price',
113
- // score: 60,
114
- // },
115
- // {
116
- // product: 'Product 1',
117
- // feature: 'Usability',
118
- // score: 92,
119
- // },
120
- // {
121
- // product: 'Product 1',
122
- // feature: 'Availability',
123
- // score: 5,
124
- // },
125
- // {
126
- // product: 'Product 1',
127
- // feature: 'Performance',
128
- // score: 85,
129
- // },
130
- // {
131
- // product: 'Product 1',
132
- // feature: 'Quality',
133
- // score: 60,
134
- // },
135
- // {
136
- // product: 'Product 2',
137
- // feature: 'Price',
138
- // score: 70,
139
- // },
140
- // {
141
- // product: 'Product 2',
142
- // feature: 'Usability',
143
- // score: 63,
144
- // },
145
- // {
146
- // product: 'Product 2',
147
- // feature: 'Availability',
148
- // score: 78,
149
- // },
150
- // {
151
- // product: 'Product 2',
152
- // feature: 'Performance',
153
- // score: 50,
154
- // },
155
- // {
156
- // product: 'Product 2',
157
- // feature: 'Quality',
158
- // score: 30,
159
- // },
160
- // ],
161
- // options: {
162
- // title: 'Radar (centered)',
163
- // radar: {
164
- // axes: {
165
- // angle: 'feature',
166
- // value: 'score',
167
- // },
168
- // alignment: 'center',
169
- // },
170
- // data: {
171
- // groupMapsTo: 'product',
172
- // },
173
- // legend: {
174
- // alignment: 'center',
175
- // },
176
- // height: '400px',
177
- // },
178
- // };
103
+ export const RadarCentered = Template.bind({});
104
+ RadarCentered.args = {
105
+ isInverse: false,
106
+ type: CarbonChartType.radar,
107
+ dataSet: [
108
+ {
109
+ product: 'Product 1',
110
+ feature: 'Price',
111
+ score: 60,
112
+ },
113
+ {
114
+ product: 'Product 1',
115
+ feature: 'Usability',
116
+ score: 92,
117
+ },
118
+ {
119
+ product: 'Product 1',
120
+ feature: 'Availability',
121
+ score: 5,
122
+ },
123
+ {
124
+ product: 'Product 1',
125
+ feature: 'Performance',
126
+ score: 85,
127
+ },
128
+ {
129
+ product: 'Product 1',
130
+ feature: 'Quality',
131
+ score: 60,
132
+ },
133
+ {
134
+ product: 'Product 2',
135
+ feature: 'Price',
136
+ score: 70,
137
+ },
138
+ {
139
+ product: 'Product 2',
140
+ feature: 'Usability',
141
+ score: 63,
142
+ },
143
+ {
144
+ product: 'Product 2',
145
+ feature: 'Availability',
146
+ score: 78,
147
+ },
148
+ {
149
+ product: 'Product 2',
150
+ feature: 'Performance',
151
+ score: 50,
152
+ },
153
+ {
154
+ product: 'Product 2',
155
+ feature: 'Quality',
156
+ score: 30,
157
+ },
158
+ ],
159
+ options: {
160
+ title: 'Radar (centered)',
161
+ radar: {
162
+ axes: {
163
+ angle: 'feature',
164
+ value: 'score',
165
+ },
166
+ alignment: 'center',
167
+ },
168
+ data: {
169
+ groupMapsTo: 'product',
170
+ },
171
+ legend: {
172
+ alignment: 'center',
173
+ },
174
+ height: '400px',
175
+ },
176
+ };
179
177
 
180
- // export const RadarMissingDatapoints = Template.bind({});
181
- // RadarMissingDatapoints.args = {
182
- // isInverse: false,
183
- // type: CarbonChartType.radar,
184
- // dataSet: [
185
- // {
186
- // group: 'Sugar',
187
- // key: 'London',
188
- // value: 25,
189
- // },
190
- // {
191
- // group: 'Oil',
192
- // key: 'London',
193
- // value: 6,
194
- // },
195
- // {
196
- // group: 'Water',
197
- // key: 'London',
198
- // value: 12,
199
- // },
200
- // {
201
- // group: 'Sugar',
202
- // key: 'Milan',
203
- // value: 13,
204
- // },
205
- // {
206
- // group: 'Oil',
207
- // key: 'Milan',
208
- // value: 6,
209
- // },
210
- // {
211
- // group: 'Water',
212
- // key: 'Milan',
213
- // value: 28,
214
- // },
215
- // {
216
- // group: 'Sugar',
217
- // key: 'Paris',
218
- // value: 19,
219
- // },
220
- // {
221
- // group: 'Oil',
222
- // key: 'Paris',
223
- // value: 16,
224
- // },
225
- // {
226
- // group: 'Water',
227
- // key: 'Paris',
228
- // value: 10,
229
- // },
230
- // {
231
- // group: 'Sugar',
232
- // key: 'New York',
233
- // value: 11,
234
- // },
235
- // {
236
- // group: 'Oil',
237
- // key: 'New York',
238
- // value: 18,
239
- // },
240
- // {
241
- // group: 'Water',
242
- // key: 'New York',
243
- // value: 8,
244
- // },
245
- // {
246
- // group: 'Sugar',
247
- // key: 'Sydney',
248
- // value: 12,
249
- // },
250
- // {
251
- // group: 'Oil',
252
- // key: 'Sydney',
253
- // value: 16,
254
- // },
255
- // ],
256
- // options: {
257
- // title: 'Radar - Missing datapoints',
258
- // height: '400px',
259
- // },
260
- // };
178
+ export const RadarMissingDatapoints = Template.bind({});
179
+ RadarMissingDatapoints.args = {
180
+ isInverse: false,
181
+ type: CarbonChartType.radar,
182
+ dataSet: [
183
+ {
184
+ group: 'Sugar',
185
+ key: 'London',
186
+ value: 25,
187
+ },
188
+ {
189
+ group: 'Oil',
190
+ key: 'London',
191
+ value: 6,
192
+ },
193
+ {
194
+ group: 'Water',
195
+ key: 'London',
196
+ value: 12,
197
+ },
198
+ {
199
+ group: 'Sugar',
200
+ key: 'Milan',
201
+ value: 13,
202
+ },
203
+ {
204
+ group: 'Oil',
205
+ key: 'Milan',
206
+ value: 6,
207
+ },
208
+ {
209
+ group: 'Water',
210
+ key: 'Milan',
211
+ value: 28,
212
+ },
213
+ {
214
+ group: 'Sugar',
215
+ key: 'Paris',
216
+ value: 19,
217
+ },
218
+ {
219
+ group: 'Oil',
220
+ key: 'Paris',
221
+ value: 16,
222
+ },
223
+ {
224
+ group: 'Water',
225
+ key: 'Paris',
226
+ value: 10,
227
+ },
228
+ {
229
+ group: 'Sugar',
230
+ key: 'New York',
231
+ value: 11,
232
+ },
233
+ {
234
+ group: 'Oil',
235
+ key: 'New York',
236
+ value: 18,
237
+ },
238
+ {
239
+ group: 'Water',
240
+ key: 'New York',
241
+ value: 8,
242
+ },
243
+ {
244
+ group: 'Sugar',
245
+ key: 'Sydney',
246
+ value: 12,
247
+ },
248
+ {
249
+ group: 'Oil',
250
+ key: 'Sydney',
251
+ value: 16,
252
+ },
253
+ ],
254
+ options: {
255
+ title: 'Radar - Missing datapoints',
256
+ height: '400px',
257
+ },
258
+ };
261
259
 
262
- // export const RadarDense = Template.bind({});
263
- // RadarDense.args = {
264
- // isInverse: false,
265
- // type: CarbonChartType.radar,
266
- // dataSet: [
267
- // {
268
- // month: 'January',
269
- // activity: 'Eating',
270
- // hoursAvg: 2,
271
- // },
272
- // {
273
- // month: 'January',
274
- // activity: 'Drinking',
275
- // hoursAvg: 6,
276
- // },
277
- // {
278
- // month: 'January',
279
- // activity: 'Sleeping',
280
- // hoursAvg: 6,
281
- // },
282
- // {
283
- // month: 'January',
284
- // activity: 'Working',
285
- // hoursAvg: 8,
286
- // },
287
- // {
288
- // month: 'January',
289
- // activity: 'Walking',
290
- // hoursAvg: 1,
291
- // },
292
- // {
293
- // month: 'January',
294
- // activity: 'Running',
295
- // hoursAvg: 0.5,
296
- // },
297
- // {
298
- // month: 'January',
299
- // activity: 'Cycling',
300
- // hoursAvg: 1,
301
- // },
302
- // {
303
- // month: 'January',
304
- // activity: 'Swimming',
305
- // hoursAvg: 0,
306
- // },
307
- // {
308
- // month: 'February',
309
- // activity: 'Eating',
310
- // hoursAvg: 1.5,
311
- // },
312
- // {
313
- // month: 'February',
314
- // activity: 'Drinking',
315
- // hoursAvg: 9,
316
- // },
317
- // {
318
- // month: 'February',
319
- // activity: 'Sleeping',
320
- // hoursAvg: 7,
321
- // },
322
- // {
323
- // month: 'February',
324
- // activity: 'Working',
325
- // hoursAvg: 9,
326
- // },
327
- // {
328
- // month: 'February',
329
- // activity: 'Walking',
330
- // hoursAvg: 2,
331
- // },
332
- // {
333
- // month: 'February',
334
- // activity: 'Running',
335
- // hoursAvg: 2,
336
- // },
337
- // {
338
- // month: 'February',
339
- // activity: 'Cycling',
340
- // hoursAvg: 0,
341
- // },
342
- // {
343
- // month: 'February',
344
- // activity: 'Swimming',
345
- // hoursAvg: 1.5,
346
- // },
347
- // {
348
- // month: 'March',
349
- // activity: 'Eating',
350
- // hoursAvg: 3,
351
- // },
352
- // {
353
- // month: 'March',
354
- // activity: 'Drinking',
355
- // hoursAvg: 5,
356
- // },
357
- // {
358
- // month: 'March',
359
- // activity: 'Sleeping',
360
- // hoursAvg: 5,
361
- // },
362
- // {
363
- // month: 'March',
364
- // activity: 'Working',
365
- // hoursAvg: 6,
366
- // },
367
- // {
368
- // month: 'March',
369
- // activity: 'Walking',
370
- // hoursAvg: 3,
371
- // },
372
- // {
373
- // month: 'March',
374
- // activity: 'Running',
375
- // hoursAvg: 9,
376
- // },
377
- // {
378
- // month: 'March',
379
- // activity: 'Cycling',
380
- // hoursAvg: 1,
381
- // },
382
- // {
383
- // month: 'March',
384
- // activity: 'Swimming',
385
- // hoursAvg: 7,
386
- // },
387
- // {
388
- // month: 'April',
389
- // activity: 'Eating',
390
- // hoursAvg: 5,
391
- // },
392
- // {
393
- // month: 'April',
394
- // activity: 'Drinking',
395
- // hoursAvg: 1,
396
- // },
397
- // {
398
- // month: 'April',
399
- // activity: 'Sleeping',
400
- // hoursAvg: 4,
401
- // },
402
- // {
403
- // month: 'April',
404
- // activity: 'Working',
405
- // hoursAvg: 2,
406
- // },
407
- // {
408
- // month: 'April',
409
- // activity: 'Walking',
410
- // hoursAvg: 5,
411
- // },
412
- // {
413
- // month: 'April',
414
- // activity: 'Running',
415
- // hoursAvg: 4,
416
- // },
417
- // {
418
- // month: 'April',
419
- // activity: 'Cycling',
420
- // hoursAvg: 6,
421
- // },
422
- // {
423
- // month: 'April',
424
- // activity: 'Swimming',
425
- // hoursAvg: 3,
426
- // },
427
- // {
428
- // month: 'May',
429
- // activity: 'Eating',
430
- // hoursAvg: 7,
431
- // },
432
- // {
433
- // month: 'May',
434
- // activity: 'Drinking',
435
- // hoursAvg: 0,
436
- // },
437
- // {
438
- // month: 'May',
439
- // activity: 'Sleeping',
440
- // hoursAvg: 5,
441
- // },
442
- // {
443
- // month: 'May',
444
- // activity: 'Working',
445
- // hoursAvg: 4,
446
- // },
447
- // {
448
- // month: 'May',
449
- // activity: 'Walking',
450
- // hoursAvg: 8,
451
- // },
452
- // {
453
- // month: 'May',
454
- // activity: 'Running',
455
- // hoursAvg: 2,
456
- // },
457
- // {
458
- // month: 'May',
459
- // activity: 'Cycling',
460
- // hoursAvg: 3,
461
- // },
462
- // {
463
- // month: 'May',
464
- // activity: 'Swimming',
465
- // hoursAvg: 1,
466
- // },
467
- // ],
468
- // options: {
469
- // title: 'Radar - Dense',
470
- // radar: {
471
- // axes: {
472
- // angle: 'activity',
473
- // value: 'hoursAvg',
474
- // },
475
- // },
476
- // data: {
477
- // groupMapsTo: 'month',
478
- // },
479
- // height: '400px',
480
- // },
481
- // };
260
+ export const RadarDense = Template.bind({});
261
+ RadarDense.args = {
262
+ isInverse: false,
263
+ type: CarbonChartType.radar,
264
+ dataSet: [
265
+ {
266
+ month: 'January',
267
+ activity: 'Eating',
268
+ hoursAvg: 2,
269
+ },
270
+ {
271
+ month: 'January',
272
+ activity: 'Drinking',
273
+ hoursAvg: 6,
274
+ },
275
+ {
276
+ month: 'January',
277
+ activity: 'Sleeping',
278
+ hoursAvg: 6,
279
+ },
280
+ {
281
+ month: 'January',
282
+ activity: 'Working',
283
+ hoursAvg: 8,
284
+ },
285
+ {
286
+ month: 'January',
287
+ activity: 'Walking',
288
+ hoursAvg: 1,
289
+ },
290
+ {
291
+ month: 'January',
292
+ activity: 'Running',
293
+ hoursAvg: 0.5,
294
+ },
295
+ {
296
+ month: 'January',
297
+ activity: 'Cycling',
298
+ hoursAvg: 1,
299
+ },
300
+ {
301
+ month: 'January',
302
+ activity: 'Swimming',
303
+ hoursAvg: 0,
304
+ },
305
+ {
306
+ month: 'February',
307
+ activity: 'Eating',
308
+ hoursAvg: 1.5,
309
+ },
310
+ {
311
+ month: 'February',
312
+ activity: 'Drinking',
313
+ hoursAvg: 9,
314
+ },
315
+ {
316
+ month: 'February',
317
+ activity: 'Sleeping',
318
+ hoursAvg: 7,
319
+ },
320
+ {
321
+ month: 'February',
322
+ activity: 'Working',
323
+ hoursAvg: 9,
324
+ },
325
+ {
326
+ month: 'February',
327
+ activity: 'Walking',
328
+ hoursAvg: 2,
329
+ },
330
+ {
331
+ month: 'February',
332
+ activity: 'Running',
333
+ hoursAvg: 2,
334
+ },
335
+ {
336
+ month: 'February',
337
+ activity: 'Cycling',
338
+ hoursAvg: 0,
339
+ },
340
+ {
341
+ month: 'February',
342
+ activity: 'Swimming',
343
+ hoursAvg: 1.5,
344
+ },
345
+ {
346
+ month: 'March',
347
+ activity: 'Eating',
348
+ hoursAvg: 3,
349
+ },
350
+ {
351
+ month: 'March',
352
+ activity: 'Drinking',
353
+ hoursAvg: 5,
354
+ },
355
+ {
356
+ month: 'March',
357
+ activity: 'Sleeping',
358
+ hoursAvg: 5,
359
+ },
360
+ {
361
+ month: 'March',
362
+ activity: 'Working',
363
+ hoursAvg: 6,
364
+ },
365
+ {
366
+ month: 'March',
367
+ activity: 'Walking',
368
+ hoursAvg: 3,
369
+ },
370
+ {
371
+ month: 'March',
372
+ activity: 'Running',
373
+ hoursAvg: 9,
374
+ },
375
+ {
376
+ month: 'March',
377
+ activity: 'Cycling',
378
+ hoursAvg: 1,
379
+ },
380
+ {
381
+ month: 'March',
382
+ activity: 'Swimming',
383
+ hoursAvg: 7,
384
+ },
385
+ {
386
+ month: 'April',
387
+ activity: 'Eating',
388
+ hoursAvg: 5,
389
+ },
390
+ {
391
+ month: 'April',
392
+ activity: 'Drinking',
393
+ hoursAvg: 1,
394
+ },
395
+ {
396
+ month: 'April',
397
+ activity: 'Sleeping',
398
+ hoursAvg: 4,
399
+ },
400
+ {
401
+ month: 'April',
402
+ activity: 'Working',
403
+ hoursAvg: 2,
404
+ },
405
+ {
406
+ month: 'April',
407
+ activity: 'Walking',
408
+ hoursAvg: 5,
409
+ },
410
+ {
411
+ month: 'April',
412
+ activity: 'Running',
413
+ hoursAvg: 4,
414
+ },
415
+ {
416
+ month: 'April',
417
+ activity: 'Cycling',
418
+ hoursAvg: 6,
419
+ },
420
+ {
421
+ month: 'April',
422
+ activity: 'Swimming',
423
+ hoursAvg: 3,
424
+ },
425
+ {
426
+ month: 'May',
427
+ activity: 'Eating',
428
+ hoursAvg: 7,
429
+ },
430
+ {
431
+ month: 'May',
432
+ activity: 'Drinking',
433
+ hoursAvg: 0,
434
+ },
435
+ {
436
+ month: 'May',
437
+ activity: 'Sleeping',
438
+ hoursAvg: 5,
439
+ },
440
+ {
441
+ month: 'May',
442
+ activity: 'Working',
443
+ hoursAvg: 4,
444
+ },
445
+ {
446
+ month: 'May',
447
+ activity: 'Walking',
448
+ hoursAvg: 8,
449
+ },
450
+ {
451
+ month: 'May',
452
+ activity: 'Running',
453
+ hoursAvg: 2,
454
+ },
455
+ {
456
+ month: 'May',
457
+ activity: 'Cycling',
458
+ hoursAvg: 3,
459
+ },
460
+ {
461
+ month: 'May',
462
+ activity: 'Swimming',
463
+ hoursAvg: 1,
464
+ },
465
+ ],
466
+ options: {
467
+ title: 'Radar - Dense',
468
+ radar: {
469
+ axes: {
470
+ angle: 'activity',
471
+ value: 'hoursAvg',
472
+ },
473
+ },
474
+ data: {
475
+ groupMapsTo: 'month',
476
+ },
477
+ height: '400px',
478
+ },
479
+ };