@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/CarbonChartBoxplot.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,250 +23,256 @@ 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 HorizontalBoxplot = Template.bind({});
33
- HorizontalBoxplot.args = {
34
- isInverse: false,
35
- type: CarbonChartType.boxplot,
36
- dataSet: [
37
- {
38
- group: 'Q1',
39
- key: 'Monday',
40
- value: 65000,
41
- },
42
- {
43
- group: 'Q1',
44
- key: 'Tuesday',
45
- value: 29123,
46
- },
47
- {
48
- group: 'Q1',
49
- key: 'Wednesday',
50
- value: 35213,
51
- },
52
- {
53
- group: 'Q1',
54
- key: 'Thursday',
55
- value: 51213,
56
- },
57
- {
58
- group: 'Q1',
59
- key: 'Friday',
60
- value: 16932,
61
- },
62
- {
63
- group: 'Q2',
64
- key: 'Monday',
65
- value: 32432,
66
- },
67
- {
68
- group: 'Q2',
69
- key: 'Tuesday',
70
- value: 14312,
71
- },
72
- {
73
- group: 'Q2',
74
- key: 'Wednesday',
75
- value: 66456,
76
- },
77
- {
78
- group: 'Q2',
79
- key: 'Thursday',
80
- value: 21312,
81
- },
82
- {
83
- group: 'Q2',
84
- key: 'Friday',
85
- value: 37234,
86
- },
87
- {
88
- group: 'Q3',
89
- key: 'Monday',
90
- value: 5312,
91
- },
92
- {
93
- group: 'Q3',
94
- key: 'Tuesday',
95
- value: 23232,
96
- },
97
- {
98
- group: 'Q3',
99
- key: 'Wednesday',
100
- value: 34232,
101
- },
102
- {
103
- group: 'Q3',
104
- key: 'Thursday',
105
- value: 12312,
106
- },
107
- {
108
- group: 'Q3',
109
- key: 'Friday',
110
- value: 44234,
111
- },
112
- {
113
- group: 'Q4',
114
- key: 'Monday',
115
- value: 32423,
116
- },
117
- {
118
- group: 'Q4',
119
- key: 'Tuesday',
120
- value: 21313,
121
- },
122
- {
123
- group: 'Q4',
124
- key: 'Wednesday',
125
- value: 64353,
126
- },
127
- {
128
- group: 'Q4',
129
- key: 'Thursday',
130
- value: 24134,
131
- },
132
- {
133
- group: 'Q4',
134
- key: 'Friday',
135
- value: 45134,
136
- },
137
- ],
138
- options: {
139
- title: 'Horizontal box plot',
140
- axes: {
141
- bottom: {
142
- mapsTo: 'value',
32
+ export const HorizontalBoxplot = {
33
+ render: Template,
34
+
35
+ args: {
36
+ isInverse: false,
37
+ type: CarbonChartType.boxplot,
38
+ dataSet: [
39
+ {
40
+ group: 'Q1',
41
+ key: 'Monday',
42
+ value: 65000,
43
+ },
44
+ {
45
+ group: 'Q1',
46
+ key: 'Tuesday',
47
+ value: 29123,
48
+ },
49
+ {
50
+ group: 'Q1',
51
+ key: 'Wednesday',
52
+ value: 35213,
53
+ },
54
+ {
55
+ group: 'Q1',
56
+ key: 'Thursday',
57
+ value: 51213,
58
+ },
59
+ {
60
+ group: 'Q1',
61
+ key: 'Friday',
62
+ value: 16932,
63
+ },
64
+ {
65
+ group: 'Q2',
66
+ key: 'Monday',
67
+ value: 32432,
68
+ },
69
+ {
70
+ group: 'Q2',
71
+ key: 'Tuesday',
72
+ value: 14312,
73
+ },
74
+ {
75
+ group: 'Q2',
76
+ key: 'Wednesday',
77
+ value: 66456,
78
+ },
79
+ {
80
+ group: 'Q2',
81
+ key: 'Thursday',
82
+ value: 21312,
83
+ },
84
+ {
85
+ group: 'Q2',
86
+ key: 'Friday',
87
+ value: 37234,
88
+ },
89
+ {
90
+ group: 'Q3',
91
+ key: 'Monday',
92
+ value: 5312,
93
+ },
94
+ {
95
+ group: 'Q3',
96
+ key: 'Tuesday',
97
+ value: 23232,
98
+ },
99
+ {
100
+ group: 'Q3',
101
+ key: 'Wednesday',
102
+ value: 34232,
103
+ },
104
+ {
105
+ group: 'Q3',
106
+ key: 'Thursday',
107
+ value: 12312,
108
+ },
109
+ {
110
+ group: 'Q3',
111
+ key: 'Friday',
112
+ value: 44234,
113
+ },
114
+ {
115
+ group: 'Q4',
116
+ key: 'Monday',
117
+ value: 32423,
118
+ },
119
+ {
120
+ group: 'Q4',
121
+ key: 'Tuesday',
122
+ value: 21313,
123
+ },
124
+ {
125
+ group: 'Q4',
126
+ key: 'Wednesday',
127
+ value: 64353,
128
+ },
129
+ {
130
+ group: 'Q4',
131
+ key: 'Thursday',
132
+ value: 24134,
133
+ },
134
+ {
135
+ group: 'Q4',
136
+ key: 'Friday',
137
+ value: 45134,
143
138
  },
144
- left: {
145
- scaleType: 'labels',
146
- mapsTo: 'group',
139
+ ],
140
+ options: {
141
+ title: 'Horizontal box plot',
142
+ axes: {
143
+ bottom: {
144
+ mapsTo: 'value',
145
+ },
146
+ left: {
147
+ scaleType: 'labels',
148
+ mapsTo: 'group',
149
+ },
147
150
  },
151
+ height: '400px',
148
152
  },
149
- height: '400px',
150
153
  },
151
154
  };
152
155
 
153
- export const VerticalBoxplot = Template.bind({});
154
- VerticalBoxplot.args = {
155
- isInverse: false,
156
- type: CarbonChartType.boxplot,
157
- dataSet: [
158
- {
159
- group: 'Q1',
160
- key: 'Monday',
161
- value: 65000,
162
- },
163
- {
164
- group: 'Q1',
165
- key: 'Tuesday',
166
- value: 29123,
167
- },
168
- {
169
- group: 'Q1',
170
- key: 'Wednesday',
171
- value: 35213,
172
- },
173
- {
174
- group: 'Q1',
175
- key: 'Thursday',
176
- value: 51213,
177
- },
178
- {
179
- group: 'Q1',
180
- key: 'Friday',
181
- value: 16932,
182
- },
183
- {
184
- group: 'Q2',
185
- key: 'Monday',
186
- value: 32432,
187
- },
188
- {
189
- group: 'Q2',
190
- key: 'Tuesday',
191
- value: 14312,
192
- },
193
- {
194
- group: 'Q2',
195
- key: 'Wednesday',
196
- value: 66456,
197
- },
198
- {
199
- group: 'Q2',
200
- key: 'Thursday',
201
- value: 21312,
202
- },
203
- {
204
- group: 'Q2',
205
- key: 'Friday',
206
- value: 37234,
207
- },
208
- {
209
- group: 'Q3',
210
- key: 'Monday',
211
- value: 5312,
212
- },
213
- {
214
- group: 'Q3',
215
- key: 'Tuesday',
216
- value: 23232,
217
- },
218
- {
219
- group: 'Q3',
220
- key: 'Wednesday',
221
- value: 34232,
222
- },
223
- {
224
- group: 'Q3',
225
- key: 'Thursday',
226
- value: 12312,
227
- },
228
- {
229
- group: 'Q3',
230
- key: 'Friday',
231
- value: 44234,
232
- },
233
- {
234
- group: 'Q4',
235
- key: 'Monday',
236
- value: 32423,
237
- },
238
- {
239
- group: 'Q4',
240
- key: 'Tuesday',
241
- value: 21313,
242
- },
243
- {
244
- group: 'Q4',
245
- key: 'Wednesday',
246
- value: 64353,
247
- },
248
- {
249
- group: 'Q4',
250
- key: 'Thursday',
251
- value: 24134,
252
- },
253
- {
254
- group: 'Q4',
255
- key: 'Friday',
256
- value: 45134,
257
- },
258
- ],
259
- options: {
260
- title: 'Vertical box plot',
261
- axes: {
262
- left: {
263
- mapsTo: 'value',
156
+ export const VerticalBoxplot = {
157
+ render: Template,
158
+
159
+ args: {
160
+ isInverse: false,
161
+ type: CarbonChartType.boxplot,
162
+ dataSet: [
163
+ {
164
+ group: 'Q1',
165
+ key: 'Monday',
166
+ value: 65000,
167
+ },
168
+ {
169
+ group: 'Q1',
170
+ key: 'Tuesday',
171
+ value: 29123,
172
+ },
173
+ {
174
+ group: 'Q1',
175
+ key: 'Wednesday',
176
+ value: 35213,
177
+ },
178
+ {
179
+ group: 'Q1',
180
+ key: 'Thursday',
181
+ value: 51213,
182
+ },
183
+ {
184
+ group: 'Q1',
185
+ key: 'Friday',
186
+ value: 16932,
187
+ },
188
+ {
189
+ group: 'Q2',
190
+ key: 'Monday',
191
+ value: 32432,
192
+ },
193
+ {
194
+ group: 'Q2',
195
+ key: 'Tuesday',
196
+ value: 14312,
197
+ },
198
+ {
199
+ group: 'Q2',
200
+ key: 'Wednesday',
201
+ value: 66456,
202
+ },
203
+ {
204
+ group: 'Q2',
205
+ key: 'Thursday',
206
+ value: 21312,
207
+ },
208
+ {
209
+ group: 'Q2',
210
+ key: 'Friday',
211
+ value: 37234,
212
+ },
213
+ {
214
+ group: 'Q3',
215
+ key: 'Monday',
216
+ value: 5312,
217
+ },
218
+ {
219
+ group: 'Q3',
220
+ key: 'Tuesday',
221
+ value: 23232,
222
+ },
223
+ {
224
+ group: 'Q3',
225
+ key: 'Wednesday',
226
+ value: 34232,
227
+ },
228
+ {
229
+ group: 'Q3',
230
+ key: 'Thursday',
231
+ value: 12312,
232
+ },
233
+ {
234
+ group: 'Q3',
235
+ key: 'Friday',
236
+ value: 44234,
237
+ },
238
+ {
239
+ group: 'Q4',
240
+ key: 'Monday',
241
+ value: 32423,
242
+ },
243
+ {
244
+ group: 'Q4',
245
+ key: 'Tuesday',
246
+ value: 21313,
247
+ },
248
+ {
249
+ group: 'Q4',
250
+ key: 'Wednesday',
251
+ value: 64353,
252
+ },
253
+ {
254
+ group: 'Q4',
255
+ key: 'Thursday',
256
+ value: 24134,
257
+ },
258
+ {
259
+ group: 'Q4',
260
+ key: 'Friday',
261
+ value: 45134,
264
262
  },
265
- bottom: {
266
- scaleType: 'labels',
267
- mapsTo: 'group',
263
+ ],
264
+ options: {
265
+ title: 'Vertical box plot',
266
+ axes: {
267
+ left: {
268
+ mapsTo: 'value',
269
+ },
270
+ bottom: {
271
+ scaleType: 'labels',
272
+ mapsTo: 'group',
273
+ },
268
274
  },
275
+ height: '400px',
269
276
  },
270
- height: '400px',
271
277
  },
272
278
  };