@cdc/editor 1.4.3 → 1.4.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 (9) hide show
  1. package/dist/cdceditor.js +52 -52
  2. package/example/private/map.csv +60 -0
  3. package/example/private/test.html +1 -0
  4. package/example/valid-data-map.csv +2 -2
  5. package/package.json +9 -9
  6. package/src/CdcEditor.js +23 -16
  7. package/src/components/ChooseTab.js +230 -90
  8. package/src/components/DataImport.js +62 -17
  9. package/src/scss/main.scss +7 -2
package/example/private/map.csv ADDED
@@ -0,0 +1,60 @@
1
+ State,Activity Level,Funding Status,URL,
2
+ AL,Very High,*,https://www.cdc.gov/flu/,
3
+ AK,High,Current,https://www.cdc.gov/mmwr/,
4
+ AS,Moderate,Current,https://www.cdc.gov/flu/,
5
+ AZ,Low,Current,https://www.cdc.gov/flu/,
6
+ AR,Minimal,Current,https://www.cdc.gov/mmwr/,
7
+ CA,Very High,NA,https://www.cdc.gov/flu/,
8
+ CO,High,Current,https://www.cdc.gov/flu/,
9
+ CT,Moderate,Current,https://www.cdc.gov/mmwr/,
10
+ DE,Low,Current,https://www.cdc.gov/flu/,
11
+ DC,Minimal,Current,https://www.cdc.gov/flu/,
12
+ FL,Very High,Current,https://www.cdc.gov/mmwr/,
13
+ GA,High,Current,https://www.cdc.gov/flu/,
14
+ GU,Moderate,*,https://www.cdc.gov/flu/,
15
+ HI,Low,Current,https://www.cdc.gov/mmwr/,
16
+ ID,Minimal,Current,https://www.cdc.gov/flu/,
17
+ IL,Very High,Current,https://www.cdc.gov/flu/,
18
+ IN,High,Current,https://www.cdc.gov/mmwr/,
19
+ IA,Moderate,Current,https://www.cdc.gov/flu/,
20
+ KS,Low,Current,https://www.cdc.gov/flu/,
21
+ KY,Minimal,Current,https://www.cdc.gov/mmwr/,
22
+ LA,Very High,*,https://www.cdc.gov/flu/,
23
+ ME,High,Current,https://www.cdc.gov/flu/,
24
+ MH,Moderate,Current,https://www.cdc.gov/mmwr/,
25
+ MD,Low,Current,https://www.cdc.gov/flu/,
26
+ MA,Minimal,Current,https://www.cdc.gov/flu/,
27
+ MI,Very High,Current,https://www.cdc.gov/mmwr/,
28
+ FM,High,Current,https://www.cdc.gov/flu/,
29
+ MN,Moderate,NA,https://www.cdc.gov/flu/,
30
+ MS,Low,Current,https://www.cdc.gov/mmwr/,
31
+ MO,Minimal,Current,https://www.cdc.gov/flu/,
32
+ MT,Very High,Current,https://www.cdc.gov/flu/,
33
+ NE,High,Current,https://www.cdc.gov/mmwr/,
34
+ NV,Moderate,Current,https://www.cdc.gov/flu/,
35
+ NH,Low,Current,https://www.cdc.gov/flu/,
36
+ NJ,Minimal,Current,https://www.cdc.gov/mmwr/,
37
+ NM,Very High,NA,https://www.cdc.gov/flu/,
38
+ NY,High,Current,https://www.cdc.gov/flu/,
39
+ NC,Moderate,Current,https://www.cdc.gov/mmwr/,
40
+ ND,Low,Current,https://www.cdc.gov/flu/,
41
+ MP,Minimal,Current,https://www.cdc.gov/flu/,
42
+ OH,Very High,Current,https://www.cdc.gov/mmwr/,
43
+ OK,High,Current,https://www.cdc.gov/flu/,
44
+ OR,Moderate,Current,https://www.cdc.gov/flu/,
45
+ PW,Low,Current,https://www.cdc.gov/mmwr/,
46
+ PA,Minimal,Current,https://www.cdc.gov/flu/,
47
+ PR,Very High,Current,https://www.cdc.gov/flu/,
48
+ RI,High,Current,https://www.cdc.gov/mmwr/,
49
+ SC,Moderate,Current,https://www.cdc.gov/flu/,
50
+ SD,Low,Current,https://www.cdc.gov/flu/,
51
+ TN,Minimal,Current,https://www.cdc.gov/mmwr/,
52
+ TX,Very High,Current,https://www.cdc.gov/flu/,
53
+ UT,High,Current,https://www.cdc.gov/flu/,
54
+ VT,Moderate,Current,https://www.cdc.gov/mmwr/,
55
+ VI,Low,Current,https://www.cdc.gov/flu/,
56
+ VA,Minimal,Current,https://www.cdc.gov/flu/,
57
+ WA,Very High,Current,https://www.cdc.gov/mmwr/,
58
+ WV,High,Current,https://www.cdc.gov/flu/,
59
+ WI,Moderate,Current,https://www.cdc.gov/flu/,
60
+ WY,Low,Current,https://www.cdc.gov/mmwr/,
package/example/private/test.html ADDED
@@ -0,0 +1 @@
1
+ <!doctype html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <h1>Header</h1> <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.</p> <br> <p>Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar. The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen. </p><br><p>She packed her seven versalia, put her initial into the belt and made herself on the way. When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane. Pityful a rethoric question ran over her cheek.</p></body></html>
package/example/valid-data-map.csv CHANGED
@@ -1,5 +1,5 @@
1
1
  STATE,Rate,Location,URL
2
- Alabama,30,Vehicle,https://www.cdc.gov/
2
+ Alabama,130,Vehicle,https://www.cdc.gov/
3
3
  Alaska,40,Work,https://www.cdc.gov/
4
4
  American Samoa,55,Home,https://www.cdc.gov/
5
5
  Arizona,57,School,https://www.cdc.gov/
@@ -56,4 +56,4 @@ Virgin Islands,55,School,https://www.cdc.gov/
56
56
  Virginia,57,School,https://www.cdc.gov/
57
57
  Washington,62,Work,https://www.cdc.gov/
58
58
  West Virginia,25,Vehicle,https://www.cdc.gov/
59
- Wyoming,43,Vehicle,https://www.cdc.gov/
59
+ Wyoming,43,Vehicle,https://www.cdc.gov/
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cdc/editor",
3
- "version": "1.4.3",
3
+ "version": "1.4.4",
4
4
  "main": "dist/cdceditor",
5
5
  "bugs": {
6
6
  "url": "https://github.com/CDCgov/cdc-open-viz/issues"
@@ -18,13 +18,13 @@
18
18
  },
19
19
  "dependencies": {
20
20
  "@babel/runtime": "^7.12.5",
21
- "@cdc/chart": "^1.3.2",
22
- "@cdc/core": "^1.1.2",
23
- "@cdc/dashboard": "^1.1.2",
24
- "@cdc/data-bite": "^1.1.2",
25
- "@cdc/waffle-chart": "^1.0.0",
26
- "@cdc/markup-include": "^1.0.0",
27
- "@cdc/map": "^2.6.2",
21
+ "@cdc/chart": "^1.3.4",
22
+ "@cdc/core": "^1.1.4",
23
+ "@cdc/dashboard": "^1.1.4",
24
+ "@cdc/data-bite": "^1.1.4",
25
+ "@cdc/map": "^2.6.4",
26
+ "@cdc/markup-include": "^1.0.2",
27
+ "@cdc/waffle-chart": "^1.0.2",
28
28
  "axios": "^0.21.1",
29
29
  "d3": "^7.0.0",
30
30
  "html-react-parser": "1.4.9",
@@ -40,5 +40,5 @@
40
40
  "resolutions": {
41
41
  "@types/react": "17.x"
42
42
  },
43
- "gitHead": "170845062bcbb93f31270104688f69c4148935d8"
43
+ "gitHead": "ff89a7aea74c533413c62ef8859cc011e6b3cbfa"
44
44
  }
package/src/CdcEditor.js CHANGED
@@ -6,7 +6,11 @@ import ResizeObserver from 'resize-observer-polyfill'
6
6
 
7
7
  import getViewport from '@cdc/core/helpers/getViewport';
8
8
 
9
+ import { GlobalContextProvider } from '@cdc/core/components/GlobalContext'
9
10
  import GlobalState from './context';
11
+
12
+ import OverlayFrame from '@cdc/core/components/ui/OverlayFrame'
13
+
10
14
  import DataImport from './components/DataImport';
11
15
  import ChooseTab from './components/ChooseTab';
12
16
  import ConfigureTab from './components/ConfigureTab';
@@ -50,7 +54,7 @@ export default function CdcEditor({ config: configObj = {newViz: true}, hostname
50
54
  if(null !== tempConfig) {
51
55
  const parsedData = JSON.stringify(tempConfig)
52
56
  // Emit the data in a regular JS event so it can be consumed by anything.
53
- const event = new CustomEvent('updateVizConfig', { detail: parsedData})
57
+ const event = new CustomEvent('updateVizConfig', { detail: parsedData, bubbles: true })
54
58
  window.dispatchEvent(event)
55
59
  }
56
60
  }, [tempConfig])
@@ -98,20 +102,23 @@ export default function CdcEditor({ config: configObj = {newViz: true}, hostname
98
102
  }
99
103
 
100
104
  return (
101
- <GlobalState.Provider value={state}>
102
- <div className={`cdc-open-viz-module cdc-editor ${currentViewport}`} ref={outerContainerRef} >
103
- <Tabs className="top-level" startingTab={globalActive}>
104
- <TabPane title="1. Import Data" className="data-designer">
105
- <DataImport />
106
- </TabPane>
107
- <TabPane title="2. Choose Visualization Type" className="choose-type" disableRule={!config.data && !config.formattedData}>
108
- <ChooseTab />
109
- </TabPane>
110
- <TabPane title="3. Configure" className="configure" disableRule={null === config.data || !config.type}>
111
- <ConfigureTab containerEl={containerEl }/>
112
- </TabPane>
113
- </Tabs>
114
- </div>
115
- </GlobalState.Provider>
105
+ <GlobalContextProvider>
106
+ <GlobalState.Provider value={state}>
107
+ <div className={`cdc-open-viz-module cdc-editor ${currentViewport}`} ref={outerContainerRef} >
108
+ <Tabs className="top-level" startingTab={globalActive}>
109
+ <TabPane title="1. Import Data" className="data-designer">
110
+ <DataImport />
111
+ </TabPane>
112
+ <TabPane title="2. Choose Visualization Type" className="choose-type" disableRule={!config.data && !config.formattedData}>
113
+ <ChooseTab />
114
+ </TabPane>
115
+ <TabPane title="3. Configure" className="configure" disableRule={null === config.data || !config.type}>
116
+ <ConfigureTab containerEl={containerEl }/>
117
+ </TabPane>
118
+ </Tabs>
119
+ </div>
120
+ </GlobalState.Provider>
121
+ <OverlayFrame/>
122
+ </GlobalContextProvider>
116
123
  );
117
124
  }
package/src/components/ChooseTab.js CHANGED
@@ -1,103 +1,243 @@
1
- import React, { useContext, useEffect } from 'react';
2
- import '../scss/choose-vis-tab.scss';
3
-
4
- import GlobalState from '../context';
5
-
6
- import DashboardIcon from '../assets/icons/dashboard.svg';
7
- import BarIcon from '@cdc/core/assets/chart-bar-solid.svg';
8
- import LineIcon from '@cdc/core/assets/chart-line-solid.svg';
9
- import PieIcon from '@cdc/core/assets/chart-pie-solid.svg';
10
- import GlobeIcon from '@cdc/core/assets/world-graphic.svg';
11
- import UsaIcon from '@cdc/core/assets/usa-graphic.svg';
12
- import DataBiteIcon from '@cdc/core/assets/data-bite-graphic.svg';
13
- import WaffleChartIcon from '@cdc/core/assets/icon-grid.svg';
14
- import MarkupIncludeIcon from '@cdc/core/assets/icon-code.svg';
15
- import AlabamaGraphic from '@cdc/core/assets/alabama-graphic.svg';
16
- import PairedBarIcon from '@cdc/core/assets/paired-bar.svg';
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 '../assets/icons/dashboard.svg'
8
+ import BarIcon from '@cdc/core/assets/chart-bar-solid.svg'
9
+ import LineIcon from '@cdc/core/assets/chart-line-solid.svg'
10
+ import PieIcon from '@cdc/core/assets/chart-pie-solid.svg'
11
+ import GlobeIcon from '@cdc/core/assets/world-graphic.svg'
12
+ import UsaIcon from '@cdc/core/assets/usa-graphic.svg'
13
+ import UsaRegionIcon from '@cdc/core/assets/usa-region-graphic.svg'
14
+ import DataBiteIcon from '@cdc/core/assets/data-bite-graphic.svg'
15
+ import WaffleChartIcon from '@cdc/core/assets/icon-grid.svg'
16
+ import MarkupIncludeIcon from '@cdc/core/assets/icon-code.svg'
17
+ import AlabamaGraphic from '@cdc/core/assets/alabama-graphic.svg'
18
+ import PairedBarIcon from '@cdc/core/assets/paired-bar.svg'
19
+ import HorizontalStackIcon from '@cdc/core/assets/horizontal-stacked-bar.svg'
17
20
 
18
21
  export default function ChooseTab() {
19
- const {config, setConfig, setGlobalActive, tempConfig, setTempConfig} = useContext(GlobalState);
22
+ const { config, setConfig, setGlobalActive, tempConfig, setTempConfig } = useContext(GlobalState)
20
23
 
21
- useEffect(() => {
22
- if(tempConfig !== null) {
23
- setConfig(tempConfig)
24
- setTempConfig(null)
25
- }
26
- })
24
+ useEffect(() => {
25
+ if (tempConfig !== null) {
26
+ setConfig(tempConfig)
27
+ setTempConfig(null)
28
+ }
29
+ })
27
30
 
28
- /**
29
- * IconButton component
30
- */
31
- const IconButton = ({icon, label, type, subType, barType}) => {
32
- let isSubType = false
31
+ /**
32
+ * IconButton component
33
+ */
34
+ const IconButton = ({ icon, label, type, subType, barType, orientation, stacked = false }) => {
35
+ let isSubType = false
36
+ let isHorizontalStackedChart = false
37
+ let classNames;
33
38
 
34
- if(type === 'map' && config.general) {
35
- let geoType = config.general.geoType
36
- isSubType = (subType === geoType)
37
- }
39
+ if (type === 'map' && config.general) {
40
+ let geoType = config.general.geoType
41
+ isSubType = (subType === geoType)
42
+ }
38
43
 
39
- if(type === 'chart') {
40
- isSubType = (subType === config.visualizationType)
41
- }
44
+ if (type === 'chart') {
45
+ isSubType = (subType === config.visualizationType)
46
+ isHorizontalStackedChart = (orientation === config.orientation && stacked === true)
47
+ }
48
+
49
+ if (type === 'dashboard' || type === 'data-bite' || type === 'waffle-chart' || type === 'markup-include') isSubType = true
50
+
51
+ // TODO: sorry, we should refactor this at some point.
52
+ // trying to get this out for 4.22.5 - this is so stacked horizontal and bar charts aren't highlighted at the same time.
53
+ // this functionality appears to be working but is admittedly confusing.
54
+ if(type === 'chart' && stacked) {
55
+ classNames = (config.type === type && isSubType && config.visualizationSubType === 'stacked') ? 'active' : ''
56
+ } else if (type === 'chart' && !stacked && config.visualizationSubType !== 'stacked') {
57
+ classNames = (config.type === type && isSubType ) ? 'active' : ''
58
+ }
59
+
60
+ if(type !== 'chart') {
61
+ classNames = (config.type === type && isSubType && !isHorizontalStackedChart) ? 'active' : ''
62
+ }
63
+
64
+
65
+ let setTypes = () => {
66
+ // Only take the data/data source properties from existing config. Covers case of selecting a new visualization.
67
+ let newConfig = {
68
+ data: [ ...config.data ],
69
+ dataFileName: config.dataFileName,
70
+ dataFileSourceType: config.dataFileSourceType,
71
+ dataDescription: config.dataDescription,
72
+ dataUrl: config.dataUrl,
73
+ newViz: true,
74
+ type,
75
+ orientation: orientation ? orientation : null,
76
+ visualizationSubType: label === 'Horizontal Bar (Stacked)' ? 'stacked' : null
77
+ }
42
78
 
43
- if(type === 'dashboard' || type === 'data-bite' || type === 'waffle-chart' || type === 'markup-include') isSubType = true;
44
-
45
- let classNames = (config.type === type && isSubType) ? 'active' : ''
46
-
47
- let setTypes = () => {
48
- // Only take the data/data source properties from existing config. Covers case of selecting a new visualization.
49
- let newConfig = {
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
- }
58
-
59
- if(config.formattedData) {
60
- newConfig.formattedData = config.formattedData
61
- }
62
-
63
- if(type === 'map') {
64
- newConfig.general = {
65
- ...newConfig.general,
66
- geoType: subType
67
- }
68
- } else {
69
- newConfig.visualizationType = subType
70
- }
71
-
72
- setConfig(newConfig)
73
- setGlobalActive(2)
79
+ if (config.formattedData) {
80
+ newConfig.formattedData = config.formattedData
81
+ }
82
+
83
+ if (type === 'map') {
84
+ newConfig.general = {
85
+ ...newConfig.general,
86
+ geoType: subType
74
87
  }
88
+ } else {
89
+ newConfig.visualizationType = subType
90
+ }
75
91
 
76
- return (<button className={classNames} onClick={() => setTypes()} aria-label={label}>{icon}<span className="mt-1">{label}</span></button>)
92
+ setConfig(newConfig)
93
+ setGlobalActive(2)
77
94
  }
78
95
 
79
- return (
80
- <div className="choose-vis">
81
- <div className="heading-2">General</div>
82
- <ul className="grid">
83
- <li><IconButton label="Dashboard" type="dashboard" icon={ <DashboardIcon /> } /></li>
84
- <li><IconButton label="Data Bite" type="data-bite" icon={<DataBiteIcon />} /></li>
85
- <li><IconButton label="Waffle Chart" type="waffle-chart" icon={ <WaffleChartIcon /> } /></li>
86
- <li><IconButton label="Markup Include" type="markup-include" icon={ <MarkupIncludeIcon /> } /></li>
87
- </ul>
88
- <div className="heading-2">Charts</div>
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>
96
+ return (<button className={classNames} onClick={() => setTypes()} aria-label={label}>{icon}<span
97
+ className="mt-1">{label}</span></button>)
98
+ }
99
+
100
+ return (
101
+ <div className="choose-vis">
102
+ <a href="https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/index.html" target="_blank"
103
+ rel="noopener noreferrer" className="guidance-link" style={{marginTop: 0, marginBottom: "2rem"}}>
104
+ <div>
105
+ <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
106
  </div>
102
- )
107
+ </a>
108
+
109
+ <div className="heading-2">General</div>
110
+ <ul className="grid cove-temp"> {/*TODO: Remove cove class during refactor to Wizard*/}
111
+ <li>
112
+ <Tooltip position="right">
113
+ <Tooltip.Target>
114
+ <IconButton label="Dashboard" type="dashboard" icon={<DashboardIcon/>}/>
115
+ </Tooltip.Target>
116
+ <Tooltip.Content>
117
+ Present multiple data visualizations with shared filter controls.
118
+ </Tooltip.Content>
119
+ </Tooltip>
120
+ </li>
121
+ <li>
122
+ <Tooltip>
123
+ <Tooltip.Target>
124
+ <IconButton label="Data Bite" type="data-bite" icon={<DataBiteIcon/>}/>
125
+ </Tooltip.Target>
126
+ <Tooltip.Content>
127
+ Highlight a single aggregated value (e.g., sum or median).
128
+ </Tooltip.Content>
129
+ </Tooltip>
130
+ </li>
131
+ <li>
132
+ <Tooltip>
133
+ <Tooltip.Target>
134
+ <IconButton label="Waffle Chart" type="waffle-chart" icon={<WaffleChartIcon/>}/>
135
+ </Tooltip.Target>
136
+ <Tooltip.Content>
137
+ Highlight a piece of data in relationship to a data set.
138
+ </Tooltip.Content>
139
+ </Tooltip>
140
+ </li>
141
+ </ul>
142
+
143
+ <div className="heading-2">Charts</div>
144
+ <ul className="grid cove-temp">
145
+ <li>
146
+ <Tooltip position="right">
147
+ <Tooltip.Target>
148
+ <IconButton label="Bar" type="chart" subType="Bar" orientation="vertical" icon={<BarIcon/>}/>
149
+ </Tooltip.Target>
150
+ <Tooltip.Content>
151
+ Use bars to show comparisons between data categories.
152
+ </Tooltip.Content>
153
+ </Tooltip>
154
+ </li>
155
+ <li>
156
+ <Tooltip>
157
+ <Tooltip.Target>
158
+ <IconButton label="Line" type="chart" subType="Line" orientation="vertical" icon={<LineIcon/>}/>
159
+ </Tooltip.Target>
160
+ <Tooltip.Content>
161
+ Present one or more data trends over time.
162
+ </Tooltip.Content>
163
+ </Tooltip>
164
+ </li>
165
+ <li>
166
+ <Tooltip>
167
+ <Tooltip.Target>
168
+ <IconButton label="Pie" type="chart" subType="Pie" orientation="vertical" icon={<PieIcon/>}/>
169
+ </Tooltip.Target>
170
+ <Tooltip.Content>
171
+ Present the numerical proportions of a data series.
172
+ </Tooltip.Content>
173
+ </Tooltip>
174
+ </li>
175
+ <li>
176
+ <Tooltip>
177
+ <Tooltip.Target>
178
+ <IconButton label="Paired Bar" type="chart" subType="Paired Bar" orientation="horizontal" icon={<PairedBarIcon/>}/>
179
+ </Tooltip.Target>
180
+ <Tooltip.Content>
181
+ Use paired bars to show comparisons between two different data categories.
182
+ </Tooltip.Content>
183
+ </Tooltip>
184
+ </li>
185
+ <li>
186
+ <Tooltip>
187
+ <Tooltip.Target>
188
+ <IconButton label="Horizontal Bar (Stacked)" type="chart" subType="Bar" orientation="horizontal" stacked={true}
189
+ icon={<HorizontalStackIcon/>}/>
190
+ </Tooltip.Target>
191
+ <Tooltip.Content>
192
+ Use bars to show comparisons between data categories.
193
+ </Tooltip.Content>
194
+ </Tooltip>
195
+ </li>
196
+ </ul>
197
+
198
+ <div className="heading-2">Maps</div>
199
+ <ul className="grid cove-temp">
200
+ <li>
201
+ <Tooltip position="right">
202
+ <Tooltip.Target>
203
+ <IconButton label="United States (State- or County-Level)" type="map" subType="us" icon={<UsaIcon/>}/>
204
+ </Tooltip.Target>
205
+ <Tooltip.Content>
206
+ Present a U.S. choropleth map at state or county level.
207
+ </Tooltip.Content>
208
+ </Tooltip>
209
+ </li>
210
+ <li>
211
+ <Tooltip position="right">
212
+ <Tooltip.Target>
213
+ <IconButton label="United States (HHS Regions)" type="map" subType="us-region" icon={<UsaRegionIcon/>}/>
214
+ </Tooltip.Target>
215
+ <Tooltip.Content>
216
+ Present a U.S. choropleth map at state or county level.
217
+ </Tooltip.Content>
218
+ </Tooltip>
219
+ </li>
220
+ <li>
221
+ <Tooltip>
222
+ <Tooltip.Target>
223
+ <IconButton label="World" type="map" subType="world" icon={<GlobeIcon/>}/>
224
+ </Tooltip.Target>
225
+ <Tooltip.Content>
226
+ Present a choropleth map of the world.
227
+ </Tooltip.Content>
228
+ </Tooltip>
229
+ </li>
230
+ <li>
231
+ <Tooltip>
232
+ <Tooltip.Target>
233
+ <IconButton label="U.S. State" type="map" subType="single-state" icon={<AlabamaGraphic/>}/>
234
+ </Tooltip.Target>
235
+ <Tooltip.Content>
236
+ Present a choropleth map of an individual U.S. state.
237
+ </Tooltip.Content>
238
+ </Tooltip>
239
+ </li>
240
+ </ul>
241
+ </div>
242
+ )
103
243
  }
package/src/components/DataImport.js CHANGED
@@ -4,21 +4,28 @@ import { csvParse } from 'd3'
4
4
  import { useDebounce } from 'use-debounce'
5
5
  import { get } from 'axios'
6
6
 
7
+ import { DataTransform } from '@cdc/core/components/DataTransform'
8
+ import Modal from '@cdc/core/components/ui/Modal'
9
+ import { useGlobalContext } from '@cdc/core/components/GlobalContext'
10
+
7
11
  import GlobalState from '../context'
8
- import '../scss/data-import.scss'
12
+
9
13
  import TabPane from './TabPane'
10
14
  import Tabs from './Tabs'
11
15
  import PreviewDataTable from './PreviewDataTable'
12
-
13
16
  import LinkIcon from '../assets/icons/link.svg'
17
+
14
18
  import FileUploadIcon from '../assets/icons/file-upload-solid.svg'
15
19
  import CloseIcon from '@cdc/core/assets/icon-close.svg'
16
-
17
20
  import validMapData from '../../example/valid-data-map.csv'
21
+
18
22
  import validChartData from '../../example/valid-data-chart.csv'
19
23
  import validCountyMapData from '../../example/valid-county-data.csv'
20
24
 
21
- import { DataTransform } from '@cdc/core/components/DataTransform'
25
+
26
+ import '../scss/data-import.scss'
27
+ import Button from '@cdc/core/components/elements/Button'
28
+ import Icon from '@cdc/core/components/ui/Icon'
22
29
 
23
30
  export default function DataImport() {
24
31
  const {
@@ -34,6 +41,8 @@ export default function DataImport() {
34
41
  sharepath
35
42
  } = useContext(GlobalState)
36
43
 
44
+ const { overlay } = useGlobalContext()
45
+
37
46
  const transform = new DataTransform()
38
47
 
39
48
  const [ externalURL, setExternalURL ] = useState(config.dataFileSourceType === 'url' ? config.dataFileName : (config.dataUrl || ''))
@@ -129,7 +138,15 @@ export default function DataImport() {
129
138
 
130
139
  // Get the raw data as text from the file
131
140
  if (null === fileData) {
132
- fileSourceType = 'url'
141
+ // const round = 1000 * 60 * 15;
142
+ // const date = new Date();
143
+ // const rounded = new Date(date.getTime() - (date.getTime() % round));
144
+ // const trimmedDate = rounded.toString().replace(/\s+/g, "");
145
+
146
+ const newUrl = new URL(fileName);
147
+ // newUrl.searchParams.append("v", trimmedDate);
148
+
149
+ fileSourceType = "url";
133
150
  try {
134
151
  fileData = await loadExternal()
135
152
  fileSource = externalURL
@@ -243,7 +260,7 @@ export default function DataImport() {
243
260
 
244
261
  const loadFileFromUrl = (url) => {
245
262
  // const extUrl = (url) ? url : config.dataFileName // set url to what is saved in config unless the user has entered something
246
-
263
+
247
264
  return (
248
265
  <>
249
266
  <form className="input-group d-flex" onSubmit={(e) => e.preventDefault()}>
@@ -262,22 +279,50 @@ export default function DataImport() {
262
279
  )
263
280
  }
264
281
 
282
+ const warningModal = () => {
283
+ return (
284
+ <Modal fontTheme={'light'} headerBgColor={'#d73636'} showClose={false}>
285
+ <Modal.Header>
286
+ <center>Warning</center>
287
+ </Modal.Header>
288
+ <Modal.Content>
289
+ <center>
290
+ <p style={{ fontSize: '1rem' }}>Reseting will remove your data and settings.</p>
291
+ </center>
292
+ </Modal.Content>
293
+ <Modal.Footer>
294
+ <div style={{ textAlign: 'center' }}>
295
+ <p style={{
296
+ marginBottom: '1rem',
297
+ fontSize: '1rem'
298
+ }}>
299
+ Are you sure you want to continue?
300
+ </p>
301
+ <Button className="warn" style={{ marginRight: '1rem' }}
302
+ onClick={() => overlay.actions.toggleOverlay(false)}
303
+ >No, Cancel</Button>
304
+ <Button className="success" onClick={() => {
305
+ resetEditor({})
306
+ overlay.actions.toggleOverlay(false)
307
+ }}>Yes, Continue</Button>
308
+ </div>
309
+ </Modal.Footer>
310
+ </Modal>
311
+ )
312
+ }
313
+
265
314
  const resetEditor = (config = {}, message = 'Are you sure you want to do this?') => {
266
315
  config.newViz = true
267
- const confirmDataReset = window.confirm(message)
268
-
269
- if (confirmDataReset === true) {
270
- setTempConfig(null)
271
- setConfig(config)
272
- }
316
+ setTempConfig(null)
317
+ setConfig(config)
273
318
  }
274
319
 
275
320
  const resetButton = () => {
276
- return ( //todo convert to modal
277
- <button className="btn danger"
278
- onClick={() => resetEditor({}, 'Reseting will remove your data and settings. Do you want to continue?')}>Clear
279
- <CloseIcon/>
280
- </button>
321
+ return (
322
+ <Button className="warn" style={{ height: '2.5rem', display: 'inline-flex', justifyContent: 'center', alignItems: 'center' }}
323
+ onClick={() => overlay.actions.openOverlay(warningModal(), true)}>
324
+ Clear <Icon display="close" style={{marginLeft: '0.5rem'}}/>
325
+ </Button>
281
326
  )
282
327
  }
283
328