@cdc/core 4.24.11 → 4.24.12-2

package/helpers/addValuesToFilters.ts

@@ -1,6 +1,7 @@
 import _ from 'lodash'
 import { getQueryStringFilterValue } from '@cdc/core/helpers/queryStringUtils'
 import { VizFilter } from '../types/VizFilter'
+import { FILTER_STYLE } from '@cdc/dashboard/src/types/FilterStyles'
 
 type Filter = {
   columnName: string
@@ -28,13 +29,16 @@ const cleanLookup = (lookup: Record<string, { values: string[]; orderedValues?:
 // Gets filter values from dataset
 const generateValuesForFilter = (filter: VizFilter, data: any[] | MapData) => {
   const columnName = filter.columnName
+  const orderColumn = filter.orderColumn
   const values: string[] = []
+  const valuesWithOrders: [string, string][] = []
   const subGroupingColumn = filter.subGrouping?.columnName
   const subValues = cleanLookup(filter.subGrouping?.valuesLookup)
   if (Array.isArray(data)) {
     data.forEach(row => {
-      const value = row[columnName]
+      const value: string = row[columnName]
       if (value !== undefined && !values.includes(value)) {
+        if (orderColumn) valuesWithOrders.push([value, row[orderColumn]])
         values.push(value)
       }
       if (subGroupingColumn) {
@@ -57,12 +61,23 @@ const generateValuesForFilter = (filter: VizFilter, data: any[] | MapData) => {
       rows.forEach(row => {
         const value = row[columnName]
         if (value !== undefined && !values.includes(value)) {
+          if (orderColumn) valuesWithOrders.push([value, row[orderColumn]])
           values.push(value)
         }
       })
     })
   }
-  filter.values = values
+  if (orderColumn) {
+    filter.values = valuesWithOrders.sort((a, b) => a[1].localeCompare(b[1])).map(([value]) => value)
+  } else if (filter.order && filter.order !== 'cust') {
+    const sort = (a, b) => {
+      const asc = filter.order !== 'desc'
+      return String(asc ? a : b).localeCompare(String(asc ? b : a), 'en', { numeric: true })
+    }
+    filter.values = values.sort(sort)
+  } else {
+    filter.values = values
+  }
   if (subGroupingColumn) {
     filter.subGrouping.valuesLookup = subValues
   }
@@ -72,7 +87,7 @@ const handleVizParents = (filter: VizFilter, data: any[] | MapData, filtersLooku
   let filteredData = Array.isArray(data) ? data : Object.values(data).flat(1)
   filter.parents.forEach(parentKey => {
     const parent = filtersLookup[parentKey]
-    if (parent?.filterStyle === 'nested-dropdown') {
+    if (parent?.filterStyle === FILTER_STYLE.nestedDropdown) {
       const { subGrouping } = parent as VizFilter
       if (subGrouping?.active) {
         filteredData = filteredData.filter(d => {
@@ -107,11 +122,11 @@ export const addValuesToFilters = (filters: VizFilter[], data: any[] | MapData):
       filteredData = handleVizParents(filter as VizFilter, data, filtersLookup)
     }
     generateValuesForFilter(filterCopy, filteredData)
-    if (filterCopy.values.length > 0) {
+    if (filterCopy.values?.length > 0) {
       const queryStringFilterValue = getQueryStringFilterValue(filterCopy)
       if (queryStringFilterValue) {
         filterCopy.active = queryStringFilterValue
-      } else if (filterCopy.filterStyle === 'multi-select') {
+      } else if (filterCopy.filterStyle === FILTER_STYLE.multiSelect) {
         const defaultValues = filterCopy.values
         const active = Array.isArray(filterCopy.active) ? filterCopy.active : [filterCopy.active]
         filterCopy.active = active.filter(val => includes(defaultValues, val))
@@ -128,12 +143,11 @@ export const addValuesToFilters = (filters: VizFilter[], data: any[] | MapData):
         values: filterCopy.subGrouping.valuesLookup[groupName].values
       }
       const queryStringFilterValue = getQueryStringFilterValue(subGroupingFilter)
-      const groupActive = filterCopy.active || filterCopy.values[0]
+      const groupActive = groupName || filterCopy.values[0]
       const defaultValue = filterCopy.subGrouping.valuesLookup[groupActive as string].values[0]
       // if the value doesn't exist in the subGrouping then return the default
-      const filteredLookupValues = Object.values(filterCopy.subGrouping.valuesLookup).flatMap(v => v.values)
       const activeValue = queryStringFilterValue || filterCopy.subGrouping.active
-      filterCopy.subGrouping.active = filteredLookupValues.includes(activeValue) ? activeValue : defaultValue
+      filterCopy.subGrouping.active = activeValue || defaultValue
     }
     return filterCopy
   })

package/helpers/coveUpdateWorker.ts

@@ -20,7 +20,7 @@ export const coveUpdateWorker = config => {
     ['4.24.5', update_4_24_5],
     ['4.24.7', update_4_24_7, true],
     ['4.24.9', update_4_24_9],
-    ['4.24.10', update_4_24_10]
+    ['4.24.10', update_4_24_10, true]
   ]
 
   versions.forEach(([version, updateFunction, alwaysRun]: [string, UpdateFunction, boolean?]) => {

package/helpers/filterVizData.ts

@@ -36,9 +36,9 @@ export const filterVizData = (filters: Filter[], data) => {
         }
         if (filter.filterStyle === 'nested-dropdown' && filter.subGrouping && add === true) {
           const subGroupActive = filter.subGrouping.active
-          const value = row[filter.subGrouping.columnName]
+          const subGroupValue = row[filter.subGrouping.columnName]
           if (subGroupActive === undefined) return
-          if (value != subGroupActive) {
+          if (subGroupValue != subGroupActive) {
             add = false
           }
         }

package/helpers/formatConfigBeforeSave.ts

@@ -65,6 +65,7 @@ const cleanSharedFilters = (config: DashboardConfig) => {
   if (config.dashboard?.sharedFilters) {
     config.dashboard.sharedFilters.forEach((filter, index) => {
       delete config.dashboard.sharedFilters[index].active
+      if (filter.subGrouping) delete config.dashboard.sharedFilters[index].subGrouping.active
       if (filter.type === 'urlfilter') {
         delete config.dashboard.sharedFilters[index].values
       }
@@ -72,6 +73,18 @@ const cleanSharedFilters = (config: DashboardConfig) => {
   }
 }
 
+const cleanVisualizationFilters = (config: DashboardConfig) => {
+  if (config.visualizations) {
+    Object.keys(config.visualizations).forEach(vizKey => {
+      const vizFilters = config.visualizations[vizKey].filters || []
+      vizFilters.forEach((_filter, index) => {
+        delete config.visualizations[vizKey].filters[index].active
+        delete config.visualizations[vizKey].filters[index].values
+      })
+    })
+  }
+}
+
 const removeRuntimeDataURLs = (config: DashboardConfig) => {
   if (config.datasets) {
     Object.keys(config.datasets).forEach(datasetKey => {
@@ -88,6 +101,7 @@ export const formatConfigBeforeSave = configToStrip => {
         cleanDashboardData(strippedConfig.multiDashboards[i])
         cleanSharedFilters(strippedConfig.multiDashboards[i])
         cleanDashboardFootnotes(strippedConfig.multiDashboards[i])
+        cleanVisualizationFilters(strippedConfig.multiDashboards[i])
       })
       delete strippedConfig.dashboard
       delete strippedConfig.rows
@@ -98,6 +112,7 @@ export const formatConfigBeforeSave = configToStrip => {
     cleanDashboardData(strippedConfig)
     cleanSharedFilters(strippedConfig)
     cleanDashboardFootnotes(strippedConfig)
+    cleanVisualizationFilters(strippedConfig)
     removeRuntimeDataURLs(strippedConfig)
   } else {
     delete strippedConfig.runtime

package/helpers/gatherQueryParams.ts

@@ -5,9 +5,8 @@ const strip = (paramVal: string) => {
 }
 
 const isNumber = (value: string) => {
-  const hasLetters = value.match(/[a-zA-Z]/)
-  if (hasLetters) return false
-  return !isNaN(parseInt(value))
+  // matches int and float and negative numbers
+  return String(value).match(/^[-]?[0-9\.]+$/)
 }
 
 export const gatherQueryParams = (baseEndpoint: string, params: { key: string; value: string }[]) => {

package/helpers/queryStringUtils.ts

@@ -16,11 +16,20 @@ export function getQueryStringFilterValue(filter) {
 export function getQueryParams() {
   const queryParams = {}
   for (const [key, value] of Array.from(new URLSearchParams(window.location.search).entries())) {
-    queryParams[key] = value
+    if (!queryParams[key]) queryParams[key] = value
+    else {
+      // for multiple values of the same key in the query string
+      if (Array.isArray(queryParams[key])) queryParams[key].push(value)
+      else queryParams[key] = [queryParams[key], value]
+    }
   }
   return queryParams
 }
 
+export function getQueryParam(param) {
+  return getQueryParams()[param]
+}
+
 export function updateQueryString(queryParams) {
   const updateUrl = `${window.location.origin}${window.location.pathname}?${Object.keys(queryParams)
     .map(queryParam => `${queryParam}=${encodeURIComponent(queryParams[queryParam])}`)

package/helpers/tests/addValuesToFilters.test.ts

@@ -2,6 +2,7 @@ import _ from 'lodash'
 import { VizFilter } from '../../types/VizFilter'
 import { addValuesToFilters } from '../addValuesToFilters'
 import { describe, it, expect, vi } from 'vitest'
+import { FILTER_STYLE } from '@cdc/dashboard/src/types/FilterStyles'
 
 describe('addValuesToFilters', () => {
   const parentFilter = { columnName: 'parentColumn', id: 11, active: 'apple', values: [] } as VizFilter
@@ -36,7 +37,11 @@ describe('addValuesToFilters', () => {
     //expect(newFilters[1].values).toEqual([])
   })
   it('works for nested dropdowns', () => {
-    const nestedParentFilter = { ...parentFilter, subGrouping: { columnName: 'childColumn' } }
+    const nestedParentFilter = {
+      ...parentFilter,
+      filterStyle: FILTER_STYLE.nestedDropdown,
+      subGrouping: { columnName: 'childColumn' }
+    }
     const newFilters = addValuesToFilters([nestedParentFilter], data)
     expect(newFilters[0].values).toEqual(['apple', 'pear'])
     expect(newFilters[0].subGrouping.valuesLookup).toEqual({ apple: { values: ['a', 'b'] }, pear: { values: ['c'] } })

package/helpers/useDataVizClasses.ts

@@ -85,7 +85,8 @@ export default function useDataVizClasses(config, viewport = null) {
     li: ['single-legend-item', 'legend-container__li'],
     title: ['legend-container__title'],
     description: ['legend-container__description'],
-    div: [legend?.position === 'bottom' && legend?.singleRow ? 'shape-container single-row' : 'shape-container']
+    div: [legend?.position === 'bottom' && legend?.singleRow ? 'shape-container single-row' : 'shape-container'],
+    resetButton: ['legend-container__reset-button']
   }
 
   return { innerContainerClasses, contentClasses, lineDatapointClass, sparkLineStyles, legendClasses }

package/helpers/ver/4.24.10.ts

@@ -34,12 +34,24 @@ export const setXAxisLabelOffsetToZero = newConfig => {
   newConfig.xAxis.labelOffset = 0
 }
 
+export const defineFilterStyles = newConfig => {
+  if (newConfig.filters) {
+    newConfig.filters = newConfig.filters.map(filter => {
+      if (!filter.filterStyle) {
+        filter.filterStyle = 'dropdown'
+      }
+      return filter
+    })
+  }
+}
+
 const update_4_24_10 = config => {
   const ver = '4.24.10'
   const newConfig = _.cloneDeep(config)
   setXAxisLabelOffsetToZero(newConfig)
   changePivotColumns(newConfig)
   removeMultiSelectPropFromMultiselect(newConfig)
+  defineFilterStyles(newConfig)
   newConfig.version = ver
   return newConfig
 }

package/helpers/ver/versionNeedsUpdate.ts

@@ -7,3 +7,5 @@ export default function versionNeedsUpdate(previousVersion: string, currentVersi
   if (currMajor === prevMajor && currMinor === prevMinor && currPatch > prevPatch) return true
   return false
 }
+
+export const isOlderVersion = versionNeedsUpdate

package/helpers/viewports.ts

@@ -1,9 +1,10 @@
-function isLegendWrapViewport(currentViewport) {
-  return ['xs', 'xxs'].includes(currentViewport)
-}
+import { ViewportSize } from '@cdc/map/src/types/MapConfig'
 
-function isMobileHeightViewport(currentViewport) {
-  return ['xs', 'xxs'].includes(currentViewport)
-}
+const BREAKPOINTS = ['xxs', 'xs', 'sm', 'md', 'lg']
 
-export { isLegendWrapViewport, isMobileHeightViewport }
+export const isBelowBreakpoint = (breakpoint: ViewportSize, currentViewport: ViewportSize) =>
+  BREAKPOINTS.indexOf(currentViewport) < BREAKPOINTS.indexOf(breakpoint)
+
+export const isLegendWrapViewport = currentViewport => isBelowBreakpoint('sm', currentViewport)
+
+export const isMobileHeightViewport = currentViewport => isBelowBreakpoint('sm', currentViewport)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cdc/core",
-  "version": "4.24.11",
+  "version": "4.24.12-2",
   "description": "Core components, styles, hooks, and helpers, for the CDC Open Visualization project",
   "moduleName": "CdcCore",
   "main": "dist/cdccore",
@@ -34,7 +34,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
-  "gitHead": "9ab5ee9b2b0ef7321a66a2104be6ce8899ec3808",
+  "gitHead": "a60edf1148396309eb473ac9f65426ee40797ddf",
   "devDependencies": {
     "sass": "^1.79.4"
   }

package/styles/_global-variables.scss

@@ -62,7 +62,12 @@ $colors: (
   'amber-primary': #fbab18,
   'amber-secondary': #ffd54f,
   'amber-tertiary': #ffecb3,
-  'amber-quaternary': #fff7e1
+  'amber-quaternary': #fff7e1,
+
+  'cool-gray-90': #1c1d1f,
+  'cool-gray-50': #71767a,
+  'cool-gray-30': #a9aeb1,
+  'cool-gray-10': #dfe1e2
 );
 
 @mixin theme() {
@@ -86,8 +91,8 @@ $colors: (
   --font-size: 17px;
 }
 
-@media (max-width: 768px) {
+@media (max-width: 576px) {
   :root {
-    --font-size: 0.9em;
+    --font-size: 13px;
   }
 }

package/styles/_reset.scss

@@ -19,7 +19,6 @@
   }
 }
 .cdc-open-viz-module {
-  span,
   applet,
   object,
   iframe,

package/types/Version.ts

@@ -0,0 +1 @@
+export type version = `${number}.${number}.${number}`

package/types/VizFilter.ts

@@ -1,4 +1,4 @@
-export type OrderBy = 'asc' | 'desc' | 'cust'
+export type OrderBy = 'asc' | 'desc' | 'cust' | 'column'
 
 export type FilterBase = {
   columnName: string
@@ -23,6 +23,7 @@ export type GeneralFilter = FilterBase & {
   filterStyle: VizFilterStyle
   label: string
   order: OrderBy
+  orderColumn?: string
   orderedValues?: string[] // should only exist if the order is 'cust'
   queryParameter: string
   setByQueryParameter: string