@cdc/chart 4.26.4 → 4.26.5

package/src/helpers/tests/getYAxisAutoPaddingMode.test.ts

@@ -0,0 +1,90 @@
+import { describe, expect, it } from 'vitest'
+import { getYAxisAutoPaddingMode } from '../getYAxisAutoPaddingMode'
+import { createMockConfig } from '../../components/LinearChart/tests/mockConfigContext'
+
+describe('getYAxisAutoPaddingMode', () => {
+  it('returns inline-label for multi-word inline labels', () => {
+    expect(
+      getYAxisAutoPaddingMode(
+        createMockConfig({
+          yAxis: {
+            ...createMockConfig().yAxis,
+            titlePlacement: 'side',
+            inlineLabel: 'per 100k'
+          }
+        })
+      )
+    ).toBe('inline-label')
+  })
+
+  it('returns inline-label for inline labels with leading space', () => {
+    expect(
+      getYAxisAutoPaddingMode(
+        createMockConfig({
+          yAxis: {
+            ...createMockConfig().yAxis,
+            titlePlacement: 'side',
+            inlineLabel: ' cases'
+          }
+        })
+      )
+    ).toBe('inline-label')
+  })
+
+  it('returns top-title for top y-axis titles with label content', () => {
+    expect(
+      getYAxisAutoPaddingMode(
+        createMockConfig({
+          yAxis: {
+            ...createMockConfig().yAxis,
+            titlePlacement: 'top',
+            inlineLabel: ''
+          }
+        })
+      )
+    ).toBe('top-title')
+  })
+
+  it('returns none for hidden top y-axis titles', () => {
+    expect(
+      getYAxisAutoPaddingMode(
+        createMockConfig({
+          hideYAxisLabel: true,
+          yAxis: {
+            ...createMockConfig().yAxis,
+            titlePlacement: 'top',
+            inlineLabel: ''
+          }
+        })
+      )
+    ).toBe('none')
+  })
+
+  it('returns none when neither trigger applies', () => {
+    expect(
+      getYAxisAutoPaddingMode(
+        createMockConfig({
+          yAxis: {
+            ...createMockConfig().yAxis,
+            titlePlacement: 'side',
+            inlineLabel: 'Rate'
+          }
+        })
+      )
+    ).toBe('none')
+  })
+
+  it('returns inline-label when both triggers are present', () => {
+    expect(
+      getYAxisAutoPaddingMode(
+        createMockConfig({
+          yAxis: {
+            ...createMockConfig().yAxis,
+            titlePlacement: 'top',
+            inlineLabel: 'per 100k'
+          }
+        })
+      )
+    ).toBe('inline-label')
+  })
+})

package/src/helpers/tests/handleChartAriaLabels.test.ts

@@ -0,0 +1,71 @@
+import { handleChartAriaLabels } from '../handleChartAriaLabels'
+
+describe('handleChartAriaLabels', () => {
+  it('returns auto-generated title from visualizationType and title', () => {
+    const result = handleChartAriaLabels({
+      visualizationType: 'Line',
+      title: 'COVID-19 Cases'
+    })
+    expect(result).toBe('Line chart with the title: COVID-19 Cases')
+  })
+
+  it('returns visualizationType-only title when chart title is absent', () => {
+    const result = handleChartAriaLabels({
+      visualizationType: 'Bar'
+    })
+    expect(result).toBe('Bar chart')
+  })
+
+  it('returns fallback when visualizationType is missing', () => {
+    const result = handleChartAriaLabels({})
+    expect(result).toBe('Data visualization container')
+  })
+
+  describe('description', () => {
+    it('concatenates static description after title', () => {
+      const result = handleChartAriaLabels({
+        visualizationType: 'Line',
+        title: 'Trends',
+        altText: { type: 'static', value: 'Cases rose steadily over 8 weeks.' }
+      })
+      expect(result).toBe('Line chart with the title: Trends. Cases rose steadily over 8 weeks.')
+    })
+
+    it('concatenates description from metadata after title', () => {
+      const result = handleChartAriaLabels({
+        visualizationType: 'Line',
+        title: 'Trends',
+        altText: { type: 'metadata', metadataKey: 'altDescription' },
+        dataMetadata: { altDescription: 'Positivity increased from 4% to 12%.' }
+      })
+      expect(result).toBe('Line chart with the title: Trends. Positivity increased from 4% to 12%.')
+    })
+
+    it('returns title only when metadata key is missing', () => {
+      const result = handleChartAriaLabels({
+        visualizationType: 'Line',
+        title: 'Trends',
+        altText: { type: 'metadata', metadataKey: 'missing' },
+        dataMetadata: { other: 'value' }
+      })
+      expect(result).toBe('Line chart with the title: Trends')
+    })
+
+    it('returns title only when not configured', () => {
+      const result = handleChartAriaLabels({
+        visualizationType: 'Line',
+        title: 'Trends'
+      })
+      expect(result).toBe('Line chart with the title: Trends')
+    })
+
+    it('returns title only when altText is empty object', () => {
+      const result = handleChartAriaLabels({
+        visualizationType: 'Line',
+        title: 'Trends',
+        altText: {}
+      })
+      expect(result).toBe('Line chart with the title: Trends')
+    })
+  })
+})

package/src/helpers/tests/seriesHighlight.test.ts

@@ -0,0 +1,61 @@
+import { describe, expect, it } from 'vitest'
+import { getLegendHighlightKey, shouldResetSeriesHighlight } from '../seriesHighlight'
+
+describe('seriesHighlight helpers', () => {
+  const seriesLabels = {
+    nonfatal_rate_alldrugs: 'All drugs',
+    opioid_nonfatal_rate: 'All opioids',
+    stimulant_nonfatal_rate: 'All stimulants'
+  }
+
+  it('normalizes a legend label to the stored series highlight key', () => {
+    expect(getLegendHighlightKey(seriesLabels, 'All opioids')).toBe('opioid_nonfatal_rate')
+    expect(getLegendHighlightKey(seriesLabels, 'unmapped_series')).toBe('unmapped_series')
+  })
+
+  it('accepts legend label objects and legacy raw string callers', () => {
+    expect(
+      getLegendHighlightKey(seriesLabels, {
+        datum: 'All stimulants',
+        index: 2,
+        text: 'All stimulants',
+        value: '#075290'
+      })
+    ).toBe('stimulant_nonfatal_rate')
+
+    expect(getLegendHighlightKey(seriesLabels, 'Highlighted bar')).toBe('Highlighted bar')
+  })
+
+  it('does not reset when removing one selected item from a three-series legend', () => {
+    expect(
+      shouldResetSeriesHighlight(
+        ['nonfatal_rate_alldrugs', 'opioid_nonfatal_rate'],
+        Object.keys(seriesLabels),
+        'opioid_nonfatal_rate',
+        'Line'
+      )
+    ).toBe(false)
+  })
+
+  it('resets when selecting the only remaining unselected item', () => {
+    expect(
+      shouldResetSeriesHighlight(
+        ['nonfatal_rate_alldrugs', 'opioid_nonfatal_rate'],
+        Object.keys(seriesLabels),
+        'stimulant_nonfatal_rate',
+        'Line'
+      )
+    ).toBe(true)
+  })
+
+  it('does not reset when the clicked item is not a known series key', () => {
+    expect(
+      shouldResetSeriesHighlight(
+        ['nonfatal_rate_alldrugs', 'opioid_nonfatal_rate'],
+        Object.keys(seriesLabels),
+        'suppressed-data-note',
+        'Line'
+      )
+    ).toBe(false)
+  })
+})

package/src/hooks/tests/useScales.test.tsx

@@ -0,0 +1,105 @@
+import React from 'react'
+import { renderHook } from '@testing-library/react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import ConfigContext from '../../ConfigContext'
+import useScales from '../useScales'
+import { createMockChartContext, createMockConfig } from '../../components/LinearChart/tests/mockConfigContext'
+
+const mockGetMinMax = vi.fn(() => ({
+  min: 0,
+  max: 100,
+  leftMax: 100,
+  rightMax: 0
+}))
+
+const mockGetYAxisAutoPadding = vi.fn(() => 10)
+
+vi.mock('../../helpers/getMinMax', () => ({
+  default: (...args: any[]) => mockGetMinMax(...args)
+}))
+
+vi.mock('../../helpers/getYAxisAutoPadding', () => ({
+  getYAxisAutoPadding: (...args: any[]) => mockGetYAxisAutoPadding(...args)
+}))
+
+const config = createMockConfig({
+  runtime: {
+    ...createMockConfig().runtime,
+    yAxis: {
+      ...createMockConfig().runtime.yAxis,
+      numTicks: 5
+    }
+  } as any
+})
+
+const createWrapper = () => {
+  const context = createMockChartContext(config)
+
+  return ({ children }: React.PropsWithChildren) => (
+    <ConfigContext.Provider value={context}>{children}</ConfigContext.Provider>
+  )
+}
+
+const baseProps = {
+  config,
+  data: [],
+  tableData: [],
+  minValue: 0,
+  maxValue: 100,
+  existPositiveValue: true,
+  isAllLine: true,
+  xAxisDataMapped: [1, 2, 3],
+  xMax: 300,
+  yMax: 200,
+  currentViewport: 'lg' as const
+}
+
+describe('useScales', () => {
+  beforeEach(() => {
+    mockGetMinMax.mockClear()
+    mockGetYAxisAutoPadding.mockClear()
+  })
+
+  it('allows repeated padding passes for inline-label mode', () => {
+    renderHook(() => useScales({ ...baseProps, yAxisAutoPaddingMode: 'inline-label' }), {
+      wrapper: createWrapper()
+    })
+
+    expect(mockGetYAxisAutoPadding).toHaveBeenCalledTimes(3)
+  })
+
+  it('runs a single padding pass for top-title mode', () => {
+    renderHook(() => useScales({ ...baseProps, yAxisAutoPaddingMode: 'top-title' }), {
+      wrapper: createWrapper()
+    })
+
+    expect(mockGetYAxisAutoPadding).toHaveBeenCalledTimes(1)
+  })
+
+  it('ignores manual y-axis padding while calculating auto-padding', () => {
+    const configWithManualPadding = createMockConfig({
+      yAxis: {
+        ...createMockConfig().yAxis,
+        enablePadding: true,
+        scalePadding: 90
+      }
+    })
+
+    renderHook(() => useScales({ ...baseProps, config: configWithManualPadding, yAxisAutoPaddingMode: 'top-title' }), {
+      wrapper: createWrapper()
+    })
+
+    expect(mockGetMinMax.mock.calls[0][0].config.yAxis).toMatchObject({
+      enablePadding: false,
+      scalePadding: 0
+    })
+    expect(mockGetYAxisAutoPadding.mock.calls[0][4].yAxis).toMatchObject({
+      enablePadding: false,
+      scalePadding: 0
+    })
+    expect(mockGetMinMax.mock.calls[1][0].config.yAxis).toMatchObject({
+      enablePadding: true,
+      scalePadding: 10
+    })
+  })
+})

package/src/hooks/useScales.ts

@@ -15,6 +15,7 @@ import { ChartConfig } from '../types/ChartConfig'
 import { ChartContext } from '../types/ChartContext'
 import _ from 'lodash'
 import { getYAxisAutoPadding } from '../helpers/getYAxisAutoPadding'
+import { YAxisAutoPaddingMode } from '../helpers/getYAxisAutoPaddingMode'
 import getMinMax from '../helpers/getMinMax'
 import { countNumOfTicks } from '../helpers/countNumOfTicks'
 
@@ -39,7 +40,7 @@ type useScaleProps = {
   xAxisDataMapped: Object[] // array of x axis date/category items
   xMax: number // chart svg width
   yMax: number // chart svg height
-  needsYAxisAutoPadding?: boolean // whether Y-axis needs auto padding for label overflow
+  yAxisAutoPaddingMode?: YAxisAutoPaddingMode // why Y-axis auto padding should run
   currentViewport?: string // current viewport for tick calculation
 }
 
@@ -55,7 +56,7 @@ const useScales = (properties: useScaleProps) => {
     maxValue,
     existPositiveValue,
     isAllLine,
-    needsYAxisAutoPadding,
+    yAxisAutoPaddingMode = 'none',
     currentViewport
   } = properties
 
@@ -65,9 +66,13 @@ const useScales = (properties: useScaleProps) => {
   const isHorizontal = config.orientation === 'horizontal'
   const { visualizationType, xAxis, forestPlot, runtime } = config
   const isForestPlot = visualizationType === 'Forest Plot'
+  const shouldApplyYAxisAutoPadding = yAxisAutoPaddingMode !== 'none' && !isHorizontal
+  const minMaxConfig = shouldApplyYAxisAutoPadding
+    ? { ...config, yAxis: { ...config.yAxis, enablePadding: false, scalePadding: 0 } }
+    : config
 
   const minMaxProps = {
-    config,
+    config: minMaxConfig,
     minValue,
     maxValue,
     existPositiveValue,
@@ -91,12 +96,17 @@ const useScales = (properties: useScaleProps) => {
   const handleNumTicks = isForestPlot ? config.data.length : yTickCount
 
   // Apply auto-padding if needed
-  if (needsYAxisAutoPadding && !isHorizontal) {
-    for (let i = 0; i < 3; i++) {
-      const scale = composeYScale({ min, max, yMax, config, leftMax })
-      const padding = getYAxisAutoPadding(scale, handleNumTicks, maxValue, minValue, config)
-      if (i === 0 || padding > 0) {
-        const adjustedConfig = { ...config, yAxis: { ...config.yAxis, scalePadding: padding, enablePadding: true } }
+  if (shouldApplyYAxisAutoPadding) {
+    const maxPasses = yAxisAutoPaddingMode === 'inline-label' ? 3 : 1
+
+    for (let i = 0; i < maxPasses; i++) {
+      const scale = composeYScale({ min, max, yMax, config: minMaxConfig, leftMax })
+      const padding = getYAxisAutoPadding(scale, handleNumTicks, maxValue, minValue, minMaxConfig, yAxisAutoPaddingMode)
+      if (padding > 0 || (maxPasses > 1 && i === 0)) {
+        const adjustedConfig = {
+          ...minMaxConfig,
+          yAxis: { ...minMaxConfig.yAxis, scalePadding: padding, enablePadding: true }
+        }
         const result = getMinMax({ ...minMaxProps, config: adjustedConfig })
         min = result.min
         max = result.max

package/src/index.jsx

@@ -9,12 +9,15 @@ let isEditor = window.location.href.includes('editor=true')
 let isDebug = window.location.href.includes('debug=true')
 
 let domContainer = document.getElementsByClassName('react-container')[0]
+let configUrl = domContainer.dataset.configUrl
+let injectedConfig = domContainer.coveConfig
 
 ReactDOM.createRoot(domContainer).render(
   <React.StrictMode>
     <CdcChart
-      interactionLabel={domContainer.attributes['data-config']?.value}
-      configUrl={domContainer.attributes['data-config'].value}
+      interactionLabel={configUrl}
+      config={injectedConfig}
+      configUrl={injectedConfig ? undefined : configUrl}
       isEditor={isEditor}
       isDebug={isDebug}
     />

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,