@cdc/core 4.26.1 → 4.26.2

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

@@ -0,0 +1,298 @@
+import update_4_26_2 from '../4.26.2'
+import { expect, describe, it } from 'vitest'
+
+describe('update_4_26_2', () => {
+  describe('migrateAnnotationDimensions', () => {
+    it('should convert Y position from absolute pixels to percentage and delete savedDimensions', () => {
+      const config: any = {
+        type: 'chart',
+        version: '4.26.1',
+        heights: { vertical: 400 },
+        annotations: [
+          {
+            text: 'Test Annotation',
+            x: 50,
+            y: 200,
+            savedDimensions: [800, 560], // old format: will be deleted
+            dx: 10,
+            dy: -10
+          }
+        ]
+      }
+
+      const result = update_4_26_2(config)
+
+      // Y is now calculated as percentage of heights.vertical (400)
+      expect(result.annotations[0].y).toBe(50) // 200 / 400 * 100 = 50
+      expect(result.annotations[0].x).toBe(50)
+      // savedDimensions should be deleted to preserve old dx/dy behavior
+      expect(result.annotations[0].savedDimensions).toBeUndefined()
+      // dx/dy should be preserved unchanged
+      expect(result.annotations[0].dx).toBe(10)
+      expect(result.annotations[0].dy).toBe(-10)
+      expect(result.version).toBe('4.26.2')
+    })
+
+    it('should handle multiple annotations with different Y positions', () => {
+      const config: any = {
+        type: 'chart',
+        version: '4.26.1',
+        heights: { vertical: 500 },
+        annotations: [
+          {
+            text: 'Top',
+            x: 25,
+            y: 100,
+            savedDimensions: [1000, 700]
+          },
+          {
+            text: 'Middle',
+            x: 75,
+            y: 250,
+            savedDimensions: [1000, 700]
+          }
+        ]
+      }
+
+      const result = update_4_26_2(config)
+
+      // Y calculated as percentage of heights.vertical (500)
+      expect(result.annotations[0].y).toBe(20) // 100 / 500 * 100 = 20
+      expect(result.annotations[1].y).toBe(50) // 250 / 500 * 100 = 50
+      // savedDimensions should be deleted
+      expect(result.annotations[0].savedDimensions).toBeUndefined()
+      expect(result.annotations[1].savedDimensions).toBeUndefined()
+    })
+
+    it('should use default vertical height (300) when heights not specified', () => {
+      const config: any = {
+        type: 'chart',
+        version: '4.26.1',
+        annotations: [
+          {
+            text: 'No heights config',
+            x: 50,
+            y: 150,
+            savedDimensions: [800, 560]
+          }
+        ]
+      }
+
+      const result = update_4_26_2(config)
+
+      // Uses default vertical height of 300
+      expect(result.annotations[0].y).toBe(50) // 150 / 300 * 100 = 50
+      expect(result.annotations[0].savedDimensions).toBeUndefined()
+    })
+
+    it('should use horizontal height for horizontal orientation', () => {
+      const config: any = {
+        type: 'chart',
+        version: '4.26.1',
+        orientation: 'horizontal',
+        heights: { horizontal: 750 },
+        annotations: [
+          {
+            text: 'Horizontal chart annotation',
+            x: 50,
+            y: 375,
+            savedDimensions: [800, 900]
+          }
+        ]
+      }
+
+      const result = update_4_26_2(config)
+
+      // Uses heights.horizontal for horizontal charts
+      expect(result.annotations[0].y).toBe(50) // 375 / 750 * 100 = 50
+      expect(result.annotations[0].savedDimensions).toBeUndefined()
+    })
+
+    it('should handle dashboard configs with nested visualizations', () => {
+      const config: any = {
+        type: 'dashboard',
+        version: '4.26.1',
+        visualizations: {
+          chart1: {
+            type: 'chart',
+            heights: { vertical: 300 },
+            annotations: [
+              {
+                text: 'Chart 1 Annotation',
+                x: 30,
+                y: 150,
+                savedDimensions: [600, 450]
+              }
+            ]
+          }
+        }
+      }
+
+      const result = update_4_26_2(config)
+
+      expect(result.visualizations.chart1.annotations[0].y).toBe(50) // 150 / 300 * 100 = 50
+      expect(result.visualizations.chart1.annotations[0].savedDimensions).toBeUndefined()
+    })
+
+    it('should preserve all other annotation properties and delete xKey entirely', () => {
+      const config: any = {
+        type: 'chart',
+        version: '4.26.1',
+        heights: { vertical: 500 },
+        annotations: [
+          {
+            text: 'Complex Annotation',
+            x: 50,
+            y: 250,
+            savedDimensions: [1000, 700],
+            dx: 20,
+            dy: -30,
+            xKey: 1577836800000,
+            yKey: '42',
+            seriesKey: 'series1',
+            marker: 'arrow'
+          }
+        ]
+      }
+
+      const result = update_4_26_2(config)
+
+      const annotation = result.annotations[0]
+      expect(annotation.y).toBe(50) // 250 / 500 * 100 = 50
+      expect(annotation.text).toBe('Complex Annotation')
+      expect(annotation.dx).toBe(20)
+      expect(annotation.dy).toBe(-30)
+      // xKey is deleted entirely (not renamed to dataX) because old format
+      // stored timestamps but new dataX expects raw data values
+      expect(annotation.xKey).toBeUndefined()
+      expect(annotation.dataX).toBeUndefined()
+      expect(annotation.yKey).toBeUndefined()
+      // Non-empty seriesKey is preserved
+      expect(annotation.seriesKey).toBe('series1')
+      expect(annotation.savedDimensions).toBeUndefined()
+    })
+
+    it('should delete empty seriesKey', () => {
+      const config: any = {
+        type: 'chart',
+        version: '4.26.1',
+        heights: { vertical: 300 },
+        annotations: [
+          {
+            text: 'Annotation with empty seriesKey',
+            x: 50,
+            y: 150,
+            seriesKey: ''
+          }
+        ]
+      }
+
+      const result = update_4_26_2(config)
+
+      // Empty seriesKey should be deleted to prevent yScale(undefined) errors
+      expect(result.annotations[0].seriesKey).toBeUndefined()
+    })
+
+    it('should handle config with no annotations', () => {
+      const config: any = {
+        type: 'chart',
+        version: '4.26.1',
+        title: 'Chart without annotations'
+      }
+
+      const result = update_4_26_2(config)
+
+      expect(result.annotations).toBeUndefined()
+      expect(result.title).toBe('Chart without annotations')
+    })
+
+    it('should handle annotation without savedDimensions', () => {
+      const config: any = {
+        type: 'chart',
+        version: '4.26.1',
+        heights: { vertical: 300 },
+        annotations: [
+          {
+            text: 'No savedDimensions',
+            x: 50,
+            y: 150
+          }
+        ]
+      }
+
+      const result = update_4_26_2(config)
+
+      expect(result.annotations[0].y).toBe(50) // 150 / 300 * 100 = 50
+      expect(result.annotations[0].savedDimensions).toBeUndefined()
+    })
+  })
+
+  describe('combined migrations', () => {
+    it('should run all migrations together', () => {
+      const config: any = {
+        type: 'dashboard',
+        version: '4.26.1',
+        dashboard: {
+          sharedFilters: [
+            {
+              type: 'datafilter',
+              parents: 'parent-id'
+            }
+          ]
+        },
+        visualizations: {
+          chart1: {
+            type: 'chart',
+            heights: { vertical: 400 },
+            brush: { enabled: true },
+            annotations: [
+              {
+                x: 50,
+                y: 200,
+                savedDimensions: [800, 560]
+              }
+            ]
+          }
+        }
+      }
+
+      const result = update_4_26_2(config)
+
+      expect(result.visualizations.chart1.annotations[0].y).toBe(50) // 200 / 400 * 100 = 50
+      expect(result.visualizations.chart1.annotations[0].anchorMode).toBe('fixed')
+      expect(result.visualizations.chart1.annotations[0].savedDimensions).toBeUndefined()
+      expect(result.visualizations.chart1.annotations[0].dataX).toBeUndefined()
+      expect(result.version).toBe('4.26.2')
+    })
+
+    it('should migrate data model along with Y position', () => {
+      const config: any = {
+        type: 'chart',
+        version: '4.26.1',
+        heights: { vertical: 400 },
+        annotations: [
+          {
+            x: 50,
+            y: 200,
+            savedDimensions: [800, 560],
+            xKey: 1577836800000,
+            yKey: '42',
+            snapToNearestPoint: true
+          }
+        ]
+      }
+
+      const result = update_4_26_2(config)
+
+      const annotation = result.annotations[0]
+      expect(annotation.y).toBe(50) // 200 / 400 * 100 = 50
+      expect(annotation.anchorMode).toBe('fixed')
+      // xKey is deleted entirely (not renamed to dataX) - format incompatible
+      expect(annotation.dataX).toBeUndefined()
+      expect(annotation.xKey).toBeUndefined()
+      expect(annotation.yKey).toBeUndefined()
+      expect(annotation.snapToNearestPoint).toBeUndefined()
+      expect(annotation.savedDimensions).toBeUndefined()
+    })
+  })
+})

package/helpers/viewports.ts

@@ -15,4 +15,6 @@ export const isMobileTerritoryViewport = currentViewport => isBelowBreakpoint('s
 
 export const isMobileFontViewport = currentViewport => isBelowBreakpoint('sm', currentViewport)
 
+export const isMobileAnnotationViewport = currentViewport => isBelowBreakpoint('sm', currentViewport)
+
 export const isMobileSmallMultiplesViewport = currentViewport => isBelowBreakpoint('md', currentViewport)

package/package.json

@@ -1,54 +1,49 @@
 {
   "name": "@cdc/core",
-  "version": "4.26.1",
+  "version": "4.26.2",
   "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",
-    "test-watch:ui": "vitest --ui",
-    "build": "sass styles/cove-main.scss dist/cove-main.css"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/CDCgov/cdc-open-viz.git"
-  },
-  "author": "Rob Shelnutt <rob@blackairplane.com>",
-  "homepage": "https://github.com/CDCgov/cdc-open-viz#readme",
-  "bugs": {
-    "url": "https://github.com/CDCgov/cdc-open-viz/issues"
-  },
   "license": "Apache-2.0",
+  "author": "Rob Shelnutt <rob@blackairplane.com>",
+  "bugs": "https://github.com/CDCgov/cdc-open-viz/issues",
   "dependencies": {
     "@hello-pangea/dnd": "^16.2.0",
-    "chroma-js": "3.1.2",
-    "dompurify": "^3.2.4",
-    "html-react-parser": "5.2.3",
+    "chroma-js": "^3.1.2",
+    "dompurify": "^3.3.1",
+    "html-react-parser": "^5.2.3",
     "html2canvas": "^1.4.1",
     "json-edit-react": "^1.27.0",
-    "papaparse": "5.5.2",
+    "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",
     "resize-observer-polyfill": "^1.5.1",
-    "use-debounce": "^10.0.5",
+    "use-debounce": "^10.1.0",
     "vega": "^6.1.0",
     "vega-lite": "^6.1.0"
   },
-  "peerDependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
-  },
-  "gitHead": "7e3b27098c4eb7a24bc9c3654ad53f88d6419f16",
   "devDependencies": {
     "@rollup/plugin-dsv": "^3.0.2",
-    "@vitejs/plugin-react": "^4.3.4",
+    "@vitejs/plugin-react": "^5.1.2",
     "sass": "^1.89.2",
-    "vite": "^5.4.21",
+    "vite": "^7.3.1",
     "vite-plugin-css-injected-by-js": "^2.4.0",
     "vite-plugin-svgr": "^4.2.0"
-  }
+  },
+  "gitHead": "be3413e8e1149abf94225108f86a7910f56e0616",
+  "homepage": "https://github.com/CDCgov/cdc-open-viz#readme",
+  "main": "dist/cdccore",
+  "moduleName": "CdcCore",
+  "peerDependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "repository": "CDCgov/cdc-open-viz.git",
+  "scripts": {
+    "build": "sass styles/cove-main.scss dist/cove-main.css",
+    "test": "vitest run --environment jsdom --reporter verbose",
+    "test-watch": "vitest watch --reporter verbose",
+    "test-watch:ui": "vitest --ui"
+  },
+  "type": "module"
 }

package/styles/v2/components/editor.scss

@@ -93,7 +93,7 @@
     margin-top: 1em;
     justify-content: space-between;
 
-    >label {
+    > label {
       width: 48%;
       margin-top: 0 !important;
     }
@@ -130,7 +130,7 @@
         cursor: pointer;
       }
 
-      +li {
+      + li {
         border-top: $lightGray 1px solid;
       }
     }
@@ -189,7 +189,7 @@
       display: flex;
       justify-content: space-between;
 
-      >label {
+      > label {
         margin-top: 0;
         width: 30%;
         display: inline-block;
@@ -237,7 +237,7 @@
       margin-top: 0;
     }
 
-    label+label {
+    label + label {
       margin-top: 1em;
     }
 
@@ -256,13 +256,13 @@
 
   .sort-list {
     list-style: none;
+    padding: 0;
 
-    >li {
-      margin-right: 0.3em;
+    > li {
       margin-bottom: 0.3em;
     }
 
-    li>div {
+    li > div {
       display: block;
       box-sizing: border-box;
       border: 1px solid #d1d1d1;
@@ -270,8 +270,8 @@
       background: #f1f1f1;
       padding: 0.4em 0.6em;
       font-size: 0.8em;
-      margin-bottom: 0.3em;
       cursor: move;
+      width: 100%;
     }
   }
 
@@ -491,4 +491,4 @@ ul.color-palette {
 // CheckBox component styling for EditorPanel/Inputs
 .edit-checkbox {
   margin-right: 8px;
-}
+}

package/styles/v2/utils/_grid.scss

@@ -3,18 +3,21 @@ $grid-gap-max: 64;
 $grid-columns: 12;
 
 @mixin create-grid-selectors($breakpoint: null) {
-  $infix: if($breakpoint == null, '', '-#{$breakpoint}');
+  $infix: if(sass($breakpoint ==null): ""; else: "-#{$breakpoint}");
 
   @for $i from 1 through $grid-columns {
     .col#{$infix}-#{$i} {
       grid-column-end: span $i;
     }
+
     .col-offset#{$infix}-#{$i} {
       grid-column-start: $i + 1;
     }
+
     .row#{$infix}-#{$i} {
       grid-row-end: span $i;
     }
+
     .row-offset#{$infix}-#{$i} {
       grid-row-start: $i + 1;
     }
@@ -23,11 +26,13 @@ $grid-columns: 12;
 
 @mixin grid-gaps() {
   $i: 0;
-  @while ($i * $grid-gap-offset) <= $grid-gap-max {
+
+  @while ($i * $grid-gap-offset) <=$grid-gap-max {
     .grid-gap-#{$i} {
       grid-gap: #{($i * $grid-gap-offset) + 'px'};
       gap: #{($i * $grid-gap-offset) + 'px'};
     }
+
     $i: $i + 1;
   }
 }
@@ -44,4 +49,4 @@ $grid-columns: 12;
   @media (min-width: $width) {
     @include create-grid-selectors($breakpoint);
   }
-}
+}

package/types/Annotation.ts

@@ -1,4 +1,7 @@
 export type Annotation = {
+  // Positioning mode: fixed uses x/y percentages, data anchors to data point
+  anchorMode?: 'fixed' | 'data'
+
   // background opacity of annotation
   opacity: number
   // HTML text string to display in annotation
@@ -15,26 +18,22 @@ export type Annotation = {
     horizontal: boolean
     vertical: boolean
   }
-  // x value for scaling
-  xKey: string
-  // y value for scaling
-  yKey: string
-  // orignal x value of subject
-  originalX: number
-  // x of subject
+  // Data X value for data-anchored mode (timestamp, category, etc.)
+  dataX?: any
+  // x of subject (percentage 0-100)
   x: number
-  // y of object
+  // y of object (percentage 0-100)
   y: number
   // x offset of label from subject
   dx: number
   // y offset of label from subject
   dy: number
   // assigned series that the annotation should snap to
-  seriesKey: string
-  // if the dragged item should be snapped to the nearest point
-  snapToNearestPoint: boolean
+  seriesKey?: string
   // type of  connecting line from label to subject
   connectionType: 'line' | 'curve' | 'elbow' | 'none'
+  // curve control point offset for curve connection type
+  bezier?: number
   // marker type highlighting the subject
   marker: 'arrow' | 'circle'
   // should the item be snapped to the subject?

package/types/General.ts

@@ -1,4 +1,5 @@
 import { BoxPlot } from './BoxPlot'
+import { Palette } from './Palette'
 
 export type General = {
   boxplot: BoxPlot
@@ -12,4 +13,5 @@ export type General = {
   hideNullValue: boolean
   title: string
   annotationDropdownText?: string
+  palette?: Palette
 }

package/types/Palette.ts

@@ -0,0 +1,21 @@
+export type PaletteVersion = '1.0' | '2.0'
+
+export type PaletteBackup = {
+  name: string
+  type?: 'twoColor' | 'primary'
+  version?: PaletteVersion
+  isReversed?: boolean
+}
+
+export type Palette = {
+  name?: string
+  customColors?: string[]
+  version?: PaletteVersion
+  isReversed?: boolean
+  backups?: PaletteBackup[]
+}
+
+export type TwoColorConfig = {
+  palette?: string
+  isPaletteReversed?: boolean
+}

package/types/Visualization.ts

@@ -11,6 +11,7 @@ import { General } from './General'
 import { Runtime } from './Runtime'
 import { DashboardFilters } from '@cdc/dashboard/src/types/DashboardFilters'
 import Footnotes from './Footnotes'
+import { TwoColorConfig } from './Palette'
 
 // This was originally created as a catchall for the different types of visualizations.
 // Currently it includes properties that ares specific to one Visualization type.
@@ -44,6 +45,11 @@ type DeprecatedVisualizationType = {
   visualizationType: string
   xAxis: Axis
   preliminaryData: { type: 'effect' | 'suppression'; value: string }[]
+  twoColor?: TwoColorConfig
+  /** @deprecated Legacy v1 palette name - use general.palette.name instead */
+  palette?: string
+  /** @deprecated Legacy v1 color name - use general.palette.name instead */
+  color?: string
 }
 
 type StatefulProperties = {