@cdc/core 4.24.5 → 4.24.9

package/helpers/addValuesToFilters.ts

@@ -0,0 +1,135 @@
+import _ from 'lodash'
+import { getQueryStringFilterValue } from '@cdc/core/helpers/queryStringUtils'
+import { VizFilter } from '../types/VizFilter'
+
+type Filter = {
+  columnName: string
+  values: (string | number)[]
+  filterStyle?: string
+  active?: string | number | (string | number)[]
+  parents?: (string | number)[]
+}
+
+/** MapData is an object */
+type MapData = Record<string, any[]>
+
+const cleanLookup = (lookup: Record<string, { values: string[]; orderedValues?: string[] }>) => {
+  // for nested-dropdown
+  // removes values from subGrouping.valuesLookup
+  // keeps orderedValues
+  return Object.fromEntries(
+    Object.entries(lookup || {}).map(([key, { orderedValues }]) => {
+      if (!orderedValues) return [key, { values: [] }]
+      return [key, { orderedValues, values: [] }]
+    })
+  )
+}
+
+// Gets filter values from dataset
+const generateValuesForFilter = (filter: VizFilter, data: any[] | MapData) => {
+  const columnName = filter.columnName
+  const values: string[] = []
+  const subGroupingColumn = filter.subGrouping?.columnName
+  const subValues = cleanLookup(filter.subGrouping?.valuesLookup)
+  if (Array.isArray(data)) {
+    data.forEach(row => {
+      const value = row[columnName]
+      if (value !== undefined && !values.includes(value)) {
+        values.push(value)
+      }
+      if (subGroupingColumn) {
+        const dataValue = row[subGroupingColumn]
+        if (value === undefined) return
+        if (!subValues[value]) {
+          subValues[value] = { values: [] }
+        }
+        if (!subValues[value].values.includes(dataValue)) {
+          subValues[value].values.push(dataValue)
+        }
+      }
+    })
+  } else {
+    // data is a dataset this loops through ALL datasets to find matching values
+    // not sure if this is desired behavior
+    // Maps Only
+    if (!data) return values
+    Object.values(data).forEach((rows: any[]) => {
+      rows.forEach(row => {
+        const value = row[columnName]
+        if (value !== undefined && !values.includes(value)) {
+          values.push(value)
+        }
+      })
+    })
+  }
+  filter.values = values
+  if (subGroupingColumn) {
+    filter.subGrouping.valuesLookup = subValues
+  }
+}
+
+const handleVizParents = (filter: VizFilter, data: any[] | MapData, filtersLookup: Record<string, Filter>) => {
+  let filteredData = Array.isArray(data) ? data : Object.values(data).flat(1)
+  filter.parents.forEach(parentKey => {
+    const parent = filtersLookup[parentKey]
+    if (parent.filterStyle === 'nested-dropdown') {
+      const { subGrouping } = parent as VizFilter
+      if (subGrouping.active) {
+        filteredData = filteredData.filter(d => {
+          const matchingParentGroup = parent.active == d[parent.columnName]
+          const matchingSubGroup = subGrouping.active == d[subGrouping.columnName]
+          return matchingParentGroup && matchingSubGroup
+        })
+      }
+    } else if (parent?.active) {
+      filteredData = filteredData.filter(d => {
+        if (Array.isArray(parent.active)) {
+          return parent.active.includes(d[parent.columnName])
+        }
+        return parent.active == d[parent.columnName]
+      })
+    }
+  })
+  return filteredData
+}
+
+const includes = (arr: any[], val: any): boolean => {
+  return arr.map(val => String(val)).includes(String(val))
+}
+
+export const addValuesToFilters = (filters: VizFilter[], data: any[] | MapData): Array<VizFilter> => {
+  const filtersLookup = _.keyBy(filters, 'id')
+  return filters?.map(filter => {
+    const filterCopy = _.cloneDeep(filter)
+    let filteredData = data
+    const isMapData = !Array.isArray(data)
+    if (filter.parents?.length && !isMapData) {
+      filteredData = handleVizParents(filter as VizFilter, data, filtersLookup)
+    }
+    generateValuesForFilter(filterCopy, filteredData)
+    if (filterCopy.values.length > 0) {
+      const queryStringFilterValue = getQueryStringFilterValue(filterCopy)
+      if (queryStringFilterValue) {
+        filterCopy.active = queryStringFilterValue
+      } else if (filterCopy.filterStyle === 'multi-select') {
+        const defaultValues = filterCopy.values
+        const active = Array.isArray(filterCopy.active) ? filterCopy.active : [filterCopy.active]
+        filterCopy.active = active.filter(val => includes(defaultValues, val))
+      } else {
+        const defaultValue = filterCopy.values[0]
+        const active = Array.isArray(filterCopy.active) ? filterCopy.active[0] : filterCopy.active
+        filterCopy.active = includes(filterCopy.values, active) ? active : defaultValue
+      }
+    }
+    if (filterCopy.subGrouping) {
+      const queryStringFilterValue = getQueryStringFilterValue(filterCopy.subGrouping)
+      const groupActive = filterCopy.active || 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
+    }
+    return filterCopy
+  })
+}

package/helpers/cove/accessibility.ts

@@ -1,15 +1,18 @@
 import chroma from 'chroma-js'
 
 /**
- * WCAG 2.0 Standard requires 4.5:1 contrast ratio
- * https://www.w3.org/TR/WCAG20-TECHS/G18.html
+ * WCAG 2.1 CONSTANTS
+ * TEXT (4.5 Contrast Ratio): https://www.w3.org/TR/WCAG20-TECHS/G18.html
+ * NON-TEXT (3.5 Contrast Ratio): https://www.w3.org/TR/WCAG20-TECHS/G145.html
  *
  * !important - DO NOT CHANGE.
  */
-export const WCAG_CONTRAST_RATIO = 4.5
+export const WCAG_TEXT_CONTRAST_RATIO = 4.5
+export const WCAG_NON_TEXT_CONTRAST_RATIO = 3.5
 
 export const getContrastColor = (textColor: string, bgColor: string) => {
-  if (chroma.contrast(textColor, bgColor) < WCAG_CONTRAST_RATIO) {
+  if (!bgColor) return
+  if (chroma.contrast(textColor, bgColor) < WCAG_TEXT_CONTRAST_RATIO) {
     switch (textColor) {
       case '#FFF':
         return '#000'
@@ -21,3 +24,13 @@ export const getContrastColor = (textColor: string, bgColor: string) => {
   }
   return textColor
 }
+
+export const checkColorContrast = (color1: string, color2: string) => {
+  if (!chroma.valid(color1) || !chroma.valid(color2)) return false
+  return chroma.contrast(color1, color2) >= WCAG_NON_TEXT_CONTRAST_RATIO
+}
+
+export const getColorContrast = (color1: string, color2: string) => {
+  if (!chroma.valid(color1) || !chroma.valid(color2)) return false
+  return chroma.contrast(color1, color2)
+}

package/helpers/cove/fontSettings.ts

@@ -0,0 +1,2 @@
+// TODO: handle with css
+export const fontSizes = { small: 16, medium: 18, large: 20 }

package/helpers/coveUpdateWorker.ts

@@ -1,21 +1,42 @@
 // If config key names or position in the config have been changed with a version change,
 // process those config entries and format old values into new
-import update_4_24_4 from './ver/4.23.4'
+import update_4_24_4 from './ver/4.24.4'
 import update_4_24_3 from './ver/4.24.3'
 import update_4_24_5 from './ver/4.24.5'
+import update_4_24_7 from './ver/4.24.7'
+import update_4_24_9 from './ver/4.24.9'
+import versionNeedsUpdate from './ver/versionNeedsUpdate'
+import { UpdateFunction } from 'json-edit-react'
 
 export const coveUpdateWorker = config => {
+  if (config.multiDashboards) {
+    config.multiDashboards.forEach((dashboard, index) => {
+      config.multiDashboards[index] = coveUpdateWorker(dashboard)
+    })
+  }
   let genConfig = config
 
-  genConfig = update_4_24_3(genConfig)
-  genConfig = update_4_24_4(genConfig)
-  genConfig = update_4_24_5(genConfig)
+  const versions = [
+    ['4.24.3', update_4_24_3],
+    ['4.24.4', update_4_24_4],
+    ['4.24.5', update_4_24_5],
+    ['4.24.7', update_4_24_7, true],
+    ['4.24.9', update_4_24_9]
+  ]
 
-  return genConfig
-}
+  versions.forEach(([version, updateFunction, alwaysRun]: [string, UpdateFunction, boolean?]) => {
+    if (versionNeedsUpdate(genConfig.version, version) || alwaysRun) {
+      genConfig = updateFunction(genConfig)
+    }
+    if (genConfig.multiDashboards) {
+      genConfig.multiDashboards.forEach((dashboard, index) => {
+        dashboard.type = 'dashboard'
+        genConfig.multiDashboards[index] = coveUpdateWorker(dashboard)
+      })
+    }
+  })
 
-const asyncWorker = async config => {
-  return await coveUpdateWorker(config)
+  return genConfig
 }
 
-export default asyncWorker
+export default coveUpdateWorker

package/helpers/filterVizData.ts

@@ -0,0 +1,49 @@
+import { SubGrouping } from '../types/VizFilter'
+
+type Filter = {
+  columnName: string
+  type?: string
+  values: (string | number)[]
+  filterStyle?: string
+  active?: string | number | (string | number)[]
+  parents?: (string | number)[]
+  subGrouping?: SubGrouping
+}
+
+export const filterVizData = (filters: Filter[], data) => {
+  if (!data) {
+    console.warn('COVE: No data to filter')
+    return []
+  }
+
+  if (!filters) return data
+  const filteredData: any[] = []
+
+  data?.forEach(row => {
+    let add = true
+    filters
+      .filter(filter => filter.type !== 'url')
+      .forEach(filter => {
+        if (filter.active === undefined) return
+        const value = row[filter.columnName]
+
+        if (Array.isArray(filter.active)) {
+          if (!filter.active.includes(value)) {
+            add = false
+          }
+        } else if (value != filter.active) {
+          add = false
+        }
+        if (filter.filterStyle === 'nested-dropdown' && filter.subGrouping && add === true) {
+          const subGroupActive = filter.subGrouping.active
+          const value = row[filter.subGrouping.columnName]
+          if (subGroupActive === undefined) return
+          if (value != subGroupActive) {
+            add = false
+          }
+        }
+      })
+    if (add) filteredData.push(row)
+  })
+  return filteredData
+}

package/helpers/formatConfigBeforeSave.ts

@@ -0,0 +1,95 @@
+import Footnotes from '@cdc/core/types/Footnotes'
+import { Visualization } from '@cdc/core/types/Visualization'
+import { DashboardConfig } from '@cdc/dashboard/src/types/DashboardConfig'
+import _ from 'lodash'
+
+const cleanDashboardFootnotes = (config: DashboardConfig) => {
+  // strip any blank footnote visualizations
+  const footnoteIds: string[] = []
+
+  if (config.rows) {
+    config.rows.forEach(row => {
+      if (row.footnotesId) {
+        const { dataKey, staticFootnotes } = config.visualizations[row.footnotesId] as Footnotes
+        if (!dataKey && !staticFootnotes?.length) {
+          delete config.visualizations[row.footnotesId]
+        } else {
+          footnoteIds.push(row.footnotesId)
+        }
+      }
+    })
+  }
+
+  if (config.visualizations) {
+    Object.keys(config.visualizations).forEach(vizKey => {
+      const viz: Visualization = config.visualizations[vizKey]
+      if (viz.type === 'footnotes' && !footnoteIds.includes(vizKey)) {
+        // if footnote isn't being used by any rows, remove it
+        delete config.visualizations[vizKey]
+      }
+    })
+  }
+}
+
+const cleanDashboardData = (config: DashboardConfig) => {
+  if (config.datasets) {
+    Object.keys(config.datasets).forEach(datasetKey => {
+      delete config.datasets[datasetKey].formattedData
+      if (config.datasets[datasetKey].dataUrl) {
+        delete config.datasets[datasetKey].data
+      }
+    })
+  }
+  if (config.visualizations) {
+    Object.keys(config.visualizations).forEach(vizKey => {
+      config.visualizations[vizKey] = _.omit(config.visualizations[vizKey], ['runtime', 'formattedData', 'data', 'editing', 'originalFormattedData'])
+    })
+  }
+  if (config.rows) {
+    config.rows.forEach((row, i) => {
+      if (row.dataKey) {
+        config.rows[i] = _.omit(row, ['data', 'formattedData'])
+      }
+    })
+  }
+}
+
+const cleanSharedFilters = (config: DashboardConfig) => {
+  if (config.dashboard?.sharedFilters) {
+    config.dashboard.sharedFilters.forEach((filter, index) => {
+      delete config.dashboard.sharedFilters[index].active
+      if (filter.type === 'urlfilter') {
+        delete config.dashboard.sharedFilters[index].values
+      }
+    })
+  }
+}
+
+export const formatConfigBeforeSave = configToStrip => {
+  const strippedConfig = _.cloneDeep(configToStrip)
+  if (strippedConfig.type === 'dashboard') {
+    if (strippedConfig.multiDashboards) {
+      strippedConfig.multiDashboards.forEach((multiDashboard, i) => {
+        cleanDashboardData(strippedConfig.multiDashboards[i])
+        cleanSharedFilters(strippedConfig.multiDashboards[i])
+        cleanDashboardFootnotes(strippedConfig.multiDashboards[i])
+      })
+      delete strippedConfig.dashboard
+      delete strippedConfig.rows
+      delete strippedConfig.visualizations
+      delete strippedConfig.label
+      delete strippedConfig.activeDashboard
+    }
+    cleanDashboardData(strippedConfig)
+    cleanSharedFilters(strippedConfig)
+    cleanDashboardFootnotes(strippedConfig)
+  } else {
+    delete strippedConfig.runtime
+    delete strippedConfig.formattedData
+    if (strippedConfig.dataUrl) {
+      delete strippedConfig.data
+    }
+  }
+
+  return strippedConfig
+}

package/helpers/gatherQueryParams.ts

@@ -1,7 +1,14 @@
-export const gatherQueryParams = (params: {key: string, value: string}[]) => {
-    return params.map(({key, value}, i) => {
-        const leadingCharacter = i === 0 ? '?' : '&'
-        return leadingCharacter + key + '=' + value
-      })
-      .join('')
-  }
+import _ from 'lodash'
+
+export const gatherQueryParams = (baseEndpoint: string, params: { key: string; value: string }[]) => {
+  const baseEndpointHasQueryParams = baseEndpoint.includes('?')
+  return params
+    .filter(({ value }) => value !== '')
+    .map(({ key, value }, i) => {
+      const leadingCharacter = i === 0 && !baseEndpointHasQueryParams ? '?' : '&'
+      const isStatementParam = key.match(/\$.*/)
+      if (!_.isNaN(parseInt(value)) || isStatementParam) return leadingCharacter + key + '=' + value
+      return leadingCharacter + key + '=' + `"${value}"`
+    })
+    .join('')
+}

package/helpers/getGradientLegendWidth.ts

@@ -0,0 +1,15 @@
+export const getGradientLegendWidth = (containerWidth: number, currentViewport: string): number => {
+  const newWidth = Number(containerWidth)
+  switch (currentViewport) {
+    case 'lg':
+      return newWidth / 3
+    case 'md':
+      return newWidth / 2
+    case 'sm':
+    case 'xs':
+    case 'xxs':
+      return newWidth / 1.4
+    default:
+      return newWidth
+  }
+}

package/helpers/getTextWidth.ts

@@ -0,0 +1,18 @@
+/**
+ * Gets the width of the specified text using a given font.
+ * @param text The text to measure.
+ * @param font The CSS font declaration to use, defaults to the body's font if not provided.
+ * @returns The width of the text in pixels, or undefined if the context could not be obtained.
+ */
+export const getTextWidth = (text: string, font?: string): number | undefined => {
+  // Create a canvas element
+  const canvas = document.createElement('canvas')
+  const context = canvas.getContext('2d')
+  if (!context) {
+    console.error('2D context not found')
+    return
+  }
+
+  context.font = font || getComputedStyle(document.body).font
+  return Math.ceil(context.measureText(text).width)
+}

package/helpers/lineChartHelpers.js

@@ -3,5 +3,6 @@ export const approvedCurveTypes = {
   Cardinal: 'curveCardinal',
   Natural: 'curveNatural',
   'Monotone X': 'curveMonotoneX',
-  Step: 'curveStep'
+  Step: 'curveStep',
+  'Curve Basis': 'curveBasis'
 }

package/helpers/pivotData.ts

@@ -0,0 +1,18 @@
+import _ from 'lodash'
+
+/** columnName is the column you'd like to select data values from to show as column headers.
+ *  Pivot is the value column who's data you'd like to show under those respective columns*/
+export const pivotData = (data: Record<string, any>[], columnName: string, pivot: string) => {
+  const grouped = _.groupBy(data, val => val[columnName])
+  const newData = []
+  for (const key in grouped) {
+    const group = grouped[key]
+    group.forEach((val, index) => {
+      const row = newData[index] || {}
+      row[key] = val[pivot]
+      const toAdd = _.omit(val, [columnName, pivot])
+      newData[index] = { ...toAdd, ...row }
+    })
+  }
+  return newData
+}

package/helpers/queryStringUtils.ts

@@ -0,0 +1,29 @@
+export function getQueryStringFilterValue(filter) {
+  const urlParams = new URLSearchParams(window.location.search)
+  if (filter.setByQueryParameter) {
+    // Only check the query string if the filter is supposed to be set by QS param
+    const filterValue = urlParams.get(filter.setByQueryParameter)
+    if (filterValue && filter.values) {
+      for (let i = 0; i < filter.values.length; i++) {
+        if (filter.values[i] && filter.values[i].toLowerCase() === filterValue.toLowerCase()) {
+          return filter.values[i]
+        }
+      }
+    }
+  }
+}
+
+export function getQueryParams() {
+  const queryParams = {}
+  for (const [key, value] of Array.from(new URLSearchParams(window.location.search).entries())) {
+    queryParams[key] = value
+  }
+  return queryParams
+}
+
+export function updateQueryString(queryParams) {
+  const updateUrl = `${window.location.origin}${window.location.pathname}?${Object.keys(queryParams)
+    .map(queryParam => `${queryParam}=${encodeURIComponent(queryParams[queryParam])}`)
+    .join('&')}`
+  window.history.pushState({ path: updateUrl }, '', updateUrl)
+}

package/helpers/scaling.ts

@@ -0,0 +1,7 @@
+export const invertValue = (xScale, value) => {
+  if (xScale && typeof xScale.invert === 'function') {
+    return xScale.invert(value)
+  } else {
+    return null
+  }
+}

package/helpers/tests/addValuesToFilters.test.ts

@@ -0,0 +1,55 @@
+import _ from 'lodash'
+import { VizFilter } from '../../types/VizFilter'
+import { addValuesToFilters } from '../addValuesToFilters'
+import { describe, it, expect, vi } from 'vitest'
+
+describe('addValuesToFilters', () => {
+  const parentFilter = { columnName: 'parentColumn', id: 11, active: 'apple', values: [] } as VizFilter
+  const parentFilter2 = { columnName: 'parentColumn2', id: 22, active: '1', values: [] } as VizFilter
+  const childFilter = { columnName: 'childColumn', id: 33, parents: [11, 22], values: [] } as VizFilter
+  const data = [
+    { parentColumn: 'apple', parentColumn2: 3, childColumn: 'a' },
+    { parentColumn: 'apple', parentColumn2: 1, childColumn: 'b' },
+    { parentColumn: 'pear', parentColumn2: 4, childColumn: 'c' }
+  ]
+  const filters: VizFilter[] = [parentFilter, childFilter, parentFilter2]
+  it('adds filter values based on parent active values', () => {
+    const filtersCopy = _.cloneDeep(filters)
+    const newFilters = addValuesToFilters(filtersCopy, data)
+    expect(newFilters[0].values).toEqual(['apple', 'pear'])
+    expect(newFilters[2].values).toEqual([3, 1, 4])
+    expect(newFilters[1].values).toEqual(['b'])
+
+    filtersCopy[0].active = 'pear'
+    const newFilters2 = addValuesToFilters(filtersCopy, data)
+    expect(newFilters2[0].values).toEqual(['apple', 'pear'])
+    expect(newFilters2[2].values).toEqual([3, 1, 4])
+    expect(newFilters2[1].values).toEqual([])
+  })
+  it('works when data is an object', () => {
+    const filtersCopy = _.cloneDeep(filters)
+    const newFilters = addValuesToFilters(filtersCopy, { '0': data })
+    expect(newFilters[0].values).toEqual(['apple', 'pear'])
+    expect(newFilters[2].values).toEqual([3, 1, 4])
+    // This test is failing
+    // data is only an object when using map data according to Adam Doe.
+    //expect(newFilters[1].values).toEqual([])
+  })
+  it('works for nested dropdowns', () => {
+    const nestedParentFilter = { ...parentFilter, 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'] } })
+    nestedParentFilter.active = 'apple'
+    expect(newFilters[0].subGrouping.active).toEqual('a')
+  })
+  it('maintains nested custom order', () => {
+    const nestedParentFilter = {
+      ...parentFilter,
+      subGrouping: { columnName: 'childColumn', valuesLookup: { apple: { orderedValues: ['b', 'a'] } } }
+    }
+    const newFilters = addValuesToFilters([nestedParentFilter], data)
+    expect(newFilters[0].values).toEqual(['apple', 'pear'])
+    expect(newFilters[0].subGrouping.valuesLookup.apple.orderedValues).toEqual(['b', 'a'])
+  })
+})

package/helpers/tests/filterVizData.test.ts

@@ -0,0 +1,31 @@
+import { describe, it, expect } from 'vitest'
+import { filterVizData } from '../filterVizData'
+describe('filterVizData', () => {
+  it('filters data when there is a nested filter', () => {
+    const nestedFilter = {
+      columnName: 'nestedColumn',
+      id: 1,
+      active: 'nestedValue',
+      values: [],
+      filterStyle: 'nested-dropdown',
+      subGrouping: {
+        active: 'subGroupValue',
+        columnName: 'subGroupColumn',
+        valuesLookup: { nestedValue: { values: ['subGroupValue'] } }
+      }
+    }
+    const normalFilter = { columnName: 'normalColumn', id: 2, active: 'normalValue', values: [] }
+
+    const data = [
+      { nestedColumn: 'nestedValue', subGroupColumn: 'subGroupValue', normalColumn: 'normalValue' },
+      { nestedColumn: 'X', subGroupColumn: 'subGroupValue', normalColumn: 'normalValue' },
+      { nestedColumn: 'nestedValue', subGroupColumn: 'X', normalColumn: 'normalValue' },
+      { nestedColumn: 'nestedValue', subGroupColumn: 'subGroupValue', normalColumn: 'X' },
+      { nestedColumn: 'nestedValue', subGroupColumn: 'subGroupValue', normalColumn: 'normalValue' }
+    ]
+
+    const filters = [nestedFilter, normalFilter]
+    const filteredData = filterVizData(filters, data)
+    expect(filteredData.length).toEqual(2)
+  })
+})

package/helpers/tests/invertValue.test.ts

@@ -0,0 +1,35 @@
+// invertValue.test.js
+import { invertValue } from '../scaling'
+import { expect, describe, it, vi } from 'vitest'
+describe('invertValue', () => {
+  it('should return the inverted value if xScale has an invert function', () => {
+    const xScale = {
+      invert: vi.fn().mockReturnValue(50)
+    }
+    const value = 100
+
+    const result = invertValue(xScale, value)
+
+    expect(xScale.invert).toHaveBeenCalledWith(value)
+    expect(result).toBe(50)
+  })
+
+  it('should return null if xScale does not have an invert function', () => {
+    const xScale = {}
+    const value = 100
+
+    const result = invertValue(xScale, value)
+
+    expect(result).toBeNull()
+  })
+
+  it('should return null if xScale is null or undefined', () => {
+    const value = 100
+
+    const resultWithNull = invertValue(null, value)
+    const resultWithUndefined = invertValue(undefined, value)
+
+    expect(resultWithNull).toBeNull()
+    expect(resultWithUndefined).toBeNull()
+  })
+})

package/helpers/tests/updateFieldFactory.test.ts

@@ -1,4 +1,5 @@
 import { updateFieldFactory } from '../updateFieldFactory'
+import { expect, describe, it } from 'vitest'
 
 describe('updateFieldFactory', () => {
   it('should update the top level field when section and subsection are null', () => {

package/helpers/updateFieldFactory.ts

@@ -1,7 +1,7 @@
 import { UpdateFieldFunc } from '../types/UpdateFieldFunc'
 
 export const updateFieldFactory =
-  (config, updateConfig, legacy = false): UpdateFieldFunc<any> =>
+  <T>(config, updateConfig, legacy = false): UpdateFieldFunc<T> =>
   (section, subsection, fieldName, newValue) => {
     // Top level
     if (null === section && null === subsection) {

package/helpers/updatePaletteNames.ts

@@ -0,0 +1,19 @@
+interface ColorPalettes {
+  [paletteName: string]: string[]
+}
+
+export const updatePaletteNames = (colorPalettes: ColorPalettes): ColorPalettes => {
+  // This function adds REVERSE keyword to each palette
+  delete colorPalettes.qualitative9 // Delete palette before reversing
+
+  let paletteReversed: ColorPalettes = {}
+  for (const [paletteName, hexCodeArr] of Object.entries(colorPalettes)) {
+    const paletteStr = String(paletteName)
+
+    if (!paletteStr.endsWith('reverse')) {
+      let palette = paletteStr.concat('reverse') // Add to the end of the string "reverse"
+      paletteReversed[palette] = [...hexCodeArr].reverse() // Reverses array elements and create new keys on object
+    }
+  }
+  return { ...paletteReversed, ...colorPalettes }
+}