@cdc/core 4.25.3 → 4.25.6-1

package/helpers/isNumber.ts

@@ -0,0 +1,20 @@
+/**
+ * Checks whether the given input is a valid number.
+ *
+ * Handles both numeric types and numeric strings, including negative values.
+ *
+ * @param value - The value to check. Can be of any type.
+ * @returns boolean - True if the value is a number or a numeric string.
+ */
+export default function isNumber(value: unknown = ''): boolean {
+  if (typeof value === 'number') {
+    return !Number.isNaN(value)
+  }
+
+  if (typeof value === 'string') {
+    return value.trim() !== '' && /^-?\d+(\.\d+)?$/.test(value.trim())
+    // Matches optional leading "-", integers, or decimals (e.g., "-123", "123.45")
+  }
+
+  return false
+}

package/helpers/isRightAlignedTableValue.js

@@ -12,7 +12,7 @@ export default function isRightAlignedTableValue(value = '') {
     if (/^\d{4}-\d{1,2}-\d{1,2}$/.test(value)) {
       return false
     }
-    return numericStrings.includes(value) || /^[\$\d\.\%\,\-\s\(\)CI]*$/.test(value)
+    return numericStrings.includes(value) || /^[\$\d\.\%\,\-\s\(\)CI<>]*$/.test(value)
   }
   return false
 }

package/helpers/pivotData.ts

@@ -1,9 +1,5 @@
 import _ from 'lodash'
 
-const getKeyFromRow = (row: Record<string, any>, columns: string[]) => {
-  return columns.map(column => row[column] || '').join(':')
-}
-
 const getColumns = (data: Record<string, any>[], columnName: string, pivot: string[], excludeColumns: string[]) => {
   const excludedColumns = [columnName, ...pivot, ...excludeColumns]
   return _.uniq(data.flatMap(row => Object.keys(row))).filter(col => !excludedColumns.includes(col))
@@ -18,18 +14,29 @@ export const pivotData = (
   excludeColumns: string[]
 ): Record<string, any>[] => {
   const columns = getColumns(data, columnName, pivot, excludeColumns)
-  const newColumns = {}
+  const newColumns = data.reduce((acc, row) => {
+    acc[row[columnName]] = ''
+    return acc
+  }, {})
+
+  const getKeyFromRow = (row: Record<string, any>, columns: string[], index) => {
+    // if there is only one column header, we need to avoid duplicate values overwriting each other other values in the row
+    const isSingleColumn = Object.keys(newColumns).length === 1
+    const keyIndex = isSingleColumn ? index : ''
+    return columns.map(column => row[column] || '').join(':') + keyIndex
+  }
+
   // there should be one row for every aggregate row
-  const aggregateRows = data.reduce((acc, row) => {
-    const key = getKeyFromRow(row, columns)
+  const aggregateRows = data.reduce((acc, row, index) => {
+    const key = getKeyFromRow(row, columns, index)
     if (!acc[key]) {
       acc[key] = {}
     }
     return acc
   }, {})
 
-  data.forEach(row => {
-    const key = getKeyFromRow(row, columns)
+  data.forEach((row, index) => {
+    const key = getKeyFromRow(row, columns, index)
     if (pivot.length > 1) {
       pivot.forEach(pivotColumn => {
         const toAdd = _.omit(row, [columnName, ...pivot])
@@ -50,8 +57,6 @@ export const pivotData = (
         _pivotedFrom: _pivot
       }
     }
-
-    newColumns[row[columnName]] = ''
   })
 
   if (pivot.length > 1) {

package/helpers/tests/pivotData.test.ts

@@ -51,4 +51,78 @@ describe('pivotData', () => {
       { city: 'San Francisco', Jane: 'yellow', John: 'green', _pivotedFrom: 'color' }
     ])
   })
+  it('should allow for duplicate data when there is 1 Column Header but different columnName data', () => {
+    // when there are multiple pivot value columns, if any other data is present it will break the pivot.
+    // so we need to tell it which columns to exclude from the pivot.
+    // 'other' is added here as an example.
+    const data = [
+      { name: 'John', age: 27, color: 'blue', city: 'New York', other: 'yes' },
+      { name: 'Jane', age: 27, color: 'red', city: 'New York', other: 'no' },
+      { name: 'Bob', age: 31, color: 'yellow', city: 'New York', other: 'yes' },
+      { name: 'Betty', age: 31, color: 'green', city: 'New York', other: 'no' },
+      { name: 'Jane', age: 31, color: 'yellow', city: 'New York', other: 'yes' },
+      { name: 'John', age: 31, color: 'green', city: 'New York', other: 'no' },
+      { name: 'Bob', age: 27, color: 'blue', city: 'New York', other: 'yes' },
+      { name: 'Betty', age: 27, color: 'red', city: 'New York', other: 'no' }
+    ]
+    const result = pivotData(data, 'city', ['name'], [])
+    expect(result).toEqual([
+      {
+        'New York': 'John',
+        age: 27,
+        color: 'blue',
+        other: 'yes',
+        _pivotedFrom: 'name'
+      },
+      {
+        'New York': 'Jane',
+        age: 27,
+        color: 'red',
+        other: 'no',
+        _pivotedFrom: 'name'
+      },
+      {
+        'New York': 'Bob',
+        age: 31,
+        color: 'yellow',
+        other: 'yes',
+        _pivotedFrom: 'name'
+      },
+      {
+        'New York': 'Betty',
+        age: 31,
+        color: 'green',
+        other: 'no',
+        _pivotedFrom: 'name'
+      },
+      {
+        'New York': 'Jane',
+        age: 31,
+        color: 'yellow',
+        other: 'yes',
+        _pivotedFrom: 'name'
+      },
+      {
+        'New York': 'John',
+        age: 31,
+        color: 'green',
+        other: 'no',
+        _pivotedFrom: 'name'
+      },
+      {
+        'New York': 'Bob',
+        age: 27,
+        color: 'blue',
+        other: 'yes',
+        _pivotedFrom: 'name'
+      },
+      {
+        'New York': 'Betty',
+        age: 27,
+        color: 'red',
+        other: 'no',
+        _pivotedFrom: 'name'
+      }
+    ])
+  })
 })

package/helpers/updateFieldFactory.ts

@@ -18,6 +18,7 @@ export const updateFieldFactory =
     const isArray = Array.isArray(config[section])
 
     let sectionValue = isArray ? [...config[section], newValue] : { ...config[section], [fieldName]: newValue }
+    if (!fieldName && !legacy) sectionValue = newValue
 
     if (null !== subsection) {
       if (isArray) {

package/helpers/ver/4.25.3.ts

@@ -2,17 +2,40 @@ import _ from 'lodash'
 
 const remapTableDownloadCSV = config => {
   if (config.general?.showDownloadButton !== undefined) {
-    const download = config.general.showDownloadButton
+    let download = config.general.showDownloadButton
+    if (config.type === 'chart') {
+      download = config.table.download || config.general.showDownloadButton
+    }
     delete config.general.showDownloadButton
     config.table.download = download
   }
   return config
 }
 
+const handleVisualizations = newConfig => {
+  if (newConfig.type === 'dashboard') {
+    Object.keys(newConfig.visualizations).forEach(key => {
+      const currentViz = newConfig.visualizations[key]
+      remapTableDownloadCSV(currentViz)
+    })
+  }
+  remapTableDownloadCSV(newConfig)
+}
+
+const migrateAreaChart = config => {
+  // Migrate regular Area Chart to Stacked
+  if (config.visualizationType === 'Area Chart' && config.visualizationSubType === 'regular') {
+    config.visualizationSubType = 'stacked'
+  }
+  return config
+}
+
 const update_4_25_3 = config => {
   const ver = '4.25.3'
   const newConfig = _.cloneDeep(config)
-  remapTableDownloadCSV
+  handleVisualizations(newConfig)
+  remapTableDownloadCSV(newConfig)
+  migrateAreaChart(newConfig)
   newConfig.version = ver
   return newConfig
 }

package/helpers/ver/4.25.4.ts

@@ -0,0 +1,110 @@
+import _ from 'lodash'
+
+export const makeChartLegendsUnified = config => {
+  if (config.type === 'chart') {
+    config.legend = config.legend || {}
+    config.legend.unified = true
+  } else if (config.type === 'dashboard') {
+    Object.values(config.visualizations).forEach(visualization => {
+      makeChartLegendsUnified(visualization)
+    })
+  }
+}
+
+const migrateTableGeneralSettings = config => {
+  if (config.type === 'map') {
+    if (config.general.showFullGeoNameInCSV) {
+      config.table.showFullGeoNameInCSV = config.general.showFullGeoNameInCSV
+    }
+    delete config.general.showFullGeoNameInCSV
+    return config
+  }
+}
+
+const hasMultipleWidgetColumns = row => {
+  const multipleColumns = row.columns.filter(column => column.widget).length > 1
+  return multipleColumns && !row.toggle
+}
+
+const newMarkupIncludeVisualization = (uid, footnotes) => {
+  return {
+    filters: [],
+    filterBehavior: 'Filter Change',
+    footnotes,
+    uid,
+    type: 'markup-include',
+    visualizationType: 'markup-include',
+    contentEditor: {
+      inlineHTML: '',
+      markupVariables: [],
+      showHeader: false,
+      srcUrl: '',
+      title: '',
+      useInlineHTML: false
+    },
+    theme: 'theme-blue',
+    visual: {
+      border: false,
+      accent: false,
+      background: false,
+      hideBackgroundColor: false,
+      borderColorTheme: false
+    }
+  }
+}
+
+const makeNewRow = uuid => {
+  return { columns: [{ width: 12, widget: uuid }] }
+}
+
+export const moveFootnotesToVizLevel = config => {
+  if (config.type === 'dashboard') {
+    const newRowsToAdd = [
+      /*old row index*/
+      /*new row object*/
+    ]
+    config.rows.forEach((row, index) => {
+      if (!row.footnotesId) return
+      const makeNewFootnotesRow = hasMultipleWidgetColumns(row)
+      const footnotesId = row.footnotesId
+      const footnote = _.pick(config.visualizations[footnotesId], ['dataKey', 'dynamicFootnotes', 'staticFootnotes'])
+      if (makeNewFootnotesRow) {
+        const uuid = `markup-include-${Date.now()}${index}`
+        const newRow = makeNewRow(uuid)
+        const newFootnotesViz = newMarkupIncludeVisualization(uuid, footnote)
+        config.visualizations[uuid] = newFootnotesViz
+        newRowsToAdd.push([index, newRow])
+      } else {
+        row.columns.forEach(column => {
+          if (!column.widget) return
+          const footnotes = config.visualizations[column.widget].footnotes
+          if (typeof footnotes === 'string') {
+            // move legacy footnotes
+            config.visualizations[column.widget].legacyFootnotes = footnotes
+          }
+          config.visualizations[column.widget].footnotes = footnote
+        })
+      }
+
+      delete config.visualizations[footnotesId]
+      delete row.footnotesId
+    })
+    if (newRowsToAdd.length) {
+      newRowsToAdd.forEach(([oldRowIndex, newRow]) => {
+        config.rows.splice(oldRowIndex + 1, 0, newRow)
+      })
+    }
+  }
+}
+
+const update_4_25_4 = config => {
+  const ver = '4.25.4'
+  const newConfig = _.cloneDeep(config)
+  makeChartLegendsUnified(newConfig)
+  migrateTableGeneralSettings(newConfig)
+  moveFootnotesToVizLevel(newConfig)
+  newConfig.version = ver
+  return newConfig
+}
+
+export default update_4_25_4

package/helpers/ver/4.25.6.ts

@@ -0,0 +1,36 @@
+import _ from 'lodash'
+
+// *NOTE: This ends support for only showing the top prefix
+export const changeOnlyShowTopSuffixToInlineLabel = config => {
+  if (config.type === 'chart') {
+    if (!config.dataFormat?.suffix) return config
+    if (!config.dataFormat.onlyShowTopPrefixSuffix) return config
+
+    delete config.dataFormat.onlyShowTopPrefixSuffix
+
+    if (!config.yAxis) config.yAxis = {}
+
+    if (!config.yAxis?.inlineLabel) {
+      config.yAxis.inlineLabel = config.dataFormat.suffix
+    }
+
+    config.dataFormat.suffix = ''
+
+    return config
+  } else if (config.type === 'dashboard') {
+    Object.values(config.visualizations).forEach(visualization => {
+      changeOnlyShowTopSuffixToInlineLabel(visualization)
+    })
+    return config
+  }
+}
+
+const update_4_25_6 = config => {
+  const ver = '4.25.6'
+  const newConfig = _.cloneDeep(config)
+  changeOnlyShowTopSuffixToInlineLabel(newConfig)
+  newConfig.version = ver
+  return newConfig
+}
+
+export default update_4_25_6

package/helpers/ver/4.25.7.ts

@@ -0,0 +1,26 @@
+import _ from 'lodash'
+
+export const updatePreliminaryDataSeriesKeys = config => {
+  if (config.type === 'chart') {
+    ;(config.preliminaryData || []).forEach(pd => {
+      if (!pd.seriesKeys) {
+        pd.seriesKeys = pd.seriesKey ? [pd.seriesKey] : []
+        delete pd.seriesKey
+      }
+    })
+  } else if (config.type === 'dashboard') {
+    Object.values(config.visualizations).forEach(visualization => {
+      updatePreliminaryDataSeriesKeys(visualization)
+    })
+  }
+}
+
+const update_4_25_7 = config => {
+  const ver = '4.25.7'
+  const newConfig = _.cloneDeep(config)
+  updatePreliminaryDataSeriesKeys(newConfig)
+  newConfig.version = ver
+  return newConfig
+}
+
+export default update_4_25_7

package/helpers/ver/tests/4.25.4.test.ts

@@ -0,0 +1,89 @@
+import { expect, describe, it } from 'vitest'
+import { makeChartLegendsUnified, moveFootnotesToVizLevel } from '../4.25.4'
+import { ChartConfig } from '@cdc/chart/src/types/ChartConfig'
+import { DashboardConfig } from '@cdc/dashboard/src/types/DashboardConfig'
+
+describe('makeChartLegendsUnified(config) ', () => {
+  it('sets chart legends unified to true', () => {
+    const mockConfig = { type: 'chart', legend: { unified: false } } as Partial<ChartConfig>
+    makeChartLegendsUnified(mockConfig)
+    expect(mockConfig.legend?.unified).toBe(true)
+  })
+  it('sets dashboard nested chart legends unified to true', () => {
+    const mockConfig = {
+      type: 'dashboard',
+      visualizations: {
+        '1': { type: 'chart', legend: { unified: false } } as ChartConfig,
+        '2': { type: 'chart', legend: { unified: false } } as ChartConfig
+      }
+    } as Partial<DashboardConfig>
+    makeChartLegendsUnified(mockConfig)
+    expect(mockConfig.visualizations['1'].legend?.unified).toBe(true)
+    expect(mockConfig.visualizations['2'].legend?.unified).toBe(true)
+  })
+})
+
+describe('moveFootnotesToVizLevel', () => {
+  it('moves footnotes to visualization level', () => {
+    const toMigrate = {
+      rows: [
+        {
+          columns: [
+            {
+              width: 12,
+              widget: 'table123'
+            },
+            {},
+            {}
+          ],
+          footnotesId: 'footnotes123'
+        }
+      ],
+      visualizations: {
+        table123: {},
+        footnotes123: {
+          uid: 'footnotes123',
+          type: 'footnotes',
+          visualizationType: 'footnotes',
+          dataKey: 'valid-data-chart.csv',
+          dynamicFootnotes: {
+            symbolColumn: 'Race',
+            textColumn: 'Age-adjusted rate'
+          }
+        }
+      },
+      type: 'dashboard',
+      version: '4.25.4'
+    }
+
+    const expectedMigration = {
+      rows: [
+        {
+          columns: [
+            {
+              width: 12,
+              widget: 'table123'
+            },
+            {},
+            {}
+          ]
+        }
+      ],
+      visualizations: {
+        table123: {
+          footnotes: {
+            dataKey: 'valid-data-chart.csv',
+            dynamicFootnotes: {
+              symbolColumn: 'Race',
+              textColumn: 'Age-adjusted rate'
+            }
+          }
+        }
+      },
+      type: 'dashboard',
+      version: '4.25.4'
+    }
+    moveFootnotesToVizLevel(toMigrate)
+    expect(toMigrate).toEqual(expectedMigration)
+  })
+})

package/helpers/ver/tests/4.25.6.test.ts

@@ -0,0 +1,84 @@
+import { expect, describe, it } from 'vitest'
+import { changeOnlyShowTopSuffixToInlineLabel } from '../4.25.6'
+
+describe('changeOnlyShowTopSuffixToInlineLabel(config) ', () => {
+  it("should'nt change config if no suffix", () => {
+    const config = {
+      type: 'chart',
+      dataFormat: {
+        onlyShowTopPrefixSuffix: true,
+        suffix: ''
+      }
+    }
+    const newConfig = changeOnlyShowTopSuffixToInlineLabel(config)
+    expect(newConfig).toEqual(config)
+  })
+  it("should't change suffix if onlyShowTopPrefixSuffix is false", () => {
+    const config = {
+      type: 'chart',
+      dataFormat: {
+        onlyShowTopPrefixSuffix: false,
+        suffix: 'test'
+      }
+    }
+    const newConfig = changeOnlyShowTopSuffixToInlineLabel(config)
+    expect(newConfig).toEqual(config)
+  })
+  it('should change suffix to inlineLabel if onlyShowTopPrefixSuffix is true', () => {
+    const config = {
+      type: 'chart',
+      dataFormat: {
+        onlyShowTopPrefixSuffix: true,
+        suffix: 'test'
+      }
+    }
+    const newConfig = changeOnlyShowTopSuffixToInlineLabel(config)
+    expect(newConfig.yAxis.inlineLabel).toBe('test')
+    expect(newConfig.dataFormat.onlyShowTopPrefixSuffix).toBe(undefined)
+    expect(newConfig.dataFormat.suffix).toBe('')
+  })
+  it("should't overwrite existing yAxis inlineLabel", () => {
+    const config = {
+      type: 'chart',
+      dataFormat: {
+        onlyShowTopPrefixSuffix: true,
+        suffix: 'test'
+      },
+      yAxis: {
+        inlineLabel: 'test2'
+      }
+    }
+    const newConfig = changeOnlyShowTopSuffixToInlineLabel(config)
+    expect(newConfig.yAxis.inlineLabel).toBe('test2')
+    expect(newConfig.dataFormat.onlyShowTopPrefixSuffix).toBe(undefined)
+    expect(newConfig.dataFormat.suffix).toBe('')
+  })
+  it('should change suffix to inlineLabel for dashboard visualizations', () => {
+    const config = {
+      type: 'dashboard',
+      visualizations: [
+        {
+          type: 'chart',
+          dataFormat: {
+            onlyShowTopPrefixSuffix: true,
+            suffix: 'test'
+          }
+        },
+        {
+          type: 'chart',
+          dataFormat: {
+            onlyShowTopPrefixSuffix: true,
+            suffix: 'test2'
+          }
+        }
+      ]
+    }
+    const newConfig = changeOnlyShowTopSuffixToInlineLabel(config)
+    expect(newConfig.visualizations[0].yAxis.inlineLabel).toBe('test')
+    expect(newConfig.visualizations[0].dataFormat.onlyShowTopPrefixSuffix).toBe(undefined)
+    expect(newConfig.visualizations[0].dataFormat.suffix).toBe('')
+    expect(newConfig.visualizations[1].yAxis.inlineLabel).toBe('test2')
+    expect(newConfig.visualizations[1].dataFormat.onlyShowTopPrefixSuffix).toBe(undefined)
+    expect(newConfig.visualizations[1].dataFormat.suffix).toBe('')
+  })
+})

package/helpers/viewports.ts

@@ -8,3 +8,7 @@ export const isBelowBreakpoint = (breakpoint: ViewportSize, currentViewport: Vie
 export const isLegendWrapViewport = currentViewport => isBelowBreakpoint('sm', currentViewport)
 
 export const isMobileHeightViewport = currentViewport => isBelowBreakpoint('sm', currentViewport)
+
+export const isMobileStateLabelViewport = currentViewport => isBelowBreakpoint('md', currentViewport)
+
+export const isMobileTerritoryViewport = currentViewport => isBelowBreakpoint('sm', currentViewport)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cdc/core",
-  "version": "4.25.3",
+  "version": "4.25.6-1",
   "description": "Core components, styles, hooks, and helpers, for the CDC Open Visualization project",
   "moduleName": "CdcCore",
   "main": "dist/cdccore",
@@ -21,20 +21,21 @@
   },
   "license": "Apache-2.0",
   "dependencies": {
+    "dompurify": "^3.2.6",
     "html2canvas": "^1.4.1",
-    "json-edit-react": "^1.12.0",
-    "papaparse": "^5.3.0",
+    "json-edit-react": "^1.27.0",
     "prop-types": "^15.8.1",
-    "react-accessible-accordion": "^5.0.0",
+    "react-accessible-accordion": "^5.0.1",
     "react-select": "^5.3.1",
     "react-tooltip": "5.8.2-beta.3",
-    "use-debounce": "^6.0.1"
+    "sass": "^1.89.2",
+    "use-debounce": "^10.0.5"
   },
   "peerDependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
-  "gitHead": "b09566f5a7d57c8d0109e5f407257729d6b36846",
+  "gitHead": "ac45ee0f1d6a4045648c4e083992fc091795e084",
   "devDependencies": {
     "sass": "^1.79.4"
   }

package/styles/_global-variables.scss

@@ -8,6 +8,7 @@ $colors: (
   'darkGray': #333,
   'red': #d8000c,
   'white': #fff,
+  'silver': #eee,
 
   'primary': #005eaa,
   'secondary': #88c3ea,
@@ -106,4 +107,6 @@ $colors: (
   --filter-buttons-font-size: 0.889rem;
   --superTitle-font-size: 0.833rem;
   --title-font-size: 1.222rem;
+  --territory-label-font-size: 0.809rem;
+  --territory-label-font-size-mobile: 0.556rem;
 }

package/styles/_global.scss

@@ -193,8 +193,4 @@ section.footnotes {
   -webkit-appearance: none;
   -moz-appearance: none;
   cursor: pointer;
-  &:focus-visible {
-    outline: 2px dashed var(--colors-blue-vivid-60, #005ea2) !important;
-    outline-offset: 2px;
-  }
 }

package/styles/_reset.scss

@@ -7,12 +7,6 @@
   font-style: normal;
   text-rendering: optimizeLegibility;
 
-  // match cdc site outline
-  :focus,
-  [tabindex]:focus-visible {
-    outline: 2px solid rgba(255, 102, 1, 0.9) !important;
-  }
-
   .outline-none {
     outline: none !important;
   }

package/styles/filters.scss

@@ -93,10 +93,6 @@ div.single-filters {
     &:focus:not(:focus-visible) {
       outline: none !important;
     }
-    &:focus-visible {
-      outline: 2px dashed var(--colors-blue-vivid-60, #005ea2) !important;
-      outline-offset: 3px;
-    }
 
     &.tab--active {
       font-weight: 500;

package/styles/v2/main.scss

@@ -6,11 +6,6 @@
   font-size: 16px;
   line-height: 1.4;
 
-  :focus,
-  [tabindex]:focus-visible {
-    outline: 2px solid rgba(255, 102, 1, 0.9);
-  }
-
   margin: 0;
   font-family: var(--app-font-main);
   font-size: 1em;

package/types/Axis.ts

@@ -17,6 +17,7 @@ export type Axis = {
   hideAxis?: boolean
   hideLabel?: boolean
   hideTicks?: boolean
+  inlineLabel?: string
   label?: string
   labelOffset?: number
   labelPlacement?: string
@@ -50,4 +51,5 @@ export type Axis = {
   axisBBox: number
   maxValue: string
   sortByRecentDate: boolean
+  brushActive: boolean
 }