@react-magma/charts 12.0.0-next.2 → 12.0.0-next.4

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 (30) hide show
  1. package/dist/charts +11 -8
  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 +2 -1
  10. package/dist/components/CarbonChart/CarbonChartArea.stories.d.ts +1 -0
  11. package/dist/components/CarbonChart/CarbonChartBoxplot.stories.d.ts +1 -0
  12. package/dist/components/CarbonChart/CarbonChartBubble.stories.d.ts +5 -0
  13. package/dist/components/CarbonChart/CarbonChartCombo.stories.d.ts +11 -0
  14. package/dist/components/CarbonChart/CarbonChartGauge.stories.d.ts +1 -0
  15. package/dist/components/CarbonChart/CarbonChartHistogram.stories.d.ts +2 -0
  16. package/dist/components/CarbonChart/CarbonChartMeter.stories.d.ts +4 -0
  17. package/dist/components/CarbonChart/CarbonChartRadar.stories.d.ts +3 -0
  18. package/dist/components/CarbonChart/CarbonChartScatter.stories.d.ts +5 -0
  19. package/package.json +2 -2
  20. package/src/components/CarbonChart/CarbonChart.tsx +29 -5
  21. package/src/components/CarbonChart/CarbonChartArea.stories.tsx +101 -0
  22. package/src/components/CarbonChart/CarbonChartBar.stories.tsx +10 -0
  23. package/src/components/CarbonChart/CarbonChartBoxplot.stories.tsx +120 -122
  24. package/src/components/CarbonChart/CarbonChartBubble.stories.tsx +475 -477
  25. package/src/components/CarbonChart/CarbonChartCombo.stories.tsx +1282 -1284
  26. package/src/components/CarbonChart/CarbonChartGauge.stories.tsx +24 -26
  27. package/src/components/CarbonChart/CarbonChartHistogram.stories.tsx +593 -595
  28. package/src/components/CarbonChart/CarbonChartMeter.stories.tsx +147 -149
  29. package/src/components/CarbonChart/CarbonChartRadar.stories.tsx +375 -377
  30. 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
+ };