@cdc/dashboard 4.24.5 → 4.24.9

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/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,102 @@
+import MultiSelect from '@cdc/core/components/MultiSelect'
+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: 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 (
+    <>
+      {sharedFilters.map((filter, filterIndex) => {
+        if (filter.showDropdown === false || (show && !show.includes(filterIndex))) return <></>
+        const values: JSX.Element[] = []
+        const multiValues = []
+        if (filter.resetLabel) {
+          values.push(
+            <option key={`${filter.resetLabel}-option`} value={filter.resetLabel}>
+              {filter.resetLabel}
+            </option>
+          )
+        }
+        const _key = filter.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>
+            )
+            multiValues.push({ value, label: text })
+          })
+        } else {
+          // Data Filter
+          filter.values?.forEach((filterOption, index) => {
+            const labeledOpt = filter.labels && filter.labels[filterOption]
+            values.push(
+              <option key={`${filter.key}-option-${index}`} value={filterOption}>
+                {labeledOpt || filterOption}
+              </option>
+            )
+            multiValues.push({ value: filterOption, label: labeledOpt || filterOption })
+          })
+        }
+
+        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}`}>{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>
+        )
+      })}
+    </>
+  )
+}
+
+export default DashboardFilters