@cdc/chart 4.26.4 → 4.26.6

package/src/_stories/ChartBar.Editor.stories.tsx

@@ -848,6 +848,61 @@ export const BarLeftValueAxisTests: Story = {
       }
     )
 
+    const getAxisTitlePlacementVisualization = () => {
+      const chartContainer = canvasElement.querySelector('.cove-visualization__body, .chart-container, .visualization')
+      const svg = chartContainer?.querySelector('svg') || canvasElement.querySelector('svg:not(.icon)')
+      const sideLabelCandidates = svg ? Array.from(svg.querySelectorAll('text.y-label')) : []
+      const sideLabel = sideLabelCandidates.find(el => (el.textContent?.trim() || '').length > 0) || null
+      const topLabel = chartContainer?.querySelector('.y-axis-top-title')
+
+      return {
+        hasSideLabel: !!sideLabel,
+        sideLabelTransform: sideLabel?.getAttribute('transform') || '',
+        sideLabelText: sideLabel?.textContent?.trim() || '',
+        hasTopLabel: !!topLabel,
+        topLabelText: topLabel?.textContent?.trim() || ''
+      }
+    }
+
+    const titlePlacementSelect = canvas.getByLabelText(/label placement/i) as HTMLSelectElement
+
+    expect(yAxisLabelInput.getAttribute('maxlength')).toBe('35')
+
+    await performAndAssert(
+      'Switch Title Placement to Top',
+      getAxisTitlePlacementVisualization,
+      async () => {
+        await userEvent.selectOptions(titlePlacementSelect, 'top')
+      },
+      (before, after) => {
+        expect(titlePlacementSelect.value).toBe('top')
+        expect(yAxisLabelInput.getAttribute('maxlength')).toBeNull()
+        expect(after.hasTopLabel).toBe(true)
+        expect(after.topLabelText).toBe('Y-Axis')
+        expect(after.hasSideLabel).toBe(false)
+
+        return true
+      }
+    )
+
+    await performAndAssert(
+      'Switch Title Placement back to Side',
+      getAxisTitlePlacementVisualization,
+      async () => {
+        await userEvent.selectOptions(titlePlacementSelect, 'side')
+      },
+      (before, after) => {
+        expect(titlePlacementSelect.value).toBe('side')
+        expect(yAxisLabelInput.getAttribute('maxlength')).toBe('35')
+        expect(after.hasTopLabel).toBe(false)
+        expect(after.hasSideLabel).toBe(true)
+        expect(after.sideLabelText).toBe('Y-Axis')
+        expect(after.sideLabelTransform).toContain('rotate(-90)')
+
+        return true
+      }
+    )
+
     // ============================================================================
     // TEST: Inline Label Field
     // Tests visualization output changes when entering custom inline label text
@@ -1529,9 +1584,13 @@ export const BarRegionsSectionTests: Story = {
         const textColors = canvas.queryAllByLabelText(/text color/i)
         const backgrounds = canvas.queryAllByLabelText(/background/i)
         const minRegionTypes = canvas.queryAllByLabelText(/minimum region type/i)
+        const textColor = textColors[0] as HTMLInputElement | undefined
+        const background = backgrounds[0] as HTMLInputElement | undefined
 
         return {
           regionCount: regionLabels.length,
+          textColor: textColor?.placeholder,
+          background: background?.placeholder,
           hasFields:
             regionLabels.length > 0 && textColors.length > 0 && backgrounds.length > 0 && minRegionTypes.length > 0
         }
@@ -1544,6 +1603,10 @@ export const BarRegionsSectionTests: Story = {
         // Should now have 1 region with all fields
         expect(after.regionCount).toBe(1)
         expect(after.hasFields).toBe(true)
+        expect(after.textColor).toBe(
+          getComputedStyle(document.documentElement).getPropertyValue('--cool-gray-90').trim()
+        )
+        expect(after.background).toBe('#71767a')
 
         return true
       }

package/src/_stories/ChartBrush.Interaction.stories.tsx

@@ -0,0 +1,112 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { expect, waitFor } from 'storybook/test'
+import Chart from '../CdcChartComponent'
+import brushEnabledConfig from './_mock/brush_enabled.json'
+import { assertVisualizationRendered } from '@cdc/core/helpers/testing'
+
+const meta: Meta<typeof Chart> = {
+  title: 'Components/Templates/Chart/BrushSlider/Interactions',
+  component: Chart
+}
+
+export default meta
+
+type Story = StoryObj<typeof Chart>
+
+type BrushSelectionState = {
+  x: string | null
+  width: string | null
+}
+
+const getBrushSelection = (canvasElement: HTMLElement) => {
+  const selection = canvasElement.querySelector('.visx-brush-selection') as SVGRectElement | null
+  expect(selection).toBeTruthy()
+  return selection!
+}
+
+const readBrushSelectionState = (canvasElement: HTMLElement): BrushSelectionState => {
+  const selection = getBrushSelection(canvasElement)
+  return {
+    x: selection.getAttribute('x'),
+    width: selection.getAttribute('width')
+  }
+}
+
+const getBrushPoint = (canvasElement: HTMLElement, x: number) => {
+  const overlay = canvasElement.querySelector('.visx-brush-overlay') as SVGRectElement | null
+  expect(overlay).toBeTruthy()
+
+  const rect = overlay!.getBoundingClientRect()
+  return {
+    target: overlay!,
+    clientX: rect.left + x,
+    clientY: rect.top + rect.height / 2
+  }
+}
+
+const dispatchPointer = (target: Element, type: string, clientX: number, clientY: number, buttons = 1) => {
+  target.dispatchEvent(
+    new PointerEvent(type, {
+      bubbles: true,
+      cancelable: true,
+      clientX,
+      clientY,
+      buttons,
+      pointerId: 1,
+      pointerType: 'mouse'
+    })
+  )
+}
+
+const settleInteraction = async () => {
+  await new Promise<void>(resolve => {
+    requestAnimationFrame(() => requestAnimationFrame(() => resolve()))
+  })
+}
+
+export const OutsideSelectionInteractionsBlocked: Story = {
+  args: {
+    config: brushEnabledConfig,
+    isEditor: false
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Outside-selection clicks and drags are blocked before they reach the visx brush overlay.'
+      }
+    }
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
+
+    await waitFor(() => {
+      expect(canvasElement.querySelector('.visx-brush-selection')).toBeTruthy()
+      expect(canvasElement.querySelector('.visx-brush-overlay')).toBeTruthy()
+    })
+
+    const initial = readBrushSelectionState(canvasElement)
+    const selectionX = Number(initial.x)
+    const selectionWidth = Number(initial.width)
+
+    const outsideLeft = getBrushPoint(canvasElement, Math.max(1, selectionX - 40))
+    dispatchPointer(outsideLeft.target, 'pointerdown', outsideLeft.clientX, outsideLeft.clientY)
+    dispatchPointer(outsideLeft.target, 'pointerup', outsideLeft.clientX, outsideLeft.clientY, 0)
+    outsideLeft.target.dispatchEvent(
+      new MouseEvent('click', {
+        bubbles: true,
+        cancelable: true,
+        clientX: outsideLeft.clientX,
+        clientY: outsideLeft.clientY
+      })
+    )
+    await settleInteraction()
+    expect(readBrushSelectionState(canvasElement)).toEqual(initial)
+
+    const outsideRight = getBrushPoint(canvasElement, selectionX + selectionWidth + 40)
+    dispatchPointer(outsideRight.target, 'pointerdown', outsideRight.clientX, outsideRight.clientY)
+    dispatchPointer(outsideRight.target, 'pointermove', outsideRight.clientX + 80, outsideRight.clientY)
+    dispatchPointer(outsideRight.target, 'pointerup', outsideRight.clientX + 80, outsideRight.clientY, 0)
+    await settleInteraction()
+    expect(readBrushSelectionState(canvasElement)).toEqual(initial)
+  }
+}

package/src/_stories/ChartBrush.smoke.stories.tsx

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react-vite'
 import Chart from '../CdcChartComponent'
 import brushEnabledConfig from './_mock/brush_enabled.json'
+import pertussisConfig from './_mock/reported_pertussis_cases.json'
 import { assertVisualizationRendered } from '@cdc/core/helpers/testing'
 
 const meta: Meta<typeof Chart> = {
@@ -36,16 +37,24 @@ export const BrushSliderEnabled: Story = {
   }
 }
 
-export const BrushSliderInEditor: Story = {
+export const BrushDynamicYAxis: Story = {
   args: {
-    config: brushEnabledConfig,
-    isEditor: true
+    config: {
+      ...pertussisConfig,
+      xAxis: {
+        ...pertussisConfig.xAxis,
+        brushActive: true,
+        brushDynamicYAxis: true,
+        brushDefaultRecentDateCount: undefined
+      }
+    },
+    isEditor: false
   },
   parameters: {
     docs: {
       description: {
         story:
-          'Brush slider in editor mode. You can toggle the "Brush Slider" checkbox in the X-Axis section to enable/disable it.'
+          'Reported pertussis cases (1922-2025) with Dynamic Y-Axis enabled. The Y-axis rescales to fit only the data visible in the current brush selection. Drag the brush to the 1970s-1990s low period (~1K-7K cases) then to the 1920s-1940s peak (~100K-265K cases) to see the Y-axis adjust dramatically.'
       }
     }
   },

package/src/_stories/_mock/alt_text_metadata.json

@@ -0,0 +1,38 @@
+{
+  "version": "4.26.4",
+  "type": "chart",
+  "visualizationType": "Line",
+  "title": "COVID-19 Test Positivity",
+  "showTitle": true,
+  "animate": false,
+  "orientation": "vertical",
+  "dataMetadata": {
+    "altDescription": "Line chart showing COVID-19 test positivity rising from 4% to 12% over the last eight weeks, which may indicate growing community spread.",
+    "lastUpdated": "2024-09-21",
+    "source": "CDC NREVSS"
+  },
+  "data": [
+    { "week": "Aug 3", "positivity": 4.2 },
+    { "week": "Aug 10", "positivity": 4.8 },
+    { "week": "Aug 17", "positivity": 5.5 },
+    { "week": "Aug 24", "positivity": 6.3 },
+    { "week": "Aug 31", "positivity": 7.4 },
+    { "week": "Sep 7", "positivity": 8.9 },
+    { "week": "Sep 14", "positivity": 10.6 },
+    { "week": "Sep 21", "positivity": 12.0 }
+  ],
+  "xAxis": {
+    "dataKey": "week",
+    "type": "categorical",
+    "label": "Week Ending"
+  },
+  "yAxis": {
+    "label": "% Positive",
+    "numTicks": "5"
+  },
+  "series": [
+    { "dataKey": "positivity", "type": "Line", "axis": "Left", "tooltip": true }
+  ],
+  "legend": { "hide": true },
+  "table": { "show": true, "label": "Data Table" }
+}