@cdc/dashboard 4.23.4 → 4.23.6

package/src/CdcDashboard.jsx

@@ -11,7 +11,6 @@ import { HTML5Backend } from 'react-dnd-html5-backend'
 import parse from 'html-react-parser'
 
 import fetchRemoteData from '@cdc/core/helpers/fetchRemoteData'
-import cacheBustingString from '@cdc/core/helpers/cacheBustingString'
 import { GlobalContextProvider } from '@cdc/core/components/GlobalContext'
 import ConfigContext from './ConfigContext'
 
@@ -32,10 +31,11 @@ import Header from './components/Header'
 import defaults from './data/initial-state'
 import Widget from './components/Widget'
 import DataTable from './components/DataTable'
-import CoveMediaControls from '@cdc/core/components/CoveMediaControls'
+import MediaControls from '@cdc/core/components/MediaControls'
 
 import './scss/main.scss'
 import '@cdc/core/styles/v2/main.scss'
+import AdvancedEditor from '@cdc/core/components/AdvancedEditor'
 
 /* eslint-disable react-hooks/exhaustive-deps */
 
@@ -76,7 +76,7 @@ const addVisualization = (type, subType) => {
   return newVisualizationConfig
 }
 
-const VisualizationsPanel = () => (
+const VisualizationsPanel = ({ loadConfig, config }) => (
   <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>
@@ -98,6 +98,8 @@ const VisualizationsPanel = () => (
       <Widget addVisualization={() => addVisualization('markup-include', '')} type='markup-include' />
       <Widget addVisualization={() => addVisualization('filtered-text', '')} type='filtered-text' />
     </div>
+    <span className='subheading-3'>Advanced</span>
+    <AdvancedEditor loadConfig={loadConfig} state={config} />
   </div>
 )
 
@@ -115,25 +117,106 @@ export default function CdcDashboard({ configUrl = '', config: configObj = undef
 
   const transform = new DataTransform()
 
+  const getFormattedData = (data, dataDescription) => {
+    if (data && dataDescription) {
+      try {
+        let formattedData = transform.autoStandardize(data)
+        formattedData = transform.developerStandardize(data, dataDescription)
+        return formattedData
+      } catch (e) {
+        return data
+      }
+    }
+
+    return data
+  }
+
   const processData = async config => {
     let dataset = config.formattedData || config.data
 
     if (config.dataUrl) {
-      dataset = await fetchRemoteData(`${config.dataUrl}?v=${cacheBustingString()}`)
-
-      if (dataset && config.dataDescription) {
-        try {
-          dataset = transform.autoStandardize(data)
-          dataset = transform.developerStandardize(data, config.dataDescription)
-        } catch (e) {
-          //Data not able to be standardized, leave as is
-        }
-      }
+      dataset = await fetchRemoteData(`${config.dataUrl}`)
+
+      dataset = getFormattedData(dataset, config.dataDescription)
     }
 
     return dataset
   }
 
+  const reloadURLData = async () => {
+    if (config.datasets) {
+      let newData = { ...data }
+      let newDatasets = { ...config.datasets }
+      let datasetsNeedsUpdate = false
+      let datasetKeys = Object.keys(config.datasets)
+      for (let i = 0; i < datasetKeys.length; i++) {
+        const dataset = config.datasets[datasetKeys[i]]
+        if (dataset.dataUrl && config.dashboard && config.dashboard.sharedFilters) {
+          const dataUrl = new URL(dataset.runtimeDataUrl || dataset.dataUrl)
+          let qsParams = Object.fromEntries(new URLSearchParams(dataUrl.search))
+
+          let isUpdateNeeded = false
+
+          config.dashboard.sharedFilters.forEach(filter => {
+            if (filter.type === 'url' && qsParams[filter.queryParameter] !== decodeURIComponent(filter.active)) {
+              qsParams[filter.queryParameter] = filter.active
+              isUpdateNeeded = true
+            }
+          })
+
+          if (!isUpdateNeeded) return
+
+          let dataUrlFinal = `${dataUrl.origin}${dataUrl.pathname}${Object.keys(qsParams)
+            .map((param, i) => {
+              let qs = i === 0 ? '?' : '&'
+              qs += param + '='
+              qs += qsParams[param]
+              return qs
+            })
+            .join('')}`
+
+          let newDataset = await fetchRemoteData(`${dataUrlFinal}`)
+
+          if (newDataset && dataset.dataDescription) {
+            try {
+              newDataset = transform.autoStandardize(newDataset)
+              newDataset = transform.developerStandardize(newDataset, dataset.dataDescription)
+            } catch (e) {
+              //Data not able to be standardized, leave as is
+            }
+          }
+
+          newDatasets[datasetKeys[i]].runtimeDataUrl = dataUrlFinal
+          newData[datasetKeys[i]] = newDataset
+          datasetsNeedsUpdate = true
+        }
+      }
+
+      if (datasetsNeedsUpdate) {
+        setData(newData)
+
+        let newFilteredData = {}
+        let newConfig = { ...config }
+        Object.keys(config.visualizations).forEach(key => {
+          let dataKey = config.visualizations[key].dataKey
+
+          let applicableFilters = config.dashboard.sharedFilters.filter(sharedFilter => sharedFilter.usedBy && sharedFilter.usedBy.indexOf(key) !== -1)
+          if (applicableFilters.length > 0) {
+            newFilteredData[key] = filterData(applicableFilters, newData[dataKey])
+          }
+
+          if (newData[dataKey]) {
+            newConfig.visualizations[key].formattedData = newData[dataKey]
+          }
+        })
+        setFilteredData(newFilteredData)
+
+        newConfig.datasets = newDatasets
+        setConfig(newConfig)
+      }
+    }
+  }
+
   const loadConfig = async () => {
     let response = configObj || (await (await fetch(configUrl)).json())
     let newConfig = { ...defaults, ...response }
@@ -188,7 +271,6 @@ export default function CdcDashboard({ configUrl = '', config: configObj = undef
     }
 
     setData(datasets)
-
     updateConfig(newConfig, datasets)
     setLoading(false)
   }
@@ -201,7 +283,7 @@ export default function CdcDashboard({ configUrl = '', config: configObj = undef
         let add = true
 
         filters.forEach(filter => {
-          if (row[filter.columnName] !== filter.active) {
+          if (filter.type !== 'url' && row[filter.columnName] != filter.active) {
             add = false
           }
         })
@@ -230,7 +312,9 @@ export default function CdcDashboard({ configUrl = '', config: configObj = undef
       if (applicableFilters.length > 0) {
         const visualization = newConfig.visualizations[visualizationKey]
 
-        newFilteredData[visualizationKey] = filterData(applicableFilters, visualization.formattedData || data[visualization.dataKey])
+        const formattedData = visualization.dataDescription ? getFormattedData(data[visualization.dataKey] || visualization.data, visualization.dataDescription) : undefined
+
+        newFilteredData[visualizationKey] = filterData(applicableFilters, formattedData || data[visualization.dataKey])
       }
     })
 
@@ -291,7 +375,11 @@ export default function CdcDashboard({ configUrl = '', config: configObj = undef
         let applicableFilters = newConfig.dashboard.sharedFilters.filter(sharedFilter => sharedFilter.usedBy && sharedFilter.usedBy.indexOf(visualizationKey) !== -1)
 
         if (applicableFilters.length > 0) {
-          newFilteredData[visualizationKey] = filterData(applicableFilters, newConfig.visualizations[visualizationKey].formattedData || newConfig.visualizations[visualizationKey].data || (dataOverride || data)[newConfig.visualizations[visualizationKey].dataKey])
+          const visualization = newConfig.visualizations[visualizationKey]
+
+          const formattedData = getFormattedData(newConfig.datasets[visualization.dataKey] && newConfig.datasets[visualization.dataKey].data ? newConfig.datasets[visualization.dataKey].data : visualization.data, visualization.dataDescription)
+
+          newFilteredData[visualizationKey] = filterData(applicableFilters, formattedData || visualization.data || (dataOverride || data)[visualization.dataKey])
         }
       })
     }
@@ -315,6 +403,10 @@ export default function CdcDashboard({ configUrl = '', config: configObj = undef
     }
   }, [config])
 
+  useEffect(() => {
+    reloadURLData()
+  }, [JSON.stringify(config.dashboard ? config.dashboard.sharedFilters : undefined)])
+
   const updateChildConfig = (visualizationKey, newConfig) => {
     let updatedConfig = { ...config }
 
@@ -336,24 +428,39 @@ export default function CdcDashboard({ configUrl = '', config: configObj = undef
       Object.keys(config.visualizations).forEach(key => {
         let applicableFilters = dashboardConfig.sharedFilters.filter(sharedFilter => sharedFilter.usedBy && sharedFilter.usedBy.indexOf(key) !== -1)
         if (applicableFilters.length > 0) {
-          newFilteredData[key] = filterData(applicableFilters, config.visualizations[key].formattedData || data[config.visualizations[key].dataKey])
+          const visualization = config.visualizations[key]
+
+          const formattedData = visualization.dataDescription ? getFormattedData(data[config.visualizations[key].dataKey] || visualization.data, visualization.dataDescription) : undefined
+
+          newFilteredData[key] = filterData(applicableFilters, formattedData || data[config.visualizations[key].dataKey])
         }
       })
 
       setFilteredData(newFilteredData)
+      if (dashboardConfig.sharedFilters[index].active === dashboardConfig.sharedFilters[index].resetLabel) {
+        setFilteredData(data)
+      }
     }
 
     const announceChange = text => {}
 
     return config.dashboard.sharedFilters.map((singleFilter, index) => {
-      if (!singleFilter.showDropdown) return <></>
+      if (singleFilter.type !== 'url' && !singleFilter.showDropdown) return <></>
 
       const values = []
 
+      if (singleFilter.resetLabel) {
+        values.push(
+          <option key={`${singleFilter.resetLabel}-option-${index}`} value={singleFilter.resetLabel}>
+            {singleFilter.resetLabel}
+          </option>
+        )
+      }
+
       singleFilter.values.forEach((filterOption, index) => {
         values.push(
           <option key={`${singleFilter.key}-option-${index}`} value={filterOption}>
-            {filterOption}
+            {singleFilter.labels ? singleFilter.labels[filterOption] || filterOption : filterOption}
           </option>
         )
       })
@@ -444,7 +551,7 @@ export default function CdcDashboard({ configUrl = '', config: configObj = undef
             body = (
               <>
                 <Header tabSelected={tabSelected} setTabSelected={setTabSelected} back={back} subEditor='Chart' />
-                <CdcChart key={visualizationKey} config={visualizationConfig} isEditor={true} isDebug={isDebug} setConfig={updateConfig} setSharedFilter={setsSharedFilter ? setSharedFilter : undefined} isDashboard={true} />
+                <CdcChart key={visualizationKey} config={visualizationConfig} isEditor={true} isDebug={isDebug} setConfig={updateConfig} setSharedFilter={setsSharedFilter ? setSharedFilter : undefined} setSharedFilterValue={setSharedFilterValue} dashboardConfig={config} isDashboard={true} />
               </>
             )
             break
@@ -501,7 +608,7 @@ export default function CdcDashboard({ configUrl = '', config: configObj = undef
         <DndProvider backend={HTML5Backend}>
           <Header tabSelected={tabSelected} setTabSelected={setTabSelected} preview={preview} setPreview={setPreview} />
           <div className='layout-container'>
-            <VisualizationsPanel />
+            <VisualizationsPanel loadConfig={loadConfig} config={config} />
             <Grid />
           </div>
         </DndProvider>
@@ -572,13 +679,14 @@ export default function CdcDashboard({ configUrl = '', config: configObj = undef
                                 <CdcChart
                                   key={col.widget}
                                   config={visualizationConfig}
+                                  dashboardConfig={config}
                                   isEditor={false}
                                   setConfig={newConfig => {
                                     updateChildConfig(col.widget, newConfig)
                                   }}
                                   setSharedFilter={setsSharedFilter ? setSharedFilter : undefined}
                                   isDashboard={true}
-                                  link={config.table && config.table.show && config.datasets && visualizationConfig.table.showDataTableLink ? tableLink : undefined}
+                                  link={config.table && config.table.show && config.datasets && visualizationConfig.table && visualizationConfig.table.showDataTableLink ? tableLink : undefined}
                                 />
                               )}
                               {visualizationConfig.type === 'map' && (
@@ -592,7 +700,7 @@ export default function CdcDashboard({ configUrl = '', config: configObj = undef
                                   setSharedFilter={setsSharedFilter ? setSharedFilter : undefined}
                                   setSharedFilterValue={setSharedFilterValue}
                                   isDashboard={true}
-                                  link={config.table && config.table.show && config.datasets && visualizationConfig.table.showDataTableLink ? tableLink : undefined}
+                                  link={config.table && config.table.show && config.datasets && visualizationConfig.table && visualizationConfig.table.showDataTableLink ? tableLink : undefined}
                                 />
                               )}
                               {visualizationConfig.type === 'data-bite' && (
@@ -615,7 +723,7 @@ export default function CdcDashboard({ configUrl = '', config: configObj = undef
                                     updateChildConfig(col.widget, newConfig)
                                   }}
                                   isDashboard={true}
-                                  link={config.table && config.table.show && config.datasets && visualizationConfig.table.showDataTableLink ? tableLink : undefined}
+                                  link={config.table && config.table.show && config.datasets && visualizationConfig.table && visualizationConfig.table.showDataTableLink ? tableLink : undefined}
                                 />
                               )}
                               {visualizationConfig.type === 'markup-include' && (
@@ -652,8 +760,8 @@ export default function CdcDashboard({ configUrl = '', config: configObj = undef
 
           {/* Image or PDF Inserts */}
           <section className='download-buttons'>
-            {config.table.downloadImageButton && <CoveMediaControls.Button title='Download Dashboard as Image' type='image' state={config} text='Download Dashboard Image' elementToCapture={imageId} />}
-            {config.table.downloadPdfButton && <CoveMediaControls.Button title='Download Dashboard as PDF' type='pdf' state={config} text='Download Dashboard PDF' elementToCapture={imageId} />}
+            {config.table.downloadImageButton && <MediaControls.Button title='Download Dashboard as Image' type='image' state={config} text='Download Dashboard Image' elementToCapture={imageId} />}
+            {config.table.downloadPdfButton && <MediaControls.Button title='Download Dashboard as PDF' type='pdf' state={config} text='Download Dashboard PDF' elementToCapture={imageId} />}
           </section>
 
           {/* Data Table */}
@@ -678,7 +786,7 @@ export default function CdcDashboard({ configUrl = '', config: configObj = undef
                 config.dashboard.sharedFilters.forEach(sharedFilter => {
                   let allMatch = true
                   vizKeysUsingDataset.forEach(visualizationKey => {
-                    if (sharedFilter.usedBy.indexOf(visualizationKey) === -1) {
+                    if (sharedFilter.usedBy && sharedFilter.usedBy.indexOf(visualizationKey) === -1) {
                       allMatch = false
                     }
                   })
@@ -697,7 +805,7 @@ export default function CdcDashboard({ configUrl = '', config: configObj = undef
 
               return (
                 <div className='multi-table-container' id={`data-table-${datasetKey}`} key={`data-table-${datasetKey}`}>
-                  <DataTable data={filteredTableData || config.datasets[datasetKey].data} downloadData={config.datasets[datasetKey].data} dataFileSourceType={dataFileSourceType} datasetKey={datasetKey} config={config} imageRef={imageId}></DataTable>
+                  <DataTable data={filteredTableData || config.datasets[datasetKey].data || []} downloadData={config.datasets[datasetKey].data} dataFileSourceType={dataFileSourceType} datasetKey={datasetKey} config={config} imageRef={imageId}></DataTable>
                 </div>
               )
             })}

package/src/components/DataTable.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useState, useMemo, memo } from 'react'
 import { useTable, useSortBy, useResizeColumns, useBlockLayout } from 'react-table'
 import Papa from 'papaparse'
 import { Base64 } from 'js-base64'
-import CoveMediaControls from '@cdc/core/components/CoveMediaControls'
+import MediaControls from '@cdc/core/components/MediaControls'
 import Icon from '@cdc/core/components/ui/Icon'
 
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
@@ -94,7 +94,7 @@ export default function DataTable(props) {
 
   return (
     <ErrorBoundary component='DataTable'>
-      <CoveMediaControls.Section classes={['download-links']}>
+      <MediaControls.Section classes={['download-links']}>
         {config.table.showDownloadUrl && dataFileSourceType === 'url' && (
           <a className='dashboard-download-link' href={config.datasets[datasetKey].dataFileName} title='Link to View Dataset' target='_blank'>
             {' '}
@@ -103,7 +103,7 @@ export default function DataTable(props) {
           </a>
         )}
         {config.table.download && <DownloadButton data={data} />}
-      </CoveMediaControls.Section>
+      </MediaControls.Section>
       {config.table.show && (
         <section className={`data-table-container`} aria-label={accessibilityLabel}>
           <div
@@ -119,7 +119,7 @@ export default function DataTable(props) {
               }
             }}
           >
-            <Icon display={tableExpanded ? 'minus' : 'plus'} base/>
+            <Icon display={tableExpanded ? 'minus' : 'plus'} base />
             {config.table.label}
             {datasetKey ? `: ${datasetKey}` : ''}
           </div>