@cdc/editor 4.24.10 → 4.24.12
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.
- package/dist/cdceditor.js +54713 -52282
- package/package.json +9 -9
- package/src/_stories/Editor.stories.tsx +19 -0
- package/src/components/ChooseTab.tsx +349 -381
- package/src/components/ConfigureTab.tsx +1 -1
- package/src/components/DataImport.tsx +134 -38
- package/src/components/PreviewDataTable.tsx +63 -45
- package/src/scss/choose-vis-tab.scss +12 -6
- package/src/scss/data-import.scss +14 -9
- package/src/scss/main.scss +1 -1
|
@@ -1,10 +1,9 @@
|
|
|
1
|
-
import React, { useContext
|
|
1
|
+
import React, { useContext } from 'react'
|
|
2
2
|
import '../scss/choose-vis-tab.scss'
|
|
3
3
|
|
|
4
4
|
import ConfigContext, { EditorDispatchContext } from '../ConfigContext'
|
|
5
5
|
import Tooltip from '@cdc/core/components/ui/Tooltip'
|
|
6
6
|
|
|
7
|
-
import InfoIcon from '@cdc/core/assets/icon-info.svg'
|
|
8
7
|
import DashboardIcon from '@cdc/core/assets/icon-dashboard.svg'
|
|
9
8
|
import BarIcon from '@cdc/core/assets/icon-chart-bar.svg'
|
|
10
9
|
import LineIcon from '@cdc/core/assets/icon-chart-line.svg'
|
|
@@ -21,145 +20,111 @@ import ScatterPlotIcon from '@cdc/core/assets/icon-chart-scatterplot.svg'
|
|
|
21
20
|
import BoxPlotIcon from '@cdc/core/assets/icon-chart-box-whisker.svg'
|
|
22
21
|
import AreaChartIcon from '@cdc/core/assets/icon-area-chart.svg'
|
|
23
22
|
import GaugeChartIcon from '@cdc/core/assets/icon-linear-gauge.svg'
|
|
24
|
-
import ForestPlotIcon from '@cdc/core/assets/icon-chart-forest-plot.svg'
|
|
25
23
|
import ForecastIcon from '@cdc/core/assets/icon-chart-forecast.svg'
|
|
26
24
|
import DeviationIcon from '@cdc/core/assets/icon-deviation-bar.svg'
|
|
27
25
|
import SankeyIcon from '@cdc/core/assets/icon-sankey.svg'
|
|
28
26
|
import ComboChartIcon from '@cdc/core/assets/icon-combo-chart.svg'
|
|
29
27
|
import EpiChartIcon from '@cdc/core/assets/icon-epi-chart.svg'
|
|
30
|
-
import { Visualization } from '@cdc/core/types/Visualization'
|
|
31
28
|
import Icon from '@cdc/core/components/ui/Icon'
|
|
32
29
|
|
|
33
|
-
|
|
30
|
+
interface ButtonProps {
|
|
31
|
+
icon: React.ReactElement
|
|
32
|
+
id: number
|
|
33
|
+
label: string
|
|
34
|
+
type: string
|
|
35
|
+
subType: string
|
|
36
|
+
category: string
|
|
37
|
+
orientation?: string | null
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
const ChooseTab: React.FC = (): JSX.Element => {
|
|
34
41
|
const { config, tempConfig } = useContext(ConfigContext)
|
|
42
|
+
|
|
35
43
|
const dispatch = useContext(EditorDispatchContext)
|
|
44
|
+
const rowLabels = ['General', , 'Charts', 'Maps']
|
|
36
45
|
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
46
|
+
const handleUpload = e => {
|
|
47
|
+
const file = e.target.files[0]
|
|
48
|
+
const reader = new FileReader()
|
|
49
|
+
reader.onload = e => {
|
|
50
|
+
const text = e.target.result
|
|
51
|
+
try {
|
|
52
|
+
const newConfig = JSON.parse(text as string)
|
|
53
|
+
dispatch({ type: 'EDITOR_SET_CONFIG', payload: newConfig })
|
|
54
|
+
dispatch({ type: 'EDITOR_SET_GLOBALACTIVE', payload: 1 })
|
|
55
|
+
} catch (e) {
|
|
56
|
+
alert('Invalid JSON')
|
|
57
|
+
}
|
|
40
58
|
}
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
/**
|
|
44
|
-
* IconButton component
|
|
45
|
-
*/
|
|
46
|
-
const IconButton = ({
|
|
47
|
-
icon,
|
|
48
|
-
label,
|
|
49
|
-
type,
|
|
50
|
-
subType = undefined,
|
|
51
|
-
orientation = undefined,
|
|
59
|
+
reader.readAsText(file)
|
|
60
|
+
}
|
|
52
61
|
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
62
|
+
const generateNewConfig = props => {
|
|
63
|
+
let newConfig = {}
|
|
64
|
+
switch (props.category) {
|
|
65
|
+
case 'Charts': {
|
|
66
|
+
const visualizationType = props.subType
|
|
67
|
+
const visualizationSubType = !props.visualizationSubType ? 'regular' : props.visualizationSubType
|
|
68
|
+
newConfig = {
|
|
69
|
+
...props,
|
|
70
|
+
visualizationType: visualizationType,
|
|
71
|
+
visualizationSubType: visualizationSubType,
|
|
72
|
+
newViz: true,
|
|
73
|
+
datasets: {}
|
|
74
|
+
}
|
|
75
|
+
break
|
|
76
|
+
}
|
|
63
77
|
|
|
64
|
-
|
|
65
|
-
|
|
78
|
+
case 'General': {
|
|
79
|
+
const visualizationType = props.subType
|
|
80
|
+
newConfig = { ...props, newViz: true, datasets: {}, visualizationType: visualizationType }
|
|
81
|
+
break
|
|
82
|
+
}
|
|
66
83
|
|
|
67
|
-
|
|
84
|
+
case 'Maps': {
|
|
85
|
+
const visualizationType = props.subType
|
|
86
|
+
newConfig = {
|
|
87
|
+
...props,
|
|
88
|
+
newViz: true,
|
|
89
|
+
datasets: {},
|
|
90
|
+
type: 'map'
|
|
91
|
+
}
|
|
92
|
+
newConfig['general'] = {
|
|
93
|
+
geoType: visualizationType,
|
|
94
|
+
type: 'map'
|
|
95
|
+
}
|
|
96
|
+
break
|
|
97
|
+
}
|
|
68
98
|
}
|
|
69
99
|
|
|
70
|
-
|
|
100
|
+
return newConfig
|
|
101
|
+
}
|
|
71
102
|
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
} else if (type === 'chart' && !stacked && config.visualizationSubType !== 'stacked') {
|
|
78
|
-
classNames = config.type === type && isSubType ? 'active' : ''
|
|
79
|
-
}
|
|
103
|
+
const configureTabs = props => {
|
|
104
|
+
const newConfig = generateNewConfig(props)
|
|
105
|
+
dispatch({ type: 'EDITOR_SET_CONFIG', payload: { ...config, ...newConfig, activeVizButtonID: props.id } })
|
|
106
|
+
dispatch({ type: 'EDITOR_SET_GLOBALACTIVE', payload: 1 })
|
|
107
|
+
}
|
|
80
108
|
|
|
81
|
-
|
|
82
|
-
|
|
109
|
+
const VizButton: React.FC<ButtonProps> = props => {
|
|
110
|
+
const { label, icon, id } = props
|
|
111
|
+
const isActive = id === config?.activeVizButtonID || 0
|
|
112
|
+
const handleClick = () => {
|
|
113
|
+
configureTabs(props)
|
|
83
114
|
}
|
|
84
115
|
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
if (subType !== config.visualizationType) {
|
|
88
|
-
dispatch({ type: 'EDITOR_SET_CONFIG', payload: { ...config, newViz: true, visualizationType: subType } })
|
|
89
|
-
}
|
|
90
|
-
dispatch({ type: 'EDITOR_SET_GLOBALACTIVE', payload: 1 })
|
|
91
|
-
} else {
|
|
92
|
-
const confirmation =
|
|
93
|
-
!config.type ||
|
|
94
|
-
window.confirm('Changing visualization type will clear configuration settings. Do you want to continue?')
|
|
95
|
-
|
|
96
|
-
if (confirmation) {
|
|
97
|
-
const newConfig = {
|
|
98
|
-
newViz: true,
|
|
99
|
-
datasets: {},
|
|
100
|
-
isResponsiveTicks: false,
|
|
101
|
-
type,
|
|
102
|
-
barThickness: '0.37',
|
|
103
|
-
xAxis: {
|
|
104
|
-
type: 'categorical',
|
|
105
|
-
size: 75,
|
|
106
|
-
maxTickRotation: 45,
|
|
107
|
-
labelOffset: 0
|
|
108
|
-
}
|
|
109
|
-
} as Visualization
|
|
110
|
-
|
|
111
|
-
if (type === 'map') {
|
|
112
|
-
newConfig.general = {
|
|
113
|
-
...newConfig.general,
|
|
114
|
-
geoType: subType,
|
|
115
|
-
type: generalType
|
|
116
|
-
}
|
|
117
|
-
} else {
|
|
118
|
-
newConfig.visualizationType = subType
|
|
119
|
-
}
|
|
120
|
-
if (type === 'chart') {
|
|
121
|
-
newConfig.visualizationSubType = stacked ? 'stacked' : 'regular'
|
|
122
|
-
newConfig.orientation = orientation
|
|
123
|
-
if (label === 'Epi Chart') {
|
|
124
|
-
newConfig.xAxis.type = 'date-time'
|
|
125
|
-
newConfig.xAxis.size = 0
|
|
126
|
-
newConfig.barThickness = ' 0.50'
|
|
127
|
-
newConfig.xAxis.labelOffset = 0
|
|
128
|
-
newConfig.xAxis.maxTickRotation = 45
|
|
129
|
-
newConfig.isResponsiveTicks = true
|
|
130
|
-
}
|
|
131
|
-
}
|
|
132
|
-
|
|
133
|
-
dispatch({ type: 'EDITOR_SET_CONFIG', payload: newConfig })
|
|
134
|
-
dispatch({ type: 'EDITOR_SET_GLOBALACTIVE', payload: 1 })
|
|
135
|
-
}
|
|
136
|
-
}
|
|
116
|
+
if (tempConfig) {
|
|
117
|
+
dispatch({ type: 'EDITOR_SAVE', payload: tempConfig })
|
|
137
118
|
}
|
|
138
119
|
|
|
139
120
|
return (
|
|
140
|
-
<button className={
|
|
121
|
+
<button className={isActive ? 'active' : ''} onClick={handleClick} aria-label={label}>
|
|
141
122
|
{icon}
|
|
142
123
|
<span className='mt-1'>{label}</span>
|
|
143
124
|
</button>
|
|
144
125
|
)
|
|
145
126
|
}
|
|
146
127
|
|
|
147
|
-
const handleUpload = e => {
|
|
148
|
-
const file = e.target.files[0]
|
|
149
|
-
const reader = new FileReader()
|
|
150
|
-
reader.onload = e => {
|
|
151
|
-
const text = e.target.result
|
|
152
|
-
try {
|
|
153
|
-
const newConfig = JSON.parse(text as string)
|
|
154
|
-
dispatch({ type: 'EDITOR_SET_CONFIG', payload: newConfig })
|
|
155
|
-
dispatch({ type: 'EDITOR_SET_GLOBALACTIVE', payload: 1 })
|
|
156
|
-
} catch (e) {
|
|
157
|
-
alert('Invalid JSON')
|
|
158
|
-
}
|
|
159
|
-
}
|
|
160
|
-
reader.readAsText(file)
|
|
161
|
-
}
|
|
162
|
-
|
|
163
128
|
return (
|
|
164
129
|
<div className='choose-vis'>
|
|
165
130
|
<a
|
|
@@ -177,276 +142,28 @@ export default function ChooseTab() {
|
|
|
177
142
|
</div>
|
|
178
143
|
</a>
|
|
179
144
|
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
</
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
<Tooltip>
|
|
202
|
-
<Tooltip.Target>
|
|
203
|
-
<IconButton label='Waffle Chart' type='waffle-chart' subType='Waffle' icon={<WaffleChartIcon />} />
|
|
204
|
-
</Tooltip.Target>
|
|
205
|
-
<Tooltip.Content>Highlight a piece of data in relationship to a data set.</Tooltip.Content>
|
|
206
|
-
</Tooltip>
|
|
207
|
-
</li>
|
|
208
|
-
<li>
|
|
209
|
-
<Tooltip>
|
|
210
|
-
<Tooltip.Target>
|
|
211
|
-
<IconButton label='Gauge Chart' type='waffle-chart' subType='Gauge' icon={<GaugeChartIcon />} />
|
|
212
|
-
</Tooltip.Target>
|
|
213
|
-
<Tooltip.Content>
|
|
214
|
-
Specify the calculation of a single data point (such as a percentage value) and present it on a horizontal
|
|
215
|
-
scale.
|
|
216
|
-
</Tooltip.Content>
|
|
217
|
-
</Tooltip>
|
|
218
|
-
</li>
|
|
219
|
-
</ul>
|
|
220
|
-
|
|
221
|
-
<div className='heading-2'>Charts</div>
|
|
222
|
-
<ul className='grid cove-temp'>
|
|
223
|
-
<li>
|
|
224
|
-
<Tooltip position='right'>
|
|
225
|
-
<Tooltip.Target>
|
|
226
|
-
<IconButton label='Bar' type='chart' subType='Bar' orientation='vertical' icon={<BarIcon />} />
|
|
227
|
-
</Tooltip.Target>
|
|
228
|
-
<Tooltip.Content>Use bars to show comparisons between data categories.</Tooltip.Content>
|
|
229
|
-
</Tooltip>
|
|
230
|
-
</li>
|
|
231
|
-
<li>
|
|
232
|
-
<Tooltip position='right'>
|
|
233
|
-
<Tooltip.Target>
|
|
234
|
-
<IconButton label='Epi Chart' type='chart' subType='Bar' orientation='vertical' icon={<EpiChartIcon />} />
|
|
235
|
-
</Tooltip.Target>
|
|
236
|
-
<Tooltip.Content>Use bars to show comparisons between data categories.</Tooltip.Content>
|
|
237
|
-
</Tooltip>
|
|
238
|
-
</li>
|
|
239
|
-
<li>
|
|
240
|
-
<Tooltip position='right'>
|
|
241
|
-
<Tooltip.Target>
|
|
242
|
-
<IconButton
|
|
243
|
-
label='Combo Chart'
|
|
244
|
-
type='chart'
|
|
245
|
-
subType='Combo'
|
|
246
|
-
orientation='vertical'
|
|
247
|
-
icon={<ComboChartIcon />}
|
|
248
|
-
/>
|
|
249
|
-
</Tooltip.Target>
|
|
250
|
-
<Tooltip.Content>Use bars to show comparisons between data categories.</Tooltip.Content>
|
|
251
|
-
</Tooltip>
|
|
252
|
-
</li>
|
|
253
|
-
<li>
|
|
254
|
-
<Tooltip>
|
|
255
|
-
<Tooltip.Target>
|
|
256
|
-
<IconButton label='Line' type='chart' subType='Line' orientation='vertical' icon={<LineIcon />} />
|
|
257
|
-
</Tooltip.Target>
|
|
258
|
-
<Tooltip.Content>Present one or more data trends over time.</Tooltip.Content>
|
|
259
|
-
</Tooltip>
|
|
260
|
-
</li>
|
|
261
|
-
<li>
|
|
262
|
-
<Tooltip>
|
|
263
|
-
<Tooltip.Target>
|
|
264
|
-
<IconButton label='Pie' type='chart' subType='Pie' orientation='vertical' icon={<PieIcon />} />
|
|
265
|
-
</Tooltip.Target>
|
|
266
|
-
<Tooltip.Content>Present the numerical proportions of a data series.</Tooltip.Content>
|
|
267
|
-
</Tooltip>
|
|
268
|
-
</li>
|
|
269
|
-
<li>
|
|
270
|
-
<Tooltip>
|
|
271
|
-
<Tooltip.Target>
|
|
272
|
-
<IconButton
|
|
273
|
-
label='Paired Bar'
|
|
274
|
-
type='chart'
|
|
275
|
-
subType='Paired Bar'
|
|
276
|
-
orientation='horizontal'
|
|
277
|
-
icon={<PairedBarIcon />}
|
|
278
|
-
/>
|
|
279
|
-
</Tooltip.Target>
|
|
280
|
-
<Tooltip.Content>
|
|
281
|
-
Use paired bars to show comparisons between two different data categories.
|
|
282
|
-
</Tooltip.Content>
|
|
283
|
-
</Tooltip>
|
|
284
|
-
</li>
|
|
285
|
-
<li>
|
|
286
|
-
<Tooltip>
|
|
287
|
-
<Tooltip.Target>
|
|
288
|
-
<IconButton
|
|
289
|
-
label='Deviation Bar'
|
|
290
|
-
type='chart'
|
|
291
|
-
subType='Deviation Bar'
|
|
292
|
-
orientation='horizontal'
|
|
293
|
-
stacked={false}
|
|
294
|
-
icon={<DeviationIcon />}
|
|
295
|
-
/>
|
|
296
|
-
</Tooltip.Target>
|
|
297
|
-
<Tooltip.Content>Use deviation bars to display how individual values differ from a target.</Tooltip.Content>
|
|
298
|
-
</Tooltip>
|
|
299
|
-
</li>
|
|
300
|
-
<li>
|
|
301
|
-
<Tooltip>
|
|
302
|
-
<Tooltip.Target>
|
|
303
|
-
<IconButton
|
|
304
|
-
label='Horizontal Bar (Stacked)'
|
|
305
|
-
type='chart'
|
|
306
|
-
subType='Bar'
|
|
307
|
-
orientation='horizontal'
|
|
308
|
-
stacked={true}
|
|
309
|
-
icon={<HorizontalStackIcon />}
|
|
310
|
-
/>
|
|
311
|
-
</Tooltip.Target>
|
|
312
|
-
<Tooltip.Content>Use bars to show comparisons between data categories.</Tooltip.Content>
|
|
313
|
-
</Tooltip>
|
|
314
|
-
</li>
|
|
315
|
-
</ul>
|
|
145
|
+
{rowLabels.map(label => {
|
|
146
|
+
return (
|
|
147
|
+
<React.Fragment>
|
|
148
|
+
<div className='heading-2'>{label}</div>
|
|
149
|
+
<ul className={`visualization-grid category_${label.toLowerCase()}`}>
|
|
150
|
+
{buttons
|
|
151
|
+
.filter(button => button.category === label)
|
|
152
|
+
.map((button, index) => (
|
|
153
|
+
<li key={index}>
|
|
154
|
+
<Tooltip position='right'>
|
|
155
|
+
<Tooltip.Target>
|
|
156
|
+
<VizButton {...button} />
|
|
157
|
+
</Tooltip.Target>
|
|
158
|
+
<Tooltip.Content>{button.content}</Tooltip.Content>
|
|
159
|
+
</Tooltip>
|
|
160
|
+
</li>
|
|
161
|
+
))}
|
|
162
|
+
</ul>
|
|
163
|
+
</React.Fragment>
|
|
164
|
+
)
|
|
165
|
+
})}
|
|
316
166
|
|
|
317
|
-
<ul className='grid cove-temp'>
|
|
318
|
-
{/* temporarily hiding these */}
|
|
319
|
-
<li>
|
|
320
|
-
<Tooltip>
|
|
321
|
-
<Tooltip.Target>
|
|
322
|
-
<IconButton
|
|
323
|
-
label='Box Plot'
|
|
324
|
-
type='chart'
|
|
325
|
-
subType='Box Plot'
|
|
326
|
-
orientation='vertical'
|
|
327
|
-
icon={<BoxPlotIcon />}
|
|
328
|
-
/>
|
|
329
|
-
</Tooltip.Target>
|
|
330
|
-
<Tooltip.Content>Display a box plot</Tooltip.Content>
|
|
331
|
-
</Tooltip>
|
|
332
|
-
</li>
|
|
333
|
-
<li>
|
|
334
|
-
<Tooltip>
|
|
335
|
-
<Tooltip.Target>
|
|
336
|
-
<IconButton
|
|
337
|
-
label='Scatter Plot'
|
|
338
|
-
type='chart'
|
|
339
|
-
subType='Scatter Plot'
|
|
340
|
-
orientation='vertical'
|
|
341
|
-
icon={<ScatterPlotIcon />}
|
|
342
|
-
/>
|
|
343
|
-
</Tooltip.Target>
|
|
344
|
-
<Tooltip.Content>Display a scatter plot</Tooltip.Content>
|
|
345
|
-
</Tooltip>
|
|
346
|
-
</li>
|
|
347
|
-
<li>
|
|
348
|
-
<Tooltip>
|
|
349
|
-
<Tooltip.Target>
|
|
350
|
-
<IconButton
|
|
351
|
-
label='Area Chart'
|
|
352
|
-
type='chart'
|
|
353
|
-
subType='Area Chart'
|
|
354
|
-
orientation='vertical'
|
|
355
|
-
icon={<AreaChartIcon />}
|
|
356
|
-
/>
|
|
357
|
-
</Tooltip.Target>
|
|
358
|
-
<Tooltip.Content>Display an area chart</Tooltip.Content>
|
|
359
|
-
</Tooltip>
|
|
360
|
-
</li>
|
|
361
|
-
<li>
|
|
362
|
-
<Tooltip>
|
|
363
|
-
<Tooltip.Target>
|
|
364
|
-
<IconButton
|
|
365
|
-
label='Forecast Chart'
|
|
366
|
-
type='chart'
|
|
367
|
-
subType='Forecasting'
|
|
368
|
-
orientation='vertical'
|
|
369
|
-
icon={<ForecastIcon />}
|
|
370
|
-
/>
|
|
371
|
-
</Tooltip.Target>
|
|
372
|
-
<Tooltip.Content>Display a forecasting chart</Tooltip.Content>
|
|
373
|
-
</Tooltip>
|
|
374
|
-
</li>
|
|
375
|
-
|
|
376
|
-
{/* <li>
|
|
377
|
-
<Tooltip>
|
|
378
|
-
<Tooltip.Target>
|
|
379
|
-
<IconButton label='Forest Plot' type='chart' subType='Forest Plot' orientation='vertical' icon={<ForestPlotIcon />} />
|
|
380
|
-
</Tooltip.Target>
|
|
381
|
-
<Tooltip.Content>Display a forest plot</Tooltip.Content>
|
|
382
|
-
</Tooltip>
|
|
383
|
-
</li> */}
|
|
384
|
-
|
|
385
|
-
<li>
|
|
386
|
-
<Tooltip>
|
|
387
|
-
<Tooltip.Target>
|
|
388
|
-
<IconButton
|
|
389
|
-
label='Sankey Diagram'
|
|
390
|
-
type='chart'
|
|
391
|
-
subType='Sankey'
|
|
392
|
-
orientation='vertical'
|
|
393
|
-
icon={<SankeyIcon />}
|
|
394
|
-
/>
|
|
395
|
-
</Tooltip.Target>
|
|
396
|
-
<Tooltip.Content>Display a sankey diagram</Tooltip.Content>
|
|
397
|
-
</Tooltip>
|
|
398
|
-
</li>
|
|
399
|
-
</ul>
|
|
400
|
-
|
|
401
|
-
<div className='heading-2'>Maps</div>
|
|
402
|
-
<ul className='grid cove-temp'>
|
|
403
|
-
<li>
|
|
404
|
-
<Tooltip position='right'>
|
|
405
|
-
<Tooltip.Target>
|
|
406
|
-
<IconButton label='United States (State- or County-Level)' type='map' subType='us' icon={<UsaIcon />} />
|
|
407
|
-
</Tooltip.Target>
|
|
408
|
-
<Tooltip.Content>Present a U.S. choropleth map at state or county level.</Tooltip.Content>
|
|
409
|
-
</Tooltip>
|
|
410
|
-
</li>
|
|
411
|
-
<li>
|
|
412
|
-
<Tooltip position='right'>
|
|
413
|
-
<Tooltip.Target>
|
|
414
|
-
<IconButton label='United States (HHS Regions)' type='map' subType='us-region' icon={<UsaRegionIcon />} />
|
|
415
|
-
</Tooltip.Target>
|
|
416
|
-
<Tooltip.Content>Present a U.S. choropleth map at state or county level.</Tooltip.Content>
|
|
417
|
-
</Tooltip>
|
|
418
|
-
</li>
|
|
419
|
-
<li>
|
|
420
|
-
<Tooltip>
|
|
421
|
-
<Tooltip.Target>
|
|
422
|
-
<IconButton label='World' type='map' subType='world' icon={<GlobeIcon />} />
|
|
423
|
-
</Tooltip.Target>
|
|
424
|
-
<Tooltip.Content>Present a choropleth map of the world.</Tooltip.Content>
|
|
425
|
-
</Tooltip>
|
|
426
|
-
</li>
|
|
427
|
-
<li>
|
|
428
|
-
<Tooltip>
|
|
429
|
-
<Tooltip.Target>
|
|
430
|
-
<IconButton label='U.S. State' type='map' subType='single-state' icon={<AlabamaGraphic />} />
|
|
431
|
-
</Tooltip.Target>
|
|
432
|
-
<Tooltip.Content>Present a choropleth map of an individual U.S. state.</Tooltip.Content>
|
|
433
|
-
</Tooltip>
|
|
434
|
-
</li>
|
|
435
|
-
<li>
|
|
436
|
-
<Tooltip>
|
|
437
|
-
<Tooltip.Target>
|
|
438
|
-
<IconButton
|
|
439
|
-
label='U.S. Geocode'
|
|
440
|
-
type='map'
|
|
441
|
-
subType='us-county'
|
|
442
|
-
generalType='us-geocode'
|
|
443
|
-
icon={<UsaIcon />}
|
|
444
|
-
/>
|
|
445
|
-
</Tooltip.Target>
|
|
446
|
-
<Tooltip.Content>United States GeoCode</Tooltip.Content>
|
|
447
|
-
</Tooltip>
|
|
448
|
-
</li>
|
|
449
|
-
</ul>
|
|
450
167
|
<hr />
|
|
451
168
|
<div className='form-group'>
|
|
452
169
|
<label htmlFor='uploadConfig'>
|
|
@@ -471,3 +188,254 @@ export default function ChooseTab() {
|
|
|
471
188
|
</div>
|
|
472
189
|
)
|
|
473
190
|
}
|
|
191
|
+
export default ChooseTab
|
|
192
|
+
|
|
193
|
+
const buttons = [
|
|
194
|
+
{
|
|
195
|
+
id: 1,
|
|
196
|
+
category: 'Charts',
|
|
197
|
+
label: 'Bar',
|
|
198
|
+
type: 'chart',
|
|
199
|
+
subType: 'Bar',
|
|
200
|
+
orientation: 'vertical',
|
|
201
|
+
barThickness: '0.37',
|
|
202
|
+
visualizationSubType: 'regular',
|
|
203
|
+
xAxis: {
|
|
204
|
+
type: 'categorical',
|
|
205
|
+
size: 75,
|
|
206
|
+
maxTickRotation: 45,
|
|
207
|
+
labelOffset: 0
|
|
208
|
+
},
|
|
209
|
+
icon: <BarIcon />,
|
|
210
|
+
content: 'Use bars to show comparisons between data categories.'
|
|
211
|
+
},
|
|
212
|
+
{
|
|
213
|
+
id: 2,
|
|
214
|
+
category: 'Charts',
|
|
215
|
+
label: 'Epi Chart',
|
|
216
|
+
type: 'chart',
|
|
217
|
+
subType: 'Bar',
|
|
218
|
+
orientation: 'vertical',
|
|
219
|
+
barThickness: '0.95',
|
|
220
|
+
isResponsiveTicks: true,
|
|
221
|
+
visualizationSubType: 'regular',
|
|
222
|
+
xAxis: {
|
|
223
|
+
type: 'date-time',
|
|
224
|
+
size: 0,
|
|
225
|
+
labelOffset: 0,
|
|
226
|
+
maxTickRotation: 45
|
|
227
|
+
},
|
|
228
|
+
icon: <EpiChartIcon />,
|
|
229
|
+
content: 'Use bars to show comparisons between data categories.'
|
|
230
|
+
},
|
|
231
|
+
{
|
|
232
|
+
id: 3,
|
|
233
|
+
category: 'Charts',
|
|
234
|
+
label: 'Combo Chart',
|
|
235
|
+
type: 'chart',
|
|
236
|
+
subType: 'Combo',
|
|
237
|
+
orientation: 'vertical',
|
|
238
|
+
icon: <ComboChartIcon />,
|
|
239
|
+
content: 'Use bars to show comparisons between data categories.'
|
|
240
|
+
},
|
|
241
|
+
{
|
|
242
|
+
id: 4,
|
|
243
|
+
category: 'Charts',
|
|
244
|
+
label: 'Line',
|
|
245
|
+
type: 'chart',
|
|
246
|
+
subType: 'Line',
|
|
247
|
+
orientation: 'vertical',
|
|
248
|
+
icon: <LineIcon />,
|
|
249
|
+
content: 'Present one or more data trends over time.'
|
|
250
|
+
},
|
|
251
|
+
{
|
|
252
|
+
id: 5,
|
|
253
|
+
category: 'Charts',
|
|
254
|
+
label: 'Paired Bar',
|
|
255
|
+
type: 'chart',
|
|
256
|
+
subType: 'Paired Bar',
|
|
257
|
+
orientation: 'horizontal',
|
|
258
|
+
icon: <PairedBarIcon />,
|
|
259
|
+
content: 'Use paired bars to show comparisons between two different data categories.'
|
|
260
|
+
},
|
|
261
|
+
{
|
|
262
|
+
id: 6,
|
|
263
|
+
category: 'Charts',
|
|
264
|
+
label: 'Area Chart',
|
|
265
|
+
type: 'chart',
|
|
266
|
+
subType: 'Area Chart',
|
|
267
|
+
orientation: 'vertical',
|
|
268
|
+
icon: <AreaChartIcon />,
|
|
269
|
+
content: 'Display an area chart to visualize quantities over time.'
|
|
270
|
+
},
|
|
271
|
+
{
|
|
272
|
+
id: 7,
|
|
273
|
+
category: 'Charts',
|
|
274
|
+
label: 'Forecast Chart',
|
|
275
|
+
type: 'chart',
|
|
276
|
+
subType: 'Forecasting',
|
|
277
|
+
orientation: 'vertical',
|
|
278
|
+
icon: <ForecastIcon />,
|
|
279
|
+
content: 'Display a forecasting chart to predict future data trends.'
|
|
280
|
+
},
|
|
281
|
+
{
|
|
282
|
+
id: 8,
|
|
283
|
+
category: 'Charts',
|
|
284
|
+
label: 'Scatter Plot',
|
|
285
|
+
type: 'chart',
|
|
286
|
+
subType: 'Scatter Plot',
|
|
287
|
+
orientation: 'vertical',
|
|
288
|
+
icon: <ScatterPlotIcon />,
|
|
289
|
+
content: 'Display a scatter plot to explore relationships between numeric variables.'
|
|
290
|
+
},
|
|
291
|
+
{
|
|
292
|
+
id: 9,
|
|
293
|
+
category: 'Charts',
|
|
294
|
+
label: 'Box Plot',
|
|
295
|
+
type: 'chart',
|
|
296
|
+
subType: 'Box Plot',
|
|
297
|
+
orientation: 'vertical',
|
|
298
|
+
icon: <BoxPlotIcon />,
|
|
299
|
+
content: 'Display a box plot to visualize the distribution of numerical data through quartiles.'
|
|
300
|
+
},
|
|
301
|
+
{
|
|
302
|
+
id: 10,
|
|
303
|
+
category: 'Charts',
|
|
304
|
+
label: 'Sankey Diagram',
|
|
305
|
+
type: 'chart',
|
|
306
|
+
subType: 'Sankey',
|
|
307
|
+
orientation: 'vertical',
|
|
308
|
+
icon: <SankeyIcon />,
|
|
309
|
+
content: 'Display a sankey diagram'
|
|
310
|
+
},
|
|
311
|
+
{
|
|
312
|
+
id: 11,
|
|
313
|
+
category: 'Charts',
|
|
314
|
+
label: 'Forecast Chart',
|
|
315
|
+
type: 'chart',
|
|
316
|
+
subType: 'Forecasting',
|
|
317
|
+
orientation: 'vertical',
|
|
318
|
+
icon: <ForecastIcon />,
|
|
319
|
+
content: 'Display a forecasting chart'
|
|
320
|
+
},
|
|
321
|
+
{
|
|
322
|
+
id: 12,
|
|
323
|
+
category: 'Charts',
|
|
324
|
+
label: 'Horizontal Bar (Stacked)',
|
|
325
|
+
type: 'chart',
|
|
326
|
+
subType: 'Bar',
|
|
327
|
+
visualizationSubType: 'stacked',
|
|
328
|
+
orientation: 'horizontal',
|
|
329
|
+
icon: <HorizontalStackIcon />,
|
|
330
|
+
content: 'Use bars to show comparisons between data categories.'
|
|
331
|
+
},
|
|
332
|
+
{
|
|
333
|
+
id: 13,
|
|
334
|
+
category: 'Charts',
|
|
335
|
+
label: 'Pie',
|
|
336
|
+
type: 'chart',
|
|
337
|
+
subType: 'Pie',
|
|
338
|
+
orientation: 'Pie',
|
|
339
|
+
icon: <PieIcon />,
|
|
340
|
+
content: 'Present the numerical proportions of a data series.'
|
|
341
|
+
},
|
|
342
|
+
{
|
|
343
|
+
id: 14,
|
|
344
|
+
category: 'Charts',
|
|
345
|
+
label: 'Deviation Bar',
|
|
346
|
+
type: 'chart',
|
|
347
|
+
subType: 'Deviation Bar',
|
|
348
|
+
orientation: 'Pie',
|
|
349
|
+
icon: <DeviationIcon />,
|
|
350
|
+
content: 'Use deviation bars to display how individual values differ from a target'
|
|
351
|
+
},
|
|
352
|
+
{
|
|
353
|
+
id: 15,
|
|
354
|
+
category: 'General',
|
|
355
|
+
label: 'Dashboard',
|
|
356
|
+
type: 'dashboard',
|
|
357
|
+
subType: null,
|
|
358
|
+
orientation: null,
|
|
359
|
+
icon: <DashboardIcon />,
|
|
360
|
+
content: 'Present multiple data visualizations with shared filter controls.'
|
|
361
|
+
},
|
|
362
|
+
{
|
|
363
|
+
id: 16,
|
|
364
|
+
category: 'General',
|
|
365
|
+
label: 'Data Bite',
|
|
366
|
+
type: 'data-bite',
|
|
367
|
+
subType: null,
|
|
368
|
+
orientation: null,
|
|
369
|
+
icon: <DataBiteIcon />,
|
|
370
|
+
content: 'Highlight a single aggregated value (e.g., sum or median).'
|
|
371
|
+
},
|
|
372
|
+
{
|
|
373
|
+
id: 17,
|
|
374
|
+
category: 'General',
|
|
375
|
+
label: 'Waffle Chart',
|
|
376
|
+
type: 'waffle-chart',
|
|
377
|
+
subType: 'Waffle',
|
|
378
|
+
orientation: null,
|
|
379
|
+
icon: <WaffleChartIcon />,
|
|
380
|
+
content: 'Highlight a piece of data in relationship to a data set.'
|
|
381
|
+
},
|
|
382
|
+
{
|
|
383
|
+
id: 18,
|
|
384
|
+
category: 'General',
|
|
385
|
+
label: 'Gauge Chart',
|
|
386
|
+
type: 'waffle-chart',
|
|
387
|
+
subType: 'Gauge',
|
|
388
|
+
orientation: null,
|
|
389
|
+
icon: <GaugeChartIcon />,
|
|
390
|
+
content: `Specify the calculation of a single data point (such as a percentage value) and present it on a horizontal
|
|
391
|
+
scale.`
|
|
392
|
+
},
|
|
393
|
+
{
|
|
394
|
+
id: 19,
|
|
395
|
+
category: 'Maps',
|
|
396
|
+
label: 'United States (State- or County-Level)',
|
|
397
|
+
type: 'map',
|
|
398
|
+
subType: 'us',
|
|
399
|
+
icon: <UsaIcon />,
|
|
400
|
+
content: 'Present a U.S. choropleth map at state or county level.',
|
|
401
|
+
position: 'right'
|
|
402
|
+
},
|
|
403
|
+
{
|
|
404
|
+
id: 20,
|
|
405
|
+
category: 'Maps',
|
|
406
|
+
label: 'United States (HHS Regions)',
|
|
407
|
+
type: 'map',
|
|
408
|
+
subType: 'us-region',
|
|
409
|
+
icon: <UsaRegionIcon />,
|
|
410
|
+
content: 'Present a U.S. choropleth map at state or county level.',
|
|
411
|
+
position: 'right'
|
|
412
|
+
},
|
|
413
|
+
{
|
|
414
|
+
id: 21,
|
|
415
|
+
category: 'Maps',
|
|
416
|
+
label: 'World',
|
|
417
|
+
type: 'map',
|
|
418
|
+
subType: 'world',
|
|
419
|
+
icon: <GlobeIcon />,
|
|
420
|
+
content: 'Present a choropleth map of the world.'
|
|
421
|
+
},
|
|
422
|
+
{
|
|
423
|
+
id: 22,
|
|
424
|
+
category: 'Maps',
|
|
425
|
+
label: 'U.S. State',
|
|
426
|
+
type: 'map',
|
|
427
|
+
subType: 'single-state',
|
|
428
|
+
icon: <AlabamaGraphic />,
|
|
429
|
+
content: 'Present a choropleth map of an individual U.S. state.'
|
|
430
|
+
},
|
|
431
|
+
{
|
|
432
|
+
id: 23,
|
|
433
|
+
category: 'Maps',
|
|
434
|
+
label: 'U.S. Geocode',
|
|
435
|
+
type: 'map',
|
|
436
|
+
subType: 'us-county',
|
|
437
|
+
generalType: 'us-geocode',
|
|
438
|
+
icon: <UsaIcon />,
|
|
439
|
+
content: 'United States GeoCode'
|
|
440
|
+
}
|
|
441
|
+
]
|