@cdc/core 4.25.7 → 4.25.10

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

@@ -0,0 +1,204 @@
+import update_4_25_10 from '../4.25.10'
+import { expect, describe, it } from 'vitest'
+
+describe('update_4_25_10 - Markup Variables Migration', () => {
+  it('should migrate markup-include variables from contentEditor to root level', () => {
+    const config: any = {
+      type: 'markup-include',
+      version: '4.25.9',
+      contentEditor: {
+        markupVariables: [
+          { name: 'State', tag: '{{state}}', columnName: 'state', conditions: [] }
+        ]
+      }
+    }
+
+    const result = update_4_25_10(config)
+
+    expect(result.markupVariables).toEqual([
+      { name: 'State', tag: '{{state}}', columnName: 'state', conditions: [] }
+    ])
+    expect(result.contentEditor.markupVariables).toBeUndefined()
+    expect(result.enableMarkupVariables).toBe(true)
+    expect(result.version).toBe('4.25.10')
+  })
+
+  it('should enable markup variables flag when variables exist', () => {
+    const config: any = {
+      type: 'markup-include',
+      version: '4.25.9',
+      contentEditor: {
+        markupVariables: [
+          { name: 'Var1', tag: '{{var1}}', columnName: 'col1', conditions: [] },
+          { name: 'Var2', tag: '{{var2}}', columnName: 'col2', conditions: [] }
+        ]
+      }
+    }
+
+    const result = update_4_25_10(config)
+
+    expect(result.enableMarkupVariables).toBe(true)
+    expect(result.markupVariables).toHaveLength(2)
+  })
+
+  it('should initialize empty markupVariables array if none exist', () => {
+    const config: any = {
+      type: 'markup-include',
+      version: '4.25.9',
+      contentEditor: {}
+    }
+
+    const result = update_4_25_10(config)
+
+    expect(result.markupVariables).toEqual([])
+    expect(result.enableMarkupVariables).toBeUndefined()
+  })
+
+  it('should handle dashboard configs with nested visualizations', () => {
+    const config: any = {
+      type: 'dashboard',
+      version: '4.25.9',
+      visualizations: {
+        viz1: {
+          type: 'markup-include',
+          contentEditor: {
+            markupVariables: [
+              { name: 'Test', tag: '{{test}}', columnName: 'test', conditions: [] }
+            ]
+          }
+        },
+        viz2: {
+          type: 'chart',
+          title: 'Chart'
+        },
+        viz3: {
+          type: 'markup-include',
+          contentEditor: {
+            markupVariables: [
+              { name: 'Another', tag: '{{another}}', columnName: 'another', conditions: [] }
+            ]
+          }
+        }
+      }
+    }
+
+    const result = update_4_25_10(config)
+
+    expect(result.visualizations.viz1.markupVariables).toHaveLength(1)
+    expect(result.visualizations.viz1.enableMarkupVariables).toBe(true)
+    expect(result.visualizations.viz1.contentEditor.markupVariables).toBeUndefined()
+
+    expect(result.visualizations.viz3.markupVariables).toHaveLength(1)
+    expect(result.visualizations.viz3.enableMarkupVariables).toBe(true)
+    expect(result.visualizations.viz3.contentEditor.markupVariables).toBeUndefined()
+
+    // Chart should remain unchanged except version
+    expect(result.visualizations.viz2.title).toBe('Chart')
+  })
+
+  it('should not modify non-markup-include configs', () => {
+    const config: any = {
+      type: 'chart',
+      version: '4.25.9',
+      title: 'My Chart'
+    }
+
+    const result = update_4_25_10(config)
+
+    expect(result.markupVariables).toBeUndefined()
+    expect(result.enableMarkupVariables).toBeUndefined()
+    expect(result.title).toBe('My Chart')
+    expect(result.version).toBe('4.25.10')
+  })
+
+  it('should be idempotent - safe to run multiple times', () => {
+    const config: any = {
+      type: 'markup-include',
+      version: '4.25.9',
+      contentEditor: {
+        markupVariables: [
+          { name: 'State', tag: '{{state}}', columnName: 'state', conditions: [] }
+        ]
+      }
+    }
+
+    // Run migration twice
+    const result1 = update_4_25_10(config)
+    const result2 = update_4_25_10(result1)
+
+    // Should produce same result
+    expect(result2.markupVariables).toEqual(result1.markupVariables)
+    expect(result2.enableMarkupVariables).toBe(result1.enableMarkupVariables)
+    expect(result2.version).toBe('4.25.10')
+  })
+
+  it('should preserve other contentEditor properties', () => {
+    const config: any = {
+      type: 'markup-include',
+      version: '4.25.9',
+      contentEditor: {
+        markupVariables: [
+          { name: 'Test', tag: '{{test}}', columnName: 'test', conditions: [] }
+        ],
+        otherProperty: 'should remain',
+        nested: {
+          value: 123
+        }
+      }
+    }
+
+    const result = update_4_25_10(config)
+
+    expect(result.contentEditor.otherProperty).toBe('should remain')
+    expect(result.contentEditor.nested).toEqual({ value: 123 })
+    expect(result.contentEditor.markupVariables).toBeUndefined()
+  })
+
+  it('should handle empty markupVariables array in contentEditor', () => {
+    const config: any = {
+      type: 'markup-include',
+      version: '4.25.9',
+      contentEditor: {
+        markupVariables: []
+      }
+    }
+
+    const result = update_4_25_10(config)
+
+    expect(result.markupVariables).toEqual([])
+    expect(result.enableMarkupVariables).toBeUndefined() // Should not enable if array is empty
+  })
+
+  it('should preserve conditions in markup variables during migration', () => {
+    const config: any = {
+      type: 'markup-include',
+      version: '4.25.9',
+      contentEditor: {
+        markupVariables: [
+          {
+            name: 'Conditional Var',
+            tag: '{{conditional-var}}',
+            columnName: 'value',
+            conditions: [
+              { columnName: 'state', isOrIsNotEqualTo: 'is', value: 'California' },
+              { columnName: 'year', isOrIsNotEqualTo: 'is not', value: '2020' }
+            ],
+            addCommas: true,
+            hideOnNull: true
+          }
+        ]
+      }
+    }
+
+    const result = update_4_25_10(config)
+
+    expect(result.markupVariables[0].conditions).toHaveLength(2)
+    expect(result.markupVariables[0].conditions[0]).toEqual({
+      columnName: 'state',
+      isOrIsNotEqualTo: 'is',
+      value: 'California'
+    })
+    expect(result.markupVariables[0].addCommas).toBe(true)
+    expect(result.markupVariables[0].hideOnNull).toBe(true)
+  })
+})

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/ver/tests/4.25.9.test.ts

@@ -0,0 +1,51 @@
+import { changeSingleStateMapNoDataMessage } from '../4.25.9'
+import { expect, describe, it } from 'vitest'
+
+describe('changeSingleStateMapNoDataMessage', () => {
+  it('should set noDataMessage to "No State Selected" if the message is default', () => {
+    const config: any = {
+      type: 'map',
+      general: { noStateFoundMessage: 'Map Unavailable' },
+      runtime: {}
+    }
+    changeSingleStateMapNoDataMessage(config)
+    expect(config.general.noDataMessage).toBe('No State Selected')
+    expect(config.general.noStateFoundMessage).toBeUndefined()
+    expect(config.runtime.noStateFoundMessage).toBeUndefined()
+  })
+
+  it('should preserve custom noStateFoundMessage', () => {
+    const config: any = {
+      type: 'map',
+      general: { noStateFoundMessage: 'Custom Message' },
+      runtime: {}
+    }
+    changeSingleStateMapNoDataMessage(config)
+    expect(config.general.noDataMessage).toBe('Custom Message')
+    expect(config.general.noStateFoundMessage).toBeUndefined()
+    expect(config.runtime.noStateFoundMessage).toBeUndefined()
+  })
+
+  it('should work for dashboard configs with map visualizations', () => {
+    const dashboardConfig: any = {
+      type: 'dashboard',
+      visualizations: {
+        map1: {
+          type: 'map',
+          general: { noStateFoundMessage: 'Map Unavailable' },
+          runtime: {}
+        },
+        chart1: {
+          type: 'chart',
+          general: {},
+          runtime: {}
+        }
+      }
+    }
+    changeSingleStateMapNoDataMessage(dashboardConfig)
+    expect(dashboardConfig.visualizations.map1.general.noDataMessage).toBe('No State Selected')
+    expect(dashboardConfig.visualizations.map1.general.noStateFoundMessage).toBeUndefined()
+    expect(dashboardConfig.visualizations.map1.runtime.noStateFoundMessage).toBeUndefined()
+    expect(dashboardConfig.visualizations.chart1.general.noDataMessage).toBeUndefined()
+  })
+})

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/hooks/useColorPalette.ts

@@ -0,0 +1,79 @@
+import { useEffect, useMemo } from 'react'
+import { filterColorPalettes } from '../helpers/filterColorPalettes'
+import { twoColorPalette, chartColorPalettes } from '../data/colorPalettes'
+
+export interface UseColorPaletteResult {
+  sequential: string[]
+  nonSequential: string[]
+  accessibleColors: string[]
+  twoColorPalettes: string[]
+}
+
+/**
+ * React hook for filtering color palettes based on config and visualization type
+ * Provides filtered palettes for chart visualization components
+ */
+export const useColorPalette = (config: any, updateConfig?: (newConfig: any) => void): UseColorPaletteResult => {
+  // Get filtered palettes using the core filtering logic
+  const filteredPalettes = useMemo(() => {
+    const isReversed = config.general?.palette?.isReversed
+    const visualizationType = config.visualizationType
+
+    const result = filterColorPalettes({
+      config,
+      isReversed,
+      colorPalettes: chartColorPalettes,
+      visualizationType
+    })
+
+    // Handle two-color palettes specially for chart components
+    let twoColorPalettes: string[] = []
+    if (visualizationType === 'Paired Bar' || visualizationType === 'Deviation Bar') {
+      const isTwoColorReversed = config.twoColor?.isPaletteReversed
+      twoColorPalettes = Object.keys(twoColorPalette).filter(name =>
+        isTwoColorReversed ? name.endsWith('reverse') : !name.endsWith('reverse')
+      )
+    }
+
+    return {
+      sequential: result.sequential,
+      nonSequential: result.nonSequential,
+      accessibleColors: result.accessibleColors,
+      twoColorPalettes: result.twoColorPalettes || twoColorPalettes
+    }
+  }, [
+    config.visualizationType,
+    config.general?.palette?.isReversed,
+    config.general?.palette?.version,
+    config.twoColor?.isPaletteReversed
+  ])
+
+  // Update twoColor palette based on isPaletteReversed
+  useEffect(() => {
+    if (!updateConfig || !config.twoColor) return
+
+    const { isPaletteReversed, palette } = config.twoColor
+    let newPalette = ''
+
+    if (isPaletteReversed && !palette.endsWith('reverse')) {
+      newPalette = palette + 'reverse'
+    }
+
+    if (!isPaletteReversed && palette.endsWith('reverse')) {
+      newPalette = palette.slice(0, -7)
+    }
+
+    if (newPalette && newPalette !== palette) {
+      updateConfig({
+        ...config,
+        twoColor: {
+          ...config.twoColor,
+          palette: newPalette
+        }
+      })
+    }
+  }, [config.twoColor?.isPaletteReversed, updateConfig])
+
+
+  return filteredPalettes
+}

package/package.json

@@ -1,9 +1,10 @@
 {
   "name": "@cdc/core",
-  "version": "4.25.7",
+  "version": "4.25.10",
   "description": "Core components, styles, hooks, and helpers, for the CDC Open Visualization project",
   "moduleName": "CdcCore",
   "main": "dist/cdccore",
+  "type": "module",
   "scripts": {
     "test": "vitest run --environment jsdom --reporter verbose",
     "test-watch": "vitest watch --reporter verbose",
@@ -21,14 +22,16 @@
   },
   "license": "Apache-2.0",
   "dependencies": {
+    "chroma-js": "3.1.2",
     "dompurify": "^3.2.4",
     "html2canvas": "^1.4.1",
     "json-edit-react": "^1.27.0",
+    "papaparse": "5.5.2",
     "prop-types": "^15.8.1",
     "react-accessible-accordion": "^5.0.1",
     "react-select": "^5.3.1",
     "react-tooltip": "5.8.2-beta.3",
-    "sass": "^1.89.2",
+    "resize-observer-polyfill": "^1.5.1",
     "use-debounce": "^10.0.5",
     "vega": "^6.1.0",
     "vega-lite": "^6.1.0"
@@ -37,8 +40,13 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
-  "gitHead": "9062881d50c824ee6cdd71868bafd016a5e5694d",
+  "gitHead": "c2db758e74ab9b9ca1667a6f9cb41dd0dccf985d",
   "devDependencies": {
-    "sass": "^1.79.4"
+    "@rollup/plugin-dsv": "^3.0.2",
+    "@vitejs/plugin-react": "^4.3.4",
+    "sass": "^1.89.2",
+    "vite": "^4.4.11",
+    "vite-plugin-css-injected-by-js": "^2.4.0",
+    "vite-plugin-svgr": "^2.4.0"
   }
 }

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

@@ -1,3 +1,5 @@
+@use 'sass:color';
+
 strong {
   font-weight: 600;
 }
@@ -42,11 +44,11 @@ strong {
 .inline-icon {
   width: 1em !important;
   height: auto !important;
+  font-size: 1rem;
+  color: inherit;
   @media all and (-ms-high-contrast: none) {
     height: 30px !important;
   }
-  font-size: 1rem;
-  color: inherit;
   path {
     fill: currentColor;
   }
@@ -76,7 +78,7 @@ strong {
     font-size: 0.8 em;
     color: #fff;
     &:hover {
-      background-color: darken($red, 5%);
+      background-color: color.adjust($red, $lightness: -5%);
     }
   }
 
@@ -168,8 +170,8 @@ section.footnotes {
   background-color: $blue;
   border-color: $blue;
   &:hover:not([disabled]) {
-    background-color: darken($blue, 5%);
-    border-color: darken($blue, 5%);
+    background-color: color.adjust($blue, $lightness: -5%);
+    border-color: color.adjust($blue, $lightness: -5%);
   }
 }
 

package/styles/base.scss

@@ -66,6 +66,11 @@ body.post-type-cdc_visualization .cdc-editor .configure .editor-panel {
 .cdc-open-viz-module {
   position: relative;
   line-height: 1.4;
+  // Force printing chart images
+  -webkit-print-color-adjust: exact !important; /* Chrome, Safari 6 – 15.3, Edge */
+  color-adjust: exact !important; /* Firefox 48 – 96 */
+  print-color-adjust: exact !important; /* Firefox 97+, Safari 15.4+ */
+
   @import 'global';
   @import 'button-section';
   @import 'series-list';
@@ -75,11 +80,6 @@ body.post-type-cdc_visualization .cdc-editor .configure .editor-panel {
     appearance: auto !important;
   }
 
-  // Force printing chart images
-  -webkit-print-color-adjust: exact !important; /* Chrome, Safari 6 – 15.3, Edge */
-  color-adjust: exact !important; /* Firefox 48 – 96 */
-  print-color-adjust: exact !important; /* Firefox 97+, Safari 15.4+ */
-
   $theme: (
     'amber': (
       '#fbab18',
@@ -234,4 +234,7 @@ body.post-type-cdc_visualization .cdc-editor .configure .editor-panel {
   .ps-auto {
     padding-left: auto !important;
   }
+  .fw-bold {
+    font-weight: 700 !important;
+  }
 }

package/styles/v2/components/button.scss

@@ -1,3 +1,4 @@
+@use 'sass:color';
 @import '../utils/variables';
 @import '../themes/index';
 
@@ -110,7 +111,7 @@
     background-color: #44aa41;
 
     &:hover {
-      background-color: lighten(#44aa41, 5%);
+      background-color: color.adjust(#44aa41, $lightness: 5%);
     }
   }
 
@@ -118,7 +119,7 @@
     background-color: #d73636;
 
     &:hover {
-      background-color: darken(#d73636, 5%);
+      background-color: color.adjust(#d73636, $lightness: -5%);
     }
   }
 
@@ -126,7 +127,7 @@
     background-color: #a0a0a0;
 
     &:hover {
-      background-color: darken(#a0a0a0, 5%);
+      background-color: color.adjust(#a0a0a0, $lightness: -5%);
     }
   }
 

package/styles/v2/components/editor.scss

@@ -2,12 +2,13 @@
 @import '../themes/index';
 
 .cove-editor {
-  @import './../base/reset';
   display: grid;
   grid-template-columns: auto 1fr;
   grid-template-areas: 'panel content';
   height: 100vh;
 
+  @import './../base/reset';
+
   .cove-editor__panel {
     grid-area: panel;
     width: $editorWidth;

package/styles/v2/layout/_data-table.scss

@@ -1,3 +1,5 @@
+@use 'sass:color';
+
 .cove-data-table {
   position: relative;
 }
@@ -144,7 +146,7 @@
   }
 
   .sort {
-    background-color: darken($mediumGray, 10%);
+    background-color: color.adjust($mediumGray, $lightness: -10%);
     background-repeat: no-repeat;
     background-position: right 0.5em center;
     background-size: 10px 5px;
@@ -161,7 +163,6 @@
   }
 }
 
-
 .cove-data-table__footer {
   margin-top: 1rem;
 }