@cdc/core 4.25.8 → 4.25.11

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

@@ -14,3 +14,5 @@ export const isMobileStateLabelViewport = currentViewport => isBelowBreakpoint('
 export const isMobileTerritoryViewport = currentViewport => isBelowBreakpoint('sm', currentViewport)
 
 export const isMobileFontViewport = currentViewport => isBelowBreakpoint('sm', currentViewport)
+
+export const isMobileSmallMultiplesViewport = currentViewport => isBelowBreakpoint('md', 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.8",
+  "version": "4.25.11",
   "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,17 @@
   },
   "license": "Apache-2.0",
   "dependencies": {
+    "chroma-js": "3.1.2",
     "dompurify": "^3.2.4",
+    "html-react-parser": "5.2.3",
     "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 +41,13 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
-  "gitHead": "e369994230b5e3facff224e1d89d5937528ac5a0",
+  "gitHead": "5f09a137c22f454111ab5f4cd7fdf1d2d58e31bd",
   "devDependencies": {
-    "sass": "^1.79.4"
+    "@rollup/plugin-dsv": "^3.0.2",
+    "@vitejs/plugin-react": "^4.3.4",
+    "sass": "^1.89.2",
+    "vite": "^5.4.21",
+    "vite-plugin-css-injected-by-js": "^2.4.0",
+    "vite-plugin-svgr": "^2.4.0"
   }
 }

package/styles/_common-components.css

@@ -0,0 +1,73 @@
+/* Common component styles shared across packages */
+/* This file combines loader, warning-icon, and checkbox-group styles */
+
+/* Shared loader component */
+/* Used across: chart, dashboard, data-bite, waffle-chart packages */
+.loader {
+  width: 100%;
+  text-align: center;
+  display: inline-block;
+  animation: spin 1s linear infinite;
+}
+
+.loader::before {
+  content: '\21BB';
+}
+
+/* Shared warning icon component */
+/* TODO: Currently different panel classes on different packages */
+.accordion__button svg.warning-icon,
+.cove-accordion__button svg.warning-icon {
+  position: absolute;
+  right: 35px;
+  left: auto;
+  top: 50%;
+  transform: translateY(-50%);
+
+}
+
+.warning-icon {
+  color: #d72f00;
+  width: 15px;
+  height: 15px;
+}
+
+.warning-icon path {
+  fill: #d8000c;
+}
+
+/* Shared checkbox group component */
+/* Used across: chart, data-bite, markup-include packages */
+.checkbox-group {
+  padding: 16px;
+  border: 1px solid #c4c4c4;
+  border-radius: 8px;
+  margin-top: 8px;
+  margin-bottom: 24px;
+}
+
+.cove-accordion__panel.panel-visual .checkbox-group label.checkbox,
+.cove-accordion__panel.panel-visual .reverse-labels label.checkbox,
+.panel-visual .checkbox-group label.checkbox,
+.panel-visual .reverse-labels label.checkbox {
+  display: flex !important;
+  align-items: center !important;
+  width: 100% !important;
+  margin-bottom: 8px !important;
+}
+
+.cove-accordion__panel.panel-visual .checkbox-group label.checkbox input[type="checkbox"],
+.cove-accordion__panel.panel-visual .reverse-labels label.checkbox input[type="checkbox"],
+.panel-visual .checkbox-group label.checkbox input[type="checkbox"],
+.panel-visual .reverse-labels label.checkbox input[type="checkbox"] {
+  flex-shrink: 0 !important;
+  margin-right: 8px !important;
+}
+
+.cove-accordion__panel.panel-visual .checkbox-group label.checkbox span,
+.cove-accordion__panel.panel-visual .reverse-labels label.checkbox span,
+.panel-visual .checkbox-group label.checkbox span,
+.panel-visual .reverse-labels label.checkbox span {
+  flex: 1 !important;
+  display: inline-block !important;
+}

package/styles/_global.scss

@@ -1,3 +1,5 @@
+@use 'sass:color';
+
 strong {
   font-weight: 600;
 }
@@ -8,12 +10,15 @@ strong {
   justify-content: space-between;
   padding: 0.3rem 1rem;
   font-size: 0.9rem;
+
   strong {
     font-weight: 600;
   }
+
   p {
     margin: 0;
   }
+
   .dismiss-error {
     flex-shrink: 0;
     font-size: 0.8rem;
@@ -34,19 +39,23 @@ strong {
   border: 0 !important;
   display: flex;
 }
+
 .cdcdataviz-sr-only-focusable:focus {
   width: fit-content;
   margin-bottom: 0.5em;
   margin-left: 1em;
 }
+
 .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;
   }
@@ -56,27 +65,32 @@ strong {
   &.full-width {
     width: 100%;
   }
+
   &:hover {
     transition: 0.1s background-color;
   }
+
   &.secondary {
     font-size: 0.8em;
     padding: 0.3em 1em;
     background: rgba(0, 0, 0, 0.3);
     display: inline-block;
     margin-bottom: 1em;
+
     &:hover {
       background: rgba(0, 0, 0, 0.5);
     }
   }
+
   &.danger {
     background-color: $red;
     padding: 0em 0.6em 0em;
     height: 1.6em;
     font-size: 0.8 em;
     color: #fff;
+
     &:hover {
-      background-color: darken($red, 5%);
+      background-color: color.adjust($red, $lightness: -5%);
     }
   }
 
@@ -99,6 +113,7 @@ textarea {
   font-weight: normal;
   font-family: sans-serif;
   border: rgba(0, 0, 0, 0.3) 1px solid !important;
+
   &:focus {
     border: rgba(0, 0, 0, 0.7) 1px solid !important;
     outline: 0;
@@ -120,6 +135,7 @@ textarea {
   position: relative;
   transition: 0.2s all;
   font-size: 1em;
+
   &:before {
     content: ' ';
     width: 5px;
@@ -129,22 +145,27 @@ textarea {
     bottom: -1px;
     position: absolute;
   }
+
   &:hover {
     background: $lightestGray;
     transition: 0.2s all;
     color: #444;
   }
-  > div {
+
+  >div {
     font-size: 0.9em;
   }
+
   svg {
     width: 60px;
     color: $blue;
     margin-right: 1rem;
+
     path {
       fill: currentColor;
     }
   }
+
   h3 {
     font-weight: 600;
     font-size: 1.2rem;
@@ -167,23 +188,24 @@ section.footnotes {
 .btn.btn-primary:not([disabled]) {
   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%);
   }
 }
 
 // after migration to TP5 this declaration should be removed and all references
 // to it should be replaced with .form-select
-.cove-form-select {
+select.cove-form-select {
   font-family: var(--app-font-secondary);
   font-weight: 300;
   font-size: var(--filter-select-font-size);
   line-height: normal;
   padding-right: 3rem;
   border-radius: 0.333rem;
-  border: 1px solid var(--colors-gray-cool-10);
-  color: var(--colors-primary-text);
+  border: 1px solid var(--cool-gray-10) !important;
+  color: var(--cool-gray-90);
   // recreate caret using svg
   background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>');
   background-repeat: no-repeat;
@@ -193,4 +215,4 @@ section.footnotes {
   -webkit-appearance: none;
   -moz-appearance: none;
   cursor: pointer;
-}
+}

package/styles/base.scss

@@ -1,58 +1,9 @@
 @use 'sass:string';
 
-@mixin breakpoint($class) {
-  @if $class == xs {
-    @media (max-width: 767px) {
-      @content;
-    }
-  } @else if $class == sm {
-    @media (min-width: 768px) {
-      @content;
-    }
-  } @else if $class == md {
-    @media (min-width: 960px) {
-      @content;
-    }
-  } @else if $class == lg {
-    @media (min-width: 1300px) {
-      @content;
-    }
-  } @else {
-    @warn "Breakpoint mixin supports: xs, sm, md, lg";
-  }
-}
-
-@mixin breakpointClass($class) {
-  @if $class == xs {
-    &.xs,
-    &.xxs {
-      @content;
-    }
-  } @else if $class == sm {
-    &.sm,
-    &.md,
-    &.lg {
-      @content;
-    }
-  } @else if $class == md {
-    &.md,
-    &.lg {
-      @content;
-    }
-  } @else if $class == lg {
-    &.lg {
-      @content;
-    }
-  } @else {
-    @warn "Breakpoint Class mixin supports: xs, sm, md, lg";
-  }
-}
-
 // Imports
 @import 'reset';
 @import 'variables';
 @import 'global-variables';
-@import 'mixins';
 @import 'filters';
 
 body.post-type-cdc_visualization .visx-tooltip {
@@ -66,20 +17,19 @@ 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';
-  @import 'typography';
 
   input[type='range'] {
     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 +184,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/cove-main.scss

@@ -1,6 +1,8 @@
+@import 'v2/utils/breakpoints';
 @import 'base';
 @import 'heading-colors';
 @import 'v2/themes/color-definitions';
 @import 'variables';
+@import '_common-components';
 @import 'v2/components/ui/tooltip';
-@import 'v2/main.scss';
+@import 'v2/main.scss';

package/styles/filters.scss

@@ -1,9 +1,12 @@
+@import 'v2/utils/breakpoints';
+
 .filters-section {
   &__wrapper {
     flex-wrap: wrap;
     display: flex;
     gap: 1rem 1.5rem;
     margin-bottom: 2rem;
+
     label {
       display: inherit;
       margin-bottom: 5px;
@@ -35,8 +38,9 @@ div.single-filters {
       border-bottom-left-radius: 15px;
     }
   }
-  & > select.cove-form-select,
-  & > div.nested-dropdown {
+
+  &>select.cove-form-select,
+  &>div.nested-dropdown {
     width: fit-content;
   }
 }
@@ -89,6 +93,7 @@ div.single-filters {
       color: var(--colors-blue-vivid-60, #005ea2);
       background: var(--colors-cyan-cool-10, #eff9fa);
     }
+
     // TODO - focus styles have to be heavy handed to override the project's global styles
     &:focus:not(:focus-visible) {
       outline: none !important;
@@ -101,6 +106,7 @@ div.single-filters {
     }
   }
 }
+
 .cdc-open-viz-module {
   @include breakpointClass(xs) {
     .single-filters--tab-simple .tab-simple-container .tab.tab--simple {
@@ -147,9 +153,10 @@ div.single-filters {
     padding: 10px;
     background: none;
     transition: background 2s;
+
     &--active {
       background: #fff;
       border-radius: 15px;
     }
   }
-}
+}

package/styles/v2/base/index.scss

@@ -1,5 +1,4 @@
 // @import 'reset'; //TODO: Enable after cove refactor
-@import 'typography';
 
 @import 'general';
 @import 'heading';

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

@@ -1,13 +1,16 @@
 @import '../utils/variables';
 @import '../themes/index';
+@import '../../../components/HeaderThemeSelector/HeaderThemeSelector.css';
+@import '../../_common-components';
 
 .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;
@@ -90,7 +93,7 @@
     margin-top: 1em;
     justify-content: space-between;
 
-    > label {
+    >label {
       width: 48%;
       margin-top: 0 !important;
     }
@@ -127,7 +130,7 @@
         cursor: pointer;
       }
 
-      + li {
+      +li {
         border-top: $lightGray 1px solid;
       }
     }
@@ -147,6 +150,7 @@
       color: $blue;
       margin-right: 1rem;
       height: 60px; // IE11
+
       path {
         fill: currentColor;
       }
@@ -185,7 +189,7 @@
       display: flex;
       justify-content: space-between;
 
-      > label {
+      >label {
         margin-top: 0;
         width: 30%;
         display: inline-block;
@@ -233,7 +237,7 @@
       margin-top: 0;
     }
 
-    label + label {
+    label+label {
       margin-top: 1em;
     }
 
@@ -253,12 +257,12 @@
   .sort-list {
     list-style: none;
 
-    > li {
+    >li {
       margin-right: 0.3em;
       margin-bottom: 0.3em;
     }
 
-    li > div {
+    li>div {
       display: block;
       box-sizing: border-box;
       border: 1px solid #d1d1d1;
@@ -483,3 +487,8 @@ ul.color-palette {
     }
   }
 }
+
+// CheckBox component styling for EditorPanel/Inputs
+.edit-checkbox {
+  margin-right: 8px;
+}