@cdc/chart 4.25.11 → 4.26.2

package/src/_stories/Chart.stories.tsx

@@ -7,12 +7,14 @@ import lollipop from './_mock/lollipop.json'
 import forestPlot from '../../examples/feature/forest-plot/forest-plot.json'
 import pairedBar from './_mock/paired-bar.json'
 import horizontalBarConfig from './_mock/horizontal_bar.json'
+import horizontalBarsDynamicYAxis from './_mock/horizontal-bars-dynamic-y-axis.json'
 import barChartLabels from './_mock/barchart_labels.mock.json'
 import pieConfig from './_mock/pie_with_data.json'
 import pieCalculatedArea from './_mock/pie_calculated_area.json'
 import areaChartStacked from './_mock/area_chart_stacked.json'
 import multipleLines from './_mock/short_dates.json'
 import { editConfigKeys } from '@cdc/core/helpers/configHelpers'
+import { assertVisualizationRendered } from '@cdc/core/helpers/testing'
 
 const meta: Meta<typeof Chart> = {
   title: 'Components/Templates/Chart',
@@ -25,18 +27,27 @@ export const line_Chart_Two_Points_Regression_Test: Story = {
   args: {
     config: lineChartTwoPointsRegressionTest,
     isEditor: false
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }
 export const line_Chart_Two_Points_New_Chart: Story = {
   args: {
     config: lineChartTwoPointsNewChart,
     isEditor: false
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }
 
 export const multiple_lines: Story = {
   args: {
     config: editConfigKeys(multipleLines, [{ path: ['tooltips', 'dateDisplayFormat'], value: '%b. %d %Y' }])
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }
 
@@ -44,24 +55,46 @@ export const Lollipop: Story = {
   args: {
     config: lollipop,
     isEditor: false
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }
 
 export const Forest_Plot: Story = {
   args: {
     config: forestPlot
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }
 
 export const Horizontal_Bar: Story = {
   args: {
     config: horizontalBarConfig
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
+  }
+}
+
+export const Horizontal_Bars_Dynamic_Y_Axis: Story = {
+  args: {
+    config: horizontalBarsDynamicYAxis,
+    isEditor: false
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }
 
 export const BarChart_Labels: Story = {
   args: {
     config: barChartLabels
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }
 
@@ -69,12 +102,18 @@ export const Pie: Story = {
   args: {
     config: pieConfig,
     isEditor: true
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }
 export const Pie_Calculated_Area: Story = {
   args: {
     config: pieCalculatedArea,
     isEditor: true
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }
 
@@ -82,6 +121,9 @@ export const Paired_Bar: Story = {
   args: {
     config: pairedBar,
     isEditor: true
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }
 
@@ -89,6 +131,9 @@ export const Area_Chart_stacked: Story = {
   args: {
     config: areaChartStacked,
     isEditor: false
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }
 

package/src/_stories/Chart.tooltip.stories.tsx

@@ -3,6 +3,7 @@ import type { Meta, StoryObj } from '@storybook/react-vite'
 import Chart from '../CdcChartComponent'
 import barChartStacked from './_mock/barchart_labels.mock.json'
 import barChartSuppressed from './_mock/bar-chart-suppressed.json'
+import { assertVisualizationRendered } from '@cdc/core/helpers/testing'
 const meta: Meta<typeof Chart> = {
   title: 'Components/Templates/Chart/Tooltip',
   component: Chart
@@ -20,6 +21,9 @@ export const Increased_Tooltip_Range: Story = {
         singleSeries: true
       }
     }
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }
 
@@ -58,6 +62,9 @@ export const Additional_Tooltip: Story = {
         }
       }
     }
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }
 

package/src/_stories/ChartAnnotation.stories.tsx

@@ -3,6 +3,7 @@ import annotationConfig from './_mock/annotation_category_mock.json'
 import annotationConfigDateLinear from './_mock/annotation_date-linear_mock.json'
 import annotationConfigDateTime from './_mock/annotation_date-time_mock.json'
 import Chart from '../CdcChartComponent'
+import { assertVisualizationRendered } from '@cdc/core/helpers/testing'
 
 const meta: Meta<typeof Chart> = {
   title: 'Components/Templates/Chart/Annotation',
@@ -15,6 +16,9 @@ export const Chart_Annotation_Categorical: Story = {
   args: {
     config: annotationConfig,
     isEditor: true
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }
 
@@ -22,6 +26,9 @@ export const Chart_Annotation_Date_Linear: Story = {
   args: {
     config: annotationConfigDateLinear,
     isEditor: true
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }
 
@@ -29,6 +36,9 @@ export const Chart_Annotation_Date_Time: Story = {
   args: {
     config: annotationConfigDateTime,
     isEditor: true
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }
 

package/src/_stories/ChartAxisLabels.stories.tsx

@@ -3,6 +3,7 @@ import SimplifiedLineConfig from './_mock/simplified_line.json'
 
 import Chart from '../CdcChartComponent'
 import { editConfigKeys } from '@cdc/core/helpers/configHelpers'
+import { assertVisualizationRendered } from '@cdc/core/helpers/testing'
 
 const meta: Meta<typeof Chart> = {
   title: 'Components/Templates/Chart/Axis Labels',
@@ -17,6 +18,9 @@ export const Abbreviated_Dates: Story = {
       { path: ['xAxis', 'showYearsOnce'], value: true },
       { path: ['tooltips', 'dateDisplayFormat'], value: '%b. %d %Y' }
     ])
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }
 

package/src/_stories/ChartAxisTitles.stories.tsx

@@ -4,6 +4,7 @@ import longXLabelsConfig from './_mock/large_x_axis_labels.json'
 import pairedBarConfig from './_mock/paired-bar.json'
 import { editConfigKeys } from '@cdc/core/helpers/configHelpers'
 import { ChartConfig } from '../types/ChartConfig'
+import { assertVisualizationRendered } from '@cdc/core/helpers/testing'
 
 const meta: Meta<typeof Chart> = {
   title: 'Components/Templates/Chart/Axis Titles',
@@ -17,6 +18,9 @@ type Story = StoryObj<typeof Chart>
 export const Dynamic_Labels: Story = {
   args: {
     config: editConfigKeys(longXLabelsConfig, [{ path: ['xAxis', 'label'], value: 'This is the title' }])
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }
 
@@ -43,11 +47,17 @@ export const Rotated_Labels: StoryObj<{ config: ChartConfig; tickRotation: numbe
     ])
 
     return <Chart config={config} />
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }
 
 export const Paired_Bar: Story = {
   args: {
     config: pairedBarConfig
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }

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

@@ -2388,10 +2388,9 @@ export const BarFiltersTests: Story = {
       const chartContainer = canvasElement.querySelector('.cove-component__content, .chart-container, .visualization')
       const svg = chartContainer?.querySelector('svg') || canvasElement.querySelector('svg:not(.icon)')
       const bars = svg?.querySelectorAll('rect[class*="bar"], rect[data-testid*="bar"], g[class*="bar"] rect') || []
-      const filtersList = canvasElement.querySelector('.filters-list')
+      const filtersList = canvasElement.querySelector('.draggable-field-list')
 
-      // Fix: filters can be either div.mb-1 (collapsed) or fieldset.edit-block.mb-1 (expanded)
-      const filterElements = filtersList?.querySelectorAll('div.mb-1, fieldset.edit-block.mb-1') || []
+      const filterElements = filtersList?.querySelectorAll('.editor-field-item') || []
 
       // Get actual data visualization state for filtering verification
       // Method 1: Try X-axis tick labels (most direct)
@@ -2565,9 +2564,15 @@ export const BarFiltersTests: Story = {
       'Apply Filter Value - Chart data visually filtered to show only Q2',
       getChartDataState,
       async () => {
-        // Find the "Filter Default Value" dropdown - this sets filter.active which actually filters the data
-        const filterDefaultValueSelect = canvas.getByLabelText(/filter default value/i) as HTMLSelectElement
-
+        // Find all "Filter Default Value (category)" dropdowns
+        const filterDefaultValueSelects = canvas.getAllByLabelText(
+          /filter default value \(category\)/i
+        ) as HTMLSelectElement[]
+        // Select the dropdown that contains Q2 as an option
+        const filterDefaultValueSelect = filterDefaultValueSelects.find(select =>
+          Array.from(select.options).some(opt => opt.value === 'Q2')
+        )
+        if (!filterDefaultValueSelect) throw new Error('Could not find filter default value dropdown for Q2')
         // Select Q2 to filter the chart to only show Q2 data (different from current state)
         await userEvent.selectOptions(filterDefaultValueSelect, 'Q2')
       },

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

@@ -0,0 +1,295 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { within, userEvent, expect } from 'storybook/test'
+import Chart from '../CdcChartComponent'
+
+// Import testing helpers following best practices document
+import { openAccordion, performAndAssert, waitForEditor, waitForPresence } from '@cdc/core/helpers/testing'
+
+// Import working brush configuration
+import brushEnabledConfig from './_mock/brush_enabled.json'
+
+const meta: Meta<typeof Chart> = {
+  title: 'Components/Templates/Chart/Editor Tests/Brush',
+  component: Chart
+}
+
+export default meta
+type Story = StoryObj<typeof Chart>
+
+// ============================================================================
+// BRUSH CHART EDITOR TESTS
+// Tests the Brush Slider features in the Date/Category Axis accordion section
+// Following best practices:
+// - Tests visualization output changes, not control state
+// - Uses performAndAssert pattern for all interactions
+// - Tests specific visual changes in the brush selection
+// ============================================================================
+
+export const BrushDefaultSelectionTests: Story = {
+  name: 'Default Selection Mode Tests',
+  parameters: {
+    test: {
+      timeout: 30000
+    }
+  },
+  args: {
+    config: {
+      ...brushEnabledConfig,
+      xAxis: {
+        ...brushEnabledConfig.xAxis,
+        brushActive: true,
+        // New property: when set, shows last X data points instead of 35%
+        brushDefaultRecentDateCount: undefined
+      }
+    },
+    isEditor: true
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    await waitForEditor(canvas)
+    await openAccordion(canvas, 'Date/Category Axis')
+
+    // ============================================================================
+    // TEST: Brush Slider Toggle
+    // Verifies: Brush slider appears/disappears in the visualization
+    // ============================================================================
+
+    const getBrushVisibility = () => {
+      const brushSvg = canvasElement.querySelector('svg[style*="border: 1px solid"]')
+      const brushRect = canvasElement.querySelector('.visx-brush rect')
+      return {
+        hasBrushSvg: !!brushSvg,
+        hasBrushRect: !!brushRect,
+        brushContainerVisible: !!canvasElement.querySelector('[class*="brush"]')
+      }
+    }
+
+    // Verify brush is initially visible since config has brushActive: true
+    const initialBrushState = getBrushVisibility()
+    expect(initialBrushState.hasBrushSvg || initialBrushState.brushContainerVisible).toBe(true)
+
+    // Find and toggle the brush checkbox
+    const brushCheckbox = canvas.getByLabelText(/show brush slider/i) as HTMLInputElement
+    expect(brushCheckbox).toBeTruthy()
+    expect(brushCheckbox.checked).toBe(true)
+
+    // Toggle brush off and verify it disappears from visualization
+    await performAndAssert(
+      'Brush Slider Toggle Off',
+      getBrushVisibility,
+      async () => await userEvent.click(brushCheckbox),
+      (before, after) => {
+        // Either brush SVG or brush container should disappear
+        return (
+          (before.hasBrushSvg && !after.hasBrushSvg) || (before.brushContainerVisible && !after.brushContainerVisible)
+        )
+      }
+    )
+
+    // Toggle brush back on
+    await performAndAssert(
+      'Brush Slider Toggle On',
+      getBrushVisibility,
+      async () => await userEvent.click(brushCheckbox),
+      (before, after) => {
+        return (
+          (!before.hasBrushSvg && after.hasBrushSvg) || (!before.brushContainerVisible && after.brushContainerVisible)
+        )
+      }
+    )
+
+    // ============================================================================
+    // TEST: Default Recent Date Count Input
+    // Verifies: When "Show last X dates" is set, the brush selection changes
+    // to show exactly X data points instead of the default 35%
+    // ============================================================================
+
+    // This control should appear when brush is enabled
+    // Look for the new "Show last X dates by default" input
+    const recentDateCountInput = canvas.getByLabelText(/show last.*dates.*default/i) as HTMLInputElement
+
+    // If the control doesn't exist yet (TDD - test before implementation),
+    // the test will fail here, indicating we need to implement this feature
+    expect(recentDateCountInput).toBeTruthy()
+    expect(recentDateCountInput).toHaveAttribute('type', 'number')
+
+    // ============================================================================
+    // TEST: Setting Recent Date Count Dynamically Updates Brush Selection
+    // Verifies: Changing the value in the editor immediately updates the brush
+    // ============================================================================
+
+    const getBrushSelectionState = () => {
+      // The brush selection is represented by the visx-brush extent rect
+      const brushExtent = canvasElement.querySelector('.visx-brush rect[class*="selection"]') as SVGRectElement
+      const brushSvg = canvasElement.querySelector('svg[style*="border: 1px solid"]') as SVGSVGElement
+
+      // Get the visible data points in the main chart (lines or bars)
+      const chartSvg = canvasElement.querySelector('.linear-chart svg, .cove-chart svg') as SVGSVGElement
+      const dataPointsInChart = chartSvg?.querySelectorAll('circle, rect:not([fill="transparent"])').length || 0
+
+      return {
+        brushWidth: brushExtent ? parseFloat(brushExtent.getAttribute('width') || '0') : 0,
+        brushX: brushExtent ? parseFloat(brushExtent.getAttribute('x') || '0') : 0,
+        totalBrushWidth: brushSvg ? brushSvg.clientWidth : 0,
+        visibleDataPoints: dataPointsInChart,
+        selectionPercentage:
+          brushExtent && brushSvg
+            ? (parseFloat(brushExtent.getAttribute('width') || '0') / brushSvg.clientWidth) * 100
+            : 0
+      }
+    }
+
+    const initialSelectionState = getBrushSelectionState()
+
+    // Default is ~35% of the width
+    // With 329 data points in brush_enabled.json, 35% would be ~115 points
+    // Setting to 30 should make the selection much narrower AND update immediately
+    await performAndAssert(
+      'Set Default Recent Date Count to 30 - Brush Updates Dynamically',
+      getBrushSelectionState,
+      async () => {
+        await userEvent.clear(recentDateCountInput)
+        await userEvent.type(recentDateCountInput, '30')
+        // Trigger change/blur to apply the value - this should update the brush immediately
+        await userEvent.tab()
+      },
+      (before, after) => {
+        // The brush selection width should decrease when we set a smaller count
+        // Since we have ~329 data points and default is 35% (~115 points),
+        // setting to 30 points should make the selection narrower
+        return after.brushWidth < before.brushWidth || after.selectionPercentage < before.selectionPercentage
+      }
+    )
+
+    // ============================================================================
+    // TEST: Changing Value Again Updates Selection Again
+    // Verifies: Multiple changes continue to update the brush dynamically
+    // ============================================================================
+
+    await performAndAssert(
+      'Change to 50 dates - Brush Expands Dynamically',
+      getBrushSelectionState,
+      async () => {
+        await userEvent.clear(recentDateCountInput)
+        await userEvent.type(recentDateCountInput, '50')
+        await userEvent.tab()
+      },
+      (before, after) => {
+        // Changing from 30 to 50 should expand the brush width
+        return after.brushWidth > before.brushWidth
+      }
+    )
+
+    // ============================================================================
+    // TEST: Verify Exact Data Point Count in Selection
+    // Verifies: The number of selected data points matches the input value
+    // ============================================================================
+
+    // The brush selection should now show exactly 30 data points
+    // We can verify this by checking the filtered data in the visualization
+    const getSelectedDataPointCount = () => {
+      // When brush is active, only the selected data points are rendered in the main chart
+      // Look for the number of data points (circles, bars, or line path points)
+      const chartContainer = canvasElement.querySelector('.linear-chart, .cove-chart')
+      const svg = chartContainer?.querySelector('svg')
+
+      // For line charts, count the line path data points
+      const linePaths = svg?.querySelectorAll('path[class*="line"], .visx-linepath')
+      let dataPointCount = 0
+
+      if (linePaths && linePaths.length > 0) {
+        // Count points in the path by looking at the rendered circles
+        const circles = svg?.querySelectorAll('circle')
+        dataPointCount = circles?.length || 0
+      }
+
+      // For bar charts
+      const bars = svg?.querySelectorAll('rect[class*="bar"]')
+      if (bars && bars.length > 0) {
+        dataPointCount = bars.length
+      }
+
+      return {
+        dataPointCount,
+        hasData: dataPointCount > 0
+      }
+    }
+
+    // After setting to 30, the chart should show ~30 data points
+    // (exact count may vary based on how brush boundaries align with data points)
+    const afterSettingCount = getSelectedDataPointCount()
+
+    // The count should be close to 30 (allowing some tolerance for edge cases)
+    // Note: This assertion helps verify the feature works - if it fails,
+    // the implementation needs adjustment
+    if (afterSettingCount.hasData) {
+      expect(afterSettingCount.dataPointCount).toBeGreaterThan(0)
+      expect(afterSettingCount.dataPointCount).toBeLessThanOrEqual(35) // 30 + tolerance
+    }
+
+    // ============================================================================
+    // TEST: Clear Recent Date Count Returns to Default 35%
+    // Verifies: When the count is cleared, brush returns to percentage-based default
+    // ============================================================================
+
+    await performAndAssert(
+      'Clear Default Recent Date Count (return to 35%)',
+      getBrushSelectionState,
+      async () => {
+        await userEvent.clear(recentDateCountInput)
+        await userEvent.tab()
+      },
+      (before, after) => {
+        // The selection should return to approximately 35% of the total width
+        // Since we had set it to 30 points (~9% with 329 data points),
+        // clearing should expand it back to ~35%
+        return after.brushWidth > before.brushWidth || after.selectionPercentage > before.selectionPercentage
+      }
+    )
+  }
+}
+
+// ============================================================================
+// BRUSH SECTION ACCESSIBILITY TEST
+// Verifies the brush controls are properly labeled and accessible
+// ============================================================================
+
+export const BrushAccessibilityTests: Story = {
+  name: 'Accessibility Tests',
+  parameters: {
+    test: {
+      timeout: 20000
+    }
+  },
+  args: {
+    config: {
+      ...brushEnabledConfig,
+      xAxis: {
+        ...brushEnabledConfig.xAxis,
+        brushActive: true
+      }
+    },
+    isEditor: true
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    await waitForEditor(canvas)
+    await openAccordion(canvas, 'Date/Category Axis')
+
+    // ============================================================================
+    // TEST: Brush Controls Have Proper Labels
+    // ============================================================================
+
+    // The brush slider checkbox should be findable by its label
+    const brushCheckbox = canvas.getByLabelText(/show brush slider/i)
+    expect(brushCheckbox).toBeTruthy()
+    expect(brushCheckbox).toHaveAttribute('type', 'checkbox')
+
+    // The recent date count input should have a descriptive label
+    const recentDateLabel = canvas.getByLabelText(/show last.*dates.*default/i)
+
+    // If this test fails, it indicates the control needs a proper accessible label
+    expect(recentDateLabel).toBeTruthy()
+    expect(recentDateLabel).toHaveAttribute('type', 'number')
+  }
+}

package/src/_stories/ChartBrush.Matrix.Continuous.stories.tsx

@@ -0,0 +1,41 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import Chart from '../CdcChartComponent'
+import { editConfigKeys } from '@cdc/core/helpers/configHelpers'
+import brushContinuousConfig from './_mock/brush_continuous.json'
+import { assertVisualizationRendered } from '@cdc/core/helpers/testing'
+
+const meta: Meta<typeof Chart> = {
+  title: 'Components/Templates/Chart/BrushSlider/Matrix/Continuous',
+  component: Chart
+}
+
+export default meta
+
+type Story = StoryObj<typeof Chart>
+
+export const Default: Story = {
+  args: { config: brushContinuousConfig, isEditor: false },
+  parameters: {
+    docs: {
+      description: { story: 'xAxis.type = "continuous", default ascending numeric order.' }
+    }
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
+  }
+}
+
+export const Reversed: Story = {
+  args: {
+    config: editConfigKeys(brushContinuousConfig, [{ path: ['xAxis', 'sortByRecentDate'], value: true }]),
+    isEditor: false
+  },
+  parameters: {
+    docs: {
+      description: { story: 'xAxis.type = "continuous", sortByRecentDate = true.' }
+    }
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
+  }
+}