@cdc/editor 1.4.2 → 1.4.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cdc/editor",
-  "version": "1.4.2",
+  "version": "1.4.3",
   "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/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",
@@ -35,5 +37,8 @@
     "react": ">=16.8",
     "react-dom": ">=16"
   },
-  "gitHead": "8790a2336ff2453d0d6f09ecec56b5e4beaa7377"
+  "resolutions": {
+    "@types/react": "17.x"
+  },
+  "gitHead": "170845062bcbb93f31270104688f69c4148935d8"
 }

package/src/CdcEditor.js

@@ -15,7 +15,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([])
@@ -93,12 +93,13 @@ 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}>
+      <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 />
@@ -107,7 +108,7 @@ export default function CdcEditor({ config: configObj = {newViz: true}, hostname
             <ChooseTab />
           </TabPane>
           <TabPane title="3. Configure" className="configure" disableRule={null === config.data || !config.type}>
-            <ConfigureTab />
+            <ConfigureTab containerEl={containerEl }/>
           </TabPane>
         </Tabs>
       </div>

package/src/components/ChooseTab.js

@@ -10,6 +10,10 @@ 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);
@@ -24,7 +28,7 @@ export default function ChooseTab() {
     /**
      * IconButton component
      */
-    const IconButton = ({icon, label, type, subType}) => {
+    const IconButton = ({icon, label, type, subType, barType}) => {
         let isSubType = false
 
         if(type === 'map' && config.general) {
@@ -36,7 +40,7 @@ export default function ChooseTab() {
             isSubType = (subType === config.visualizationType)
         }
 
-        if(type === 'dashboard' || type === 'data-bite') isSubType = true;
+        if(type === 'dashboard' || type === 'data-bite' || type === 'waffle-chart' || type === 'markup-include') isSubType = true;
 
         let classNames = (config.type === type && isSubType) ? 'active' : ''
 
@@ -47,6 +51,7 @@ export default function ChooseTab() {
                 dataFileName: config.dataFileName,
                 dataFileSourceType: config.dataFileSourceType,
                 dataDescription: config.dataDescription,
+                dataUrl: config.dataUrl,
                 newViz: true,
                 type
             }
@@ -76,18 +81,22 @@ export default function ChooseTab() {
             <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="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" type="map" subType="us" icon={ <UsaIcon /> } /></li>
+                <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

@@ -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>
     }
-}
+}