@cdc/core 4.25.6 → 4.25.8

package/helpers/ver/4.25.8.ts

@@ -0,0 +1,61 @@
+import _ from 'lodash'
+
+export const updateAxisColors = config => {
+  if (config.type === 'chart') {
+    if (config.xAxis) {
+      ;['labelColor', 'tickLabelColor', 'tickColor'].forEach(k => {
+        if (config.xAxis[k] === '#333') {
+          config.xAxis[k] = '#1c1d1f'
+        }
+      })
+    }
+    if (config.yAxis) {
+      ;[
+        'labelColor',
+        'tickLabelColor',
+        'tickColor',
+        'rightAxisLabelColor',
+        'rightAxisTickLabelColor',
+        'rightAxisTickColor'
+      ].forEach(k => {
+        if (config.yAxis[k] === '#333') {
+          config.yAxis[k] = '#1c1d1f'
+        }
+      })
+    }
+  } else if (config.type === 'dashboard') {
+    Object.values(config.visualizations).forEach(visualization => {
+      updateAxisColors(visualization)
+    })
+  }
+}
+
+export const updateStatePickedToStatesPicked = config => {
+  if (config.type === 'map') {
+    if (config.general?.statePicked) {
+      config.general.statesPicked = [{ ...config.general.statePicked }]
+      delete config.general.statePicked
+    }
+    // Also migrate the property name for filter controls
+    if (config.general?.filterControlsStatePicked) {
+      config.general.filterControlsStatesPicked = config.general.filterControlsStatePicked
+      delete config.general.filterControlsStatePicked
+    }
+  }
+  if (config.type === 'dashboard') {
+    Object.values(config.visualizations).forEach(visualization => {
+      updateStatePickedToStatesPicked(visualization)
+    })
+  }
+}
+
+const update_4_25_8 = config => {
+  const ver = '4.25.8'
+  const newConfig = _.cloneDeep(config)
+  updateAxisColors(newConfig)
+  updateStatePickedToStatesPicked(newConfig)
+  newConfig.version = ver
+  return newConfig
+}
+
+export default update_4_25_8

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

@@ -0,0 +1,86 @@
+import { updateStatePickedToStatesPicked } from '../4.25.8'
+import { coveUpdateWorker } from '../../coveUpdateWorker'
+import { expect, describe, it } from 'vitest'
+
+describe('4.25.8 update worker', () => {
+  describe('updateStatePickedToStatesPicked', () => {
+    it('converts statePicked to statesPicked for map config', () => {
+      const mockConfig = {
+        type: 'map',
+        general: {
+          statePicked: { fipsCode: '12', stateName: 'Florida' }
+        }
+      } as any
+
+      updateStatePickedToStatesPicked(mockConfig)
+
+      expect(mockConfig.general.statePicked).toBeUndefined()
+      expect(mockConfig.general.statesPicked).toEqual([{ fipsCode: '12', stateName: 'Florida' }])
+    })
+
+    it('converts filterControlsStatePicked to filterControlsStatesPicked for map config', () => {
+      const mockConfig = {
+        type: 'map',
+        general: {
+          filterControlsStatePicked: 'State',
+          statePicked: { fipsCode: '12', stateName: 'Florida' }
+        }
+      } as any
+
+      updateStatePickedToStatesPicked(mockConfig)
+
+      expect(mockConfig.general.filterControlsStatePicked).toBeUndefined()
+      expect(mockConfig.general.filterControlsStatesPicked).toBe('State')
+      expect(mockConfig.general.statesPicked).toEqual([{ fipsCode: '12', stateName: 'Florida' }])
+    })
+
+    it('handles dashboard with map visualizations', () => {
+      const mockConfig = {
+        type: 'dashboard',
+        visualizations: {
+          map1: {
+            type: 'map',
+            general: {
+              filterControlsStatePicked: 'State',
+              statePicked: { fipsCode: '01', stateName: 'Alabama' }
+            }
+          }
+        }
+      } as any
+
+      updateStatePickedToStatesPicked(mockConfig)
+
+      const mapViz = mockConfig.visualizations.map1.general
+      expect(mapViz.filterControlsStatePicked).toBeUndefined()
+      expect(mapViz.filterControlsStatesPicked).toBe('State')
+      expect(mapViz.statePicked).toBeUndefined()
+      expect(mapViz.statesPicked).toEqual([{ fipsCode: '01', stateName: 'Alabama' }])
+    })
+
+    it('works with full update worker integration', () => {
+      const mockConfig = {
+        type: 'dashboard',
+        version: '4.24.9',
+        rows: [], // Add missing rows property
+        visualizations: {
+          map1: {
+            type: 'map',
+            general: {
+              filterControlsStatePicked: 'State',
+              statePicked: { fipsCode: '12', stateName: 'Florida' }
+            }
+          }
+        }
+      } as any
+
+      const updatedConfig = coveUpdateWorker(mockConfig)
+
+      expect(updatedConfig.version).toBe('4.25.8')
+      const mapViz = updatedConfig.visualizations.map1.general
+      expect(mapViz.filterControlsStatePicked).toBeUndefined()
+      expect(mapViz.filterControlsStatesPicked).toBe('State')
+      expect(mapViz.statePicked).toBeUndefined()
+      expect(mapViz.statesPicked).toEqual([{ fipsCode: '12', stateName: 'Florida' }])
+    })
+  })
+})

package/helpers/viewports.ts

@@ -12,3 +12,5 @@ export const isMobileHeightViewport = currentViewport => isBelowBreakpoint('sm',
 export const isMobileStateLabelViewport = currentViewport => isBelowBreakpoint('md', currentViewport)
 
 export const isMobileTerritoryViewport = currentViewport => isBelowBreakpoint('sm', currentViewport)
+
+export const isMobileFontViewport = currentViewport => isBelowBreakpoint('sm', currentViewport)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cdc/core",
-  "version": "4.25.6",
+  "version": "4.25.8",
   "description": "Core components, styles, hooks, and helpers, for the CDC Open Visualization project",
   "moduleName": "CdcCore",
   "main": "dist/cdccore",
@@ -21,7 +21,7 @@
   },
   "license": "Apache-2.0",
   "dependencies": {
-    "dompurify": "^3.2.6",
+    "dompurify": "^3.2.4",
     "html2canvas": "^1.4.1",
     "json-edit-react": "^1.27.0",
     "prop-types": "^15.8.1",
@@ -29,13 +29,15 @@
     "react-select": "^5.3.1",
     "react-tooltip": "5.8.2-beta.3",
     "sass": "^1.89.2",
-    "use-debounce": "^10.0.5"
+    "use-debounce": "^10.0.5",
+    "vega": "^6.1.0",
+    "vega-lite": "^6.1.0"
   },
   "peerDependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
-  "gitHead": "6097de1ff814001880d9ac64bd66becdc092d63c",
+  "gitHead": "e369994230b5e3facff224e1d89d5937528ac5a0",
   "devDependencies": {
     "sass": "^1.79.4"
   }

package/styles/_accessibility.scss

@@ -0,0 +1,8 @@
+// Only frontend styles are applied in WCMS/TP
+// This helps match those styles when viewing in the editor
+.modal.cdc-cove-editor *:focus-visible,
+.cdc-open-viz-module *:focus-visible {
+  outline: dashed 2px rgb(0, 122, 153) !important;
+  outline-offset: 3px !important;
+  border-radius: 6px !important;
+}

package/styles/_button-section.scss

@@ -14,9 +14,7 @@
 
 // links that appear above data tables
 .download-links {
-  display: flex;
   justify-content: flex-end;
-  width: 100%;
   line-height: 1;
   &.brush-active {
     margin-top: 2em;

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/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/types/ForecastingSeriesKey.ts

@@ -0,0 +1,15 @@
+export type ForecastingSeriesKey = {
+  dataKey: string
+  axis: 'Left'
+  tooltip: boolean
+  type: 'Forecasting'
+  confidenceIntervals: {
+    high: string
+    low: string
+  }[]
+  stageColumn: string
+  stages: {
+    key: string
+    color: string
+  }[]
+}

package/types/Runtime.ts

@@ -1,13 +1,7 @@
 import { Axis } from './Axis'
+import { ForecastingSeriesKey } from './ForecastingSeriesKey'
 import { Series } from './Series'
 
-export type ForecastingSeriesKey = {
-  stages: {
-    key: string
-    color: string
-  }[]
-}
-
 export type Runtime = {
   barSeriesKeys?: string[]
   areaSeriesKeys: object[]

package/types/Series.ts

@@ -5,4 +5,8 @@ export type Series = {
   type: string
   tooltip: boolean
   dynamicCategory?: string
+  confidenceIntervals?: {
+    high: string
+    low: string
+  }[]
 }[]

package/types/Table.ts

@@ -23,6 +23,7 @@ export type Table = {
   pivot?: Pivot
   show?: boolean
   sharedFilterColumns?: string[] // added at runtime by Dashboard
+  showBottomCollapse?: boolean // if true, the table will have a button to collapse at bottom of the expanded table
   showDataTableLink?: boolean
   showDownloadImgButton?: boolean
   showDownloadLinkBelow?: boolean

package/helpers/events.js

@@ -1,14 +0,0 @@
-function subscribe(eventName, listener) {
-  document.addEventListener(eventName, listener)
-}
-
-function unsubscribe(eventName, listener) {
-  document.removeEventListener(eventName, listener)
-}
-
-function publish(eventName, data) {
-  const event = new CustomEvent(eventName, { detail: data })
-  document.dispatchEvent(event)
-}
-
-export { publish, subscribe, unsubscribe }