@cdc/editor 1.4.0 → 1.4.3

package/example/valid-data-chart.csv

@@ -0,0 +1,6 @@
+Race,Age-adjusted rate
+Hispanic or Latino,644.2
+Non-Hispanic American Indian,636.1
+Non-Hispanic Black,563.7
+Non-Hispanic Asian or Pacific Islander,202.5
+Non-Hispanic White,183.6

package/example/valid-data-map.csv

@@ -0,0 +1,59 @@
+STATE,Rate,Location,URL
+Alabama,30,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/
+Arkansas,60,School,https://www.cdc.gov/
+California,30,Home,https://www.cdc.gov/
+Colorado,40,Vehicle,https://www.cdc.gov/
+Connecticut,55,Home,https://www.cdc.gov/
+Deleware,57,Home,https://www.cdc.gov/
+DC,60,Home,https://www.cdc.gov/
+Florida,30,Work,https://www.cdc.gov/
+Georgia,40,Work,https://www.cdc.gov/
+Guam,55,Home,https://www.cdc.gov/
+Hawaii,57,School,https://www.cdc.gov/
+Idaho,60,School,https://www.cdc.gov/
+Illinois,30,Work,https://www.cdc.gov/
+Indiana,40,Vehicle,https://www.cdc.gov/
+Iowa,55,Home,https://www.cdc.gov/
+Kansas,57,Home,https://www.cdc.gov/
+Kentucky,60,NA,https://www.cdc.gov/
+Louisiana,30,Vehicle,https://www.cdc.gov/
+Maine,40,Work,https://www.cdc.gov/
+Marshall Islands,55,Home,https://www.cdc.gov/
+Maryland,57,School,https://www.cdc.gov/
+Massachusetts,60,School,https://www.cdc.gov/
+Michigan,12,Work,https://www.cdc.gov/
+Micronesia,65,Vehicle,https://www.cdc.gov/
+Minnesota,55,Home,https://www.cdc.gov/
+Mississippi,57,Home,https://www.cdc.gov/
+Montana,60,Home,https://www.cdc.gov/
+Montana,30,Vehicle,https://www.cdc.gov/
+Nebraska,40,Work,https://www.cdc.gov/
+Nevada,55,Home,https://www.cdc.gov/
+New Hampshire,57,School,https://www.cdc.gov/
+New Jersey,60,School,https://www.cdc.gov/
+New Mexico,12,Work,https://www.cdc.gov/
+New York,40,Vehicle,https://www.cdc.gov/
+North Carolina,55,Home,https://www.cdc.gov/
+North Dakota,57,Home,https://www.cdc.gov/
+Northern Mariana Islands,60,Home,https://www.cdc.gov/
+Ohio,88,Vehicle,https://www.cdc.gov/
+Oklahoma,40,Work,https://www.cdc.gov/
+Oregon,55,Home,https://www.cdc.gov/
+Palau,15,School,https://www.cdc.gov/
+Pennsylvania,60,School,https://www.cdc.gov/
+Puerto Rico,30,Work,https://www.cdc.gov/
+Rhode Island,40,Vehicle,https://www.cdc.gov/
+South Carolina,55,Home,https://www.cdc.gov/
+South Dakota,86,Home,https://www.cdc.gov/
+Tennessee,60,Home,https://www.cdc.gov/
+Texas,30,Vehicle,https://www.cdc.gov/
+Utah,54,Work,https://www.cdc.gov/
+Vermont,40,Home,https://www.cdc.gov/
+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/

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cdc/editor",
-  "version": "1.4.0",
+  "version": "1.4.3",
   "main": "dist/cdceditor",
   "bugs": {
     "url": "https://github.com/CDCgov/cdc-open-viz/issues"
@@ -16,19 +16,18 @@
     "build": "npx webpack --mode production --env packageName=CdcEditor --env folderName=editor -c ../../webpack.config.js",
     "prepublishOnly": "lerna run --scope @cdc/editor build"
   },
-  "files": [
-    "./dist/"
-  ],
-  "devDependencies": {
+  "dependencies": {
     "@babel/runtime": "^7.12.5",
-    "@cdc/chart": "^1.3.0",
-    "@cdc/core": "^1.1.0",
-    "@cdc/dashboard": "^1.1.0",
-    "@cdc/data-bite": "^1.1.0",
-    "@cdc/map": "^2.6.0",
+    "@cdc/chart": "^1.3.2",
+    "@cdc/core": "^1.1.2",
+    "@cdc/dashboard": "^1.1.2",
+    "@cdc/data-bite": "^1.1.2",
+    "@cdc/waffle-chart": "^1.0.0",
+    "@cdc/markup-include": "^1.0.0",
+    "@cdc/map": "^2.6.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",
@@ -38,5 +37,8 @@
     "react": ">=16.8",
     "react-dom": ">=16"
   },
-  "gitHead": "f4db4228579fcd98a6667f80824489f35dd7bf0a"
+  "resolutions": {
+    "@types/react": "17.x"
+  },
+  "gitHead": "170845062bcbb93f31270104688f69c4148935d8"
 }

package/src/CdcEditor.js

@@ -0,0 +1,117 @@
+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 GlobalState from './context';
+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';
+
+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([])
+
+  const [currentViewport, setCurrentViewport] = useState('lg')
+  const [dimensions, setDimensions] = useState([])
+
+  let startingTab = 0;
+
+  if(config.data && config.type) {
+    startingTab = 2
+  }
+
+  const [globalActive, setGlobalActive] = useState(startingTab);
+
+  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);
+    }
+  },[]);
+
+  // 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) {
+      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})
+      window.dispatchEvent(event)
+    }
+  }, [tempConfig])
+
+  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})
+    window.dispatchEvent(event)
+  }, [config])
+
+  useEffect(() => {
+    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 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.",
+    cannotReach: "Cannot reach URL, please make sure it's correct.",
+    fileTooLarge: `File is too large. Maximum file size is ${maxFileSize}MB.`
+  };
+
+  const state = {
+    config,
+    setConfig,
+    errors,
+    setErrors,
+    errorMessages,
+    maxFileSize,
+    hostname,
+    globalActive,
+    setGlobalActive,
+    tempConfig,
+    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 containerEl={containerEl }/>
+          </TabPane>
+        </Tabs>
+      </div>
+    </GlobalState.Provider>
+  );
+}

package/src/assets/icons/dashboard.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
+	<svg x="0" y="0" width="512" height="512" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="chart-line" class="svg-inline--fa fa-chart-line fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M496 384H64V80c0-8.84-7.16-16-16-16H16C7.16 64 0 71.16 0 80v336c0 17.67 14.33 32 32 32h464c8.84 0 16-7.16 16-16v-32c0-8.84-7.16-16-16-16zM464 96H345.94c-21.38 0-32.09 25.85-16.97 40.97l32.4 32.4L288 242.75l-73.37-73.37c-12.5-12.5-32.76-12.5-45.25 0l-68.69 68.69c-6.25 6.25-6.25 16.38 0 22.63l22.62 22.62c6.25 6.25 16.38 6.25 22.63 0L192 237.25l73.37 73.37c12.5 12.5 32.76 12.5 45.25 0l96-96 32.4 32.4c15.12 15.12 40.97 4.41 40.97-16.97V112c.01-8.84-7.15-16-15.99-16z"></path></svg>
+	<svg x="512" y="0" width="512" height="512" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="chart-pie" class="svg-inline--fa fa-chart-pie fa-w-17" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 544 512"><path fill="currentColor" d="M527.79 288H290.5l158.03 158.03c6.04 6.04 15.98 6.53 22.19.68 38.7-36.46 65.32-85.61 73.13-140.86 1.34-9.46-6.51-17.85-16.06-17.85zm-15.83-64.8C503.72 103.74 408.26 8.28 288.8.04 279.68-.59 272 7.1 272 16.24V240h223.77c9.14 0 16.82-7.68 16.19-16.8zM224 288V50.71c0-9.55-8.39-17.4-17.84-16.06C86.99 51.49-4.1 155.6.14 280.37 4.5 408.51 114.83 513.59 243.03 511.98c50.4-.63 96.97-16.87 135.26-44.03 7.9-5.6 8.42-17.23 1.57-24.08L224 288z"></path></svg>
+	<svg x="0" y="512" width="1024" height="512" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 252 137">
+  <path fill="currentColor" d="M10.834,5.084 L11.167,7.251 L12.834,10.751 L12,14.418 L10.167,12.085 L9,9.418 L6.334,8.918 L2.167,8.418 L1,8.418 L1.667,10.751 L4,14.084 L4,17.417 L4.667,21.084 L7.667,21.417 L8.834,23.084 L5.167,22.584 L4,23.417 L4.5,26.917 L3.834,30.75 L4,35.25 L2.834,38.25 L1.5,42.583 L2.5,45.583 L3.167,49.416 L3.667,52.249 L3,56.082 L3.5,58.749 L4.667,61.416 L5.667,64.749 L6.5,66.916 L10,69.749 L11.667,69.582 L14,69.915 L11.5,70.582 L12.167,71.749 L10,72.082 L12,74.249 L14,76.416 L13.334,78.249 L16,82.082 L18.834,84.415 L19.167,87.248 L21.5,88.415 L24.667,89.415 L27.167,91.582 L29.334,92.915 L31.667,94.748 L33,95.748 L34.5,99.081 L43,98.914 L59.667,104.747 L73.5,104.747 L73.167,103.414 L79.834,103.414 L82.5,104.914 L84,106.414 L87.834,109.081 L89.167,113.914 L93,115.914 L95.334,116.914 L98.5,113.081 L102.667,113.581 L104.334,114.914 L108.834,122.247 L110.334,124.081 L111.5,128.247 L120.334,131.747 L120,128.747 L119.667,124.581 L122.5,121.247 L122,120.247 L124.834,117.914 L126.334,118.747 L128.834,115.914 L130.334,113.914 L132.5,113.914 L137.334,112.914 L140.834,114.414 L143.5,114.414 L144.5,113.247 L145.667,114.081 L145.834,115.581 L149.334,116.747 L152.667,116.247 L155.5,116.414 L153.167,114.581 L153,113.581 L154.5,112.747 L154.334,111.914 L152,111.914 L149.334,112.247 L151,110.747 L151.834,109.747 L152.667,110.581 L157.5,109.914 L158.167,110.747 L161.5,110.747 L163.334,110.247 L166,110.081 L168.5,111.081 L170,110.914 L171.5,113.081 L174.5,113.247 L176.167,111.914 L177.834,111.914 L181.167,114.747 L183,116.747 L183.5,119.414 L183.167,122.747 L184.334,126.247 L187.5,130.247 L189.334,134.081 L190,135.581 L193.334,134.914 L194.167,131.247 L194.167,125.747 L192.5,121.247 L192,120.081 L191.667,116.747 L188.834,113.414 L188.334,109.414 L188.5,106.081 L189.834,102.414 L192.334,100.414 L192.167,98.914 L195.167,98.414 L199.5,93.581 L201.5,91.914 L203.667,92.247 L205.667,88.414 L208.5,86.914 C208.5,86.914 210.668,87.247 210.834,86.414 C211,85.581 213.167,81.581 213.167,81.581 L210.834,80.248 L212.167,79.081 L212.5,78.248 L211.167,74.915 L209.834,73.415 L211.5,71.582 L210.167,69.915 L209.834,66.582 L209.667,63.749 L210.667,62.916 L211.334,67.083 L211.834,69.083 L213,70.916 L212.667,73.916 L214.5,70.249 L215.667,67.416 L215.834,65.749 L214.167,63.749 L214,62.916 L214.5,62.416 L217.167,64.083 L218,62.083 L219.834,60.25 L220.167,58.25 L219.834,55.917 L220,54.75 L220.334,53.083 L221.667,54.916 L222.334,54.916 L224.334,54.583 L226.334,54.416 L229,53.583 L228.5,52.583 L225.834,52.75 L223.334,53.417 L222.167,54.084 L222,52.917 L222.834,51.917 L225,51.417 L227.667,50.917 L229.5,50.417 L231,49.417 L234.5,50.25 C234.5,50.25 236,51.083 236.167,50.583 C236.334,50.083 236.834,48.75 236.834,48.75 L235.667,47.417 L235.167,45.417 L235.5,42.084 L235.834,39.417 L237.334,37.417 L237.667,36.584 L238.667,37.084 L241.834,33.584 L243,33.584 L245.667,33.251 L246.5,31.584 L248.834,31.584 L250.834,29.917 L250.084,29 L249.167,26.75 L248.167,26 L248.584,20.417 L248.084,15.334 L245.084,14.417 L242.5,15.334 L241.084,15.167 L235.334,28.584 L232.667,28.751 L231.5,29.751 L217.334,29.668 L213.834,32.918 L211.667,34.251 L210.667,37.084 L210.167,38.584 L207.667,40.251 L205.167,40.251 L203.334,39.418 L201,39.751 L198,40.751 L198.167,42.251 L198,44.918 L196.5,46.251 L193.5,46.918 L188.834,49.251 L185.334,50.418 L182,50.585 L180,49.085 L181,47.252 L181.5,46.752 L182.167,44.919 L183.417,44.169 L185,41.419 L183.334,39.252 L183,35.752 L180.834,35.085 L178,37.085 L179,34.752 L180.667,32.419 L180,30.252 L179.5,27.752 L176.834,26.752 L174.5,24.752 L171.667,25.919 L171.834,28.086 L170.167,30.086 L168.834,29.419 L166.334,32.252 L166.334,35.585 L166.667,38.918 L168.167,41.251 L168,46.251 L164.834,49.251 L162.5,49.418 L161.334,45.918 L160.167,43.418 L160.667,40.085 L160.167,36.752 L161.334,34.585 L162,32.418 L163.167,28.751 L160.5,31.751 L162,26.584 L164.334,24.584 L167.167,24.417 L169.334,23.417 L172.834,23.417 L175.667,23.417 L177.5,22.917 L179.667,23.25 L180.667,24.917 L184.834,26.417 L185.667,24.084 L182.834,24.417 L181,24.25 L178.334,22.25 L176.667,21.25 L174.75,19.833 L172.834,20.416 L171,19.083 L166.667,19.25 L164.334,20.75 L162.5,19.583 L160.334,18.25 L157.167,18.083 L160.334,13.583 L156.667,15.25 L153.667,17.583 L150.667,19.25 L148,19.583 L147.667,17.916 L142.167,19.083 L146.792,15.041 L150.042,12.666 L154.084,9.499 L152.417,9.249 L146.917,9.416 L144.417,8.916 L142.167,8.541 L139.917,6.916 L137.417,7.083 L132.667,5.916 L131.417,4.416 L130.75,2.083 L129.584,1 L129.667,2.25 L128.5,4.083 L11.5,4.166 L10.834,5.084 L10.834,5.084 Z"/>
+</svg>
+
+</svg>

package/src/assets/icons/file-upload-solid.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path d="M224 136V0H24C10.7 0 0 10.7 0 24v464c0 13.3 10.7 24 24 24h336c13.3 0 24-10.7 24-24V160H248c-13.2 0-24-10.8-24-24zm65.18 216.01H224v80c0 8.84-7.16 16-16 16h-32c-8.84 0-16-7.16-16-16v-80H94.82c-14.28 0-21.41-17.29-11.27-27.36l96.42-95.7c6.65-6.61 17.39-6.61 24.04 0l96.42 95.7c10.15 10.07 3.03 27.36-11.25 27.36zM377 105L279.1 7c-4.5-4.5-10.6-7-17-7H256v128h128v-6.1c0-6.3-2.5-12.4-7-16.9z"/></svg>

package/src/assets/icons/globe-asia-solid.svg

@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="globe-asia" class="svg-inline--fa fa-globe-asia fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><path fill="currentColor" d="M248 8C111.03 8 0 119.03 0 256s111.03 248 248 248 248-111.03 248-248S384.97 8 248 8zm-11.34 240.23c-2.89 4.82-8.1 7.77-13.72 7.77h-.31c-4.24 0-8.31 1.69-11.31 4.69l-5.66 5.66c-3.12 3.12-3.12 8.19 0 11.31l5.66 5.66c3 3 4.69 7.07 4.69 11.31V304c0 8.84-7.16 16-16 16h-6.11c-6.06 0-11.6-3.42-14.31-8.85l-22.62-45.23c-2.44-4.88-8.95-5.94-12.81-2.08l-19.47 19.46c-3 3-7.07 4.69-11.31 4.69H50.81C49.12 277.55 48 266.92 48 256c0-110.28 89.72-200 200-200 21.51 0 42.2 3.51 61.63 9.82l-50.16 38.53c-5.11 3.41-4.63 11.06.86 13.81l10.83 5.41c5.42 2.71 8.84 8.25 8.84 14.31V216c0 4.42-3.58 8-8 8h-3.06c-3.03 0-5.8-1.71-7.15-4.42-1.56-3.12-5.96-3.29-7.76-.3l-17.37 28.95zM408 358.43c0 4.24-1.69 8.31-4.69 11.31l-9.57 9.57c-3 3-7.07 4.69-11.31 4.69h-15.16c-4.24 0-8.31-1.69-11.31-4.69l-13.01-13.01a26.767 26.767 0 0 0-25.42-7.04l-21.27 5.32c-1.27.32-2.57.48-3.88.48h-10.34c-4.24 0-8.31-1.69-11.31-4.69l-11.91-11.91a8.008 8.008 0 0 1-2.34-5.66v-10.2c0-3.27 1.99-6.21 5.03-7.43l39.34-15.74c1.98-.79 3.86-1.82 5.59-3.05l23.71-16.89a7.978 7.978 0 0 1 4.64-1.48h12.09c3.23 0 6.15 1.94 7.39 4.93l5.35 12.85a4 4 0 0 0 3.69 2.46h3.8c1.78 0 3.35-1.18 3.84-2.88l4.2-14.47c.5-1.71 2.06-2.88 3.84-2.88h6.06c2.21 0 4 1.79 4 4v12.93c0 2.12.84 4.16 2.34 5.66l11.91 11.91c3 3 4.69 7.07 4.69 11.31v24.6z"></path></svg>

package/src/assets/icons/link.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M314.222 197.78c51.091 51.091 54.377 132.287 9.75 187.16-6.242 7.73-2.784 3.865-84.94 86.02-54.696 54.696-143.266 54.745-197.99 0-54.711-54.69-54.734-143.255 0-197.99 32.773-32.773 51.835-51.899 63.409-63.457 7.463-7.452 20.331-2.354 20.486 8.192a173.31 173.31 0 0 0 4.746 37.828c.966 4.029-.272 8.269-3.202 11.198L80.632 312.57c-32.755 32.775-32.887 85.892 0 118.8 32.775 32.755 85.892 32.887 118.8 0l75.19-75.2c32.718-32.725 32.777-86.013 0-118.79a83.722 83.722 0 0 0-22.814-16.229c-4.623-2.233-7.182-7.25-6.561-12.346 1.356-11.122 6.296-21.885 14.815-30.405l4.375-4.375c3.625-3.626 9.177-4.594 13.76-2.294 12.999 6.524 25.187 15.211 36.025 26.049zM470.958 41.04c-54.724-54.745-143.294-54.696-197.99 0-82.156 82.156-78.698 78.29-84.94 86.02-44.627 54.873-41.341 136.069 9.75 187.16 10.838 10.838 23.026 19.525 36.025 26.049 4.582 2.3 10.134 1.331 13.76-2.294l4.375-4.375c8.52-8.519 13.459-19.283 14.815-30.405.621-5.096-1.938-10.113-6.561-12.346a83.706 83.706 0 0 1-22.814-16.229c-32.777-32.777-32.718-86.065 0-118.79l75.19-75.2c32.908-32.887 86.025-32.755 118.8 0 32.887 32.908 32.755 86.025 0 118.8l-45.848 45.84c-2.93 2.929-4.168 7.169-3.202 11.198a173.31 173.31 0 0 1 4.746 37.828c.155 10.546 13.023 15.644 20.486 8.192 11.574-11.558 30.636-30.684 63.409-63.457 54.733-54.735 54.71-143.3-.001-197.991z"/></svg>

package/src/assets/icons/upload-solid.svg

@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="upload" class="svg-inline--fa fa-upload fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M296 384h-80c-13.3 0-24-10.7-24-24V192h-87.7c-17.8 0-26.7-21.5-14.1-34.1L242.3 5.7c7.5-7.5 19.8-7.5 27.3 0l152.2 152.2c12.6 12.6 3.7 34.1-14.1 34.1H320v168c0 13.3-10.7 24-24 24zm216-8v112c0 13.3-10.7 24-24 24H24c-13.3 0-24-10.7-24-24V376c0-13.3 10.7-24 24-24h136v8c0 30.9 25.1 56 56 56h80c30.9 0 56-25.1 56-56v-8h136c13.3 0 24 10.7 24 24zm-124 88c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20zm64 0c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20z"></path></svg>

package/src/components/ChooseTab.js

@@ -0,0 +1,103 @@
+import React, { useContext, useEffect } from 'react';
+import '../scss/choose-vis-tab.scss';
+
+import GlobalState from '../context';
+
+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 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';
+
+export default function ChooseTab() {
+    const {config, setConfig, setGlobalActive, tempConfig, setTempConfig} = useContext(GlobalState);
+
+    useEffect(() => {
+        if(tempConfig !== null) {
+            setConfig(tempConfig)
+            setTempConfig(null)
+        }
+    })
+
+    /**
+     * IconButton component
+     */
+    const IconButton = ({icon, label, type, subType, barType}) => {
+        let isSubType = false
+
+        if(type === 'map' && config.general) {
+            let geoType = config.general.geoType
+            isSubType = (subType === geoType)
+        }
+
+        if(type === 'chart') {
+            isSubType = (subType === config.visualizationType)
+        }
+
+        if(type === 'dashboard' || type === 'data-bite' || type === 'waffle-chart' || type === 'markup-include') 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,
+                dataUrl: config.dataUrl,
+                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)
+        }
+
+        return (<button className={classNames} onClick={() => setTypes()} aria-label={label}>{icon}<span className="mt-1">{label}</span></button>)
+    }
+
+    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>
+                <li><IconButton label="Waffle Chart" type="waffle-chart" icon={ <WaffleChartIcon /> } /></li>
+                <li><IconButton label="Markup Include" type="markup-include" icon={ <MarkupIncludeIcon /> } /></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>
+                <li><IconButton label="Paired Bar" type="chart" subType="Paired Bar" icon={ <PairedBarIcon /> } /></li>
+            </ul>
+            <div className="heading-2">Maps</div>
+            <ul className="grid">
+                <li><IconButton label="United States (State- or County-Level)" type="map" subType="us" icon={ <UsaIcon /> } /></li>
+                <li><IconButton label="World" type="map" subType="world" icon={ <GlobeIcon /> } /></li>
+                <li><IconButton label="U.S. State" type="map" subType="single-state" icon={ <AlabamaGraphic /> } /></li>
+            </ul>
+        </div>
+    )
+}

package/src/components/ConfigureTab.js

@@ -0,0 +1,60 @@
+import React, { useContext } from 'react';
+
+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({containerEl}) {
+    const { config, setTempConfig, hostname } = useContext(GlobalState);
+
+    let { type } = config
+
+    switch (type) {
+        case 'map':
+            return (
+                <ErrorBoundary component="CdcMap">
+                    <CdcMap isEditor={true} config={config} hostname={hostname} setConfig={setTempConfig} containerEl={containerEl} />
+                </ErrorBoundary>
+            )
+        case 'chart':
+            return (
+                <ErrorBoundary component="CdcChart">
+                    <CdcChart isEditor={true} config={config} setConfig={setTempConfig} />
+                </ErrorBoundary>
+            )
+        case 'dashboard':
+            return (
+                <ErrorBoundary component="CdcDashboard">
+                    <CdcDashboard isEditor={true} config={config} setConfig={setTempConfig} />
+                </ErrorBoundary>
+            )
+        case 'data-bite':
+            return (
+              <ErrorBoundary component="CdcDashboard">
+                  <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>
+    }
+}