@cdc/dashboard 4.23.3 → 4.23.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cdc/dashboard",
-  "version": "4.23.3",
+  "version": "4.23.4",
   "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.4",
+    "@cdc/core": "^4.23.4",
+    "@cdc/data-bite": "^4.23.4",
+    "@cdc/filtered-text": "^4.23.4",
+    "@cdc/map": "^4.23.4",
+    "@cdc/markup-include": "^4.23.4",
+    "@cdc/waffle-chart": "^4.23.4",
     "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": "dcd395d76f70b2d113f2b4c6fe50a52522655cd1"
 }

package/src/CdcDashboard.jsx

@@ -101,7 +101,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()
@@ -119,7 +119,7 @@ export default function CdcDashboard({ configUrl = '', config: configObj = undef
     let dataset = config.formattedData || config.data
 
     if (config.dataUrl) {
-      dataset = fetchRemoteData(`${config.dataUrl}?v=${cacheBustingString()}`)
+      dataset = await fetchRemoteData(`${config.dataUrl}?v=${cacheBustingString()}`)
 
       if (dataset && config.dataDescription) {
         try {
@@ -145,6 +145,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)
@@ -335,7 +343,7 @@ export default function CdcDashboard({ configUrl = '', config: configObj = undef
       setFilteredData(newFilteredData)
     }
 
-    const announceChange = text => { }
+    const announceChange = text => {}
 
     return config.dashboard.sharedFilters.map((singleFilter, index) => {
       if (!singleFilter.showDropdown) return <></>
@@ -436,7 +444,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 +452,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 +559,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 +578,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.showDataTableLink ? tableLink : undefined}
                                 />
                               )}
                               {visualizationConfig.type === 'map' && (
@@ -580,7 +592,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.showDataTableLink ? tableLink : undefined}
                                 />
                               )}
                               {visualizationConfig.type === 'data-bite' && (
@@ -603,7 +615,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.showDataTableLink ? tableLink : undefined}
                                 />
                               )}
                               {visualizationConfig.type === 'markup-include' && (
@@ -704,7 +716,8 @@ export default function CdcDashboard({ configUrl = '', config: configObj = undef
     updateConfig,
     setParentConfig,
     setPreview,
-    outerContainerRef
+    outerContainerRef,
+    isDebug
   }
 
   const dashboardContainerClasses = ['cdc-open-viz-module', 'type-dashboard', `${currentViewport}`]

package/src/components/Header.jsx

@@ -2,6 +2,7 @@ import React, { useState, useEffect, useContext } from 'react'
 
 import ConfigContext from '../ConfigContext'
 
+import fetchRemoteData from '@cdc/core/helpers/fetchRemoteData'
 import { useGlobalContext } from '@cdc/core/components/GlobalContext'
 import Modal from '@cdc/core/components/ui/Modal'
 
@@ -320,7 +321,7 @@ const Header = ({ setPreview, tabSelected, setTabSelected, back, subEditor = nul
                 <div className="wrap">
                   <label>
                     <input type='checkbox' defaultChecked={config.table.show} onChange={e => changeConfigValue('table', 'show', e.target.checked)} />
-                    Show Table
+                    Show Data Table(s)
                   </label><br />
 
                   <label>
@@ -351,11 +352,11 @@ const Header = ({ setPreview, tabSelected, setTabSelected, back, subEditor = nul
                 <div className="wrap">
                   <label>
                     <input type='checkbox' defaultChecked={config.table.download} onChange={e => changeConfigValue('table', 'download', e.target.checked)} />
-                    Show CSV Button
+                    Show Download CSV Link
                   </label>
                   <label>
                     <input type='checkbox' defaultChecked={config.table.showDownloadUrl} onChange={e => changeConfigValue('table', 'showDownloadUrl', e.target.checked)} />
-                    Show Link to Dataset
+                    Show URL to Automatically Updated Data
                   </label>
                 </div>
               </>

package/src/index.jsx

@@ -4,11 +4,12 @@ import ReactDOM from 'react-dom/client'
 import CdcDashboard from './CdcDashboard'
 
 let isEditor = window.location.href.includes('editor=true')
+let isDebug = window.location.href.includes('debug=true')
 
 let domContainer = document.getElementsByClassName('react-container')[0]
 
 ReactDOM.createRoot(domContainer).render(
   <React.StrictMode>
-    <CdcDashboard configUrl={domContainer.attributes['data-config'].value} isEditor={isEditor} />
-  </React.StrictMode>,
+    <CdcDashboard configUrl={domContainer.attributes['data-config'].value} isEditor={isEditor} isDebug={isDebug} />
+  </React.StrictMode>
 )

package/src/scss/main.scss

@@ -48,7 +48,8 @@
       .wrap {
         display: inline-flex;
         flex-wrap: wrap;
-        width: 20%;
+        width: 33%;  // changed from 20% so that long checkbox name will fit without wrapping
+        font-size: 0.8em;
 
         .table-height-input {
           width: 100%;
@@ -322,4 +323,4 @@
     display: block;
     margin: 1em 0;
   }
-}
+}