@cdc/chart 4.26.1 → 4.26.3

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

@@ -92,7 +92,7 @@ export const BarGeneralTests: Story = {
 
     const getChartSubtypeVisualization = () => {
       // Target the chart visualization SVG specifically, not editor UI icons
-      const chartContainer = canvasElement.querySelector('.cove-component__content, .chart-container, .visualization')
+      const chartContainer = canvasElement.querySelector('.cove-visualization__body, .chart-container, .visualization')
       const svg = chartContainer?.querySelector('svg') || canvasElement.querySelector('svg:not(.icon)')
       const legendContainer = canvasElement.querySelector('.legend, [class*="legend"]')
 
@@ -160,7 +160,7 @@ export const BarGeneralTests: Story = {
 
     const getOrientationVisualization = () => {
       // Target the chart visualization SVG specifically, not editor UI icons
-      const chartContainer = canvasElement.querySelector('.cove-component__content, .chart-container, .visualization')
+      const chartContainer = canvasElement.querySelector('.cove-visualization__body, .chart-container, .visualization')
       const svg = chartContainer?.querySelector('svg') || canvasElement.querySelector('svg:not(.icon)')
 
       // Look for bar elements - different structures for horizontal vs vertical
@@ -273,7 +273,7 @@ export const BarGeneralTests: Story = {
 
     const getBarStyleVisualization = () => {
       // Target the chart visualization SVG specifically, not editor UI icons
-      const chartContainer = canvasElement.querySelector('.cove-component__content, .chart-container, .visualization')
+      const chartContainer = canvasElement.querySelector('.cove-visualization__body, .chart-container, .visualization')
       const svg = chartContainer?.querySelector('svg') || canvasElement.querySelector('svg:not(.icon)')
 
       return {
@@ -528,7 +528,7 @@ export const BarLeftValueAxisTests: Story = {
 
     const getAxisTypeVisualization = () => {
       // Target the chart visualization SVG specifically, not editor UI icons
-      const chartContainer = canvasElement.querySelector('.cove-component__content, .chart-container, .visualization')
+      const chartContainer = canvasElement.querySelector('.cove-visualization__body, .chart-container, .visualization')
       const svg = chartContainer?.querySelector('svg') || canvasElement.querySelector('svg:not(.icon)')
 
       // Find the left axis specifically
@@ -693,7 +693,7 @@ export const BarLeftValueAxisTests: Story = {
 
     const getAxisLabelVisualization = () => {
       // Target the chart visualization SVG specifically, not editor UI icons
-      const chartContainer = canvasElement.querySelector('.cove-component__content, .chart-container, .visualization')
+      const chartContainer = canvasElement.querySelector('.cove-visualization__body, .chart-container, .visualization')
       const svg = chartContainer?.querySelector('svg') || canvasElement.querySelector('svg:not(.icon)')
 
       // Find Y-axis label elements with multiple possible selectors
@@ -795,7 +795,9 @@ export const BarLeftValueAxisTests: Story = {
         expect(yAxisLabelInput.value).toBe('Custom Y-Axis Label')
 
         // Debug: Log the label element to confirm selection
-        const chartContainer = canvasElement.querySelector('.cove-component__content, .chart-container, .visualization')
+        const chartContainer = canvasElement.querySelector(
+          '.cove-visualization__body, .chart-container, .visualization'
+        )
         const svg = chartContainer?.querySelector('svg') || canvasElement.querySelector('svg:not(.icon)')
         const labelElement = svg?.querySelector('text.y-label')
 
@@ -853,7 +855,7 @@ export const BarLeftValueAxisTests: Story = {
 
     const getInlineLabelVisualization = () => {
       // Target the chart visualization SVG specifically, not editor UI icons
-      const chartContainer = canvasElement.querySelector('.cove-component__content, .chart-container, .visualization')
+      const chartContainer = canvasElement.querySelector('.cove-visualization__body, .chart-container, .visualization')
       const svg = chartContainer?.querySelector('svg') || canvasElement.querySelector('svg:not(.icon)')
 
       // Find the Y-axis area to locate the top tick area
@@ -989,7 +991,7 @@ export const BarLeftValueAxisTests: Story = {
 
     const getNumTicksVisualization = () => {
       // Target the chart visualization SVG specifically, not editor UI icons
-      const chartContainer = canvasElement.querySelector('.cove-component__content, .chart-container, .visualization')
+      const chartContainer = canvasElement.querySelector('.cove-visualization__body, .chart-container, .visualization')
       const svg = chartContainer?.querySelector('svg') || canvasElement.querySelector('svg:not(.icon)')
 
       // Find the left axis specifically
@@ -1190,7 +1192,7 @@ export const DateCategoryAxisSectionTests: StoryObj<typeof Chart> = {
       // Method 2: Look for SVG in chart container areas
       if (!svgElement) {
         const chartContainer = canvasElement.querySelector(
-          '.cove-component__content, .chart-container, .visualization, .linear'
+          '.cove-visualization__body, .chart-container, .visualization, .linear'
         )
         if (chartContainer) {
           svgElement = chartContainer.querySelector('svg')
@@ -1541,7 +1543,7 @@ export const BarRegionsSectionTests: Story = {
     await performAndAssert(
       'Configure Fixed-to-Fixed region with label and colors',
       () => {
-        const chartContainer = canvasElement.querySelector('.cove-component__content')
+        const chartContainer = canvasElement.querySelector('.cove-visualization__body')
         const chartSvg = chartContainer?.querySelector('svg')
         const regionElements = chartSvg?.querySelectorAll('rect[fill*="rgba"], rect[style*="rgba"]') || []
 
@@ -1680,6 +1682,17 @@ export const BarColumnsSectionTests: Story = {
     // Open Columns accordion
     await openAccordion(canvas, 'Columns')
 
+    const getFirstColumnConfig = async () => {
+      const columnSelect = (await canvas.findAllByLabelText(/^column$/i))[0]
+      const fieldset = columnSelect.closest('fieldset')
+
+      if (!fieldset) {
+        throw new Error('Unable to find the first column configuration fieldset')
+      }
+
+      return within(fieldset as HTMLElement)
+    }
+
     // Test 1: Add first column configuration and verify fields appear
     await performAndAssert(
       'Add first column configuration and verify fields appear',
@@ -1712,9 +1725,10 @@ export const BarColumnsSectionTests: Story = {
     await performAndAssert(
       'Configure column with data column and custom label',
       () => {
-        const labelInputs = canvas.queryAllByLabelText(/^label$/i)
+        const fieldsets = canvasElement.querySelectorAll('fieldset.edit-block')
+        const labelInput = fieldsets[0]?.querySelector('input[name*="label"]') as HTMLInputElement | null
         return {
-          labelValue: (labelInputs[0] as HTMLInputElement)?.value || ''
+          labelValue: labelInput?.value || ''
         }
       },
       async () => {
@@ -1724,8 +1738,8 @@ export const BarColumnsSectionTests: Story = {
         await userEvent.selectOptions(columnSelect, 'Year')
 
         // Set custom label
-        const labelInputs = await canvas.findAllByLabelText(/^label$/i)
-        const labelInput = labelInputs[0]
+        const firstColumnConfig = await getFirstColumnConfig()
+        const labelInput = await firstColumnConfig.findByLabelText(/^label$/i)
         await userEvent.clear(labelInput)
         await userEvent.type(labelInput, 'Report Year')
       },
@@ -1741,39 +1755,42 @@ export const BarColumnsSectionTests: Story = {
     await performAndAssert(
       'Enable tooltip display and configure number formatting',
       () => {
-        const tooltipCheckboxes = canvas.queryAllByLabelText(/show in tooltip/i)
-        const commasCheckboxes = canvas.queryAllByLabelText(/add commas to numbers/i)
+        const firstColumnSelect = canvas.queryAllByLabelText(/^column$/i)[0]
+        const fieldset = firstColumnSelect?.closest('fieldset')
+        const scopedFieldset = fieldset ? within(fieldset as HTMLElement) : null
+        const tooltipCheckbox = scopedFieldset?.queryByLabelText(/show in tooltip/i) as HTMLInputElement | null
+        const commasCheckbox = scopedFieldset?.queryByLabelText(/add commas to numbers/i) as HTMLInputElement | null
+        const prefixInput = scopedFieldset?.queryByLabelText(/^prefix$/i) as HTMLInputElement | null
+        const suffixInput = scopedFieldset?.queryByLabelText(/^suffix$/i) as HTMLInputElement | null
 
         return {
-          tooltipChecked: (tooltipCheckboxes[0] as HTMLInputElement)?.checked || false,
-          commasChecked: (commasCheckboxes[0] as HTMLInputElement)?.checked || false
+          tooltipChecked: tooltipCheckbox?.checked || false,
+          commasChecked: commasCheckbox?.checked || false,
+          prefixValue: prefixInput?.value || '',
+          suffixValue: suffixInput?.value || ''
         }
       },
       async () => {
+        const firstColumnConfig = await getFirstColumnConfig()
+
         // Enable tooltip display
-        const tooltipCheckboxes = await canvas.findAllByLabelText(/show in tooltip/i)
-        const tooltipCheckbox = tooltipCheckboxes[0] as HTMLInputElement
+        const tooltipCheckbox = (await firstColumnConfig.findByLabelText(/show in tooltip/i)) as HTMLInputElement
         if (!tooltipCheckbox.checked) {
           await userEvent.click(tooltipCheckbox)
         }
 
         // Enable commas for numbers
-        const commasCheckboxes = await canvas.findAllByLabelText(/add commas to numbers/i)
-        const commasCheckbox = commasCheckboxes[0] as HTMLInputElement
+        const commasCheckbox = (await firstColumnConfig.findByLabelText(/add commas to numbers/i)) as HTMLInputElement
         if (!commasCheckbox.checked) {
           await userEvent.click(commasCheckbox)
         }
 
         // Add prefix and suffix
-        const prefixInputs = await canvas.findAllByLabelText(/prefix/i)
-
-        const prefixInput = prefixInputs[1]
-
+        const prefixInput = await firstColumnConfig.findByLabelText(/^prefix$/i)
         await userEvent.clear(prefixInput)
         await userEvent.type(prefixInput, 'Year: ')
 
-        const suffixInputs = await canvas.findAllByLabelText(/suffix/i)
-        const suffixInput = suffixInputs[1]
+        const suffixInput = await firstColumnConfig.findByLabelText(/^suffix$/i)
         await userEvent.clear(suffixInput)
         await userEvent.type(suffixInput, ' AD')
       },
@@ -1781,6 +1798,8 @@ export const BarColumnsSectionTests: Story = {
         // Checkboxes should be enabled
         expect(after.tooltipChecked).toBe(true)
         expect(after.commasChecked).toBe(true)
+        expect(after.prefixValue).toBe('Year: ')
+        expect(after.suffixValue).toBe(' AD')
 
         return true
       }
@@ -1905,7 +1924,7 @@ export const BarLegendTests: Story = {
       const rightLegend = canvasElement.querySelector('.legend-container.right')
       const bottomLegend = canvasElement.querySelector('.legend-container.bottom')
       const topLegend = canvasElement.querySelector('.legend-container.top')
-      const chartContainer = canvasElement.querySelector('.cove-component__content, .chart-container, .visualization')
+      const chartContainer = canvasElement.querySelector('.cove-visualization__body, .chart-container, .visualization')
 
       return {
         hasLeftLegend: !!leftLegend,
@@ -2385,7 +2404,7 @@ export const BarFiltersTests: Story = {
     // Helper function to get chart data visualization state
     // Tests VISUALIZATION OUTPUT (filtered data in chart) not control state
     const getChartDataState = () => {
-      const chartContainer = canvasElement.querySelector('.cove-component__content, .chart-container, .visualization')
+      const chartContainer = canvasElement.querySelector('.cove-visualization__body, .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('.draggable-field-list')
@@ -2687,7 +2706,7 @@ export const BarVisualTests: Story = {
     // Helper function to capture animation visualization state
     const getAnimationVisualizationState = () => {
       // Find the actual chart SVG, not UI icons or other SVGs
-      const chartContainer = canvasElement.querySelector('.cove-component__content, .chart-container, .visualization')
+      const chartContainer = canvasElement.querySelector('.cove-visualization__body, .chart-container, .visualization')
       const chartSvg = chartContainer?.querySelector('svg') || canvasElement.querySelector('svg:not(.icon)')
 
       // Animation affects SVG classes and chart elements
@@ -2802,12 +2821,12 @@ export const BarVisualTests: Story = {
 
     // Helper function to capture bar border visualization state
     const getBarBorderVisualizationState = () => {
-      const chartContainer = canvasElement.querySelector('.cove-component__content, .chart-container, .visualization')
+      const chartContainer = canvasElement.querySelector('.cove-visualization__body, .chart-container, .visualization')
       const chartSvg = chartContainer?.querySelector('svg') || canvasElement.querySelector('svg:not(.icon)')
 
       // Find bar elements in the chart
       const barElements =
-        chartSvg?.querySelectorAll('rect[class*="bar"], path[class*="bar"], g[class*="bar"] rect') || []
+        chartSvg?.querySelectorAll('rect[class*="bar"], path[class*="bar"], g[class*="bar"] path') || []
 
       // Check for border-related styles and attributes
       const barsWithStroke = Array.from(barElements).filter(bar => {
@@ -2910,10 +2929,11 @@ export const BarPatternSettingsTests: Story = {
         type: 'continuous',
         dataKey: 'y1'
       },
+      series: [{ dataKey: 'y1' }, { dataKey: 'y2' }, { dataKey: 'y3' }, { dataKey: 'y4' }],
       // Override with data suitable for pattern testing
       data: [
         { category: 'Q1', y1: 19000, y2: 47000, y3: 59000, y4: 91000 },
-        { category: 'Q2', y1: 18000, y2: 32000, y3: 68000, y4: 89000 },
+        { category: 'Q2', y1: 18000, y2: 32000, y3: 19000, y4: 89000 },
         { category: 'Q3', y1: 7000, y2: 38000, y3: 74000, y4: 89000 },
         { category: 'Q4', y1: 15000, y2: 41000, y3: 67000, y4: 95000 }
       ],
@@ -2938,7 +2958,7 @@ export const BarPatternSettingsTests: Story = {
 
     // Helper function to capture SVG pattern visualization state
     const getPatternVisualizationState = () => {
-      const chartContainer = canvasElement.querySelector('.cove-component__content, .chart-container, .visualization')
+      const chartContainer = canvasElement.querySelector('.cove-visualization__body, .chart-container, .visualization')
       const chartSvg = chartContainer?.querySelector('svg') || canvasElement.querySelector('svg:not(.icon)')
 
       // Find SVG <defs> section with pattern definitions
@@ -2948,8 +2968,10 @@ export const BarPatternSettingsTests: Story = {
       // Find pattern overlays (visual application of patterns)
       const patternOverlays = chartSvg?.querySelectorAll('.pattern-overlay') || []
 
-      // Find bars with pattern fills
-      const barsWithPatterns = chartSvg?.querySelectorAll('rect[fill*="url(#chart-pattern-"]') || []
+      // Find bars with pattern fills (works for both fragment refs and absolute URL refs)
+      const barsWithPatterns = Array.from(chartSvg?.querySelectorAll('path, rect') || []).filter(shape =>
+        (shape.getAttribute('fill') || '').includes('chart-pattern-')
+      )
 
       // Get pattern configuration UI state
       const patternConfigSections = canvasElement.querySelectorAll('.accordion__panel .accordion .accordion__item')
@@ -3103,6 +3125,43 @@ export const BarPatternSettingsTests: Story = {
       }
     )
 
+    await performAndAssert(
+      'Clear Pattern Data Key - Existing data value applies across all series',
+      getPatternVisualizationState,
+      async () => {
+        const dataKeyDropdown = canvasElement.querySelector('select[id*="pattern-datakey-"]') as HTMLSelectElement
+
+        if (dataKeyDropdown) {
+          await userEvent.selectOptions(dataKeyDropdown, '')
+        }
+      },
+      (before, after) => {
+        // Clearing data key should keep value matching active and broaden the match across series.
+        expect(after.hasBarsWithPatterns).toBe(true)
+        expect(after.barsWithPatternsCount).toBeGreaterThan(before.barsWithPatternsCount)
+
+        return true
+      }
+    )
+
+    await performAndAssert(
+      'Clear Pattern Data Value - Pattern stops rendering when value is empty',
+      getPatternVisualizationState,
+      async () => {
+        const dataValueInput = canvasElement.querySelector('input[id*="pattern-datavalue-"]') as HTMLInputElement
+
+        if (dataValueInput) {
+          await userEvent.clear(dataValueInput)
+        }
+      },
+      (before, after) => {
+        expect(before.barsWithPatternsCount).toBeGreaterThan(0)
+        expect(after.barsWithPatternsCount).toBe(0)
+
+        return true
+      }
+    )
+
     // ========================================================================
     // Test Pattern Size Configuration - Pattern Density Changes
     // Tests how pattern size affects visual pattern rendering
@@ -3402,7 +3461,7 @@ export const BarTextAnnotationsTests: Story = {
 
     // Helper function to capture SVG annotation visualization state
     const getAnnotationVisualizationState = () => {
-      const chartContainer = canvasElement.querySelector('.cove-component__content, .chart-container, .visualization')
+      const chartContainer = canvasElement.querySelector('.cove-visualization__body, .chart-container, .visualization')
       const chartSvg = chartContainer?.querySelector('svg') || canvasElement.querySelector('svg:not(.icon)')
 
       // Find annotation accordion sections (nested accordions for each annotation)

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

@@ -121,7 +121,12 @@ export const BrushDefaultSelectionTests: Story = {
     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
+      const brushSvg =
+        (brushExtent?.closest('svg') as SVGSVGElement) ||
+        (canvasElement.querySelector('.visx-brush svg') as SVGSVGElement)
+      const brushWidthAttr = brushSvg ? parseFloat(brushSvg.getAttribute('width') || '0') : 0
+      const totalBrushWidth = brushSvg ? brushSvg.clientWidth || brushWidthAttr : 0
+      const countInput = canvasElement.querySelector('input[id*="brushDefaultRecentDateCount"]') as HTMLInputElement
 
       // Get the visible data points in the main chart (lines or bars)
       const chartSvg = canvasElement.querySelector('.linear-chart svg, .cove-chart svg') as SVGSVGElement
@@ -130,11 +135,12 @@ export const BrushDefaultSelectionTests: Story = {
       return {
         brushWidth: brushExtent ? parseFloat(brushExtent.getAttribute('width') || '0') : 0,
         brushX: brushExtent ? parseFloat(brushExtent.getAttribute('x') || '0') : 0,
-        totalBrushWidth: brushSvg ? brushSvg.clientWidth : 0,
+        totalBrushWidth,
         visibleDataPoints: dataPointsInChart,
+        defaultRecentDateCountValue: countInput?.value || '',
         selectionPercentage:
-          brushExtent && brushSvg
-            ? (parseFloat(brushExtent.getAttribute('width') || '0') / brushSvg.clientWidth) * 100
+          brushExtent && totalBrushWidth > 0
+            ? (parseFloat(brushExtent.getAttribute('width') || '0') / totalBrushWidth) * 100
             : 0
       }
     }
@@ -176,7 +182,7 @@ export const BrushDefaultSelectionTests: Story = {
       },
       (before, after) => {
         // Changing from 30 to 50 should expand the brush width
-        return after.brushWidth > before.brushWidth
+        return after.defaultRecentDateCountValue === '50' && after.brushWidth > before.brushWidth
       }
     )
 
@@ -226,26 +232,6 @@ export const BrushDefaultSelectionTests: Story = {
       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
-      }
-    )
   }
 }
 

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)
+  }
+}

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

@@ -0,0 +1,114 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import Chart from '../CdcChartComponent'
+import { editConfigKeys } from '@cdc/core/helpers/configHelpers'
+import brushDateLargeConfig from './_mock/brush_date_large.json'
+import { assertVisualizationRendered } from '@cdc/core/helpers/testing'
+
+// Helper: add a "Category" column to every row (duplicating for two categories) and add a dropdown filter
+function addFilter(config: any) {
+  const dataWithCategory = [
+    ...config.data.map((row: any) => ({ ...row, Category: 'Group A' })),
+    ...config.data.map((row: any) => ({ ...row, Category: 'Group B' }))
+  ]
+  return editConfigKeys(config, [
+    { path: ['data'], value: dataWithCategory },
+    {
+      path: ['filters'],
+      value: [
+        {
+          values: ['Group A', 'Group B'],
+          filterStyle: 'dropdown',
+          showDropdown: false,
+          active: 'Group A',
+          columnName: 'Category',
+          orderedValues: ['Group A', 'Group B'],
+          defaultValue: 'Group A'
+        }
+      ]
+    }
+  ])
+}
+
+const reversedDataConfig = editConfigKeys(brushDateLargeConfig, [
+  { path: ['data'], value: [...brushDateLargeConfig.data].reverse() }
+])
+
+const meta: Meta<typeof Chart> = {
+  title: 'Components/Templates/Chart/BrushSlider/Matrix/Date',
+  component: Chart
+}
+
+export default meta
+
+type Story = StoryObj<typeof Chart>
+
+export const Default: Story = {
+  args: { config: brushDateLargeConfig, isEditor: false },
+  parameters: {
+    docs: {
+      description: {
+        story: 'xAxis.type = "date", default chronological order. ~104 weekly data points.'
+      }
+    }
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
+  }
+}
+
+export const Reversed: Story = {
+  args: {
+    config: editConfigKeys(brushDateLargeConfig, [{ path: ['xAxis', 'sortByRecentDate'], value: true }]),
+    isEditor: false
+  },
+  parameters: {
+    docs: {
+      description: { story: 'xAxis.type = "date", sortByRecentDate = true. Most recent dates appear first.' }
+    }
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
+  }
+}
+
+export const ReversedDataOrder: Story = {
+  args: { config: reversedDataConfig, isEditor: false },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Data array in reverse chronological order (newest-first in JSON). Verifies the brush sorts its domain correctly regardless of input order.'
+      }
+    }
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
+  }
+}
+
+export const WithFilter: Story = {
+  args: { config: addFilter(brushDateLargeConfig), isEditor: false },
+  parameters: {
+    docs: {
+      description: { story: 'xAxis.type = "date" with a dropdown filter applied.' }
+    }
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
+  }
+}
+
+export const Reversed_WithFilter: Story = {
+  args: {
+    config: addFilter(editConfigKeys(brushDateLargeConfig, [{ path: ['xAxis', 'sortByRecentDate'], value: true }])),
+    isEditor: false
+  },
+  parameters: {
+    docs: {
+      description: { story: 'sortByRecentDate = true with a dropdown filter.' }
+    }
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
+  }
+}

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

@@ -0,0 +1,78 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import Chart from '../CdcChartComponent'
+import { editConfigKeys } from '@cdc/core/helpers/configHelpers'
+import brushEnabledConfig from './_mock/brush_enabled.json'
+import { assertVisualizationRendered } from '@cdc/core/helpers/testing'
+
+// Helper: add a "Category" column to every row (duplicating for two categories) and add a dropdown filter
+function addFilter(config: any) {
+  const dataWithCategory = [
+    ...config.data.map((row: any) => ({ ...row, Category: 'Group A' })),
+    ...config.data.map((row: any) => ({ ...row, Category: 'Group B' }))
+  ]
+  return editConfigKeys(config, [
+    { path: ['data'], value: dataWithCategory },
+    {
+      path: ['filters'],
+      value: [
+        {
+          values: ['Group A', 'Group B'],
+          filterStyle: 'dropdown',
+          showDropdown: false,
+          active: 'Group A',
+          columnName: 'Category',
+          orderedValues: ['Group A', 'Group B'],
+          defaultValue: 'Group A'
+        }
+      ]
+    }
+  ])
+}
+
+const meta: Meta<typeof Chart> = {
+  title: 'Components/Templates/Chart/BrushSlider/Matrix/DateTime',
+  component: Chart
+}
+
+export default meta
+
+type Story = StoryObj<typeof Chart>
+
+export const Default: Story = {
+  args: { config: brushEnabledConfig, isEditor: false },
+  parameters: {
+    docs: {
+      description: { story: 'xAxis.type = "date-time", default chronological order.' }
+    }
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
+  }
+}
+
+export const Reversed: Story = {
+  args: {
+    config: editConfigKeys(brushEnabledConfig, [{ path: ['xAxis', 'sortByRecentDate'], value: true }]),
+    isEditor: false
+  },
+  parameters: {
+    docs: {
+      description: { story: 'xAxis.type = "date-time", sortByRecentDate = true.' }
+    }
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
+  }
+}
+
+export const WithFilter: Story = {
+  args: { config: addFilter(brushEnabledConfig), isEditor: false },
+  parameters: {
+    docs: {
+      description: { story: 'xAxis.type = "date-time" with a dropdown filter applied.' }
+    }
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
+  }
+}