@react-magma/charts 12.0.0-next.6 → 12.0.1-next.0

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 (45) hide show
  1. package/dist/components/CarbonChart/CarbonChartArea.stories.d.ts +308 -10
  2. package/dist/components/CarbonChart/CarbonChartAreaStacked.stories.d.ts +134 -5
  3. package/dist/components/CarbonChart/CarbonChartBar.stories.d.ts +212 -10
  4. package/dist/components/CarbonChart/CarbonChartBarFloating.stories.d.ts +80 -4
  5. package/dist/components/CarbonChart/CarbonChartBarGrouped.stories.d.ts +232 -11
  6. package/dist/components/CarbonChart/CarbonChartBarStacked.stories.d.ts +264 -12
  7. package/dist/components/CarbonChart/CarbonChartBoxplot.stories.d.ts +51 -3
  8. package/dist/components/CarbonChart/CarbonChartBubble.stories.d.ts +194 -7
  9. package/dist/components/CarbonChart/CarbonChartBullet.stories.d.ts +33 -2
  10. package/dist/components/CarbonChart/CarbonChartCombo.stories.d.ts +578 -13
  11. package/dist/components/CarbonChart/CarbonChartDonut.stories.d.ts +118 -6
  12. package/dist/components/CarbonChart/CarbonChartGauge.stories.d.ts +41 -3
  13. package/dist/components/CarbonChart/CarbonChartHistogram.stories.d.ts +87 -4
  14. package/dist/components/CarbonChart/CarbonChartLine.stories.d.ts +575 -18
  15. package/dist/components/CarbonChart/CarbonChartLollipop.stories.d.ts +53 -3
  16. package/dist/components/CarbonChart/CarbonChartMeter.stories.d.ts +125 -6
  17. package/dist/components/CarbonChart/CarbonChartPie.stories.d.ts +99 -6
  18. package/dist/components/CarbonChart/CarbonChartRadar.stories.d.ts +96 -5
  19. package/dist/components/CarbonChart/CarbonChartScatter.stories.d.ts +171 -7
  20. package/dist/components/CarbonChart/CarbonChartSparkline.stories.d.ts +49 -2
  21. package/dist/components/CarbonChart/CarbonChartStep.stories.d.ts +36 -2
  22. package/dist/components/LineChart/LineChart.stories.d.ts +132 -21
  23. package/package.json +3 -3
  24. package/src/components/CarbonChart/CarbonChartArea.stories.tsx +674 -649
  25. package/src/components/CarbonChart/CarbonChartAreaStacked.stories.tsx +424 -414
  26. package/src/components/CarbonChart/CarbonChartBar.stories.tsx +352 -325
  27. package/src/components/CarbonChart/CarbonChartBarFloating.stories.tsx +127 -116
  28. package/src/components/CarbonChart/CarbonChartBarGrouped.stories.tsx +872 -843
  29. package/src/components/CarbonChart/CarbonChartBarStacked.stories.tsx +913 -879
  30. package/src/components/CarbonChart/CarbonChartBoxplot.stories.tsx +238 -232
  31. package/src/components/CarbonChart/CarbonChartBubble.stories.tsx +565 -547
  32. package/src/components/CarbonChart/CarbonChartBullet.stories.tsx +59 -56
  33. package/src/components/CarbonChart/CarbonChartCombo.stories.tsx +1335 -1299
  34. package/src/components/CarbonChart/CarbonChartDonut.stories.tsx +170 -153
  35. package/src/components/CarbonChart/CarbonChartGauge.stories.tsx +50 -44
  36. package/src/components/CarbonChart/CarbonChartHistogram.stories.tsx +733 -724
  37. package/src/components/CarbonChart/CarbonChartLine.stories.tsx +1656 -1605
  38. package/src/components/CarbonChart/CarbonChartLollipop.stories.tsx +81 -76
  39. package/src/components/CarbonChart/CarbonChartMeter.stories.tsx +177 -162
  40. package/src/components/CarbonChart/CarbonChartPie.stories.tsx +154 -139
  41. package/src/components/CarbonChart/CarbonChartRadar.stories.tsx +445 -433
  42. package/src/components/CarbonChart/CarbonChartScatter.stories.tsx +427 -409
  43. package/src/components/CarbonChart/CarbonChartSparkline.stories.tsx +191 -188
  44. package/src/components/CarbonChart/CarbonChartStep.stories.tsx +145 -142
  45. package/src/components/LineChart/LineChart.stories.tsx +91 -104
package/src/components/CarbonChart/CarbonChartBarGrouped.stories.tsx CHANGED
@@ -1,6 +1,6 @@
1
1
  import React from 'react';
2
2
 
3
- import { Story, Meta } from '@storybook/react/types-6-0';
3
+ import { StoryFn, Meta } from '@storybook/react/types-6-0';
4
4
  import { Card } from 'react-magma-dom';
5
5
 
6
6
  import { CarbonChart, CarbonChartProps, CarbonChartType } from '.';
@@ -23,902 +23,931 @@ export default {
23
23
  },
24
24
  } as Meta;
25
25
 
26
- const Template: Story<CarbonChartProps> = args => (
26
+ const Template: StoryFn<CarbonChartProps> = args => (
27
27
  <Card isInverse={args.isInverse} style={{ padding: '12px' }}>
28
28
  <CarbonChart {...args} />
29
29
  </Card>
30
30
  );
31
31
 
32
- //Grouped//
33
- export const PreSelectedgroupsGroupedBar = Template.bind({});
34
- PreSelectedgroupsGroupedBar.args = {
35
- isInverse: false,
36
- type: CarbonChartType.barGrouped,
37
- dataSet: [
38
- {
39
- group: 'Dataset 1',
40
- key: 'Qty',
41
- value: 65000,
42
- },
43
- {
44
- group: 'Dataset 1',
45
- key: 'More',
46
- value: -29123,
47
- },
48
- {
49
- group: 'Dataset 1',
50
- key: 'Sold',
51
- value: -35213,
52
- },
53
- {
54
- group: 'Dataset 1',
55
- key: 'Restocking',
56
- value: 51213,
57
- },
58
- {
59
- group: 'Dataset 1',
60
- key: 'Misc',
61
- value: 16932,
62
- },
63
- {
64
- group: 'Dataset 2',
65
- key: 'Qty',
66
- value: 32432,
67
- },
68
- {
69
- group: 'Dataset 2',
70
- key: 'More',
71
- value: -21312,
72
- },
73
- {
74
- group: 'Dataset 2',
75
- key: 'Sold',
76
- value: -56456,
77
- },
78
- {
79
- group: 'Dataset 2',
80
- key: 'Restocking',
81
- value: -21312,
82
- },
83
- {
84
- group: 'Dataset 2',
85
- key: 'Misc',
86
- value: 34234,
87
- },
88
- {
89
- group: 'Dataset 3',
90
- key: 'Qty',
91
- value: -12312,
92
- },
93
- {
94
- group: 'Dataset 3',
95
- key: 'More',
96
- value: 23232,
97
- },
98
- {
99
- group: 'Dataset 3',
100
- key: 'Sold',
101
- value: 34232,
102
- },
103
- {
104
- group: 'Dataset 3',
105
- key: 'Restocking',
106
- value: -12312,
107
- },
108
- {
109
- group: 'Dataset 3',
110
- key: 'Misc',
111
- value: -34234,
112
- },
113
- {
114
- group: 'Dataset 4',
115
- key: 'Qty',
116
- value: -32423,
117
- },
118
- {
119
- group: 'Dataset 4',
120
- key: 'More',
121
- value: 21313,
122
- },
123
- {
124
- group: 'Dataset 4',
125
- key: 'Sold',
126
- value: 64353,
127
- },
128
- {
129
- group: 'Dataset 4',
130
- key: 'Restocking',
131
- value: 24134,
132
- },
133
- {
134
- group: 'Dataset 4',
135
- key: 'Misc',
136
- value: 24134,
137
- },
138
- ],
139
- options: {
140
- title: 'Pre-selected groups (grouped bar)',
141
- data: {
142
- selectedGroups: ['Dataset 1', 'Dataset 3'],
143
- },
144
- axes: {
145
- left: {
146
- mapsTo: 'value',
32
+ export const PreSelectedgroupsGroupedBar = {
33
+ render: Template,
34
+
35
+ args: {
36
+ isInverse: false,
37
+ type: CarbonChartType.barGrouped,
38
+ dataSet: [
39
+ {
40
+ group: 'Dataset 1',
41
+ key: 'Qty',
42
+ value: 65000,
43
+ },
44
+ {
45
+ group: 'Dataset 1',
46
+ key: 'More',
47
+ value: -29123,
48
+ },
49
+ {
50
+ group: 'Dataset 1',
51
+ key: 'Sold',
52
+ value: -35213,
53
+ },
54
+ {
55
+ group: 'Dataset 1',
56
+ key: 'Restocking',
57
+ value: 51213,
58
+ },
59
+ {
60
+ group: 'Dataset 1',
61
+ key: 'Misc',
62
+ value: 16932,
63
+ },
64
+ {
65
+ group: 'Dataset 2',
66
+ key: 'Qty',
67
+ value: 32432,
68
+ },
69
+ {
70
+ group: 'Dataset 2',
71
+ key: 'More',
72
+ value: -21312,
73
+ },
74
+ {
75
+ group: 'Dataset 2',
76
+ key: 'Sold',
77
+ value: -56456,
78
+ },
79
+ {
80
+ group: 'Dataset 2',
81
+ key: 'Restocking',
82
+ value: -21312,
83
+ },
84
+ {
85
+ group: 'Dataset 2',
86
+ key: 'Misc',
87
+ value: 34234,
88
+ },
89
+ {
90
+ group: 'Dataset 3',
91
+ key: 'Qty',
92
+ value: -12312,
93
+ },
94
+ {
95
+ group: 'Dataset 3',
96
+ key: 'More',
97
+ value: 23232,
98
+ },
99
+ {
100
+ group: 'Dataset 3',
101
+ key: 'Sold',
102
+ value: 34232,
103
+ },
104
+ {
105
+ group: 'Dataset 3',
106
+ key: 'Restocking',
107
+ value: -12312,
108
+ },
109
+ {
110
+ group: 'Dataset 3',
111
+ key: 'Misc',
112
+ value: -34234,
113
+ },
114
+ {
115
+ group: 'Dataset 4',
116
+ key: 'Qty',
117
+ value: -32423,
147
118
  },
148
- bottom: {
149
- scaleType: 'labels',
150
- mapsTo: 'key',
119
+ {
120
+ group: 'Dataset 4',
121
+ key: 'More',
122
+ value: 21313,
151
123
  },
124
+ {
125
+ group: 'Dataset 4',
126
+ key: 'Sold',
127
+ value: 64353,
128
+ },
129
+ {
130
+ group: 'Dataset 4',
131
+ key: 'Restocking',
132
+ value: 24134,
133
+ },
134
+ {
135
+ group: 'Dataset 4',
136
+ key: 'Misc',
137
+ value: 24134,
138
+ },
139
+ ],
140
+ options: {
141
+ title: 'Pre-selected groups (grouped bar)',
142
+ data: {
143
+ selectedGroups: ['Dataset 1', 'Dataset 3'],
144
+ },
145
+ axes: {
146
+ left: {
147
+ mapsTo: 'value',
148
+ },
149
+ bottom: {
150
+ scaleType: 'labels',
151
+ mapsTo: 'key',
152
+ },
153
+ },
154
+ height: '400px',
152
155
  },
153
- height: '400px',
154
156
  },
155
157
  };
156
158
 
157
- export const VerticalGroupedBarDiscrete = Template.bind({});
158
- VerticalGroupedBarDiscrete.args = {
159
- isInverse: false,
160
- type: CarbonChartType.barGrouped,
161
- dataSet: [
162
- {
163
- group: 'Dataset 1',
164
- key: 'Qty',
165
- value: 65000,
166
- },
167
- {
168
- group: 'Dataset 1',
169
- key: 'More',
170
- value: -29123,
171
- },
172
- {
173
- group: 'Dataset 1',
174
- key: 'Sold',
175
- value: -35213,
176
- },
177
- {
178
- group: 'Dataset 1',
179
- key: 'Restocking',
180
- value: 51213,
181
- },
182
- {
183
- group: 'Dataset 1',
184
- key: 'Misc',
185
- value: 16932,
186
- },
187
- {
188
- group: 'Dataset 2',
189
- key: 'Qty',
190
- value: 32432,
191
- },
192
- {
193
- group: 'Dataset 2',
194
- key: 'More',
195
- value: -21312,
196
- },
197
- {
198
- group: 'Dataset 2',
199
- key: 'Sold',
200
- value: -56456,
201
- },
202
- {
203
- group: 'Dataset 2',
204
- key: 'Restocking',
205
- value: -21312,
206
- },
207
- {
208
- group: 'Dataset 2',
209
- key: 'Misc',
210
- value: 34234,
211
- },
212
- {
213
- group: 'Dataset 3',
214
- key: 'Qty',
215
- value: -12312,
216
- },
217
- {
218
- group: 'Dataset 3',
219
- key: 'More',
220
- value: 23232,
221
- },
222
- {
223
- group: 'Dataset 3',
224
- key: 'Sold',
225
- value: 34232,
226
- },
227
- {
228
- group: 'Dataset 3',
229
- key: 'Restocking',
230
- value: -12312,
231
- },
232
- {
233
- group: 'Dataset 3',
234
- key: 'Misc',
235
- value: -34234,
236
- },
237
- {
238
- group: 'Dataset 4',
239
- key: 'Qty',
240
- value: -32423,
241
- },
242
- {
243
- group: 'Dataset 4',
244
- key: 'More',
245
- value: 21313,
246
- },
247
- {
248
- group: 'Dataset 4',
249
- key: 'Sold',
250
- value: 64353,
251
- },
252
- {
253
- group: 'Dataset 4',
254
- key: 'Restocking',
255
- value: 24134,
256
- },
257
- {
258
- group: 'Dataset 4',
259
- key: 'Misc',
260
- value: 24134,
261
- },
262
- ],
263
- options: {
264
- title: 'Vertical grouped bar (discrete)',
265
- axes: {
266
- left: {
267
- mapsTo: 'value',
159
+ export const VerticalGroupedBarDiscrete = {
160
+ render: Template,
161
+
162
+ args: {
163
+ isInverse: false,
164
+ type: CarbonChartType.barGrouped,
165
+ dataSet: [
166
+ {
167
+ group: 'Dataset 1',
168
+ key: 'Qty',
169
+ value: 65000,
170
+ },
171
+ {
172
+ group: 'Dataset 1',
173
+ key: 'More',
174
+ value: -29123,
175
+ },
176
+ {
177
+ group: 'Dataset 1',
178
+ key: 'Sold',
179
+ value: -35213,
180
+ },
181
+ {
182
+ group: 'Dataset 1',
183
+ key: 'Restocking',
184
+ value: 51213,
185
+ },
186
+ {
187
+ group: 'Dataset 1',
188
+ key: 'Misc',
189
+ value: 16932,
190
+ },
191
+ {
192
+ group: 'Dataset 2',
193
+ key: 'Qty',
194
+ value: 32432,
195
+ },
196
+ {
197
+ group: 'Dataset 2',
198
+ key: 'More',
199
+ value: -21312,
200
+ },
201
+ {
202
+ group: 'Dataset 2',
203
+ key: 'Sold',
204
+ value: -56456,
205
+ },
206
+ {
207
+ group: 'Dataset 2',
208
+ key: 'Restocking',
209
+ value: -21312,
210
+ },
211
+ {
212
+ group: 'Dataset 2',
213
+ key: 'Misc',
214
+ value: 34234,
215
+ },
216
+ {
217
+ group: 'Dataset 3',
218
+ key: 'Qty',
219
+ value: -12312,
268
220
  },
269
- bottom: {
270
- scaleType: 'labels',
271
- mapsTo: 'key',
221
+ {
222
+ group: 'Dataset 3',
223
+ key: 'More',
224
+ value: 23232,
272
225
  },
226
+ {
227
+ group: 'Dataset 3',
228
+ key: 'Sold',
229
+ value: 34232,
230
+ },
231
+ {
232
+ group: 'Dataset 3',
233
+ key: 'Restocking',
234
+ value: -12312,
235
+ },
236
+ {
237
+ group: 'Dataset 3',
238
+ key: 'Misc',
239
+ value: -34234,
240
+ },
241
+ {
242
+ group: 'Dataset 4',
243
+ key: 'Qty',
244
+ value: -32423,
245
+ },
246
+ {
247
+ group: 'Dataset 4',
248
+ key: 'More',
249
+ value: 21313,
250
+ },
251
+ {
252
+ group: 'Dataset 4',
253
+ key: 'Sold',
254
+ value: 64353,
255
+ },
256
+ {
257
+ group: 'Dataset 4',
258
+ key: 'Restocking',
259
+ value: 24134,
260
+ },
261
+ {
262
+ group: 'Dataset 4',
263
+ key: 'Misc',
264
+ value: 24134,
265
+ },
266
+ ],
267
+ options: {
268
+ title: 'Vertical grouped bar (discrete)',
269
+ axes: {
270
+ left: {
271
+ mapsTo: 'value',
272
+ },
273
+ bottom: {
274
+ scaleType: 'labels',
275
+ mapsTo: 'key',
276
+ },
277
+ },
278
+ height: '400px',
273
279
  },
274
- height: '400px',
275
280
  },
276
281
  };
277
282
 
278
- export const VerticalGroupedBarTimeSeries = Template.bind({});
279
- VerticalGroupedBarTimeSeries.args = {
280
- isInverse: false,
281
- type: CarbonChartType.barGrouped,
282
- dataSet: [
283
- {
284
- group: 'Dataset 1',
285
- date: new Date(2019, 0, 1),
286
- value: 10000,
287
- },
288
- {
289
- group: 'Dataset 1',
290
- date: new Date(2019, 0, 2),
291
- value: 65000,
292
- },
293
- {
294
- group: 'Dataset 1',
295
- date: new Date(2019, 0, 3),
296
- value: 30000,
297
- },
298
- {
299
- group: 'Dataset 1',
300
- date: new Date(2019, 0, 6),
301
- value: 49213,
302
- },
303
- {
304
- group: 'Dataset 1',
305
- date: new Date(2019, 0, 7),
306
- value: 51213,
307
- },
308
- {
309
- group: 'Dataset 2',
310
- date: new Date(2019, 0, 1),
311
- value: 8000,
312
- },
313
- {
314
- group: 'Dataset 2',
315
- date: new Date(2019, 0, 2),
316
- value: 67000,
317
- },
318
- {
319
- group: 'Dataset 2',
320
- date: new Date(2019, 0, 3),
321
- value: 15000,
322
- },
323
- {
324
- group: 'Dataset 2',
325
- date: new Date(2019, 0, 6),
326
- value: 51213,
327
- },
328
- {
329
- group: 'Dataset 2',
330
- date: new Date(2019, 0, 7),
331
- value: 45213,
332
- },
333
- ],
334
- options: {
335
- title: 'Vertical grouped bar (time series)',
336
- axes: {
337
- left: {
338
- mapsTo: 'value',
283
+ export const VerticalGroupedBarTimeSeries = {
284
+ render: Template,
285
+
286
+ args: {
287
+ isInverse: false,
288
+ type: CarbonChartType.barGrouped,
289
+ dataSet: [
290
+ {
291
+ group: 'Dataset 1',
292
+ date: new Date(2019, 0, 1),
293
+ value: 10000,
294
+ },
295
+ {
296
+ group: 'Dataset 1',
297
+ date: new Date(2019, 0, 2),
298
+ value: 65000,
299
+ },
300
+ {
301
+ group: 'Dataset 1',
302
+ date: new Date(2019, 0, 3),
303
+ value: 30000,
304
+ },
305
+ {
306
+ group: 'Dataset 1',
307
+ date: new Date(2019, 0, 6),
308
+ value: 49213,
309
+ },
310
+ {
311
+ group: 'Dataset 1',
312
+ date: new Date(2019, 0, 7),
313
+ value: 51213,
314
+ },
315
+ {
316
+ group: 'Dataset 2',
317
+ date: new Date(2019, 0, 1),
318
+ value: 8000,
319
+ },
320
+ {
321
+ group: 'Dataset 2',
322
+ date: new Date(2019, 0, 2),
323
+ value: 67000,
324
+ },
325
+ {
326
+ group: 'Dataset 2',
327
+ date: new Date(2019, 0, 3),
328
+ value: 15000,
339
329
  },
340
- bottom: {
341
- mapsTo: 'date',
342
- scaleType: 'time',
330
+ {
331
+ group: 'Dataset 2',
332
+ date: new Date(2019, 0, 6),
333
+ value: 51213,
343
334
  },
335
+ {
336
+ group: 'Dataset 2',
337
+ date: new Date(2019, 0, 7),
338
+ value: 45213,
339
+ },
340
+ ],
341
+ options: {
342
+ title: 'Vertical grouped bar (time series)',
343
+ axes: {
344
+ left: {
345
+ mapsTo: 'value',
346
+ },
347
+ bottom: {
348
+ mapsTo: 'date',
349
+ scaleType: 'time',
350
+ },
351
+ },
352
+ height: '400px',
344
353
  },
345
- height: '400px',
346
354
  },
347
355
  };
348
356
 
349
- export const VerticalGroupedBarTimeSeriesDenseData = Template.bind({});
350
- VerticalGroupedBarTimeSeriesDenseData.args = {
351
- isInverse: false,
352
- type: CarbonChartType.barGrouped,
353
- dataSet: [
354
- {
355
- group: 'Dataset 1',
356
- date: new Date(2019, 0, 1),
357
- value: 10000,
358
- },
359
- {
360
- group: 'Dataset 1',
361
- date: new Date(2019, 0, 2),
362
- value: 65000,
363
- },
364
- {
365
- group: 'Dataset 1',
366
- date: new Date(2019, 0, 3),
367
- value: 30000,
368
- },
369
- {
370
- group: 'Dataset 1',
371
- date: new Date(2019, 0, 6),
372
- value: 49213,
373
- },
374
- {
375
- group: 'Dataset 1',
376
- date: new Date(2019, 0, 7),
377
- value: 51213,
378
- },
379
- {
380
- group: 'Dataset 1',
381
- date: new Date(2019, 0, 8),
382
- value: 51213,
383
- },
384
- {
385
- group: 'Dataset 1',
386
- date: new Date(2019, 0, 9),
387
- value: 51213,
388
- },
389
- {
390
- group: 'Dataset 1',
391
- date: new Date(2019, 0, 10),
392
- value: 51213,
393
- },
394
- {
395
- group: 'Dataset 1',
396
- date: new Date(2019, 0, 11),
397
- value: 51213,
398
- },
399
- {
400
- group: 'Dataset 1',
401
- date: new Date(2019, 0, 12),
402
- value: 51213,
403
- },
404
- {
405
- group: 'Dataset 1',
406
- date: new Date(2019, 0, 13),
407
- value: 51213,
408
- },
409
- {
410
- group: 'Dataset 1',
411
- date: new Date(2019, 0, 14),
412
- value: 51213,
413
- },
414
- {
415
- group: 'Dataset 1',
416
- date: new Date(2019, 0, 15),
417
- value: 51213,
418
- },
419
- {
420
- group: 'Dataset 1',
421
- date: new Date(2019, 0, 16),
422
- value: 51213,
423
- },
424
- {
425
- group: 'Dataset 1',
426
- date: new Date(2019, 0, 17),
427
- value: 51213,
428
- },
429
- {
430
- group: 'Dataset 1',
431
- date: new Date(2019, 0, 18),
432
- value: 51213,
433
- },
434
- {
435
- group: 'Dataset 1',
436
- date: new Date(2019, 0, 19),
437
- value: 51213,
438
- },
439
- {
440
- group: 'Dataset 1',
441
- date: new Date(2019, 0, 20),
442
- value: 51213,
443
- },
444
- {
445
- group: 'Dataset 1',
446
- date: new Date(2019, 0, 21),
447
- value: 51213,
448
- },
449
- {
450
- group: 'Dataset 1',
451
- date: new Date(2019, 0, 22),
452
- value: 51213,
453
- },
454
- {
455
- group: 'Dataset 1',
456
- date: new Date(2019, 0, 23),
457
- value: 51213,
458
- },
459
- {
460
- group: 'Dataset 1',
461
- date: new Date(2019, 0, 24),
462
- value: 51213,
463
- },
464
- {
465
- group: 'Dataset 1',
466
- date: new Date(2019, 0, 25),
467
- value: 51213,
468
- },
469
- {
470
- group: 'Dataset 1',
471
- date: new Date(2019, 0, 26),
472
- value: 51213,
473
- },
474
- {
475
- group: 'Dataset 1',
476
- date: new Date(2019, 0, 27),
477
- value: 51213,
478
- },
479
- {
480
- group: 'Dataset 1',
481
- date: new Date(2019, 0, 28),
482
- value: 51213,
483
- },
484
- {
485
- group: 'Dataset 1',
486
- date: new Date(2019, 0, 29),
487
- value: 51213,
488
- },
489
- {
490
- group: 'Dataset 1',
491
- date: new Date(2019, 0, 30),
492
- value: 51213,
493
- },
494
- {
495
- group: 'Dataset 1',
496
- date: new Date(2019, 0, 31),
497
- value: 51213,
498
- },
499
- {
500
- group: 'Dataset 2',
501
- date: new Date(2019, 0, 1),
502
- value: 8000,
503
- },
504
- {
505
- group: 'Dataset 2',
506
- date: new Date(2019, 0, 2),
507
- value: 67000,
508
- },
509
- {
510
- group: 'Dataset 2',
511
- date: new Date(2019, 0, 3),
512
- value: 15000,
513
- },
514
- {
515
- group: 'Dataset 2',
516
- date: new Date(2019, 0, 6),
517
- value: 51213,
518
- },
519
- {
520
- group: 'Dataset 2',
521
- date: new Date(2019, 0, 7),
522
- value: 45213,
523
- },
524
- {
525
- group: 'Dataset 2',
526
- date: new Date(2019, 0, 8),
527
- value: 51213,
528
- },
529
- {
530
- group: 'Dataset 2',
531
- date: new Date(2019, 0, 9),
532
- value: 51213,
533
- },
534
- {
535
- group: 'Dataset 2',
536
- date: new Date(2019, 0, 10),
537
- value: 51213,
538
- },
539
- {
540
- group: 'Dataset 2',
541
- date: new Date(2019, 0, 11),
542
- value: 51213,
543
- },
544
- {
545
- group: 'Dataset 2',
546
- date: new Date(2019, 0, 12),
547
- value: 51213,
548
- },
549
- {
550
- group: 'Dataset 2',
551
- date: new Date(2019, 0, 13),
552
- value: 51213,
553
- },
554
- {
555
- group: 'Dataset 2',
556
- date: new Date(2019, 0, 14),
557
- value: 51213,
558
- },
559
- {
560
- group: 'Dataset 2',
561
- date: new Date(2019, 0, 15),
562
- value: 51213,
563
- },
564
- {
565
- group: 'Dataset 2',
566
- date: new Date(2019, 0, 16),
567
- value: 51213,
568
- },
569
- {
570
- group: 'Dataset 2',
571
- date: new Date(2019, 0, 17),
572
- value: 51213,
573
- },
574
- {
575
- group: 'Dataset 2',
576
- date: new Date(2019, 0, 18),
577
- value: 51213,
578
- },
579
- {
580
- group: 'Dataset 2',
581
- date: new Date(2019, 0, 19),
582
- value: 51213,
583
- },
584
- {
585
- group: 'Dataset 2',
586
- date: new Date(2019, 0, 20),
587
- value: 51213,
588
- },
589
- {
590
- group: 'Dataset 2',
591
- date: new Date(2019, 0, 21),
592
- value: 51213,
593
- },
594
- {
595
- group: 'Dataset 2',
596
- date: new Date(2019, 0, 22),
597
- value: 51213,
598
- },
599
- {
600
- group: 'Dataset 2',
601
- date: new Date(2019, 0, 23),
602
- value: 51213,
603
- },
604
- {
605
- group: 'Dataset 2',
606
- date: new Date(2019, 0, 24),
607
- value: 51213,
608
- },
609
- {
610
- group: 'Dataset 2',
611
- date: new Date(2019, 0, 25),
612
- value: 51213,
613
- },
614
- {
615
- group: 'Dataset 2',
616
- date: new Date(2019, 0, 26),
617
- value: 51213,
618
- },
619
- {
620
- group: 'Dataset 2',
621
- date: new Date(2019, 0, 27),
622
- value: 51213,
623
- },
624
- {
625
- group: 'Dataset 2',
626
- date: new Date(2019, 0, 28),
627
- value: 51213,
628
- },
629
- {
630
- group: 'Dataset 2',
631
- date: new Date(2019, 0, 29),
632
- value: 51213,
633
- },
634
- {
635
- group: 'Dataset 2',
636
- date: new Date(2019, 0, 30),
637
- value: 51213,
638
- },
639
- {
640
- group: 'Dataset 2',
641
- date: new Date(2019, 0, 31),
642
- value: 51213,
643
- },
644
- ],
645
- options: {
646
- title: 'Vertical grouped bar (time series - dense data)',
647
- axes: {
648
- left: {
649
- mapsTo: 'value',
357
+ export const VerticalGroupedBarTimeSeriesDenseData = {
358
+ render: Template,
359
+
360
+ args: {
361
+ isInverse: false,
362
+ type: CarbonChartType.barGrouped,
363
+ dataSet: [
364
+ {
365
+ group: 'Dataset 1',
366
+ date: new Date(2019, 0, 1),
367
+ value: 10000,
368
+ },
369
+ {
370
+ group: 'Dataset 1',
371
+ date: new Date(2019, 0, 2),
372
+ value: 65000,
373
+ },
374
+ {
375
+ group: 'Dataset 1',
376
+ date: new Date(2019, 0, 3),
377
+ value: 30000,
378
+ },
379
+ {
380
+ group: 'Dataset 1',
381
+ date: new Date(2019, 0, 6),
382
+ value: 49213,
383
+ },
384
+ {
385
+ group: 'Dataset 1',
386
+ date: new Date(2019, 0, 7),
387
+ value: 51213,
388
+ },
389
+ {
390
+ group: 'Dataset 1',
391
+ date: new Date(2019, 0, 8),
392
+ value: 51213,
393
+ },
394
+ {
395
+ group: 'Dataset 1',
396
+ date: new Date(2019, 0, 9),
397
+ value: 51213,
398
+ },
399
+ {
400
+ group: 'Dataset 1',
401
+ date: new Date(2019, 0, 10),
402
+ value: 51213,
403
+ },
404
+ {
405
+ group: 'Dataset 1',
406
+ date: new Date(2019, 0, 11),
407
+ value: 51213,
408
+ },
409
+ {
410
+ group: 'Dataset 1',
411
+ date: new Date(2019, 0, 12),
412
+ value: 51213,
413
+ },
414
+ {
415
+ group: 'Dataset 1',
416
+ date: new Date(2019, 0, 13),
417
+ value: 51213,
418
+ },
419
+ {
420
+ group: 'Dataset 1',
421
+ date: new Date(2019, 0, 14),
422
+ value: 51213,
423
+ },
424
+ {
425
+ group: 'Dataset 1',
426
+ date: new Date(2019, 0, 15),
427
+ value: 51213,
428
+ },
429
+ {
430
+ group: 'Dataset 1',
431
+ date: new Date(2019, 0, 16),
432
+ value: 51213,
433
+ },
434
+ {
435
+ group: 'Dataset 1',
436
+ date: new Date(2019, 0, 17),
437
+ value: 51213,
438
+ },
439
+ {
440
+ group: 'Dataset 1',
441
+ date: new Date(2019, 0, 18),
442
+ value: 51213,
443
+ },
444
+ {
445
+ group: 'Dataset 1',
446
+ date: new Date(2019, 0, 19),
447
+ value: 51213,
448
+ },
449
+ {
450
+ group: 'Dataset 1',
451
+ date: new Date(2019, 0, 20),
452
+ value: 51213,
453
+ },
454
+ {
455
+ group: 'Dataset 1',
456
+ date: new Date(2019, 0, 21),
457
+ value: 51213,
458
+ },
459
+ {
460
+ group: 'Dataset 1',
461
+ date: new Date(2019, 0, 22),
462
+ value: 51213,
463
+ },
464
+ {
465
+ group: 'Dataset 1',
466
+ date: new Date(2019, 0, 23),
467
+ value: 51213,
468
+ },
469
+ {
470
+ group: 'Dataset 1',
471
+ date: new Date(2019, 0, 24),
472
+ value: 51213,
473
+ },
474
+ {
475
+ group: 'Dataset 1',
476
+ date: new Date(2019, 0, 25),
477
+ value: 51213,
478
+ },
479
+ {
480
+ group: 'Dataset 1',
481
+ date: new Date(2019, 0, 26),
482
+ value: 51213,
483
+ },
484
+ {
485
+ group: 'Dataset 1',
486
+ date: new Date(2019, 0, 27),
487
+ value: 51213,
488
+ },
489
+ {
490
+ group: 'Dataset 1',
491
+ date: new Date(2019, 0, 28),
492
+ value: 51213,
493
+ },
494
+ {
495
+ group: 'Dataset 1',
496
+ date: new Date(2019, 0, 29),
497
+ value: 51213,
498
+ },
499
+ {
500
+ group: 'Dataset 1',
501
+ date: new Date(2019, 0, 30),
502
+ value: 51213,
503
+ },
504
+ {
505
+ group: 'Dataset 1',
506
+ date: new Date(2019, 0, 31),
507
+ value: 51213,
508
+ },
509
+ {
510
+ group: 'Dataset 2',
511
+ date: new Date(2019, 0, 1),
512
+ value: 8000,
513
+ },
514
+ {
515
+ group: 'Dataset 2',
516
+ date: new Date(2019, 0, 2),
517
+ value: 67000,
518
+ },
519
+ {
520
+ group: 'Dataset 2',
521
+ date: new Date(2019, 0, 3),
522
+ value: 15000,
523
+ },
524
+ {
525
+ group: 'Dataset 2',
526
+ date: new Date(2019, 0, 6),
527
+ value: 51213,
528
+ },
529
+ {
530
+ group: 'Dataset 2',
531
+ date: new Date(2019, 0, 7),
532
+ value: 45213,
533
+ },
534
+ {
535
+ group: 'Dataset 2',
536
+ date: new Date(2019, 0, 8),
537
+ value: 51213,
538
+ },
539
+ {
540
+ group: 'Dataset 2',
541
+ date: new Date(2019, 0, 9),
542
+ value: 51213,
543
+ },
544
+ {
545
+ group: 'Dataset 2',
546
+ date: new Date(2019, 0, 10),
547
+ value: 51213,
548
+ },
549
+ {
550
+ group: 'Dataset 2',
551
+ date: new Date(2019, 0, 11),
552
+ value: 51213,
553
+ },
554
+ {
555
+ group: 'Dataset 2',
556
+ date: new Date(2019, 0, 12),
557
+ value: 51213,
558
+ },
559
+ {
560
+ group: 'Dataset 2',
561
+ date: new Date(2019, 0, 13),
562
+ value: 51213,
563
+ },
564
+ {
565
+ group: 'Dataset 2',
566
+ date: new Date(2019, 0, 14),
567
+ value: 51213,
568
+ },
569
+ {
570
+ group: 'Dataset 2',
571
+ date: new Date(2019, 0, 15),
572
+ value: 51213,
573
+ },
574
+ {
575
+ group: 'Dataset 2',
576
+ date: new Date(2019, 0, 16),
577
+ value: 51213,
578
+ },
579
+ {
580
+ group: 'Dataset 2',
581
+ date: new Date(2019, 0, 17),
582
+ value: 51213,
583
+ },
584
+ {
585
+ group: 'Dataset 2',
586
+ date: new Date(2019, 0, 18),
587
+ value: 51213,
588
+ },
589
+ {
590
+ group: 'Dataset 2',
591
+ date: new Date(2019, 0, 19),
592
+ value: 51213,
593
+ },
594
+ {
595
+ group: 'Dataset 2',
596
+ date: new Date(2019, 0, 20),
597
+ value: 51213,
598
+ },
599
+ {
600
+ group: 'Dataset 2',
601
+ date: new Date(2019, 0, 21),
602
+ value: 51213,
603
+ },
604
+ {
605
+ group: 'Dataset 2',
606
+ date: new Date(2019, 0, 22),
607
+ value: 51213,
608
+ },
609
+ {
610
+ group: 'Dataset 2',
611
+ date: new Date(2019, 0, 23),
612
+ value: 51213,
613
+ },
614
+ {
615
+ group: 'Dataset 2',
616
+ date: new Date(2019, 0, 24),
617
+ value: 51213,
618
+ },
619
+ {
620
+ group: 'Dataset 2',
621
+ date: new Date(2019, 0, 25),
622
+ value: 51213,
623
+ },
624
+ {
625
+ group: 'Dataset 2',
626
+ date: new Date(2019, 0, 26),
627
+ value: 51213,
628
+ },
629
+ {
630
+ group: 'Dataset 2',
631
+ date: new Date(2019, 0, 27),
632
+ value: 51213,
633
+ },
634
+ {
635
+ group: 'Dataset 2',
636
+ date: new Date(2019, 0, 28),
637
+ value: 51213,
638
+ },
639
+ {
640
+ group: 'Dataset 2',
641
+ date: new Date(2019, 0, 29),
642
+ value: 51213,
643
+ },
644
+ {
645
+ group: 'Dataset 2',
646
+ date: new Date(2019, 0, 30),
647
+ value: 51213,
650
648
  },
651
- bottom: {
652
- mapsTo: 'date',
653
- scaleType: 'time',
649
+ {
650
+ group: 'Dataset 2',
651
+ date: new Date(2019, 0, 31),
652
+ value: 51213,
654
653
  },
654
+ ],
655
+ options: {
656
+ title: 'Vertical grouped bar (time series - dense data)',
657
+ axes: {
658
+ left: {
659
+ mapsTo: 'value',
660
+ },
661
+ bottom: {
662
+ mapsTo: 'date',
663
+ scaleType: 'time',
664
+ },
665
+ },
666
+ height: '400px',
655
667
  },
656
- height: '400px',
657
668
  },
658
669
  };
659
670
 
660
- export const VerticalGroupedBarEmptyState = Template.bind({});
661
- VerticalGroupedBarEmptyState.args = {
662
- isInverse: false,
663
- type: CarbonChartType.barGrouped,
664
- dataSet: [],
665
- options: {
666
- title: 'Vertical grouped bar (empty state)',
667
- axes: {
668
- left: {},
669
- bottom: {
670
- scaleType: 'labels',
671
+ export const VerticalGroupedBarEmptyState = {
672
+ render: Template,
673
+
674
+ args: {
675
+ isInverse: false,
676
+ type: CarbonChartType.barGrouped,
677
+ dataSet: [],
678
+ options: {
679
+ title: 'Vertical grouped bar (empty state)',
680
+ axes: {
681
+ left: {},
682
+ bottom: {
683
+ scaleType: 'labels',
684
+ },
671
685
  },
686
+ height: '400px',
672
687
  },
673
- height: '400px',
674
688
  },
675
689
  };
676
690
 
677
- export const VerticalGroupedBarSkeleton = Template.bind({});
678
- VerticalGroupedBarSkeleton.args = {
679
- isInverse: false,
680
- type: CarbonChartType.barGrouped,
681
- dataSet: [],
682
- options: {
683
- title: 'Vertical grouped bar (skeleton)',
684
- axes: {
685
- left: {},
686
- bottom: {
687
- scaleType: 'labels',
691
+ export const VerticalGroupedBarSkeleton = {
692
+ render: Template,
693
+
694
+ args: {
695
+ isInverse: false,
696
+ type: CarbonChartType.barGrouped,
697
+ dataSet: [],
698
+ options: {
699
+ title: 'Vertical grouped bar (skeleton)',
700
+ axes: {
701
+ left: {},
702
+ bottom: {
703
+ scaleType: 'labels',
704
+ },
688
705
  },
706
+ data: {
707
+ loading: true,
708
+ },
709
+ height: '400px',
689
710
  },
690
- data: {
691
- loading: true,
692
- },
693
- height: '400px',
694
711
  },
695
712
  };
696
- export const HorizontalGroupedBarDiscrete = Template.bind({});
697
- HorizontalGroupedBarDiscrete.args = {
698
- isInverse: false,
699
- type: CarbonChartType.barGrouped,
700
- dataSet: [
701
- {
702
- group: 'Dataset 1',
703
- key: 'Qty',
704
- value: 65000,
705
- },
706
- {
707
- group: 'Dataset 1',
708
- key: 'More',
709
- value: -29123,
710
- },
711
- {
712
- group: 'Dataset 1',
713
- key: 'Sold',
714
- value: -35213,
715
- },
716
- {
717
- group: 'Dataset 1',
718
- key: 'Restocking',
719
- value: 51213,
720
- },
721
- {
722
- group: 'Dataset 1',
723
- key: 'Misc',
724
- value: 16932,
725
- },
726
- {
727
- group: 'Dataset 2',
728
- key: 'Qty',
729
- value: 32432,
730
- },
731
- {
732
- group: 'Dataset 2',
733
- key: 'More',
734
- value: -21312,
735
- },
736
- {
737
- group: 'Dataset 2',
738
- key: 'Sold',
739
- value: -56456,
740
- },
741
- {
742
- group: 'Dataset 2',
743
- key: 'Restocking',
744
- value: -21312,
745
- },
746
- {
747
- group: 'Dataset 2',
748
- key: 'Misc',
749
- value: 34234,
750
- },
751
- {
752
- group: 'Dataset 3',
753
- key: 'Qty',
754
- value: -12312,
755
- },
756
- {
757
- group: 'Dataset 3',
758
- key: 'More',
759
- value: 23232,
760
- },
761
- {
762
- group: 'Dataset 3',
763
- key: 'Sold',
764
- value: 34232,
765
- },
766
- {
767
- group: 'Dataset 3',
768
- key: 'Restocking',
769
- value: -12312,
770
- },
771
- {
772
- group: 'Dataset 3',
773
- key: 'Misc',
774
- value: -34234,
775
- },
776
- {
777
- group: 'Dataset 4',
778
- key: 'Qty',
779
- value: -32423,
780
- },
781
- {
782
- group: 'Dataset 4',
783
- key: 'More',
784
- value: 21313,
785
- },
786
- {
787
- group: 'Dataset 4',
788
- key: 'Sold',
789
- value: 64353,
790
- },
791
- {
792
- group: 'Dataset 4',
793
- key: 'Restocking',
794
- value: 24134,
795
- },
796
- {
797
- group: 'Dataset 4',
798
- key: 'Misc',
799
- value: 24134,
800
- },
801
- ],
802
- options: {
803
- title: 'Horizontal grouped bar (discrete)',
804
- axes: {
805
- left: {
806
- scaleType: 'labels',
807
- mapsTo: 'key',
713
+
714
+ export const HorizontalGroupedBarDiscrete = {
715
+ render: Template,
716
+
717
+ args: {
718
+ isInverse: false,
719
+ type: CarbonChartType.barGrouped,
720
+ dataSet: [
721
+ {
722
+ group: 'Dataset 1',
723
+ key: 'Qty',
724
+ value: 65000,
725
+ },
726
+ {
727
+ group: 'Dataset 1',
728
+ key: 'More',
729
+ value: -29123,
730
+ },
731
+ {
732
+ group: 'Dataset 1',
733
+ key: 'Sold',
734
+ value: -35213,
735
+ },
736
+ {
737
+ group: 'Dataset 1',
738
+ key: 'Restocking',
739
+ value: 51213,
740
+ },
741
+ {
742
+ group: 'Dataset 1',
743
+ key: 'Misc',
744
+ value: 16932,
745
+ },
746
+ {
747
+ group: 'Dataset 2',
748
+ key: 'Qty',
749
+ value: 32432,
750
+ },
751
+ {
752
+ group: 'Dataset 2',
753
+ key: 'More',
754
+ value: -21312,
755
+ },
756
+ {
757
+ group: 'Dataset 2',
758
+ key: 'Sold',
759
+ value: -56456,
760
+ },
761
+ {
762
+ group: 'Dataset 2',
763
+ key: 'Restocking',
764
+ value: -21312,
765
+ },
766
+ {
767
+ group: 'Dataset 2',
768
+ key: 'Misc',
769
+ value: 34234,
808
770
  },
809
- bottom: {
810
- mapsTo: 'value',
771
+ {
772
+ group: 'Dataset 3',
773
+ key: 'Qty',
774
+ value: -12312,
811
775
  },
776
+ {
777
+ group: 'Dataset 3',
778
+ key: 'More',
779
+ value: 23232,
780
+ },
781
+ {
782
+ group: 'Dataset 3',
783
+ key: 'Sold',
784
+ value: 34232,
785
+ },
786
+ {
787
+ group: 'Dataset 3',
788
+ key: 'Restocking',
789
+ value: -12312,
790
+ },
791
+ {
792
+ group: 'Dataset 3',
793
+ key: 'Misc',
794
+ value: -34234,
795
+ },
796
+ {
797
+ group: 'Dataset 4',
798
+ key: 'Qty',
799
+ value: -32423,
800
+ },
801
+ {
802
+ group: 'Dataset 4',
803
+ key: 'More',
804
+ value: 21313,
805
+ },
806
+ {
807
+ group: 'Dataset 4',
808
+ key: 'Sold',
809
+ value: 64353,
810
+ },
811
+ {
812
+ group: 'Dataset 4',
813
+ key: 'Restocking',
814
+ value: 24134,
815
+ },
816
+ {
817
+ group: 'Dataset 4',
818
+ key: 'Misc',
819
+ value: 24134,
820
+ },
821
+ ],
822
+ options: {
823
+ title: 'Horizontal grouped bar (discrete)',
824
+ axes: {
825
+ left: {
826
+ scaleType: 'labels',
827
+ mapsTo: 'key',
828
+ },
829
+ bottom: {
830
+ mapsTo: 'value',
831
+ },
832
+ },
833
+ height: '400px',
812
834
  },
813
- height: '400px',
814
835
  },
815
836
  };
816
837
 
817
- export const HorizontalGroupedBarTimeSeries = Template.bind({});
818
- HorizontalGroupedBarTimeSeries.args = {
819
- isInverse: false,
820
- type: CarbonChartType.barGrouped,
821
- dataSet: [
822
- {
823
- group: 'Dataset 1',
824
- date: new Date(2019, 0, 1),
825
- value: 10000,
826
- },
827
- {
828
- group: 'Dataset 1',
829
- date: new Date(2019, 0, 2),
830
- value: 65000,
831
- },
832
- {
833
- group: 'Dataset 1',
834
- date: new Date(2019, 0, 3),
835
- value: 30000,
836
- },
837
- {
838
- group: 'Dataset 1',
839
- date: new Date(2019, 0, 6),
840
- value: 49213,
841
- },
842
- {
843
- group: 'Dataset 1',
844
- date: new Date(2019, 0, 7),
845
- value: 51213,
846
- },
847
- {
848
- group: 'Dataset 2',
849
- date: new Date(2019, 0, 1),
850
- value: 8000,
851
- },
852
- {
853
- group: 'Dataset 2',
854
- date: new Date(2019, 0, 2),
855
- value: 67000,
856
- },
857
- {
858
- group: 'Dataset 2',
859
- date: new Date(2019, 0, 3),
860
- value: 15000,
861
- },
862
- {
863
- group: 'Dataset 2',
864
- date: new Date(2019, 0, 6),
865
- value: 51213,
866
- },
867
- {
868
- group: 'Dataset 2',
869
- date: new Date(2019, 0, 7),
870
- value: 45213,
871
- },
872
- ],
873
- options: {
874
- title: 'Horizontal grouped bar (time series)',
875
- axes: {
876
- left: {
877
- mapsTo: 'date',
878
- scaleType: 'time',
838
+ export const HorizontalGroupedBarTimeSeries = {
839
+ render: Template,
840
+
841
+ args: {
842
+ isInverse: false,
843
+ type: CarbonChartType.barGrouped,
844
+ dataSet: [
845
+ {
846
+ group: 'Dataset 1',
847
+ date: new Date(2019, 0, 1),
848
+ value: 10000,
849
+ },
850
+ {
851
+ group: 'Dataset 1',
852
+ date: new Date(2019, 0, 2),
853
+ value: 65000,
854
+ },
855
+ {
856
+ group: 'Dataset 1',
857
+ date: new Date(2019, 0, 3),
858
+ value: 30000,
859
+ },
860
+ {
861
+ group: 'Dataset 1',
862
+ date: new Date(2019, 0, 6),
863
+ value: 49213,
864
+ },
865
+ {
866
+ group: 'Dataset 1',
867
+ date: new Date(2019, 0, 7),
868
+ value: 51213,
869
+ },
870
+ {
871
+ group: 'Dataset 2',
872
+ date: new Date(2019, 0, 1),
873
+ value: 8000,
874
+ },
875
+ {
876
+ group: 'Dataset 2',
877
+ date: new Date(2019, 0, 2),
878
+ value: 67000,
879
879
  },
880
- bottom: {
881
- mapsTo: 'value',
880
+ {
881
+ group: 'Dataset 2',
882
+ date: new Date(2019, 0, 3),
883
+ value: 15000,
882
884
  },
885
+ {
886
+ group: 'Dataset 2',
887
+ date: new Date(2019, 0, 6),
888
+ value: 51213,
889
+ },
890
+ {
891
+ group: 'Dataset 2',
892
+ date: new Date(2019, 0, 7),
893
+ value: 45213,
894
+ },
895
+ ],
896
+ options: {
897
+ title: 'Horizontal grouped bar (time series)',
898
+ axes: {
899
+ left: {
900
+ mapsTo: 'date',
901
+ scaleType: 'time',
902
+ },
903
+ bottom: {
904
+ mapsTo: 'value',
905
+ },
906
+ },
907
+ height: '400px',
883
908
  },
884
- height: '400px',
885
909
  },
886
910
  };
887
911
 
888
- export const HorizontalGroupedBarEmptyState = Template.bind({});
889
- HorizontalGroupedBarEmptyState.args = {
890
- isInverse: false,
891
- type: CarbonChartType.barGrouped,
892
- dataSet: [],
893
- options: {
894
- title: 'Horizontal grouped bar (empty state)',
895
- axes: {
896
- left: {
897
- scaleType: 'labels',
898
- },
899
- bottom: {},
912
+ export const HorizontalGroupedBarEmptyState = {
913
+ render: Template,
914
+
915
+ args: {
916
+ isInverse: false,
917
+ type: CarbonChartType.barGrouped,
918
+ dataSet: [],
919
+ options: {
920
+ title: 'Horizontal grouped bar (empty state)',
921
+ axes: {
922
+ left: {
923
+ scaleType: 'labels',
924
+ },
925
+ bottom: {},
926
+ },
927
+ height: '400px',
900
928
  },
901
- height: '400px',
902
929
  },
903
930
  };
904
931
 
905
- export const HorizontalGroupedBarSkeleton = Template.bind({});
906
- HorizontalGroupedBarSkeleton.args = {
907
- isInverse: false,
908
- type: CarbonChartType.barGrouped,
909
- dataSet: [],
910
- options: {
911
- title: 'Horizontal grouped bar (skeleton)',
912
- axes: {
913
- left: {
914
- scaleType: 'labels',
915
- },
916
- bottom: {},
917
- },
918
- data: {
919
- loading: true,
932
+ export const HorizontalGroupedBarSkeleton = {
933
+ render: Template,
934
+
935
+ args: {
936
+ isInverse: false,
937
+ type: CarbonChartType.barGrouped,
938
+ dataSet: [],
939
+ options: {
940
+ title: 'Horizontal grouped bar (skeleton)',
941
+ axes: {
942
+ left: {
943
+ scaleType: 'labels',
944
+ },
945
+ bottom: {},
946
+ },
947
+ data: {
948
+ loading: true,
949
+ },
950
+ height: '400px',
920
951
  },
921
- height: '400px',
922
952
  },
923
953
  };
924
- //Grouped//