@cdc/editor 4.22.10-alpha.1 → 4.22.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cdc/editor",
-  "version": "4.22.10-alpha.1",
+  "version": "4.22.11",
   "main": "dist/cdceditor",
   "bugs": {
     "url": "https://github.com/CDCgov/cdc-open-viz/issues"
@@ -19,12 +19,12 @@
   "dependencies": {
     "@babel/runtime": "^7.12.5",
     "@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",
+    "@cdc/core": "^4.22.11",
+    "@cdc/dashboard": "^4.22.11",
+    "@cdc/data-bite": "^4.22.11",
+    "@cdc/map": "^4.22.11",
+    "@cdc/markup-include": "^4.22.11",
+    "@cdc/waffle-chart": "^4.22.11",
     "axios": "^0.21.1",
     "d3": "^7.0.0",
     "html-react-parser": "1.4.9",
@@ -40,5 +40,5 @@
   "resolutions": {
     "@types/react": "17.x"
   },
-  "gitHead": "bc6f9efd741e5b22140edc58c7a7f9e5efc43d1e"
+  "gitHead": "9768d1ea0e2383044977d988e33531bcdfe33ea6"
 }

package/src/CdcEditor.js

@@ -1,25 +1,25 @@
-import React, { useState, useEffect,useCallback } from 'react';
+import React, { useState, useEffect, useCallback } from 'react'
 
 // IE11
 import 'core-js/stable'
 import ResizeObserver from 'resize-observer-polyfill'
 
-import getViewport from '@cdc/core/helpers/getViewport';
+import getViewport from '@cdc/core/helpers/getViewport'
 
 import { GlobalContextProvider } from '@cdc/core/components/GlobalContext'
-import GlobalState from './context';
+import GlobalState from './context'
 
 import OverlayFrame from '@cdc/core/components/ui/OverlayFrame'
 
-import DataImport from './components/DataImport';
-import ChooseTab from './components/ChooseTab';
-import ConfigureTab from './components/ConfigureTab';
-import TabPane from './components/TabPane';
-import Tabs from './components/Tabs';
+import DataImport from './components/DataImport'
+import ChooseTab from './components/ChooseTab'
+import ConfigureTab from './components/ConfigureTab'
+import TabPane from './components/TabPane'
+import Tabs from './components/Tabs'
 
-import './scss/main.scss';
+import './scss/main.scss'
 
-export default function CdcEditor({ config: configObj = {newViz: true}, hostname, containerEl, sharepath }) {
+export default function CdcEditor({ config: configObj = { newViz: true }, hostname, containerEl, sharepath }) {
   const [config, setConfig] = useState(configObj)
   const [tempConfig, setTempConfig] = useState(null)
   const [errors, setErrors] = useState([])
@@ -27,79 +27,79 @@ export default function CdcEditor({ config: configObj = {newViz: true}, hostname
   const [currentViewport, setCurrentViewport] = useState('lg')
   const [dimensions, setDimensions] = useState([])
 
-  let startingTab = 0;
+  let startingTab = 0
 
-  if(config.data && config.type) {
+  if (config.data && config.type) {
     startingTab = 2
   }
 
   // Legacy support - dashboards using a single dataset
-  if(config.type === 'dashboard'){
-    let legacyUpdateNeeded = false;
-    let newConfig;
+  if (config.type === 'dashboard') {
+    let legacyUpdateNeeded = false
+    let newConfig
 
-    if(config.data || config.dataUrl){
-      legacyUpdateNeeded = true;
-      newConfig = {...config};
+    if (config.data || config.dataUrl) {
+      legacyUpdateNeeded = true
+      newConfig = { ...config }
 
-      newConfig.datasets = {};
+      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;
+        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};
+    if (config.dashboard && config.dashboard.filters) {
+      legacyUpdateNeeded = true
+      newConfig = { ...config }
 
-      newConfig.dashboard.sharedFilters = newConfig.dashboard.sharedFilters || [];
+      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)});
-      });
+        newConfig.dashboard.sharedFilters.push({ ...filter, key: filter.label, showDropdown: true, usedBy: Object.keys(newConfig.visualizations) })
+      })
 
-      delete newConfig.dashboard.filters;
+      delete newConfig.dashboard.filters
     }
-    
-    if(legacyUpdateNeeded){
-      setConfig(newConfig);
+
+    if (legacyUpdateNeeded) {
+      setConfig(newConfig)
     }
   }
 
-  const [globalActive, setGlobalActive] = useState(startingTab);
+  const [globalActive, setGlobalActive] = useState(startingTab)
 
-  const resizeObserver = new ResizeObserver(([ container ]) => {
+  const resizeObserver = new ResizeObserver(([container]) => {
     let { width, height } = container.contentRect
     let newViewport = getViewport(width)
 
     setDimensions([width, height])
     setCurrentViewport(newViewport)
-  });
+  })
 
   const outerContainerRef = useCallback(node => {
     if (node !== null) {
-        resizeObserver.observe(node);
+      resizeObserver.observe(node)
     }
-  },[]);
+  }, [])
 
   // Temp Config is for changes made in the components proper - to prevent render cycles. Regular config is for changes made in the first two tabs.
   useEffect(() => {
-    if(null !== tempConfig) {
+    if (null !== tempConfig) {
       const parsedData = JSON.stringify(tempConfig)
       // Emit the data in a regular JS event so it can be consumed by anything.
       const event = new CustomEvent('updateVizConfig', { detail: parsedData, bubbles: true })
@@ -110,29 +110,29 @@ export default function CdcEditor({ config: configObj = {newViz: true}, hostname
   useEffect(() => {
     const parsedData = JSON.stringify(config)
     // Emit the data in a regular JS event so it can be consumed by anything.
-    const event = new CustomEvent('updateVizConfig', { detail: parsedData})
+    const event = new CustomEvent('updateVizConfig', { detail: parsedData })
     window.dispatchEvent(event)
   }, [config])
 
   useEffect(() => {
-    if(globalActive > -1) {
+    if (globalActive > -1) {
       setGlobalActive(-1)
     }
   }, [globalActive])
 
-  const maxFileSize = 10; // Represents number of MB. Maybe move this to a prop eventually but static for now.
+  const maxFileSize = 10 // Represents number of MB. Maybe move this to a prop eventually but static for now.
 
   const errorMessages = {
-    emptyCols: "It looks like your column headers are missing some data. Please make sure all of your columns have titles and upload your file again.",
-    emptyData: "Your data file is empty.",
-    dataType: "Your datatype is not supported.",
-    fileType: "The file type that you are trying to upload is not supported.",
-    formatting: "Please check the formatting of your data file.",
-    failedFetch: "Error fetching or parsing data file.",
-    urlInvalid: "Please make sure to use a valid URL.",
+    emptyCols: 'It looks like your column headers are missing some data. Please make sure all of your columns have titles and upload your file again.',
+    emptyData: 'Your data file is empty.',
+    dataType: 'Your datatype is not supported.',
+    fileType: 'The file type that you are trying to upload is not supported.',
+    formatting: 'Please check the formatting of your data file.',
+    failedFetch: 'Error fetching or parsing data file.',
+    urlInvalid: 'Please make sure to use a valid URL.',
     cannotReach: "Cannot reach URL, please make sure it's correct.",
     fileTooLarge: `File is too large. Maximum file size is ${maxFileSize}MB.`
-  };
+  }
 
   const state = {
     config,
@@ -149,15 +149,15 @@ export default function CdcEditor({ config: configObj = {newViz: true}, hostname
     sharepath
   }
 
-  let configureDisabled = true;
+  let configureDisabled = true
 
-  if(config.type !== 'dashboard'){
-    if(config.formattedData){
-      configureDisabled = false;
+  if (config.type !== 'dashboard') {
+    if (config.formattedData) {
+      configureDisabled = false
     }
   } else {
-    if(config.datasets && Object.keys(config.datasets).length > 0){
-      configureDisabled = false;
+    if (config.datasets && Object.keys(config.datasets).length > 0) {
+      configureDisabled = false
     }
   }
 
@@ -165,21 +165,21 @@ export default function CdcEditor({ config: configObj = {newViz: true}, hostname
     <GlobalContextProvider>
       <GlobalState.Provider value={state}>
         <div className={`cdc-open-viz-module cdc-editor ${currentViewport}`} ref={outerContainerRef}>
-          <Tabs className="top-level" startingTab={globalActive}>
-            <TabPane title="1. Choose Visualization Type" className="choose-type">
+          <Tabs className='top-level' startingTab={globalActive}>
+            <TabPane title='1. Choose Visualization Type' className='choose-type'>
               <ChooseTab />
             </TabPane>
-            <TabPane title="2. Import Data" className="data-designer" disableRule={!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 title='3. Configure' className='configure' disableRule={configureDisabled}>
+              <ConfigureTab containerEl={containerEl} />
             </TabPane>
           </Tabs>
         </div>
       </GlobalState.Provider>
-      <OverlayFrame/>
+      <OverlayFrame />
     </GlobalContextProvider>
-  );
+  )
 }

package/src/components/ChooseTab.js

@@ -30,55 +30,54 @@ export default function ChooseTab() {
   /**
    * IconButton component
    */
-  const IconButton = ({ icon, label, type, subType, barType, orientation, stacked = false, generalType = "data" }) => {
+  const IconButton = ({ icon, label, type, subType, barType, orientation, stacked = false, generalType = 'data' }) => {
     let isSubType = false
     let isHorizontalStackedChart = false
-    let classNames;
+    let classNames
 
     if (type === 'map' && config.general) {
       let geoType = config.general.geoType
-      isSubType = (subType === geoType)
+      isSubType = subType === geoType
     }
 
     if (type === 'chart') {
-      isSubType = (subType === config.visualizationType)
-      isHorizontalStackedChart = (orientation === config.orientation && stacked === true)
+      isSubType = subType === config.visualizationType
+      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.
     // this functionality appears to be working but is admittedly confusing.
-    if(type === 'chart' && stacked) {
-      classNames = (config.type === type && isSubType && config.visualizationSubType === 'stacked') ? 'active' : ''
+    if (type === 'chart' && stacked) {
+      classNames = config.type === type && isSubType && config.visualizationSubType === 'stacked' ? 'active' : ''
     } else if (type === 'chart' && !stacked && config.visualizationSubType !== 'stacked') {
-      classNames = (config.type === type && isSubType ) ? 'active' : ''
+      classNames = config.type === type && isSubType ? 'active' : ''
     }
 
-    if(type !== 'chart') {
-      classNames = (config.type === type && isSubType && !isHorizontalStackedChart) ? 'active' : ''
+    if (type !== 'chart') {
+      classNames = config.type === type && isSubType && !isHorizontalStackedChart ? 'active' : ''
     }
 
-
     let setTypes = () => {
-      if(type === config.type){
-        if(subType !== config.visualizationType){
-          setConfig({...config, newViz: true, visualizationType: subType})
+      if (type === config.type) {
+        if (subType !== config.visualizationType) {
+          setConfig({ ...config, newViz: true, visualizationType: subType })
         }
 
         setGlobalActive(1)
       } else {
-        let confirmation = !config.type || window.confirm('Changing visualization type will clear configuration settings. Do you want to continue?');
+        let confirmation = !config.type || window.confirm('Changing visualization type will clear configuration settings. Do you want to continue?')
 
-        if(confirmation){
+        if (confirmation) {
           let newConfig = {
             newViz: true,
             datasets: {},
             type
           }
 
-          if(type === 'map') {
+          if (type === 'map') {
             newConfig.general = {
               ...newConfig.general,
               geoType: subType,
@@ -88,164 +87,144 @@ export default function ChooseTab() {
             newConfig.visualizationType = subType
           }
 
-          setConfig(newConfig);
+          setConfig(newConfig)
           setGlobalActive(1)
         }
       }
     }
 
-    return (<button className={classNames} onClick={() => setTypes()} aria-label={label}>{icon}<span
-      className="mt-1">{label}</span></button>)
+    return (
+      <button className={classNames} onClick={() => setTypes()} aria-label={label}>
+        {icon}
+        <span className='mt-1'>{label}</span>
+      </button>
+    )
   }
 
   return (
-    <div className="choose-vis">
-      <a href="https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/index.html" target="_blank"
-         rel="noopener noreferrer" className="guidance-link" style={{marginTop: 0, marginBottom: "2rem"}}>
+    <div className='choose-vis'>
+      <a href='https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/index.html' target='_blank' rel='noopener noreferrer' className='guidance-link' style={{ marginTop: 0, marginBottom: '2rem' }}>
         <div>
-          <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>
+          <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>
         </div>
       </a>
 
-      <div className="heading-2">General</div>
-      <ul className="grid cove-temp"> {/*TODO: Remove cove class during refactor to Wizard*/}
+      <div className='heading-2'>General</div>
+      <ul className='grid cove-temp'>
+        {' '}
+        {/*TODO: Remove cove class during refactor to Wizard*/}
         <li>
-          <Tooltip position="right">
+          <Tooltip position='right'>
             <Tooltip.Target>
-              <IconButton label="Dashboard" type="dashboard" icon={<DashboardIcon/>}/>
+              <IconButton label='Dashboard' type='dashboard' icon={<DashboardIcon />} />
             </Tooltip.Target>
-            <Tooltip.Content>
-              Present multiple data visualizations with shared filter controls.
-            </Tooltip.Content>
+            <Tooltip.Content>Present multiple data visualizations with shared filter controls.</Tooltip.Content>
           </Tooltip>
         </li>
         <li>
           <Tooltip>
             <Tooltip.Target>
-              <IconButton label="Data Bite" type="data-bite" icon={<DataBiteIcon/>}/>
+              <IconButton label='Data Bite' type='data-bite' icon={<DataBiteIcon />} />
             </Tooltip.Target>
-            <Tooltip.Content>
-              Highlight a single aggregated value (e.g., sum or median).
-            </Tooltip.Content>
+            <Tooltip.Content>Highlight a single aggregated value (e.g., sum or median).</Tooltip.Content>
           </Tooltip>
         </li>
         <li>
           <Tooltip>
             <Tooltip.Target>
-              <IconButton label="Waffle Chart" type="waffle-chart" icon={<WaffleChartIcon/>}/>
+              <IconButton label='Waffle Chart' type='waffle-chart' icon={<WaffleChartIcon />} />
             </Tooltip.Target>
-            <Tooltip.Content>
-              Highlight a piece of data in relationship to a data set.
-            </Tooltip.Content>
+            <Tooltip.Content>Highlight a piece of data in relationship to a data set.</Tooltip.Content>
           </Tooltip>
         </li>
       </ul>
 
-      <div className="heading-2">Charts</div>
-      <ul className="grid cove-temp">
+      <div className='heading-2'>Charts</div>
+      <ul className='grid cove-temp'>
         <li>
-          <Tooltip position="right">
+          <Tooltip position='right'>
             <Tooltip.Target>
-              <IconButton label="Bar" type="chart" subType="Bar" orientation="vertical" icon={<BarIcon/>}/>
+              <IconButton label='Bar' type='chart' subType='Bar' orientation='vertical' icon={<BarIcon />} />
             </Tooltip.Target>
-            <Tooltip.Content>
-              Use bars to show comparisons between data categories.
-            </Tooltip.Content>
+            <Tooltip.Content>Use bars to show comparisons between data categories.</Tooltip.Content>
           </Tooltip>
         </li>
         <li>
           <Tooltip>
             <Tooltip.Target>
-              <IconButton label="Line" type="chart" subType="Line" orientation="vertical" icon={<LineIcon/>}/>
+              <IconButton label='Line' type='chart' subType='Line' orientation='vertical' icon={<LineIcon />} />
             </Tooltip.Target>
-            <Tooltip.Content>
-              Present one or more data trends over time.
-            </Tooltip.Content>
+            <Tooltip.Content>Present one or more data trends over time.</Tooltip.Content>
           </Tooltip>
         </li>
         <li>
           <Tooltip>
             <Tooltip.Target>
-              <IconButton label="Pie" type="chart" subType="Pie" orientation="vertical" icon={<PieIcon/>}/>
+              <IconButton label='Pie' type='chart' subType='Pie' orientation='vertical' icon={<PieIcon />} />
             </Tooltip.Target>
-            <Tooltip.Content>
-              Present the numerical proportions of a data series.
-            </Tooltip.Content>
+            <Tooltip.Content>Present the numerical proportions of a data series.</Tooltip.Content>
           </Tooltip>
         </li>
         <li>
           <Tooltip>
             <Tooltip.Target>
-              <IconButton label="Paired Bar" type="chart" subType="Paired Bar" orientation="horizontal" icon={<PairedBarIcon/>}/>
+              <IconButton label='Paired Bar' type='chart' subType='Paired Bar' orientation='horizontal' icon={<PairedBarIcon />} />
             </Tooltip.Target>
-            <Tooltip.Content>
-              Use paired bars to show comparisons between two different data categories.
-            </Tooltip.Content>
+            <Tooltip.Content>Use paired bars to show comparisons between two different data categories.</Tooltip.Content>
           </Tooltip>
         </li>
         <li>
           <Tooltip>
             <Tooltip.Target>
-              <IconButton label="Horizontal Bar (Stacked)" type="chart" subType="Bar" orientation="horizontal" stacked={true}
-                          icon={<HorizontalStackIcon/>}/>
+              <IconButton label='Horizontal Bar (Stacked)' type='chart' subType='Bar' orientation='horizontal' stacked={true} icon={<HorizontalStackIcon />} />
             </Tooltip.Target>
-            <Tooltip.Content>
-              Use bars to show comparisons between data categories.
-            </Tooltip.Content>
+            <Tooltip.Content>Use bars to show comparisons between data categories.</Tooltip.Content>
           </Tooltip>
         </li>
       </ul>
 
-      <div className="heading-2">Maps</div>
-      <ul className="grid cove-temp">
+      <div className='heading-2'>Maps</div>
+      <ul className='grid cove-temp'>
         <li>
-          <Tooltip position="right">
+          <Tooltip position='right'>
             <Tooltip.Target>
-              <IconButton label="United States (State- or County-Level)" type="map" subType="us" icon={<UsaIcon/>}/>
+              <IconButton label='United States (State- or County-Level)' type='map' subType='us' icon={<UsaIcon />} />
             </Tooltip.Target>
-            <Tooltip.Content>
-              Present a U.S. choropleth map at state or county level.
-            </Tooltip.Content>
+            <Tooltip.Content>Present a U.S. choropleth map at state or county level.</Tooltip.Content>
           </Tooltip>
         </li>
         <li>
-          <Tooltip position="right">
+          <Tooltip position='right'>
             <Tooltip.Target>
-              <IconButton label="United States (HHS Regions)" type="map" subType="us-region" icon={<UsaRegionIcon/>}/>
+              <IconButton label='United States (HHS Regions)' type='map' subType='us-region' icon={<UsaRegionIcon />} />
             </Tooltip.Target>
-            <Tooltip.Content>
-              Present a U.S. choropleth map at state or county level.
-            </Tooltip.Content>
+            <Tooltip.Content>Present a U.S. choropleth map at state or county level.</Tooltip.Content>
           </Tooltip>
         </li>
         <li>
           <Tooltip>
             <Tooltip.Target>
-              <IconButton label="World" type="map" subType="world" icon={<GlobeIcon/>}/>
+              <IconButton label='World' type='map' subType='world' icon={<GlobeIcon />} />
             </Tooltip.Target>
-            <Tooltip.Content>
-              Present a choropleth map of the world.
-            </Tooltip.Content>
+            <Tooltip.Content>Present a choropleth map of the world.</Tooltip.Content>
           </Tooltip>
         </li>
         <li>
           <Tooltip>
             <Tooltip.Target>
-              <IconButton label="U.S. State" type="map" subType="single-state" icon={<AlabamaGraphic/>}/>
+              <IconButton label='U.S. State' type='map' subType='single-state' icon={<AlabamaGraphic />} />
             </Tooltip.Target>
-            <Tooltip.Content>
-              Present a choropleth map of an individual U.S. state.
-            </Tooltip.Content>
+            <Tooltip.Content>Present a choropleth map of an individual U.S. state.</Tooltip.Content>
           </Tooltip>
         </li>
         <li>
           <Tooltip>
             <Tooltip.Target>
-              <IconButton label="U.S. Geocode" type="map" subType="us-county" generalType="us-geocode" icon={<UsaIcon />}/>
+              <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.Content>United States GeoCode</Tooltip.Content>
           </Tooltip>
         </li>
       </ul>