@cdc/core 4.25.3 → 4.25.6-1

package/components/Filters/components/Dropdown.tsx

@@ -0,0 +1,39 @@
+import { VizFilter } from '../../../types/VizFilter'
+
+export const DROPDOWN_STYLES = 'py-2 ps-2 w-100 d-block'
+
+type DropdownProps = {
+  index: number
+  label: string
+  filter: VizFilter
+  changeFilterActive: (index: number, value: string) => void
+}
+
+const Dropdown: React.FC<DropdownProps> = ({ index: outerIndex, label, filter, changeFilterActive }) => {
+  const { active, queuedActive } = filter
+
+  return (
+    <select
+      id={`filter-${outerIndex}`}
+      name={label}
+      aria-label={`Filter by ${label}`}
+      className={`cove-form-select ${DROPDOWN_STYLES}`}
+      style={{ backgroundColor: 'white' }}
+      data-index='0'
+      value={queuedActive || active}
+      onChange={e => {
+        changeFilterActive(outerIndex, e.target.value)
+      }}
+    >
+      {filter.values?.map((value, index) => {
+        return (
+          <option key={index} value={value} aria-label={value}>
+            {filter.labels && filter.labels[value] ? filter.labels[value] : value}
+          </option>
+        )
+      })}
+    </select>
+  )
+}
+
+export default Dropdown

package/components/Filters/components/Tabs.tsx

@@ -0,0 +1,82 @@
+import { useEffect, useId, useState } from 'react'
+import { VizFilter } from '../../../types/VizFilter'
+
+type TabsProps = {
+  filter: VizFilter
+  index: number
+  changeFilterActive: Function
+  theme: string
+}
+
+const Tabs: React.FC<TabsProps> = ({ filter, index: outerIndex, changeFilterActive, theme }) => {
+  const [selectedFilter, setSelectedFilter] = useState<EventTarget>(null)
+
+  const id = useId()
+
+  useEffect(() => {
+    if (selectedFilter) {
+      const el = document.getElementById(selectedFilter.id)
+      if (el) el.focus()
+    }
+  }, [selectedFilter])
+
+  const getClassList = value => {
+    const isActive = filter.active === value
+    let classList = []
+    switch (filter.filterStyle) {
+      case 'tab bar':
+        classList = ['button__tab-bar', isActive && 'button__tab-bar--active']
+        break
+      case 'pill':
+        classList = ['pill', isActive && 'pill--active', theme && theme]
+        break
+      default:
+        const tabSimple = filter.filterStyle === 'tab-simple' && 'tab--simple'
+        classList = ['tab', isActive && 'tab--active', theme && theme, tabSimple]
+        break
+    }
+    return classList.filter(Boolean).join(' ')
+  }
+
+  const Tabs = filter.values.map((value, index) => {
+    return (
+      <button
+        id={`${value}-${outerIndex}-${index}-${id}`}
+        className={getClassList(value)}
+        onClick={e => {
+          changeFilterActive(outerIndex, value)
+          setSelectedFilter(e.target)
+        }}
+        onKeyDown={e => {
+          if (e.keyCode === 13) {
+            changeFilterActive(outerIndex, value)
+            setSelectedFilter(e.target)
+          }
+        }}
+      >
+        {value}
+      </button>
+    )
+  })
+
+  switch (filter.filterStyle) {
+    case 'tab bar':
+      return <section className='single-filters__tab-bar'>{Tabs}</section>
+    case 'tab-simple':
+      return <div className='tab-simple-container d-flex w-100'>{Tabs}</div>
+    case 'pill':
+      return (
+        <>
+          {Tabs.map((Tab, index) => (
+            <div className='pill__wrapper' key={`pill-${index}`}>
+              {Tab}
+            </div>
+          ))}
+        </>
+      )
+    default:
+      return <>{Tabs}</>
+  }
+}
+
+export default Tabs

package/components/Filters/helpers/getChangedFilters.ts

@@ -0,0 +1,31 @@
+import _ from 'lodash'
+import { getQueryParams, updateQueryString } from '../../../helpers/queryStringUtils'
+
+export const getChangedFilters = (filters, index, value, filterBehavior) => {
+  const newFilters = _.cloneDeep(filters)
+  const newFilter = newFilters[index]
+  if (filterBehavior === 'Apply Button') {
+    newFilter.queuedActive = value
+  } else {
+    if (newFilter.filterStyle !== 'nested-dropdown') {
+      newFilter.active = value
+    } else {
+      newFilter.active = value[0]
+      newFilter.subGrouping.active = value[1]
+    }
+
+    const queryParams = getQueryParams()
+    if (newFilter.setByQueryParameter && queryParams[newFilter.setByQueryParameter] !== newFilter.active) {
+      queryParams[newFilter.setByQueryParameter] = newFilter.active
+      updateQueryString(queryParams)
+    }
+    if (
+      newFilter?.subGrouping?.setByQueryParameter &&
+      queryParams[newFilter?.subGrouping?.setByQueryParameter] !== newFilter?.subGrouping.active
+    ) {
+      queryParams[newFilter?.subGrouping?.setByQueryParameter] = newFilter.subGrouping.active
+      updateQueryString(queryParams)
+    }
+  }
+  return newFilters
+}

package/components/Filters/helpers/getNestedOptions.ts

@@ -12,7 +12,7 @@ export const getNestedOptions = ({ orderedValues, values, subGrouping }: GetOpti
   const filteredValues = orderedValues?.length
     ? orderedValues.filter(orderedValue => values.includes(orderedValue))
     : values
-  const v: NestedOptions = filteredValues.map<[ValueTextPair, ValueTextPair[]]>(value => {
+  const options: NestedOptions = filteredValues.map<[ValueTextPair, ValueTextPair[]]>(value => {
     if (!subGrouping) return [[value], []]
     const { orderedValues, values: filteredSubValues } = subGrouping.valuesLookup[value]
     // keep custom subFilter order
@@ -25,5 +25,5 @@ export const getNestedOptions = ({ orderedValues, values, subGrouping }: GetOpti
     return structuredNestedDropdownData
   })
 
-  return v
+  return options
 }

package/components/Filters/helpers/handleSorting.ts

@@ -17,8 +17,8 @@ export const handleSorting = singleFilter => {
     return String(asc ? a : b).localeCompare(String(asc ? b : a), 'en', { numeric: true })
   }
 
-  singleFilter.values = singleFilterValues.sort(sort)
-  singleFilter.orderedValues = singleFilterValues.sort(sort)
+  singleFilter.values = singleFilterValues?.sort(sort)
+  singleFilter.orderedValues = singleFilterValues?.sort(sort)
 
   return singleFilter
 }

package/components/Filters/helpers/tests/getChangedFilters.test.ts

@@ -0,0 +1,92 @@
+import { describe, it, expect, vi, type Mock } from 'vitest'
+import { getChangedFilters } from '../getChangedFilters'
+import { getQueryParams, updateQueryString } from '../../../../helpers/queryStringUtils'
+import _ from 'lodash'
+
+vi.mock('../../../../helpers/queryStringUtils', () => ({
+  getQueryParams: vi.fn(),
+  updateQueryString: vi.fn()
+}))
+
+describe('getChangedFilters', () => {
+  it('should update queuedActive when filterBehavior is "Apply Button"', () => {
+    const filters = [{ queuedActive: false }]
+    const index = 0
+    const value = true
+    const filterBehavior = 'Apply Button'
+
+    const result = getChangedFilters(filters, index, value, filterBehavior)
+
+    expect(result[index].queuedActive).toBe(true)
+  })
+
+  it('should update active for non-nested-dropdown filters', () => {
+    const filters = [{ filterStyle: 'dropdown', active: false }]
+    const index = 0
+    const value = true
+    const filterBehavior = 'Immediate'
+
+    const result = getChangedFilters(filters, index, value, filterBehavior)
+
+    expect(result[index].active).toBe(true)
+  })
+
+  it('should update active and subGrouping.active for nested-dropdown filters', () => {
+    const filters = [
+      {
+        filterStyle: 'nested-dropdown',
+        active: null,
+        subGrouping: { active: null }
+      }
+    ]
+    const index = 0
+    const value = ['parentValue', 'childValue']
+    const filterBehavior = 'Immediate'
+
+    const result = getChangedFilters(filters, index, value, filterBehavior)
+
+    expect(result[index].active).toBe('parentValue')
+    expect(result[index].subGrouping.active).toBe('childValue')
+  })
+
+  it('should update query parameters when setByQueryParameter is defined', () => {
+    const filters = [
+      {
+        filterStyle: 'dropdown',
+        active: false,
+        setByQueryParameter: 'filterParam'
+      }
+    ]
+    const index = 0
+    const value = true
+    const filterBehavior = 'Immediate'
+
+    ;(getQueryParams as Mock).mockReturnValue({ filterParam: false })
+
+    getChangedFilters(filters, index, value, filterBehavior)
+
+    expect(updateQueryString).toHaveBeenCalledWith({ filterParam: true })
+  })
+
+  it('should update query parameters for subGrouping when setByQueryParameter is defined', () => {
+    const filters = [
+      {
+        filterStyle: 'nested-dropdown',
+        active: null,
+        subGrouping: {
+          active: null,
+          setByQueryParameter: 'subFilterParam'
+        }
+      }
+    ]
+    const index = 0
+    const value = ['parentValue', 'childValue']
+    const filterBehavior = 'Immediate'
+
+    ;(getQueryParams as Mock).mockReturnValue({ subFilterParam: null })
+
+    getChangedFilters(filters, index, value, filterBehavior)
+
+    expect(updateQueryString).toHaveBeenCalledWith({ subFilterParam: 'childValue' })
+  })
+})

package/components/Filters/helpers/tests/getNestedOptions.test.ts

@@ -90,4 +90,35 @@ describe('getNestedOptions', () => {
     ]
     expect(getNestedOptions(params)).toEqual(expectedOutput)
   })
+
+  it('should return an empty array when values is an empty array', () => {
+    const params = {
+      values: [],
+      subGrouping: null
+    }
+    const expectedOutput: NestedOptions = []
+    expect(getNestedOptions(params)).toEqual(expectedOutput)
+  })
+
+  it('should handle values with a single element', () => {
+    const params = {
+      values: ['value1'],
+      subGrouping: null
+    }
+    const expectedOutput: NestedOptions = [[['value1'], []]]
+    expect(getNestedOptions(params)).toEqual(expectedOutput)
+  })
+
+  it('should handle values with multiple elements', () => {
+    const params = {
+      values: ['value1', 'value2', 'value3'],
+      subGrouping: null
+    }
+    const expectedOutput: NestedOptions = [
+      [['value1'], []],
+      [['value2'], []],
+      [['value3'], []]
+    ]
+    expect(getNestedOptions(params)).toEqual(expectedOutput)
+  })
 })

package/components/Filters/index.ts

@@ -1,5 +1,5 @@
 export { default } from './Filters'
 
-export { filterOrderOptions, filterStyleOptions, useFilters } from './Filters'
+export { filterStyleOptions } from './Filters'
 
 export { handleSorting } from './helpers/handleSorting'

package/components/Footnotes/Footnotes.tsx

@@ -11,7 +11,7 @@ const Footnotes: React.FC<FootnotesProps> = ({ footnotes }) => {
       <ul className='cove-footnotes'>
         {footnotes.map((note, i) => {
           return (
-            <li key={note.symbol + i} className='mb-1'>
+            <li key={`${note.symbol || 'footnote-'}${i}`} className='mb-1'>
               {note.symbol && <span className='me-1'>{note.symbol}</span>}
               {note.text}
             </li>

package/components/Footnotes/FootnotesStandAlone.tsx

@@ -1,45 +1,20 @@
-import EditorWrapper from '../EditorWrapper'
 import Footnotes from './Footnotes'
-import FootnotesEditor from '../EditorPanel/FootnotesEditor'
-import { ViewPort } from '../../types/ViewPort'
-import FootnotesConfig, { Footnote } from '../../types/Footnotes'
+import FootnotesConfig from '../../types/Footnotes'
 import _ from 'lodash'
 import { useMemo } from 'react'
-import { updateFieldFactory } from '../../helpers/updateFieldFactory'
+import { filterVizData } from '../../helpers/filterVizData'
+import { VizFilter } from '../../types/VizFilter'
 
 type StandAloneProps = {
-  isEditor?: boolean
-  visualizationKey: string
   config: FootnotesConfig
-  updateConfig?: (config: FootnotesConfig) => void
-  viewport?: ViewPort
+  filters?: VizFilter[]
 }
 
-const FootnotesStandAlone: React.FC<StandAloneProps> = ({
-  visualizationKey,
-  config,
-  viewport,
-  isEditor,
-  updateConfig
-}) => {
-  const updateField = updateFieldFactory<Footnote[]>(config, updateConfig)
-  if (isEditor)
-    return (
-      <EditorWrapper
-        component={FootnotesStandAlone}
-        visualizationKey={visualizationKey}
-        visualizationConfig={config}
-        updateConfig={updateConfig}
-        type={'Footnotes'}
-        viewport={viewport}
-      >
-        <FootnotesEditor key={visualizationKey} config={config} updateField={updateField} />
-      </EditorWrapper>
-    )
-
+const FootnotesStandAlone: React.FC<StandAloneProps> = ({ config, filters }) => {
+  if (!config) return null
   // get the api footnotes from the config
   const apiFootnotes = useMemo(() => {
-    const configData = config.formattedData || config.data
+    const configData = filterVizData(filters, config.data)
     if (configData && config.dataKey && config.dynamicFootnotes) {
       const { symbolColumn, textColumn, orderColumn } = config.dynamicFootnotes
       const _data = configData.map(row => _.pick(row, [symbolColumn, textColumn, orderColumn]))
@@ -47,7 +22,7 @@ const FootnotesStandAlone: React.FC<StandAloneProps> = ({
       return _data.map(row => ({ symbol: row[symbolColumn], text: row[textColumn] }))
     }
     return []
-  }, [config.dynamicFootnotes, config.formattedData, config.data])
+  }, [config.dynamicFootnotes, config.data, filters])
 
   // get static footnotes from the config.footnotes
   const staticFootnotes = config.staticFootnotes || []

package/components/Layout/components/Visualization/index.tsx

@@ -2,21 +2,23 @@
 import { ChartConfig } from '@cdc/chart/src/types/ChartConfig'
 import React, { forwardRef } from 'react'
 import { Config as DataBiteConfig } from '@cdc/data-bite/src/types/Config'
+import { Config as DataTableConfig } from '@cdc/data-table/src/types/Config'
 import './visualizations.scss'
 import { Config as WaffleChartConfig } from '@cdc/waffle-chart/src/types/Config'
 import { MarkupIncludeConfig } from '@cdc/core/types/MarkupInclude'
 import { DashboardFilters } from '@cdc/dashboard/src/types/DashboardFilters'
+import { MapConfig } from '@cdc/map/src/types/MapConfig'
 
 type VisualizationWrapper = {
   children: React.ReactNode
-  config: ChartConfig | DataBiteConfig | WaffleChartConfig | MarkupIncludeConfig | DashboardFilters
+  config: ChartConfig | DataBiteConfig | WaffleChartConfig | MarkupIncludeConfig | DashboardFilters | MapConfig | DataTableConfig
   currentViewport?: string
   imageId?: string
   isEditor: boolean
   showEditorPanel?: boolean
 }
 
-const Visualization: React.FC<VisualizationWrapper> = forwardRef((props, ref) => {
+const Visualization = forwardRef<HTMLDivElement, VisualizationWrapper>((props, ref) => {
   const {
     config = {},
     isEditor = false,
@@ -93,7 +95,6 @@ const Visualization: React.FC<VisualizationWrapper> = forwardRef((props, ref) =>
   }
 
   return (
-    // prettier-ignore
     <div
       {...(config.type === 'chart' ? { 'data-lollipop': config.isLollipopChart } : {})}
       className={getWrappingClasses().join(' ')}

package/components/Legend/Legend.Gradient.tsx

@@ -4,9 +4,11 @@ import { type MapConfig } from '@cdc/map/src/types/MapConfig'
 import { type ChartConfig } from '@cdc/chart/src/types/ChartConfig'
 import { getTextWidth } from '../../helpers/getTextWidth'
 import { DimensionsType } from '../../types/Dimensions'
+import useLegendSeparators from '@cdc/map/src/hooks/useLegendSeparators'
 
 const MARGIN = 1
 const BORDER_SIZE = 1
+const BORDER_COLOR = '#d3d3d3'
 const MOBILE_BREAKPOINT = 576
 
 type CombinedConfig = MapConfig | ChartConfig
@@ -27,7 +29,7 @@ const LegendGradient = ({
   parentPaddingToSubtract = 0
 }: GradientProps): JSX.Element => {
   const { uid, legend, type } = config
-  const { tickRotation, position, style, subStyle, hideBorder } = legend
+  const { tickRotation, position, style, subStyle, separators } = legend
 
   const isLinearBlocks = subStyle === 'linear blocks'
   let [width] = dimensions
@@ -36,6 +38,10 @@ const LegendGradient = ({
   const legendWidth = Number(width) - parentPaddingToSubtract - MARGIN * 2 - BORDER_SIZE * 2
   const uniqueID = `${uid}-${Date.now()}`
 
+  // Legend separators logic
+  const { legendSeparators, separatorSize, legendSeparatorsToSubtract, getTickSeparatorsAdjustment } =
+    useLegendSeparators(separators, legendWidth, isLinearBlocks)
+
   const numTicks = colors?.length
 
   const longestLabel = (labels || []).reduce((a: string, b) => (a.length > String(b).length ? a : b), '')
@@ -57,8 +63,8 @@ const LegendGradient = ({
 
   // render ticks and labels
   const ticks = labels.map((key, index) => {
-    const segmentWidth = legendWidth / numTicks
-    const xPositionX = index * segmentWidth + segmentWidth + MARGIN
+    const segmentWidth = (legendWidth - legendSeparatorsToSubtract) / numTicks
+    const xPositionX = index * segmentWidth + segmentWidth + MARGIN + getTickSeparatorsAdjustment(index)
     const textAnchor = rotationAngle ? 'end' : 'middle'
     const verticalAnchor = rotationAngle ? 'middle' : 'start'
     const lastTick = index === labels.length - 1
@@ -92,9 +98,10 @@ const LegendGradient = ({
 
   if (style === 'gradient') {
     return (
-      <svg className={'w-100 overflow-visible'} height={newHeight}>
+      // TODO: figure out why bootstrap 'overflow: visible' is not working consistently
+      <svg className={'w-100 overflow-visible'} height={newHeight} style={{ overflow: 'visible' }} width={width}>
         {/* background border*/}
-        <rect x={0} y={0} width={legendWidth + MARGIN * 2} height={boxHeight + MARGIN * 2} fill='#d3d3d3' />
+        <rect x={0} y={0} width={legendWidth + MARGIN * 2} height={boxHeight + MARGIN * 2} fill={BORDER_COLOR} />
         {/* Define the gradient */}
         <linearGradient id={`gradient-smooth-${uniqueID}`} x1='0%' y1='0%' x2='100%' y2='0%'>
           {stops}
@@ -110,25 +117,62 @@ const LegendGradient = ({
           />
         )}
 
-        {subStyle === 'linear blocks' &&
-          colors.map((color, index) => {
-            const segmentWidth = legendWidth / numTicks
-            const xPosition = index * segmentWidth + MARGIN
-            return (
-              <Group>
-                <rect
-                  key={index}
-                  x={xPosition}
-                  y={MARGIN}
-                  width={segmentWidth}
-                  height={boxHeight}
-                  fill={color}
-                  stroke='white'
-                  strokeWidth='0'
-                />
-              </Group>
-            )
-          })}
+        {subStyle === 'linear blocks' && (
+          <>
+            {colors.map((color, index) => {
+              const segmentWidth = (legendWidth - legendSeparatorsToSubtract) / numTicks
+              const xPosition = index * segmentWidth + MARGIN + getTickSeparatorsAdjustment(index)
+              return (
+                <Group>
+                  <rect
+                    key={index}
+                    x={xPosition}
+                    y={MARGIN}
+                    width={segmentWidth}
+                    height={boxHeight}
+                    fill={color}
+                    stroke='white'
+                    strokeWidth='0'
+                  />
+                </Group>
+              )
+            })}
+            {/* Legend separators */}
+            {legendSeparators.map((separatorAfter, index) => {
+              const segmentWidth = (legendWidth - legendSeparatorsToSubtract) / numTicks
+              const xPosition = separatorAfter * segmentWidth + MARGIN + getTickSeparatorsAdjustment(separatorAfter - 1)
+              return (
+                <Group>
+                  {/* Separators block */}
+                  <rect
+                    key={index}
+                    x={xPosition}
+                    y={MARGIN / 2}
+                    width={separatorSize}
+                    height={boxHeight + MARGIN}
+                    fill={'white'}
+                    stroke={'white'}
+                    strokeWidth={MARGIN}
+                  />
+
+                  {/* Dotted dividing line */}
+                  <line
+                    key={index}
+                    x1={xPosition + separatorSize / 2}
+                    x2={xPosition + separatorSize / 2}
+                    y1={-3}
+                    y2={boxHeight + MARGIN + 3}
+                    stroke={'var(--colors-gray-cool-40,#8d9297)'}
+                    strokeWidth={1}
+                    strokeDasharray='5,3'
+                    strokeDashoffset={1}
+                  />
+                </Group>
+              )
+            })}
+          </>
+        )}
+
         {/* Ticks and labels */}
         <g>{ticks}</g>
       </svg>

package/components/MultiSelect/MultiSelect.tsx

@@ -36,9 +36,7 @@ const MultiSelect: React.FC<MultiSelectProps> = ({
   tooltip,
   loading
 }) => {
-  const preselectedItems = useMemo(() => options.filter(opt => selected.includes(opt.value)).slice(0, limit), [options])
-  const [selectedItems, setSelectedItems] = useState<Option[]>()
-  const items = selectedItems || preselectedItems
+  const items = useMemo(() => options.filter(opt => selected.includes(opt.value)).slice(0, limit), [options])
   const [expanded, setExpanded] = useState(false)
   const multiSelectRef = useRef(null)
 
@@ -68,14 +66,12 @@ const MultiSelect: React.FC<MultiSelectProps> = ({
     if (e && e.type === 'keyup' && e.key !== 'Enter') return
     if (limit && items?.length >= limit) return
     const newItems = [...items, option]
-    setSelectedItems(newItems)
     update(newItems)
   }
 
   const handleItemRemove = (option: Option, e = null) => {
     if (e && e.type === 'keyup' && e.key !== 'Enter') return
     const newItems = items.filter(item => item.value !== option.value)
-    setSelectedItems(newItems)
     update(newItems)
   }
 
@@ -99,6 +95,7 @@ const MultiSelect: React.FC<MultiSelectProps> = ({
             items.map(item => (
               <div key={item.value} aria-labelledby={label ? multiID + label : undefined}>
                 {item.label}
+
                 <button
                   aria-label='Remove'
                   onClick={e => {
@@ -114,7 +111,7 @@ const MultiSelect: React.FC<MultiSelectProps> = ({
               </div>
             ))
           ) : (
-            <span className='pl-1 pt-1'>{loading ? 'Loading...' : '- Select -'}</span>
+            <span className='ps-1 pt-1'>{loading ? 'Loading...' : '- Select -'}</span>
           )}
           <button
             aria-label={expanded ? 'Collapse' : 'Expand'}

package/components/MultiSelect/multiselect.styles.css

@@ -5,6 +5,7 @@
   .wrapper {
     display: inline-flex;
     align-items: center;
+    width: 100%;
     .selected {
       &[aria-disabled='true'] {
         background: var(--lightestGray);
@@ -12,6 +13,7 @@
       border: 1px solid var(--lightGray);
       padding: 7px;
       min-width: 200px;
+      width: 100%;
       display: inline-block;
       :is(button) {
         border: none;