@cdc/dashboard 4.24.10 → 4.24.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cdc/dashboard",
-  "version": "4.24.10",
+  "version": "4.24.11",
   "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.24.10",
-    "@cdc/core": "^4.24.10",
-    "@cdc/data-bite": "^4.24.10",
-    "@cdc/filtered-text": "^4.24.10",
-    "@cdc/map": "^4.24.10",
-    "@cdc/markup-include": "^4.24.10",
-    "@cdc/waffle-chart": "^4.24.10",
+    "@cdc/chart": "^4.24.11",
+    "@cdc/core": "^4.24.11",
+    "@cdc/data-bite": "^4.24.11",
+    "@cdc/filtered-text": "^4.24.11",
+    "@cdc/map": "^4.24.11",
+    "@cdc/markup-include": "^4.24.11",
+    "@cdc/waffle-chart": "^4.24.11",
     "html-react-parser": "^3.0.8",
     "js-base64": "^2.5.2",
     "papaparse": "^5.3.0",
@@ -49,5 +49,5 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
-  "gitHead": "a4d88d1bc91f596e1b0307d8e25c57ad8c668b75"
+  "gitHead": "9ab5ee9b2b0ef7321a66a2104be6ce8899ec3808"
 }

package/src/CdcDashboard.tsx

@@ -14,39 +14,47 @@ import { DashboardConfig } from './types/DashboardConfig'
 import { coveUpdateWorker } from '@cdc/core/helpers/coveUpdateWorker'
 import _ from 'lodash'
 import { hasDashboardApplyBehavior } from './helpers/hasDashboardApplyBehavior'
+import { getQueryParams } from '@cdc/core/helpers/queryStringUtils'
 
 type MultiDashboardProps = Omit<WCMSProps, 'configUrl'> & {
   configUrl?: string
   config?: MultiDashboardConfig
 }
 
-const MultiDashboardWrapper: React.FC<MultiDashboardProps> = ({ configUrl, config: editorConfig, isEditor, isDebug }) => {
+const MultiDashboardWrapper: React.FC<MultiDashboardProps> = ({
+  configUrl,
+  config: editorConfig,
+  isEditor,
+  isDebug
+}) => {
   const [initial, setInitial] = useState<InitialState>(undefined)
 
-  const getSelectedConfig = (config: MultiDashboardConfig, selectedConfig?: string): number | null => {
+  const getSelectedConfig = (config: MultiDashboardConfig): number | null => {
     if (!config.multiDashboards) return null
-    // TODO: if query parameter select based on query parameter
-    if (selectedConfig) {
-      const foundConfig = Object.values(config.multiDashboards).findIndex(({ label }) => {
-        return label === selectedConfig
-      })
-      if (foundConfig > -1) return foundConfig
+    // if query parameter, select based on query parameter
+    const selectedConfig = getQueryParams()['cove-tab']
+    if (selectedConfig !== undefined && Number(selectedConfig) < config.multiDashboards.length) {
+      return Number(selectedConfig)
     }
     // else select the first available
     return 0
   }
 
-  const formatInitialState = (newConfig: MultiDashboardConfig | DashboardConfig, datasets: Record<string, Object[]>) => {
+  const formatInitialState = (
+    newConfig: MultiDashboardConfig | DashboardConfig,
+    datasets: Record<string, Object[]>
+  ) => {
     const [config, filteredData] = getUpdateConfig(initialState)(newConfig, datasets)
     const versionedConfig = coveUpdateWorker(config)
     return { ...initialState, config: versionedConfig, filteredData, data: datasets }
   }
 
-  const loadConfig = async (selectedConfig?: string) => {
+  const loadConfig = async () => {
     const _config: MultiDashboardConfig = editorConfig || (await (await fetch(configUrl)).json())
-    const selected = getSelectedConfig(_config, selectedConfig)
+    const selected = getSelectedConfig(_config)
 
-    const { newConfig, datasets } = selected !== null ? await loadMultiDashboard(_config, selected) : await loadSingleDashboard(_config)
+    const { newConfig, datasets } =
+      selected !== null ? await loadMultiDashboard(_config, selected) : await loadSingleDashboard(_config)
     setInitial(formatInitialState(newConfig, datasets))
   }
 
@@ -101,7 +109,14 @@ const MultiDashboardWrapper: React.FC<MultiDashboardProps> = ({ configUrl, confi
         newConfig.visualizations[vizKey] = { ...newConfig.visualizations[vizKey], ...newData }
       })
 
-      const blankFields = { data: [], dataUrl: '', dataFileName: '', dataFileSourceType: '', dataDescription: {}, formattedData: [] }
+      const blankFields = {
+        data: [],
+        dataUrl: '',
+        dataFileName: '',
+        dataFileSourceType: '',
+        dataDescription: {},
+        formattedData: []
+      }
       newConfig = { ...newConfig, ...blankFields }
 
       if (newConfig.dashboard.filters) {
@@ -122,7 +137,13 @@ const MultiDashboardWrapper: React.FC<MultiDashboardProps> = ({ configUrl, confi
 
   const loadMultiDashboard = async (multiConfig: MultiDashboardConfig, selectedConfig: number) => {
     const selectedDashboard = multiConfig.multiDashboards[selectedConfig]
-    let newConfig = { ...defaults, ...multiConfig, ...selectedDashboard, multiDashboards: multiConfig.multiDashboards, activeDashboard: selectedConfig } as MultiDashboardConfig
+    const newConfig = {
+      ...defaults,
+      ...multiConfig,
+      ...selectedDashboard,
+      multiDashboards: multiConfig.multiDashboards,
+      activeDashboard: selectedConfig
+    } as MultiDashboardConfig
     return await loadData(newConfig)
   }
 

package/src/CdcDashboardComponent.tsx

@@ -35,6 +35,7 @@ import './scss/main.scss'
 
 import VisualizationsPanel from './components/VisualizationsPanel'
 import dashboardReducer from './store/dashboard.reducer'
+import errorMessagesReducer from './store/errorMessage/errorMessage.reducer'
 import { filterData } from './helpers/filterData'
 import { getVizKeys } from './helpers/getVizKeys'
 import Title from '@cdc/core/components/ui/Title'
@@ -65,6 +66,7 @@ import ExpandCollapseButtons from './components/ExpandCollapseButtons'
 import { hasDashboardApplyBehavior } from './helpers/hasDashboardApplyBehavior'
 import { loadAPIFiltersFactory } from './helpers/loadAPIFilters'
 import Loader from '@cdc/core/components/Loader'
+import Alert from '@cdc/core/components/Alert'
 
 type DashboardProps = Omit<WCMSProps, 'configUrl'> & {
   initialState: InitialState
@@ -72,6 +74,7 @@ type DashboardProps = Omit<WCMSProps, 'configUrl'> & {
 
 export default function CdcDashboard({ initialState, isEditor = false, isDebug = false }: DashboardProps) {
   const [state, dispatch] = useReducer(dashboardReducer, initialState)
+  const [errorMessages, dispatchErrorMessages] = useReducer(errorMessagesReducer, [])
   const editorContext = useContext(EditorContext)
   const [apiFilterDropdowns, setAPIFilterDropdowns] = useState<APIFilterDropdowns>({})
   const [currentViewport, setCurrentViewport] = useState<ViewPort>('lg')
@@ -97,7 +100,12 @@ export default function CdcDashboard({ initialState, isEditor = false, isDebug =
       .reduce((acc, viz: DashboardFilters) => (viz.autoLoad ? [...acc, ...viz.sharedFilterIndexes] : acc), [])
   }, [state.config.visualizations])
 
-  const loadAPIFilters = loadAPIFiltersFactory(dispatch, setAPIFilterDropdowns, autoLoadFilterIndexes)
+  const loadAPIFilters = loadAPIFiltersFactory(
+    dispatch,
+    dispatchErrorMessages,
+    setAPIFilterDropdowns,
+    autoLoadFilterIndexes
+  )
 
   const reloadURLData = async (newFilters?: SharedFilter[]) => {
     const config = _.cloneDeep(state.config)
@@ -163,20 +171,28 @@ export default function CdcDashboard({ initialState, isEditor = false, isDebug =
           )
 
           setAPILoading(true)
-          await fetchRemoteData(dataUrlFinal).then(responseData => {
-            let data: any[] = responseData
-            if (responseData && dataset.dataDescription) {
-              try {
-                data = transform.autoStandardize(data)
-                data = transform.developerStandardize(data, dataset.dataDescription)
-              } catch (e) {
-                //Data not able to be standardized, leave as is
+          await fetchRemoteData(dataUrlFinal)
+            .then(responseData => {
+              let data: any[] = responseData
+              if (responseData && dataset.dataDescription) {
+                try {
+                  data = transform.autoStandardize(data)
+                  data = transform.developerStandardize(data, dataset.dataDescription)
+                } catch (e) {
+                  //Data not able to be standardized, leave as is
+                  console.error('Error standardizing data:', e)
+                }
               }
-            }
-            newDatasets[datasetKey].data = data
-            newDatasets[datasetKey].runtimeDataUrl = dataUrlFinal
-            newData[datasetKey] = data
-          })
+              newDatasets[datasetKey].data = data
+              newDatasets[datasetKey].runtimeDataUrl = dataUrlFinal
+              newData[datasetKey] = data
+            })
+            .catch(e => {
+              console.error(e)
+              newDatasets[datasetKey].data = []
+              newDatasets[datasetKey].runtimeDataUrl = dataUrlFinal
+              newData[datasetKey] = []
+            })
         }
       }
     }
@@ -492,6 +508,14 @@ export default function CdcDashboard({ initialState, isEditor = false, isDebug =
         {isEditor && <Header />}
         {apiLoading && <Loader fullScreen={true} />}
         <MultiTabs isEditor={isEditor && !isPreview} />
+        {errorMessages.map((message, index) => (
+          <Alert
+            type='danger'
+            onDismiss={() => dispatchErrorMessages({ type: 'DISMISS_ERROR_MESSAGE', payload: index })}
+            message={message}
+            autoDismiss={true}
+          />
+        ))}
         <Layout.Responsive isEditor={isEditor}>
           <div className={`cdc-dashboard-inner-container${isEditor ? ' is-editor' : ''}`}>
             <Title

package/src/_stories/Dashboard.stories.tsx

@@ -2,6 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react'
 import { faker } from '@faker-js/faker'
 import APIFiltersMapData from './_mock/api-filter-map.json'
 import APIFiltersChartData from './_mock/api-filter-chart.json'
+import APIFilterErrorConfig from './_mock/api-filter-error.json'
 import ExampleConfig_1 from './_mock/dashboard-gallery.json'
 import ExampleConfig_2 from './_mock/dashboard-2.json'
 import ExampleConfig_3 from './_mock/dashboard_no_filter.json'
@@ -66,6 +67,13 @@ export const Dashboard_Filters: Story = {
   }
 }
 
+export const API_Filter_Error: Story = {
+  args: {
+    config: APIFilterErrorConfig,
+    isEditor: false
+  }
+}
+
 export const StandAloneTable: Story = {
   args: {
     config: StandaloneTable,

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

@@ -0,0 +1,55 @@
+{
+  "dashboard": {
+    "theme": "theme-blue",
+    "sharedFilters": [
+      {
+        "key": "New Dashboard Filter 1",
+        "showDropdown": true,
+        "type": "urlfilter",
+        "apiFilter": {
+          "apiEndpoint": "https://nccd-cove-public-api.apps.ecpaas-dev.cdc.gov/od-public?$datakey=brfss_prevalence_cove_explore_by_t",
+          "valueSelector": "",
+          "textSelector": ""
+        },
+        "tier": 1
+      }
+    ]
+  },
+  "rows": [{ "columns": [{ "width": 12, "widget": "dashboardFilters1730831317688" }, {}, {}] }],
+  "visualizations": {
+    "dashboardFilters1730831317688": {
+      "filters": [],
+      "filterBehavior": "Filter Change",
+      "newViz": true,
+      "openModal": true,
+      "uid": "dashboardFilters1730831317688",
+      "type": "dashboardFilters",
+      "sharedFilterIndexes": [0],
+      "visualizationType": "dashboardFilters"
+    }
+  },
+  "table": {
+    "label": "Data Table",
+    "show": true,
+    "showDownloadUrl": false,
+    "showDownloadLinkBelow": true,
+    "showVertical": true
+  },
+  "newViz": true,
+  "datasets": {
+    "https://nccd-cove-public-api.apps.ecpaas-dev.cdc.gov/od-public?$datakey=brfss_prevalence_cove_explore_by_topic": {
+      "dataFileSize": 35061,
+      "dataFileName": "https://nccd-cove-public-api.apps.ecpaas-dev.cdc.gov/od-public?$datakey=brfss_prevalence_cove_explore_by_topic",
+      "dataFileSourceType": "url",
+      "dataFileFormat": "JSON",
+      "preview": true,
+      "dataUrl": "https://nccd-cove-public-api.apps.ecpaas-dev.cdc.gov/od-public?$datakey=brfss_prevalence_cove_explore_by_topic"
+    }
+  },
+  "isResponsiveTicks": false,
+  "type": "dashboard",
+  "barThickness": "0.37",
+  "xAxis": { "type": "categorical", "size": 75, "maxTickRotation": 45, "labelOffset": 0 },
+  "runtime": {},
+  "version": "4.24.10"
+}

package/src/_stories/_mock/group-pivot-filter.json

@@ -30,7 +30,12 @@
           "valueColumns": ["age", "color"]
         }
       },
-      "columns": {},
+      "columns": {
+        "other": {
+          "name": "other",
+          "dataTable": false
+        }
+      },
       "dataFormat": {},
       "visualizationType": "table",
       "dataDescription": {
@@ -59,10 +64,10 @@
   "datasets": {
     "valid-data-chart.csv": {
       "data": [
-        { "name": "John", "age": 25, "color": "blue", "city": "New York" },
-        { "name": "Jane", "age": 27, "color": "red", "city": "New York" },
-        { "name": "Jane", "age": 30, "color": "yellow", "city": "San Francisco" },
-        { "name": "John", "age": 31, "color": "green", "city": "San Francisco" }
+        { "name": "John", "age": 25, "color": "blue", "other": "no", "city": "New York" },
+        { "name": "Jane", "age": 27, "color": "red", "other": "yes", "city": "New York" },
+        { "name": "Jane", "age": 30, "color": "yellow", "other": "no", "city": "San Francisco" },
+        { "name": "John", "age": 31, "color": "green", "other": "yes", "city": "San Francisco" }
       ],
       "dataFileSize": 178,
       "dataFileName": "valid-data-chart.csv",

package/src/components/DashboardFilters/DashboardFilters.tsx

@@ -2,22 +2,29 @@ import React from 'react'
 import MultiSelect from '@cdc/core/components/MultiSelect'
 import { SharedFilter } from '../../types/SharedFilter'
 import { APIFilterDropdowns, DropdownOptions } from './DashboardFiltersWrapper'
-import NestedDropdown from '../../../../core/components/NestedDropdown/NestedDropdown'
 import { FILTER_STYLE } from '../../types/FilterStyles'
 import { NestedOptions, ValueTextPair } from '@cdc/core/components/NestedDropdown/nestedDropdownHelpers'
+import NestedDropdown from '@cdc/core/components/NestedDropdown'
+import { MouseEventHandler } from 'react'
 
 type DashboardFilterProps = {
   show: number[]
   filters: SharedFilter[]
   apiFilterDropdowns: APIFilterDropdowns
   handleOnChange: (index: number, value: string | string[]) => void
+  showSubmit: boolean
+  applyFilters: MouseEventHandler<HTMLButtonElement>
+  applyFiltersButtonText?: string
 }
 
 const DashboardFilters: React.FC<DashboardFilterProps> = ({
   show,
   filters: sharedFilters,
   apiFilterDropdowns,
-  handleOnChange
+  handleOnChange,
+  showSubmit,
+  applyFilters,
+  applyFiltersButtonText
 }) => {
   const nullVal = (filter: SharedFilter) => {
     const val = filter.queuedActive || filter.active
@@ -38,10 +45,9 @@ const DashboardFilters: React.FC<DashboardFilterProps> = ({
   }
 
   return (
-    <>
+    <form className='d-flex flex-wrap'>
       {sharedFilters.map((filter, filterIndex) => {
         const urlFilterType = filter.type === 'urlfilter'
-
         if (
           (!urlFilterType && !filter.showDropdown && filter.filterStyle !== FILTER_STYLE.nestedDropdown) ||
           (show && !show.includes(filterIndex))
@@ -87,49 +93,58 @@ const DashboardFilters: React.FC<DashboardFilterProps> = ({
         }
 
         return filter.filterStyle === FILTER_STYLE.multiSelect ? (
-          <MultiSelect
-            key={`${filter.key}-filtersection-${filterIndex}`}
-            label={filter.key}
-            options={multiValues}
-            fieldName={filterIndex}
-            updateField={updateField}
-            selected={filter.active as string[]}
-            limit={filter.selectLimit || 5}
-          />
+          <div className='form-group mr-3 mb-1' key={`${filter.key}-filtersection-${filterIndex}`}>
+            <MultiSelect
+              label={filter.key}
+              options={multiValues}
+              fieldName={filterIndex}
+              updateField={updateField}
+              selected={filter.active as string[]}
+              limit={filter.selectLimit || 5}
+            />
+          </div>
         ) : filter.filterStyle === FILTER_STYLE.nestedDropdown ? (
-          <NestedDropdown
-            key={`${filter.key}-filtersection-${filterIndex}`}
-            activeGroup={filter.active as string}
-            activeSubGroup={filter.subGrouping?.active}
-            options={getNestedDropdownOptions(apiFilterDropdowns[_key])}
-            listLabel={filter.key}
-            handleSelectedItems={value => updateField(null, null, filterIndex, value)}
-          />
+          <div className='form-group mr-3 mb-1' key={`${filter.key}-filtersection-${filterIndex}`}>
+            <NestedDropdown
+              activeGroup={filter.active as string}
+              activeSubGroup={filter.subGrouping?.active}
+              filterIndex={filterIndex}
+              options={getNestedDropdownOptions(apiFilterDropdowns[_key])}
+              listLabel={filter.key}
+              handleSelectedItems={value => updateField(null, null, filterIndex, value)}
+            />
+          </div>
         ) : (
-          <div className='cove-dashboard-filters' key={`${filter.key}-filtersection-${filterIndex}`}>
-            <section className='dashboard-filters-section'>
-              <label htmlFor={`filter-${filterIndex}`}>{filter.key}</label>
-              <select
-                id={`filter-${filterIndex}`}
-                className='filter-select'
-                data-index='0'
-                value={filter.queuedActive || filter.active}
-                onChange={val => {
-                  handleOnChange(filterIndex, val.target.value)
-                }}
-              >
-                {nullVal(filter) && !filter.resetLabel && (
-                  <option value='' key='select'>
-                    {'-Select-'}
-                  </option>
-                )}
-                {values}
-              </select>
-            </section>
+          <div className='form-group mr-3 mb-1' key={`${filter.key}-filtersection-${filterIndex}`}>
+            <label className='text-capitalize font-weight-bold' htmlFor={`filter-${filterIndex}`}>
+              {filter.key}
+            </label>
+            <select
+              id={`filter-${filterIndex}`}
+              className='cove-form-select'
+              data-index='0'
+              value={filter.queuedActive || filter.active}
+              onChange={val => {
+                handleOnChange(filterIndex, val.target.value)
+              }}
+              disabled={values.length === 1 && !nullVal(filter)}
+            >
+              {nullVal(filter) && (
+                <option key={`select`} value=''>
+                  {filter.resetLabel || '- Select -'}
+                </option>
+              )}
+              {values}
+            </select>
           </div>
         )
       })}
-    </>
+      {showSubmit && (
+        <button className='btn btn-primary mb-1' onClick={applyFilters}>
+          {applyFiltersButtonText || 'GO!'}
+        </button>
+      )}
+    </form>
   )
 }
 

package/src/components/DashboardFilters/DashboardFiltersEditor/DashboardFiltersEditor.tsx

@@ -274,7 +274,7 @@ const DashboardFiltersEditor: React.FC<DashboardFitlersEditorProps> = ({ vizConf
               </select>
             </label>
           ) : (
-            <button onClick={() => setCanAddExisting(true)} className='btn btn-primary full-width'>
+            <button onClick={() => setCanAddExisting(true)} className='btn btn-primary full-width mt-2'>
               Add Existing Dashboard Filter
             </button>
           )}

package/src/components/DashboardFilters/DashboardFiltersWrapper.tsx

@@ -13,6 +13,7 @@ import { ViewPort } from '@cdc/core/types/ViewPort'
 import { hasDashboardApplyBehavior } from '../../helpers/hasDashboardApplyBehavior'
 import * as apiFilterHelpers from '../../helpers/apiFilterHelpers'
 import { applyQueuedActive } from '@cdc/core/components/Filters/helpers/applyQueuedActive'
+import './dashboardfilter.styles.css'
 
 type SubOptions = { subOptions?: Record<'value' | 'text', string>[] }
 
@@ -43,7 +44,8 @@ const DashboardFiltersWrapper: React.FC<DashboardFiltersProps> = ({
   const { config: dashboardConfig, reloadURLData, loadAPIFilters, setAPIFilterDropdowns } = state
   const dispatch = useContext(DashboardDispatchContext)
 
-  const applyFilters = () => {
+  const applyFilters = e => {
+    e.preventDefault() // prevent form submission
     const dashboardConfig = _.cloneDeep(state.config.dashboard)
     const nonAutoLoadFilterIndexes = Object.values(state.config.visualizations)
       .filter(v => v.type === 'dashboardFilters')
@@ -171,7 +173,7 @@ const DashboardFiltersWrapper: React.FC<DashboardFiltersProps> = ({
       {!displayNone && (
         <Layout.Responsive isEditor={isEditor}>
           <div
-            className={`cdc-dashboard-inner-container${
+            className={`${
               isEditor ? ' is-editor' : ''
             } cove-component__content col-12 cove-dashboard-filters-container`}
           >
@@ -180,10 +182,10 @@ const DashboardFiltersWrapper: React.FC<DashboardFiltersProps> = ({
               filters={dashboardConfig.dashboard.sharedFilters || []}
               apiFilterDropdowns={apiFilterDropdowns}
               handleOnChange={handleOnChange}
+              showSubmit={visualizationConfig.filterBehavior === FilterBehavior.Apply && !visualizationConfig.autoLoad}
+              applyFilters={applyFilters}
+              applyFiltersButtonText={visualizationConfig.applyFiltersButtonText}
             />
-            {visualizationConfig.filterBehavior === FilterBehavior.Apply && !visualizationConfig.autoLoad && (
-              <button onClick={applyFilters}>{visualizationConfig.applyFiltersButtonText || 'GO!'}</button>
-            )}
           </div>
         </Layout.Responsive>
       )}

package/src/components/DashboardFilters/_stories/DashboardFilters.stories.tsx

@@ -0,0 +1,21 @@
+import { Meta, StoryObj } from '@storybook/react'
+import DashboardFilters from '../DashboardFilters'
+
+const meta: Meta<typeof DashboardFilters> = {
+  title: 'Components/Atoms/Inputs/DashboardFilters',
+  component: DashboardFilters
+}
+
+type Story = StoryObj<typeof DashboardFilters>
+
+export const Example_1: Story = {
+  args: {
+    filters: [
+      { type: 'datafilter', key: 'label here', values: [1, 2, 3, 4] },
+      { type: 'datafilter', key: 'something' }
+    ],
+    handleOnChange: () => {}
+  }
+}
+
+export default meta

package/src/components/DashboardFilters/dashboardfilter.styles.css

@@ -0,0 +1,11 @@
+.cove-dashboard-filters-container {
+  :is(label) {
+    margin-bottom: 0;
+    margin-top: 0.5rem;
+  }
+  .btn {
+    /* this is the height that is defined for the .form-control class in _forms.scss in bootstrap. */
+    height: calc(1.5em + 0.75rem + 2px);
+    align-self: flex-end;
+  }
+}

package/src/components/Grid.tsx

@@ -24,7 +24,7 @@ const Grid = () => {
       {(rows || []).map((row, idx) => (
         <Row row={row} idx={idx} uuid={row.uuid} key={idx} />
       ))}
-      <button className='btn add-row' onClick={addRow}>
+      <button className='btn btn-primary col' onClick={addRow}>
         Add Row
       </button>
     </div>