npm - @cdc/dashboard - Versions diffs - 4.23.3 → 4.23.5 - Mend

@cdc/dashboard 4.23.3 → 4.23.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (8) hide show

package/dist/cdcdashboard.js +88498 -90345
package/index.html +24 -26
package/package.json +9 -9
package/src/CdcDashboard.jsx +135 -28
package/src/components/Header.jsx +195 -70
package/src/data/initial-state.js +2 -1
package/src/index.jsx +3 -2
package/src/scss/main.scss +3 -2

package/index.html CHANGED Viewed

@@ -1,31 +1,29 @@
 <!DOCTYPE html>
 <html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+    <style>
+      body {
+        margin: 0 auto !important;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        min-height: unset !important;
+      }
-<head>
-  <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
-  <style>
-    body {
-      margin: 0 auto !important;
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      min-height: unset !important;
-    }
-    .react-container+.react-container {
-      margin-top: 3rem;
-    }
-  </style>
-</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/private/totals.json"></div> -->
-  <!-- <div class="react-container" data-config="/examples/private/totals-two.json"></div> -->
-  <script type="module" src="./src/index.jsx"></script>
-</body>
+      .react-container + .react-container {
+        margin-top: 3rem;
+      }
+    </style>
+  </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/private/totals.json"></div> -->
+    <!-- <div class="react-container" data-config="/examples/private/totals-two.json"></div> -->
+    <script type="module" src="./src/index.jsx"></script>
+  </body>
 </html>

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@cdc/dashboard",
-  "version": "4.23.3",
+  "version": "4.23.5",
   "description": "React component for combining multiple visualizations into a single dashboard",
   "moduleName": "CdcDashboard",
   "main": "dist/cdcdashboard",
@@ -25,13 +25,13 @@
   },
   "license": "Apache-2.0",
   "dependencies": {
-    "@cdc/chart": "^4.23.3",
-    "@cdc/core": "^4.23.3",
-    "@cdc/data-bite": "^4.23.3",
-    "@cdc/filtered-text": "^4.23.3",
-    "@cdc/map": "^4.23.3",
-    "@cdc/markup-include": "^4.23.3",
-    "@cdc/waffle-chart": "^4.23.3",
+    "@cdc/chart": "^4.23.5",
+    "@cdc/core": "^4.23.5",
+    "@cdc/data-bite": "^4.23.5",
+    "@cdc/filtered-text": "^4.23.5",
+    "@cdc/map": "^4.23.5",
+    "@cdc/markup-include": "^4.23.5",
+    "@cdc/waffle-chart": "^4.23.5",
     "html-react-parser": "^3.0.8",
     "js-base64": "^2.5.2",
     "papaparse": "^5.3.0",
@@ -47,5 +47,5 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
-  "gitHead": "6fa3b11db159d38538f18023fe70b67a29e7d327"
+  "gitHead": "34add3436994ca3cf13e51f313add4d70377f53e"
 }

package/src/CdcDashboard.jsx CHANGED Viewed

@@ -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'
@@ -101,7 +100,7 @@ const VisualizationsPanel = () => (
   </div>
 )
-export default function CdcDashboard({ configUrl = '', config: configObj = undefined, isEditor = false, setConfig: setParentConfig }) {
+export default function CdcDashboard({ configUrl = '', config: configObj = undefined, isEditor = false, isDebug = false, setConfig: setParentConfig }) {
   const [config, setConfig] = useState(configObj ?? {})
   const [data, setData] = useState([])
   const [filteredData, setFilteredData] = useState()
@@ -115,25 +114,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 = 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 }
@@ -145,6 +225,14 @@ export default function CdcDashboard({ configUrl = '', config: configObj = undef
           datasets[key] = await processData(response.datasets[key])
         })
       )
+      Object.keys(newConfig.visualizations).forEach(vizKey => {
+        newConfig.visualizations[vizKey].formattedData = datasets[newConfig.visualizations[vizKey].dataKey]
+      })
+      Object.keys(datasets).forEach(key => {
+        newConfig.datasets[key].data = datasets[key]
+      })
     } else {
       let dataKey = newConfig.dataFileName || 'backwards-compatibility'
       datasets[dataKey] = await processData(response)
@@ -193,7 +281,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
           }
         })
@@ -222,7 +310,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])
       }
     })
@@ -283,7 +373,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(visualization.data, visualization.dataDescription)
+          newFilteredData[visualizationKey] = filterData(applicableFilters, formattedData || visualization.data || (dataOverride || data)[visualization.dataKey])
         }
       })
     }
@@ -307,6 +401,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 }
@@ -328,24 +426,28 @@ 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)
     }
-    const announceChange = text => { }
+    const announceChange = text => {}
     return config.dashboard.sharedFilters.map((singleFilter, index) => {
-      if (!singleFilter.showDropdown) return <></>
+      if (singleFilter.type !== 'url' && !singleFilter.showDropdown) return <></>
       const values = []
       singleFilter.values.forEach((filterOption, index) => {
         values.push(
           <option key={`${singleFilter.key}-option-${index}`} value={filterOption}>
-            {filterOption}
+            {singleFilter.labels ? singleFilter.labels[filterOption] || filterOption : filterOption}
           </option>
         )
       })
@@ -436,7 +538,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} setConfig={updateConfig} setSharedFilter={setsSharedFilter ? setSharedFilter : undefined} isDashboard={true} />
+                <CdcChart key={visualizationKey} config={visualizationConfig} isEditor={true} isDebug={isDebug} setConfig={updateConfig} setSharedFilter={setsSharedFilter ? setSharedFilter : undefined} isDashboard={true} />
               </>
             )
             break
@@ -444,7 +546,7 @@ export default function CdcDashboard({ configUrl = '', config: configObj = undef
             body = (
               <>
                 <Header tabSelected={tabSelected} setTabSelected={setTabSelected} back={back} subEditor='Map' />
-                <CdcMap key={visualizationKey} config={visualizationConfig} isEditor={true} setConfig={updateConfig} setSharedFilter={setsSharedFilter ? setSharedFilter : undefined} setSharedFilterValue={setSharedFilterValue} isDashboard={true} />
+                <CdcMap key={visualizationKey} config={visualizationConfig} isEditor={true} isDebug={isDebug} setConfig={updateConfig} setSharedFilter={setsSharedFilter ? setSharedFilter : undefined} setSharedFilterValue={setSharedFilterValue} isDashboard={true} />
               </>
             )
             break
@@ -551,7 +653,11 @@ export default function CdcDashboard({ configUrl = '', config: configObj = undef
                         const setsSharedFilter = config.dashboard.sharedFilters && config.dashboard.sharedFilters.filter(sharedFilter => sharedFilter.setBy === col.widget).length > 0
                         const setSharedFilterValue = setsSharedFilter ? config.dashboard.sharedFilters.filter(sharedFilter => sharedFilter.setBy === col.widget)[0].active : undefined
-                        const tableLink = <a href={`#data-table-${visualizationConfig.dataKey}`}>{visualizationConfig.dataKey} (Go to Table)</a>
+                        const tableLink = (
+                          <a href={`#data-table-${visualizationConfig.dataKey}`} className='margin-left-href'>
+                            {visualizationConfig.dataKey} (Go to Table)
+                          </a>
+                        )
                         return (
                           <React.Fragment key={`vis__${index}__${colIndex}`}>
@@ -566,7 +672,7 @@ export default function CdcDashboard({ configUrl = '', config: configObj = undef
                                   }}
                                   setSharedFilter={setsSharedFilter ? setSharedFilter : undefined}
                                   isDashboard={true}
-                                  link={config.table && config.table.show && config.datasets ? tableLink : undefined}
+                                  link={config.table && config.table.show && config.datasets && visualizationConfig.table && visualizationConfig.table.showDataTableLink ? tableLink : undefined}
                                 />
                               )}
                               {visualizationConfig.type === 'map' && (
@@ -580,7 +686,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 ? tableLink : undefined}
+                                  link={config.table && config.table.show && config.datasets && visualizationConfig.table && visualizationConfig.table.showDataTableLink ? tableLink : undefined}
                                 />
                               )}
                               {visualizationConfig.type === 'data-bite' && (
@@ -603,7 +709,7 @@ export default function CdcDashboard({ configUrl = '', config: configObj = undef
                                     updateChildConfig(col.widget, newConfig)
                                   }}
                                   isDashboard={true}
-                                  link={config.table && config.table.show && config.datasets ? tableLink : undefined}
+                                  link={config.table && config.table.show && config.datasets && visualizationConfig.table && visualizationConfig.table.showDataTableLink ? tableLink : undefined}
                                 />
                               )}
                               {visualizationConfig.type === 'markup-include' && (
@@ -666,7 +772,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
                     }
                   })
@@ -685,7 +791,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>
               )
             })}
@@ -704,7 +810,8 @@ export default function CdcDashboard({ configUrl = '', config: configObj = undef
     updateConfig,
     setParentConfig,
     setPreview,
-    outerContainerRef
+    outerContainerRef,
+    isDebug
   }
   const dashboardContainerClasses = ['cdc-open-viz-module', 'type-dashboard', `${currentViewport}`]