@cdc/dashboard 4.25.1 → 4.25.3-6

package/src/_stories/_mock/dashboard-filter-asc.json

@@ -0,0 +1,551 @@
+{
+  "dashboard": {
+    "theme": "theme-blue",
+    "title": "Amount Filtered by Location and Type ",
+    "sharedFilters": [
+      {
+        "values": [
+          "Alaska",
+          "Alabama",
+          "Arkansas",
+          "American Samoa",
+          "Arizona"
+        ],
+        "columnName": "Location",
+        "showDropdown": true,
+        "usedBy": [
+          "data-bite1628875468150",
+          "chart1628875631849",
+          "data-bite1628876561387",
+          "data-bite1628877031319"
+        ],
+        "tier": 1,
+        "type": "datafilter",
+        "order": "asc",
+        "orderedValues": [
+          "American Samoa",
+          "Alaska",
+          "Alabama",
+          "Arizona",
+          "Arkansas"
+        ]
+      },
+      {
+        "values": [
+          "Federal",
+          "Local",
+          "State"
+        ],
+        "columnName": "Type",
+        "showDropdown": true,
+        "usedBy": [
+          "data-bite1628875468150",
+          "chart1628875631849",
+          "data-bite1628876561387",
+          "data-bite1628877031319"
+        ],
+        "tier": 1
+      }
+    ]
+  },
+  "rows": [
+    {
+      "columns": [
+        {
+          "width": 12,
+          "widget": "legacySharedFilters"
+        }
+      ]
+    },
+    {
+      "columns": [
+        {
+          "width": 6,
+          "widget": "data-bite1628875468150"
+        },
+        {
+          "width": 6,
+          "widget": "chart1628875631849"
+        },
+        {
+          "width": null
+        }
+      ]
+    },
+    {
+      "columns": [
+        {
+          "width": 6,
+          "widget": "data-bite1628877031319"
+        },
+        {
+          "width": 6,
+          "widget": "data-bite1628876561387"
+        },
+        {
+          "width": null
+        }
+      ]
+    }
+  ],
+  "visualizations": {
+    "data-bite1628875468150": {
+      "type": "data-bite",
+      "dataBite": "",
+      "dataFunction": "Mean (Average)",
+      "dataColumn": "Amount",
+      "bitePosition": "Left",
+      "biteFontSize": 24,
+      "fontSize": "medium",
+      "biteBody": "<span style=\"font-size: 20px;\">Average Amount 2019-2021</span> <br>Reflects the average of the dashboard level filter selections within the timeframe available in the data.  In this case 2019-2021. \n This number is calculated within the Data Bite module.\n",
+      "imageData": {
+        "display": "none",
+        "url": "",
+        "alt": "",
+        "options": []
+      },
+      "dataFormat": {
+        "roundToPlace": 0,
+        "commas": true,
+        "prefix": "",
+        "suffix": ""
+      },
+      "biteStyle": "graphic",
+      "filters": [],
+      "subtext": "Citation for Source ",
+      "title": "",
+      "theme": "theme-orange",
+      "shadow": true,
+      "visual": {
+        "border": false,
+        "accent": false,
+        "background": false,
+        "hideBackgroundColor": false,
+        "borderColorTheme": false
+      },
+      "general": {
+        "isCompactStyle": false
+      },
+      "imageUrl": "",
+      "prefix": "",
+      "suffix": "",
+      "uid": "data-bite1628875468150",
+      "visualizationType": "data-bite",
+      "dataKey": "dashboard_aggregate_example_no_add_fullname.csv",
+      "version": "4.25.1",
+      "migrations": {
+        "addColorMigration": true
+      }
+    },
+    "chart1628875631849": {
+      "type": "chart",
+      "title": "",
+      "theme": "theme-blue",
+      "fontSize": "large",
+      "height": "200",
+      "padding": {
+        "left": 5,
+        "right": 5
+      },
+      "yAxis": {
+        "size": "80",
+        "gridLines": false,
+        "label": "Amount",
+        "numTicks": "4"
+      },
+      "barThickness": 0.35,
+      "xAxis": {
+        "size": "0",
+        "tickRotation": 0,
+        "dataKey": "Year",
+        "label": ""
+      },
+      "table": {
+        "label": "Data Table",
+        "expanded": false,
+        "show": false
+      },
+      "legend": {
+        "behavior": "isolate",
+        "position": "right",
+        "hide": true
+      },
+      "palette": "qualitative-bold",
+      "labels": true,
+      "dataFormat": {},
+      "confidenceKeys": {},
+      "uid": "chart1628875631849",
+      "visualizationType": "Bar",
+      "series": [
+        {
+          "dataKey": "Amount",
+          "type": "Bar"
+        }
+      ],
+      "dataKey": "dashboard_aggregate_example_no_add_fullname.csv"
+    },
+    "data-bite1628876561387": {
+      "type": "data-bite",
+      "dataBite": "",
+      "dataFunction": "Max",
+      "dataColumn": "Amount",
+      "bitePosition": "Right",
+      "biteFontSize": "58",
+      "fontSize": "medium",
+      "imageUrl": "",
+      "biteBody": "<span style=\"font-size: 24px;\"> Peak Amount</span> <br>Reflects the maximum point of data within the dashboard level filter selections within the timeframe set in the data.  In this case 2019-2021. \nThis number is calculated within the Data Bite module.\n",
+      "prefix": "",
+      "suffix": "",
+      "dataFormat": {
+        "roundToPlace": 0,
+        "commas": true,
+        "prefix": "",
+        "suffix": ""
+      },
+      "biteStyle": "title",
+      "filters": [],
+      "subtext": "Source",
+      "title": "",
+      "theme": "theme-blue",
+      "shadow": true,
+      "uid": "data-bite1628876561387",
+      "visualizationType": "data-bite",
+      "dataKey": "dashboard_aggregate_example_no_add_fullname.csv"
+    },
+    "data-bite1628877031319": {
+      "type": "data-bite",
+      "dataBite": "",
+      "dataFunction": "Sum",
+      "dataColumn": "Amount",
+      "bitePosition": "Right",
+      "biteFontSize": "58",
+      "fontSize": "medium",
+      "imageUrl": "",
+      "biteBody": "<span style=\"font-size: 24px;\">State Total</span> <br>Reflects the Sum total of the dashboard level filter selections within the timeframe set in the data.  In this case 2019-2021. \n This number is calculated within the Data Bite module.\n",
+      "prefix": "",
+      "suffix": "",
+      "dataFormat": {
+        "roundToPlace": 0,
+        "commas": true,
+        "prefix": "",
+        "suffix": ""
+      },
+      "biteStyle": "title",
+      "filters": [
+        {
+          "id": 1738001923264
+        }
+      ],
+      "subtext": "Source ",
+      "title": "",
+      "theme": "theme-amber",
+      "shadow": true,
+      "uid": "data-bite1628877031319",
+      "visualizationType": "data-bite",
+      "dataKey": "dashboard_aggregate_example_no_add_fullname.csv"
+    },
+    "legacySharedFilters": {
+      "type": "dashboardFilters",
+      "visualizationType": "dashboardFilters",
+      "sharedFilterIndexes": [
+        0,
+        1
+      ],
+      "filterBehavior": "Filter Change",
+      "uid": "legacySharedFilters"
+    }
+  },
+  "table": {
+    "label": "Data Table",
+    "show": true
+  },
+  "data": [],
+  "dataFileName": "",
+  "dataFileSourceType": "",
+  "type": "dashboard",
+  "uuid": 1628875999137,
+  "runtime": {},
+  "datasets": {
+    "dashboard_aggregate_example_no_add_fullname.csv": {
+      "data": [
+        {
+          "Location": "Alaska",
+          "Year": "2019",
+          "Type": "Federal",
+          "Amount": "1377"
+        },
+        {
+          "Location": "Alaska",
+          "Year": "2019",
+          "Type": "Local",
+          "Amount": "1613"
+        },
+        {
+          "Location": "Alaska",
+          "Year": "2019",
+          "Type": "State",
+          "Amount": "1495"
+        },
+        {
+          "Location": "Alaska",
+          "Year": "2020",
+          "Type": "Federal",
+          "Amount": "1377"
+        },
+        {
+          "Location": "Alaska",
+          "Year": "2020",
+          "Type": "Local",
+          "Amount": "1613"
+        },
+        {
+          "Location": "Alaska",
+          "Year": "2020",
+          "Type": "State",
+          "Amount": "1495"
+        },
+        {
+          "Location": "Alaska",
+          "Year": "2021",
+          "Type": "Federal",
+          "Amount": "1436"
+        },
+        {
+          "Location": "Alaska",
+          "Year": "2021",
+          "Type": "Local",
+          "Amount": "1672"
+        },
+        {
+          "Location": "Alaska",
+          "Year": "2021",
+          "Type": "State",
+          "Amount": "1554"
+        },
+        {
+          "Location": "Alabama",
+          "Year": "2019",
+          "Type": "Federal",
+          "Amount": "1375"
+        },
+        {
+          "Location": "Alabama",
+          "Year": "2019",
+          "Type": "Local",
+          "Amount": "1611"
+        },
+        {
+          "Location": "Alabama",
+          "Year": "2019",
+          "Type": "State",
+          "Amount": "1493"
+        },
+        {
+          "Location": "Alabama",
+          "Year": "2020",
+          "Type": "Federal",
+          "Amount": "1375"
+        },
+        {
+          "Location": "Alabama",
+          "Year": "2020",
+          "Type": "Local",
+          "Amount": "1611"
+        },
+        {
+          "Location": "Alabama",
+          "Year": "2020",
+          "Type": "State",
+          "Amount": "1493"
+        },
+        {
+          "Location": "Alabama",
+          "Year": "2021",
+          "Type": "Federal",
+          "Amount": "1434"
+        },
+        {
+          "Location": "Alabama",
+          "Year": "2021",
+          "Type": "Local",
+          "Amount": "1670"
+        },
+        {
+          "Location": "Alabama",
+          "Year": "2021",
+          "Type": "State",
+          "Amount": "1552"
+        },
+        {
+          "Location": "Arkansas",
+          "Year": "2019",
+          "Type": "Federal",
+          "Amount": "1398"
+        },
+        {
+          "Location": "Arkansas",
+          "Year": "2019",
+          "Type": "Local",
+          "Amount": "1634"
+        },
+        {
+          "Location": "Arkansas",
+          "Year": "2019",
+          "Type": "State",
+          "Amount": "1516"
+        },
+        {
+          "Location": "Arkansas",
+          "Year": "2020",
+          "Type": "Federal",
+          "Amount": "1398"
+        },
+        {
+          "Location": "Arkansas",
+          "Year": "2020",
+          "Type": "Local",
+          "Amount": "1634"
+        },
+        {
+          "Location": "Arkansas",
+          "Year": "2020",
+          "Type": "State",
+          "Amount": "1516"
+        },
+        {
+          "Location": "Arkansas",
+          "Year": "2021",
+          "Type": "Federal",
+          "Amount": "1457"
+        },
+        {
+          "Location": "Arkansas",
+          "Year": "2021",
+          "Type": "Local",
+          "Amount": "1693"
+        },
+        {
+          "Location": "Arkansas",
+          "Year": "2021",
+          "Type": "State",
+          "Amount": "1575"
+        },
+        {
+          "Location": "American Samoa",
+          "Year": "2019",
+          "Type": "Federal",
+          "Amount": "1388"
+        },
+        {
+          "Location": "American Samoa",
+          "Year": "2019",
+          "Type": "Local",
+          "Amount": "1624"
+        },
+        {
+          "Location": "American Samoa",
+          "Year": "2019",
+          "Type": "State",
+          "Amount": "1506"
+        },
+        {
+          "Location": "American Samoa",
+          "Year": "2020",
+          "Type": "Federal",
+          "Amount": "1388"
+        },
+        {
+          "Location": "American Samoa",
+          "Year": "2020",
+          "Type": "Local",
+          "Amount": "1624"
+        },
+        {
+          "Location": "American Samoa",
+          "Year": "2020",
+          "Type": "State",
+          "Amount": "1506"
+        },
+        {
+          "Location": "American Samoa",
+          "Year": "2021",
+          "Type": "Federal",
+          "Amount": "1447"
+        },
+        {
+          "Location": "American Samoa",
+          "Year": "2021",
+          "Type": "Local",
+          "Amount": "1683"
+        },
+        {
+          "Location": "American Samoa",
+          "Year": "2021",
+          "Type": "State",
+          "Amount": "1565"
+        },
+        {
+          "Location": "Arizona",
+          "Year": "2019",
+          "Type": "Federal",
+          "Amount": "1401"
+        },
+        {
+          "Location": "Arizona",
+          "Year": "2019",
+          "Type": "Local",
+          "Amount": "1637"
+        },
+        {
+          "Location": "Arizona",
+          "Year": "2019",
+          "Type": "State",
+          "Amount": "1519"
+        },
+        {
+          "Location": "Arizona",
+          "Year": "2020",
+          "Type": "Federal",
+          "Amount": "1401"
+        },
+        {
+          "Location": "Arizona",
+          "Year": "2020",
+          "Type": "Local",
+          "Amount": "1637"
+        },
+        {
+          "Location": "Arizona",
+          "Year": "2020",
+          "Type": "State",
+          "Amount": "1519"
+        },
+        {
+          "Location": "Arizona",
+          "Year": "2021",
+          "Type": "Federal",
+          "Amount": "1460"
+        },
+        {
+          "Location": "Arizona",
+          "Year": "2021",
+          "Type": "Local",
+          "Amount": "1696"
+        },
+        {
+          "Location": "Arizona",
+          "Year": "2021",
+          "Type": "State",
+          "Amount": "1578"
+        }
+      ]
+    }
+  },
+  "dataUrl": "",
+  "dataDescription": {},
+  "formattedData": [],
+  "version": "4.25.1",
+  "migrations": {
+    "addColorMigration": true
+  }
+}

package/src/components/CollapsibleVisualizationRow.tsx

@@ -28,7 +28,7 @@ const CollapsibleVisualizationRow: React.FC<CollapsableVizRow> = ({
       <div
         style={{ fontSize: titleFontSize }}
         role='button'
-        className={`multi-visualiation-heading${isExpanded ? '' : ' collapsed'} h4`}
+        className={`multi-visualiation-heading${isExpanded ? '' : ' collapsed'} h4 my-0`}
         onClick={() => {
           setIsExpanded(!isExpanded)
         }}

package/src/components/DashboardFilters/DashboardFilters.tsx

@@ -37,6 +37,11 @@ const DashboardFilters: React.FC<DashboardFilterProps> = ({
     handleOnChange(fieldName, value) // fieldName is the sharedFilterIndex
   }
 
+  const stripDuplicateLabelIncrement = (label: string): string => {
+    // converts 'Label (1)' to 'Label'
+    return label.replace(/\s\(\d+\)$/, '')
+  }
+
   const getNestedDropdownOptions = (options?: DropdownOptions): NestedOptions => {
     if (!options) return []
     const getValueTextTuple = (value: string, text?: string): ValueTextPair => (text ? [value, text] : [value])
@@ -50,13 +55,13 @@ const DashboardFilters: React.FC<DashboardFilterProps> = ({
     <form className='d-flex flex-wrap'>
       {sharedFilters.map((filter, filterIndex) => {
         const urlFilterType = filter.type === 'urlfilter'
-        const label = filter.key
+        const label = stripDuplicateLabelIncrement(filter.key || '')
 
         if (
           (!urlFilterType && !filter.showDropdown && filter.filterStyle !== FILTER_STYLE.nestedDropdown) ||
           (show && !show.includes(filterIndex))
         )
-          return <React.Fragment key={`${label}-filtersection-${filterIndex}-option`} />
+          return <React.Fragment key={`${filter.key}-filtersection-${filterIndex}-option`} />
         const values: JSX.Element[] = []
 
         const _key = filter.apiFilter?.apiEndpoint
@@ -89,7 +94,8 @@ const DashboardFilters: React.FC<DashboardFilterProps> = ({
           }
         } else {
           // Data Filter
-          filter.values?.forEach((filterOption, index) => {
+          const orderedFilterValues = filter.orderedValues || filter.values
+          orderedFilterValues?.forEach((filterOption, index) => {
             const labeledOpt = filter.labels && filter.labels[filterOption]
             const resetLabelHasMatch = (filterOption || labeledOpt) === filter.resetLabel
 
@@ -123,9 +129,8 @@ const DashboardFilters: React.FC<DashboardFilterProps> = ({
         }
 
         const formGroupClass = `form-group me-4 mb-1${loading ? ' loading-filter' : ''}`
-
         return (
-          <div className={formGroupClass} key={`${label}-filtersection-${filterIndex}`}>
+          <div className={formGroupClass} key={`${filter.key}-filtersection-${filterIndex}`}>
             {label && (
               <label className='font-weight-bold mb-2' htmlFor={`filter-${filterIndex}`}>
                 {label}

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

@@ -20,6 +20,7 @@ import { useGlobalContext } from '@cdc/core/components/GlobalContext'
 import DeleteFilterModal from './components/DeleteFilterModal'
 import { addValuesToDashboardFilters } from '../../../helpers/addValuesToDashboardFilters'
 import { FILTER_STYLE } from '../../../types/FilterStyles'
+import { handleSorting } from '@cdc/core/components/Filters'
 
 type DashboardFitlersEditorProps = {
   vizConfig: DashboardFilters
@@ -60,11 +61,11 @@ const DashboardFiltersEditor: React.FC<DashboardFitlersEditorProps> = ({ vizConf
       subgroupTextSelector: oldSubgroupTextSelector
     } = sharedFilters[index].apiFilter || {}
     const apiFilterChanged =
-      value.apiEndpoint !== oldEndpoint ||
-      value.valueSelector !== oldValueSelector ||
-      value.textSelector !== oldTextSelector ||
-      value.subgroupValueSelector !== oldSubgroupValueSelector ||
-      value.subgroupTextSelector !== oldSubgroupTextSelector
+      value?.apiEndpoint !== oldEndpoint ||
+      value?.valueSelector !== oldValueSelector ||
+      value?.textSelector !== oldTextSelector ||
+      value?.subgroupValueSelector !== oldSubgroupValueSelector ||
+      value?.subgroupTextSelector !== oldSubgroupTextSelector
 
     newSharedFilters[index][prop] = value
     if (prop === 'columnName') {
@@ -98,10 +99,22 @@ const DashboardFiltersEditor: React.FC<DashboardFitlersEditorProps> = ({ vizConf
       // automatically dispatches SET_SHARED_FILTERS
       loadAPIFilters(newSharedFilters, {})
     } else {
+      handleSorting(newSharedFilters[index])
       dispatch({ type: 'SET_SHARED_FILTERS', payload: newSharedFilters })
     }
   }
 
+  const toggleNestedQueryParameters = (index, checked: boolean) => {
+    const newSharedFilters = _.cloneDeep(sharedFilters)
+    const filter = newSharedFilters[index]
+    const isUrlFilter = filter.type === 'urlfilter'
+    const groupColumnName = isUrlFilter ? filter.apiFilter.valueSelector : filter.columnName
+    const subGroupColumnName = isUrlFilter ? filter.apiFilter.subgroupValueSelector : filter.subGrouping.columnName
+    filter.setByQueryParameter = checked ? groupColumnName : undefined
+    filter.subGrouping.setByQueryParameter = checked ? subGroupColumnName : undefined
+    dispatch({ type: 'SET_SHARED_FILTERS', payload: newSharedFilters })
+  }
+
   const removeFilter = index => {
     const newSharedFilters = _.cloneDeep(sharedFilters)
 
@@ -228,9 +241,13 @@ const DashboardFiltersEditor: React.FC<DashboardFitlersEditorProps> = ({ vizConf
               >
                 <FilterEditor
                   filter={filter}
+                  filterIndex={index}
                   updateFilterProp={(name, value) => {
                     updateFilterProp(name, index, value)
                   }}
+                  toggleNestedQueryParameters={checked => {
+                    toggleNestedQueryParameters(index, checked)
+                  }}
                   config={config}
                 />
               </FieldSetWrapper>

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

@@ -10,12 +10,22 @@ type DeleteFilterProps = {
   filterIndex: number
 }
 
-const DeleteFilterModal: React.FC<DeleteFilterProps> = ({ removeFilterCompletely, removeFilterFromViz, filterIndex }) => {
+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?'
+  const filterUsedByMany =
+    Object.values(config.visualizations).filter(viz => {
+      return (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>