@cdc/chart 4.26.7 → 4.26.10

package/src/test/CdcChart.network.test.tsx

@@ -0,0 +1,271 @@
+import { fireEvent, render, waitFor } from '@testing-library/react'
+import { afterAll, describe, expect, it, vi } from 'vitest'
+import CdcChart from '../CdcChartComponent'
+
+const dataTableProps = vi.hoisted(() => {
+  const originalGetContext = Object.getOwnPropertyDescriptor(
+    (globalThis as any).HTMLCanvasElement.prototype,
+    'getContext'
+  )
+  Object.defineProperty((globalThis as any).HTMLCanvasElement.prototype, 'getContext', {
+    configurable: true,
+    value: () => ({ measureText: (text = '') => ({ width: String(text).length * 8 }) })
+  })
+
+  return { calls: [] as any[], originalGetContext }
+})
+
+afterAll(() => {
+  if (dataTableProps.originalGetContext) {
+    Object.defineProperty(HTMLCanvasElement.prototype, 'getContext', dataTableProps.originalGetContext)
+  }
+})
+
+vi.mock('@visx/responsive/lib/components/ParentSize', () => ({
+  default: ({ children }) => children({ width: 640, height: 420 })
+}))
+
+vi.mock('react-tooltip', async () => {
+  const React = await vi.importActual<typeof import('react')>('react')
+  return {
+    Tooltip: ({ className, variant }) =>
+      React.createElement('div', { className, 'data-testid': 'react-tooltip', 'data-variant': variant })
+  }
+})
+
+vi.mock('@cdc/core/components/DataTable', async () => {
+  const React = await vi.importActual<typeof import('react')>('react')
+  return {
+    default: props => {
+      dataTableProps.calls.push(props)
+      return React.createElement('div', { 'data-testid': 'network-data-table' })
+    }
+  }
+})
+
+const getConfig = (overrides = {}) =>
+  ({
+    type: 'chart',
+    visualizationType: 'Network',
+    title: 'Partner Network',
+    data: [
+      { source: 'A', target: 'B', weight: 2, style: 'solid', nodeColor: '#005eaa' },
+      { source: 'B', target: 'A', weight: 3, style: 'dashed', nodeColor: '#4b830d' },
+      { source: 'B', target: 'C', weight: 1, style: 'solid', nodeColor: '#4b830d' }
+    ],
+    enableTooltips: true,
+    network: {
+      columns: {
+        source: 'source',
+        target: 'target',
+        weight: 'weight',
+        style: 'style',
+        nodeColor: 'nodeColor'
+      },
+      directed: false,
+      height: 420,
+      nodeRadius: 8,
+      nodeColor: '#712177',
+      linkColor: '#333333',
+      showLabels: true,
+      linkDistance: 90,
+      chargeStrength: -240,
+      rotation: 0,
+      scale: 1,
+      offsetX: 0,
+      offsetY: 0
+    },
+    table: { show: true, expanded: true, label: 'Data Table' },
+    ...overrides
+  } as any)
+
+describe('CdcChart Network', () => {
+  it('renders aggregated accessible nodes and links and preserves raw rows for the table', async () => {
+    dataTableProps.calls.length = 0
+    const { container } = render(<CdcChart config={getConfig()} interactionLabel='network-test' />)
+
+    await waitFor(() => expect(container.querySelectorAll('.network-chart__node')).toHaveLength(3))
+    expect(container.querySelectorAll('.network-chart__viewport .network-chart__link')).toHaveLength(2)
+    expect(container.querySelector('.network-chart__node')).toHaveAttribute('tabindex', '0')
+    expect(container.querySelector('.network-chart__node')).toHaveAttribute('aria-label')
+    const link = container.querySelector('.network-chart__link-group')
+    expect(link).toHaveAttribute('data-tooltip-content')
+    expect(container.querySelector('.network-chart__tooltip')).toHaveAttribute('data-variant', 'light')
+    expect(container.querySelector('[aria-label^="A,"] circle')).toHaveAttribute('fill', '#005eaa')
+    expect(container.querySelector('[aria-label^="B,"] circle')).toHaveAttribute('fill', '#4b830d')
+    expect(container.querySelector('[aria-label^="C,"] circle')).toHaveAttribute('fill', '#712177')
+    expect(container.querySelectorAll('.network-chart__label')).toHaveLength(3)
+    const linkKey = container.querySelector('[aria-label="Link styles"]')!
+    expect(linkKey).toHaveTextContent('Solid')
+    expect(linkKey).toHaveTextContent('Dashed')
+    expect(linkKey.querySelectorAll('line')).toHaveLength(2)
+    expect(linkKey.querySelectorAll('line')[1]).toHaveClass('network-chart__link--dashed')
+    expect(container.querySelector('.network-chart')).toHaveAttribute('viewBox', '0 0 640 388')
+    await waitFor(() => expect(dataTableProps.calls.at(-1)?.runtimeData).toHaveLength(3))
+  })
+
+  it('shows an actionable state when every row is invalid', async () => {
+    const { container } = render(
+      <CdcChart
+        config={getConfig({ data: [{ source: 'A', target: 'A', weight: 0 }], table: { show: false } })}
+        interactionLabel='network-invalid-test'
+      />
+    )
+
+    await waitFor(() => expect(container).toHaveTextContent('No valid connections are available'))
+    expect(container).toHaveTextContent('1 row(s) were rejected')
+  })
+
+  it('keeps config-authored disabled tooltips working without an editor control', async () => {
+    const { container } = render(<CdcChart config={getConfig({ enableTooltips: false })} />)
+
+    await waitFor(() => expect(container.querySelectorAll('.network-chart__node')).toHaveLength(3))
+    expect(container.querySelector('.network-chart__node')).not.toHaveAttribute('data-tooltip-content')
+    expect(container.querySelector('.network-chart__link-group')).not.toHaveAttribute('data-tooltip-content')
+    expect(container.querySelector('.network-chart__tooltip')).not.toBeInTheDocument()
+  })
+
+  it('renders link styles from the selected data column', async () => {
+    const { container } = render(<CdcChart config={getConfig()} />)
+
+    await waitFor(() =>
+      expect(container.querySelectorAll('.network-chart__viewport .network-chart__link')).toHaveLength(2)
+    )
+    const dashedLink = container.querySelector('[aria-label*="A and B, dashed link"] .network-chart__link')
+    const solidLink = container.querySelector('[aria-label*="B and C, solid link"] .network-chart__link')
+    expect(dashedLink).toHaveClass('network-chart__link--dashed')
+    expect(solidLink).not.toHaveClass('network-chart__link--dashed')
+  })
+
+  it('always renders node labels and ignores the legacy visibility field', async () => {
+    const { container } = render(
+      <CdcChart config={getConfig({ network: { ...getConfig().network, showLabels: false } })} />
+    )
+
+    await waitFor(() => expect(container.querySelectorAll('.network-chart__label')).toHaveLength(3))
+  })
+
+  it('omits the link-style key for blank or stale mappings', async () => {
+    const blank = render(
+      <CdcChart
+        config={getConfig({
+          network: { ...getConfig().network, columns: { ...getConfig().network.columns, style: '' } }
+        })}
+      />
+    )
+    await waitFor(() => expect(blank.container.querySelector('.network-chart')).toBeInTheDocument())
+    expect(blank.container.querySelector('[aria-label="Link styles"]')).not.toBeInTheDocument()
+
+    const stale = render(
+      <CdcChart
+        config={getConfig({
+          network: { ...getConfig().network, columns: { ...getConfig().network.columns, style: 'missing' } }
+        })}
+      />
+    )
+    await waitFor(() => expect(stale.container.querySelector('.network-chart')).toBeInTheDocument())
+    expect(stale.container.querySelector('[aria-label="Link styles"]')).not.toBeInTheDocument()
+  })
+
+  it('uses custom link captions with blank fallbacks and honors the shared legend visibility setting', async () => {
+    const visible = render(
+      <CdcChart
+        config={getConfig({
+          network: {
+            ...getConfig().network,
+            linkStyleLabels: { solid: ' Established ', dashed: '   ' }
+          }
+        })}
+      />
+    )
+    await waitFor(() => expect(visible.container.querySelector('[aria-label="Link styles"]')).toBeInTheDocument())
+    expect(visible.container.querySelector('[aria-label="Link styles"]')).toHaveTextContent('Established')
+    expect(visible.container.querySelector('[aria-label="Link styles"]')).toHaveTextContent('Dashed')
+
+    const hidden = render(<CdcChart config={getConfig({ legend: { hide: true } })} />)
+    await waitFor(() => expect(hidden.container.querySelector('.network-chart')).toBeInTheDocument())
+    expect(hidden.container.querySelector('[aria-label="Link styles"]')).not.toBeInTheDocument()
+  })
+
+  it('clamps invalid authored heights and creates unique ids per chart instance', async () => {
+    const { container } = render(
+      <>
+        <CdcChart config={getConfig({ network: { ...getConfig().network, height: -10 } })} />
+        <CdcChart config={getConfig({ network: { ...getConfig().network, height: -10 } })} />
+      </>
+    )
+
+    await waitFor(() => expect(container.querySelectorAll('.network-chart')).toHaveLength(2))
+    expect(Array.from(container.querySelectorAll('.network-chart__container'))).toEqual([
+      expect.objectContaining({ style: expect.objectContaining({ height: '160px' }) }),
+      expect.objectContaining({ style: expect.objectContaining({ height: '160px' }) })
+    ])
+    const markerIds = Array.from(container.querySelectorAll('marker')).map(marker => marker.id)
+    expect(new Set(markerIds).size).toBe(2)
+  })
+
+  it('starts from the authored view and keeps end-user view changes ephemeral', async () => {
+    const config = getConfig({
+      network: { ...getConfig().network, rotation: 30, scale: 1.5, offsetX: 20, offsetY: -10 }
+    })
+    const { container } = render(<CdcChart config={config} />)
+
+    const viewport = await waitFor(() => {
+      const element = container.querySelector('.network-chart__viewport')
+      expect(element).toBeInTheDocument()
+      return element
+    })
+    const authoredTransform = viewport.getAttribute('transform')
+    expect(authoredTransform).toContain('rotate(30) scale(1.5)')
+
+    fireEvent.wheel(container.querySelector('.network-chart')!, { deltaY: -100 })
+    expect(viewport.getAttribute('transform')).toBe(authoredTransform)
+
+    fireEvent.click(container.querySelector('[aria-label="Zoom in"]')!)
+    expect(viewport.getAttribute('transform')).not.toBe(authoredTransform)
+    expect(config.network.scale).toBe(1.5)
+
+    expect(container.querySelector('[aria-label="Rotate left"]')).not.toBeInTheDocument()
+    expect(container.querySelector('[aria-label="Rotate right"]')).not.toBeInTheDocument()
+    expect(config.network.rotation).toBe(30)
+
+    fireEvent.click(container.querySelector('[aria-label="Reset view"]')!)
+    expect(viewport.getAttribute('transform')).toBe(authoredTransform)
+  })
+
+  it('normalizes extreme authored rotations before calculating view bounds', async () => {
+    const config = getConfig({
+      network: { ...getConfig().network, rotation: Number.MAX_VALUE }
+    })
+    const { container } = render(<CdcChart config={config} />)
+
+    const viewport = await waitFor(() => {
+      const element = container.querySelector('.network-chart__viewport')
+      expect(element).toBeInTheDocument()
+      return element
+    })
+    const transform = viewport.getAttribute('transform') || ''
+    expect(transform).not.toContain('NaN')
+    expect(transform).not.toContain('Infinity')
+    expect(config.network.rotation).toBe(Number.MAX_VALUE)
+  })
+
+  it('constrains extreme view offsets to the graph bounds', async () => {
+    const config = getConfig({
+      network: { ...getConfig().network, offsetX: 10_000, offsetY: 10_000 }
+    })
+    const { container } = render(<CdcChart config={config} />)
+    const viewport = await waitFor(() => {
+      const element = container.querySelector('.network-chart__viewport')
+      expect(element).toBeInTheDocument()
+      return element
+    })
+    const transform = viewport.getAttribute('transform') || ''
+    const [, translatedX, translatedY] = transform.match(/^translate\(([^ ]+) ([^)]+)\)/) || []
+    expect(Number(translatedX)).toBeGreaterThanOrEqual(0)
+    expect(Number(translatedX)).toBeLessThanOrEqual(640)
+    expect(Number(translatedY)).toBeGreaterThanOrEqual(0)
+    expect(Number(translatedY)).toBeLessThanOrEqual(420)
+    expect(transform).not.toContain('10000')
+  })
+})

package/src/types/ChartConfig.ts

@@ -23,7 +23,6 @@ type General = CoreGeneral & {
   }
   useIntelligentLineChartLabels?: boolean
 }
-import { type Link } from './../components/Sankey/types'
 import { type DataDescription } from '@cdc/core/types/DataDescription'
 import { type Legend as CoreLegend } from '@cdc/core/types/Legend'
 import { Label } from './Label'
@@ -33,8 +32,8 @@ import { VizFilter } from '@cdc/core/types/VizFilter'
 import { type Annotation } from '@cdc/core/types/Annotation'
 import { Version } from '@cdc/core/types/Version'
 import Footnotes from '@cdc/core/types/Footnotes'
+import { ConfigTracking } from '@cdc/core/types/ConfigTracking'
 
-export type ViewportSize = 'xxs' | 'xs' | 'sm' | 'md' | 'lg'
 type ChartColumns = Record<string, Column>
 export type ChartOrientation = 'vertical' | 'horizontal'
 export type VisualizationType =
@@ -54,6 +53,8 @@ export type VisualizationType =
   | 'Combo'
   | 'Forecasting'
   | 'Sankey'
+  | 'Network'
+  | 'Dendrogram'
   | 'Bump Chart'
   | 'Warming Stripes'
 
@@ -66,6 +67,8 @@ export type HeatMapConfig = {
   colorBucketCount?: number
   xAxisPosition?: HeatMapXAxisPosition
   showCellValues?: boolean
+  horizontalScroll?: boolean
+  minColumnWidth?: number
 }
 
 export interface PreliminaryDataItem {
@@ -86,6 +89,8 @@ export interface PreliminaryDataItem {
   circleSize: number
   displayGray: boolean
   weight?: number
+  /** Styles the segment after a matching point; omitted to style both adjacent segments. */
+  lineEffectScope?: 'outgoing'
 }
 
 type DataFormat = {
@@ -114,7 +119,21 @@ type Exclusions = {
   dateEnd: string
 }
 
+export type LegendPattern = {
+  label?: string
+  color?: string
+  shape?: string
+  dataKey?: string
+  dataValue?: string | number
+  contrastCheck?: boolean
+  patternSize?: number
+  application?: 'value' | 'portion'
+  patternValueKey?: string
+  placement?: 'start' | 'end'
+}
+
 type Legend = CoreLegend & {
+  expandForecastConfidenceIntervals?: boolean
   seriesHighlight: string[]
   unified: boolean
   hideSuppressionLink: boolean
@@ -132,17 +151,7 @@ type Legend = CoreLegend & {
   }
   groupBy: string
   separators?: string
-  patterns?: {
-    [key: string]: {
-      label?: string
-      color?: string
-      shape?: string
-      dataKey?: string
-      dataValue?: string
-      contrastCheck?: boolean
-      patternSize?: number
-    }
-  }
+  patterns?: Record<string, LegendPattern>
 }
 
 type Visual = {
@@ -166,9 +175,17 @@ export type AllChartsConfig = {
   altText?: AltTextConfig
   annotations: Annotation[]
   animate: boolean
+  tracking?: ConfigTracking
   general: General
   barHasBorder: 'true' | 'false'
   barHeight: number
+  barRace?: {
+    maxBars?: number
+    secondsPerFrame?: number
+  }
+  lineRace?: {
+    secondsPerFrame?: number
+  }
   barSpace: number
   barStyle: 'lollipop' | 'rounded' | 'flat'
   barThickness: number
@@ -275,19 +292,24 @@ export type AllChartsConfig = {
   yScale: Function
   regions: Region[]
   sankey: {
-    data: { links: Link[]; storyNodeText: Object[]; tooltips: Object[] }[]
     nodePadding: number
     iterations: number
+    horizontalScrollWidth?: number | string
     nodeSize: {
       nodeWidth: number
     }
     margin: { margin_x: number; margin_y: number }
-    nodeColor: { default: boolean; inactive: boolean }
+    columns: {
+      source: string
+      target: string
+      value: string
+    }
+    nodeColor: { default: string; inactive: string }
     opacity: {
-      LinkOpacityInactive: string
-      LinkOpacityDefault: string
-      nodeOpacityInactive: boolean
-      nodeOpacityDefault: boolean
+      LinkOpacityInactive: number
+      LinkOpacityDefault: number
+      nodeOpacityInactive: number
+      nodeOpacityDefault: number
     }
     rxValue: number
     nodeFontColor: string
@@ -296,10 +318,54 @@ export type AllChartsConfig = {
       textAfter: string
     }
     linkColor: {
-      inactive: string
       default: string
+      inactive: string
     }
   }
+  network?: {
+    columns: {
+      source: string
+      target: string
+      weight?: string
+      style?: string
+      nodeColor?: string
+    }
+    directed: boolean
+    height: number
+    nodeRadius: number
+    nodeColor: string
+    linkColor: string
+    linkStyleLabels?: {
+      solid?: string
+      dashed?: string
+    }
+    linkDistance: number
+    chargeStrength: number
+    rotation: number
+    scale: number
+    offsetX: number
+    offsetY: number
+  }
+  dendrogram?: {
+    columns: {
+      node: string
+      parent: string
+      style?: string
+      nodeColor?: string
+    }
+    connectionType: 'curve' | 'line' | 'elbow'
+    orientation: 'horizontal' | 'vertical'
+    height: number
+    nodeRadius: number
+    nodeColor: string
+    linkColor: string
+    linkStyleLabels?: {
+      solid?: string
+      dashed?: string
+    }
+    leafSpacing: number
+    depthSpacing: number
+  }
   radar?: {
     gridRings: number
     showGridRings: boolean
@@ -330,44 +396,15 @@ export type LineChartConfig = {
 } & AllChartsConfig &
   MarkupConfig
 
-type SankeyLink = {
-  depth: number
-  height: number
-  id: string
-  index: number
-  layer: number
-  sourceLinks: SankeyLink[]
-  targetLinks: SankeyLink[]
-  value: number
-  x0: number
-  x1: number
-  y0: number
-  y1: number
-}
-
-type StoryNode = {
-  StoryNode: string
-  segmentTextAfter: string
-  segmentTextBefore: string
+type SankeyLinkRow = {
+  source: string
+  target: string
+  value: number | string
 }
 
 type SankeyChartConfig = {
   enableTooltips: boolean
-  data: [
-    {
-      tooltips: Object[]
-      // data to display in the sankey chart tooltips
-      tooltipData: Object[]
-      // data to display in the data table, bypasses the default data table output
-      tableData: Object[]
-      links: {
-        source: SankeyLink
-        target: SankeyLink
-        value: number
-      }[]
-      storyNodeText: StoryNode[]
-    }
-  ]
+  data: SankeyLinkRow[]
   visualizationType: 'Sankey'
 } & AllChartsConfig &
   MarkupConfig

package/src/types/ChartContext.ts

@@ -3,6 +3,7 @@ import { PickD3Scale } from '@visx/scale'
 import { type Annotation } from '@cdc/core/types/Annotation'
 import { DimensionsType } from '@cdc/core/types/Dimensions'
 import { type DashboardConfig } from '@cdc/dashboard/src/types/DashboardConfig'
+import { type RaceTiming } from '../components/raceTiming'
 export type ColorScale = PickD3Scale<'ordinal', any, any>
 
 export type TransformedData = {
@@ -12,6 +13,7 @@ export type TransformedData = {
 
 type SharedChartContext = {
   animatedChart?: boolean
+  brushData?: Object[]
   capitalize: (value: string) => string
   clean: Function
   colorScale?: ColorScale
@@ -34,8 +36,11 @@ type SharedChartContext = {
   isDraggingAnnotation?: boolean
   legendIsolateValues?: string[]
   legendRef?: React.RefObject<HTMLDivElement>
+  lineRaceProgress?: number
+  raceTiming?: RaceTiming
   parentRef?: React.RefObject<HTMLDivElement>
   setLegendIsolateValues?: Function
+  setRaceTiming?: React.Dispatch<React.SetStateAction<RaceTiming | null>>
   svgRef?: React.RefObject<SVGSVGElement>
   handleSmallMultipleHover?: (xAxisValue: any, yCoordinate: number) => void
   visibleAnnotations?: Annotation[]

package/src/types/Horizon.ts

@@ -10,7 +10,7 @@
  */
 export type HorizonPalette = {
   name?: string
-  version?: '1.0' | '2.0'
+  version?: '1.0' | '2.0' | '2.1'
   isReversed?: boolean
   customColors?: string[]
   customColorsOrdered?: string[]