@cdc/dashboard 4.22.10 → 4.23.1

package/src/components/Row.jsx

@@ -29,11 +29,11 @@ const RowMenu = ({ rowIdx, row }) => {
     return res.join('')
   }
 
-  const [ curr, setCurr ] = useState(getCurr())
-  const [ equalHeight, setEqualHeight ] = useState(false)
+  const [curr, setCurr] = useState(getCurr())
+  const [equalHeight, setEqualHeight] = useState(false)
 
-  const setRowLayout = (layout) => {
-    const newRows = [ ...rows ]
+  const setRowLayout = layout => {
+    const newRows = [...rows]
     const r = newRows[rowIdx]
 
     for (let i = 0; i < r.length; i++) {
@@ -64,8 +64,8 @@ const RowMenu = ({ rowIdx, row }) => {
     let calcRowMove = dir === 'down' ? 202 : -202
     let calcRowMove2 = dir === 'down' ? -202 : 202
 
-    let rowEle = document.querySelector('[data-row-id=\'' + rowIdx + '\']')
-    let rowNewEle = document.querySelector('[data-row-id=\'' + newIdx + '\']')
+    let rowEle = document.querySelector("[data-row-id='" + rowIdx + "']")
+    let rowNewEle = document.querySelector("[data-row-id='" + newIdx + "']")
 
     rowEle.style.pointerEvents = 'none'
     rowNewEle.style.pointerEvents = 'none'
@@ -98,68 +98,50 @@ const RowMenu = ({ rowIdx, row }) => {
   }
 
   const layoutList = [
-    <li className={curr === '12' ? `current row-menu__list--item` : `row-menu__list--item`}
-        onClick={() => setRowLayout([ 12 ])} key="12" title="1 Column">
-      <OneColIcon/>
+    <li className={curr === '12' ? `current row-menu__list--item` : `row-menu__list--item`} onClick={() => setRowLayout([12])} key='12' title='1 Column'>
+      <OneColIcon />
     </li>,
-    <li className={curr === '66' ? `current row-menu__list--item` : `row-menu__list--item`}
-        onClick={() => setRowLayout([ 6, 6 ])} key="66" title="2 Columns">
-      <TwoColIcon/>
+    <li className={curr === '66' ? `current row-menu__list--item` : `row-menu__list--item`} onClick={() => setRowLayout([6, 6])} key='66' title='2 Columns'>
+      <TwoColIcon />
     </li>,
-    <li className={curr === '444' ? `current row-menu__list--item` : `row-menu__list--item`}
-        onClick={() => setRowLayout([ 4, 4, 4 ])} key="444" title="3 Columns">
-      <ThreeColIcon/>
+    <li className={curr === '444' ? `current row-menu__list--item` : `row-menu__list--item`} onClick={() => setRowLayout([4, 4, 4])} key='444' title='3 Columns'>
+      <ThreeColIcon />
     </li>,
-    <li className={curr === '48' ? `current row-menu__list--item` : `row-menu__list--item`}
-        onClick={() => setRowLayout([ 4, 8 ])} key="48" title="2 Columns">
-      <FourEightColIcon/>
+    <li className={curr === '48' ? `current row-menu__list--item` : `row-menu__list--item`} onClick={() => setRowLayout([4, 8])} key='48' title='2 Columns'>
+      <FourEightColIcon />
     </li>,
-    <li className={curr === '84' ? `current row-menu__list--item` : `row-menu__list--item`}
-        onClick={() => setRowLayout([ 8, 4 ])} key="84" title="2 Columns">
-      <EightFourColIcon/>
+    <li className={curr === '84' ? `current row-menu__list--item` : `row-menu__list--item`} onClick={() => setRowLayout([8, 4])} key='84' title='2 Columns'>
+      <EightFourColIcon />
     </li>
   ]
 
   const rowSettings = (
     <Modal>
-      <Modal.Header>
-        Row Settings
-      </Modal.Header>
+      <Modal.Header>Row Settings</Modal.Header>
       <Modal.Content>
-        <InputToggle
-          label="Visualizations in this row should be equal height"
-          fieldName={`toggleEqualHeight${rowIdx}`}
-          value={row.equalHeight ? row.equalHeight : false}
-          updateField={rowItemsHeight}
-        ></InputToggle>
+        <InputToggle label='Visualizations in this row should be equal height' fieldName={`toggleEqualHeight${rowIdx}`} value={row.equalHeight ? row.equalHeight : false} updateField={rowItemsHeight}></InputToggle>
       </Modal.Content>
     </Modal>
   )
 
   return (
-    <nav className="row-menu">
-      <div className="row-menu__btn">
-        <ul className="row-menu__flyout">
-          {layoutList}
-        </ul>
+    <nav className='row-menu'>
+      <div className='row-menu__btn'>
+        <ul className='row-menu__flyout'>{layoutList}</ul>
       </div>
-      <div className="spacer"></div>
+      <div className='spacer'></div>
       {/*<button className={'row-menu__btn'} title="Row Settings"*/}
       {/*        onClick={() => overlay?.actions.openOverlay(rowSettings)}>*/}
       {/*  <Icon display="edit" color="#fff" size={25}/>*/}
       {/*</button>*/}
-      <button className={rowIdx === 0 ? 'row-menu__btn row-menu__btn-disabled' : 'row-menu__btn'} title="Move Row Up"
-              onClick={() => moveRow('up')}>
-        <Icon display="caretUp" color="#fff" size={25}/>
+      <button className={rowIdx === 0 ? 'row-menu__btn row-menu__btn-disabled' : 'row-menu__btn'} title='Move Row Up' onClick={() => moveRow('up')}>
+        <Icon display='caretUp' color='#fff' size={25} />
       </button>
-      <button className={rowIdx + 1 === rows.length ? 'row-menu__btn row-menu__btn-disabled' : 'row-menu__btn'}
-              title="Move Row Down" onClick={() => moveRow('down')}>
-        <Icon display="caretDown" color="#fff" size={25}/>
+      <button className={rowIdx + 1 === rows.length ? 'row-menu__btn row-menu__btn-disabled' : 'row-menu__btn'} title='Move Row Down' onClick={() => moveRow('down')}>
+        <Icon display='caretDown' color='#fff' size={25} />
       </button>
-      <button
-        className={rowIdx === 0 && rows.length === 1 ? 'row-menu__btn row-menu__btn--remove row-menu__btn-disabled' : 'row-menu__btn row-menu__btn--remove'}
-        title="Delete Row" onClick={deleteRow}>
-        <Icon display="close" color="#fff" size={25}/>
+      <button className={rowIdx === 0 && rows.length === 1 ? 'row-menu__btn row-menu__btn--remove row-menu__btn-disabled' : 'row-menu__btn row-menu__btn--remove'} title='Delete Row' onClick={deleteRow}>
+        <Icon display='close' color='#fff' size={25} />
       </button>
     </nav>
   )
@@ -167,12 +149,14 @@ const RowMenu = ({ rowIdx, row }) => {
 
 const Row = ({ row, idx: rowIdx, uuid }) => {
   return (
-    <div className="builder-row" data-row-id={rowIdx}>
-      <RowMenu rowIdx={rowIdx} row={row}/>
-      <div className="column-container">
-        {row.filter(column => column.width).map((column, colIdx) => <Column data={column}
-                                                                            key={`row-${uuid}-col-${colIdx}`}
-                                                                            rowIdx={rowIdx} colIdx={colIdx}/>)}
+    <div className='builder-row' data-row-id={rowIdx}>
+      <RowMenu rowIdx={rowIdx} row={row} />
+      <div className='column-container'>
+        {row
+          .filter(column => column.width)
+          .map((column, colIdx) => (
+            <Column data={column} key={`row-${uuid}-col-${colIdx}`} rowIdx={rowIdx} colIdx={colIdx} />
+          ))}
       </div>
     </div>
   )

package/src/components/Widget.js

@@ -1,50 +1,49 @@
-import React, { useContext } from 'react';
-import { useDrag } from 'react-dnd';
-import CloseIcon from '../images/icon-close.svg';
-import GridIcon from '../images/icon-grid.svg';
-import CodeIcon from '../images/icon-code.svg';
-import EditIcon from '../images/icon-edit.svg';
-import MoveIcon from '../images/icon-move.svg';
-import BiteIcon from '@cdc/core/assets/data-bite-graphic.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 UsaIcon from '@cdc/core/assets/usa-graphic.svg';
-import WorldIcon from '@cdc/core/assets/world-graphic.svg';
-import AlabamaIcon from '@cdc/core/assets/alabama-graphic.svg';
-import FilteredText from '@cdc/core/assets/filtered-text.svg';
-
-import Context from '../context';
+import React, { useContext } from 'react'
+import { useDrag } from 'react-dnd'
+import CloseIcon from '../images/icon-close.svg'
+import GridIcon from '../images/icon-grid.svg'
+import CodeIcon from '../images/icon-code.svg'
+import EditIcon from '../images/icon-edit.svg'
+import MoveIcon from '../images/icon-move.svg'
+import BiteIcon from '@cdc/core/assets/data-bite-graphic.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 UsaIcon from '@cdc/core/assets/usa-graphic.svg'
+import WorldIcon from '@cdc/core/assets/world-graphic.svg'
+import AlabamaIcon from '@cdc/core/assets/alabama-graphic.svg'
+import FilteredText from '@cdc/core/assets/filtered-text.svg'
+
+import Context from '../context'
 
 const iconHash = {
-  'data-bite' : <BiteIcon />,
-  'Bar': <BarIcon />,
+  'data-bite': <BiteIcon />,
+  Bar: <BarIcon />,
   'Spark Line': <LineIcon />,
-  'waffle-chart' : <GridIcon />,
-  'markup-include' : <CodeIcon />,
-  'Line' : <LineIcon />,
-  'Pie' : <PieIcon />,
-  'us' : <UsaIcon />,
+  'waffle-chart': <GridIcon />,
+  'markup-include': <CodeIcon />,
+  Line: <LineIcon />,
+  Pie: <PieIcon />,
+  us: <UsaIcon />,
   'us-county': <UsaIcon />,
-  'world' : <WorldIcon />,
+  world: <WorldIcon />,
   'single-state': <AlabamaIcon />,
-  'filtered-text' :  <FilteredText />,
+  'filtered-text': <FilteredText />
 }
 
 const labelHash = {
   'data-bite': 'Data Bite',
-  'waffle-chart' : 'Waffle Chart',
-  'markup-include' : 'Markup Include',
-  'Bar' : 'Bar',
-  'Line' : 'Line',
-  'Pie' : 'Pie',
-  'Spark Line' : 'Spark Line',
-  'us': 'United States (State- or County-Level)',
+  'waffle-chart': 'Waffle Chart',
+  'markup-include': 'Markup Include',
+  Bar: 'Bar',
+  Line: 'Line',
+  Pie: 'Pie',
+  'Spark Line': 'Spark Line',
+  us: 'United States (State- or County-Level)',
   'us-county': 'United States (State- or County-Level)',
-  'world' : 'World',
+  world: 'World',
   'single-state': 'U.S. State',
-  'filtered-text':'Filtered Text'
-
+  'filtered-text': 'Filtered Text'
 }
 
 const Widget = ({ data = {}, addVisualization, type }) => {
@@ -53,30 +52,30 @@ const Widget = ({ data = {}, addVisualization, type }) => {
   console.log('type', type)
 
   const handleWidgetMove = (item, monitor) => {
-      let result = monitor.getDropResult()
+    let result = monitor.getDropResult()
 
-      if(!result) return null
+    if (!result) return null
 
-      const { rowIdx, colIdx } = result
+    const { rowIdx, colIdx } = result
 
-      if(undefined !== data.rowIdx) {
-        rows[data.rowIdx][data.colIdx].widget = null // Wipe from old position
+    if (undefined !== data.rowIdx) {
+      rows[data.rowIdx][data.colIdx].widget = null // Wipe from old position
 
-        rows[rowIdx][colIdx].widget = data.uid // Add to new row and col
-      } else {
-        // Item does not exist, instantiate a new one
-        const newViz = addVisualization()
-        visualizations[newViz.uid] = newViz // Add to widgets collection
-        rows[rowIdx][colIdx].widget = newViz.uid // Store reference in rows collection under the specific column
-      }
+      rows[rowIdx][colIdx].widget = data.uid // Add to new row and col
+    } else {
+      // Item does not exist, instantiate a new one
+      const newViz = addVisualization()
+      visualizations[newViz.uid] = newViz // Add to widgets collection
+      rows[rowIdx][colIdx].widget = newViz.uid // Store reference in rows collection under the specific column
+    }
 
-      updateConfig({...config, rows, visualizations})
+    updateConfig({ ...config, rows, visualizations })
   }
 
-  const [ { isDragging, ...collected }, drag ] = useDrag({
+  const [{ isDragging, ...collected }, drag] = useDrag({
     type: 'vis-widget',
     end: handleWidgetMove,
-    collect: (monitor) => ({
+    collect: monitor => ({
       isDragging: monitor.isDragging()
     })
   })
@@ -86,28 +85,36 @@ const Widget = ({ data = {}, addVisualization, type }) => {
 
     delete visualizations[data.uid]
 
-    updateConfig({...config, rows, visualizations})
+    updateConfig({ ...config, rows, visualizations })
   }
 
   const editWidget = () => {
-    visualizations[data.uid].editing = true;
+    visualizations[data.uid].editing = true
 
-    updateConfig({...config, visualizations});
+    updateConfig({ ...config, visualizations })
   }
 
   return (
-    <div className="widget" ref={drag} style={{ opacity: isDragging ? 0.5 : 1 }} {...collected}>
-      <MoveIcon className="drag-icon" />
-      <div className="widget__content">
+    <div className='widget' ref={drag} style={{ opacity: isDragging ? 0.5 : 1 }} {...collected}>
+      <MoveIcon className='drag-icon' />
+      <div className='widget__content'>
         {data.rowIdx !== undefined && (
-          <div className="widget-menu">
-            <div className="widget-menu-item" onClick={editWidget}><EditIcon /></div>
-            <div className="widget-menu-item" onClick={deleteWidget}><CloseIcon /></div>
+          <div className='widget-menu'>
+            <div className='widget-menu-item' onClick={editWidget}>
+              <EditIcon />
+            </div>
+            <div className='widget-menu-item' onClick={deleteWidget}>
+              <CloseIcon />
+            </div>
           </div>
         )}
         {iconHash[type]}
         <span>{labelHash[type]}</span>
-        {data.newViz && <span onClick={editWidget} className="config-needed">Configuration needed</span>}
+        {data.newViz && (
+          <span onClick={editWidget} className='config-needed'>
+            Configuration needed
+          </span>
+        )}
       </div>
     </div>
   )

package/src/components/Widget.jsx

@@ -12,43 +12,43 @@ import Icon from '@cdc/core/components/ui/Icon'
 import Modal from '@cdc/core/components/ui/Modal'
 
 const iconHash = {
-  'data-bite': <Icon display="databite" base/>,
-  'Bar': <Icon display="chartBar" base/>,
-  'Spark Line': <Icon display="chartLine" />,
-  'waffle-chart': <Icon display="grid" base/>,
-  'markup-include': <Icon display="code" base/>,
-  'Line': <Icon display="chartLine" base/>,
-  'Pie': <Icon display="chartPie" base/>,
-  'us': <Icon display="mapUsa" base/>,
-  'us-county': <Icon display="mapUsa" base/>,
-  'world': <Icon display="mapWorld" base/>,
-  'single-state': <Icon display="mapAl" base/>,
-  'gear': <Icon display="gear" base/>,
-  'tools': <Icon display="tools" base/>,
-  'filtered-text': <Icon display='filtered-text' base/>
+  'data-bite': <Icon display='databite' base />,
+  Bar: <Icon display='chartBar' base />,
+  'Spark Line': <Icon display='chartLine' />,
+  'waffle-chart': <Icon display='grid' base />,
+  'markup-include': <Icon display='code' base />,
+  Line: <Icon display='chartLine' base />,
+  Pie: <Icon display='chartPie' base />,
+  us: <Icon display='mapUsa' base />,
+  'us-county': <Icon display='mapUsa' base />,
+  world: <Icon display='mapWorld' base />,
+  'single-state': <Icon display='mapAl' base />,
+  gear: <Icon display='gear' base />,
+  tools: <Icon display='tools' base />,
+  'filtered-text': <Icon display='filtered-text' base />
 }
 
 const labelHash = {
   'data-bite': 'Data Bite',
   'waffle-chart': 'Waffle Chart',
   'markup-include': 'Markup Include',
-  'Bar': 'Bar',
-  'Line': 'Line',
+  Bar: 'Bar',
+  Line: 'Line',
   'Spark Line': 'Spark Line',
-  'Pie': 'Pie',
-  'us': 'United States (State- or County-Level)',
+  Pie: 'Pie',
+  us: 'United States (State- or County-Level)',
   'us-county': 'United States (State- or County-Level)',
-  'world': 'World',
+  world: 'World',
   'single-state': 'U.S. State',
-  'filtered-text':'filtered-text'
+  'filtered-text': 'filtered-text'
 }
 
 const Widget = ({ data = {}, addVisualization, type }) => {
   const { overlay } = useGlobalContext()
   const { rows, visualizations, config, updateConfig } = useContext(ConfigContext)
 
-  const dataRef = useRef();
-  dataRef.current = data;
+  const dataRef = useRef()
+  dataRef.current = data
 
   const transform = new DataTransform()
 
@@ -73,10 +73,10 @@ const Widget = ({ data = {}, addVisualization, type }) => {
     updateConfig({ ...config, rows, visualizations })
   }
 
-  const [ { isDragging, ...collected }, drag ] = useDrag({
+  const [{ isDragging, ...collected }, drag] = useDrag({
     type: 'vis-widget',
     end: handleWidgetMove,
-    collect: (monitor) => ({
+    collect: monitor => ({
       isDragging: monitor.isDragging()
     })
   })
@@ -86,12 +86,12 @@ const Widget = ({ data = {}, addVisualization, type }) => {
 
     delete visualizations[data.uid]
 
-    if(config.dashboard.sharedFilters && config.dashboard.sharedFilters.length > 0){
+    if (config.dashboard.sharedFilters && config.dashboard.sharedFilters.length > 0) {
       config.dashboard.sharedFilters.forEach(sharedFilter => {
-        if(sharedFilter.usedBy.indexOf(data.uid) !== -1){
-          sharedFilter.usedBy.splice(sharedFilter.usedBy.indexOf(data.uid), 1);
+        if (sharedFilter.usedBy.indexOf(data.uid) !== -1) {
+          sharedFilter.usedBy.splice(sharedFilter.usedBy.indexOf(data.uid), 1)
         }
-      });
+      })
     }
 
     updateConfig({ ...config, rows, visualizations })
@@ -132,34 +132,44 @@ const Widget = ({ data = {}, addVisualization, type }) => {
 
     overlay?.actions.openOverlay(dataDesignerModal(newVisualizations[visualizationKey]))
   }
- 
+
   const dataDesignerModal = (configureData, dataKeyOverride) => {
-    const dataKey = !dataKeyOverride && dataKeyOverride !== '' ? (data.dataKey || dataRef.current.dataKey) : dataKeyOverride;
+    const dataKey = !dataKeyOverride && dataKeyOverride !== '' ? data.dataKey || dataRef.current.dataKey : dataKeyOverride
 
-    overlay?.actions.toggleOverlay();
+    overlay?.actions.toggleOverlay()
 
     return (
       <Modal>
         <Modal.Content>
-          <div className="dataset-selector-container">
+          <div className='dataset-selector-container'>
             Select a dataset:&nbsp;
-            <select className="dataset-selector" defaultValue={dataKey} onChange={(e) => {
-              changeDataset(data.uid, e.target.value)
-              overlay?.actions.openOverlay(dataDesignerModal(data, e.target.value || ''))
-            }}>
-              <option value="">Select a dataset</option>
-              {config.datasets && Object.keys(config.datasets).map(datasetKey => (
-                <option key={datasetKey}>{datasetKey}</option>
-              ))}
+            <select
+              className='dataset-selector'
+              defaultValue={dataKey}
+              onChange={e => {
+                changeDataset(data.uid, e.target.value)
+                overlay?.actions.openOverlay(dataDesignerModal(data, e.target.value || ''))
+              }}
+            >
+              <option value=''>Select a dataset</option>
+              {config.datasets && Object.keys(config.datasets).map(datasetKey => <option key={datasetKey}>{datasetKey}</option>)}
             </select>
           </div>
-          {dataKey && <DataDesigner {...{
-            configureData, 
-            visualizationKey: data.uid,
-            dataKey: dataKey,
-            updateDescriptionProp
-          }}/>}
-          {configureData.formattedData && <button style={{margin: '1em'}} className="cove-button" onClick={() => overlay?.actions.toggleOverlay()}>Continue</button>}
+          {dataKey && (
+            <DataDesigner
+              {...{
+                configureData,
+                visualizationKey: data.uid,
+                dataKey: dataKey,
+                updateDescriptionProp
+              }}
+            />
+          )}
+          {configureData.formattedData && (
+            <button style={{ margin: '1em' }} className='cove-button' onClick={() => overlay?.actions.toggleOverlay()}>
+              Continue
+            </button>
+          )}
         </Modal.Content>
       </Modal>
     )
@@ -167,7 +177,7 @@ const Widget = ({ data = {}, addVisualization, type }) => {
 
   useEffect(() => {
     if (data.openModal) {
-        overlay?.actions.openOverlay(dataDesignerModal(dataRef.current));
+      overlay?.actions.openOverlay(dataDesignerModal(dataRef.current))
 
       visualizations[data.uid].openModal = false
 
@@ -177,26 +187,39 @@ const Widget = ({ data = {}, addVisualization, type }) => {
 
   return (
     <>
-      <div className="widget" ref={drag} style={{ opacity: isDragging ? 0.5 : 1 }} {...collected}>
-        <Icon display="move" className="drag-icon"/>
-        <div className="widget__content">
+      <div className='widget' ref={drag} style={{ opacity: isDragging ? 0.5 : 1 }} {...collected}>
+        <Icon display='move' className='drag-icon' />
+        <div className='widget__content'>
           {data.rowIdx !== undefined && (
-            <div className="widget-menu">
-              {((data.dataKey && data.dataDescription && data.formattedData) || type === 'markup-include') &&
-                <button title="Configure Visualization" className="btn btn-configure" onClick={editWidget}>{iconHash['tools']}</button>
-              }
-              {type !== 'markup-include' && <button title="Configure Data" className="btn btn-configure" onClick={() => {
-                overlay?.actions.openOverlay(dataDesignerModal(data))
-              }}>{iconHash['gear']}
-              </button>}
-              <div className="widget-menu-item" onClick={deleteWidget}>
-                <Icon display="close" base/>
+            <div className='widget-menu'>
+              {((data.dataKey && data.dataDescription && data.formattedData) || type === 'markup-include') && (
+                <button title='Configure Visualization' className='btn btn-configure' onClick={editWidget}>
+                  {iconHash['tools']}
+                </button>
+              )}
+              {type !== 'markup-include' && (
+                <button
+                  title='Configure Data'
+                  className='btn btn-configure'
+                  onClick={() => {
+                    overlay?.actions.openOverlay(dataDesignerModal(data))
+                  }}
+                >
+                  {iconHash['gear']}
+                </button>
+              )}
+              <div className='widget-menu-item' onClick={deleteWidget}>
+                <Icon display='close' base />
               </div>
             </div>
           )}
           {iconHash[type]}
           <span>{labelHash[type]}</span>
-          {data.newViz && <span onClick={editWidget} className="config-needed">Configuration needed</span>}
+          {data.newViz && (
+            <span onClick={editWidget} className='config-needed'>
+              Configuration needed
+            </span>
+          )}
         </div>
       </div>
     </>

package/src/data/initial-state.js

@@ -1,17 +1,12 @@
 export default {
   dashboard: {
-      theme: 'theme-blue'
+    theme: 'theme-blue'
   },
-  rows: [
-    [
-      {width: 12},
-      {},
-      {}
-    ]
-  ],
+  rows: [[{ width: 12 }, {}, {}]],
   visualizations: {},
   table: {
     label: 'Data Table',
-    show: true
+    show: true,
+    showDownloadUrl: false
   }
-}
+}

package/src/index.html

@@ -20,9 +20,9 @@
 </head>
 
 <body>
-  <div class="react-container" data-config="/examples/default.json"></div>
-  <!--<div class="react-container" data-config="/examples/default-multi-dataset.json"></div>-->
-  <!-- <div class="react-container" data-config="/examples/default-filter-control.json"></div> -->
+  <!-- <div class="react-container" data-config="/examples/default.json"></div> -->
+  <!-- <div class="react-container" data-config="/examples/default-multi-dataset.json"></div> -->
+  <div class="react-container" data-config="/examples/default-filter-control.json"></div>
   <!-- <div class="react-container" data-config="/examples/private/totals.json"></div> -->
   <!-- <div class="react-container" data-config="/examples/private/totals-two.json"></div> -->
   <noscript>You need to enable JavaScript to run this app.</noscript>

package/src/index.js

@@ -1,17 +1,17 @@
-import React from 'react';	
-import { render } from 'react-dom';	
+import React from 'react'
+import { render } from 'react-dom'
 
-import CdcDashboard from './CdcDashboard';	
+import CdcDashboard from './CdcDashboard'
 
-const domContainers = document.querySelectorAll('.react-container');	
+const domContainers = document.querySelectorAll('.react-container')
 
-let isEditor = window.location.href.includes('editor=true');
+let isEditor = window.location.href.includes('editor=true')
 
-domContainers.forEach((domContainer) => {	
-  render(	
+domContainers.forEach(domContainer => {
+  render(
     <React.StrictMode>
-      <CdcDashboard configUrl={domContainer.attributes['data-config'].value} isEditor={isEditor} />	
-    </React.StrictMode>,	
-    domContainer,	
-  );	
-});
+      <CdcDashboard configUrl={domContainer.attributes['data-config'].value} isEditor={isEditor} />
+    </React.StrictMode>,
+    domContainer
+  )
+})