@cdc/editor 4.24.9 → 4.24.11
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/LICENSE +201 -0
- package/dist/cdceditor.js +85431 -219914
- package/package.json +9 -9
- package/src/CdcEditor.tsx +4 -1
- package/src/_stories/Editor.stories.tsx +19 -0
- package/src/components/ChooseTab.tsx +368 -273
- package/src/components/ConfigureTab.tsx +13 -8
- package/src/components/DataImport.tsx +134 -38
- package/src/components/PreviewDataTable.tsx +97 -45
- package/src/coreStyles_editor.scss +2 -0
- package/src/index.jsx +1 -0
- package/src/scss/_variables.scss +0 -2
- package/src/scss/choose-vis-tab.scss +14 -8
- package/src/scss/data-import.scss +31 -25
- package/src/scss/main.scss +4 -10
- package/src/scss/configure-tab.scss +0 -0
|
@@ -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,311 +20,150 @@ 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
|
-
import
|
|
26
|
+
import ComboChartIcon from '@cdc/core/assets/icon-combo-chart.svg'
|
|
27
|
+
import EpiChartIcon from '@cdc/core/assets/icon-epi-chart.svg'
|
|
29
28
|
import Icon from '@cdc/core/components/ui/Icon'
|
|
30
29
|
|
|
31
|
-
|
|
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 => {
|
|
32
41
|
const { config, tempConfig } = useContext(ConfigContext)
|
|
33
|
-
const dispatch = useContext(EditorDispatchContext)
|
|
34
42
|
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
dispatch({ type: 'EDITOR_SAVE', payload: tempConfig })
|
|
38
|
-
}
|
|
39
|
-
}, [])
|
|
43
|
+
const dispatch = useContext(EditorDispatchContext)
|
|
44
|
+
const rowLabels = ['General', , 'Charts', 'Maps']
|
|
40
45
|
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
isSubType = subType === config.visualizationType
|
|
54
|
-
isHorizontalStackedChart = orientation === config.orientation && stacked === true
|
|
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
|
+
}
|
|
55
58
|
}
|
|
59
|
+
reader.readAsText(file)
|
|
60
|
+
}
|
|
56
61
|
|
|
57
|
-
|
|
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
|
+
}
|
|
58
77
|
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
} else if (type === 'chart' && !stacked && config.visualizationSubType !== 'stacked') {
|
|
65
|
-
classNames = config.type === type && isSubType ? 'active' : ''
|
|
66
|
-
}
|
|
78
|
+
case 'General': {
|
|
79
|
+
const visualizationType = props.subType
|
|
80
|
+
newConfig = { ...props, newViz: true, datasets: {}, visualizationType: visualizationType }
|
|
81
|
+
break
|
|
82
|
+
}
|
|
67
83
|
|
|
68
|
-
|
|
69
|
-
|
|
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
|
+
}
|
|
70
98
|
}
|
|
71
99
|
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
if (subType !== config.visualizationType) {
|
|
75
|
-
dispatch({ type: 'EDITOR_SET_CONFIG', payload: { ...config, newViz: true, visualizationType: subType } })
|
|
76
|
-
}
|
|
77
|
-
dispatch({ type: 'EDITOR_SET_GLOBALACTIVE', payload: 1 })
|
|
78
|
-
} else {
|
|
79
|
-
const confirmation = !config.type || window.confirm('Changing visualization type will clear configuration settings. Do you want to continue?')
|
|
100
|
+
return newConfig
|
|
101
|
+
}
|
|
80
102
|
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
} as Visualization
|
|
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
|
+
}
|
|
87
108
|
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
} else {
|
|
95
|
-
newConfig.visualizationType = subType
|
|
96
|
-
}
|
|
97
|
-
if (type === 'chart') {
|
|
98
|
-
newConfig.visualizationSubType = stacked ? 'stacked' : 'regular'
|
|
99
|
-
newConfig.orientation = orientation
|
|
100
|
-
}
|
|
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)
|
|
114
|
+
}
|
|
101
115
|
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
}
|
|
105
|
-
}
|
|
116
|
+
if (tempConfig) {
|
|
117
|
+
dispatch({ type: 'EDITOR_SAVE', payload: tempConfig })
|
|
106
118
|
}
|
|
107
119
|
|
|
108
120
|
return (
|
|
109
|
-
<button className={
|
|
121
|
+
<button className={isActive ? 'active' : ''} onClick={handleClick} aria-label={label}>
|
|
110
122
|
{icon}
|
|
111
123
|
<span className='mt-1'>{label}</span>
|
|
112
124
|
</button>
|
|
113
125
|
)
|
|
114
126
|
}
|
|
115
127
|
|
|
116
|
-
const handleUpload = e => {
|
|
117
|
-
const file = e.target.files[0]
|
|
118
|
-
const reader = new FileReader()
|
|
119
|
-
reader.onload = e => {
|
|
120
|
-
const text = e.target.result
|
|
121
|
-
try {
|
|
122
|
-
const newConfig = JSON.parse(text as string)
|
|
123
|
-
dispatch({ type: 'EDITOR_SET_CONFIG', payload: newConfig })
|
|
124
|
-
dispatch({ type: 'EDITOR_SET_GLOBALACTIVE', payload: 1 })
|
|
125
|
-
} catch (e) {
|
|
126
|
-
alert('Invalid JSON')
|
|
127
|
-
}
|
|
128
|
-
}
|
|
129
|
-
reader.readAsText(file)
|
|
130
|
-
}
|
|
131
|
-
|
|
132
128
|
return (
|
|
133
129
|
<div className='choose-vis'>
|
|
134
|
-
<a
|
|
130
|
+
<a
|
|
131
|
+
href='https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/index.html'
|
|
132
|
+
target='_blank'
|
|
133
|
+
rel='noopener noreferrer'
|
|
134
|
+
className='guidance-link'
|
|
135
|
+
style={{ marginTop: 0, marginBottom: '2rem' }}
|
|
136
|
+
>
|
|
135
137
|
<div>
|
|
136
138
|
<p>
|
|
137
|
-
For more information on the types of data visualizations in the WCMS, including examples and best practices,
|
|
139
|
+
For more information on the types of data visualizations in the WCMS, including examples and best practices,{' '}
|
|
140
|
+
<u>see the WCMS Features Gallery</u>.
|
|
138
141
|
</p>
|
|
139
142
|
</div>
|
|
140
143
|
</a>
|
|
141
144
|
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
</
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
<Tooltip>
|
|
164
|
-
<Tooltip.Target>
|
|
165
|
-
<IconButton label='Waffle Chart' type='waffle-chart' subType='Waffle' icon={<WaffleChartIcon />} />
|
|
166
|
-
</Tooltip.Target>
|
|
167
|
-
<Tooltip.Content>Highlight a piece of data in relationship to a data set.</Tooltip.Content>
|
|
168
|
-
</Tooltip>
|
|
169
|
-
</li>
|
|
170
|
-
<li>
|
|
171
|
-
<Tooltip>
|
|
172
|
-
<Tooltip.Target>
|
|
173
|
-
<IconButton label='Gauge Chart' type='waffle-chart' subType='Gauge' icon={<GaugeChartIcon />} />
|
|
174
|
-
</Tooltip.Target>
|
|
175
|
-
<Tooltip.Content>Specify the calculation of a single data point (such as a percentage value) and present it on a horizontal scale.</Tooltip.Content>
|
|
176
|
-
</Tooltip>
|
|
177
|
-
</li>
|
|
178
|
-
</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
|
+
})}
|
|
179
166
|
|
|
180
|
-
<div className='heading-2'>Charts</div>
|
|
181
|
-
<ul className='grid cove-temp'>
|
|
182
|
-
<li>
|
|
183
|
-
<Tooltip position='right'>
|
|
184
|
-
<Tooltip.Target>
|
|
185
|
-
<IconButton label='Bar' type='chart' subType='Bar' orientation='vertical' icon={<BarIcon />} />
|
|
186
|
-
</Tooltip.Target>
|
|
187
|
-
<Tooltip.Content>Use bars to show comparisons between data categories.</Tooltip.Content>
|
|
188
|
-
</Tooltip>
|
|
189
|
-
</li>
|
|
190
|
-
<li>
|
|
191
|
-
<Tooltip>
|
|
192
|
-
<Tooltip.Target>
|
|
193
|
-
<IconButton label='Line' type='chart' subType='Line' orientation='vertical' icon={<LineIcon />} />
|
|
194
|
-
</Tooltip.Target>
|
|
195
|
-
<Tooltip.Content>Present one or more data trends over time.</Tooltip.Content>
|
|
196
|
-
</Tooltip>
|
|
197
|
-
</li>
|
|
198
|
-
<li>
|
|
199
|
-
<Tooltip>
|
|
200
|
-
<Tooltip.Target>
|
|
201
|
-
<IconButton label='Pie' type='chart' subType='Pie' orientation='vertical' icon={<PieIcon />} />
|
|
202
|
-
</Tooltip.Target>
|
|
203
|
-
<Tooltip.Content>Present the numerical proportions of a data series.</Tooltip.Content>
|
|
204
|
-
</Tooltip>
|
|
205
|
-
</li>
|
|
206
|
-
<li>
|
|
207
|
-
<Tooltip>
|
|
208
|
-
<Tooltip.Target>
|
|
209
|
-
<IconButton label='Paired Bar' type='chart' subType='Paired Bar' orientation='horizontal' icon={<PairedBarIcon />} />
|
|
210
|
-
</Tooltip.Target>
|
|
211
|
-
<Tooltip.Content>Use paired bars to show comparisons between two different data categories.</Tooltip.Content>
|
|
212
|
-
</Tooltip>
|
|
213
|
-
</li>
|
|
214
|
-
<li>
|
|
215
|
-
<Tooltip>
|
|
216
|
-
<Tooltip.Target>
|
|
217
|
-
<IconButton label='Deviation Bar' type='chart' subType='Deviation Bar' orientation='horizontal' stacked={false} icon={<DeviationIcon />} />
|
|
218
|
-
</Tooltip.Target>
|
|
219
|
-
<Tooltip.Content>Use deviation bars to display how individual values differ from a target.</Tooltip.Content>
|
|
220
|
-
</Tooltip>
|
|
221
|
-
</li>
|
|
222
|
-
<li>
|
|
223
|
-
<Tooltip>
|
|
224
|
-
<Tooltip.Target>
|
|
225
|
-
<IconButton label='Horizontal Bar (Stacked)' type='chart' subType='Bar' orientation='horizontal' stacked={true} icon={<HorizontalStackIcon />} />
|
|
226
|
-
</Tooltip.Target>
|
|
227
|
-
<Tooltip.Content>Use bars to show comparisons between data categories.</Tooltip.Content>
|
|
228
|
-
</Tooltip>
|
|
229
|
-
</li>
|
|
230
|
-
</ul>
|
|
231
|
-
|
|
232
|
-
<ul className='grid cove-temp'>
|
|
233
|
-
{/* temporarily hiding these */}
|
|
234
|
-
<li>
|
|
235
|
-
<Tooltip>
|
|
236
|
-
<Tooltip.Target>
|
|
237
|
-
<IconButton label='Box Plot' type='chart' subType='Box Plot' orientation='vertical' icon={<BoxPlotIcon />} />
|
|
238
|
-
</Tooltip.Target>
|
|
239
|
-
<Tooltip.Content>Display a box plot</Tooltip.Content>
|
|
240
|
-
</Tooltip>
|
|
241
|
-
</li>
|
|
242
|
-
<li>
|
|
243
|
-
<Tooltip>
|
|
244
|
-
<Tooltip.Target>
|
|
245
|
-
<IconButton label='Scatter Plot' type='chart' subType='Scatter Plot' orientation='vertical' icon={<ScatterPlotIcon />} />
|
|
246
|
-
</Tooltip.Target>
|
|
247
|
-
<Tooltip.Content>Display a scatter plot</Tooltip.Content>
|
|
248
|
-
</Tooltip>
|
|
249
|
-
</li>
|
|
250
|
-
<li>
|
|
251
|
-
<Tooltip>
|
|
252
|
-
<Tooltip.Target>
|
|
253
|
-
<IconButton label='Area Chart' type='chart' subType='Area Chart' orientation='vertical' icon={<AreaChartIcon />} />
|
|
254
|
-
</Tooltip.Target>
|
|
255
|
-
<Tooltip.Content>Display an area chart</Tooltip.Content>
|
|
256
|
-
</Tooltip>
|
|
257
|
-
</li>
|
|
258
|
-
<li>
|
|
259
|
-
<Tooltip>
|
|
260
|
-
<Tooltip.Target>
|
|
261
|
-
<IconButton label='Forecast Chart' type='chart' subType='Forecasting' orientation='vertical' icon={<ForecastIcon />} />
|
|
262
|
-
</Tooltip.Target>
|
|
263
|
-
<Tooltip.Content>Display a forecasting chart</Tooltip.Content>
|
|
264
|
-
</Tooltip>
|
|
265
|
-
</li>
|
|
266
|
-
|
|
267
|
-
{/* <li>
|
|
268
|
-
<Tooltip>
|
|
269
|
-
<Tooltip.Target>
|
|
270
|
-
<IconButton label='Forest Plot' type='chart' subType='Forest Plot' orientation='vertical' icon={<ForestPlotIcon />} />
|
|
271
|
-
</Tooltip.Target>
|
|
272
|
-
<Tooltip.Content>Display a forest plot</Tooltip.Content>
|
|
273
|
-
</Tooltip>
|
|
274
|
-
</li> */}
|
|
275
|
-
|
|
276
|
-
<li>
|
|
277
|
-
<Tooltip>
|
|
278
|
-
<Tooltip.Target>
|
|
279
|
-
<IconButton label='Sankey Diagram' type='chart' subType='Sankey' orientation='vertical' icon={<SankeyIcon />} />
|
|
280
|
-
</Tooltip.Target>
|
|
281
|
-
<Tooltip.Content>Display a sankey diagram</Tooltip.Content>
|
|
282
|
-
</Tooltip>
|
|
283
|
-
</li>
|
|
284
|
-
</ul>
|
|
285
|
-
|
|
286
|
-
<div className='heading-2'>Maps</div>
|
|
287
|
-
<ul className='grid cove-temp'>
|
|
288
|
-
<li>
|
|
289
|
-
<Tooltip position='right'>
|
|
290
|
-
<Tooltip.Target>
|
|
291
|
-
<IconButton label='United States (State- or County-Level)' type='map' subType='us' icon={<UsaIcon />} />
|
|
292
|
-
</Tooltip.Target>
|
|
293
|
-
<Tooltip.Content>Present a U.S. choropleth map at state or county level.</Tooltip.Content>
|
|
294
|
-
</Tooltip>
|
|
295
|
-
</li>
|
|
296
|
-
<li>
|
|
297
|
-
<Tooltip position='right'>
|
|
298
|
-
<Tooltip.Target>
|
|
299
|
-
<IconButton label='United States (HHS Regions)' type='map' subType='us-region' icon={<UsaRegionIcon />} />
|
|
300
|
-
</Tooltip.Target>
|
|
301
|
-
<Tooltip.Content>Present a U.S. choropleth map at state or county level.</Tooltip.Content>
|
|
302
|
-
</Tooltip>
|
|
303
|
-
</li>
|
|
304
|
-
<li>
|
|
305
|
-
<Tooltip>
|
|
306
|
-
<Tooltip.Target>
|
|
307
|
-
<IconButton label='World' type='map' subType='world' icon={<GlobeIcon />} />
|
|
308
|
-
</Tooltip.Target>
|
|
309
|
-
<Tooltip.Content>Present a choropleth map of the world.</Tooltip.Content>
|
|
310
|
-
</Tooltip>
|
|
311
|
-
</li>
|
|
312
|
-
<li>
|
|
313
|
-
<Tooltip>
|
|
314
|
-
<Tooltip.Target>
|
|
315
|
-
<IconButton label='U.S. State' type='map' subType='single-state' icon={<AlabamaGraphic />} />
|
|
316
|
-
</Tooltip.Target>
|
|
317
|
-
<Tooltip.Content>Present a choropleth map of an individual U.S. state.</Tooltip.Content>
|
|
318
|
-
</Tooltip>
|
|
319
|
-
</li>
|
|
320
|
-
<li>
|
|
321
|
-
<Tooltip>
|
|
322
|
-
<Tooltip.Target>
|
|
323
|
-
<IconButton label='U.S. Geocode' type='map' subType='us-county' generalType='us-geocode' icon={<UsaIcon />} />
|
|
324
|
-
</Tooltip.Target>
|
|
325
|
-
<Tooltip.Content>United States GeoCode</Tooltip.Content>
|
|
326
|
-
</Tooltip>
|
|
327
|
-
</li>
|
|
328
|
-
</ul>
|
|
329
167
|
<hr />
|
|
330
168
|
<div className='form-group'>
|
|
331
169
|
<label htmlFor='uploadConfig'>
|
|
@@ -339,8 +177,265 @@ export default function ChooseTab() {
|
|
|
339
177
|
</Tooltip.Content>
|
|
340
178
|
</Tooltip>
|
|
341
179
|
</label>
|
|
342
|
-
<input
|
|
180
|
+
<input
|
|
181
|
+
type='file'
|
|
182
|
+
accept='.txt,.json'
|
|
183
|
+
className='form-control-file'
|
|
184
|
+
id='uploadConfig'
|
|
185
|
+
onChange={handleUpload}
|
|
186
|
+
/>
|
|
343
187
|
</div>
|
|
344
188
|
</div>
|
|
345
189
|
)
|
|
346
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
|
+
]
|