@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/CarbonChartScatter.stories.tsx CHANGED
@@ -98,372 +98,370 @@ ScatterLinearXAndY.args = {
98
98
  },
99
99
  };
100
100
 
101
- // Uncomment when adding new charts. Issues: #1054, #1055, #1056
102
-
103
- // export const ScatterTimeSeries = Template.bind({});
104
- // ScatterTimeSeries.args = {
105
- // isInverse: false,
106
- // type: CarbonChartType.scatter,
107
- // dataSet: [
108
- // {
109
- // group: 'Dataset 1',
110
- // date: '2023-01-01',
111
- // value: 50000,
112
- // },
113
- // {
114
- // group: 'Dataset 1',
115
- // date: '2023-01-05',
116
- // value: 65000,
117
- // },
118
- // {
119
- // group: 'Dataset 1',
120
- // date: '2023-01-08',
121
- // value: null,
122
- // },
123
- // {
124
- // group: 'Dataset 1',
125
- // date: '2023-01-13',
126
- // value: 49213,
127
- // },
128
- // {
129
- // group: 'Dataset 1',
130
- // date: '2023-01-17',
131
- // value: 51213,
132
- // },
133
- // {
134
- // group: 'Dataset 2',
135
- // date: '2023-01-02',
136
- // value: 0,
137
- // },
138
- // {
139
- // group: 'Dataset 2',
140
- // date: '2023-01-06',
141
- // value: 57312,
142
- // },
143
- // {
144
- // group: 'Dataset 2',
145
- // date: '2023-01-08',
146
- // value: 27432,
147
- // },
148
- // {
149
- // group: 'Dataset 2',
150
- // date: '2023-01-15',
151
- // value: 70323,
152
- // },
153
- // {
154
- // group: 'Dataset 2',
155
- // date: '2023-01-19',
156
- // value: 21300,
157
- // },
158
- // {
159
- // group: 'Dataset 3',
160
- // date: '2023-01-01',
161
- // value: 40000,
162
- // },
163
- // {
164
- // group: 'Dataset 3',
165
- // date: '2023-01-05',
166
- // value: null,
167
- // },
168
- // {
169
- // group: 'Dataset 3',
170
- // date: '2023-01-08',
171
- // value: 18000,
172
- // },
173
- // {
174
- // group: 'Dataset 3',
175
- // date: '2023-01-13',
176
- // value: 39213,
177
- // },
178
- // {
179
- // group: 'Dataset 3',
180
- // date: '2023-01-17',
181
- // value: 61213,
182
- // },
183
- // {
184
- // group: 'Dataset 4',
185
- // date: '2023-01-02',
186
- // value: 20000,
187
- // },
188
- // {
189
- // group: 'Dataset 4',
190
- // date: '2023-01-06',
191
- // value: 37312,
192
- // },
193
- // {
194
- // group: 'Dataset 4',
195
- // date: '2023-01-08',
196
- // value: 51432,
197
- // },
198
- // {
199
- // group: 'Dataset 4',
200
- // date: '2023-01-15',
201
- // value: 25332,
202
- // },
203
- // {
204
- // group: 'Dataset 4',
205
- // date: '2023-01-19',
206
- // value: null,
207
- // },
208
- // ],
209
- // options: {
210
- // title: 'Scatter (time series)',
211
- // axes: {
212
- // bottom: {
213
- // title: '2019 Annual Sales Figures',
214
- // scaleType: 'time',
215
- // mapsTo: 'date',
216
- // },
217
- // left: {
218
- // mapsTo: 'value',
219
- // },
220
- // },
221
- // height: '400px',
222
- // },
223
- // };
101
+ export const ScatterTimeSeries = Template.bind({});
102
+ ScatterTimeSeries.args = {
103
+ isInverse: false,
104
+ type: CarbonChartType.scatter,
105
+ dataSet: [
106
+ {
107
+ group: 'Dataset 1',
108
+ date: '2023-01-01',
109
+ value: 50000,
110
+ },
111
+ {
112
+ group: 'Dataset 1',
113
+ date: '2023-01-05',
114
+ value: 65000,
115
+ },
116
+ {
117
+ group: 'Dataset 1',
118
+ date: '2023-01-08',
119
+ value: null,
120
+ },
121
+ {
122
+ group: 'Dataset 1',
123
+ date: '2023-01-13',
124
+ value: 49213,
125
+ },
126
+ {
127
+ group: 'Dataset 1',
128
+ date: '2023-01-17',
129
+ value: 51213,
130
+ },
131
+ {
132
+ group: 'Dataset 2',
133
+ date: '2023-01-02',
134
+ value: 0,
135
+ },
136
+ {
137
+ group: 'Dataset 2',
138
+ date: '2023-01-06',
139
+ value: 57312,
140
+ },
141
+ {
142
+ group: 'Dataset 2',
143
+ date: '2023-01-08',
144
+ value: 27432,
145
+ },
146
+ {
147
+ group: 'Dataset 2',
148
+ date: '2023-01-15',
149
+ value: 70323,
150
+ },
151
+ {
152
+ group: 'Dataset 2',
153
+ date: '2023-01-19',
154
+ value: 21300,
155
+ },
156
+ {
157
+ group: 'Dataset 3',
158
+ date: '2023-01-01',
159
+ value: 40000,
160
+ },
161
+ {
162
+ group: 'Dataset 3',
163
+ date: '2023-01-05',
164
+ value: null,
165
+ },
166
+ {
167
+ group: 'Dataset 3',
168
+ date: '2023-01-08',
169
+ value: 18000,
170
+ },
171
+ {
172
+ group: 'Dataset 3',
173
+ date: '2023-01-13',
174
+ value: 39213,
175
+ },
176
+ {
177
+ group: 'Dataset 3',
178
+ date: '2023-01-17',
179
+ value: 61213,
180
+ },
181
+ {
182
+ group: 'Dataset 4',
183
+ date: '2023-01-02',
184
+ value: 20000,
185
+ },
186
+ {
187
+ group: 'Dataset 4',
188
+ date: '2023-01-06',
189
+ value: 37312,
190
+ },
191
+ {
192
+ group: 'Dataset 4',
193
+ date: '2023-01-08',
194
+ value: 51432,
195
+ },
196
+ {
197
+ group: 'Dataset 4',
198
+ date: '2023-01-15',
199
+ value: 25332,
200
+ },
201
+ {
202
+ group: 'Dataset 4',
203
+ date: '2023-01-19',
204
+ value: null,
205
+ },
206
+ ],
207
+ options: {
208
+ title: 'Scatter (time series)',
209
+ axes: {
210
+ bottom: {
211
+ title: '2019 Annual Sales Figures',
212
+ scaleType: 'time',
213
+ mapsTo: 'date',
214
+ },
215
+ left: {
216
+ mapsTo: 'value',
217
+ },
218
+ },
219
+ height: '400px',
220
+ },
221
+ };
224
222
 
225
- // export const ScatterDiscrete = Template.bind({});
226
- // ScatterDiscrete.args = {
227
- // isInverse: false,
228
- // type: CarbonChartType.scatter,
229
- // dataSet: [
230
- // {
231
- // group: 'Dataset 1',
232
- // key: 'Qty',
233
- // value: 34200,
234
- // },
235
- // {
236
- // group: 'Dataset 1',
237
- // key: 'More',
238
- // value: 23500,
239
- // },
240
- // {
241
- // group: 'Dataset 1',
242
- // key: 'Sold',
243
- // value: 53100,
244
- // },
245
- // {
246
- // group: 'Dataset 1',
247
- // key: 'Restocking',
248
- // value: 42300,
249
- // },
250
- // {
251
- // group: 'Dataset 1',
252
- // key: 'Misc',
253
- // value: 12300,
254
- // },
255
- // {
256
- // group: 'Dataset 2',
257
- // key: 'Qty',
258
- // value: 34200,
259
- // },
260
- // {
261
- // group: 'Dataset 2',
262
- // key: 'More',
263
- // value: 53200,
264
- // },
265
- // {
266
- // group: 'Dataset 2',
267
- // key: 'Sold',
268
- // value: 42300,
269
- // },
270
- // {
271
- // group: 'Dataset 2',
272
- // key: 'Restocking',
273
- // value: 21400,
274
- // },
275
- // {
276
- // group: 'Dataset 2',
277
- // key: 'Misc',
278
- // value: 0,
279
- // },
280
- // {
281
- // group: 'Dataset 3',
282
- // key: 'Qty',
283
- // value: 41200,
284
- // },
285
- // {
286
- // group: 'Dataset 3',
287
- // key: 'More',
288
- // value: 18400,
289
- // },
290
- // {
291
- // group: 'Dataset 3',
292
- // key: 'Sold',
293
- // value: 34210,
294
- // },
295
- // {
296
- // group: 'Dataset 3',
297
- // key: 'Restocking',
298
- // value: 1400,
299
- // },
300
- // {
301
- // group: 'Dataset 3',
302
- // key: 'Misc',
303
- // value: 42100,
304
- // },
305
- // {
306
- // group: 'Dataset 4',
307
- // key: 'Qty',
308
- // value: 22000,
309
- // },
310
- // {
311
- // group: 'Dataset 4',
312
- // key: 'More',
313
- // value: 1200,
314
- // },
315
- // {
316
- // group: 'Dataset 4',
317
- // key: 'Sold',
318
- // value: 9000,
319
- // },
320
- // {
321
- // group: 'Dataset 4',
322
- // key: 'Restocking',
323
- // value: 24000,
324
- // },
325
- // {
326
- // group: 'Dataset 4',
327
- // key: 'Misc',
328
- // value: 3000,
329
- // },
330
- // ],
331
- // options: {
332
- // title: 'Scatter (discrete)',
333
- // axes: {
334
- // bottom: {
335
- // title: '2019 Annual Sales Figures',
336
- // scaleType: 'labels',
337
- // mapsTo: 'key',
338
- // },
339
- // left: {
340
- // mapsTo: 'value',
341
- // },
342
- // },
343
- // height: '400px',
344
- // },
345
- // };
223
+ export const ScatterDiscrete = Template.bind({});
224
+ ScatterDiscrete.args = {
225
+ isInverse: false,
226
+ type: CarbonChartType.scatter,
227
+ dataSet: [
228
+ {
229
+ group: 'Dataset 1',
230
+ key: 'Qty',
231
+ value: 34200,
232
+ },
233
+ {
234
+ group: 'Dataset 1',
235
+ key: 'More',
236
+ value: 23500,
237
+ },
238
+ {
239
+ group: 'Dataset 1',
240
+ key: 'Sold',
241
+ value: 53100,
242
+ },
243
+ {
244
+ group: 'Dataset 1',
245
+ key: 'Restocking',
246
+ value: 42300,
247
+ },
248
+ {
249
+ group: 'Dataset 1',
250
+ key: 'Misc',
251
+ value: 12300,
252
+ },
253
+ {
254
+ group: 'Dataset 2',
255
+ key: 'Qty',
256
+ value: 34200,
257
+ },
258
+ {
259
+ group: 'Dataset 2',
260
+ key: 'More',
261
+ value: 53200,
262
+ },
263
+ {
264
+ group: 'Dataset 2',
265
+ key: 'Sold',
266
+ value: 42300,
267
+ },
268
+ {
269
+ group: 'Dataset 2',
270
+ key: 'Restocking',
271
+ value: 21400,
272
+ },
273
+ {
274
+ group: 'Dataset 2',
275
+ key: 'Misc',
276
+ value: 0,
277
+ },
278
+ {
279
+ group: 'Dataset 3',
280
+ key: 'Qty',
281
+ value: 41200,
282
+ },
283
+ {
284
+ group: 'Dataset 3',
285
+ key: 'More',
286
+ value: 18400,
287
+ },
288
+ {
289
+ group: 'Dataset 3',
290
+ key: 'Sold',
291
+ value: 34210,
292
+ },
293
+ {
294
+ group: 'Dataset 3',
295
+ key: 'Restocking',
296
+ value: 1400,
297
+ },
298
+ {
299
+ group: 'Dataset 3',
300
+ key: 'Misc',
301
+ value: 42100,
302
+ },
303
+ {
304
+ group: 'Dataset 4',
305
+ key: 'Qty',
306
+ value: 22000,
307
+ },
308
+ {
309
+ group: 'Dataset 4',
310
+ key: 'More',
311
+ value: 1200,
312
+ },
313
+ {
314
+ group: 'Dataset 4',
315
+ key: 'Sold',
316
+ value: 9000,
317
+ },
318
+ {
319
+ group: 'Dataset 4',
320
+ key: 'Restocking',
321
+ value: 24000,
322
+ },
323
+ {
324
+ group: 'Dataset 4',
325
+ key: 'Misc',
326
+ value: 3000,
327
+ },
328
+ ],
329
+ options: {
330
+ title: 'Scatter (discrete)',
331
+ axes: {
332
+ bottom: {
333
+ title: '2019 Annual Sales Figures',
334
+ scaleType: 'labels',
335
+ mapsTo: 'key',
336
+ },
337
+ left: {
338
+ mapsTo: 'value',
339
+ },
340
+ },
341
+ height: '400px',
342
+ },
343
+ };
346
344
 
347
- // export const ScatterDualAxes = Template.bind({});
348
- // ScatterDualAxes.args = {
349
- // isInverse: false,
350
- // type: CarbonChartType.scatter,
351
- // dataSet: [
352
- // {
353
- // group: 'Orders',
354
- // date: 'January',
355
- // orderCount: 121,
356
- // },
357
- // {
358
- // group: 'Orders',
359
- // date: 'February',
360
- // orderCount: 321,
361
- // },
362
- // {
363
- // group: 'Orders',
364
- // date: 'March',
365
- // orderCount: 370,
366
- // },
367
- // {
368
- // group: 'Orders',
369
- // date: 'April',
370
- // orderCount: 329,
371
- // },
372
- // {
373
- // group: 'Orders',
374
- // date: 'May',
375
- // orderCount: 121,
376
- // },
377
- // {
378
- // group: 'Products',
379
- // date: 'January',
380
- // productCount: 26100,
381
- // },
382
- // {
383
- // group: 'Products',
384
- // date: 'February',
385
- // productCount: 25100,
386
- // },
387
- // {
388
- // group: 'Products',
389
- // date: 'March',
390
- // productCount: 28100,
391
- // },
392
- // {
393
- // group: 'Products',
394
- // date: 'April',
395
- // productCount: 15900,
396
- // },
397
- // {
398
- // group: 'Products',
399
- // date: 'May',
400
- // productCount: 34100,
401
- // },
402
- // ],
403
- // options: {
404
- // title: 'Scatter (dual axes)',
405
- // axes: {
406
- // bottom: {
407
- // mapsTo: 'date',
408
- // scaleType: 'labels',
409
- // },
410
- // left: {
411
- // title: 'order count',
412
- // mapsTo: 'orderCount',
413
- // scaleType: 'linear',
414
- // },
415
- // right: {
416
- // title: 'product count',
417
- // mapsTo: 'productCount',
418
- // scaleType: 'linear',
419
- // correspondingDatasets: ['Products'],
420
- // },
421
- // },
422
- // height: '400px',
423
- // },
424
- // };
345
+ export const ScatterDualAxes = Template.bind({});
346
+ ScatterDualAxes.args = {
347
+ isInverse: false,
348
+ type: CarbonChartType.scatter,
349
+ dataSet: [
350
+ {
351
+ group: 'Orders',
352
+ date: 'January',
353
+ orderCount: 121,
354
+ },
355
+ {
356
+ group: 'Orders',
357
+ date: 'February',
358
+ orderCount: 321,
359
+ },
360
+ {
361
+ group: 'Orders',
362
+ date: 'March',
363
+ orderCount: 370,
364
+ },
365
+ {
366
+ group: 'Orders',
367
+ date: 'April',
368
+ orderCount: 329,
369
+ },
370
+ {
371
+ group: 'Orders',
372
+ date: 'May',
373
+ orderCount: 121,
374
+ },
375
+ {
376
+ group: 'Products',
377
+ date: 'January',
378
+ productCount: 26100,
379
+ },
380
+ {
381
+ group: 'Products',
382
+ date: 'February',
383
+ productCount: 25100,
384
+ },
385
+ {
386
+ group: 'Products',
387
+ date: 'March',
388
+ productCount: 28100,
389
+ },
390
+ {
391
+ group: 'Products',
392
+ date: 'April',
393
+ productCount: 15900,
394
+ },
395
+ {
396
+ group: 'Products',
397
+ date: 'May',
398
+ productCount: 34100,
399
+ },
400
+ ],
401
+ options: {
402
+ title: 'Scatter (dual axes)',
403
+ axes: {
404
+ bottom: {
405
+ mapsTo: 'date',
406
+ scaleType: 'labels',
407
+ },
408
+ left: {
409
+ title: 'order count',
410
+ mapsTo: 'orderCount',
411
+ scaleType: 'linear',
412
+ },
413
+ right: {
414
+ title: 'product count',
415
+ mapsTo: 'productCount',
416
+ scaleType: 'linear',
417
+ correspondingDatasets: ['Products'],
418
+ },
419
+ },
420
+ height: '400px',
421
+ },
422
+ };
425
423
 
426
- // export const ScatterEmptyState = Template.bind({});
427
- // ScatterEmptyState.args = {
428
- // isInverse: false,
429
- // type: CarbonChartType.scatter,
430
- // dataSet: [],
431
- // options: {
432
- // title: 'Scatter (empty state)',
433
- // axes: {
434
- // bottom: {
435
- // title: '2019 Annual Sales Figures',
436
- // scaleType: 'time',
437
- // mapsTo: 'date',
438
- // },
439
- // left: {
440
- // mapsTo: 'value',
441
- // },
442
- // },
443
- // height: '400px',
444
- // },
445
- // };
424
+ export const ScatterEmptyState = Template.bind({});
425
+ ScatterEmptyState.args = {
426
+ isInverse: false,
427
+ type: CarbonChartType.scatter,
428
+ dataSet: [],
429
+ options: {
430
+ title: 'Scatter (empty state)',
431
+ axes: {
432
+ bottom: {
433
+ title: '2019 Annual Sales Figures',
434
+ scaleType: 'time',
435
+ mapsTo: 'date',
436
+ },
437
+ left: {
438
+ mapsTo: 'value',
439
+ },
440
+ },
441
+ height: '400px',
442
+ },
443
+ };
446
444
 
447
- // export const ScatterSkeleton = Template.bind({});
448
- // ScatterSkeleton.args = {
449
- // isInverse: false,
450
- // type: CarbonChartType.scatter,
451
- // dataSet: [],
452
- // options: {
453
- // title: 'Scatter (skeleton)',
454
- // axes: {
455
- // bottom: {
456
- // title: '2019 Annual Sales Figures',
457
- // scaleType: 'time',
458
- // mapsTo: 'date',
459
- // },
460
- // left: {
461
- // mapsTo: 'value',
462
- // },
463
- // },
464
- // data: {
465
- // loading: true,
466
- // },
467
- // height: '400px',
468
- // },
469
- // };
445
+ export const ScatterSkeleton = Template.bind({});
446
+ ScatterSkeleton.args = {
447
+ isInverse: false,
448
+ type: CarbonChartType.scatter,
449
+ dataSet: [],
450
+ options: {
451
+ title: 'Scatter (skeleton)',
452
+ axes: {
453
+ bottom: {
454
+ title: '2019 Annual Sales Figures',
455
+ scaleType: 'time',
456
+ mapsTo: 'date',
457
+ },
458
+ left: {
459
+ mapsTo: 'value',
460
+ },
461
+ },
462
+ data: {
463
+ loading: true,
464
+ },
465
+ height: '400px',
466
+ },
467
+ };