@cdc/chart 4.26.3 → 4.26.5

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/HorizonChart/HorizonChart.tsx

@@ -23,13 +23,21 @@ type HorizonChartProps = {
   yScale: any
   xMax: number
   yMax: number
+  yAxisWidth: number
   handleTooltipMouseOver: (e: any, additionalData?: any) => void
   handleTooltipMouseOff: () => void
   tooltipData?: any
   showTooltip?: boolean
 }
 
-const HorizonChart = ({ xScale, xMax, yMax, handleTooltipMouseOver, handleTooltipMouseOff }: HorizonChartProps) => {
+const HorizonChart = ({
+  xScale,
+  xMax,
+  yMax,
+  yAxisWidth,
+  handleTooltipMouseOver,
+  handleTooltipMouseOff
+}: HorizonChartProps) => {
   // Get data and config from context
   const { transformedData: data, config, colorScale, rawData, parseDate } = useContext(ConfigContext)
 
@@ -94,7 +102,7 @@ const HorizonChart = ({ xScale, xMax, yMax, handleTooltipMouseOver, handleToolti
 
   return (
     <ErrorBoundary component='HorizonChart'>
-      <Group className='horizon-chart' key='horizon-wrapper' left={Number(config.yAxis.size)} height={Number(yMax)}>
+      <Group className='horizon-chart' key='horizon-wrapper' left={yAxisWidth} height={Number(yMax)}>
         {seriesKeys.map((seriesKey, index) => {
           const rowY = getRowY(index)
           return (

package/src/components/HoverLine/HoverLine.tsx

@@ -9,9 +9,10 @@ type HoverLineProps = {
   yMax?: number
   point: { x: number; y: number }
   orientation: 'horizontal' | 'vertical'
+  yAxisWidth: number
 }
 
-const HoverLine: React.FC<HoverLineProps> = ({ tooltipData, xMax, yMax, point, orientation }) => {
+const HoverLine: React.FC<HoverLineProps> = ({ tooltipData, xMax, yMax, point, orientation, yAxisWidth }) => {
   const { config } = useContext(ConfigContext)
   const { verticalHoverLine, horizontalHoverLine } = config.visual
   const { visualizationType } = config
@@ -23,8 +24,9 @@ const HoverLine: React.FC<HoverLineProps> = ({ tooltipData, xMax, yMax, point, o
   const showHorizontalHoverLine = horizontalHoverLine || (horizontalHoverLine && isScatterPlot)
 
   const getX = () => {
-    if (point.x > xMax + Number(config.yAxis.size)) return xMax
-    if (point.x < config.yAxis.size) return config.yAxis.size
+    if (point.x < yAxisWidth) return yAxisWidth
+    if (xMax === undefined) return point.x
+    if (point.x > xMax + yAxisWidth) return xMax + yAxisWidth
     return point.x
   }
 
@@ -52,11 +54,7 @@ const HoverLine: React.FC<HoverLineProps> = ({ tooltipData, xMax, yMax, point, o
   if (isHorizontal) {
     return (
       showHorizontalHoverLine && (
-        <Group
-          key={`tooltipLine-horizontal${point.y}${point.x}`}
-          className='horizontal-tooltip-line'
-          left={config.yAxis.size ? config.yAxis.size : 0}
-        >
+        <Group key={`tooltipLine-horizontal${point.y}${point.x}`} className='horizontal-tooltip-line' left={yAxisWidth}>
           <Line
             from={{ x: 0, y: getY() }}
             to={{ x: xMax, y: getY() }}

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

@@ -117,8 +117,8 @@ const Legend: React.FC<LegendProps> = forwardRef(
       >
         {(legend.label || legend.description) && (
           <div className={legend.description ? 'mb-3' : 'mb-2'}>
-            {legend.label && <h3 className='fw-bold'>{parse(legend.label)}</h3>}
-            {legend.description && <p className='mt-2'>{parse(legend.description)}</p>}
+            {legend.label && <h3 className='fw-bold cove-prose'>{parse(legend.label)}</h3>}
+            {legend.description && <p className='mt-2 cove-prose'>{parse(legend.description)}</p>}
           </div>
         )}
         <LegendGradient
@@ -242,7 +242,7 @@ const Legend: React.FC<LegendProps> = forwardRef(
                               </>
                             )}
                           </>
-                          <LegendLabel align='left' className='m-0'>
+                          <LegendLabel align='left' className='m-0 cove-prose'>
                             {parse(label.text)}
                           </LegendLabel>
                         </LegendItem>
@@ -361,7 +361,7 @@ const Legend: React.FC<LegendProps> = forwardRef(
                               />
                             </svg>
                           </span>
-                          <LegendLabel align='left' className='m-0'>
+                          <LegendLabel align='left' className='m-0 cove-prose'>
                             {parse(String((pattern as any)?.label || key))}
                           </LegendLabel>
                         </LegendItem>

package/src/components/Legend/LegendGroup/LegendGroup.styles.css

@@ -17,6 +17,11 @@
     }
   }
 
+  .legend-group-grid {
+    display: flex;
+    flex-wrap: wrap;
+  }
+
   .legend-group.top,
   .legend-group.bottom {
     grid-gap: 10px;

package/src/components/Legend/LegendGroup/LegendGroup.tsx

@@ -32,7 +32,7 @@ const LegendGroup = ({ formatLabels }) => {
 
   const groups: string[] = getSubGroups(data, config.legend.groupBy)
 
-  const classNames = ['legend-group', 'container', config.legend.position, currentViewport, 'row']
+  const classNames = ['legend-group', 'legend-group-grid', 'container', config.legend.position, currentViewport]
 
   const gridCol =
     currentViewport === 'xs'
@@ -47,6 +47,8 @@ const LegendGroup = ({ formatLabels }) => {
 
   let classNameItem = ['legend-group group-item', isSigleCol]
 
+  if (groups.length === 0) return null
+
   return (
     <div className={classNames.join(' ')}>
       {groups.map(group => {

package/src/components/Legend/helpers/index.ts

@@ -40,8 +40,6 @@ export const getMarginBottom = (isLegendBottom, config) => {
 
   if (isLegendTop) marginBottom = 27
 
-  if (isLegendTop && config.yAxis?.inlineLabel) marginBottom += 9
-
   if (isLegendBottom) marginBottom += 9
 
   if (hasSuppression) marginBottom += 40

package/src/components/LineChart/LineChartProps.ts

@@ -8,6 +8,7 @@ export type LineChartProps = {
   getYAxisData: Function
   xMax: number
   yMax: number
+  yAxisWidth: number
   handleTooltipMouseOver: Function
   handleTooltipMouseOff: Function
   showTooltip: boolean

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

@@ -1,30 +1,31 @@
-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
   xScale: any
   yScale: any
   parseDate: any
+  yAxisWidth: number
 }
 
 const LineChartBumpCircle = (props: LineChartBumpCircleProp) => {
-  const { config, xScale, yScale, parseDate } = props
+  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
     }
@@ -34,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) => {
@@ -55,13 +43,23 @@ const LineChartBumpCircle = (props: LineChartBumpCircleProp) => {
       let axis_dataKey = d[config.xAxis.dataKey]
       return (
         <React.Fragment key={`bump-circle-${series_dataKey}-${dataIndex}`}>
-          <Group left={Number(config.runtime.yAxis.size)}>
+          <Group left={yAxisWidth}>
             {series_dataKey && (
               <>
                 <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))}