@cdc/dashboard 4.25.11 → 4.26.2

package/src/_stories/_mock/tp5-test.json

@@ -0,0 +1,267 @@
+{
+  "type": "dashboard",
+  "title": "TP5 Alignment Test Dashboard",
+  "description": "Testing alignment of TP5 Waffles, Data Bites, and Gauges",
+  "data": [
+    {
+      "Category": "Adults",
+      "Vaccination Rate": "68.5",
+      "Insured Rate": "87.2",
+      "Screening Rate": "72.8"
+    },
+    {
+      "Category": "Seniors",
+      "Vaccination Rate": "82.3",
+      "Insured Rate": "95.1",
+      "Screening Rate": "84.6"
+    },
+    {
+      "Category": "Youth",
+      "Vaccination Rate": "54.2",
+      "Insured Rate": "92.4",
+      "Screening Rate": "65.3"
+    }
+  ],
+  "dashboard": {
+    "filters": []
+  },
+  "rows": [
+    [
+      { "width": 4, "widget": "waffle1" },
+      { "width": 4, "widget": "waffle2" },
+      { "width": 4, "widget": "waffle3" }
+    ],
+    [
+      { "width": 4, "widget": "bite1" },
+      { "width": 4, "widget": "bite2" },
+      { "width": 4, "widget": "bite3" }
+    ],
+    [
+      { "width": 4, "widget": "gauge1" },
+      { "width": 4, "widget": "gauge2" },
+      { "width": 4, "widget": "gauge3" }
+    ]
+  ],
+  "visualizations": {
+    "waffle1": {
+      "uid": "waffle1",
+      "type": "waffle-chart",
+      "title": "Vaccination Coverage",
+      "visualizationType": "TP5 Waffle",
+      "visualizationSubType": "linear",
+      "showPercent": true,
+      "showDenominator": false,
+      "valueDescription": "",
+      "content": "of the population is vaccinated against seasonal flu",
+      "subtext": "Based on 2024 CDC surveillance data across all age groups",
+      "dataColumn": "Vaccination Rate",
+      "dataFunction": "Mean (Average)",
+      "customDenom": false,
+      "dataDenom": "100",
+      "suffix": "%",
+      "roundToPlace": "1",
+      "theme": "theme-blue",
+      "shape": "square",
+      "visual": {
+        "whiteBackground": false
+      },
+      "showTitle": true,
+      "overallFontSize": "medium"
+    },
+    "waffle2": {
+      "uid": "waffle2",
+      "type": "waffle-chart",
+      "title": "Health Insurance Coverage Rate",
+      "visualizationType": "TP5 Waffle",
+      "visualizationSubType": "linear",
+      "showPercent": true,
+      "showDenominator": false,
+      "valueDescription": "",
+      "content": "completed recommended cancer screenings including mammography, colonoscopy, and cervical cancer screening",
+      "subtext": "",
+      "dataColumn": "Insured Rate",
+      "dataFunction": "Mean (Average)",
+      "customDenom": false,
+      "dataDenom": "100",
+      "suffix": "%",
+      "roundToPlace": "1",
+      "theme": "theme-teal",
+      "shape": "person",
+      "visual": {
+        "whiteBackground": false
+      },
+      "showTitle": true,
+      "overallFontSize": "medium"
+    },
+    "waffle3": {
+      "uid": "waffle3",
+      "type": "waffle-chart",
+      "title": "Cancer Screening Completion",
+      "visualizationType": "TP5 Waffle",
+      "visualizationSubType": "linear",
+      "showPercent": true,
+      "showDenominator": false,
+      "valueDescription": "",
+      "content": "completed recommended cancer screenings including mammography, colonoscopy, and cervical cancer screening",
+      "subtext": "Data from National Health Interview Survey 2024",
+      "dataColumn": "Screening Rate",
+      "dataFunction": "Mean (Average)",
+      "customDenom": false,
+      "dataDenom": "100",
+      "suffix": "%",
+      "roundToPlace": "1",
+      "theme": "theme-purple",
+      "shape": "circle",
+      "visual": {
+        "whiteBackground": false
+      },
+      "showTitle": true,
+      "overallFontSize": "medium"
+    },
+    "gauge1": {
+      "uid": "gauge1",
+      "type": "waffle-chart",
+      "title": "Vaccination Coverage",
+      "visualizationType": "TP5 Gauge",
+      "visualizationSubType": "linear",
+      "showPercent": true,
+      "showDenominator": false,
+      "valueDescription": "",
+      "content": "of the population is vaccinated against seasonal flu",
+      "subtext": "Based on 2024 CDC surveillance data across all age groups",
+      "dataColumn": "Vaccination Rate",
+      "dataFunction": "Mean (Average)",
+      "customDenom": false,
+      "dataDenom": "100",
+      "suffix": "%",
+      "roundToPlace": "1",
+      "theme": "theme-blue",
+      "gauge": {
+        "height": 35,
+        "width": "100%"
+      },
+      "visual": {
+        "whiteBackground": false
+      },
+      "showTitle": true,
+      "overallFontSize": "medium"
+    },
+    "gauge2": {
+      "uid": "gauge2",
+      "type": "waffle-chart",
+      "title": "Health Insurance Coverage Rate",
+      "visualizationType": "TP5 Gauge",
+      "visualizationSubType": "linear",
+      "showPercent": true,
+      "showDenominator": false,
+      "valueDescription": "",
+      "content": "",
+      "subtext": "",
+      "dataColumn": "Insured Rate",
+      "dataFunction": "Mean (Average)",
+      "customDenom": false,
+      "dataDenom": "100",
+      "suffix": "%",
+      "roundToPlace": "1",
+      "theme": "theme-teal",
+      "gauge": {
+        "height": 35,
+        "width": "100%"
+      },
+      "visual": {
+        "whiteBackground": false
+      },
+      "showTitle": true,
+      "overallFontSize": "medium"
+    },
+    "gauge3": {
+      "uid": "gauge3",
+      "type": "waffle-chart",
+      "title": "Cancer Screening Completion",
+      "visualizationType": "TP5 Gauge",
+      "visualizationSubType": "linear",
+      "showPercent": true,
+      "showDenominator": false,
+      "valueDescription": "",
+      "content": "completed recommended cancer screenings including mammography, colonoscopy, and cervical cancer screening",
+      "subtext": "Data from National Health Interview Survey 2024",
+      "dataColumn": "Screening Rate",
+      "dataFunction": "Mean (Average)",
+      "customDenom": false,
+      "dataDenom": "100",
+      "suffix": "%",
+      "roundToPlace": "1",
+      "theme": "theme-purple",
+      "gauge": {
+        "height": 35,
+        "width": "100%"
+      },
+      "visual": {
+        "whiteBackground": false
+      },
+      "showTitle": true,
+      "overallFontSize": "medium"
+    },
+    "bite1": {
+      "uid": "bite1",
+      "type": "data-bite",
+      "title": "Vaccination Coverage",
+      "biteStyle": "tp5",
+      "dataColumn": "Vaccination Rate",
+      "dataFunction": "Mean (Average)",
+      "biteBody": "of the population is vaccinated against seasonal flu",
+      "subtext": "Based on 2024 CDC surveillance data across all age groups",
+      "dataFormat": {
+        "roundToPlace": 1,
+        "commas": true,
+        "prefix": "",
+        "suffix": "%"
+      },
+      "theme": "theme-blue",
+      "visual": {
+        "hideBackgroundColor": false
+      }
+    },
+    "bite2": {
+      "uid": "bite2",
+      "type": "data-bite",
+      "title": "Health Insurance Coverage Rate",
+      "biteStyle": "tp5",
+      "dataColumn": "Insured Rate",
+      "dataFunction": "Mean (Average)",
+      "biteBody": "",
+      "subtext": "",
+      "dataFormat": {
+        "roundToPlace": 1,
+        "commas": true,
+        "prefix": "",
+        "suffix": "%"
+      },
+      "theme": "theme-teal",
+      "visual": {
+        "hideBackgroundColor": false
+      }
+    },
+    "bite3": {
+      "uid": "bite3",
+      "type": "data-bite",
+      "title": "Cancer Screening Completion",
+      "biteStyle": "tp5",
+      "dataColumn": "Screening Rate",
+      "dataFunction": "Mean (Average)",
+      "biteBody": "completed recommended cancer screenings including mammography, colonoscopy, and cervical cancer screening",
+      "subtext": "Data from National Health Interview Survey 2024",
+      "dataFormat": {
+        "roundToPlace": 1,
+        "commas": true,
+        "prefix": "",
+        "suffix": "%"
+      },
+      "theme": "theme-purple",
+      "visual": {
+        "hideBackgroundColor": false
+      }
+    }
+  }
+}
+

package/src/components/DashboardFilters/DashboardFilters.tsx

@@ -1,10 +1,12 @@
 import React from 'react'
 import MultiSelect from '@cdc/core/components/MultiSelect'
+import ComboBox from '@cdc/core/components/ComboBox'
 import { SharedFilter } from '../../types/SharedFilter'
 import { APIFilterDropdowns, DropdownOptions } from './DashboardFiltersWrapper'
 import { FILTER_STYLE } from '../../types/FilterStyles'
 import { NestedOptions, ValueTextPair } from '@cdc/core/components/NestedDropdown/nestedDropdownHelpers'
 import NestedDropdown from '@cdc/core/components/NestedDropdown'
+import { getNestedOptions } from '@cdc/core/components/Filters/helpers/getNestedOptions'
 import { MouseEventHandler } from 'react'
 import Loader from '@cdc/core/components/Loader'
 import _ from 'lodash'
@@ -56,14 +58,12 @@ const DashboardFilters: React.FC<DashboardFilterProps> = ({
 
   return (
     <form className='d-flex flex-wrap'>
-      {sharedFilters.map((filter, filterIndex) => {
+      {show.map(filterIndex => {
+        const filter = sharedFilters[filterIndex]
         const urlFilterType = filter.type === 'urlfilter'
         const label = stripDuplicateLabelIncrement(filter.key || '')
 
-        if (
-          (!urlFilterType && !filter.showDropdown && filter.filterStyle !== FILTER_STYLE.nestedDropdown) ||
-          (show && !show.includes(filterIndex))
-        )
+        if (!urlFilterType && !filter.showDropdown && filter.filterStyle !== FILTER_STYLE.nestedDropdown)
           return <React.Fragment key={`${filter.key}-filtersection-${filterIndex}-option`} />
         const values: JSX.Element[] = []
 
@@ -71,12 +71,11 @@ const DashboardFilters: React.FC<DashboardFilterProps> = ({
         const loading = apiFilterDropdowns[_key] === null
 
         const multiValues: { value; label }[] = []
-        const nestedOptions: NestedOptions = Object.entries(filter?.subGrouping?.valuesLookup || {}).map(
-          ([key, data]) => [
-            [key, key], // Main option: [value, text]
-            Array.isArray(data?.values) ? data.values.map(value => [value, value]) : [] // Ensure `values` is an array
-          ]
-        )
+        const nestedOptions: NestedOptions = getNestedOptions({
+          orderedValues: filter.orderedValues,
+          values: filter.values,
+          subGrouping: filter.subGrouping
+        })
 
         if (_key && apiFilterDropdowns[_key]) {
           // URL Filter
@@ -154,6 +153,16 @@ const DashboardFilters: React.FC<DashboardFilterProps> = ({
                 handleSelectedItems={value => updateField(null, null, filterIndex, value)}
                 loading={loading}
               />
+            ) : filter.filterStyle === FILTER_STYLE.combobox ? (
+              <ComboBox
+                options={multiValues}
+                fieldName={filterIndex}
+                updateField={updateField}
+                selected={(filter.queuedActive || filter.active) as string}
+                label={label}
+                loading={loading}
+                placeholder={filter.resetLabel || '- Select -'}
+              />
             ) : (
               <>
                 <select

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

@@ -21,6 +21,7 @@ import { addValuesToDashboardFilters } from '../../../helpers/addValuesToDashboa
 import { FILTER_STYLE } from '../../../types/FilterStyles'
 import { handleSorting } from '@cdc/core/components/Filters'
 import { removeDashboardFilter } from '../../../helpers/removeDashboardFilter'
+import { DragDropContext, Droppable, Draggable, DropResult } from '@hello-pangea/dnd'
 
 type DashboardFitlersEditorProps = {
   vizConfig: DashboardFilters
@@ -51,6 +52,7 @@ const DashboardFiltersEditor: React.FC<DashboardFitlersEditorProps> = ({ vizConf
 
   const openControls = useState({})
   const [canAddExisting, setCanAddExisting] = useState(false)
+  const [isNestedDragHovered, setIsNestedDragHovered] = useState(false)
 
   const updateFilterProp = (prop: string, index: number, value) => {
     const newSharedFilters = _.cloneDeep(sharedFilters)
@@ -71,6 +73,7 @@ const DashboardFiltersEditor: React.FC<DashboardFitlersEditorProps> = ({ vizConf
     newSharedFilters[index][prop] = value
     if (prop === 'columnName') {
       if (newSharedFilters[index].subGrouping) delete newSharedFilters[index].subGrouping
+      newSharedFilters[index].defaultValue = ''
       // changing a data column and want to load the data into the preview options
       const sharedFiltersWithValues = addValuesToDashboardFilters(newSharedFilters, data)
       dispatch({ type: 'SET_SHARED_FILTERS', payload: sharedFiltersWithValues })
@@ -122,6 +125,29 @@ const DashboardFiltersEditor: React.FC<DashboardFitlersEditorProps> = ({ vizConf
     dispatch({ type: 'SET_CONFIG', payload: { dashboard, visualizations: newVisualizations } })
   }
 
+  const handleFilterReorder = (result: DropResult) => {
+    const { source, destination } = result
+    if (!destination || source.index === destination.index) return
+
+    const newIndexes = [...vizConfig.sharedFilterIndexes]
+    const [movedIndex] = newIndexes.splice(source.index, 1)
+    newIndexes.splice(destination.index, 0, movedIndex)
+
+    updateConfig({
+      ...vizConfig,
+      sharedFilterIndexes: newIndexes
+    })
+  }
+
+  const getItemStyle = (isDragging, draggableStyle) => ({
+    ...draggableStyle,
+    ...(isDragging && sortableItemStyles)
+  })
+
+  const sortableItemStyles = {
+    background: 'rgba(0, 0, 0, 0.1)'
+  }
+
   const addNewFilter = () => {
     const _sharedFilters = _.cloneDeep(sharedFilters) || []
     const columnName = 'New Dashboard Filter ' + (_sharedFilters.length + 1)
@@ -219,44 +245,72 @@ const DashboardFiltersEditor: React.FC<DashboardFitlersEditorProps> = ({ vizConf
           <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}
-                  filterIndex={index}
-                  updateFilterProp={(name, value) => {
-                    updateFilterProp(name, index, value)
-                  }}
-                  toggleNestedQueryParameters={checked => {
-                    toggleNestedQueryParameters(index, checked)
-                  }}
-                  config={config}
-                />
-              </FieldSetWrapper>
-            )
-          })}
+          <DragDropContext onDragEnd={handleFilterReorder}>
+            <Droppable droppableId='dashboard_filters_list'>
+              {provided => (
+                <ul {...provided.droppableProps} ref={provided.innerRef} className='draggable-field-list'>
+                  {vizConfig.sharedFilterIndexes.map((index, filterIndex) => {
+                    const filter = sharedFilters[index]
+                    return (
+                      <Draggable
+                        key={filter.key + index}
+                        draggableId={`filter-${filter.key}-${index}`}
+                        index={filterIndex}
+                        isDragDisabled={isNestedDragHovered}
+                      >
+                        {(provided, snapshot) => (
+                          <div
+                            ref={provided.innerRef}
+                            {...provided.draggableProps}
+                            {...provided.dragHandleProps}
+                            style={getItemStyle(snapshot.isDragging, provided.draggableProps.style)}
+                            className={snapshot.isDragging ? 'currently-dragging' : ''}
+                          >
+                            <FieldSetWrapper
+                              key={filter.key + index}
+                              fieldName={filter.key}
+                              fieldKey={index}
+                              fieldType='Dashboard Filter'
+                              controls={openControls}
+                              draggable={true}
+                              deleteField={() => {
+                                overlay?.actions.openOverlay(
+                                  <DeleteFilterModal
+                                    removeFilterCompletely={removeFilter}
+                                    removeFilterFromViz={index => {
+                                      updateConfig({
+                                        ...vizConfig,
+                                        sharedFilterIndexes: vizConfig.sharedFilterIndexes.filter(i => i !== index)
+                                      })
+                                    }}
+                                    filterIndex={index}
+                                  />
+                                )
+                              }}
+                            >
+                              <FilterEditor
+                                filter={filter}
+                                filterIndex={index}
+                                updateFilterProp={(name, value) => {
+                                  updateFilterProp(name, index, value)
+                                }}
+                                toggleNestedQueryParameters={checked => {
+                                  toggleNestedQueryParameters(index, checked)
+                                }}
+                                config={config}
+                                onNestedDragAreaHover={setIsNestedDragHovered}
+                              />
+                            </FieldSetWrapper>
+                          </div>
+                        )}
+                      </Draggable>
+                    )
+                  })}
+                  {provided.placeholder}
+                </ul>
+              )}
+            </Droppable>
+          </DragDropContext>
           <button onClick={addNewFilter} className='btn btn-primary full-width'>
             Add Filter
           </button>

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

@@ -27,6 +27,7 @@ type FilterEditorProps = {
   filterIndex: number
   updateFilterProp: (name: keyof SharedFilter, value: any) => void
   toggleNestedQueryParameters: (checked: boolean) => void
+  onNestedDragAreaHover?: (isHovering: boolean) => void
 }
 
 const FilterEditor: React.FC<FilterEditorProps> = ({
@@ -34,7 +35,8 @@ const FilterEditor: React.FC<FilterEditorProps> = ({
   filterIndex,
   config,
   updateFilterProp,
-  toggleNestedQueryParameters
+  toggleNestedQueryParameters,
+  onNestedDragAreaHover
 }) => {
   const [columns, setColumns] = useState<string[]>([])
   const [dataFiltersLoading, setDataFiltersLoading] = useState(false)
@@ -43,7 +45,11 @@ const FilterEditor: React.FC<FilterEditorProps> = ({
   const filterStyles = Object.values(FILTER_STYLE)
 
   const parentFilters: string[] = (config.dashboard.sharedFilters || [])
-    .filter(({ key, type }) => key !== filter.key && type !== 'datafilter')
+    .filter(({ key }) => key !== filter.key)
+    .map(({ key }) => key)
+
+  const dataFilterParents: string[] = (config.dashboard.sharedFilters || [])
+    .filter(({ key }) => key !== filter.key)
     .map(({ key }) => key)
 
   const vizRowColumnLocator = getVizRowColumnLocator(config.rows)
@@ -246,21 +252,6 @@ const FilterEditor: React.FC<FilterEditorProps> = ({
             <>
               {!hasDashboardApplyBehavior(config.visualizations) && (
                 <>
-                  <Select
-                    label='URL to Filter'
-                    value={filter.datasetKey || ''}
-                    options={[
-                      { value: '', label: '- Select Option -' },
-                      ...Object.keys(config.datasets)
-                        .filter(datasetKey => config.datasets[datasetKey].dataUrl)
-                        .map(datasetKey => ({
-                          value: datasetKey,
-                          label: config.datasets[datasetKey].dataUrl
-                        }))
-                    ]}
-                    onChange={e => updateFilterProp('datasetKey', e.target.value)}
-                  />
-
                   <Select
                     label='Filter By'
                     value={filter.filterBy || ''}
@@ -271,6 +262,40 @@ const FilterEditor: React.FC<FilterEditorProps> = ({
                     ]}
                     onChange={e => updateFilterProp('filterBy', e.target.value)}
                   />
+
+                  {filter.filterBy === 'File Name' && (
+                    <Select
+                      label='URL to Filter'
+                      value={filter.datasetKey || ''}
+                      options={[
+                        { value: '', label: '- Select Option -' },
+                        ...Object.keys(config.datasets)
+                          .filter(datasetKey => config.datasets[datasetKey].dataUrl)
+                          .map(datasetKey => ({
+                            value: datasetKey,
+                            label: config.datasets[datasetKey].dataUrl
+                          }))
+                      ]}
+                      onChange={e => updateFilterProp('datasetKey', e.target.value)}
+                      tooltip={
+                        <Tooltip style={{ textTransform: 'none' }}>
+                          <Tooltip.Target>
+                            <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                          </Tooltip.Target>
+                          <Tooltip.Content>
+                            <p>Select which dataset URL's filename should be modified by this filter.</p>
+                          </Tooltip.Content>
+                        </Tooltip>
+                      }
+                    />
+                  )}
+
+                  {filter.filterBy === 'Query String' && filter.usedBy && filter.usedBy.length > 0 && (
+                    <div className='bg-info-subtle p-2 my-2' style={{ fontSize: '0.9em' }}>
+                      <Icon display='info' style={{ marginRight: '0.5rem' }} />
+                      Will apply to datasets used by selected widgets
+                    </div>
+                  )}
                   {filter.filterBy === 'File Name' && (
                     <>
                       <TextField
@@ -523,6 +548,7 @@ const FilterEditor: React.FC<FilterEditorProps> = ({
                         values.splice(index2, 0, removed)
                         updateFilterProp('orderedValues', values)
                       }}
+                      onNestedDragAreaHover={onNestedDragAreaHover}
                     />
                   )}
 
@@ -546,6 +572,7 @@ const FilterEditor: React.FC<FilterEditorProps> = ({
                     }}
                     isDashboard={true}
                     config={config}
+                    onNestedDragAreaHover={onNestedDragAreaHover}
                   />
                   <label>
                     <input
@@ -617,19 +644,18 @@ const FilterEditor: React.FC<FilterEditorProps> = ({
                 updateField={(_section, _subSection, _key, value) => updateFilterProp('resetLabel', value)}
               />
 
-              <Select
-                label='Parent Filter'
-                value={filter.parents || ''}
-                options={[
-                  { value: '', label: 'Select a filter' },
-                  ...(config.dashboard.sharedFilters || [])
-                    .filter(sharedFilter => sharedFilter.key !== filter.key)
-                    .map(sharedFilter => ({ value: sharedFilter.key, label: sharedFilter.key }))
-                ]}
-                onChange={e => {
-                  updateFilterProp('parents', e.target.value)
-                }}
-              />
+              <label>
+                <span className='edit-label column-heading mt-1'>Parent Filter(s): </span>
+                <MultiSelect
+                  label='Parent Filter(s): '
+                  options={dataFilterParents.map(key => ({ value: key, label: key }))}
+                  fieldName='parents'
+                  selected={filter.parents}
+                  updateField={(_section, _subsection, _fieldname, newItems) => {
+                    updateFilterProp('parents', newItems)
+                  }}
+                />
+              </label>
 
               {!isNestedDropdown && (
                 <TextField