@cdc/dashboard 4.25.5-1 → 4.25.6-2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cdc/dashboard",
-  "version": "4.25.5-1",
+  "version": "4.25.6-2",
   "description": "React component for combining multiple visualizations into a single dashboard",
   "moduleName": "CdcDashboard",
   "main": "dist/cdcdashboard",
@@ -27,13 +27,13 @@
   },
   "license": "Apache-2.0",
   "dependencies": {
-    "@cdc/chart": "^4.25.5-1",
-    "@cdc/core": "^4.25.5-1",
-    "@cdc/data-bite": "^4.25.5-1",
-    "@cdc/filtered-text": "^4.25.5-1",
-    "@cdc/map": "^4.25.5-1",
-    "@cdc/markup-include": "^4.25.5-1",
-    "@cdc/waffle-chart": "^4.25.5-1",
+    "@cdc/chart": "^4.25.6-2",
+    "@cdc/core": "^4.25.6-1",
+    "@cdc/data-bite": "^4.25.6-1",
+    "@cdc/filtered-text": "^4.25.6-1",
+    "@cdc/map": "^4.25.6-1",
+    "@cdc/markup-include": "^4.25.6-1",
+    "@cdc/waffle-chart": "^4.25.6-1",
     "js-base64": "^2.5.2",
     "react-accessible-accordion": "^3.3.4",
     "react-dnd": "^14.0.2",
@@ -44,5 +44,5 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
-  "gitHead": "1d0a6e716bc113e6bea3636fcae90ebf2d19bb5c"
+  "gitHead": "8183dee16aa930575befad47833cf0ce2bcb4edb"
 }

package/src/CdcDashboardComponent.tsx

@@ -19,13 +19,6 @@ import Loading from '@cdc/core/components/Loading'
 import { DataTransform } from '@cdc/core/helpers/DataTransform'
 import getViewport from '@cdc/core/helpers/getViewport'
 
-import CdcChart from '@cdc/chart/src/CdcChartComponent'
-import CdcDataBite from '@cdc/data-bite/src/CdcDataBite'
-import CdcMap from '@cdc/map/src/CdcMapComponent'
-import CdcWaffleChart from '@cdc/waffle-chart/src/CdcWaffleChart'
-import CdcMarkupInclude from '@cdc/markup-include/src/CdcMarkupInclude'
-import CdcFilteredText from '@cdc/filtered-text/src/CdcFilteredText'
-
 import Grid from './components/Grid'
 import Header from './components/Header/Header'
 import DataTable from '@cdc/core/components/DataTable'
@@ -56,17 +49,16 @@ import { getVizConfig } from './helpers/getVizConfig'
 import { getFilteredData } from './helpers/getFilteredData'
 import { getVizRowColumnLocator } from './helpers/getVizRowColumnLocator'
 import Layout from '@cdc/core/components/Layout'
-import FootnotesStandAlone from '@cdc/core/components/Footnotes/FootnotesStandAlone'
 import * as reloadURLHelpers from './helpers/reloadURLHelpers'
 import { addValuesToDashboardFilters } from './helpers/addValuesToDashboardFilters'
 import { DashboardFilters } from './types/DashboardFilters'
 import DashboardSharedFilters from './components/DashboardFilters'
-import ExpandCollapseButtons from './components/ExpandCollapseButtons'
 import { loadAPIFiltersFactory } from './helpers/loadAPIFilters'
 import Loader from '@cdc/core/components/Loader'
 import Alert from '@cdc/core/components/Alert'
 import { shouldLoadAllFilters } from './helpers/shouldLoadAllFilters'
 import { subscribe, unsubscribe } from '@cdc/core/helpers/events'
+import DashboardEditors from './components/DashboardEditors'
 
 type DashboardProps = Omit<WCMSProps, 'configUrl'> & {
   initialState: InitialState
@@ -283,8 +275,9 @@ export default function CdcDashboard({ initialState, isEditor = false, isDebug =
         }
         return acc
       }, {})
-      const filteredData = { ...state.filteredData, ...newDatasets }
-      dispatch({ type: 'SET_FILTERED_DATA', payload: filteredData })
+      const newConfig = { ...state, data: { ...state.data, ...newDatasets } }
+      const newFilteredData = getFilteredData(newConfig, _.cloneDeep(state.filteredData))
+      dispatch({ type: 'SET_FILTERED_DATA', payload: newFilteredData })
       dispatch({ type: 'SET_DATA', payload: { ...state.data, ...newDatasets } })
     } catch (e) {
       console.error('Error setting event data: ', e)
@@ -369,7 +362,6 @@ export default function CdcDashboard({ initialState, isEditor = false, isDebug =
         state.filteredData
       )
       visualizationConfig.uid = visualizationKey
-      if (visualizationConfig.type === 'footnotes') visualizationConfig.formattedData = undefined
       const setsSharedFilter =
         state.config.dashboard.sharedFilters &&
         state.config.dashboard.sharedFilters.filter(sharedFilter => sharedFilter.setBy === visualizationKey).length > 0
@@ -387,151 +379,21 @@ export default function CdcDashboard({ initialState, isEditor = false, isDebug =
           updateChildConfig(visualizationKey, dataCorrectedConfig)
         }
 
-        switch (visualizationConfig.type) {
-          case 'chart':
-            body = (
-              <>
-                <Header visualizationKey={visualizationKey} subEditor='Chart' />
-                <CdcChart
-                  key={visualizationKey}
-                  config={visualizationConfig}
-                  isEditor={true}
-                  isDebug={isDebug}
-                  setConfig={_updateConfig}
-                  setSharedFilter={setsSharedFilter ? setSharedFilter : undefined}
-                  setSharedFilterValue={setSharedFilterValue}
-                  dashboardConfig={state.config}
-                  isDashboard={true}
-                  configUrl={undefined}
-                  setEditing={undefined}
-                  hostname={undefined}
-                  link={undefined}
-                />
-              </>
-            )
-            break
-          case 'map':
-            body = (
-              <>
-                <Header visualizationKey={visualizationKey} subEditor='Map' />
-                <CdcMap
-                  key={visualizationKey}
-                  config={visualizationConfig}
-                  isEditor={true}
-                  isDebug={isDebug}
-                  setConfig={_updateConfig}
-                  setSharedFilter={setsSharedFilter ? setSharedFilter : undefined}
-                  setSharedFilterValue={setSharedFilterValue}
-                  isDashboard={true}
-                  showLoader={false}
-                  dashboardConfig={state.config}
-                />
-              </>
-            )
-            break
-          case 'data-bite':
-            body = (
-              <>
-                <Header visualizationKey={visualizationKey} subEditor='Data Bite' />
-                <CdcDataBite
-                  key={visualizationKey}
-                  config={{ ...visualizationConfig, newViz: true }}
-                  isEditor={true}
-                  setConfig={_updateConfig}
-                  isDashboard={true}
-                />
-              </>
-            )
-            break
-          case 'waffle-chart':
-            body = (
-              <>
-                <Header visualizationKey={visualizationKey} subEditor='Waffle Chart' />
-                <CdcWaffleChart
-                  key={visualizationKey}
-                  config={visualizationConfig}
-                  isEditor={true}
-                  setConfig={_updateConfig}
-                  isDashboard={true}
-                  configUrl={undefined}
-                />
-              </>
-            )
-            break
-          case 'markup-include':
-            body = (
-              <>
-                <Header visualizationKey={visualizationKey} subEditor='Markup Include' />
-                <CdcMarkupInclude
-                  key={visualizationKey}
-                  config={visualizationConfig}
-                  isEditor={true}
-                  setConfig={_updateConfig}
-                  isDashboard={true}
-                  configUrl={undefined}
-                />
-              </>
-            )
-            break
-          case 'filtered-text':
-            body = (
-              <>
-                <Header visualizationKey={visualizationKey} subEditor='Filtered Text' />
-                <CdcFilteredText
-                  key={visualizationKey}
-                  config={visualizationConfig}
-                  isEditor={true}
-                  setConfig={_updateConfig}
-                  isDashboard={true}
-                  configUrl={undefined}
-                />
-              </>
-            )
-            break
-          case 'dashboardFilters':
-            body = (
-              <>
-                <Header visualizationKey={visualizationKey} subEditor='Filter Dropdowns' />
-                <DashboardSharedFilters
-                  isEditor={true}
-                  visualizationConfig={visualizationConfig}
-                  apiFilterDropdowns={apiFilterDropdowns}
-                  setConfig={_updateConfig}
-                />
-              </>
-            )
-            break
-          case 'table':
-            body = (
-              <>
-                <Header visualizationKey={visualizationKey} subEditor='Table' />
-                <DataTableStandAlone
-                  visualizationKey={visualizationKey}
-                  config={visualizationConfig}
-                  isEditor={true}
-                  updateConfig={_updateConfig}
-                />
-              </>
-            )
-            break
-          case 'footnotes':
-            body = (
-              <>
-                <Header visualizationKey={visualizationKey} subEditor='Footnotes' />
-                {/* Datasets are passed in just for reference and need to be removed */}
-                <FootnotesStandAlone
-                  visualizationKey={visualizationKey}
-                  config={{ ...visualizationConfig, datasets: state.config.datasets }}
-                  isEditor={true}
-                  updateConfig={conf => _updateConfig(_.omit(conf, 'datasets'))}
-                />
-              </>
-            )
-            break
-          default:
-            body = <></>
-            break
-        }
+        body = (
+          <>
+            <Header visualizationKey={visualizationKey} subEditor={true} />
+            <DashboardEditors
+              key={visualizationKey}
+              visualizationKey={visualizationKey}
+              visualizationConfig={visualizationConfig}
+              _updateConfig={_updateConfig}
+              isDebug={isDebug}
+              setSharedFilter={setSharedFilter}
+              apiFilterDropdowns={apiFilterDropdowns}
+              state={state}
+            />
+          </>
+        )
       }
     })
 
@@ -554,7 +416,7 @@ export default function CdcDashboard({ initialState, isEditor = false, isDebug =
     const { config } = state
     const { title, description } = config.dashboard || {}
 
-    const filteredRows = config.rows && config.rows.filter(row => row.columns.filter(col => col.widget).length !== 0)
+    const filteredRows = config.rows?.filter(row => row.columns.filter(col => col.widget).length !== 0)
 
     body = (
       <>
@@ -580,62 +442,22 @@ export default function CdcDashboard({ initialState, isEditor = false, isDebug =
             {/* Description */}
             {description && <div className='subtext mb-3'>{parse(description)}</div>}
             {/* Visualizations */}
-            {filteredRows &&
-              filteredRows.map((row, index) => {
-                if (row.multiVizColumn && (isPreview || !isEditor)) {
-                  const filteredData = getFilteredData(state, _.cloneDeep(state.data))
-                  const data = filteredData[index] ?? row.formattedData
-                  const dataGroups = {}
-                  data.forEach(d => {
-                    const groupKey = d[row.multiVizColumn]
-                    if (!dataGroups[groupKey]) dataGroups[groupKey] = []
-                    dataGroups[groupKey].push(d)
-                  })
-                  return (
-                    <React.Fragment key={`row__${index}`}>
-                      {/* Expand/Collapse All */}
-                      {!inNoDataState && row.expandCollapseAllButtons === true && (
-                        <ExpandCollapseButtons setAllExpanded={setAllExpanded} />
-                      )}
-                      {Object.keys(dataGroups).map(groupName => {
-                        const dataValue = dataGroups[groupName]
-                        return (
-                          <VisualizationRow
-                            key={`row__${index}__${groupName}`}
-                            allExpanded={allExpanded}
-                            filteredDataOverride={dataValue}
-                            groupName={groupName}
-                            row={row}
-                            rowIndex={index}
-                            setSharedFilter={setSharedFilter}
-                            updateChildConfig={updateChildConfig}
-                            apiFilterDropdowns={apiFilterDropdowns}
-                            currentViewport={currentViewport}
-                            inNoDataState={inNoDataState}
-                            isLastRow={index === filteredRows.length - 1}
-                          />
-                        )
-                      })}
-                    </React.Fragment>
-                  )
-                } else {
-                  return (
-                    <VisualizationRow
-                      key={`row__${index}`}
-                      allExpanded={false}
-                      groupName={''}
-                      row={row}
-                      rowIndex={index}
-                      setSharedFilter={setSharedFilter}
-                      updateChildConfig={updateChildConfig}
-                      apiFilterDropdowns={apiFilterDropdowns}
-                      currentViewport={currentViewport}
-                      inNoDataState={inNoDataState}
-                      isLastRow={index === filteredRows.length - 1}
-                    />
-                  )
-                }
-              })}
+            {filteredRows?.map((row, index) => (
+              <VisualizationRow
+                key={`row__${index}`}
+                allExpanded={allExpanded}
+                groupName={''}
+                row={row}
+                rowIndex={index}
+                setSharedFilter={setSharedFilter}
+                setAllExpanded={setAllExpanded}
+                updateChildConfig={updateChildConfig}
+                apiFilterDropdowns={apiFilterDropdowns}
+                currentViewport={currentViewport}
+                inNoDataState={inNoDataState}
+                isLastRow={index === filteredRows.length - 1}
+              />
+            ))}
 
             {inNoDataState ? <div className='mt-5'>Please complete your selection to continue.</div> : <></>}
 

package/src/_stories/_mock/api-filter-map.json

@@ -82,6 +82,7 @@
   ],
   "visualizations": {
     "map1": {
+      "table": {},
       "uid": "map1",
       "type": "map",
       "defaultData": false,

package/src/components/CollapsibleVisualizationRow.tsx

@@ -5,13 +5,11 @@ import { APP_FONT_SIZE } from '@cdc/core/helpers/constants'
 type CollapsableVizRow = {
   allExpanded: boolean
   children: React.ReactNode
-  fontSize: string
   groupName: string
   currentViewport: string
 }
 const CollapsibleVisualizationRow: React.FC<CollapsableVizRow> = ({
   allExpanded,
-  fontSize,
   groupName,
   currentViewport,
   children
@@ -24,7 +22,7 @@ const CollapsibleVisualizationRow: React.FC<CollapsableVizRow> = ({
   }, [allExpanded])
 
   return (
-    <>
+    <div className='collapsable-multiviz-container'>
       <div
         style={{ fontSize: titleFontSize }}
         role='button'
@@ -43,7 +41,7 @@ const CollapsibleVisualizationRow: React.FC<CollapsableVizRow> = ({
         {groupName}
       </div>
       {isExpanded && children}
-    </>
+    </div>
   )
 }
 

package/src/components/DashboardEditors.tsx

@@ -0,0 +1,143 @@
+import CdcChart from '@cdc/chart/src/CdcChartComponent'
+import { APIFilterDropdowns } from './DashboardFilters'
+import CdcMapComponent from '@cdc/map/src/CdcMapComponent'
+import CdcDataBite from '@cdc/data-bite/src/CdcDataBite'
+import CdcWaffleChart from '@cdc/waffle-chart/src/CdcWaffleChart'
+import CdcMarkupInclude from '@cdc/markup-include/src/CdcMarkupInclude'
+import CdcFilteredText from '@cdc/filtered-text/src/CdcFilteredText'
+import DashboardSharedFilters from './DashboardFilters'
+import DataTableStandAlone from '@cdc/core/components/DataTable/DataTableStandAlone'
+import _ from 'lodash'
+import { AnyVisualization } from '@cdc/core/types/Visualization'
+import { DashboardState } from '../store/dashboard.reducer'
+
+type DashboardEditorProps = {
+  visualizationKey: string
+  visualizationConfig: AnyVisualization
+  _updateConfig: (config: any) => void
+  isDebug?: boolean
+  setSharedFilter?: Function
+  apiFilterDropdowns?: APIFilterDropdowns
+  state: DashboardState
+}
+
+const DashboardEditors: React.FC<DashboardEditorProps> = ({
+  visualizationKey,
+  visualizationConfig,
+  _updateConfig,
+  isDebug,
+  setSharedFilter,
+  apiFilterDropdowns,
+  state
+}) => {
+  const setsSharedFilter =
+    state.config.dashboard.sharedFilters &&
+    state.config.dashboard.sharedFilters.filter(sharedFilter => sharedFilter.setBy === visualizationKey).length > 0
+  const setSharedFilterValue = setsSharedFilter
+    ? state.config.dashboard.sharedFilters.filter(sharedFilter => sharedFilter.setBy === visualizationKey)[0].active
+    : undefined
+  switch (visualizationConfig.type) {
+    case 'chart':
+      return (
+        <CdcChart
+          key={visualizationKey}
+          config={visualizationConfig}
+          isEditor={true}
+          isDebug={isDebug}
+          setConfig={_updateConfig}
+          setSharedFilter={setsSharedFilter ? setSharedFilter : undefined}
+          setSharedFilterValue={setSharedFilterValue}
+          dashboardConfig={state.config}
+          datasets={state.config.datasets}
+          isDashboard={true}
+        />
+      )
+    case 'map':
+      return (
+        <CdcMapComponent
+          key={visualizationKey}
+          config={visualizationConfig}
+          isEditor={true}
+          isDebug={isDebug}
+          setConfig={_updateConfig}
+          setSharedFilter={setsSharedFilter ? setSharedFilter : undefined}
+          setSharedFilterValue={setSharedFilterValue}
+          isDashboard={true}
+          showLoader={false}
+          dashboardConfig={state.config}
+          datasets={state.config.datasets}
+        />
+      )
+
+    case 'data-bite':
+      return (
+        <CdcDataBite
+          key={visualizationKey}
+          config={{ ...visualizationConfig, newViz: true }}
+          isEditor={true}
+          setConfig={_updateConfig}
+          isDashboard={true}
+        />
+      )
+
+    case 'waffle-chart':
+      return (
+        <CdcWaffleChart
+          key={visualizationKey}
+          config={visualizationConfig}
+          isEditor={true}
+          setConfig={_updateConfig}
+          isDashboard={true}
+        />
+      )
+
+    case 'markup-include':
+      return (
+        <CdcMarkupInclude
+          key={visualizationKey}
+          config={visualizationConfig}
+          isEditor={true}
+          setConfig={_updateConfig}
+          isDashboard={true}
+          datasets={state.config.datasets}
+        />
+      )
+
+    case 'filtered-text':
+      return (
+        <CdcFilteredText
+          key={visualizationKey}
+          config={visualizationConfig}
+          isEditor={true}
+          setConfig={_updateConfig}
+          isDashboard={true}
+        />
+      )
+
+    case 'dashboardFilters':
+      return (
+        <DashboardSharedFilters
+          isEditor={true}
+          visualizationConfig={visualizationConfig}
+          apiFilterDropdowns={apiFilterDropdowns}
+          setConfig={_updateConfig}
+        />
+      )
+
+    case 'table':
+      return (
+        <DataTableStandAlone
+          visualizationKey={visualizationKey}
+          config={visualizationConfig}
+          isEditor={true}
+          updateConfig={_updateConfig}
+          datasets={state.config.datasets}
+        />
+      )
+
+    default:
+      return null
+  }
+}
+
+export default DashboardEditors