@cdc/editor 1.4.3 → 4.22.10-alpha.1
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 +70 -52
- package/example/private/map.csv +60 -0
- package/example/private/test.html +1 -0
- package/example/supported-cities.csv +107 -0
- package/example/valid-data-map.csv +4 -3
- package/package.json +9 -9
- package/src/CdcEditor.js +84 -16
- package/src/components/ChooseTab.js +236 -85
- package/src/components/DataImport.js +337 -297
- package/src/scss/configure-tab.scss +4 -1
- package/src/scss/data-import.scss +32 -55
- package/src/scss/main.scss +16 -1
- package/src/assets/icons/dashboard.svg +0 -8
|
@@ -1,103 +1,254 @@
|
|
|
1
|
-
import React, { useContext, useEffect } from 'react'
|
|
2
|
-
import '../scss/choose-vis-tab.scss'
|
|
3
|
-
|
|
4
|
-
import GlobalState from '../context'
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
import
|
|
8
|
-
import
|
|
9
|
-
import
|
|
10
|
-
import
|
|
11
|
-
import
|
|
12
|
-
import
|
|
13
|
-
import
|
|
14
|
-
import
|
|
15
|
-
import
|
|
16
|
-
import
|
|
1
|
+
import React, { useContext, useEffect } from 'react'
|
|
2
|
+
import '../scss/choose-vis-tab.scss'
|
|
3
|
+
|
|
4
|
+
import GlobalState from '../context'
|
|
5
|
+
import Tooltip from '@cdc/core/components/ui/Tooltip'
|
|
6
|
+
|
|
7
|
+
import DashboardIcon from '@cdc/core/assets/icon-dashboard.svg'
|
|
8
|
+
import BarIcon from '@cdc/core/assets/icon-chart-bar.svg'
|
|
9
|
+
import LineIcon from '@cdc/core/assets/icon-chart-line.svg'
|
|
10
|
+
import PieIcon from '@cdc/core/assets/icon-chart-pie.svg'
|
|
11
|
+
import GlobeIcon from '@cdc/core/assets/icon-map-world.svg'
|
|
12
|
+
import UsaIcon from '@cdc/core/assets/icon-map-usa.svg'
|
|
13
|
+
import UsaRegionIcon from '@cdc/core/assets/usa-region-graphic.svg'
|
|
14
|
+
import DataBiteIcon from '@cdc/core/assets/icon-databite.svg'
|
|
15
|
+
import WaffleChartIcon from '@cdc/core/assets/icon-grid.svg'
|
|
16
|
+
import AlabamaGraphic from '@cdc/core/assets/icon-map-alabama.svg'
|
|
17
|
+
import PairedBarIcon from '@cdc/core/assets/icon-chart-bar-paired.svg'
|
|
18
|
+
import HorizontalStackIcon from '@cdc/core/assets/icon-chart-bar-stacked.svg'
|
|
17
19
|
|
|
18
20
|
export default function ChooseTab() {
|
|
19
|
-
|
|
21
|
+
const { config, setConfig, setGlobalActive, tempConfig, setTempConfig } = useContext(GlobalState)
|
|
20
22
|
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
23
|
+
useEffect(() => {
|
|
24
|
+
if (tempConfig !== null) {
|
|
25
|
+
setConfig(tempConfig)
|
|
26
|
+
setTempConfig(null)
|
|
27
|
+
}
|
|
28
|
+
})
|
|
27
29
|
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
30
|
+
/**
|
|
31
|
+
* IconButton component
|
|
32
|
+
*/
|
|
33
|
+
const IconButton = ({ icon, label, type, subType, barType, orientation, stacked = false, generalType = "data" }) => {
|
|
34
|
+
let isSubType = false
|
|
35
|
+
let isHorizontalStackedChart = false
|
|
36
|
+
let classNames;
|
|
33
37
|
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
+
if (type === 'map' && config.general) {
|
|
39
|
+
let geoType = config.general.geoType
|
|
40
|
+
isSubType = (subType === geoType)
|
|
41
|
+
}
|
|
38
42
|
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
43
|
+
if (type === 'chart') {
|
|
44
|
+
isSubType = (subType === config.visualizationType)
|
|
45
|
+
isHorizontalStackedChart = (orientation === config.orientation && stacked === true)
|
|
46
|
+
}
|
|
42
47
|
|
|
43
|
-
|
|
48
|
+
if(type === 'dashboard' || type === 'data-bite' || type === 'waffle-chart' || type === 'markup-include') isSubType = true;
|
|
44
49
|
|
|
45
|
-
|
|
50
|
+
// TODO: sorry, we should refactor this at some point.
|
|
51
|
+
// trying to get this out for 4.22.5 - this is so stacked horizontal and bar charts aren't highlighted at the same time.
|
|
52
|
+
// this functionality appears to be working but is admittedly confusing.
|
|
53
|
+
if(type === 'chart' && stacked) {
|
|
54
|
+
classNames = (config.type === type && isSubType && config.visualizationSubType === 'stacked') ? 'active' : ''
|
|
55
|
+
} else if (type === 'chart' && !stacked && config.visualizationSubType !== 'stacked') {
|
|
56
|
+
classNames = (config.type === type && isSubType ) ? 'active' : ''
|
|
57
|
+
}
|
|
46
58
|
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
data: [...config.data],
|
|
51
|
-
dataFileName: config.dataFileName,
|
|
52
|
-
dataFileSourceType: config.dataFileSourceType,
|
|
53
|
-
dataDescription: config.dataDescription,
|
|
54
|
-
dataUrl: config.dataUrl,
|
|
55
|
-
newViz: true,
|
|
56
|
-
type
|
|
57
|
-
}
|
|
59
|
+
if(type !== 'chart') {
|
|
60
|
+
classNames = (config.type === type && isSubType && !isHorizontalStackedChart) ? 'active' : ''
|
|
61
|
+
}
|
|
58
62
|
|
|
59
|
-
if(config.formattedData) {
|
|
60
|
-
newConfig.formattedData = config.formattedData
|
|
61
|
-
}
|
|
62
63
|
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
64
|
+
let setTypes = () => {
|
|
65
|
+
if(type === config.type){
|
|
66
|
+
if(subType !== config.visualizationType){
|
|
67
|
+
setConfig({...config, newViz: true, visualizationType: subType})
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
setGlobalActive(1)
|
|
71
|
+
} else {
|
|
72
|
+
let confirmation = !config.type || window.confirm('Changing visualization type will clear configuration settings. Do you want to continue?');
|
|
73
|
+
|
|
74
|
+
if(confirmation){
|
|
75
|
+
let newConfig = {
|
|
76
|
+
newViz: true,
|
|
77
|
+
datasets: {},
|
|
78
|
+
type
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
if(type === 'map') {
|
|
82
|
+
newConfig.general = {
|
|
83
|
+
...newConfig.general,
|
|
84
|
+
geoType: subType,
|
|
85
|
+
type: generalType
|
|
70
86
|
}
|
|
87
|
+
} else {
|
|
88
|
+
newConfig.visualizationType = subType
|
|
89
|
+
}
|
|
71
90
|
|
|
72
|
-
|
|
73
|
-
|
|
91
|
+
setConfig(newConfig);
|
|
92
|
+
setGlobalActive(1)
|
|
74
93
|
}
|
|
75
|
-
|
|
76
|
-
return (<button className={classNames} onClick={() => setTypes()} aria-label={label}>{icon}<span className="mt-1">{label}</span></button>)
|
|
94
|
+
}
|
|
77
95
|
}
|
|
78
96
|
|
|
79
|
-
return (
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
<ul className="grid">
|
|
90
|
-
<li><IconButton label="Bar" type="chart" subType="Bar" icon={ <BarIcon /> } /></li>
|
|
91
|
-
<li><IconButton label="Line" type="chart" subType="Line" icon={ <LineIcon /> } /></li>
|
|
92
|
-
<li><IconButton label="Pie" type="chart" subType="Pie" icon={ <PieIcon /> } /></li>
|
|
93
|
-
<li><IconButton label="Paired Bar" type="chart" subType="Paired Bar" icon={ <PairedBarIcon /> } /></li>
|
|
94
|
-
</ul>
|
|
95
|
-
<div className="heading-2">Maps</div>
|
|
96
|
-
<ul className="grid">
|
|
97
|
-
<li><IconButton label="United States (State- or County-Level)" type="map" subType="us" icon={ <UsaIcon /> } /></li>
|
|
98
|
-
<li><IconButton label="World" type="map" subType="world" icon={ <GlobeIcon /> } /></li>
|
|
99
|
-
<li><IconButton label="U.S. State" type="map" subType="single-state" icon={ <AlabamaGraphic /> } /></li>
|
|
100
|
-
</ul>
|
|
97
|
+
return (<button className={classNames} onClick={() => setTypes()} aria-label={label}>{icon}<span
|
|
98
|
+
className="mt-1">{label}</span></button>)
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
return (
|
|
102
|
+
<div className="choose-vis">
|
|
103
|
+
<a href="https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/index.html" target="_blank"
|
|
104
|
+
rel="noopener noreferrer" className="guidance-link" style={{marginTop: 0, marginBottom: "2rem"}}>
|
|
105
|
+
<div>
|
|
106
|
+
<p>For more information on the types of data visualizations in the WCMS, including examples and best practices, <u>see the WCMS Features Gallery</u>.</p>
|
|
101
107
|
</div>
|
|
102
|
-
|
|
108
|
+
</a>
|
|
109
|
+
|
|
110
|
+
<div className="heading-2">General</div>
|
|
111
|
+
<ul className="grid cove-temp"> {/*TODO: Remove cove class during refactor to Wizard*/}
|
|
112
|
+
<li>
|
|
113
|
+
<Tooltip position="right">
|
|
114
|
+
<Tooltip.Target>
|
|
115
|
+
<IconButton label="Dashboard" type="dashboard" icon={<DashboardIcon/>}/>
|
|
116
|
+
</Tooltip.Target>
|
|
117
|
+
<Tooltip.Content>
|
|
118
|
+
Present multiple data visualizations with shared filter controls.
|
|
119
|
+
</Tooltip.Content>
|
|
120
|
+
</Tooltip>
|
|
121
|
+
</li>
|
|
122
|
+
<li>
|
|
123
|
+
<Tooltip>
|
|
124
|
+
<Tooltip.Target>
|
|
125
|
+
<IconButton label="Data Bite" type="data-bite" icon={<DataBiteIcon/>}/>
|
|
126
|
+
</Tooltip.Target>
|
|
127
|
+
<Tooltip.Content>
|
|
128
|
+
Highlight a single aggregated value (e.g., sum or median).
|
|
129
|
+
</Tooltip.Content>
|
|
130
|
+
</Tooltip>
|
|
131
|
+
</li>
|
|
132
|
+
<li>
|
|
133
|
+
<Tooltip>
|
|
134
|
+
<Tooltip.Target>
|
|
135
|
+
<IconButton label="Waffle Chart" type="waffle-chart" icon={<WaffleChartIcon/>}/>
|
|
136
|
+
</Tooltip.Target>
|
|
137
|
+
<Tooltip.Content>
|
|
138
|
+
Highlight a piece of data in relationship to a data set.
|
|
139
|
+
</Tooltip.Content>
|
|
140
|
+
</Tooltip>
|
|
141
|
+
</li>
|
|
142
|
+
</ul>
|
|
143
|
+
|
|
144
|
+
<div className="heading-2">Charts</div>
|
|
145
|
+
<ul className="grid cove-temp">
|
|
146
|
+
<li>
|
|
147
|
+
<Tooltip position="right">
|
|
148
|
+
<Tooltip.Target>
|
|
149
|
+
<IconButton label="Bar" type="chart" subType="Bar" orientation="vertical" icon={<BarIcon/>}/>
|
|
150
|
+
</Tooltip.Target>
|
|
151
|
+
<Tooltip.Content>
|
|
152
|
+
Use bars to show comparisons between data categories.
|
|
153
|
+
</Tooltip.Content>
|
|
154
|
+
</Tooltip>
|
|
155
|
+
</li>
|
|
156
|
+
<li>
|
|
157
|
+
<Tooltip>
|
|
158
|
+
<Tooltip.Target>
|
|
159
|
+
<IconButton label="Line" type="chart" subType="Line" orientation="vertical" icon={<LineIcon/>}/>
|
|
160
|
+
</Tooltip.Target>
|
|
161
|
+
<Tooltip.Content>
|
|
162
|
+
Present one or more data trends over time.
|
|
163
|
+
</Tooltip.Content>
|
|
164
|
+
</Tooltip>
|
|
165
|
+
</li>
|
|
166
|
+
<li>
|
|
167
|
+
<Tooltip>
|
|
168
|
+
<Tooltip.Target>
|
|
169
|
+
<IconButton label="Pie" type="chart" subType="Pie" orientation="vertical" icon={<PieIcon/>}/>
|
|
170
|
+
</Tooltip.Target>
|
|
171
|
+
<Tooltip.Content>
|
|
172
|
+
Present the numerical proportions of a data series.
|
|
173
|
+
</Tooltip.Content>
|
|
174
|
+
</Tooltip>
|
|
175
|
+
</li>
|
|
176
|
+
<li>
|
|
177
|
+
<Tooltip>
|
|
178
|
+
<Tooltip.Target>
|
|
179
|
+
<IconButton label="Paired Bar" type="chart" subType="Paired Bar" orientation="horizontal" icon={<PairedBarIcon/>}/>
|
|
180
|
+
</Tooltip.Target>
|
|
181
|
+
<Tooltip.Content>
|
|
182
|
+
Use paired bars to show comparisons between two different data categories.
|
|
183
|
+
</Tooltip.Content>
|
|
184
|
+
</Tooltip>
|
|
185
|
+
</li>
|
|
186
|
+
<li>
|
|
187
|
+
<Tooltip>
|
|
188
|
+
<Tooltip.Target>
|
|
189
|
+
<IconButton label="Horizontal Bar (Stacked)" type="chart" subType="Bar" orientation="horizontal" stacked={true}
|
|
190
|
+
icon={<HorizontalStackIcon/>}/>
|
|
191
|
+
</Tooltip.Target>
|
|
192
|
+
<Tooltip.Content>
|
|
193
|
+
Use bars to show comparisons between data categories.
|
|
194
|
+
</Tooltip.Content>
|
|
195
|
+
</Tooltip>
|
|
196
|
+
</li>
|
|
197
|
+
</ul>
|
|
198
|
+
|
|
199
|
+
<div className="heading-2">Maps</div>
|
|
200
|
+
<ul className="grid cove-temp">
|
|
201
|
+
<li>
|
|
202
|
+
<Tooltip position="right">
|
|
203
|
+
<Tooltip.Target>
|
|
204
|
+
<IconButton label="United States (State- or County-Level)" type="map" subType="us" icon={<UsaIcon/>}/>
|
|
205
|
+
</Tooltip.Target>
|
|
206
|
+
<Tooltip.Content>
|
|
207
|
+
Present a U.S. choropleth map at state or county level.
|
|
208
|
+
</Tooltip.Content>
|
|
209
|
+
</Tooltip>
|
|
210
|
+
</li>
|
|
211
|
+
<li>
|
|
212
|
+
<Tooltip position="right">
|
|
213
|
+
<Tooltip.Target>
|
|
214
|
+
<IconButton label="United States (HHS Regions)" type="map" subType="us-region" icon={<UsaRegionIcon/>}/>
|
|
215
|
+
</Tooltip.Target>
|
|
216
|
+
<Tooltip.Content>
|
|
217
|
+
Present a U.S. choropleth map at state or county level.
|
|
218
|
+
</Tooltip.Content>
|
|
219
|
+
</Tooltip>
|
|
220
|
+
</li>
|
|
221
|
+
<li>
|
|
222
|
+
<Tooltip>
|
|
223
|
+
<Tooltip.Target>
|
|
224
|
+
<IconButton label="World" type="map" subType="world" icon={<GlobeIcon/>}/>
|
|
225
|
+
</Tooltip.Target>
|
|
226
|
+
<Tooltip.Content>
|
|
227
|
+
Present a choropleth map of the world.
|
|
228
|
+
</Tooltip.Content>
|
|
229
|
+
</Tooltip>
|
|
230
|
+
</li>
|
|
231
|
+
<li>
|
|
232
|
+
<Tooltip>
|
|
233
|
+
<Tooltip.Target>
|
|
234
|
+
<IconButton label="U.S. State" type="map" subType="single-state" icon={<AlabamaGraphic/>}/>
|
|
235
|
+
</Tooltip.Target>
|
|
236
|
+
<Tooltip.Content>
|
|
237
|
+
Present a choropleth map of an individual U.S. state.
|
|
238
|
+
</Tooltip.Content>
|
|
239
|
+
</Tooltip>
|
|
240
|
+
</li>
|
|
241
|
+
<li>
|
|
242
|
+
<Tooltip>
|
|
243
|
+
<Tooltip.Target>
|
|
244
|
+
<IconButton label="U.S. Geocode" type="map" subType="us-county" generalType="us-geocode" icon={<UsaIcon />}/>
|
|
245
|
+
</Tooltip.Target>
|
|
246
|
+
<Tooltip.Content>
|
|
247
|
+
United States GeoCode
|
|
248
|
+
</Tooltip.Content>
|
|
249
|
+
</Tooltip>
|
|
250
|
+
</li>
|
|
251
|
+
</ul>
|
|
252
|
+
</div>
|
|
253
|
+
)
|
|
103
254
|
}
|