@cdc/chart 4.26.4 → 4.26.6

package/src/components/HeatMap/tests/helpers.test.ts

@@ -0,0 +1,167 @@
+import { describe, expect, it } from 'vitest'
+import {
+  buildHeatMapData,
+  getHeatMapBucketPalette,
+  getHeatMapColorBucketCount,
+  getHeatMapColorScale,
+  getHeatMapDataGroupRanges
+} from '../helpers'
+import { type ChartConfig } from '../../../types/ChartConfig'
+
+describe('buildHeatMapData', () => {
+  it('aggregates duplicate x/series cells using numeric sum', () => {
+    const { columns, minValue, maxValue } = buildHeatMapData({
+      data: [
+        { month: 'Jan', Austin: 2, Boston: 4 },
+        { month: 'Jan', Austin: 3, Boston: 0 }
+      ],
+      xDataKey: 'month',
+      series: [
+        { dataKey: 'Austin', name: 'Austin' },
+        { dataKey: 'Boston', name: 'Boston' }
+      ],
+      xAxisType: 'categorical'
+    })
+
+    expect(columns).toHaveLength(1)
+    expect(columns[0].bins[0].value).toBe(5)
+    expect(columns[0].bins[0].sourceRows).toHaveLength(2)
+    expect(columns[0].bins[1].value).toBe(4)
+    expect(minValue).toBe(4)
+    expect(maxValue).toBe(5)
+  })
+
+  it('orders date-based x values in ascending order', () => {
+    const { columns } = buildHeatMapData({
+      data: [
+        { date: '2024-03-01', Austin: 1 },
+        { date: '2024-01-01', Austin: 2 },
+        { date: '2024-02-01', Austin: 3 }
+      ],
+      xDataKey: 'date',
+      series: [{ dataKey: 'Austin', name: 'Austin' }],
+      xAxisType: 'date'
+    })
+
+    expect(columns.map(column => column.key)).toEqual(['2024-01-01', '2024-02-01', '2024-03-01'])
+  })
+
+  it('creates empty cells for missing x/series combinations', () => {
+    const { columns, rowLabels } = buildHeatMapData({
+      data: [
+        { month: 'Jan', Austin: 5 },
+        { month: 'Feb', Boston: 4 }
+      ],
+      xDataKey: 'month',
+      series: [
+        { dataKey: 'Austin', name: 'Austin' },
+        { dataKey: 'Boston', name: 'Boston' }
+      ],
+      xAxisType: 'categorical'
+    })
+
+    expect(rowLabels).toEqual(['Austin', 'Boston'])
+    expect(columns).toHaveLength(2)
+    expect(columns[0].bins[1].value).toBeNull()
+    expect(columns[1].bins[0].value).toBeNull()
+  })
+
+  it('builds series-driven rows when data series are provided', () => {
+    const { columns, rowLabels, minValue, maxValue } = buildHeatMapData({
+      data: [
+        { month: 'Jan', Austin: 12, Boston: 30 },
+        { month: 'Feb', Austin: 18, Boston: 40 }
+      ],
+      xDataKey: 'month',
+      series: [
+        { dataKey: 'Austin', name: 'Austin' },
+        { dataKey: 'Boston', name: 'Boston' }
+      ],
+      seriesLabels: { Austin: 'Austin', Boston: 'Boston' },
+      xAxisType: 'categorical'
+    })
+
+    expect(rowLabels).toEqual(['Austin', 'Boston'])
+    expect(columns).toHaveLength(2)
+    expect(columns[0].bins[0].value).toBe(12)
+    expect(columns[0].bins[1].value).toBe(30)
+    expect(columns[1].bins[0].value).toBe(18)
+    expect(columns[1].bins[1].value).toBe(40)
+    expect(minValue).toBe(12)
+    expect(maxValue).toBe(40)
+  })
+
+  it('keeps non-calendar categories in source order for average age by city', () => {
+    const { columns, rowLabels, minValue, maxValue } = buildHeatMapData({
+      data: [
+        { communityType: 'Urban Core', Atlanta: 34, Chicago: 36, Phoenix: 38 },
+        { communityType: 'Suburban', Atlanta: 41, Chicago: 39, Phoenix: 42 },
+        { communityType: 'Rural', Atlanta: 46, Chicago: 44, Phoenix: 49 }
+      ],
+      xDataKey: 'communityType',
+      series: [
+        { dataKey: 'Atlanta', name: 'Atlanta' },
+        { dataKey: 'Chicago', name: 'Chicago' },
+        { dataKey: 'Phoenix', name: 'Phoenix' }
+      ],
+      xAxisType: 'categorical'
+    })
+
+    expect(columns.map(column => column.key)).toEqual(['Urban Core', 'Suburban', 'Rural'])
+    expect(rowLabels).toEqual(['Atlanta', 'Chicago', 'Phoenix'])
+    expect(columns[0].bins.map(bin => bin.value)).toEqual([34, 36, 38])
+    expect(columns[2].bins[2].value).toBe(49)
+    expect(minValue).toBe(34)
+    expect(maxValue).toBe(49)
+  })
+})
+
+describe('HeatMap data grouping', () => {
+  const buildPaletteConfig = (colorBucketCount?: unknown) =>
+    ({
+      general: {
+        palette: {
+          customColors: ['#000000', '#ffffff']
+        }
+      },
+      heatmap: {
+        colorBucketCount
+      }
+    } as ChartConfig)
+
+  it('clamps HeatMap data grouping to the supported range', () => {
+    expect(getHeatMapColorBucketCount(buildPaletteConfig(undefined))).toBe(9)
+    expect(getHeatMapColorBucketCount(buildPaletteConfig(0))).toBe(1)
+    expect(getHeatMapColorBucketCount(buildPaletteConfig(-4))).toBe(1)
+    expect(getHeatMapColorBucketCount(buildPaletteConfig(12))).toBe(9)
+  })
+
+  it('supports one bucket as the minimum heatmap color count', () => {
+    const colorScale = getHeatMapColorScale(buildPaletteConfig(1), 0, 100)
+
+    expect(getHeatMapBucketPalette(buildPaletteConfig(1))).toHaveLength(1)
+    expect(colorScale(1)).toBe(colorScale(99))
+  })
+
+  it('uses the configured number of data groups for heatmap cell colors', () => {
+    const colorScale = getHeatMapColorScale(buildPaletteConfig(5), 0, 100)
+    const bucketColors = [0, 20, 40, 60, 80].map(value => colorScale(value))
+
+    expect(getHeatMapColorBucketCount(buildPaletteConfig(5))).toBe(5)
+    expect(getHeatMapBucketPalette(buildPaletteConfig(5))).toHaveLength(5)
+    expect(new Set(bucketColors)).toHaveLength(5)
+    expect(colorScale(1)).toBe(colorScale(19))
+  })
+
+  it('builds data group legend ranges from the heatmap grouping domain', () => {
+    const ranges = getHeatMapDataGroupRanges(buildPaletteConfig(5), 0, 1, value => value.toFixed(1))
+
+    expect(ranges.map(range => range.label)).toEqual([
+      '0.0\u20130.2',
+      '0.2\u20130.4',
+      '0.4\u20130.6',
+      '0.6\u20130.8',
+      '0.8\u20131.0'
+    ])
+  })
+})

package/src/components/Legend/Legend.Component.tsx

@@ -242,7 +242,7 @@ const Legend: React.FC<LegendProps> = forwardRef(
                               </>
                             )}
                           </>
-                          <LegendLabel align='left' className='m-0 cove-prose'>
+                          <LegendLabel align='left' className='m-0'>
                             {parse(label.text)}
                           </LegendLabel>
                         </LegendItem>
@@ -361,7 +361,7 @@ const Legend: React.FC<LegendProps> = forwardRef(
                               />
                             </svg>
                           </span>
-                          <LegendLabel align='left' className='m-0 cove-prose'>
+                          <LegendLabel align='left' className='m-0'>
                             {parse(String((pattern as any)?.label || key))}
                           </LegendLabel>
                         </LegendItem>

package/src/components/Legend/helpers/createFormatLabels.test.ts

@@ -0,0 +1,88 @@
+import { scaleOrdinal } from '@visx/scale'
+import { describe, expect, it, vi } from 'vitest'
+import { createFormatLabels } from './createFormatLabels'
+import { ChartConfig } from '../../../types/ChartConfig'
+import { Label } from '../../../types/Label'
+
+const defaultLabels: Label[] = [
+  { datum: 'Series A', index: 0, text: 'Series A', value: '#aa0000' },
+  { datum: 'Series B', index: 1, text: 'Series B', value: '#00bb00' }
+]
+
+const buildConfig = (overrides: Partial<ChartConfig> = {}): ChartConfig =>
+  ({
+    visualizationType: 'Line',
+    visualizationSubType: 'regular',
+    general: {
+      palette: {
+        colorAssignmentMode: 'ordered'
+      }
+    },
+    legend: {},
+    smallMultiples: {
+      mode: 'by-series',
+      colorMode: 'same'
+    },
+    series: [
+      { dataKey: 'series_a', name: 'Series A', type: 'Line' },
+      { dataKey: 'series_b', name: 'Series B', type: 'Line' }
+    ],
+    runtime: {
+      seriesKeys: ['series_a', 'series_b'],
+      seriesLabels: {
+        series_a: 'Series A',
+        series_b: 'Series B'
+      },
+      seriesLabelsAll: ['Series A', 'Series B']
+    },
+    ...overrides
+  } as ChartConfig)
+
+const colorScale = scaleOrdinal({
+  domain: ['Series A', 'Series B'],
+  range: ['#aa0000', '#00bb00'],
+  unknown: null
+})
+
+const formatLabels = (config: ChartConfig) => createFormatLabels(config, [], [], colorScale, vi.fn())(defaultLabels)
+
+describe('createFormatLabels small multiples legend colors', () => {
+  it('uses the first color for by-series same-color legends by default', () => {
+    const labels = formatLabels(buildConfig())
+
+    expect(labels.map(label => label.value)).toEqual(['#aa0000', '#aa0000'])
+  })
+
+  it('preserves assigned series colors for by-series same-color legends', () => {
+    const labels = formatLabels(
+      buildConfig({
+        general: {
+          palette: {
+            colorAssignmentMode: 'by-value',
+            colorAssignments: [
+              { key: 'series_a', color: '#aa0000' },
+              { key: 'series_b', color: '#00bb00' }
+            ]
+          }
+        } as any
+      })
+    )
+
+    expect(labels.map(label => label.value)).toEqual(['#aa0000', '#00bb00'])
+  })
+
+  it('ignores stale assignments for by-series same-color legends', () => {
+    const labels = formatLabels(
+      buildConfig({
+        general: {
+          palette: {
+            colorAssignmentMode: 'by-value',
+            colorAssignments: [{ key: 'removed_series', color: '#00bb00' }]
+          }
+        } as any
+      })
+    )
+
+    expect(labels.map(label => label.value)).toEqual(['#aa0000', '#aa0000'])
+  })
+})

package/src/components/Legend/helpers/createFormatLabels.tsx

@@ -13,6 +13,7 @@ import { v2ColorDistribution } from '@cdc/core/helpers/palettes/colorDistributio
 import { updatePaletteNames } from '@cdc/core/helpers/updatePaletteNames'
 import { buildForecastPaletteMappings } from '../../../helpers/buildForecastPaletteMappings'
 import { getFullColorPalette } from '../../../helpers/smallMultiplesHelpers'
+import { hasSeriesColorAssignmentOverrides } from '../../../helpers/colorAssignmentHelpers'
 import { FaStar } from 'react-icons/fa'
 import { Label } from '../../../types/Label'
 import { ColorScale, TransformedData } from '../../../types/ChartContext'
@@ -36,7 +37,11 @@ export const createFormatLabels =
 
     // Handle small multiples legend adjustments
     // by-series + same: all tiles use same color, legend should show one color
-    if (config.smallMultiples?.mode === 'by-series' && config.smallMultiples?.colorMode === 'same') {
+    if (
+      config.smallMultiples?.mode === 'by-series' &&
+      config.smallMultiples?.colorMode === 'same' &&
+      !hasSeriesColorAssignmentOverrides(config)
+    ) {
       const baseColor = colorScale?.range()?.[0]
       return defaultLabels.map((label, i) => ({
         ...label,

package/src/components/LineChart/components/LineChart.BumpCircle.tsx

@@ -1,9 +1,11 @@
-import { useState } from 'react'
+import { useContext } from 'react'
 import { Group } from '@visx/group'
-import { type Column } from '@cdc/core/types/Column'
 import React from 'react'
 import { type ChartConfig } from '../../../types/ChartConfig'
 import { APP_FONT_COLOR } from '@cdc/core/helpers/constants'
+import ConfigContext from '../../../ConfigContext'
+import { isDateScale } from '@cdc/core/helpers/cove/date'
+import { buildBumpChartTooltipHtml } from '../../../helpers/bumpChartTooltip'
 
 type LineChartBumpCircleProp = {
   config: ChartConfig
@@ -15,17 +17,15 @@ type LineChartBumpCircleProp = {
 
 const LineChartBumpCircle = (props: LineChartBumpCircleProp) => {
   const { config, xScale, yScale, parseDate, yAxisWidth } = props
+  const { colorScale, formatDate, formatTooltipsDate } = useContext(ConfigContext)
 
   // get xScale and yScale...
   if (!config?.runtime?.series) return
 
   const handleX = xValue => {
-    if (config.xAxis.type === 'date') {
+    if (isDateScale(config.xAxis)) {
       return parseDate(xValue).getTime()
     }
-    if (config.xAxis.type === 'date-time') {
-      return new Date(xValue)
-    }
     if (config.xAxis.type === 'categorical') {
       return xValue
     }
@@ -35,20 +35,7 @@ const LineChartBumpCircle = (props: LineChartBumpCircleProp) => {
     return xScale.bandwidth ? xScale.bandwidth() / 2 + Number(xValue) : Number(xValue)
   }
 
-  const getListItems = dataRow => {
-    return Object.values(config.columns)
-      ?.filter(column => column.tooltips)
-      .map(column => {
-        const label = column.label || column.name
-        return `
-        <li className='tooltip-body'>
-          <strong>${label}</strong>: ${dataRow[column.name]}
-        </li>`
-      })
-      .join(' ')
-  }
-
-  const getTooltip = dataRow => `<ul> ${getListItems(dataRow)} </ul>`
+  const tooltipId = `cdc-open-viz-tooltip-${config.runtime.uniqueId}-bump`
 
   const circles = config.runtime?.series.map(series => {
     return config.data.map((d, dataIndex) => {
@@ -61,8 +48,18 @@ const LineChartBumpCircle = (props: LineChartBumpCircleProp) => {
               <>
                 <circle
                   key={`bump-circle-${series_dataKey}-${dataIndex}`}
-                  data-tooltip-html={getTooltip(d)}
-                  data-tooltip-id={`bump-chart`}
+                  data-tooltip-html={buildBumpChartTooltipHtml({
+                    config,
+                    colorScale,
+                    dataRow: d,
+                    series,
+                    helpers: {
+                      formatDate,
+                      formatTooltipsDate,
+                      parseDate
+                    }
+                  })}
+                  data-tooltip-id={tooltipId}
                   r={10}
                   cx={Number(checkBandScale(xScale(handleX(axis_dataKey))))}
                   cy={Number(yScale(series_dataKey))}