@react-magma/charts 12.0.0-next.1 → 12.0.0-next.3

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 (28) hide show
  1. package/dist/charts +5 -2
  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/CarbonChartArea.stories.d.ts +1 -0
  10. package/dist/components/CarbonChart/CarbonChartBoxplot.stories.d.ts +1 -0
  11. package/dist/components/CarbonChart/CarbonChartBubble.stories.d.ts +5 -0
  12. package/dist/components/CarbonChart/CarbonChartCombo.stories.d.ts +11 -0
  13. package/dist/components/CarbonChart/CarbonChartGauge.stories.d.ts +1 -0
  14. package/dist/components/CarbonChart/CarbonChartHistogram.stories.d.ts +2 -0
  15. package/dist/components/CarbonChart/CarbonChartMeter.stories.d.ts +4 -0
  16. package/dist/components/CarbonChart/CarbonChartRadar.stories.d.ts +3 -0
  17. package/dist/components/CarbonChart/CarbonChartScatter.stories.d.ts +5 -0
  18. package/package.json +5 -5
  19. package/src/components/CarbonChart/CarbonChart.tsx +26 -4
  20. package/src/components/CarbonChart/CarbonChartArea.stories.tsx +101 -0
  21. package/src/components/CarbonChart/CarbonChartBoxplot.stories.tsx +120 -122
  22. package/src/components/CarbonChart/CarbonChartBubble.stories.tsx +475 -477
  23. package/src/components/CarbonChart/CarbonChartCombo.stories.tsx +1282 -1284
  24. package/src/components/CarbonChart/CarbonChartGauge.stories.tsx +24 -26
  25. package/src/components/CarbonChart/CarbonChartHistogram.stories.tsx +593 -595
  26. package/src/components/CarbonChart/CarbonChartMeter.stories.tsx +147 -149
  27. package/src/components/CarbonChart/CarbonChartRadar.stories.tsx +375 -377
  28. package/src/components/CarbonChart/CarbonChartScatter.stories.tsx +363 -365
package/src/components/CarbonChart/CarbonChartMeter.stories.tsx CHANGED
@@ -64,155 +64,153 @@ MeterChartWithStatuses.args = {
64
64
  },
65
65
  };
66
66
 
67
- // Uncomment when adding new charts. Issues: #1054, #1055, #1056
68
-
69
- // export const MeterChartNoStatus = Template.bind({});
70
- // MeterChartNoStatus.args = {
71
- // isInverse: false,
72
- // type: CarbonChartType.meter,
73
- // dataSet: [
74
- // {
75
- // group: 'Dataset 1',
76
- // value: 56,
77
- // },
78
- // ],
79
- // options: {
80
- // title: 'Meter Chart - no status',
81
- // meter: {
82
- // peak: 70,
83
- // },
84
- // height: '100px',
85
- // },
86
- // };
67
+ export const MeterChartNoStatus = Template.bind({});
68
+ MeterChartNoStatus.args = {
69
+ isInverse: false,
70
+ type: CarbonChartType.meter,
71
+ dataSet: [
72
+ {
73
+ group: 'Dataset 1',
74
+ value: 56,
75
+ },
76
+ ],
77
+ options: {
78
+ title: 'Meter Chart - no status',
79
+ meter: {
80
+ peak: 70,
81
+ },
82
+ height: '100px',
83
+ },
84
+ };
87
85
 
88
- // export const ProportionalMeterChart = Template.bind({});
89
- // ProportionalMeterChart.args = {
90
- // isInverse: false,
91
- // type: CarbonChartType.meter,
92
- // dataSet: [
93
- // {
94
- // group: 'emails',
95
- // value: 202,
96
- // },
97
- // {
98
- // group: 'photos',
99
- // value: 654,
100
- // },
101
- // {
102
- // group: 'text messages',
103
- // value: 723,
104
- // },
105
- // {
106
- // group: 'other',
107
- // value: 120,
108
- // },
109
- // ],
110
- // options: {
111
- // title: 'Proportional Meter Chart',
112
- // height: '130px',
113
- // meter: {
114
- // proportional: {
115
- // total: 2000,
116
- // unit: 'GB',
117
- // },
118
- // },
119
- // color: {
120
- // pairing: {
121
- // option: 2,
122
- // },
123
- // },
124
- // },
125
- // };
86
+ export const ProportionalMeterChart = Template.bind({});
87
+ ProportionalMeterChart.args = {
88
+ isInverse: false,
89
+ type: CarbonChartType.meter,
90
+ dataSet: [
91
+ {
92
+ group: 'emails',
93
+ value: 202,
94
+ },
95
+ {
96
+ group: 'photos',
97
+ value: 654,
98
+ },
99
+ {
100
+ group: 'text messages',
101
+ value: 723,
102
+ },
103
+ {
104
+ group: 'other',
105
+ value: 120,
106
+ },
107
+ ],
108
+ options: {
109
+ title: 'Proportional Meter Chart',
110
+ height: '130px',
111
+ meter: {
112
+ proportional: {
113
+ total: 2000,
114
+ unit: 'GB',
115
+ },
116
+ },
117
+ color: {
118
+ pairing: {
119
+ option: 2,
120
+ },
121
+ },
122
+ },
123
+ };
126
124
 
127
- // export const ProportionalMeterChartPeakAndStatuses = Template.bind({});
128
- // ProportionalMeterChartPeakAndStatuses.args = {
129
- // isInverse: false,
130
- // type: CarbonChartType.meter,
131
- // dataSet: [
132
- // {
133
- // group: 'emails',
134
- // value: 202,
135
- // },
136
- // {
137
- // group: 'photos',
138
- // value: 654,
139
- // },
140
- // {
141
- // group: 'text messages',
142
- // value: 723,
143
- // },
144
- // {
145
- // group: 'other',
146
- // value: 120,
147
- // },
148
- // ],
149
- // options: {
150
- // title: 'Proportional Meter Chart - peak and statuses',
151
- // height: '130px',
152
- // meter: {
153
- // peak: 1800,
154
- // proportional: {
155
- // total: 2000,
156
- // unit: 'GB',
157
- // },
158
- // status: {
159
- // ranges: [
160
- // {
161
- // range: [0, 800],
162
- // status: 'success',
163
- // },
164
- // {
165
- // range: [800, 1800],
166
- // status: 'warning',
167
- // },
168
- // {
169
- // range: [1800, 2000],
170
- // status: 'danger',
171
- // },
172
- // ],
173
- // },
174
- // },
175
- // color: {
176
- // pairing: {
177
- // option: 2,
178
- // },
179
- // },
180
- // },
181
- // };
125
+ export const ProportionalMeterChartPeakAndStatuses = Template.bind({});
126
+ ProportionalMeterChartPeakAndStatuses.args = {
127
+ isInverse: false,
128
+ type: CarbonChartType.meter,
129
+ dataSet: [
130
+ {
131
+ group: 'emails',
132
+ value: 202,
133
+ },
134
+ {
135
+ group: 'photos',
136
+ value: 654,
137
+ },
138
+ {
139
+ group: 'text messages',
140
+ value: 723,
141
+ },
142
+ {
143
+ group: 'other',
144
+ value: 120,
145
+ },
146
+ ],
147
+ options: {
148
+ title: 'Proportional Meter Chart - peak and statuses',
149
+ height: '130px',
150
+ meter: {
151
+ peak: 1800,
152
+ proportional: {
153
+ total: 2000,
154
+ unit: 'GB',
155
+ },
156
+ status: {
157
+ ranges: [
158
+ {
159
+ range: [0, 800],
160
+ status: 'success',
161
+ },
162
+ {
163
+ range: [800, 1800],
164
+ status: 'warning',
165
+ },
166
+ {
167
+ range: [1800, 2000],
168
+ status: 'danger',
169
+ },
170
+ ],
171
+ },
172
+ },
173
+ color: {
174
+ pairing: {
175
+ option: 2,
176
+ },
177
+ },
178
+ },
179
+ };
182
180
 
183
- // export const ProportionalMeterChartTruncated = Template.bind({});
184
- // ProportionalMeterChartTruncated.args = {
185
- // isInverse: false,
186
- // type: CarbonChartType.meter,
187
- // dataSet: [
188
- // {
189
- // group: 'emails',
190
- // value: 202,
191
- // },
192
- // {
193
- // group: 'photos',
194
- // value: 654,
195
- // },
196
- // {
197
- // group: 'text messages',
198
- // value: 723,
199
- // },
200
- // {
201
- // group: 'other',
202
- // value: 120,
203
- // },
204
- // ],
205
- // options: {
206
- // title: 'Proportional Meter Chart (truncated)',
207
- // height: '130px',
208
- // meter: {
209
- // proportional: {
210
- // total: 2000,
211
- // unit: 'MB',
212
- // totalFormatter: e => `custom total string for: ${e}`,
213
- // breakdownFormatter: e =>
214
- // `You are using ${e.datasetsTotal} GB of the space this label is really long will need to be truncated with a tooltip Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.`,
215
- // },
216
- // },
217
- // },
218
- // };
181
+ export const ProportionalMeterChartTruncated = Template.bind({});
182
+ ProportionalMeterChartTruncated.args = {
183
+ isInverse: false,
184
+ type: CarbonChartType.meter,
185
+ dataSet: [
186
+ {
187
+ group: 'emails',
188
+ value: 202,
189
+ },
190
+ {
191
+ group: 'photos',
192
+ value: 654,
193
+ },
194
+ {
195
+ group: 'text messages',
196
+ value: 723,
197
+ },
198
+ {
199
+ group: 'other',
200
+ value: 120,
201
+ },
202
+ ],
203
+ options: {
204
+ title: 'Proportional Meter Chart (truncated)',
205
+ height: '130px',
206
+ meter: {
207
+ proportional: {
208
+ total: 2000,
209
+ unit: 'MB',
210
+ totalFormatter: e => `custom total string for: ${e}`,
211
+ breakdownFormatter: e =>
212
+ `You are using ${e.datasetsTotal} GB of the space this label is really long will need to be truncated with a tooltip Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.`,
213
+ },
214
+ },
215
+ },
216
+ };