@cdc/editor 1.4.4 → 4.22.10-alpha.1

package/example/supported-cities.csv

@@ -0,0 +1,107 @@
+City,Longitude,Latitude,Value
+Albuquerque,-106.650421,35.084385,1
+Anaheim,-117.914299,33.836594,2
+Anchorage,-149.900284,61.218056,3
+Arlington,-97.108063,32.735687,4
+Atlanta,-84.387985,33.748997,5
+Aurora,-93.717979,36.97089,6
+Austin,-97.743057,30.267153,7
+Bakersfield,-119.018715,35.373291,8
+Baltimore,-76.61219,39.290386,9
+Baton Rouge,-91.187149,30.451468,10
+Boise,-116.202316,43.615021,11
+Boston,-71.058884,42.360081,12
+Buffalo,-78.878372,42.886448,13
+Chandler,-111.841248,33.30616,14
+Charlotte,-80.843124,35.227085,15
+Chesapeake,-76.287491,36.768208,16
+Chicago,-87.629799,41.878113,17
+Chula Vista,-117.084198,32.640053,18
+Cincinnati,-84.512016,39.103119,19
+Cleveland,-81.694359,41.499321,20
+Colorado Springs,-104.821365,38.833881,21
+Columbus,-82.998795,39.961178,22
+Corpus Christi,-97.396378,27.800583,23
+Dallas,-96.796989,32.776665,24
+Denver,-104.99025,39.739235,25
+Detroit,-83.045753,42.331429,26
+District of Columbia,-77.036873,38.907192,27
+Durham,-78.898621,35.994034,28
+El Paso,-106.485023,31.761877,29
+Fort Wayne,-85.139351,41.079273,30
+Ft Wayne,-85.139351,41.079273,31
+Fort Worth,-97.330765,32.755489,32
+Fremont,-121.988571,37.548271,33
+Fresno,-119.787125,36.737797,34
+Garland,-96.638885,32.912624,35
+Gilbert,-111.789024,33.352825,36
+Glendale,-118.255074,34.142509,37
+Greensboro,-79.791977,36.072636,38
+Henderson,-114.98172,36.039524,39
+Hialeah,-80.278107,25.857595,40
+Honolulu,-157.858337,21.306944,41
+Houston,-95.358421,29.749907,42
+Indianapolis,-86.158066,39.768402,43
+Irvine,-117.826508,33.684566,44
+Irving,-96.948891,32.814018,45
+Jacksonville,-81.655647,30.332184,46
+Jersey City,-74.077644,40.728157,47
+Kansas City,-94.578568,39.099728,48
+Laredo,-99.507553,27.503561,49
+Las Vegas,-115.139832,36.169941,50
+Lexington,-84.503716,38.040585,51
+Lincoln,-95.262955,37.346134,52
+Long Beach,-118.193741,33.77005,53
+Los Angeles,-118.243683,34.052235,54
+Los Angeles County,-118.229362,34.058762,55
+Louisville,-85.758453,38.252666,56
+Lubbock,-101.855164,33.577862,57
+Madison,-89.40123,43.073051,58
+"Marion County, Indiana",-86.136543,39.781029,59
+Memphis,-90.048981,35.149532,60
+Mesa,-111.831474,33.415184,61
+Miami,-80.191788,25.761681,62
+Milwaukee,-87.906471,43.038902,63
+Minneapolis,-93.265015,44.977753,64
+"Montgomery County, Maryland",-77.199406,39.153515,65
+Nashville,-86.781601,36.162663,66
+New Orleans,-90.071533,29.951065,67
+New York City,-74.005974,40.712776,68
+Newark,-95.582733,37.443188,69
+Norfolk,-76.285873,36.850769,70
+North Las Vegas,-115.114571,36.19585,71
+Oakland,-122.271111,37.804363,72
+Oklahoma City,-97.516426,35.46756,73
+Omaha,-95.934502,41.256538,74
+Orlando,-81.379234,28.538336,75
+Philadelphia,-75.165222,39.952583,76
+Phoenix,-112.074036,33.448376,77
+Pittsburgh,-79.995888,40.440624,78
+Plano,-96.698883,33.019844,79
+Portland,-122.658722,45.51223,80
+Raleigh,-78.638176,35.779591,81
+Reno,-119.813805,39.529633,82
+Richmond,-77.43605,37.540726,83
+Riverside,-117.375496,33.980602,84
+Sacramento,-121.4944,38.581573,85
+Saint Paul,-93.089958,44.953705,86
+San Antonio,-98.493629,29.424122,87
+San Diego,-117.161087,32.715736,88
+San Francisco,-122.419418,37.774929,89
+San Jose,-121.88633,37.338207,90
+Santa Ana,-117.867653,33.745472,91
+Scottsdale,-111.926048,33.494171,92
+Seattle,-122.332069,47.606209,93
+Spokane,-117.426048,47.658779,94
+St. Louis,-90.199402,38.627003,95
+St. Petersburg,-82.640289,27.767601,96
+Stockton,-121.290779,37.957703,97
+Tampa,-82.457176,27.950575,98
+Toledo,-83.537865,41.652805,99
+Tucson,-110.974709,32.222607,100
+Tuscon,-110.974709,32.222607,101
+Tulsa,-95.992775,36.15398,102
+Virginia Beach,-75.977982,36.852924,103
+Wichita,-97.330055,37.687176,104
+Winston Salem,-80.244217,36.099861,105
+Winston–Salem,-80.244217,36.099861,106

package/example/valid-data-map.csv

@@ -1,4 +1,5 @@
-STATE,Rate,Location,URL
+STATE,Rate,Location,URL
+Overall,55,Vehicle,https://www.cdc.gov
 Alabama,130,Vehicle,https://www.cdc.gov/
 Alaska,40,Work,https://www.cdc.gov/
 American Samoa,55,Home,https://www.cdc.gov/

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cdc/editor",
-  "version": "1.4.4",
+  "version": "4.22.10-alpha.1",
   "main": "dist/cdceditor",
   "bugs": {
     "url": "https://github.com/CDCgov/cdc-open-viz/issues"
@@ -18,13 +18,13 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.12.5",
-    "@cdc/chart": "^1.3.4",
-    "@cdc/core": "^1.1.4",
-    "@cdc/dashboard": "^1.1.4",
-    "@cdc/data-bite": "^1.1.4",
-    "@cdc/map": "^2.6.4",
-    "@cdc/markup-include": "^1.0.2",
-    "@cdc/waffle-chart": "^1.0.2",
+    "@cdc/chart": "^9.22.9",
+    "@cdc/core": "^4.22.10",
+    "@cdc/dashboard": "^4.22.10-alpha.1",
+    "@cdc/data-bite": "^4.22.10",
+    "@cdc/map": "^4.22.10-alpha.1",
+    "@cdc/markup-include": "^4.22.10",
+    "@cdc/waffle-chart": "^4.22.10",
     "axios": "^0.21.1",
     "d3": "^7.0.0",
     "html-react-parser": "1.4.9",
@@ -40,5 +40,5 @@
   "resolutions": {
     "@types/react": "17.x"
   },
-  "gitHead": "ff89a7aea74c533413c62ef8859cc011e6b3cbfa"
+  "gitHead": "bc6f9efd741e5b22140edc58c7a7f9e5efc43d1e"
 }

package/src/CdcEditor.js

@@ -33,6 +33,54 @@ export default function CdcEditor({ config: configObj = {newViz: true}, hostname
     startingTab = 2
   }
 
+  // Legacy support - dashboards using a single dataset
+  if(config.type === 'dashboard'){
+    let legacyUpdateNeeded = false;
+    let newConfig;
+
+    if(config.data || config.dataUrl){
+      legacyUpdateNeeded = true;
+      newConfig = {...config};
+
+      newConfig.datasets = {};
+      newConfig.datasets[config.dataFileName || 'dataset-1'] = {
+        data: config.data,
+        dataUrl: config.dataUrl,
+        dataFileName: config.dataFileName || 'dataset-1',
+        dataFileSourceType: config.dataFileSourceType
+      };
+
+      Object.keys(newConfig.visualizations).forEach(vizKey => {
+        newConfig.visualizations[vizKey].dataKey = config.dataFileName || 'dataset-1';
+        newConfig.visualizations[vizKey].dataDescription = newConfig.dataDescription;
+        newConfig.visualizations[vizKey].formattedData = newConfig.formattedData;
+      });
+
+      delete newConfig.data;
+      delete newConfig.dataUrl;
+      delete newConfig.dataFileName;
+      delete newConfig.dataFileSourceType;
+      delete newConfig.dataDescription;
+      delete newConfig.formattedData;
+    }
+
+    if(config.dashboard && config.dashboard.filters){
+      legacyUpdateNeeded = true;
+      newConfig = {...config};
+
+      newConfig.dashboard.sharedFilters = newConfig.dashboard.sharedFilters || [];
+      newConfig.dashboard.filters.forEach(filter => {
+        newConfig.dashboard.sharedFilters.push({...filter, key: filter.label, showDropdown: true, usedBy: Object.keys(newConfig.visualizations)});
+      });
+
+      delete newConfig.dashboard.filters;
+    }
+    
+    if(legacyUpdateNeeded){
+      setConfig(newConfig);
+    }
+  }
+
   const [globalActive, setGlobalActive] = useState(startingTab);
 
   const resizeObserver = new ResizeObserver(([ container ]) => {
@@ -101,18 +149,31 @@ export default function CdcEditor({ config: configObj = {newViz: true}, hostname
     sharepath
   }
 
+  let configureDisabled = true;
+
+  if(config.type !== 'dashboard'){
+    if(config.formattedData){
+      configureDisabled = false;
+    }
+  } else {
+    if(config.datasets && Object.keys(config.datasets).length > 0){
+      configureDisabled = false;
+    }
+  }
+
   return (
     <GlobalContextProvider>
       <GlobalState.Provider value={state}>
-        <div className={`cdc-open-viz-module cdc-editor ${currentViewport}`} ref={outerContainerRef} >
+        <div className={`cdc-open-viz-module cdc-editor ${currentViewport}`} ref={outerContainerRef}>
           <Tabs className="top-level" startingTab={globalActive}>
-            <TabPane title="1. Import Data" className="data-designer">
-              <DataImport />
-            </TabPane>
-            <TabPane title="2. Choose Visualization Type" className="choose-type" disableRule={!config.data && !config.formattedData}>
+            <TabPane title="1. Choose Visualization Type" className="choose-type">
               <ChooseTab />
             </TabPane>
-            <TabPane title="3. Configure" className="configure" disableRule={null === config.data || !config.type}>
+            <TabPane title="2. Import Data" className="data-designer" disableRule={!config.type}>
+              <DataImport />
+            </TabPane>
+            
+            <TabPane title="3. Configure" className="configure" disableRule={configureDisabled}>
               <ConfigureTab containerEl={containerEl }/>
             </TabPane>
           </Tabs>

package/src/components/ChooseTab.js

@@ -4,19 +4,18 @@ import '../scss/choose-vis-tab.scss'
 import GlobalState from '../context'
 import Tooltip from '@cdc/core/components/ui/Tooltip'
 
-import DashboardIcon from '../assets/icons/dashboard.svg'
-import BarIcon from '@cdc/core/assets/chart-bar-solid.svg'
-import LineIcon from '@cdc/core/assets/chart-line-solid.svg'
-import PieIcon from '@cdc/core/assets/chart-pie-solid.svg'
-import GlobeIcon from '@cdc/core/assets/world-graphic.svg'
-import UsaIcon from '@cdc/core/assets/usa-graphic.svg'
+import DashboardIcon from '@cdc/core/assets/icon-dashboard.svg'
+import BarIcon from '@cdc/core/assets/icon-chart-bar.svg'
+import LineIcon from '@cdc/core/assets/icon-chart-line.svg'
+import PieIcon from '@cdc/core/assets/icon-chart-pie.svg'
+import GlobeIcon from '@cdc/core/assets/icon-map-world.svg'
+import UsaIcon from '@cdc/core/assets/icon-map-usa.svg'
 import UsaRegionIcon from '@cdc/core/assets/usa-region-graphic.svg'
-import DataBiteIcon from '@cdc/core/assets/data-bite-graphic.svg'
+import DataBiteIcon from '@cdc/core/assets/icon-databite.svg'
 import WaffleChartIcon from '@cdc/core/assets/icon-grid.svg'
-import MarkupIncludeIcon from '@cdc/core/assets/icon-code.svg'
-import AlabamaGraphic from '@cdc/core/assets/alabama-graphic.svg'
-import PairedBarIcon from '@cdc/core/assets/paired-bar.svg'
-import HorizontalStackIcon from '@cdc/core/assets/horizontal-stacked-bar.svg'
+import AlabamaGraphic from '@cdc/core/assets/icon-map-alabama.svg'
+import PairedBarIcon from '@cdc/core/assets/icon-chart-bar-paired.svg'
+import HorizontalStackIcon from '@cdc/core/assets/icon-chart-bar-stacked.svg'
 
 export default function ChooseTab() {
   const { config, setConfig, setGlobalActive, tempConfig, setTempConfig } = useContext(GlobalState)
@@ -31,7 +30,7 @@ export default function ChooseTab() {
   /**
    * IconButton component
    */
-  const IconButton = ({ icon, label, type, subType, barType, orientation, stacked = false }) => {
+  const IconButton = ({ icon, label, type, subType, barType, orientation, stacked = false, generalType = "data" }) => {
     let isSubType = false
     let isHorizontalStackedChart = false
     let classNames;
@@ -46,7 +45,7 @@ export default function ChooseTab() {
       isHorizontalStackedChart = (orientation === config.orientation && stacked === true)
     }
 
-    if (type === 'dashboard' || type === 'data-bite' || type === 'waffle-chart' || type === 'markup-include') isSubType = true
+    if(type === 'dashboard' || type === 'data-bite' || type === 'waffle-chart' || type === 'markup-include') isSubType = true;
 
     // TODO: sorry, we should refactor this at some point.
     // trying to get this out for 4.22.5 - this is so stacked horizontal and bar charts aren't highlighted at the same time.
@@ -63,34 +62,36 @@ export default function ChooseTab() {
 
 
     let setTypes = () => {
-      // Only take the data/data source properties from existing config. Covers case of selecting a new visualization.
-      let newConfig = {
-        data: [ ...config.data ],
-        dataFileName: config.dataFileName,
-        dataFileSourceType: config.dataFileSourceType,
-        dataDescription: config.dataDescription,
-        dataUrl: config.dataUrl,
-        newViz: true,
-        type,
-        orientation: orientation ? orientation : null,
-        visualizationSubType: label === 'Horizontal Bar (Stacked)' ? 'stacked' : null
-      }
-
-      if (config.formattedData) {
-        newConfig.formattedData = config.formattedData
-      }
-
-      if (type === 'map') {
-        newConfig.general = {
-          ...newConfig.general,
-          geoType: subType
+      if(type === config.type){
+        if(subType !== config.visualizationType){
+          setConfig({...config, newViz: true, visualizationType: subType})
         }
+
+        setGlobalActive(1)
       } else {
-        newConfig.visualizationType = subType
+        let confirmation = !config.type || window.confirm('Changing visualization type will clear configuration settings. Do you want to continue?');
+
+        if(confirmation){
+          let newConfig = {
+            newViz: true,
+            datasets: {},
+            type
+          }
+
+          if(type === 'map') {
+            newConfig.general = {
+              ...newConfig.general,
+              geoType: subType,
+              type: generalType
+            }
+          } else {
+            newConfig.visualizationType = subType
+          }
+
+          setConfig(newConfig);
+          setGlobalActive(1)
+        }
       }
-
-      setConfig(newConfig)
-      setGlobalActive(2)
     }
 
     return (<button className={classNames} onClick={() => setTypes()} aria-label={label}>{icon}<span
@@ -237,6 +238,16 @@ export default function ChooseTab() {
             </Tooltip.Content>
           </Tooltip>
         </li>
+        <li>
+          <Tooltip>
+            <Tooltip.Target>
+              <IconButton label="U.S. Geocode" type="map" subType="us-county" generalType="us-geocode" icon={<UsaIcon />}/>
+            </Tooltip.Target>
+            <Tooltip.Content>
+              United States GeoCode
+            </Tooltip.Content>
+          </Tooltip>
+        </li>
       </ul>
     </div>
   )