@cdc/editor 1.4.2 → 1.4.4

package/example/valid-data-map.csv

@@ -1,5 +1,5 @@
 STATE,Rate,Location,URL
-Alabama,30,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/
 Arizona,57,School,https://www.cdc.gov/
@@ -56,4 +56,4 @@ Virgin Islands,55,School,https://www.cdc.gov/
 Virginia,57,School,https://www.cdc.gov/
 Washington,62,Work,https://www.cdc.gov/
 West Virginia,25,Vehicle,https://www.cdc.gov/
-Wyoming,43,Vehicle,https://www.cdc.gov/
+Wyoming,43,Vehicle,https://www.cdc.gov/

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cdc/editor",
-  "version": "1.4.2",
+  "version": "1.4.4",
   "main": "dist/cdceditor",
   "bugs": {
     "url": "https://github.com/CDCgov/cdc-open-viz/issues"
@@ -16,16 +16,18 @@
     "build": "npx webpack --mode production --env packageName=CdcEditor --env folderName=editor -c ../../webpack.config.js",
     "prepublishOnly": "lerna run --scope @cdc/editor build"
   },
-  "devDependencies": {
+  "dependencies": {
     "@babel/runtime": "^7.12.5",
-    "@cdc/chart": "^1.3.2",
-    "@cdc/core": "^1.1.2",
-    "@cdc/dashboard": "^1.1.2",
-    "@cdc/data-bite": "^1.1.2",
-    "@cdc/map": "^2.6.2",
+    "@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",
     "axios": "^0.21.1",
     "d3": "^7.0.0",
-    "html-react-parser": "^0.14.0",
+    "html-react-parser": "1.4.9",
     "react-dropzone": "^11.2.4",
     "react-table": "^7.6.2",
     "use-debounce": "^5.2.0",
@@ -35,5 +37,8 @@
     "react": ">=16.8",
     "react-dom": ">=16"
   },
-  "gitHead": "8790a2336ff2453d0d6f09ecec56b5e4beaa7377"
+  "resolutions": {
+    "@types/react": "17.x"
+  },
+  "gitHead": "ff89a7aea74c533413c62ef8859cc011e6b3cbfa"
 }

package/src/CdcEditor.js

@@ -6,7 +6,11 @@ import ResizeObserver from 'resize-observer-polyfill'
 
 import getViewport from '@cdc/core/helpers/getViewport';
 
+import { GlobalContextProvider } from '@cdc/core/components/GlobalContext'
 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';
@@ -15,7 +19,7 @@ import Tabs from './components/Tabs';
 
 import './scss/main.scss';
 
-export default function CdcEditor({ config: configObj = {newViz: true}, hostname }) {
+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([])
@@ -50,7 +54,7 @@ export default function CdcEditor({ config: configObj = {newViz: true}, hostname
     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})
+      const event = new CustomEvent('updateVizConfig', { detail: parsedData, bubbles: true })
       window.dispatchEvent(event)
     }
   }, [tempConfig])
@@ -93,24 +97,28 @@ export default function CdcEditor({ config: configObj = {newViz: true}, hostname
     globalActive,
     setGlobalActive,
     tempConfig,
-    setTempConfig
+    setTempConfig,
+    sharepath
   }
 
   return (
-    <GlobalState.Provider value={state}>
-      <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}>
-            <ChooseTab />
-          </TabPane>
-          <TabPane title="3. Configure" className="configure" disableRule={null === config.data || !config.type}>
-            <ConfigureTab />
-          </TabPane>
-        </Tabs>
-      </div>
-    </GlobalState.Provider>
+    <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. Import Data" className="data-designer">
+              <DataImport />
+            </TabPane>
+            <TabPane title="2. Choose Visualization Type" className="choose-type" disableRule={!config.data && !config.formattedData}>
+              <ChooseTab />
+            </TabPane>
+            <TabPane title="3. Configure" className="configure" disableRule={null === config.data || !config.type}>
+              <ConfigureTab containerEl={containerEl }/>
+            </TabPane>
+          </Tabs>
+        </div>
+      </GlobalState.Provider>
+      <OverlayFrame/>
+    </GlobalContextProvider>
   );
 }

package/src/components/ChooseTab.js

@@ -1,94 +1,243 @@
-import React, { useContext, useEffect } from 'react';
-import '../scss/choose-vis-tab.scss';
+import React, { useContext, useEffect } from 'react'
+import '../scss/choose-vis-tab.scss'
 
-import GlobalState from '../context';
+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 DataBiteIcon from '@cdc/core/assets/data-bite-graphic.svg';
+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 UsaRegionIcon from '@cdc/core/assets/usa-region-graphic.svg'
+import DataBiteIcon from '@cdc/core/assets/data-bite-graphic.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'
 
 export default function ChooseTab() {
-    const {config, setConfig, setGlobalActive, tempConfig, setTempConfig} = useContext(GlobalState);
+  const { config, setConfig, setGlobalActive, tempConfig, setTempConfig } = useContext(GlobalState)
 
-    useEffect(() => {
-        if(tempConfig !== null) {
-            setConfig(tempConfig)
-            setTempConfig(null)
-        }
-    })
+  useEffect(() => {
+    if (tempConfig !== null) {
+      setConfig(tempConfig)
+      setTempConfig(null)
+    }
+  })
 
-    /**
-     * IconButton component
-     */
-    const IconButton = ({icon, label, type, subType}) => {
-        let isSubType = false
+  /**
+   * IconButton component
+   */
+  const IconButton = ({ icon, label, type, subType, barType, orientation, stacked = false }) => {
+    let isSubType = false
+    let isHorizontalStackedChart = false
+    let classNames;
 
-        if(type === 'map' && config.general) {
-            let geoType = config.general.geoType
-            isSubType = (subType === geoType)
-        }
+    if (type === 'map' && config.general) {
+      let geoType = config.general.geoType
+      isSubType = (subType === geoType)
+    }
 
-        if(type === 'chart') {
-            isSubType = (subType === config.visualizationType)
-        }
+    if (type === 'chart') {
+      isSubType = (subType === config.visualizationType)
+      isHorizontalStackedChart = (orientation === config.orientation && stacked === 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' : ''
+    } else if (type === 'chart' && !stacked && config.visualizationSubType !== 'stacked') {
+      classNames = (config.type === type && isSubType ) ? 'active' : ''
+    }
 
-        if(type === 'dashboard' || type === 'data-bite') isSubType = true;
-
-        let classNames = (config.type === type && isSubType) ? 'active' : ''
-
-        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,
-                newViz: true,
-                type
-            }
-
-            if(config.formattedData) {
-                newConfig.formattedData = config.formattedData
-            }
-
-            if(type === 'map') {
-                newConfig.general = {
-                    ...newConfig.general,
-                    geoType: subType
-                }
-            } else {
-                newConfig.visualizationType = subType
-            }
-
-            setConfig(newConfig)
-            setGlobalActive(2)
+    if(type !== 'chart') {
+      classNames = (config.type === type && isSubType && !isHorizontalStackedChart) ? 'active' : ''
+    }
+
+
+    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
         }
+      } else {
+        newConfig.visualizationType = subType
+      }
 
-        return (<button className={classNames} onClick={() => setTypes()} aria-label={label}>{icon}<span className="mt-1">{label}</span></button>)
+      setConfig(newConfig)
+      setGlobalActive(2)
     }
 
-    return (
-        <div className="choose-vis">
-            <div className="heading-2">General</div>
-            <ul className="grid">
-                <li><IconButton label="Dashboard" type="dashboard" icon={ <DashboardIcon /> } /></li>
-                <li><IconButton label="Data Bite" type="data-bite" icon={ <DataBiteIcon /> } /></li>
-            </ul>
-            <div className="heading-2">Charts</div>
-            <ul className="grid">
-                <li><IconButton label="Bar" type="chart" subType="Bar" icon={ <BarIcon /> } /></li>
-                <li><IconButton label="Line" type="chart" subType="Line" icon={ <LineIcon /> } /></li>
-                <li><IconButton label="Pie" type="chart" subType="Pie" icon={ <PieIcon /> } /></li>
-            </ul>
-            <div className="heading-2">Maps</div>
-            <ul className="grid">
-                <li><IconButton label="United States" type="map" subType="us" icon={ <UsaIcon /> } /></li>
-                <li><IconButton label="World" type="map" subType="world" icon={ <GlobeIcon /> } /></li>
-            </ul>
+    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>
+          <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*/}
+        <li>
+          <Tooltip position="right">
+            <Tooltip.Target>
+              <IconButton label="Dashboard" type="dashboard" icon={<DashboardIcon/>}/>
+            </Tooltip.Target>
+            <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/>}/>
+            </Tooltip.Target>
+            <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/>}/>
+            </Tooltip.Target>
+            <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">
+        <li>
+          <Tooltip position="right">
+            <Tooltip.Target>
+              <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>
+        </li>
+        <li>
+          <Tooltip>
+            <Tooltip.Target>
+              <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>
+        </li>
+        <li>
+          <Tooltip>
+            <Tooltip.Target>
+              <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>
+        </li>
+        <li>
+          <Tooltip>
+            <Tooltip.Target>
+              <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>
+        </li>
+        <li>
+          <Tooltip>
+            <Tooltip.Target>
+              <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>
+        </li>
+      </ul>
+
+      <div className="heading-2">Maps</div>
+      <ul className="grid cove-temp">
+        <li>
+          <Tooltip position="right">
+            <Tooltip.Target>
+              <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>
+        </li>
+        <li>
+          <Tooltip position="right">
+            <Tooltip.Target>
+              <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>
+        </li>
+        <li>
+          <Tooltip>
+            <Tooltip.Target>
+              <IconButton label="World" type="map" subType="world" icon={<GlobeIcon/>}/>
+            </Tooltip.Target>
+            <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/>}/>
+            </Tooltip.Target>
+            <Tooltip.Content>
+              Present a choropleth map of an individual U.S. state.
+            </Tooltip.Content>
+          </Tooltip>
+        </li>
+      </ul>
+    </div>
+  )
 }

package/src/components/ConfigureTab.js

@@ -4,13 +4,15 @@ import CdcDashboard from '@cdc/dashboard'; // TODO: Lazy load this
 import CdcMap from '@cdc/map'; // TODO: Lazy load this
 import CdcChart from '@cdc/chart'; // TODO: Lazy load this
 import CdcDataBite from '@cdc/data-bite';
+import CdcWaffleChart from '@cdc/waffle-chart'
+import CdcMarkupInclude from '@cdc/markup-include'
 
 import '../scss/configure-tab.scss';
 
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary';
 import GlobalState from '../context';
 
-export default function ConfigureTab() {
+export default function ConfigureTab({containerEl}) {
     const { config, setTempConfig, hostname } = useContext(GlobalState);
 
     let { type } = config
@@ -19,7 +21,7 @@ export default function ConfigureTab() {
         case 'map':
             return (
                 <ErrorBoundary component="CdcMap">
-                    <CdcMap isEditor={true} config={config} hostname={hostname} setConfig={setTempConfig} />
+                    <CdcMap isEditor={true} config={config} hostname={hostname} setConfig={setTempConfig} containerEl={containerEl} />
                 </ErrorBoundary>
             )
         case 'chart':
@@ -40,7 +42,19 @@ export default function ConfigureTab() {
                   <CdcDataBite isEditor={true} config={config} setConfig={setTempConfig} />
               </ErrorBoundary>
             )
+        case 'waffle-chart':
+            return (
+                <ErrorBoundary component="CdcDashboard">
+                    <CdcWaffleChart isEditor={true} config={config} setConfig={setTempConfig} />
+                </ErrorBoundary>
+            )
+        case 'markup-include':
+            return (
+                <ErrorBoundary component="CdcDashboard">
+                    <CdcMarkupInclude isEditor={true} config={config} setConfig={setTempConfig} />
+                </ErrorBoundary>
+            )
         default:
             return <p>No visualization type selected.</p>
     }
-}
+}