@cdc/dashboard 4.22.10 → 4.22.11

package/src/CdcDashboard.js

@@ -19,7 +19,7 @@ import CdcChart from '@cdc/chart'
 import CdcDataBite from '@cdc/data-bite'
 import CdcWaffleChart from '@cdc/waffle-chart'
 import CdcMarkupInclude from '@cdc/markup-include'
-import FilteredText from '@cdc/filtered-text';
+import FilteredText from '@cdc/filtered-text'
 
 import EditorPanel from './components/EditorPanel'
 import Grid from './components/Grid'
@@ -61,7 +61,7 @@ const addVisualization = (type, subType) => {
       newVisualizationConfig.visualizationType = type
       break
     case 'filtered-text':
-         newVisualizationConfig.visualizationType = type
+      newVisualizationConfig.visualizationType = type
       break
   }
 
@@ -69,63 +69,60 @@ const addVisualization = (type, subType) => {
 }
 
 const VisualizationsPanel = () => (
-  <div className="visualizations-panel">
+  <div className='visualizations-panel'>
     <p style={{ fontSize: '14px' }}>Click and drag an item onto the grid to add it to your dashboard.</p>
-    <span className="subheading-3">Chart</span>
-    <div className="drag-grid">
-      <Widget addVisualization={() => addVisualization('chart', 'Bar')} type="Bar"/>
-      <Widget addVisualization={() => addVisualization('chart', 'Line')} type="Line"/>
-      <Widget addVisualization={() => addVisualization('chart', 'Pie')} type="Pie"/>
+    <span className='subheading-3'>Chart</span>
+    <div className='drag-grid'>
+      <Widget addVisualization={() => addVisualization('chart', 'Bar')} type='Bar' />
+      <Widget addVisualization={() => addVisualization('chart', 'Line')} type='Line' />
+      <Widget addVisualization={() => addVisualization('chart', 'Pie')} type='Pie' />
     </div>
-    <span className="subheading-3">Map</span>
-    <div className="drag-grid">
-      <Widget addVisualization={() => addVisualization('map', 'us')} type="us"/>
-      <Widget addVisualization={() => addVisualization('map', 'world')} type="world"/>
-      <Widget addVisualization={() => addVisualization('map', 'single-state')} type="single-state"/>
+    <span className='subheading-3'>Map</span>
+    <div className='drag-grid'>
+      <Widget addVisualization={() => addVisualization('map', 'us')} type='us' />
+      <Widget addVisualization={() => addVisualization('map', 'world')} type='world' />
+      <Widget addVisualization={() => addVisualization('map', 'single-state')} type='single-state' />
     </div>
-    <span className="subheading-3">Misc.</span>
-    <div className="drag-grid">
-      <Widget addVisualization={() => addVisualization('data-bite', '')} type="data-bite"/>
-      <Widget addVisualization={() => addVisualization('waffle-chart', '')} type="waffle-chart"/>
-      <Widget addVisualization={() => addVisualization('markup-include', '')} type="markup-include"/>
-      <Widget addVisualization={() => addVisualization('filtered-text', '')} type="filtered-text"/>
+    <span className='subheading-3'>Misc.</span>
+    <div className='drag-grid'>
+      <Widget addVisualization={() => addVisualization('data-bite', '')} type='data-bite' />
+      <Widget addVisualization={() => addVisualization('waffle-chart', '')} type='waffle-chart' />
+      <Widget addVisualization={() => addVisualization('markup-include', '')} type='markup-include' />
+      <Widget addVisualization={() => addVisualization('filtered-text', '')} type='filtered-text' />
     </div>
   </div>
 )
 
-export default function CdcDashboard(
-  { configUrl = '', config: configObj = undefined, isEditor = false, setConfig: setParentConfig, hostname }
-) {
-
+export default function CdcDashboard({ configUrl = '', config: configObj = undefined, isEditor = false, setConfig: setParentConfig, hostname }) {
   const transform = new DataTransform()
 
-  const [ config, setConfig ] = useState(configObj)
+  const [config, setConfig] = useState(configObj)
 
-  const [ data, setData ] = useState([])
+  const [data, setData] = useState([])
 
-  const [ filteredData, setFilteredData ] = useState()
+  const [filteredData, setFilteredData] = useState()
 
-  const [ loading, setLoading ] = useState(true)
+  const [loading, setLoading] = useState(true)
 
-  const [ preview, setPreview ] = useState(false)
+  const [preview, setPreview] = useState(false)
 
-  const [ currentViewport, setCurrentViewport ] = useState('lg')
+  const [currentViewport, setCurrentViewport] = useState('lg')
 
-  const [ coveLoadedHasRan, setCoveLoadedHasRan ] = useState(false)
+  const [coveLoadedHasRan, setCoveLoadedHasRan] = useState(false)
 
-  const [ container, setContainer ] = useState()
+  const [container, setContainer] = useState()
 
-  const { title, description } = config ? (config.dashboard || config) : {}
+  const { title, description } = config ? config.dashboard || config : {}
 
   // Supports JSON or CSV
-  const fetchRemoteData = async (url) => {
+  const fetchRemoteData = async url => {
     try {
       const urlObj = new URL(url)
       const regex = /(?:\.([^.]+))?$/
 
       let data = []
 
-      const ext = (regex.exec(urlObj.pathname)[1])
+      const ext = regex.exec(urlObj.pathname)[1]
       if ('csv' === ext) {
         data = await fetch(url)
           .then(response => response.text())
@@ -140,8 +137,7 @@ export default function CdcDashboard(
       }
 
       if ('json' === ext) {
-        data = await fetch(url)
-          .then(response => response.json())
+        data = await fetch(url).then(response => response.json())
       }
 
       return data
@@ -156,17 +152,14 @@ export default function CdcDashboard(
     }
   }
 
-   
-
-  const loadConfig = async (configObj) => {
+  const loadConfig = async configObj => {
     // Set loading flag
     if (!loading) setLoading(true)
 
-    let newState = configObj || await (await fetch(configUrl)).json()
+    let newState = configObj || (await (await fetch(configUrl)).json())
 
     // If a dataUrl property exists, always pull from that.
     if (newState.dataUrl) {
-      
       if (newState.dataUrl[0] === '/') {
         newState.dataUrl = 'https://' + hostname + newState.dataUrl
       }
@@ -198,10 +191,10 @@ export default function CdcDashboard(
   const filterData = (filters, data) => {
     let filteredData = []
 
-    data.forEach((row) => {
+    data.forEach(row => {
       let add = true
 
-      filters.forEach((filter) => {
+      filters.forEach(filter => {
         if (row[filter.columnName] !== filter.active) {
           add = false
         }
@@ -217,7 +210,7 @@ export default function CdcDashboard(
   const generateValuesForFilter = (columnName, data = this.state.data) => {
     const values = []
 
-    data.forEach((row) => {
+    data.forEach(row => {
       const value = row[columnName]
       if (value && false === values.includes(value)) {
         values.push(value)
@@ -228,7 +221,7 @@ export default function CdcDashboard(
   }
 
   function isEmpty(obj) {
-    return Object.keys(obj).length === 0;
+    return Object.keys(obj).length === 0
   }
 
   const updateConfig = (newConfig, dataOverride = null) => {
@@ -236,12 +229,12 @@ export default function CdcDashboard(
     if (newConfig.dashboard.filters) {
       const filterList = []
 
-      newConfig.dashboard.filters.forEach((filter) => {
+      newConfig.dashboard.filters.forEach(filter => {
         filterList.push(filter.columnName)
       })
 
       filterList.forEach((filter, index) => {
-        const filterValues = generateValuesForFilter(filter, (dataOverride || data))
+        const filterValues = generateValuesForFilter(filter, dataOverride || data)
 
         if (newConfig.dashboard.filters[index].order === 'asc') {
           filterValues.sort()
@@ -256,7 +249,7 @@ export default function CdcDashboard(
         newConfig.dashboard.filters[index].active = filterValues[0]
       })
 
-      setFilteredData(filterData(newConfig.dashboard.filters, (dataOverride || data)))
+      setFilteredData(filterData(newConfig.dashboard.filters, dataOverride || data))
     }
 
     //Enforce default values that need to be calculated at runtime
@@ -275,14 +268,14 @@ export default function CdcDashboard(
     if (setParentConfig && isEditor) {
       setParentConfig(config)
     }
-  }, [ config ])
+  }, [config])
 
   useEffect(() => {
     if (config && !coveLoadedHasRan && container) {
       publish('cove_loaded', { config: config })
       setCoveLoadedHasRan(true)
     }
-  }, [config, container]);
+  }, [config, container])
 
   const updateChildConfig = (visualizationKey, newConfig) => {
     let updatedConfig = { ...config }
@@ -302,30 +295,28 @@ export default function CdcDashboard(
       setFilteredData(filterData(dashboardConfig.filters, data))
     }
 
-    const announceChange = (text) => {
-
-    }
+    const announceChange = text => {}
 
     return config.dashboard.filters.map((singleFilter, index) => {
       const values = []
 
       singleFilter.values.forEach((filterOption, index) => {
-        values.push(<option
-          key={index}
-          value={filterOption}
-        >{filterOption}
-        </option>)
+        values.push(
+          <option key={index} value={filterOption}>
+            {filterOption}
+          </option>
+        )
       })
 
       return (
-        <section className="dashboard-filters-section" key={index}>
+        <section className='dashboard-filters-section' key={index}>
           <label htmlFor={`filter-${index}`}>{singleFilter.label}</label>
           <select
             id={`filter-${index}`}
-            className="filter-select"
-            data-index="0"
+            className='filter-select'
+            data-index='0'
             value={singleFilter.active}
-            onChange={(val) => {
+            onChange={val => {
               changeFilterActive(index, val.target.value)
               announceChange(`Filter ${singleFilter.label} value has been changed to ${val.target.value}, please reference the data table to see updated values.`)
             }}
@@ -335,7 +326,6 @@ export default function CdcDashboard(
         </section>
       )
     })
-
   }
 
   const resizeObserver = new ResizeObserver(entries => {
@@ -354,7 +344,7 @@ export default function CdcDashboard(
   }, [])
 
   // Prevent render if loading
-  if (loading) return <Loading/>
+  if (loading) return <Loading />
 
   let body = null
 
@@ -378,28 +368,58 @@ export default function CdcDashboard(
           setConfig(newConfig)
         }
 
-        const updateConfig = (newConfig) => updateChildConfig(visualizationKey, newConfig)
+        const updateConfig = newConfig => updateChildConfig(visualizationKey, newConfig)
 
         switch (visualizationConfig.type) {
           case 'chart':
-            body = <><Header back={back} subEditor="Chart"/><CdcChart key={visualizationKey} config={visualizationConfig} isEditor={true} setConfig={updateConfig} isDashboard={true}/></>
+            body = (
+              <>
+                <Header back={back} subEditor='Chart' />
+                <CdcChart key={visualizationKey} config={visualizationConfig} isEditor={true} setConfig={updateConfig} isDashboard={true} />
+              </>
+            )
             break
           case 'map':
-            body = <><Header back={back} subEditor="Map"/><CdcMap key={visualizationKey} config={visualizationConfig} isEditor={true} setConfig={updateConfig} isDashboard={true}/></>
+            body = (
+              <>
+                <Header back={back} subEditor='Map' />
+                <CdcMap key={visualizationKey} config={visualizationConfig} isEditor={true} setConfig={updateConfig} isDashboard={true} />
+              </>
+            )
             break
           case 'data-bite':
             visualizationConfig = { ...visualizationConfig, newViz: true }
-            body = <><Header back={back} subEditor="Data Bite"/><CdcDataBite key={visualizationKey} config={visualizationConfig} isEditor={true} setConfig={updateConfig} isDashboard={true}/></>
+            body = (
+              <>
+                <Header back={back} subEditor='Data Bite' />
+                <CdcDataBite key={visualizationKey} config={visualizationConfig} isEditor={true} setConfig={updateConfig} isDashboard={true} />
+              </>
+            )
             break
           case 'waffle-chart':
-            body = <><Header back={back} subEditor="Waffle Chart"/><CdcWaffleChart key={visualizationKey} config={visualizationConfig} isEditor={true} setConfig={updateConfig} isDashboard={true}/></>
+            body = (
+              <>
+                <Header back={back} subEditor='Waffle Chart' />
+                <CdcWaffleChart key={visualizationKey} config={visualizationConfig} isEditor={true} setConfig={updateConfig} isDashboard={true} />
+              </>
+            )
             break
           case 'markup-include':
-            body = <><Header back={back} subEditor="Markup Include"/><CdcMarkupInclude key={visualizationKey} config={visualizationConfig} isEditor={true} setConfig={updateConfig} isDashboard={true}/></>
+            body = (
+              <>
+                <Header back={back} subEditor='Markup Include' />
+                <CdcMarkupInclude key={visualizationKey} config={visualizationConfig} isEditor={true} setConfig={updateConfig} isDashboard={true} />
+              </>
+            )
+            break
+          case 'filtered-text':
+            body = (
+              <>
+                <Header back={back} subEditor='Filtered Text' />
+                <FilteredText key={visualizationKey} config={visualizationConfig} isEditor={true} setConfig={updateConfig} isDashboard={true} />
+              </>
+            )
             break
-            case 'filtered-text':
-              body = <><Header back={back} subEditor="Filtered Text"/><FilteredText key={visualizationKey} config={visualizationConfig} isEditor={true} setConfig={updateConfig} isDashboard={true}/></>
-              break
         }
       }
     })
@@ -407,10 +427,10 @@ export default function CdcDashboard(
     if (!subVisualizationEditing) {
       body = (
         <DndProvider backend={HTML5Backend}>
-          <Header preview={preview} setPreview={setPreview}/>
-          <div className="layout-container">
-            <VisualizationsPanel/>
-            <Grid/>
+          <Header preview={preview} setPreview={setPreview} />
+          <div className='layout-container'>
+            <VisualizationsPanel />
+            <Grid />
           </div>
         </DndProvider>
       )
@@ -418,64 +438,120 @@ export default function CdcDashboard(
   } else {
     body = (
       <>
-        {isEditor && <Header preview={preview} setPreview={setPreview}/>}
-        {isEditor && <EditorPanel/>}
-        <div className="cdc-dashboard-inner-container">
+        {isEditor && <Header preview={preview} setPreview={setPreview} />}
+        {isEditor && <EditorPanel />}
+        <div className='cdc-dashboard-inner-container'>
           {/* Title */}
-          {title && <div role="heading" className={`dashboard-title ${config.dashboard.theme ?? 'theme-blue'}`}>{title}</div>}
+          {title && (
+            <div role='heading' className={`dashboard-title ${config.dashboard.theme ?? 'theme-blue'}`}>
+              {title}
+            </div>
+          )}
 
           {/* Filters */}
-          {config.dashboard.filters &&
-            <div className="cove-dashboard-filters">
+          {config.dashboard.filters && (
+            <div className='cove-dashboard-filters'>
               <Filters />
             </div>
-          }
+          )}
 
           {/* Visualizations */}
-          {config.rows && config.rows.map((row, index) => {
-            // Empty check
-            if (row.filter(col => col.widget).length === 0) return null
-
-            return (
-              <div className="dashboard-row" key={`row__${index}`}>
-                {row.map((col, index) => {
-                  if (col.width) {
-                    if (!col.widget) return <div className={`dashboard-col dashboard-col-${col.width}`}></div>
-
-                    let visualizationConfig = config.visualizations[col.widget]
-
-                    visualizationConfig.data = filteredData || data
-
-                    return <div className={`dashboard-col dashboard-col-${col.width}`} key={`vis__${index}`}>
-                      {visualizationConfig.type === 'chart' && <CdcChart key={col.widget} config={visualizationConfig} isEditor={false} setConfig={(newConfig) => {
-                        updateChildConfig(col.widget, newConfig)
-                      }} isDashboard={true}/>}
-                      {visualizationConfig.type === 'map' && <CdcMap key={col.widget} config={visualizationConfig} isEditor={false} setConfig={(newConfig) => {
-                        updateChildConfig(col.widget, newConfig)
-                      }} isDashboard={true}/>}
-                      {visualizationConfig.type === 'data-bite' && <CdcDataBite key={col.widget} config={visualizationConfig} isEditor={false} setConfig={(newConfig) => {
-                        updateChildConfig(col.widget, newConfig)
-                      }} isDashboard={true}/>}
-                      {visualizationConfig.type === 'waffle-chart' && <CdcWaffleChart key={col.widget} config={visualizationConfig} isEditor={false} setConfig={(newConfig) => {
-                        updateChildConfig(col.widget, newConfig)
-                      }} isDashboard={true}/>}
-                      {visualizationConfig.type === 'markup-include' && <CdcMarkupInclude key={col.widget} config={visualizationConfig} isEditor={false} setConfig={(newConfig) => {
-                        updateChildConfig(col.widget, newConfig)
-                      }} isDashboard={true}/>}
-                      {visualizationConfig.type === 'filtered-text' && <FilteredText key={col.widget} config={visualizationConfig} isEditor={false} setConfig={(newConfig) => {
-                        updateChildConfig(col.widget, newConfig)
-                      }} isDashboard={true}/>}
-                    </div>
-                  }
-                })}
-              </div>)
-          })}
+          {config.rows &&
+            config.rows.map((row, index) => {
+              // Empty check
+              if (row.filter(col => col.widget).length === 0) return null
+
+              return (
+                <div className='dashboard-row' key={`row__${index}`}>
+                  {row.map((col, index) => {
+                    if (col.width) {
+                      if (!col.widget) return <div className={`dashboard-col dashboard-col-${col.width}`}></div>
+
+                      let visualizationConfig = config.visualizations[col.widget]
+
+                      visualizationConfig.data = filteredData || data
+
+                      return (
+                        <div className={`dashboard-col dashboard-col-${col.width}`} key={`vis__${index}`}>
+                          {visualizationConfig.type === 'chart' && (
+                            <CdcChart
+                              key={col.widget}
+                              config={visualizationConfig}
+                              isEditor={false}
+                              setConfig={newConfig => {
+                                updateChildConfig(col.widget, newConfig)
+                              }}
+                              isDashboard={true}
+                            />
+                          )}
+                          {visualizationConfig.type === 'map' && (
+                            <CdcMap
+                              key={col.widget}
+                              config={visualizationConfig}
+                              isEditor={false}
+                              setConfig={newConfig => {
+                                updateChildConfig(col.widget, newConfig)
+                              }}
+                              isDashboard={true}
+                            />
+                          )}
+                          {visualizationConfig.type === 'data-bite' && (
+                            <CdcDataBite
+                              key={col.widget}
+                              config={visualizationConfig}
+                              isEditor={false}
+                              setConfig={newConfig => {
+                                updateChildConfig(col.widget, newConfig)
+                              }}
+                              isDashboard={true}
+                            />
+                          )}
+                          {visualizationConfig.type === 'waffle-chart' && (
+                            <CdcWaffleChart
+                              key={col.widget}
+                              config={visualizationConfig}
+                              isEditor={false}
+                              setConfig={newConfig => {
+                                updateChildConfig(col.widget, newConfig)
+                              }}
+                              isDashboard={true}
+                            />
+                          )}
+                          {visualizationConfig.type === 'markup-include' && (
+                            <CdcMarkupInclude
+                              key={col.widget}
+                              config={visualizationConfig}
+                              isEditor={false}
+                              setConfig={newConfig => {
+                                updateChildConfig(col.widget, newConfig)
+                              }}
+                              isDashboard={true}
+                            />
+                          )}
+                          {visualizationConfig.type === 'filtered-text' && (
+                            <FilteredText
+                              key={col.widget}
+                              config={visualizationConfig}
+                              isEditor={false}
+                              setConfig={newConfig => {
+                                updateChildConfig(col.widget, newConfig)
+                              }}
+                              isDashboard={true}
+                            />
+                          )}
+                        </div>
+                      )
+                    }
+                  })}
+                </div>
+              )
+            })}
 
           {/* Data Table */}
-          {config.table.show && <DataTable/>}
+          {config.table.show && <DataTable />}
 
           {/* Description */}
-          {description && <div className="subtext">{parse(description)}</div>}
+          {description && <div className='subtext'>{parse(description)}</div>}
         </div>
       </>
     )