@cdc/chart 4.25.11 → 4.26.1

package/src/_stories/Chart.Regions.DateTimeScale.stories.tsx

@@ -0,0 +1,297 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import Chart from '../CdcChart'
+
+const meta: Meta<typeof Chart> = {
+  title: 'Components/Templates/Chart/Regions/Date-Time Scale (Continuous)',
+  component: Chart
+}
+
+type Story = StoryObj<typeof Chart>
+
+const dateData = [
+  { date: '2024-01-01', value: 10 },
+  { date: '2024-01-08', value: 25 },
+  { date: '2024-01-15', value: 35 },
+  { date: '2024-01-22', value: 45 },
+  { date: '2024-01-29', value: 55 },
+  { date: '2024-02-05', value: 40 },
+  { date: '2024-02-12', value: 60 },
+  { date: '2024-02-19', value: 75 },
+  { date: '2024-02-26', value: 65 },
+  { date: '2024-03-04', value: 80 }
+]
+
+const baseDateTimeConfig = {
+  type: 'chart',
+  visualizationType: 'Line',
+  orientation: 'vertical',
+  showTitle: true,
+  theme: 'theme-blue',
+  animate: false,
+  xAxis: {
+    type: 'date-time',
+    dataKey: 'date',
+    dateParseFormat: '%Y-%m-%d',
+    dateDisplayFormat: '%b %-d',
+    size: '0',
+    hideAxis: false,
+    hideTicks: false,
+    numTicks: '6'
+  },
+  yAxis: {
+    size: '50',
+    hideAxis: false,
+    hideTicks: false,
+    gridLines: true,
+    min: '0',
+    max: '100'
+  },
+  series: [{ dataKey: 'value', type: 'Line', axis: 'Left', tooltip: true, name: 'Value' }],
+  legend: { hide: true },
+  data: dateData,
+  regions: []
+}
+
+// LINE CHARTS
+
+export const Line_Fixed_From_Fixed_To: Story = {
+  args: {
+    config: {
+      ...baseDateTimeConfig,
+      title: 'Date-Time Scale - Line: Fixed From + Fixed To',
+      regions: [
+        {
+          from: '2024-01-15',
+          to: '2024-02-11',
+          fromType: 'Fixed',
+          toType: 'Fixed',
+          label: 'Fixed Region',
+          background: '#0077cc',
+          color: '#000000',
+          range: 'Custom'
+        }
+      ]
+    },
+    isEditor: true
+  }
+}
+
+export const Line_Fixed_From_Last_Date: Story = {
+  args: {
+    config: {
+      ...baseDateTimeConfig,
+      title: 'Date-Time Scale - Line: Fixed From + Last Date',
+      regions: [
+        {
+          from: '2024-02-05',
+          to: '',
+          fromType: 'Fixed',
+          toType: 'Last Date',
+          label: 'To Last Date',
+          background: '#00aa55',
+          color: '#000000',
+          range: 'Custom'
+        }
+      ]
+    },
+    isEditor: true
+  }
+}
+
+export const Line_Previous_Days_Last_Date: Story = {
+  args: {
+    config: {
+      ...baseDateTimeConfig,
+      title: 'Date-Time Scale - Line: Previous Days + Last Date',
+      regions: [
+        {
+          from: '8',
+          to: '',
+          fromType: 'Previous Days',
+          toType: 'Last Date',
+          label: 'Last 8 Days',
+          background: '#aa0077',
+          color: '#000000',
+          range: 'Custom'
+        }
+      ]
+    },
+    isEditor: true
+  }
+}
+
+// BAR CHARTS
+
+export const Bar_Fixed_From_Fixed_To: Story = {
+  args: {
+    config: {
+      ...baseDateTimeConfig,
+      visualizationType: 'Bar',
+      barThickness: 0.7,
+      title: 'Date-Time Scale - Bar: Fixed From + Fixed To',
+      regions: [
+        {
+          from: '2024-01-15',
+          to: '2024-02-12',
+          fromType: 'Fixed',
+          toType: 'Fixed',
+          label: 'Fixed Region',
+          background: '#0077cc',
+          color: '#000000',
+          range: 'Custom'
+        }
+      ]
+    },
+    isEditor: true
+  }
+}
+
+export const Bar_Fixed_From_Last_Date: Story = {
+  args: {
+    config: {
+      ...baseDateTimeConfig,
+      visualizationType: 'Bar',
+      barThickness: 0.7,
+      title: 'Date-Time Scale - Bar: Fixed From + Last Date',
+      regions: [
+        {
+          from: '2024-02-05',
+          to: '',
+          fromType: 'Fixed',
+          toType: 'Last Date',
+          label: 'To Last Date',
+          background: '#00aa55',
+          color: '#000000',
+          range: 'Custom'
+        }
+      ]
+    },
+    isEditor: true
+  }
+}
+
+export const Bar_Previous_Days_Last_Date: Story = {
+  args: {
+    config: {
+      ...baseDateTimeConfig,
+      visualizationType: 'Bar',
+      barThickness: 0.7,
+      title: 'Date-Time Scale - Bar: Previous Days + Last Date',
+      regions: [
+        {
+          from: '28',
+          to: '',
+          fromType: 'Previous Days',
+          toType: 'Last Date',
+          label: 'Last 28 Days',
+          background: '#aa0077',
+          color: '#000000',
+          range: 'Custom'
+        }
+      ]
+    },
+    isEditor: true
+  }
+}
+
+// EDGE CASES
+
+export const Edge_Region_At_Start: Story = {
+  args: {
+    config: {
+      ...baseDateTimeConfig,
+      title: 'Edge Case: Region at Start',
+      regions: [
+        {
+          from: '2024-01-01',
+          to: '2024-01-21',
+          fromType: 'Fixed',
+          toType: 'Fixed',
+          label: 'At Start',
+          background: '#0077cc',
+          color: '#000000',
+          range: 'Custom'
+        }
+      ]
+    },
+    isEditor: true
+  }
+}
+
+export const Edge_Region_At_End: Story = {
+  args: {
+    config: {
+      ...baseDateTimeConfig,
+      title: 'Edge Case: Region at End',
+      regions: [
+        {
+          from: '2024-02-19',
+          to: '2024-03-04',
+          fromType: 'Fixed',
+          toType: 'Fixed',
+          label: 'At End',
+          background: '#00aa55',
+          color: '#000000',
+          range: 'Custom'
+        }
+      ]
+    },
+    isEditor: true
+  }
+}
+
+export const Edge_Full_Coverage: Story = {
+  args: {
+    config: {
+      ...baseDateTimeConfig,
+      title: 'Edge Case: Full Chart Coverage',
+      regions: [
+        {
+          from: '2024-01-01',
+          to: '',
+          fromType: 'Fixed',
+          toType: 'Last Date',
+          label: 'Full Coverage',
+          background: '#cc7700',
+          color: '#000000',
+          range: 'Custom'
+        }
+      ]
+    },
+    isEditor: true
+  }
+}
+
+export const Multiple_Regions: Story = {
+  args: {
+    config: {
+      ...baseDateTimeConfig,
+      title: 'Multiple Regions',
+      regions: [
+        {
+          from: '2024-01-08',
+          to: '2024-01-21',
+          fromType: 'Fixed',
+          toType: 'Fixed',
+          label: 'Region 1',
+          background: '#0077cc',
+          color: '#000000',
+          range: 'Custom'
+        },
+        {
+          from: '2024-02-05',
+          to: '2024-02-18',
+          fromType: 'Fixed',
+          toType: 'Fixed',
+          label: 'Region 2',
+          background: '#00aa55',
+          color: '#000000',
+          range: 'Custom'
+        }
+      ]
+    },
+    isEditor: true
+  }
+}
+
+export default meta

package/src/_stories/Chart.stories.tsx

@@ -7,6 +7,7 @@ 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'
@@ -59,6 +60,13 @@ export const Horizontal_Bar: Story = {
   }
 }
 
+export const Horizontal_Bars_Dynamic_Y_Axis: Story = {
+  args: {
+    config: horizontalBarsDynamicYAxis,
+    isEditor: false
+  }
+}
+
 export const BarChart_Labels: Story = {
   args: {
     config: barChartLabels

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.stories.tsx

@@ -0,0 +1,50 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import Chart from '../CdcChartComponent'
+import brushEnabledConfig from './_mock/brush_enabled.json'
+
+const meta: Meta<typeof Chart> = {
+  title: 'Components/Templates/Chart/BrushSlider',
+  component: Chart,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'Brush Slider feature allows users to interactively filter data by dragging handles along the x-axis. Only works with date/time-based x-axis and vertical orientation.'
+      }
+    }
+  }
+}
+
+type Story = StoryObj<typeof Chart>
+
+export const BrushSliderEnabled: Story = {
+  args: {
+    config: brushEnabledConfig,
+    isEditor: false
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Line chart with brush slider enabled. Drag the handles on the slider below the chart to filter the data range.'
+      }
+    }
+  }
+}
+
+export const BrushSliderInEditor: Story = {
+  args: {
+    config: brushEnabledConfig,
+    isEditor: true
+  },
+  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.'
+      }
+    }
+  }
+}
+
+export default meta