@cdc/editor 1.4.4 → 9.22.9

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": "9.22.9",
   "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": "^9.22.9",
+    "@cdc/dashboard": "^9.22.9",
+    "@cdc/data-bite": "^9.22.9",
+    "@cdc/map": "^9.22.9",
+    "@cdc/markup-include": "^9.22.9",
+    "@cdc/waffle-chart": "^9.22.9",
     "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": "90faf22c91ca0062432607e4599598f9e67c848a"
 }

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)
@@ -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,35 @@ 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
+            }
+          } else {
+            newConfig.visualizationType = subType
+          }
+
+          setConfig(newConfig);
+          setGlobalActive(1)
+        }
       }
-
-      setConfig(newConfig)
-      setGlobalActive(2)
     }
 
     return (<button className={classNames} onClick={() => setTypes()} aria-label={label}>{icon}<span