@cdc/chart 4.26.4 → 4.26.6

package/src/scss/main.scss

@@ -1,5 +1,6 @@
 @import '@cdc/core/styles/utils/breakpoints';
 @import '@cdc/core/styles/layout/wrapper-padding';
+@import '@cdc/core/styles/layout/callout';
 
 .form-container {
   overflow-y: auto;
@@ -24,33 +25,17 @@
     background: transparent;
 
     .cdc-callout {
-      box-shadow: 0 2px 4px rgb(159 159 159 / 10%);
-      border: 1px solid #dff2f6;
-      margin: 0;
-      padding: 1.25rem;
-      border-radius: 0.25rem;
-      position: relative;
-      background: transparent;
-
-      .cdc-callout__flag {
-        position: absolute;
-        top: -0.36rem;
-        right: 1.08rem;
-        width: 1.84rem;
-        height: auto;
-      }
+      --cdc-callout-background: transparent;
 
       .cove-visualization__title,
       .cove-visualization__header {
         background: transparent;
         border: 0;
-        color: var(--cool-gray-90, #1f2937);
         margin: 0 0 1rem;
         padding: 0;
         border-radius: 0;
 
         h2 {
-          color: var(--cool-gray-90, #1f2937);
           font-family: var(--fonts-nunito, var(--app-font-secondary));
           font-size: 1.1rem;
           font-weight: 700;
@@ -64,11 +49,17 @@
     margin-bottom: 0 !important;
   }
 
+  .y-axis-top-title {
+    font-family: var(--fonts-nunito, var(--app-font-secondary));
+    font-weight: 700;
+    line-height: 1.4;
+    margin: 0 0 0.5rem;
+  }
+
   .legend-top {
     .legend-wrapper .tooltip-boundary {
       display: flex;
       flex-wrap: wrap;
-      row-gap: var(--cove-visualization-section-gap, 1.5rem);
       order: 2;
 
       aside {
@@ -188,7 +179,7 @@
       white-space: nowrap;
     }
 
-    .legend-item>.legend-item {
+    .legend-item > .legend-item {
       display: inline-block;
       flex: 0 0 auto;
     }
@@ -222,11 +213,11 @@
         left: 0%;
         top: 108%;
 
-        &>* {
+        & > * {
           margin: 0;
         }
 
-        &>p,
+        & > p,
         a {
           margin-left: 5px;
         }
@@ -235,7 +226,6 @@
   }
 
   .dynamic-legend-list {
-
     // overide traditional legend item that uses !important
     .legend-item {
       align-items: flex-end !important;
@@ -268,7 +258,7 @@
     font-size: 1em;
     vertical-align: middle;
 
-    &>span {
+    & > span {
       display: flex;
       justify-items: center;
       align-items: center;
@@ -278,25 +268,25 @@
       max-height: 1px;
     }
 
-    &>span[class*='Asterisk'] {
+    & > span[class*='Asterisk'] {
       transform: scale(1.8);
       margin-top: 15px;
     }
 
-    &>span[class*='Dagger'] {
+    & > span[class*='Dagger'] {
       margin-top: 2px;
     }
 
-    &>span[class*='Sign'] {
+    & > span[class*='Sign'] {
       margin-top: 1px;
     }
 
-    &>svg {
+    & > svg {
       width: 50px;
       height: 23px;
     }
 
-    &>p {
+    & > p {
       margin: 0;
     }
   }
@@ -325,8 +315,8 @@
       min-width: 0;
       max-width: 100%;
 
-      >div,
-      >aside {
+      > div,
+      > aside {
         min-width: 0;
         max-width: 100%;
       }
@@ -339,7 +329,7 @@
 
     &.legend-top:not(.legend-hidden) {
       .legend-wrapper {
-        &>div {
+        & > div {
           order: 2;
           width: 100%;
         }
@@ -354,7 +344,7 @@
 
     &.legend-left:not(.legend-hidden) {
       .legend-wrapper {
-        &>div {
+        & > div {
           order: 2;
           width: 75%;
         }
@@ -369,7 +359,7 @@
 
     &.legend-right:not(.legend-hidden) {
       .legend-wrapper {
-        &>div {
+        & > div {
           order: 1;
           width: 75%;
         }
@@ -391,7 +381,7 @@
       flex-wrap: nowrap;
       flex-direction: column-reverse;
 
-      &>div.tooltip-boundary {
+      & > div.tooltip-boundary {
         margin-top: 1.5em;
       }
     }
@@ -401,14 +391,10 @@
       flex-direction: column;
     }
 
-    &.legend-hidden>svg {
+    &.legend-hidden > svg {
       width: 100% !important;
     }
 
-    &.dashboard-brush {
-      margin-bottom: 2.5em;
-    }
-
     // Brush touch support
     .brush-overlay {
       touch-action: none;
@@ -434,7 +420,7 @@
       pointer-events: none;
     }
 
-    >svg {
+    > svg {
       overflow: visible;
       font-size: 14px;
       margin: 1rem 0 2rem;
@@ -449,7 +435,7 @@
     }
 
     &.chart-line--hover {
-      >svg circle {
+      > svg circle {
         opacity: 0;
 
         &:hover {
@@ -459,12 +445,12 @@
     }
 
     &.chart-line--always {
-      >svg circle {
+      > svg circle {
         opacity: 1;
       }
 
       // Animations for line chart and data points
-      >svg.animated {
+      > svg.animated {
         circle {
           opacity: 0;
           animation: revealLolly 0.25s linear forwards;
@@ -525,7 +511,7 @@
 
   @include breakpointClass(md) {
     .visualization-container {
-      >svg {
+      > svg {
         font-size: 16px;
         width: 75%;
         order: 1;
@@ -608,7 +594,6 @@
     }
 
     &.animated {
-
       .vertical path,
       .vertical rect,
       .vertical foreignObject div {
@@ -626,7 +611,6 @@
       }
 
       &.animate {
-
         path,
         rect,
         foreignObject div {
@@ -685,7 +669,7 @@
   text-align: center;
   transform: scale(1);
 
-  >.visx-group[style] {
+  > .visx-group[style] {
     transform: scale(1);
   }
 }
@@ -707,7 +691,7 @@
 }
 
 .cove-visualization.type-chart.type-sparkline {
-  &.lg .visualization-container>svg {
+  &.lg .visualization-container > svg {
     width: 100%;
   }
 
@@ -738,7 +722,6 @@
         transform: translate(-20px, 0);
       }
     }
-
   }
 
   .subtext,

package/src/test/CdcChart.dataTable.test.tsx

@@ -0,0 +1,122 @@
+import React from 'react'
+import { render, screen, waitFor } from '@testing-library/react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import CdcChart from '../CdcChartComponent'
+
+const dataTableProps = vi.hoisted(() => {
+  Object.defineProperty((globalThis as any).HTMLCanvasElement.prototype, 'getContext', {
+    configurable: true,
+    value: () => ({
+      measureText: (text = '') => ({ width: String(text).length * 8 })
+    })
+  })
+
+  return [] as any[]
+})
+
+vi.mock('@cdc/core/components/DataTable', async () => {
+  const React = await vi.importActual<typeof import('react')>('react')
+
+  return {
+    default: props => {
+      dataTableProps.push(props)
+      return React.createElement('div', { 'data-testid': 'data-table-probe' })
+    }
+  }
+})
+
+vi.mock('@visx/responsive/lib/components/ParentSize', () => ({
+  default: ({ children }) => children({ width: 640, height: 360 })
+}))
+
+vi.mock('../components/LinearChart', async () => {
+  const React = await vi.importActual<typeof import('react')>('react')
+
+  return {
+    default: React.forwardRef(() => React.createElement('div', { 'data-testid': 'mock-linear-chart' }))
+  }
+})
+
+describe('CdcChart data table dataset wiring', () => {
+  beforeEach(() => {
+    dataTableProps.length = 0
+  })
+
+  it('passes the selected dashboard dataset metadata to DataTable', async () => {
+    const dataset = {
+      data: [{ category: 'A', value: 1 }],
+      dataFileName: 'stale-chart-source.json',
+      dataFileSourceType: 'url',
+      dataUrl: '/wcms/vizdata/chart-source.json',
+      runtimeDataUrl: '/wcms/vizdata/chart-runtime.json'
+    }
+
+    render(
+      <CdcChart
+        config={
+          {
+            type: 'chart',
+            visualizationType: 'Bar',
+            title: 'Dataset-backed Chart',
+            dataKey: 'chartDataset',
+            data: dataset.data,
+            xAxis: { dataKey: 'category' },
+            series: [{ dataKey: 'value' }],
+            table: {
+              show: true,
+              expanded: true,
+              download: true,
+              label: 'Data Table',
+              indexLabel: ''
+            }
+          } as any
+        }
+        datasets={{ chartDataset: dataset } as any}
+        isDashboard={true}
+        interactionLabel='chart-dataset-test'
+      />
+    )
+
+    await waitFor(() => expect(dataTableProps.length).toBeGreaterThan(0))
+
+    expect(dataTableProps.at(-1).dataConfig).toMatchObject({
+      runtimeDataUrl: '/wcms/vizdata/chart-runtime.json'
+    })
+  })
+
+  it('keeps chart footnotes visible when the data table is collapsed by default', async () => {
+    render(
+      <CdcChart
+        config={
+          {
+            type: 'chart',
+            visualizationType: 'Bar',
+            title: 'Footnote-backed Chart',
+            data: [{ category: 'A', value: 1 }],
+            xAxis: { dataKey: 'category' },
+            series: [{ dataKey: 'value' }],
+            legacyFootnotes: 'Legacy chart footnote',
+            footnotes: {
+              staticFootnotes: [{ text: 'Structured chart footnote' }]
+            },
+            table: {
+              show: true,
+              expanded: false,
+              download: true,
+              label: 'Data Table',
+              indexLabel: ''
+            }
+          } as any
+        }
+        interactionLabel='chart-footnote-collapse-test'
+      />
+    )
+
+    await waitFor(() => {
+      expect(dataTableProps.at(-1)?.expandDataTable).toBe(false)
+    })
+
+    expect(await screen.findByText('Legacy chart footnote')).toBeInTheDocument()
+    expect(await screen.findByText('Structured chart footnote')).toBeInTheDocument()
+  })
+})

package/src/types/ChartConfig.ts

@@ -1,4 +1,4 @@
-import { Axis } from '@cdc/core/types/Axis'
+import { type Axis } from '@cdc/core/types/Axis'
 import { MarkupConfig } from '@cdc/core/types/MarkupVariable'
 import { type ForestPlotConfigSettings } from './ForestPlot'
 import { type HorizonConfigSettings } from './Horizon'
@@ -18,6 +18,8 @@ type General = CoreGeneral & {
     isReversed?: boolean
     customColors?: string[]
     customColorsOrdered?: string[]
+    colorAssignmentMode?: 'ordered' | 'by-value'
+    colorAssignments?: { key: string; color: string }[]
   }
   useIntelligentLineChartLabels?: boolean
 }
@@ -41,6 +43,7 @@ export type VisualizationType =
   | 'Box Plot'
   | 'Deviation Bar'
   | 'Forest Plot'
+  | 'HeatMap'
   | 'Horizon Chart'
   | 'Line'
   | 'Paired Bar'
@@ -53,6 +56,18 @@ export type VisualizationType =
   | 'Sankey'
   | 'Bump Chart'
   | 'Warming Stripes'
+
+export type HeatMapXAxisPosition = 'top' | 'bottom'
+
+export type HeatMapConfig = {
+  cellPadding?: number
+  rowLabelGap?: number
+  columnLabelGap?: number
+  colorBucketCount?: number
+  xAxisPosition?: HeatMapXAxisPosition
+  showCellValues?: boolean
+}
+
 export interface PreliminaryDataItem {
   column: string
   displayLegend: boolean
@@ -70,6 +85,7 @@ export interface PreliminaryDataItem {
   hideLineStyle: boolean
   circleSize: number
   displayGray: boolean
+  weight?: number
 }
 
 type DataFormat = {
@@ -143,7 +159,11 @@ type Visual = {
   maximumShapeAmount: 7
 }
 
+import { type AltTextConfig } from '@cdc/core/types/AltText'
+export type { AltTextConfig }
+
 export type AllChartsConfig = {
+  altText?: AltTextConfig
   annotations: Annotation[]
   animate: boolean
   general: General
@@ -174,6 +194,9 @@ export type AllChartsConfig = {
   footnotes: Footnotes
   forestPlot: ForestPlotConfigSettings
   formattedData: Object[] & { urlFiltered: boolean }
+  originalFormattedData?: Object[]
+  yAxisDomainData?: Object[]
+  heatmap?: HeatMapConfig
   heights: {
     vertical: number
     horizontal: number

package/src/types/ChartContext.ts

@@ -20,6 +20,8 @@ type SharedChartContext = {
   currentViewport?: 'lg' | 'md' | 'sm' | 'xs' | 'xxs'
   vizViewport?: 'lg' | 'md' | 'sm' | 'xs' | 'xxs'
   dashboardConfig?: DashboardConfig
+  excludedData?: Object[]
+  filteredData?: Object[]
   // process top level chart aria label for each chart type
   handleChartAriaLabels: (config: any) => string
   handleDragStateChange: (isDragging: any) => void
@@ -37,6 +39,7 @@ type SharedChartContext = {
   svgRef?: React.RefObject<SVGSVGElement>
   handleSmallMultipleHover?: (xAxisValue: any, yCoordinate: number) => void
   visibleAnnotations?: Annotation[]
+  yAxisTickValues?: number[]
 }
 
 // Line Chart Specific Context
@@ -56,6 +59,7 @@ type LineChartContext = SharedChartContext & {
   transformedData: TransformedData[]
   updateConfig: Function
   visualizationType: 'Line'
+  yAxisDomainData?: Object[]
   colorPalettes: Record<string, string[]>
   twoColorPalette: Record<string, string[]>
 }
@@ -86,4 +90,5 @@ export type ChartContext =
       transformedData?: TransformedData[]
       twoColorPalette: any
       updateConfig?: Function
+      yAxisDomainData?: Object[]
     })

package/src/helpers/getYAxisAutoPadding.ts

@@ -1,53 +0,0 @@
-import { ChartConfig } from '../types/ChartConfig'
-
-/**
- * Calculates the Y-axis auto padding to prevent data labels from overlapping with axis tick labels.
- * This is used when inline labels are enabled and there's potential for overlap.
- *
- * @param yScale - The D3 scale object for the Y-axis (must have .ticks() method)
- * @param handleNumTicks - The number of ticks to display on the axis
- * @param maxValue - The maximum data value (from useReduceData)
- * @param minValue - The minimum data value (from useReduceData)
- * @param config - The chart configuration object
- * @returns The calculated auto padding percentage (0-100+), or 0 if no padding needed
- */
-export const getYAxisAutoPadding = (
-  yScale: any,
-  handleNumTicks: number,
-  maxValue: number,
-  minValue: number,
-  config: ChartConfig
-): number => {
-  // Early returns for cases where auto padding is not needed
-  if (!yScale?.ticks || config.orientation === 'horizontal' || config.yAxis?.max) {
-    return 0
-  }
-
-  const ticks = yScale.ticks(handleNumTicks)
-
-  if (!Array.isArray(ticks) || ticks.length === 0) {
-    return 0
-  }
-
-  // minimum percentage of the max value that the distance should be from the top grid line
-  const MINIMUM_DISTANCE_PERCENTAGE = 0.025
-
-  const topGridLine = Math.max(...ticks)
-  const needsPaddingThreshold = topGridLine - maxValue * MINIMUM_DISTANCE_PERCENTAGE
-  const maxValueIsGreaterThanThreshold = maxValue > needsPaddingThreshold
-
-  if (!maxValueIsGreaterThanThreshold) return 0
-
-  const tickGap = ticks.length === 1 ? ticks[0] : ticks[1] - ticks[0]
-  const nextTick = Math.max(...ticks) + tickGap
-  const divideBy = minValue < 0 ? maxValue / 2 : maxValue
-  const calculatedPadding = (nextTick - maxValue) / divideBy
-
-  // if auto padding is too close to next tick, add one more ticks worth of padding
-  const newPadding =
-    calculatedPadding > MINIMUM_DISTANCE_PERCENTAGE ? calculatedPadding : calculatedPadding + tickGap / divideBy
-
-  /* sometimes even though the padding is getting to the next tick exactly,
-  d3 still doesn't show the tick. we add 0.1 to ensure to tip it over the edge */
-  return newPadding * 100 + 0.1
-}