@cdc/dashboard 4.24.7 → 4.24.9-1

package/src/_stories/_mock/single-state-dashboard-filters.json

@@ -0,0 +1,390 @@
+{
+  "dashboard": {
+    "theme": "theme-blue",
+    "sharedFilters": [
+      {
+        "key": "New Dashboard Filter 1",
+        "showDropdown": true,
+        "values": [
+          "Florida",
+          "California"
+        ],
+        "type": "datafilter",
+        "columnName": "State",
+        "tier": 1,
+        "usedBy": [
+          "map1721943918271"
+        ]
+      }
+    ]
+  },
+  "rows": [
+    {
+      "columns": [
+        {
+          "width": 12,
+          "widget": "dashboardFilters1721943964161"
+        }
+      ],
+      "uuid": 1721943975299
+    },
+    {
+      "uuid": 1721943975299,
+      "columns": [
+        {
+          "width": 12,
+          "widget": "map1721943918271"
+        },
+        {},
+        {}
+      ]
+    }
+  ],
+  "visualizations": {
+    "map1721943918271": {
+      "annotations": [],
+      "general": {
+        "geoType": "single-state",
+        "annotationDropdownText": "Annotations",
+        "geoBorderColor": "darkGray",
+        "headerColor": "theme-blue",
+        "title": "",
+        "showTitle": true,
+        "showSidebar": true,
+        "showDownloadButton": true,
+        "showDownloadMediaButton": false,
+        "displayAsHex": false,
+        "displayStateLabels": false,
+        "territoriesLabel": "Territories",
+        "territoriesAlwaysShow": false,
+        "language": "en",
+        "geoLabelOverride": "",
+        "hasRegions": false,
+        "fullBorder": false,
+        "type": "data",
+        "convertFipsCodes": true,
+        "palette": {
+          "isReversed": false
+        },
+        "allowMapZoom": true,
+        "hideGeoColumnInTooltip": false,
+        "hidePrimaryColumnInTooltip": false,
+        "expandDataTable": false,
+        "filterControlsStatePicked": "State",
+        "statePicked": {
+          "fipsCode": "01",
+          "stateName": "Alabama"
+        }
+      },
+      "type": "map",
+      "color": "pinkpurple",
+      "columns": {
+        "geo": {
+          "name": "FIPS Codes",
+          "label": "Location",
+          "tooltip": false,
+          "dataTable": true
+        },
+        "primary": {
+          "dataTable": true,
+          "tooltip": true,
+          "prefix": "",
+          "suffix": "",
+          "name": "Insured Rate",
+          "label": "",
+          "roundToPlace": 0
+        },
+        "navigate": {
+          "name": ""
+        },
+        "latitude": {
+          "name": "Latitude"
+        },
+        "longitude": {
+          "name": "Longitude"
+        }
+      },
+      "legend": {
+        "descriptions": {},
+        "specialClasses": [],
+        "unified": false,
+        "singleColumn": false,
+        "singleRow": false,
+        "verticalSorted": false,
+        "showSpecialClassesLast": false,
+        "dynamicDescription": false,
+        "type": "equalnumber",
+        "numberOfItems": 3,
+        "position": "side",
+        "title": "Legend"
+      },
+      "filters": [],
+      "table": {
+        "wrapColumns": false,
+        "label": "Data Table",
+        "expanded": false,
+        "limitHeight": false,
+        "height": "",
+        "caption": "",
+        "showDownloadUrl": false,
+        "showDataTableLink": true,
+        "showFullGeoNameInCSV": false,
+        "forceDisplay": true,
+        "download": true,
+        "indexLabel": ""
+      },
+      "tooltips": {
+        "appearanceType": "hover",
+        "linkLabel": "Learn More",
+        "capitalizeLabels": true,
+        "opacity": 90
+      },
+      "visual": {
+        "minBubbleSize": 1,
+        "maxBubbleSize": 20,
+        "extraBubbleBorder": false,
+        "cityStyle": "circle",
+        "cityStyleLabel": "",
+        "showBubbleZeros": false,
+        "additionalCityStyles": [],
+        "geoCodeCircleSize": "2"
+      },
+      "mapPosition": {
+        "coordinates": [
+          0,
+          30
+        ],
+        "zoom": 1
+      },
+      "map": {
+        "layers": [],
+        "patterns": []
+      },
+      "hexMap": {
+        "type": "",
+        "shapeGroups": [
+          {
+            "legendTitle": "",
+            "legendDescription": "",
+            "items": [
+              {
+                "key": "",
+                "shape": "Arrow Up",
+                "column": "",
+                "operator": "=",
+                "value": ""
+              }
+            ]
+          }
+        ]
+      },
+      "filterBehavior": "Filter Change",
+      "openModal": true,
+      "uid": "map1721943918271",
+      "dataDescription": {
+        "horizontal": false,
+        "series": false
+      },
+      "dataKey": "test-single-county-file.json",
+      "editing": false,
+      "originalFormattedData": [
+        {
+          "Insured Rate": 8,
+          "Coverage Status": "Insured",
+          "FIPS Codes": "12057",
+          "Year (Good filter option)": "2010",
+          "link": "",
+          "Latitude": "",
+          "Longitude": "",
+          "State": "Florida"
+        },
+        {
+          "Insured Rate": 25,
+          "Coverage Status": "Insured",
+          "FIPS Codes": "55005",
+          "Year (Good filter option)": "2010",
+          "link": "",
+          "Latitude": "",
+          "Longitude": "",
+          "State": "California"
+        },
+        {
+          "Insured Rate": 25,
+          "Coverage Status": "Insured",
+          "FIPS Codes": "12103",
+          "Year (Good filter option)": "2010",
+          "link": "",
+          "Latitude": "",
+          "Longitude": "",
+          "State": "Florida"
+        },
+        {
+          "Insured Rate": 25,
+          "Coverage Status": "Insured",
+          "FIPS Codes": "32005",
+          "Year (Good filter option)": "2010",
+          "link": "",
+          "Latitude": "",
+          "Longitude": "",
+          "State": "California"
+        },
+        {
+          "Insured Rate": 18,
+          "Coverage Status": "Insured",
+          "FIPS Codes": "06075",
+          "Year (Good filter option)": "2010",
+          "link": "",
+          "Latitude": "",
+          "Longitude": "",
+          "State": "California"
+        },
+        {
+          "Insured Rate": 3,
+          "Coverage Status": "Insured",
+          "FIPS Codes": "06027",
+          "Year (Good filter option)": "2010",
+          "link": "",
+          "Latitude": "",
+          "Longitude": "",
+          "State": "California"
+        },
+        {
+          "Insured Rate": 25,
+          "Coverage Status": "Insured",
+          "FIPS Codes": "06029",
+          "Year (Good filter option)": "2010",
+          "link": "",
+          "Latitude": "",
+          "Longitude": "",
+          "State": "California"
+        },
+        {
+          "Insured Rate": 60,
+          "Coverage Status": "Insured",
+          "FIPS Codes": "Yosemite",
+          "Year (Good filter option)": "2010",
+          "link": "",
+          "Latitude": "37.865101",
+          "Longitude": "-119.538330",
+          "State": "California"
+        }
+      ],
+      "version": "4.24.9"
+    },
+    "dashboardFilters1721943964161": {
+      "filters": [],
+      "filterBehavior": "Filter Change",
+      "newViz": true,
+      "openModal": true,
+      "uid": "dashboardFilters1721943964161",
+      "type": "dashboardFilters",
+      "sharedFilterIndexes": [
+        0
+      ],
+      "visualizationType": "dashboardFilters",
+      "editing": false
+    }
+  },
+  "table": {
+    "label": "Data Table",
+    "show": true,
+    "showDownloadUrl": false,
+    "showVertical": true
+  },
+  "newViz": true,
+  "datasets": {
+    "test-single-county-file.json": {
+      "data": [
+        {
+          "Insured Rate": 8,
+          "Coverage Status": "Insured",
+          "FIPS Codes": "12057",
+          "Year (Good filter option)": "2010",
+          "link": "",
+          "Latitude": "",
+          "Longitude": "",
+          "State": "Florida"
+        },
+        {
+          "Insured Rate": 25,
+          "Coverage Status": "Insured",
+          "FIPS Codes": "55005",
+          "Year (Good filter option)": "2010",
+          "link": "",
+          "Latitude": "",
+          "Longitude": "",
+          "State": "California"
+        },
+        {
+          "Insured Rate": 25,
+          "Coverage Status": "Insured",
+          "FIPS Codes": "12103",
+          "Year (Good filter option)": "2010",
+          "link": "",
+          "Latitude": "",
+          "Longitude": "",
+          "State": "Florida"
+        },
+        {
+          "Insured Rate": 25,
+          "Coverage Status": "Insured",
+          "FIPS Codes": "32005",
+          "Year (Good filter option)": "2010",
+          "link": "",
+          "Latitude": "",
+          "Longitude": "",
+          "State": "California"
+        },
+        {
+          "Insured Rate": 18,
+          "Coverage Status": "Insured",
+          "FIPS Codes": "06075",
+          "Year (Good filter option)": "2010",
+          "link": "",
+          "Latitude": "",
+          "Longitude": "",
+          "State": "California"
+        },
+        {
+          "Insured Rate": 3,
+          "Coverage Status": "Insured",
+          "FIPS Codes": "06027",
+          "Year (Good filter option)": "2010",
+          "link": "",
+          "Latitude": "",
+          "Longitude": "",
+          "State": "California"
+        },
+        {
+          "Insured Rate": 25,
+          "Coverage Status": "Insured",
+          "FIPS Codes": "06029",
+          "Year (Good filter option)": "2010",
+          "link": "",
+          "Latitude": "",
+          "Longitude": "",
+          "State": "California"
+        },
+        {
+          "Insured Rate": 60,
+          "Coverage Status": "Insured",
+          "FIPS Codes": "Yosemite",
+          "Year (Good filter option)": "2010",
+          "link": "",
+          "Latitude": "37.865101",
+          "Longitude": "-119.538330",
+          "State": "California"
+        }
+      ],
+      "dataFileSize": 1764,
+      "dataFileName": "test-single-county-file.json",
+      "dataFileSourceType": "file",
+      "dataFileFormat": "JSON",
+      "preview": true
+    }
+  },
+  "type": "dashboard",
+  "runtime": {},
+  "version": "4.24.9",
+  "uuid": 1721943961122
+}

package/src/components/DashboardFilters/DashboardFilters.tsx

@@ -1,3 +1,4 @@
+import MultiSelect from '@cdc/core/components/MultiSelect'
 import { SharedFilter } from '../../types/SharedFilter'
 import { APIFilterDropdowns } from './DashboardFiltersWrapper'
 
@@ -8,25 +9,35 @@ type DashboardFilterProps = {
   handleOnChange: Function
 }
 
-const DashboardFilters: React.FC<DashboardFilterProps> = ({ show, filters, apiFilterDropdowns, handleOnChange }) => {
-  const nullVal = (singleFilter: SharedFilter) => {
-    const val = singleFilter.queuedActive || singleFilter.active
+const DashboardFilters: React.FC<DashboardFilterProps> = ({
+  show,
+  filters: sharedFilters,
+  apiFilterDropdowns,
+  handleOnChange
+}) => {
+  const nullVal = (filter: SharedFilter) => {
+    const val = filter.queuedActive || filter.active
     return val === null || val === undefined || val === ''
   }
+
+  const updateField = (_section, _subsection, fieldName, value) => {
+    handleOnChange(fieldName, value)
+  }
+
   return (
     <>
-      {filters.map((singleFilter, filterIndex) => {
-        if ((singleFilter.type !== 'urlfilter' && !singleFilter.showDropdown) || (show && !show.includes(filterIndex))) return <></>
+      {sharedFilters.map((filter, filterIndex) => {
+        if (filter.showDropdown === false || (show && !show.includes(filterIndex))) return <></>
         const values: JSX.Element[] = []
         const multiValues = []
-        if (singleFilter.resetLabel) {
+        if (filter.resetLabel) {
           values.push(
-            <option key={`${singleFilter.resetLabel}-option`} value={singleFilter.resetLabel}>
-              {singleFilter.resetLabel}
+            <option key={`${filter.resetLabel}-option`} value={filter.resetLabel}>
+              {filter.resetLabel}
             </option>
           )
         }
-        const _key = singleFilter.apiFilter?.apiEndpoint
+        const _key = filter.apiFilter?.apiEndpoint
         if (_key && apiFilterDropdowns[_key]) {
           // URL Filter
           apiFilterDropdowns[_key].forEach(({ text, value }, index) => {
@@ -35,13 +46,14 @@ const DashboardFilters: React.FC<DashboardFilterProps> = ({ show, filters, apiFi
                 {text}
               </option>
             )
+            multiValues.push({ value, label: text })
           })
         } else {
           // Data Filter
-          singleFilter.values?.forEach((filterOption, index) => {
-            const labeledOpt = singleFilter.labels && singleFilter.labels[filterOption]
+          filter.values?.forEach((filterOption, index) => {
+            const labeledOpt = filter.labels && filter.labels[filterOption]
             values.push(
-              <option key={`${singleFilter.key}-option-${index}`} value={filterOption}>
+              <option key={`${filter.key}-option-${index}`} value={filterOption}>
                 {labeledOpt || filterOption}
               </option>
             )
@@ -49,20 +61,30 @@ const DashboardFilters: React.FC<DashboardFilterProps> = ({ show, filters, apiFi
           })
         }
 
-        return (
-          <div className='cove-dashboard-filters' key={`${singleFilter.key}-filtersection-${filterIndex}`}>
+        return filter.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='cove-dashboard-filters' key={`${filter.key}-filtersection-${filterIndex}`}>
             <section className='dashboard-filters-section'>
-              <label htmlFor={`filter-${filterIndex}`}>{singleFilter.key}</label>
+              <label htmlFor={`filter-${filterIndex}`}>{filter.key}</label>
               <select
                 id={`filter-${filterIndex}`}
                 className='filter-select'
                 data-index='0'
-                value={singleFilter.queuedActive || singleFilter.active}
+                value={filter.queuedActive || filter.active}
                 onChange={val => {
                   handleOnChange(filterIndex, val.target.value)
                 }}
               >
-                {nullVal(singleFilter) && !singleFilter.resetLabel && (
+                {nullVal(filter) && !filter.resetLabel && (
                   <option value='' key='select'>
                     {'-Select-'}
                   </option>

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

@@ -10,9 +10,9 @@ import { DashboardContext, DashboardDispatchContext } from '../../../DashboardCo
 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'
+import { addValuesToDashboardFilters } from '../../../helpers/addValuesToDashboardFilters'
 
 type DashboardFitlersEditorProps = {
   vizConfig: DashboardFilters
@@ -47,7 +47,7 @@ const DashboardFiltersEditor: React.FC<DashboardFitlersEditorProps> = ({ vizConf
     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)
+      const sharedFiltersWithValues = addValuesToDashboardFilters(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.