@cdc/core 4.25.8 → 4.25.10

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/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.8",
+  "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": "e369994230b5e3facff224e1d89d5937528ac5a0",
+  "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/_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;
 }

package/styles/v2/themes/_color-definitions.scss

@@ -1,4 +1,5 @@
 @use 'sass:string';
+@use 'sass:list';
 @import './../../variables';
 
 $theme: (
@@ -82,8 +83,8 @@ $theme: (
   @each $theme-name, $theme-colors in $theme {
     // Header
     .theme-#{$theme-name} {
-      background-color: string.unquote(nth($theme-colors, 1));
-      border-color: string.unquote(nth($theme-colors, 2));
+      background-color: string.unquote(list.nth($theme-colors, 1));
+      border-color: string.unquote(list.nth($theme-colors, 2));
       border-bottom-style: solid;
       border-bottom-width: 4px;
     }
@@ -95,7 +96,7 @@ $theme: (
         &:not(.no-borders) {
           /// borders are the theme color
           &.component--has-borderColorTheme {
-            border: 1px solid string.unquote(nth($theme-colors, 1));
+            border: 1px solid string.unquote(list.nth($theme-colors, 1));
           }
           /// using default border color to draw borders
           &:not(.component--has-borderColorTheme) {
@@ -108,23 +109,23 @@ $theme: (
 
         /// left accent bar
         &.component--has-accent {
-          border-left: 0.5rem solid string.unquote(nth($theme-colors, 1)) !important;
+          border-left: 0.5rem solid string.unquote(list.nth($theme-colors, 1)) !important;
         }
 
         /// Apply a background color
         &.component--has-background:not(.component--hideBackgroundColor) {
-          background: string.unquote(nth($theme-colors, 3));
+          background: string.unquote(list.nth($theme-colors, 3));
         }
       }
 
       .cove-component__header {
-        border-color: string.unquote(nth($theme-colors, 2));
+        border-color: string.unquote(list.nth($theme-colors, 2));
       }
     }
 
     &.theme-#{$theme-name} {
       .cove-component__header {
-        border-color: string.unquote(nth($theme-colors, 2));
+        border-color: string.unquote(list.nth($theme-colors, 2));
       }
     }
   }
@@ -135,42 +136,42 @@ $theme: (
   @each $theme-name, $theme-colors in $theme {
     &.theme-#{$theme-name} {
       .single-filters--tab .tab--active:not(.tab--simple) {
-        border: 1px solid string.unquote(nth($theme-colors, 1));
-        border-top: 3px solid string.unquote(nth($theme-colors, 1));
+        border: 1px solid string.unquote(list.nth($theme-colors, 1));
+        border-top: 3px solid string.unquote(list.nth($theme-colors, 1));
         border-bottom: none;
       }
 
       .single-filters--tab .tab:not(.tab--active):not(.tab--simple) {
-        border-bottom: 1px solid string.unquote(nth($theme-colors, 1));
+        border-bottom: 1px solid string.unquote(list.nth($theme-colors, 1));
       }
 
       .single-filters--pill .pill--active {
-        background-color: string.unquote(nth($theme-colors, 1));
+        background-color: string.unquote(list.nth($theme-colors, 1));
         color: #fff;
       }
     }
 
     .theme-#{$theme-name} {
       .single-filters--tab .tab--active:not(.tab--simple) {
-        border: 1px solid string.unquote(nth($theme-colors, 1));
-        border-top: 3px solid string.unquote(nth($theme-colors, 1));
+        border: 1px solid string.unquote(list.nth($theme-colors, 1));
+        border-top: 3px solid string.unquote(list.nth($theme-colors, 1));
         border-bottom: none;
       }
 
       .single-filters--tab .tab:not(.tab--active):not(.tab--simple) {
-        border-bottom: 1px solid string.unquote(nth($theme-colors, 1));
+        border-bottom: 1px solid string.unquote(list.nth($theme-colors, 1));
       }
 
       .single-filters--pill .pill--active {
-        background-color: string.unquote(nth($theme-colors, 1));
+        background-color: string.unquote(list.nth($theme-colors, 1));
         color: #fff;
       }
 
       .button__tab-bar--active {
-        outline: 2px solid string.unquote(nth($theme-colors, 1));
+        outline: 2px solid string.unquote(list.nth($theme-colors, 1));
       }
       .apply:not([disabled]) {
-        background-color: string.unquote(nth($theme-colors, 1));
+        background-color: string.unquote(list.nth($theme-colors, 1));
       }
     }
   }

package/testing-setup.js

@@ -0,0 +1,32 @@
+import { expect, afterEach, describe, it } from 'vitest'
+import { cleanup } from '@testing-library/react'
+import matchers from '@testing-library/jest-dom/matchers'
+import '@testing-library/jest-dom'
+import '@testing-library/jest-dom/extend-expect'
+
+// extends Vitest's expect method with methods from react-testing-library
+expect.extend(matchers)
+
+// Needed for globals
+window.URL.createObjectURL = function () {}
+
+// needed to get past watchMedia error.
+// https://github.com/vitest-dev/vitest/issues/821
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: vi.fn().mockImplementation(query => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: vi.fn(), // deprecated
+    removeListener: vi.fn(), // deprecated
+    addEventListener: vi.fn(),
+    removeEventListener: vi.fn(),
+    dispatchEvent: vi.fn()
+  }))
+})
+
+// runs a cleanup after each test case (e.g. clearing jsdom)
+afterEach(() => {
+  cleanup()
+})

package/types/MarkupInclude.ts

@@ -1,20 +1,25 @@
 import { Runtime } from '@cdc/core/types/Runtime'
 import { Variable } from '@cdc/markup-include/src/types/Variable'
 import { Visualization } from './Visualization'
+import { VizFilter } from './VizFilter'
 
 export type MarkupIncludeConfig = Visualization & {
   contentEditor: {
     // Changing the base config object creates an infinite loop, nesting it is a workaround
     allowHideSection?: boolean
     inlineHTML: string
-    markupVariables: Variable[]
+    markupVariables?: Variable[]
     showHeader: boolean
+    showNoDataMessage?: boolean
+    noDataMessageText?: string
     srcUrl: string
     title: string
     useInlineHTML: boolean
   }
   data?: Object[]
+  filters?: VizFilter[]
   formattedData: {}
+  markupVariables?: Variable[] // Support markupVariables at root level for backwards compatibility
   newViz?: boolean
   runtime?: Runtime
   visual: {

package/types/MarkupVariable.ts

@@ -0,0 +1,19 @@
+export type MarkupCondition = {
+  columnName: string
+  isOrIsNotEqualTo: 'is' | 'is not'
+  value: string
+}
+
+export type MarkupVariable = {
+  columnName: string
+  conditions: MarkupCondition[]
+  name: string
+  tag: string
+  addCommas?: boolean
+  hideOnNull?: boolean
+}
+
+export type MarkupConfig = {
+  markupVariables?: MarkupVariable[]
+  enableMarkupVariables?: boolean
+}

package/types/VizFilter.ts

@@ -46,6 +46,7 @@ export type SubGrouping = {
   setByQueryParameter: string
   order?: OrderBy
   valuesLookup: Record<string, { orderedValues?: string[]; values: string[] }>
+  defaultValue?: string
 }
 
 export type VizFilter = GeneralFilter | MultiSelectFilter

package/vitest.config.ts

@@ -0,0 +1,16 @@
+import { defineConfig } from 'vitest/config'
+
+export default defineConfig({
+  test: {
+    environment: 'jsdom',
+    globals: true,
+    setupFiles: ['../../vitest.setup.ts'],
+    exclude: [
+      '**/node_modules/**',
+      '**/dist/**',
+      '**/.storybook/**',
+      '**/*.stories.*',
+      '**/storybook-static/**'
+    ]
+  }
+})