@react-magma/charts 10.0.0 → 10.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 (43) hide show
  1. package/dist/charts +13 -13
  2. package/dist/charts.js +1 -1
  3. package/dist/charts.js.map +1 -1
  4. package/dist/charts.map +1 -1
  5. package/dist/charts.modern.module.js +1 -1
  6. package/dist/charts.modern.module.js.map +1 -1
  7. package/dist/charts.umd.js +1 -1
  8. package/dist/charts.umd.js.map +1 -1
  9. package/dist/components/CarbonChart/CarbonChart.d.ts +10 -1
  10. package/dist/components/CarbonChart/CarbonChartArea.stories.d.ts +3 -0
  11. package/dist/components/CarbonChart/CarbonChartAreaStacked.stories.d.ts +1 -0
  12. package/dist/components/CarbonChart/CarbonChartBarGrouped.stories.d.ts +1 -0
  13. package/dist/components/CarbonChart/CarbonChartBarStacked.stories.d.ts +1 -0
  14. package/dist/components/CarbonChart/CarbonChartBoxplot.stories.d.ts +4 -0
  15. package/dist/components/CarbonChart/CarbonChartBubble.stories.d.ts +4 -0
  16. package/dist/components/CarbonChart/CarbonChartBullet.stories.d.ts +4 -0
  17. package/dist/components/CarbonChart/CarbonChartCombo.stories.d.ts +4 -0
  18. package/dist/components/CarbonChart/CarbonChartGauge.stories.d.ts +4 -0
  19. package/dist/components/CarbonChart/CarbonChartHistogram.stories.d.ts +4 -0
  20. package/dist/components/CarbonChart/CarbonChartLine.stories.d.ts +11 -0
  21. package/dist/components/CarbonChart/CarbonChartMeter.stories.d.ts +4 -0
  22. package/dist/components/CarbonChart/CarbonChartRadar.stories.d.ts +4 -0
  23. package/dist/components/CarbonChart/CarbonChartScatter.stories.d.ts +4 -0
  24. package/dist/components/CarbonChart/CarbonChartSparkline.stories.d.ts +4 -0
  25. package/dist/components/CarbonChart/CarbonChartStep.stories.d.ts +4 -0
  26. package/package.json +3 -3
  27. package/src/components/CarbonChart/CarbonChart.tsx +28 -1
  28. package/src/components/CarbonChart/CarbonChartArea.stories.tsx +272 -0
  29. package/src/components/CarbonChart/CarbonChartAreaStacked.stories.tsx +152 -0
  30. package/src/components/CarbonChart/CarbonChartBarGrouped.stories.tsx +124 -0
  31. package/src/components/CarbonChart/CarbonChartBarStacked.stories.tsx +125 -0
  32. package/src/components/CarbonChart/CarbonChartBoxplot.stories.tsx +274 -0
  33. package/src/components/CarbonChart/CarbonChartBubble.stories.tsx +606 -0
  34. package/src/components/CarbonChart/CarbonChartBullet.stories.tsx +89 -0
  35. package/src/components/CarbonChart/CarbonChartCombo.stories.tsx +1418 -0
  36. package/src/components/CarbonChart/CarbonChartGauge.stories.tsx +80 -0
  37. package/src/components/CarbonChart/CarbonChartHistogram.stories.tsx +767 -0
  38. package/src/components/CarbonChart/CarbonChartLine.stories.tsx +1050 -0
  39. package/src/components/CarbonChart/CarbonChartMeter.stories.tsx +216 -0
  40. package/src/components/CarbonChart/CarbonChartRadar.stories.tsx +479 -0
  41. package/src/components/CarbonChart/CarbonChartScatter.stories.tsx +467 -0
  42. package/src/components/CarbonChart/CarbonChartSparkline.stories.tsx +222 -0
  43. package/src/components/CarbonChart/CarbonChartStep.stories.tsx +173 -0
package/src/components/CarbonChart/CarbonChartBarGrouped.stories.tsx CHANGED
@@ -28,6 +28,130 @@ const Template: Story<CarbonChartProps> = args => (
28
28
  );
29
29
 
30
30
  //Grouped//
31
+ export const PreSelectedgroupsGroupedBar = Template.bind({});
32
+ PreSelectedgroupsGroupedBar.args = {
33
+ isInverse: false,
34
+ type: CarbonChartType.barGrouped,
35
+ dataSet: [
36
+ {
37
+ group: 'Dataset 1',
38
+ key: 'Qty',
39
+ value: 65000,
40
+ },
41
+ {
42
+ group: 'Dataset 1',
43
+ key: 'More',
44
+ value: -29123,
45
+ },
46
+ {
47
+ group: 'Dataset 1',
48
+ key: 'Sold',
49
+ value: -35213,
50
+ },
51
+ {
52
+ group: 'Dataset 1',
53
+ key: 'Restocking',
54
+ value: 51213,
55
+ },
56
+ {
57
+ group: 'Dataset 1',
58
+ key: 'Misc',
59
+ value: 16932,
60
+ },
61
+ {
62
+ group: 'Dataset 2',
63
+ key: 'Qty',
64
+ value: 32432,
65
+ },
66
+ {
67
+ group: 'Dataset 2',
68
+ key: 'More',
69
+ value: -21312,
70
+ },
71
+ {
72
+ group: 'Dataset 2',
73
+ key: 'Sold',
74
+ value: -56456,
75
+ },
76
+ {
77
+ group: 'Dataset 2',
78
+ key: 'Restocking',
79
+ value: -21312,
80
+ },
81
+ {
82
+ group: 'Dataset 2',
83
+ key: 'Misc',
84
+ value: 34234,
85
+ },
86
+ {
87
+ group: 'Dataset 3',
88
+ key: 'Qty',
89
+ value: -12312,
90
+ },
91
+ {
92
+ group: 'Dataset 3',
93
+ key: 'More',
94
+ value: 23232,
95
+ },
96
+ {
97
+ group: 'Dataset 3',
98
+ key: 'Sold',
99
+ value: 34232,
100
+ },
101
+ {
102
+ group: 'Dataset 3',
103
+ key: 'Restocking',
104
+ value: -12312,
105
+ },
106
+ {
107
+ group: 'Dataset 3',
108
+ key: 'Misc',
109
+ value: -34234,
110
+ },
111
+ {
112
+ group: 'Dataset 4',
113
+ key: 'Qty',
114
+ value: -32423,
115
+ },
116
+ {
117
+ group: 'Dataset 4',
118
+ key: 'More',
119
+ value: 21313,
120
+ },
121
+ {
122
+ group: 'Dataset 4',
123
+ key: 'Sold',
124
+ value: 64353,
125
+ },
126
+ {
127
+ group: 'Dataset 4',
128
+ key: 'Restocking',
129
+ value: 24134,
130
+ },
131
+ {
132
+ group: 'Dataset 4',
133
+ key: 'Misc',
134
+ value: 24134,
135
+ },
136
+ ],
137
+ options: {
138
+ title: 'Pre-selected groups (grouped bar)',
139
+ data: {
140
+ selectedGroups: ['Dataset 1', 'Dataset 3'],
141
+ },
142
+ axes: {
143
+ left: {
144
+ mapsTo: 'value',
145
+ },
146
+ bottom: {
147
+ scaleType: 'labels',
148
+ mapsTo: 'key',
149
+ },
150
+ },
151
+ height: '400px',
152
+ },
153
+ };
154
+
31
155
  export const VerticalGroupedBarDiscrete = Template.bind({});
32
156
  VerticalGroupedBarDiscrete.args = {
33
157
  isInverse: false,
package/src/components/CarbonChart/CarbonChartBarStacked.stories.tsx CHANGED
@@ -831,3 +831,128 @@ HorizontalStackedBarSkeleton.args = {
831
831
  height: '400px',
832
832
  },
833
833
  };
834
+
835
+ export const CustomTicksStackedBar = Template.bind({});
836
+ CustomTicksStackedBar.args = {
837
+ isInverse: false,
838
+ type: CarbonChartType.barStacked,
839
+ dataSet: [
840
+ {
841
+ group: 'Dataset 1',
842
+ date: '2023-01-01',
843
+ value: 10000,
844
+ },
845
+ {
846
+ group: 'Dataset 1',
847
+ date: '2023-01-05',
848
+ value: 65000,
849
+ },
850
+ {
851
+ group: 'Dataset 1',
852
+ date: '2023-01-08',
853
+ value: 10000,
854
+ },
855
+ {
856
+ group: 'Dataset 1',
857
+ date: '2023-01-13',
858
+ value: 49213,
859
+ },
860
+ {
861
+ group: 'Dataset 1',
862
+ date: '2023-01-17',
863
+ value: 51213,
864
+ },
865
+ {
866
+ group: 'Dataset 2',
867
+ date: '2023-01-03',
868
+ value: 75000,
869
+ },
870
+ {
871
+ group: 'Dataset 2',
872
+ date: '2023-01-06',
873
+ value: 57312,
874
+ },
875
+ {
876
+ group: 'Dataset 2',
877
+ date: '2023-01-08',
878
+ value: 21432,
879
+ },
880
+ {
881
+ group: 'Dataset 2',
882
+ date: '2023-01-15',
883
+ value: 70323,
884
+ },
885
+ {
886
+ group: 'Dataset 2',
887
+ date: '2023-01-19',
888
+ value: 21300,
889
+ },
890
+ {
891
+ group: 'Dataset 3',
892
+ date: '2023-01-01',
893
+ value: 50000,
894
+ },
895
+ {
896
+ group: 'Dataset 3',
897
+ date: '2023-01-05',
898
+ value: 15000,
899
+ },
900
+ {
901
+ group: 'Dataset 3',
902
+ date: '2023-01-08',
903
+ value: 20000,
904
+ },
905
+ {
906
+ group: 'Dataset 3',
907
+ date: '2023-01-13',
908
+ value: 39213,
909
+ },
910
+ {
911
+ group: 'Dataset 3',
912
+ date: '2023-01-17',
913
+ value: 61213,
914
+ },
915
+ {
916
+ group: 'Dataset 4',
917
+ date: '2023-01-02',
918
+ value: 10,
919
+ },
920
+ {
921
+ group: 'Dataset 4',
922
+ date: '2023-01-06',
923
+ value: 37312,
924
+ },
925
+ {
926
+ group: 'Dataset 4',
927
+ date: '2023-01-08',
928
+ value: 51432,
929
+ },
930
+ {
931
+ group: 'Dataset 4',
932
+ date: '2023-01-15',
933
+ value: 40323,
934
+ },
935
+ {
936
+ group: 'Dataset 4',
937
+ date: '2023-01-19',
938
+ value: 31300,
939
+ },
940
+ ],
941
+ options: {
942
+ title: 'Custom ticks (stacked bar)',
943
+ axes: {
944
+ left: {
945
+ mapsTo: 'value',
946
+ stacked: true,
947
+ },
948
+ bottom: {
949
+ mapsTo: 'date',
950
+ scaleType: 'time',
951
+ ticks: {
952
+ values: [new Date(2023, 0, 17, 0, 0, 0)],
953
+ },
954
+ },
955
+ },
956
+ height: '400px',
957
+ },
958
+ };
package/src/components/CarbonChart/CarbonChartBoxplot.stories.tsx ADDED
@@ -0,0 +1,274 @@
1
+ import React from 'react';
2
+ import { Story, Meta } from '@storybook/react/types-6-0';
3
+ import { CarbonChart, CarbonChartProps, CarbonChartType } from '.';
4
+ import { Card } from 'react-magma-dom';
5
+
6
+ export default {
7
+ component: CarbonChart,
8
+ title: 'CarbonChart/Boxplot',
9
+ argTypes: {
10
+ isInverse: {
11
+ control: {
12
+ type: 'boolean',
13
+ },
14
+ },
15
+ type: {
16
+ control: {
17
+ type: 'select',
18
+ options: CarbonChartType,
19
+ },
20
+ },
21
+ },
22
+ } as Meta;
23
+
24
+ const Template: Story<CarbonChartProps> = args => (
25
+ <Card isInverse={args.isInverse} style={{ padding: '12px' }}>
26
+ <CarbonChart {...args} />
27
+ </Card>
28
+ );
29
+
30
+ export const HorizontalBoxplot = Template.bind({});
31
+ HorizontalBoxplot.args = {
32
+ isInverse: false,
33
+ type: CarbonChartType.boxplot,
34
+ dataSet: [
35
+ {
36
+ group: 'Q1',
37
+ key: 'Monday',
38
+ value: 65000,
39
+ },
40
+ {
41
+ group: 'Q1',
42
+ key: 'Tuesday',
43
+ value: 29123,
44
+ },
45
+ {
46
+ group: 'Q1',
47
+ key: 'Wednesday',
48
+ value: 35213,
49
+ },
50
+ {
51
+ group: 'Q1',
52
+ key: 'Thursday',
53
+ value: 51213,
54
+ },
55
+ {
56
+ group: 'Q1',
57
+ key: 'Friday',
58
+ value: 16932,
59
+ },
60
+ {
61
+ group: 'Q2',
62
+ key: 'Monday',
63
+ value: 32432,
64
+ },
65
+ {
66
+ group: 'Q2',
67
+ key: 'Tuesday',
68
+ value: 14312,
69
+ },
70
+ {
71
+ group: 'Q2',
72
+ key: 'Wednesday',
73
+ value: 66456,
74
+ },
75
+ {
76
+ group: 'Q2',
77
+ key: 'Thursday',
78
+ value: 21312,
79
+ },
80
+ {
81
+ group: 'Q2',
82
+ key: 'Friday',
83
+ value: 37234,
84
+ },
85
+ {
86
+ group: 'Q3',
87
+ key: 'Monday',
88
+ value: 5312,
89
+ },
90
+ {
91
+ group: 'Q3',
92
+ key: 'Tuesday',
93
+ value: 23232,
94
+ },
95
+ {
96
+ group: 'Q3',
97
+ key: 'Wednesday',
98
+ value: 34232,
99
+ },
100
+ {
101
+ group: 'Q3',
102
+ key: 'Thursday',
103
+ value: 12312,
104
+ },
105
+ {
106
+ group: 'Q3',
107
+ key: 'Friday',
108
+ value: 44234,
109
+ },
110
+ {
111
+ group: 'Q4',
112
+ key: 'Monday',
113
+ value: 32423,
114
+ },
115
+ {
116
+ group: 'Q4',
117
+ key: 'Tuesday',
118
+ value: 21313,
119
+ },
120
+ {
121
+ group: 'Q4',
122
+ key: 'Wednesday',
123
+ value: 64353,
124
+ },
125
+ {
126
+ group: 'Q4',
127
+ key: 'Thursday',
128
+ value: 24134,
129
+ },
130
+ {
131
+ group: 'Q4',
132
+ key: 'Friday',
133
+ value: 45134,
134
+ },
135
+ ],
136
+ options: {
137
+ title: 'Horizontal box plot',
138
+ axes: {
139
+ bottom: {
140
+ mapsTo: 'value',
141
+ },
142
+ left: {
143
+ scaleType: 'labels',
144
+ mapsTo: 'group',
145
+ },
146
+ },
147
+ height: '400px',
148
+ },
149
+ };
150
+
151
+
152
+ // Uncomment when adding new charts. Issues: #1054, #1055, #1056
153
+
154
+ // export const VerticalBoxplot = Template.bind({});
155
+ // VerticalBoxplot.args = {
156
+ // isInverse: false,
157
+ // type: CarbonChartType.boxplot,
158
+ // dataSet: [
159
+ // {
160
+ // group: 'Q1',
161
+ // key: 'Monday',
162
+ // value: 65000,
163
+ // },
164
+ // {
165
+ // group: 'Q1',
166
+ // key: 'Tuesday',
167
+ // value: 29123,
168
+ // },
169
+ // {
170
+ // group: 'Q1',
171
+ // key: 'Wednesday',
172
+ // value: 35213,
173
+ // },
174
+ // {
175
+ // group: 'Q1',
176
+ // key: 'Thursday',
177
+ // value: 51213,
178
+ // },
179
+ // {
180
+ // group: 'Q1',
181
+ // key: 'Friday',
182
+ // value: 16932,
183
+ // },
184
+ // {
185
+ // group: 'Q2',
186
+ // key: 'Monday',
187
+ // value: 32432,
188
+ // },
189
+ // {
190
+ // group: 'Q2',
191
+ // key: 'Tuesday',
192
+ // value: 14312,
193
+ // },
194
+ // {
195
+ // group: 'Q2',
196
+ // key: 'Wednesday',
197
+ // value: 66456,
198
+ // },
199
+ // {
200
+ // group: 'Q2',
201
+ // key: 'Thursday',
202
+ // value: 21312,
203
+ // },
204
+ // {
205
+ // group: 'Q2',
206
+ // key: 'Friday',
207
+ // value: 37234,
208
+ // },
209
+ // {
210
+ // group: 'Q3',
211
+ // key: 'Monday',
212
+ // value: 5312,
213
+ // },
214
+ // {
215
+ // group: 'Q3',
216
+ // key: 'Tuesday',
217
+ // value: 23232,
218
+ // },
219
+ // {
220
+ // group: 'Q3',
221
+ // key: 'Wednesday',
222
+ // value: 34232,
223
+ // },
224
+ // {
225
+ // group: 'Q3',
226
+ // key: 'Thursday',
227
+ // value: 12312,
228
+ // },
229
+ // {
230
+ // group: 'Q3',
231
+ // key: 'Friday',
232
+ // value: 44234,
233
+ // },
234
+ // {
235
+ // group: 'Q4',
236
+ // key: 'Monday',
237
+ // value: 32423,
238
+ // },
239
+ // {
240
+ // group: 'Q4',
241
+ // key: 'Tuesday',
242
+ // value: 21313,
243
+ // },
244
+ // {
245
+ // group: 'Q4',
246
+ // key: 'Wednesday',
247
+ // value: 64353,
248
+ // },
249
+ // {
250
+ // group: 'Q4',
251
+ // key: 'Thursday',
252
+ // value: 24134,
253
+ // },
254
+ // {
255
+ // group: 'Q4',
256
+ // key: 'Friday',
257
+ // value: 45134,
258
+ // },
259
+ // ],
260
+ // options: {
261
+ // title: 'Vertical box plot',
262
+ // axes: {
263
+ // left: {
264
+ // mapsTo: 'value',
265
+ // },
266
+ // bottom: {
267
+ // scaleType: 'labels',
268
+ // mapsTo: 'group',
269
+ // },
270
+ // },
271
+ // height: '400px',
272
+ // },
273
+ // };
274
+