@react-magma/charts 11.0.0-next.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 +1 -1
  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/CarbonChartScatter.stories.tsx ADDED
@@ -0,0 +1,467 @@
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/Scatter',
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 ScatterLinearXAndY = Template.bind({});
31
+ ScatterLinearXAndY.args = {
32
+ isInverse: false,
33
+ type: CarbonChartType.scatter,
34
+ dataSet: [
35
+ {
36
+ group: 'Dataset 1',
37
+ employees: 5000,
38
+ sales: 32100,
39
+ },
40
+ {
41
+ group: 'Dataset 1',
42
+ employees: 3000,
43
+ sales: 25100,
44
+ },
45
+ {
46
+ group: 'Dataset 1',
47
+ employees: 8000,
48
+ sales: 12100,
49
+ },
50
+ {
51
+ group: 'Dataset 1',
52
+ employees: 4000,
53
+ sales: 53100,
54
+ },
55
+ {
56
+ group: 'Dataset 2',
57
+ employees: 5000,
58
+ sales: 32100,
59
+ },
60
+ {
61
+ group: 'Dataset 2',
62
+ employees: 2000,
63
+ sales: 34100,
64
+ },
65
+ {
66
+ group: 'Dataset 2',
67
+ employees: 4000,
68
+ sales: 23100,
69
+ },
70
+ {
71
+ group: 'Dataset 2',
72
+ employees: 7000,
73
+ sales: 14100,
74
+ },
75
+ {
76
+ group: 'Dataset 2',
77
+ employees: 6000,
78
+ sales: 53100,
79
+ },
80
+ ],
81
+ options: {
82
+ title: 'Scatter (linear x & y)',
83
+ axes: {
84
+ bottom: {
85
+ title: 'No. of employees',
86
+ mapsTo: 'employees',
87
+ scaleType: 'linear',
88
+ },
89
+ left: {
90
+ title: 'Annual sales',
91
+ mapsTo: 'sales',
92
+ scaleType: 'linear',
93
+ },
94
+ },
95
+ height: '400px',
96
+ },
97
+ };
98
+
99
+ // Uncomment when adding new charts. Issues: #1054, #1055, #1056
100
+
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
+ // };
222
+
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
+ // };
344
+
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
+ // };
423
+
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
+ // };
444
+
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
+ // };
package/src/components/CarbonChart/CarbonChartSparkline.stories.tsx ADDED
@@ -0,0 +1,222 @@
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/Sparkline',
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 AreaSparkline = Template.bind({});
31
+ AreaSparkline.args = {
32
+ isInverse: false,
33
+ type: CarbonChartType.area,
34
+ dataSet: [
35
+ {
36
+ group: 'Dataset 1',
37
+ date: '2019-05-21T19:21:00.000Z',
38
+ value: 2,
39
+ },
40
+ {
41
+ group: 'Dataset 1',
42
+ date: '2019-05-21T19:22:00.000Z',
43
+ value: 3,
44
+ },
45
+ {
46
+ group: 'Dataset 1',
47
+ date: '2019-05-21T19:23:00.000Z',
48
+ value: 5,
49
+ },
50
+ {
51
+ group: 'Dataset 1',
52
+ date: '2019-05-21T19:24:00.000Z',
53
+ value: 1,
54
+ },
55
+ {
56
+ group: 'Dataset 1',
57
+ date: '2019-05-21T19:25:00.000Z',
58
+ value: 4,
59
+ },
60
+ {
61
+ group: 'Dataset 1',
62
+ date: '2019-05-21T19:26:00.000Z',
63
+ value: 4,
64
+ },
65
+ {
66
+ group: 'Dataset 1',
67
+ date: '2019-05-21T19:27:00.000Z',
68
+ value: 3,
69
+ },
70
+ {
71
+ group: 'Dataset 1',
72
+ date: '2019-05-21T19:28:00.000Z',
73
+ value: 4,
74
+ },
75
+ {
76
+ group: 'Dataset 1',
77
+ date: '2019-05-21T19:29:00.000Z',
78
+ value: 2,
79
+ },
80
+ {
81
+ group: 'Dataset 1',
82
+ date: '2019-05-21T19:30:00.000Z',
83
+ value: 0,
84
+ },
85
+ {
86
+ group: 'Dataset 1',
87
+ date: '2019-05-21T19:31:00.000Z',
88
+ value: 5,
89
+ },
90
+ {
91
+ group: 'Dataset 1',
92
+ date: '2019-05-21T19:32:00.000Z',
93
+ value: 5,
94
+ },
95
+ {
96
+ group: 'Dataset 1',
97
+ date: '2019-05-21T19:33:00.000Z',
98
+ value: 6,
99
+ },
100
+ {
101
+ group: 'Dataset 1',
102
+ date: '2019-05-21T19:34:00.000Z',
103
+ value: 2,
104
+ },
105
+ {
106
+ group: 'Dataset 1',
107
+ date: '2019-05-21T19:35:00.000Z',
108
+ value: 3,
109
+ },
110
+ {
111
+ group: 'Dataset 1',
112
+ date: '2019-05-21T19:36:00.000Z',
113
+ value: 6,
114
+ },
115
+ {
116
+ group: 'Dataset 1',
117
+ date: '2019-05-21T19:38:00.000Z',
118
+ value: 2,
119
+ },
120
+ {
121
+ group: 'Dataset 1',
122
+ date: '2019-05-21T19:39:00.000Z',
123
+ value: 6,
124
+ },
125
+ {
126
+ group: 'Dataset 1',
127
+ date: '2019-05-21T19:40:00.000Z',
128
+ value: 0,
129
+ },
130
+ {
131
+ group: 'Dataset 1',
132
+ date: '2019-05-21T19:41:00.000Z',
133
+ value: 3,
134
+ },
135
+ {
136
+ group: 'Dataset 1',
137
+ date: '2019-05-21T19:42:00.000Z',
138
+ value: 2,
139
+ },
140
+ {
141
+ group: 'Dataset 1',
142
+ date: '2019-05-21T19:43:00.000Z',
143
+ value: 4,
144
+ },
145
+ {
146
+ group: 'Dataset 1',
147
+ date: '2019-05-21T19:44:00.000Z',
148
+ value: 3,
149
+ },
150
+ {
151
+ group: 'Dataset 1',
152
+ date: '2019-05-21T19:45:00.000Z',
153
+ value: 4,
154
+ },
155
+ {
156
+ group: 'Dataset 1',
157
+ date: '2019-05-21T19:46:00.000Z',
158
+ value: 2,
159
+ },
160
+ {
161
+ group: 'Dataset 1',
162
+ date: '2019-05-21T19:47:00.000Z',
163
+ value: 4,
164
+ },
165
+ {
166
+ group: 'Dataset 1',
167
+ date: '2019-05-21T19:48:00.000Z',
168
+ value: 1,
169
+ },
170
+ {
171
+ group: 'Dataset 1',
172
+ date: '2019-05-21T19:49:00.000Z',
173
+ value: 1,
174
+ },
175
+ {
176
+ group: 'Dataset 1',
177
+ date: '2019-05-21T19:50:00.000Z',
178
+ value: 3,
179
+ },
180
+ {
181
+ group: 'Dataset 1',
182
+ date: '2019-05-21T19:51:00.000Z',
183
+ value: 2,
184
+ },
185
+ ],
186
+ options: {
187
+ title: 'Sparkline',
188
+ height: '400px',
189
+ grid: {
190
+ x: {
191
+ enabled: false,
192
+ },
193
+ y: {
194
+ enabled: false,
195
+ },
196
+ },
197
+ axes: {
198
+ bottom: {
199
+ visible: false,
200
+ title: '2019 Annual Sales Figures',
201
+ mapsTo: 'date',
202
+ scaleType: 'time',
203
+ },
204
+ left: {
205
+ visible: false,
206
+ mapsTo: 'value',
207
+ scaleType: 'linear',
208
+ },
209
+ },
210
+ color: {
211
+ gradient: {
212
+ enabled: true,
213
+ },
214
+ },
215
+ points: {
216
+ enabled: false,
217
+ },
218
+ legend: {
219
+ enabled: false,
220
+ },
221
+ },
222
+ };