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