@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/CarbonChartAreaStacked.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,445 +23,455 @@ 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 StackedAreaTimeSeries = Template.bind({});
33
- StackedAreaTimeSeries.args = {
34
- isInverse: false,
35
- type: CarbonChartType.areaStacked,
36
- dataSet: [
37
- {
38
- group: 'Dataset 1',
39
- date: '2019-01-01T05:00:00.000Z',
40
- value: 10000,
41
- },
42
- {
43
- group: 'Dataset 1',
44
- date: '2019-01-05T05:00:00.000Z',
45
- value: 65000,
46
- },
47
- {
48
- group: 'Dataset 1',
49
- date: '2019-01-08T05:00:00.000Z',
50
- value: 10000,
51
- },
52
- {
53
- group: 'Dataset 1',
54
- date: '2019-01-13T05:00:00.000Z',
55
- value: 49213,
56
- },
57
- {
58
- group: 'Dataset 1',
59
- date: '2019-01-17T05:00:00.000Z',
60
- value: 51213,
61
- },
62
- {
63
- group: 'Dataset 2',
64
- date: '2019-01-01T05:00:00.000Z',
65
- value: 20000,
66
- },
67
- {
68
- group: 'Dataset 2',
69
- date: '2019-01-05T05:00:00.000Z',
70
- value: 25000,
71
- },
72
- {
73
- group: 'Dataset 2',
74
- date: '2019-01-08T05:00:00.000Z',
75
- value: 60000,
76
- },
77
- {
78
- group: 'Dataset 2',
79
- date: '2019-01-13T05:00:00.000Z',
80
- value: 30213,
81
- },
82
- {
83
- group: 'Dataset 2',
84
- date: '2019-01-17T05:00:00.000Z',
85
- value: 55213,
86
- },
87
- {
88
- group: 'Dataset 3',
89
- date: '2019-01-01T05:00:00.000Z',
90
- value: 30000,
91
- },
92
- {
93
- group: 'Dataset 3',
94
- date: '2019-01-05T05:00:00.000Z',
95
- value: 20000,
96
- },
97
- {
98
- group: 'Dataset 3',
99
- date: '2019-01-08T05:00:00.000Z',
100
- value: 40000,
101
- },
102
- {
103
- group: 'Dataset 3',
104
- date: '2019-01-13T05:00:00.000Z',
105
- value: 60213,
106
- },
107
- {
108
- group: 'Dataset 3',
109
- date: '2019-01-17T05:00:00.000Z',
110
- value: 25213,
111
- },
112
- ],
113
- options: {
114
- title: 'Stacked area (time series)',
115
- axes: {
116
- left: {
117
- stacked: true,
118
- scaleType: 'linear',
119
- mapsTo: 'value',
120
- },
121
- bottom: {
122
- scaleType: 'time',
123
- mapsTo: 'date',
32
+ export const StackedAreaTimeSeries = {
33
+ render: Template,
34
+
35
+ args: {
36
+ isInverse: false,
37
+ type: CarbonChartType.areaStacked,
38
+ dataSet: [
39
+ {
40
+ group: 'Dataset 1',
41
+ date: '2019-01-01T05:00:00.000Z',
42
+ value: 10000,
124
43
  },
44
+ {
45
+ group: 'Dataset 1',
46
+ date: '2019-01-05T05:00:00.000Z',
47
+ value: 65000,
48
+ },
49
+ {
50
+ group: 'Dataset 1',
51
+ date: '2019-01-08T05:00:00.000Z',
52
+ value: 10000,
53
+ },
54
+ {
55
+ group: 'Dataset 1',
56
+ date: '2019-01-13T05:00:00.000Z',
57
+ value: 49213,
58
+ },
59
+ {
60
+ group: 'Dataset 1',
61
+ date: '2019-01-17T05:00:00.000Z',
62
+ value: 51213,
63
+ },
64
+ {
65
+ group: 'Dataset 2',
66
+ date: '2019-01-01T05:00:00.000Z',
67
+ value: 20000,
68
+ },
69
+ {
70
+ group: 'Dataset 2',
71
+ date: '2019-01-05T05:00:00.000Z',
72
+ value: 25000,
73
+ },
74
+ {
75
+ group: 'Dataset 2',
76
+ date: '2019-01-08T05:00:00.000Z',
77
+ value: 60000,
78
+ },
79
+ {
80
+ group: 'Dataset 2',
81
+ date: '2019-01-13T05:00:00.000Z',
82
+ value: 30213,
83
+ },
84
+ {
85
+ group: 'Dataset 2',
86
+ date: '2019-01-17T05:00:00.000Z',
87
+ value: 55213,
88
+ },
89
+ {
90
+ group: 'Dataset 3',
91
+ date: '2019-01-01T05:00:00.000Z',
92
+ value: 30000,
93
+ },
94
+ {
95
+ group: 'Dataset 3',
96
+ date: '2019-01-05T05:00:00.000Z',
97
+ value: 20000,
98
+ },
99
+ {
100
+ group: 'Dataset 3',
101
+ date: '2019-01-08T05:00:00.000Z',
102
+ value: 40000,
103
+ },
104
+ {
105
+ group: 'Dataset 3',
106
+ date: '2019-01-13T05:00:00.000Z',
107
+ value: 60213,
108
+ },
109
+ {
110
+ group: 'Dataset 3',
111
+ date: '2019-01-17T05:00:00.000Z',
112
+ value: 25213,
113
+ },
114
+ ],
115
+ options: {
116
+ title: 'Stacked area (time series)',
117
+ axes: {
118
+ left: {
119
+ stacked: true,
120
+ scaleType: 'linear',
121
+ mapsTo: 'value',
122
+ },
123
+ bottom: {
124
+ scaleType: 'time',
125
+ mapsTo: 'date',
126
+ },
127
+ },
128
+ color: {
129
+ scale: 10,
130
+ },
131
+ curve: 'curveMonotoneX',
132
+ height: '400px',
125
133
  },
126
- color: {
127
- scale: 10,
128
- },
129
- curve: 'curveMonotoneX',
130
- height: '400px',
131
134
  },
132
135
  };
133
136
 
134
- export const StackedAreaTimeSeriesWithUnevenData = Template.bind({});
135
- StackedAreaTimeSeriesWithUnevenData.args = {
136
- isInverse: false,
137
- type: CarbonChartType.areaStacked,
138
- dataSet: [
139
- {
140
- group: 'Dataset 1',
141
- date: '2019-01-01T05:00:00.000Z',
142
- value: 10000,
143
- },
144
- {
145
- group: 'Dataset 1',
146
- date: '2019-01-08T05:00:00.000Z',
147
- value: 10000,
148
- },
149
- {
150
- group: 'Dataset 1',
151
- date: '2019-01-13T05:00:00.000Z',
152
- value: 49213,
153
- },
154
- {
155
- group: 'Dataset 1',
156
- date: '2019-01-17T05:00:00.000Z',
157
- value: 51213,
158
- },
159
- {
160
- group: 'Dataset 2',
161
- date: '2019-01-05T05:00:00.000Z',
162
- value: 25000,
163
- },
164
- {
165
- group: 'Dataset 2',
166
- date: '2019-01-08T05:00:00.000Z',
167
- value: 60000,
168
- },
169
- {
170
- group: 'Dataset 2',
171
- date: '2019-01-17T05:00:00.000Z',
172
- value: 55213,
173
- },
174
- {
175
- group: 'Dataset 3',
176
- date: '2019-01-01T05:00:00.000Z',
177
- value: 30000,
178
- },
179
- {
180
- group: 'Dataset 3',
181
- date: '2019-01-05T05:00:00.000Z',
182
- value: 20000,
183
- },
184
- {
185
- group: 'Dataset 3',
186
- date: '2019-01-08T05:00:00.000Z',
187
- value: 40000,
188
- },
189
- {
190
- group: 'Dataset 3',
191
- date: '2019-01-13T05:00:00.000Z',
192
- value: 60213,
193
- },
194
- {
195
- group: 'Dataset 3',
196
- date: '2019-01-17T05:00:00.000Z',
197
- value: 25213,
198
- },
199
- ],
200
- options: {
201
- title: 'Stacked area (time series with uneven data)',
202
- axes: {
203
- left: {
204
- stacked: true,
205
- mapsTo: 'value',
206
- },
207
- bottom: {
208
- scaleType: 'time',
209
- mapsTo: 'date',
137
+ export const StackedAreaTimeSeriesWithUnevenData = {
138
+ render: Template,
139
+
140
+ args: {
141
+ isInverse: false,
142
+ type: CarbonChartType.areaStacked,
143
+ dataSet: [
144
+ {
145
+ group: 'Dataset 1',
146
+ date: '2019-01-01T05:00:00.000Z',
147
+ value: 10000,
148
+ },
149
+ {
150
+ group: 'Dataset 1',
151
+ date: '2019-01-08T05:00:00.000Z',
152
+ value: 10000,
153
+ },
154
+ {
155
+ group: 'Dataset 1',
156
+ date: '2019-01-13T05:00:00.000Z',
157
+ value: 49213,
158
+ },
159
+ {
160
+ group: 'Dataset 1',
161
+ date: '2019-01-17T05:00:00.000Z',
162
+ value: 51213,
163
+ },
164
+ {
165
+ group: 'Dataset 2',
166
+ date: '2019-01-05T05:00:00.000Z',
167
+ value: 25000,
168
+ },
169
+ {
170
+ group: 'Dataset 2',
171
+ date: '2019-01-08T05:00:00.000Z',
172
+ value: 60000,
173
+ },
174
+ {
175
+ group: 'Dataset 2',
176
+ date: '2019-01-17T05:00:00.000Z',
177
+ value: 55213,
178
+ },
179
+ {
180
+ group: 'Dataset 3',
181
+ date: '2019-01-01T05:00:00.000Z',
182
+ value: 30000,
210
183
  },
184
+ {
185
+ group: 'Dataset 3',
186
+ date: '2019-01-05T05:00:00.000Z',
187
+ value: 20000,
188
+ },
189
+ {
190
+ group: 'Dataset 3',
191
+ date: '2019-01-08T05:00:00.000Z',
192
+ value: 40000,
193
+ },
194
+ {
195
+ group: 'Dataset 3',
196
+ date: '2019-01-13T05:00:00.000Z',
197
+ value: 60213,
198
+ },
199
+ {
200
+ group: 'Dataset 3',
201
+ date: '2019-01-17T05:00:00.000Z',
202
+ value: 25213,
203
+ },
204
+ ],
205
+ options: {
206
+ title: 'Stacked area (time series with uneven data)',
207
+ axes: {
208
+ left: {
209
+ stacked: true,
210
+ mapsTo: 'value',
211
+ },
212
+ bottom: {
213
+ scaleType: 'time',
214
+ mapsTo: 'date',
215
+ },
216
+ },
217
+ curve: 'curveMonotoneX',
218
+ height: '400px',
211
219
  },
212
- curve: 'curveMonotoneX',
213
- height: '400px',
214
220
  },
215
221
  };
216
222
 
217
- export const StackedAreaPercentage = Template.bind({});
218
- StackedAreaPercentage.args = {
219
- isInverse: false,
220
- type: CarbonChartType.areaStacked,
221
- dataSet: [
222
- {
223
- group: 'Dataset 1',
224
- date: '2019-01-01T05:00:00.000Z',
225
- value: 10000,
226
- },
227
- {
228
- group: 'Dataset 1',
229
- date: '2019-01-05T05:00:00.000Z',
230
- value: 65000,
231
- },
232
- {
233
- group: 'Dataset 1',
234
- date: '2019-01-08T05:00:00.000Z',
235
- value: 10000,
236
- },
237
- {
238
- group: 'Dataset 1',
239
- date: '2019-01-13T05:00:00.000Z',
240
- value: 49213,
241
- },
242
- {
243
- group: 'Dataset 1',
244
- date: '2019-01-17T05:00:00.000Z',
245
- value: 51213,
246
- },
247
- {
248
- group: 'Dataset 2',
249
- date: '2019-01-01T05:00:00.000Z',
250
- value: 20000,
251
- },
252
- {
253
- group: 'Dataset 2',
254
- date: '2019-01-05T05:00:00.000Z',
255
- value: 25000,
256
- },
257
- {
258
- group: 'Dataset 2',
259
- date: '2019-01-08T05:00:00.000Z',
260
- value: 60000,
261
- },
262
- {
263
- group: 'Dataset 2',
264
- date: '2019-01-13T05:00:00.000Z',
265
- value: 30213,
266
- },
267
- {
268
- group: 'Dataset 2',
269
- date: '2019-01-17T05:00:00.000Z',
270
- value: 55213,
271
- },
272
- {
273
- group: 'Dataset 3',
274
- date: '2019-01-01T05:00:00.000Z',
275
- value: 30000,
276
- },
277
- {
278
- group: 'Dataset 3',
279
- date: '2019-01-05T05:00:00.000Z',
280
- value: 20000,
281
- },
282
- {
283
- group: 'Dataset 3',
284
- date: '2019-01-08T05:00:00.000Z',
285
- value: 40000,
286
- },
287
- {
288
- group: 'Dataset 3',
289
- date: '2019-01-13T05:00:00.000Z',
290
- value: 60213,
291
- },
292
- {
293
- group: 'Dataset 3',
294
- date: '2019-01-17T05:00:00.000Z',
295
- value: 25213,
296
- },
297
- ],
298
- options: {
299
- title: 'Stacked area (percentage)',
300
- axes: {
301
- left: {
302
- stacked: true,
303
- percentage: true,
304
- ticks: {},
305
- mapsTo: 'value',
306
- },
307
- bottom: {
308
- scaleType: 'time',
309
- mapsTo: 'date',
223
+ export const StackedAreaPercentage = {
224
+ render: Template,
225
+
226
+ args: {
227
+ isInverse: false,
228
+ type: CarbonChartType.areaStacked,
229
+ dataSet: [
230
+ {
231
+ group: 'Dataset 1',
232
+ date: '2019-01-01T05:00:00.000Z',
233
+ value: 10000,
234
+ },
235
+ {
236
+ group: 'Dataset 1',
237
+ date: '2019-01-05T05:00:00.000Z',
238
+ value: 65000,
239
+ },
240
+ {
241
+ group: 'Dataset 1',
242
+ date: '2019-01-08T05:00:00.000Z',
243
+ value: 10000,
244
+ },
245
+ {
246
+ group: 'Dataset 1',
247
+ date: '2019-01-13T05:00:00.000Z',
248
+ value: 49213,
249
+ },
250
+ {
251
+ group: 'Dataset 1',
252
+ date: '2019-01-17T05:00:00.000Z',
253
+ value: 51213,
254
+ },
255
+ {
256
+ group: 'Dataset 2',
257
+ date: '2019-01-01T05:00:00.000Z',
258
+ value: 20000,
259
+ },
260
+ {
261
+ group: 'Dataset 2',
262
+ date: '2019-01-05T05:00:00.000Z',
263
+ value: 25000,
264
+ },
265
+ {
266
+ group: 'Dataset 2',
267
+ date: '2019-01-08T05:00:00.000Z',
268
+ value: 60000,
269
+ },
270
+ {
271
+ group: 'Dataset 2',
272
+ date: '2019-01-13T05:00:00.000Z',
273
+ value: 30213,
274
+ },
275
+ {
276
+ group: 'Dataset 2',
277
+ date: '2019-01-17T05:00:00.000Z',
278
+ value: 55213,
279
+ },
280
+ {
281
+ group: 'Dataset 3',
282
+ date: '2019-01-01T05:00:00.000Z',
283
+ value: 30000,
284
+ },
285
+ {
286
+ group: 'Dataset 3',
287
+ date: '2019-01-05T05:00:00.000Z',
288
+ value: 20000,
289
+ },
290
+ {
291
+ group: 'Dataset 3',
292
+ date: '2019-01-08T05:00:00.000Z',
293
+ value: 40000,
294
+ },
295
+ {
296
+ group: 'Dataset 3',
297
+ date: '2019-01-13T05:00:00.000Z',
298
+ value: 60213,
299
+ },
300
+ {
301
+ group: 'Dataset 3',
302
+ date: '2019-01-17T05:00:00.000Z',
303
+ value: 25213,
310
304
  },
305
+ ],
306
+ options: {
307
+ title: 'Stacked area (percentage)',
308
+ axes: {
309
+ left: {
310
+ stacked: true,
311
+ percentage: true,
312
+ ticks: {},
313
+ mapsTo: 'value',
314
+ },
315
+ bottom: {
316
+ scaleType: 'time',
317
+ mapsTo: 'date',
318
+ },
319
+ },
320
+ curve: 'curveMonotoneX',
321
+ height: '400px',
311
322
  },
312
- curve: 'curveMonotoneX',
313
- height: '400px',
314
323
  },
315
324
  };
316
325
 
317
- export const VerticalStackedAreatimeSeriesWithToolbarOverride = Template.bind(
318
- {}
319
- );
320
- VerticalStackedAreatimeSeriesWithToolbarOverride.args = {
321
- isInverse: false,
322
- type: CarbonChartType.areaStacked,
323
- dataSet: [
324
- {
325
- group: 'Dataset 1',
326
- date: '2019-01-01T05:00:00.000Z',
327
- value: 10000,
328
- },
329
- {
330
- group: 'Dataset 1',
331
- date: '2019-01-05T05:00:00.000Z',
332
- value: 65000,
333
- },
334
- {
335
- group: 'Dataset 1',
336
- date: '2019-01-08T05:00:00.000Z',
337
- value: 10000,
338
- },
339
- {
340
- group: 'Dataset 1',
341
- date: '2019-01-13T05:00:00.000Z',
342
- value: 49213,
343
- },
344
- {
345
- group: 'Dataset 1',
346
- date: '2019-01-17T05:00:00.000Z',
347
- value: 51213,
348
- },
349
- {
350
- group: 'Dataset 2',
351
- date: '2019-01-03T05:00:00.000Z',
352
- value: 75000,
353
- },
354
- {
355
- group: 'Dataset 2',
356
- date: '2019-01-06T05:00:00.000Z',
357
- value: 57312,
358
- },
359
- {
360
- group: 'Dataset 2',
361
- date: '2019-01-08T05:00:00.000Z',
362
- value: 21432,
363
- },
364
- {
365
- group: 'Dataset 2',
366
- date: '2019-01-15T05:00:00.000Z',
367
- value: 70323,
368
- },
369
- {
370
- group: 'Dataset 2',
371
- date: '2019-01-19T05:00:00.000Z',
372
- value: 21300,
373
- },
374
- {
375
- group: 'Dataset 3',
376
- date: '2019-01-01T05:00:00.000Z',
377
- value: 50000,
378
- },
379
- {
380
- group: 'Dataset 3',
381
- date: '2019-01-05T05:00:00.000Z',
382
- value: 15000,
383
- },
384
- {
385
- group: 'Dataset 3',
386
- date: '2019-01-08T05:00:00.000Z',
387
- value: 20000,
388
- },
389
- {
390
- group: 'Dataset 3',
391
- date: '2019-01-13T05:00:00.000Z',
392
- value: 39213,
393
- },
394
- {
395
- group: 'Dataset 3',
396
- date: '2019-01-17T05:00:00.000Z',
397
- value: 61213,
398
- },
399
- {
400
- group: 'Dataset 4',
401
- date: '2019-01-02T05:00:00.000Z',
402
- value: 10,
403
- },
404
- {
405
- group: 'Dataset 4',
406
- date: '2019-01-06T05:00:00.000Z',
407
- value: 37312,
408
- },
409
- {
410
- group: 'Dataset 4',
411
- date: '2019-01-08T05:00:00.000Z',
412
- value: 51432,
413
- },
414
- {
415
- group: 'Dataset 4',
416
- date: '2019-01-15T05:00:00.000Z',
417
- value: 40323,
418
- },
419
- {
420
- group: 'Dataset 4',
421
- date: '2019-01-19T05:00:00.000Z',
422
- value: 31300,
423
- },
424
- ],
425
- options: {
426
- title: 'Vertical stacked area (time series) w/toolbar override',
427
- axes: {
428
- left: {
429
- mapsTo: 'value',
430
- stacked: true,
431
- },
432
- bottom: {
433
- mapsTo: 'date',
434
- scaleType: 'time',
326
+ export const VerticalStackedAreatimeSeriesWithToolbarOverride = {
327
+ render: Template,
328
+
329
+ args: {
330
+ isInverse: false,
331
+ type: CarbonChartType.areaStacked,
332
+ dataSet: [
333
+ {
334
+ group: 'Dataset 1',
335
+ date: '2019-01-01T05:00:00.000Z',
336
+ value: 10000,
435
337
  },
436
- },
437
- toolbar: {
438
- enabled: true,
439
- numberOfIcons: 3,
440
- controls: [
441
- {
442
- type: 'Zoom in',
443
- },
444
- {
445
- type: 'Zoom out',
338
+ {
339
+ group: 'Dataset 1',
340
+ date: '2019-01-05T05:00:00.000Z',
341
+ value: 65000,
342
+ },
343
+ {
344
+ group: 'Dataset 1',
345
+ date: '2019-01-08T05:00:00.000Z',
346
+ value: 10000,
347
+ },
348
+ {
349
+ group: 'Dataset 1',
350
+ date: '2019-01-13T05:00:00.000Z',
351
+ value: 49213,
352
+ },
353
+ {
354
+ group: 'Dataset 1',
355
+ date: '2019-01-17T05:00:00.000Z',
356
+ value: 51213,
357
+ },
358
+ {
359
+ group: 'Dataset 2',
360
+ date: '2019-01-03T05:00:00.000Z',
361
+ value: 75000,
362
+ },
363
+ {
364
+ group: 'Dataset 2',
365
+ date: '2019-01-06T05:00:00.000Z',
366
+ value: 57312,
367
+ },
368
+ {
369
+ group: 'Dataset 2',
370
+ date: '2019-01-08T05:00:00.000Z',
371
+ value: 21432,
372
+ },
373
+ {
374
+ group: 'Dataset 2',
375
+ date: '2019-01-15T05:00:00.000Z',
376
+ value: 70323,
377
+ },
378
+ {
379
+ group: 'Dataset 2',
380
+ date: '2019-01-19T05:00:00.000Z',
381
+ value: 21300,
382
+ },
383
+ {
384
+ group: 'Dataset 3',
385
+ date: '2019-01-01T05:00:00.000Z',
386
+ value: 50000,
387
+ },
388
+ {
389
+ group: 'Dataset 3',
390
+ date: '2019-01-05T05:00:00.000Z',
391
+ value: 15000,
392
+ },
393
+ {
394
+ group: 'Dataset 3',
395
+ date: '2019-01-08T05:00:00.000Z',
396
+ value: 20000,
397
+ },
398
+ {
399
+ group: 'Dataset 3',
400
+ date: '2019-01-13T05:00:00.000Z',
401
+ value: 39213,
402
+ },
403
+ {
404
+ group: 'Dataset 3',
405
+ date: '2019-01-17T05:00:00.000Z',
406
+ value: 61213,
407
+ },
408
+ {
409
+ group: 'Dataset 4',
410
+ date: '2019-01-02T05:00:00.000Z',
411
+ value: 10,
412
+ },
413
+ {
414
+ group: 'Dataset 4',
415
+ date: '2019-01-06T05:00:00.000Z',
416
+ value: 37312,
417
+ },
418
+ {
419
+ group: 'Dataset 4',
420
+ date: '2019-01-08T05:00:00.000Z',
421
+ value: 51432,
422
+ },
423
+ {
424
+ group: 'Dataset 4',
425
+ date: '2019-01-15T05:00:00.000Z',
426
+ value: 40323,
427
+ },
428
+ {
429
+ group: 'Dataset 4',
430
+ date: '2019-01-19T05:00:00.000Z',
431
+ value: 31300,
432
+ },
433
+ ],
434
+ options: {
435
+ title: 'Vertical stacked area (time series) w/toolbar override',
436
+ axes: {
437
+ left: {
438
+ mapsTo: 'value',
439
+ stacked: true,
446
440
  },
447
- {
448
- type: 'Reset zoom',
441
+ bottom: {
442
+ mapsTo: 'date',
443
+ scaleType: 'time',
449
444
  },
450
- {
451
- type: 'Custom',
452
- text: 'Custom button',
453
- iconSVG: {
454
- content: `<path d="M23,13H18v2h5v2H19a2,2,0,0,0-2,2v2a2,2,0,0,0,2,2h6V15A2,2,0,0,0,23,13Zm0,8H19V19h4Z"/>
455
- <path d="M13,9H9a2,2,0,0,0-2,2V23H9V18h4v5h2V11A2,2,0,0,0,13,9ZM9,16V11h4v5Z"/><rect data-name="&lt;Transparent Rectangle&gt;" width="32" height="32" style="fill: none"/>`,
445
+ },
446
+ toolbar: {
447
+ enabled: true,
448
+ numberOfIcons: 3,
449
+ controls: [
450
+ {
451
+ type: 'Zoom in',
452
+ },
453
+ {
454
+ type: 'Zoom out',
455
+ },
456
+ {
457
+ type: 'Reset zoom',
456
458
  },
459
+ {
460
+ type: 'Custom',
461
+ text: 'Custom button',
462
+ iconSVG: {
463
+ content: `<path d="M23,13H18v2h5v2H19a2,2,0,0,0-2,2v2a2,2,0,0,0,2,2h6V15A2,2,0,0,0,23,13Zm0,8H19V19h4Z"/>
464
+ <path d="M13,9H9a2,2,0,0,0-2,2V23H9V18h4v5h2V11A2,2,0,0,0,13,9ZM9,16V11h4v5Z"/><rect data-name="&lt;Transparent Rectangle&gt;" width="32" height="32" style="fill: none"/>`,
465
+ },
466
+ },
467
+ ],
468
+ },
469
+ zoomBar: {
470
+ top: {
471
+ enabled: true,
457
472
  },
458
- ],
459
- },
460
- zoomBar: {
461
- top: {
462
- enabled: true,
463
473
  },
474
+ height: '400px',
464
475
  },
465
- height: '400px',
466
476
  },
467
477
  };