@cdc/dashboard 4.24.4 → 4.24.7

package/src/_stories/_mock/multi-viz.json

@@ -164,7 +164,7 @@
       },
       "table": {
         "label": "Data Table",
-        "expanded": true,
+        "expanded": false,
         "limitHeight": false,
         "height": "",
         "caption": "",
@@ -366,11 +366,10 @@
   },
   "table": {
     "label": "Data Table",
-    "show": true,
+    "show": false,
     "showDownloadUrl": false,
     "showVertical": true
   },
-  "newViz": true,
   "datasets": {},
   "type": "dashboard",
   "runtime": {},

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

@@ -1,16 +1,7 @@
 {
   "dashboard": {
     "theme": "theme-blue",
-    "sharedFilters": [
-      {
-        "key": "Race",
-        "type": "datafilter",
-        "showDropdown": true,
-        "columnName": "Race",
-        "pivot": "Age-adjusted rate",
-        "usedBy": ["table1707935263149"]
-      }
-    ]
+    "sharedFilters": []
   },
   "rows": [
     [
@@ -32,7 +23,11 @@
         "show": true,
         "showDownloadUrl": false,
         "showVertical": true,
-        "expanded": true
+        "expanded": true,
+        "pivot": {
+          "columnName": "Race",
+          "valueColumn": "Age-adjusted rate"
+        }
       },
       "columns": {},
       "dataFormat": {},
@@ -41,6 +36,15 @@
         "horizontal": false,
         "series": false
       },
+      "filters": [
+        {
+          "filterStyle": "multi-select",
+          "label": "Race",
+          "columnName": "Race",
+          "showDropdown": true
+        }
+      ],
+      "filterBehavior": "Filter Change",
       "formattedData": [
         {
           "Race": "Hispanic or Latino",

package/src/_stories/_mock/standalone-table.json

@@ -17,6 +17,8 @@
       "newViz": true,
       "openModal": false,
       "uid": "table1707840146431",
+      "filters": [],
+      "filterBehavior": "Filter Change",
       "table": {
         "label": "Data Table",
         "show": true,

package/src/components/CollapsibleVisualizationRow.tsx

@@ -0,0 +1,44 @@
+import React, { useState, useEffect } from 'react'
+import Icon from '../../../core/components/ui/Icon'
+
+type CollapsableVizRow = {
+  allExpanded: boolean
+  children: React.ReactNode
+  fontSize: string
+  groupName: string
+  currentViewport: string
+}
+const CollapsibleVisualizationRow: React.FC<CollapsableVizRow> = ({ allExpanded, fontSize, groupName, currentViewport, children }) => {
+  const [isExpanded, setIsExpanded] = useState(allExpanded)
+  const fontSizes = { small: 16, medium: 18, large: 20 }
+  const titleFontSize = ['sm', 'xs', 'xxs'].includes(currentViewport) ? '13px' : `${fontSizes[fontSize]}px`
+
+  useEffect(() => {
+    setIsExpanded(allExpanded)
+  }, [allExpanded])
+
+  return (
+    <>
+      <div
+        style={{ fontSize: titleFontSize }}
+        role='button'
+        className={`multi-visualiation-heading${isExpanded ? '' : ' collapsed'} h4`}
+        onClick={() => {
+          setIsExpanded(!isExpanded)
+        }}
+        tabIndex={0}
+        onKeyDown={e => {
+          if (e.keyCode === 13) {
+            setIsExpanded(!isExpanded)
+          }
+        }}
+      >
+        <Icon display={isExpanded ? 'minus' : 'plus'} base />
+        {groupName}
+      </div>
+      {isExpanded && children}
+    </>
+  )
+}
+
+export default CollapsibleVisualizationRow

package/src/components/Column.tsx

@@ -40,7 +40,7 @@ const Column = ({ data, rowIdx, colIdx }) => {
   return (
     <div className={classNames.join(' ')} ref={drop}>
       {widget ? (
-        <Widget data={{ rowIdx, colIdx, ...widget }} type={widget.visualizationType ?? widget.general?.geoType} />
+        <Widget widgetConfig={{ rowIdx, colIdx, ...widget }} type={widget.visualizationType ?? widget.general?.geoType} />
       ) : (
         <p className='builder-column__text'>
           Drag and drop <br /> visualization

package/src/components/DashboardFilters/DashboardFilters.tsx

@@ -0,0 +1,80 @@
+import { SharedFilter } from '../../types/SharedFilter'
+import { APIFilterDropdowns } from './DashboardFiltersWrapper'
+
+type DashboardFilterProps = {
+  show: number[]
+  filters: SharedFilter[]
+  apiFilterDropdowns: APIFilterDropdowns
+  handleOnChange: Function
+}
+
+const DashboardFilters: React.FC<DashboardFilterProps> = ({ show, filters, apiFilterDropdowns, handleOnChange }) => {
+  const nullVal = (singleFilter: SharedFilter) => {
+    const val = singleFilter.queuedActive || singleFilter.active
+    return val === null || val === undefined || val === ''
+  }
+  return (
+    <>
+      {filters.map((singleFilter, filterIndex) => {
+        if ((singleFilter.type !== 'urlfilter' && !singleFilter.showDropdown) || (show && !show.includes(filterIndex))) return <></>
+        const values: JSX.Element[] = []
+        const multiValues = []
+        if (singleFilter.resetLabel) {
+          values.push(
+            <option key={`${singleFilter.resetLabel}-option`} value={singleFilter.resetLabel}>
+              {singleFilter.resetLabel}
+            </option>
+          )
+        }
+        const _key = singleFilter.apiFilter?.apiEndpoint
+        if (_key && apiFilterDropdowns[_key]) {
+          // URL Filter
+          apiFilterDropdowns[_key].forEach(({ text, value }, index) => {
+            values.push(
+              <option key={`${value}-option-${index}`} value={value}>
+                {text}
+              </option>
+            )
+          })
+        } else {
+          // Data Filter
+          singleFilter.values?.forEach((filterOption, index) => {
+            const labeledOpt = singleFilter.labels && singleFilter.labels[filterOption]
+            values.push(
+              <option key={`${singleFilter.key}-option-${index}`} value={filterOption}>
+                {labeledOpt || filterOption}
+              </option>
+            )
+            multiValues.push({ value: filterOption, label: labeledOpt || filterOption })
+          })
+        }
+
+        return (
+          <div className='cove-dashboard-filters' key={`${singleFilter.key}-filtersection-${filterIndex}`}>
+            <section className='dashboard-filters-section'>
+              <label htmlFor={`filter-${filterIndex}`}>{singleFilter.key}</label>
+              <select
+                id={`filter-${filterIndex}`}
+                className='filter-select'
+                data-index='0'
+                value={singleFilter.queuedActive || singleFilter.active}
+                onChange={val => {
+                  handleOnChange(filterIndex, val.target.value)
+                }}
+              >
+                {nullVal(singleFilter) && !singleFilter.resetLabel && (
+                  <option value='' key='select'>
+                    {'-Select-'}
+                  </option>
+                )}
+                {values}
+              </select>
+            </section>
+          </div>
+        )
+      })}
+    </>
+  )
+}
+
+export default DashboardFilters

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

@@ -0,0 +1,218 @@
+import { Accordion, AccordionItem, AccordionItemButton, AccordionItemHeading, AccordionItemPanel } from 'react-accessible-accordion'
+import { useContext, useMemo, useState } from 'react'
+import { CheckBox, Select } from '@cdc/core/components/EditorPanel/Inputs'
+import Tooltip from '@cdc/core/components/ui/Tooltip'
+import Icon from '@cdc/core/components/ui/Icon'
+import FieldSetWrapper from '@cdc/core/components/EditorPanel/FieldSetWrapper'
+import FilterEditor from './components/FilterEditor'
+import { AnyVisualization } from '@cdc/core/types/Visualization'
+import { DashboardContext, DashboardDispatchContext } from '../../../DashboardContext'
+import _ from 'lodash'
+import { DashboardFilters } from '../../../types/DashboardFilters'
+import { SharedFilter } from '../../../types/SharedFilter'
+import { addValuesToFilters } from '@cdc/core/helpers/addValuesToFilters'
+import { useGlobalContext } from '@cdc/core/components/GlobalContext'
+import DeleteFilterModal from './components/DeleteFilterModal'
+
+type DashboardFitlersEditorProps = {
+  vizConfig: DashboardFilters
+  updateConfig: Function
+}
+
+const DashboardFiltersEditor: React.FC<DashboardFitlersEditorProps> = ({ vizConfig, updateConfig }) => {
+  const { config, loadAPIFilters, data } = useContext(DashboardContext)
+  const { overlay } = useGlobalContext()
+  const {
+    dashboard: { sharedFilters },
+    visualizations
+  } = config
+  const dispatch = useContext(DashboardDispatchContext)
+
+  const existingOptions = useMemo(() => {
+    const sharedFilterIndexes = (config.visualizations[vizConfig.uid] as DashboardFilters).sharedFilterIndexes.map(Number)
+    return config.dashboard.sharedFilters
+      .map<[number, string]>(({ key }, i) => [i, key])
+      .filter(([filterIndex]) => !sharedFilterIndexes.includes(filterIndex)) // filter out already added filters
+      .map(([filterIndex, filterName]) => <option key={filterIndex} value={filterIndex}>{`${filterIndex} - ${filterName}`}</option>)
+  }, [config.visualizations, vizConfig.uid])
+
+  const openControls = useState({})
+  const [canAddExisting, setCanAddExisting] = useState(false)
+
+  const updateFilterProp = (prop: string, index: number, value) => {
+    const newSharedFilters = _.cloneDeep(sharedFilters)
+    const oldEndpoint = sharedFilters[index].apiFilter?.apiEndpoint
+    const oldAPIValueSelector = sharedFilters[index].apiFilter?.valueSelector
+    const apiFilterChanged = value.apiEndpoint !== oldEndpoint || value.valueSelector !== oldAPIValueSelector
+    newSharedFilters[index][prop] = value
+    if (prop === 'columnName') {
+      // changing a data column and want to load the data into the preview options
+      const sharedFiltersWithValues = addValuesToFilters<SharedFilter>(newSharedFilters, data)
+      dispatch({ type: 'SET_SHARED_FILTERS', payload: sharedFiltersWithValues })
+    } else if (prop === 'apiFilter' && value.apiEndpoint && value.valueSelector && apiFilterChanged) {
+      // changing a api filter and want to load the api data into the preview.
+      // automatically dispatches SET_SHARED_FILTERS
+      loadAPIFilters(newSharedFilters, {})
+    } else {
+      dispatch({ type: 'SET_SHARED_FILTERS', payload: newSharedFilters })
+    }
+  }
+
+  const removeFilter = index => {
+    const newSharedFilters = _.cloneDeep(sharedFilters)
+
+    newSharedFilters.splice(index, 1)
+    const shiftDownIndexes = Object.keys(sharedFilters).slice(index + 1)
+    const anyViz: Record<string, AnyVisualization> = visualizations
+    Object.keys(anyViz).forEach(vizKey => {
+      const viz = anyViz[vizKey]
+      if (viz.type === 'dashboardFilters') {
+        // shift the indexes down
+        const sharedFilterIndexes = viz.sharedFilterIndexes
+          .filter(filterIndex => filterIndex != index)
+          .map(filterIndex => {
+            if (shiftDownIndexes.includes(filterIndex.toString())) {
+              return filterIndex - 1
+            }
+            return filterIndex
+          })
+        dispatch({ type: 'UPDATE_VISUALIZATION', payload: { vizKey, configureData: { sharedFilterIndexes } } })
+      }
+    })
+    dispatch({ type: 'SET_SHARED_FILTERS', payload: newSharedFilters })
+  }
+
+  const addNewFilter = () => {
+    const _sharedFilters = _.cloneDeep(sharedFilters) || []
+    const columnName = 'New Dashboard Filter ' + (_sharedFilters.length + 1)
+    const newFilter = { key: columnName, showDropdown: true, values: [] } as SharedFilter
+    dispatch({ type: 'SET_SHARED_FILTERS', payload: [..._sharedFilters, newFilter] })
+    updateConfig({ ...vizConfig, sharedFilterIndexes: [...vizConfig.sharedFilterIndexes, _sharedFilters.length] })
+  }
+
+  return (
+    <Accordion allowZeroExpanded={true}>
+      <AccordionItem>
+        <AccordionItemHeading>
+          <AccordionItemButton>General</AccordionItemButton>
+        </AccordionItemHeading>
+        <AccordionItemPanel>
+          <Select
+            value={vizConfig.filterBehavior}
+            label='Filter Behavior'
+            updateField={(_section, _subsection, _key, value) => {
+              updateConfig({ ...vizConfig, filterBehavior: value })
+            }}
+            options={['Apply Button', 'Filter Change']}
+            tooltip={
+              <Tooltip style={{ textTransform: 'none' }}>
+                <Tooltip.Target>
+                  <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                </Tooltip.Target>
+                <Tooltip.Content>
+                  <p>The Apply Button option changes the visualization when the user clicks "apply". The Filter Change option immediately changes the visualization when the selection is changed.</p>
+                </Tooltip.Content>
+              </Tooltip>
+            }
+          />
+          {vizConfig.filterBehavior === 'Filter Change' && (
+            <CheckBox
+              label='Auto Load'
+              value={vizConfig.autoLoad}
+              updateField={(_section, _subsection, _key, value) => {
+                updateConfig({ ...vizConfig, autoLoad: value })
+              }}
+              tooltip={
+                <Tooltip style={{ textTransform: 'none' }}>
+                  <Tooltip.Target>
+                    <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                  </Tooltip.Target>
+                  <Tooltip.Content>
+                    <p>Check if you would like for all URL filters to automatically select a value when a parent filter is changed.</p>
+                  </Tooltip.Content>
+                </Tooltip>
+              }
+            />
+          )}
+        </AccordionItemPanel>
+      </AccordionItem>
+
+      <AccordionItem>
+        <AccordionItemHeading>
+          <AccordionItemButton>Filters</AccordionItemButton>
+        </AccordionItemHeading>
+        <AccordionItemPanel>
+          {vizConfig.sharedFilterIndexes.map(index => {
+            const filter = sharedFilters[index]
+            return (
+              <FieldSetWrapper
+                key={filter.key + index}
+                fieldName={filter.key}
+                fieldKey={index}
+                fieldType='Dashboard Filter'
+                controls={openControls}
+                deleteField={() => {
+                  overlay?.actions.openOverlay(
+                    <DeleteFilterModal
+                      removeFilterCompletely={removeFilter}
+                      removeFilterFromViz={index => {
+                        updateConfig({ ...vizConfig, sharedFilterIndexes: vizConfig.sharedFilterIndexes.filter(i => i !== index) })
+                      }}
+                      filterIndex={index}
+                    />
+                  )
+                }}
+              >
+                <FilterEditor
+                  filter={filter}
+                  updateFilterProp={(name, value) => {
+                    updateFilterProp(name, index, value)
+                  }}
+                  config={config}
+                />
+              </FieldSetWrapper>
+            )
+          })}
+          <button onClick={addNewFilter} className='btn btn-primary full-width'>
+            Add Filter
+          </button>
+          {canAddExisting ? (
+            <label>
+              <span className='edit-label column-heading'>
+                Select Existing Dashboard Filter
+                <Tooltip style={{ textTransform: 'none' }}>
+                  <Tooltip.Target>
+                    <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                  </Tooltip.Target>
+                  <Tooltip.Content>
+                    <p>This feature is indentended to support legacy functionality. Be advised that any change to the filter in this editor will reflect on the whole dashboard. </p>
+                  </Tooltip.Content>
+                </Tooltip>
+              </span>
+              <select
+                value={''}
+                onChange={e => {
+                  updateConfig({ ...vizConfig, sharedFilterIndexes: [...vizConfig.sharedFilterIndexes, e.target.value] })
+                  setCanAddExisting(false)
+                }}
+              >
+                {[
+                  <option key='select' value=''>
+                    Select
+                  </option>,
+                  ...existingOptions
+                ]}
+              </select>
+            </label>
+          ) : (
+            <button onClick={() => setCanAddExisting(true)} className='btn btn-primary full-width'>
+              Add Existing Dashboard Filter
+            </button>
+          )}
+        </AccordionItemPanel>
+      </AccordionItem>
+    </Accordion>
+  )
+}
+
+export default DashboardFiltersEditor

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

@@ -0,0 +1,48 @@
+import { useGlobalContext } from '@cdc/core/components/GlobalContext'
+import Modal from '@cdc/core/components/ui/Modal'
+import { DashboardContext } from '../../../../DashboardContext'
+import { useContext } from 'react'
+import { DashboardFilters } from '../../../../types/DashboardFilters'
+
+type DeleteFilterProps = {
+  removeFilterCompletely: (number) => void
+  removeFilterFromViz: (number) => void
+  filterIndex: number
+}
+
+const DeleteFilterModal: React.FC<DeleteFilterProps> = ({ removeFilterCompletely, removeFilterFromViz, filterIndex }) => {
+  const { overlay } = useGlobalContext()
+  const { config } = useContext(DashboardContext)
+  const filterUsedByMany = Object.values(config.visualizations).filter(viz => (viz as DashboardFilters).sharedFilterIndexes?.map(Number).includes(Number(filterIndex))).length > 1
+
+  const message = filterUsedByMany ? 'This filter is used by multiple visualizations. You can either delete the filter from this visualization only or you can delete the filter completely, which will also remove it from other visualizations.' : 'Are you sure you want to delete this filter?'
+  return (
+    <Modal showClose={true}>
+      <Modal.Content>
+        <p>{message}</p>
+        {filterUsedByMany && (
+          <button
+            className='btn btn-warning'
+            onClick={() => {
+              removeFilterFromViz(filterIndex)
+              overlay?.actions.toggleOverlay()
+            }}
+          >
+            Delete from Visualization
+          </button>
+        )}
+        <button
+          className='btn btn-danger'
+          onClick={() => {
+            removeFilterCompletely(filterIndex)
+            overlay?.actions.toggleOverlay()
+          }}
+        >
+          Delete{filterUsedByMany ? ' Completely' : ''}
+        </button>
+      </Modal.Content>
+    </Modal>
+  )
+}
+
+export default DeleteFilterModal