@cdc/chart 4.25.11 → 4.26.2

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

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react-vite'
 import boxPlotConfig from './_mock/boxplot_multiseries.json'
 import Chart from '../CdcChartComponent'
+import { assertVisualizationRendered } from '@cdc/core/helpers/testing'
 
 const meta: Meta<typeof Chart> = {
   title: 'Components/Templates/Chart/Box Plot',
@@ -17,6 +18,9 @@ export const BoxPlot_Vertical: Story = {
       title: 'Vertical Multiseries Box Plot',
       isEditor: false
     }
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }
 
@@ -29,6 +33,9 @@ export const BoxPlot_Horizontal: Story = {
       yAxis: { ...boxPlotConfig.yAxis, labelPlacement: 'Above Bar' }
     },
     isEditor: false
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }
 

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

@@ -4,6 +4,7 @@ import lineChartDynamicCI from './_mock/line_chart_dynamic_ci.json'
 import lineChartNonDynamicCI from './_mock/line_chart_non_dynamic_ci.json'
 
 import Chart from '../CdcChartComponent'
+import { assertVisualizationRendered } from '@cdc/core/helpers/testing'
 
 const meta: Meta<typeof Chart> = {
   title: 'Components/Templates/Chart/Confidence Intervals',
@@ -14,6 +15,9 @@ export const bar_chart_with_labels: Story = {
   args: {
     config: barChartCiLabels,
     isEditor: false
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }
 export const bar_chart_horizontal_labels: Story = {
@@ -24,6 +28,9 @@ export const bar_chart_horizontal_labels: Story = {
       yAxis: { ...barChartCiLabels.yAxis, displayNumbersOnBar: true }
     },
     isEditor: false
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }
 
@@ -31,6 +38,9 @@ export const line_Chart_Dynamic_Confidence_Intervals: Story = {
   args: {
     config: lineChartDynamicCI,
     isEditor: false
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }
 
@@ -38,6 +48,9 @@ export const line_Chart_Non_Dynamic_Confidence_Intervals: Story = {
   args: {
     config: lineChartNonDynamicCI,
     isEditor: false
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }
 export default meta

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

@@ -2,6 +2,8 @@
 import React from 'react'
 import { Meta, Story } from '@storybook/react'
 import CdcChart from '@cdc/chart/src/CdcChart'
+import { editConfigKeys } from '@cdc/core/helpers/configHelpers'
+import { assertVisualizationRendered } from '@cdc/core/helpers/testing'
 import comboChartConfig from './_mock/combo.json'
 
 export default {
@@ -16,3 +18,18 @@ ComboChart.args = {
   config: comboChartConfig,
   isEditor: true
 }
+ComboChart.play = async ({ canvasElement }) => {
+  await assertVisualizationRendered(canvasElement)
+}
+
+export const ComboChartWithBrush = Template.bind({})
+ComboChartWithBrush.args = {
+  config: editConfigKeys(comboChartConfig, [
+    { path: ['xAxis', 'brushActive'], value: true },
+    { path: ['xAxis', 'brushDefaultRecentDateCount'], value: 12 }
+  ]),
+  isEditor: true
+}
+ComboChartWithBrush.play = async ({ canvasElement }) => {
+  await assertVisualizationRendered(canvasElement)
+}

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

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react-vite'
 import Chart from '../CdcChartComponent'
 import scatterPlotCustomColorConfig from './_mock/scatterplot_mock.json'
+import { assertVisualizationRendered } from '@cdc/core/helpers/testing'
 
 const meta: Meta<typeof Chart> = {
   title: 'Components/Templates/Chart/Custom Colors',
@@ -13,6 +14,9 @@ export const ScatterPlot: Story = {
   args: {
     config: scatterPlotCustomColorConfig,
     isEditor: false
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }
 

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

@@ -3,6 +3,7 @@ import DynamicSeriesBarConfig from './_mock/dynamic_series_bar_config.json'
 import DynamicSeriesSuppression from './_mock/dynamic_series_suppression_mock.json'
 import { Meta, StoryObj } from '@storybook/react-vite'
 import Chart from '../CdcChartComponent'
+import { assertVisualizationRendered } from '@cdc/core/helpers/testing'
 
 const meta: Meta<typeof Chart> = {
   title: 'Components/Templates/Chart/Dynamic Series',
@@ -23,6 +24,9 @@ export const LineShowPoints: Story = {
       lineDatapointStyle: 'always show'
     },
     isEditor: false
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }
 
@@ -30,6 +34,9 @@ export const LineSuppression: Story = {
   args: {
     config: DynamicSeriesSuppression,
     isEditor: false
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }
 
@@ -37,6 +44,9 @@ export const LineHoverPoints: Story = {
   args: {
     config: DynamicSeriesConfig,
     isEditor: false
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }
 
@@ -44,6 +54,9 @@ export const Bar_Vertical: Story = {
   args: {
     config: DynamicSeriesBarConfig,
     isEditor: true
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }
 
@@ -51,6 +64,9 @@ export const Bar_Horizontal: Story = {
   args: {
     config: { ...DynamicSeriesBarConfig, orientation: 'horizontal' },
     isEditor: false
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }
 
@@ -62,6 +78,9 @@ export const Legend_Order: Story = {
       legend: { ...DynamicSeriesBarConfig, order: 'desc' }
     },
     isEditor: false
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }
 

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

@@ -2,6 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react-vite'
 import Chart from '../CdcChartComponent'
 import { editConfigKeys } from '@cdc/core/helpers/configHelpers'
 import scatterPlotDownloadImage from './_mock/scatterplot-image-download.json'
+import { assertVisualizationRendered } from '@cdc/core/helpers/testing'
 
 const meta: Meta<typeof Chart> = {
   title: 'Components/Templates/Chart/Filters',
@@ -13,6 +14,9 @@ type Story = StoryObj<typeof Chart>
 export const Tab_Simple: Story = {
   args: {
     config: editConfigKeys(scatterPlotDownloadImage, [{ path: ['filters', '0', 'filterStyle'], value: 'tab-simple' }])
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }
 

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

@@ -2,6 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react-vite'
 
 import Chart from '../CdcChart'
 import forecastComboWithGaps from './_mock/forecast_combo_with_gaps.json'
+import { assertVisualizationRendered } from '@cdc/core/helpers/testing'
 
 const meta: Meta<typeof Chart> = {
   title: 'Components/Templates/Chart/Forecast Chart',
@@ -30,6 +31,9 @@ export const Forecast_Combo_With_Gaps: Story = {
           'A combo chart with forecast confidence intervals that demonstrates proper gap handling. The forecast areas and lines are split into separate segments when gaps are detected, preventing misleading connections across missing data periods. Invalid data points (NA values) are automatically filtered out.'
       }
     }
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }
 

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

@@ -1,5 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react-vite'
 import CdcChart from '../CdcChartComponent'
+import { assertVisualizationRendered } from '@cdc/core/helpers/testing'
 
 const meta: Meta<typeof CdcChart> = {
   title: 'Components/Templates/Chart/HTML in Data Table',
@@ -148,6 +149,9 @@ export const BasicHTMLInFootnoteColumn: Story = {
       }
     },
     isEditor: true
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }
 
@@ -208,6 +212,9 @@ export const HTMLWithLinksAndFormatting: Story = {
       }
     },
     isEditor: true
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }
 
@@ -265,6 +272,9 @@ export const HTMLWithLineBreaks: Story = {
       }
     },
     isEditor: true
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }
 
@@ -315,6 +325,9 @@ export const ComplexHTMLWithLists: Story = {
       }
     },
     isEditor: true
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }
 
@@ -368,6 +381,9 @@ export const HTMLWithInlineStyles: Story = {
       }
     },
     isEditor: true
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }
 
@@ -444,6 +460,9 @@ export const LineChartWithHTMLFootnotes: Story = {
       }
     },
     isEditor: true
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }
 
@@ -516,5 +535,8 @@ export const PieChartWithHTMLFootnotes: Story = {
       }
     },
     isEditor: true
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }

package/src/_stories/Chart.Legend.Gradient.stories.tsx

@@ -5,6 +5,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/Legend',
@@ -16,41 +17,62 @@ type Story = StoryObj<typeof Chart>
 export const Legend_Gradient_Smooth: Story = {
   args: {
     config: chartGradientConfig
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }
 export const Legend_Group_By: Story = {
   args: {
     config: chartGroupedLagend
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }
 
 export const Legend_Gradient_Linear_Blocks: Story = {
   args: {
     config: editConfigKeys(chartGradientConfig, [{ path: ['legend', 'subStyle'], value: 'linear blocks' }])
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }
 
 export const Labels_On_Line_Legend_On_Top: Story = {
   args: {
     config: editConfigKeys(chartGradientConfig, [{ path: ['yAxis', 'labelsAboveGridlines'], value: true }])
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }
 
 export const Legend_On_Right: Story = {
   args: {
     config: SimplifiedLineConfig
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }
 
 export const Legend_On_Right_With_Box: Story = {
   args: {
     config: editConfigKeys(SimplifiedLineConfig, [{ path: ['legend', 'hideBorder'], value: false }])
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }
 
 export const Legend_Gradient_With_box: Story = {
   args: {
     config: editConfigKeys(chartGradientConfig, [{ path: ['legend', 'hideBorder'], value: false }])
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }
 
@@ -61,6 +83,9 @@ export const Legend_Gradient_With_Text: Story = {
       { path: ['legend', 'description'], value: 'Description' },
       { path: ['legend', 'hideBorder'], value: false }
     ])
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }
 export const Legend_Gradient_Wrapping_Label: Story = {
@@ -74,6 +99,9 @@ export const Legend_Gradient_Wrapping_Label: Story = {
         ])
       ).replace(/Data 1/g, 'This is a long string that should wrap')
     )
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }
 

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

@@ -2,6 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react'
 import StackedPattern from './_mock/stacked-pattern-test.json'
 
 import Chart from '../CdcChartComponent'
+import { assertVisualizationRendered } from '@cdc/core/helpers/testing'
 
 const meta: Meta<typeof Chart> = {
   title: 'Components/Templates/Chart/Patterns',
@@ -14,6 +15,9 @@ export const Stacked_Bar_Pattern: Story = {
   args: {
     config: StackedPattern,
     isEditor: true
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }
 

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

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react-vite'
 import Chart from '../CdcChartComponent'
+import { assertVisualizationRendered } from '@cdc/core/helpers/testing'
 
 const meta: Meta<typeof Chart> = {
   title: 'Components/Templates/Chart/Preserve Original Decimals',
@@ -56,6 +57,9 @@ export const Default_With_Forced_Rounding: Story = {
           'Default behavior forces all numbers to 1 decimal place. Notice how whole numbers like 1000 become "1,000.0" and 89.23 gets rounded to "89.2".'
       }
     }
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }
 
@@ -77,6 +81,9 @@ export const Preserve_Original_Decimals_Enabled: Story = {
           'With "Preserve Original Decimals" enabled, numbers display exactly as they appear in the data: 1000 shows as "1,000", 45.7 shows as "45.7", and 89.23 shows as "89.23". The roundTo setting is ignored.'
       }
     }
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }
 
@@ -97,6 +104,9 @@ export const Comparison_No_Decimals: Story = {
           'Forcing 0 decimal places rounds everything to whole numbers: 45.7 becomes "46", 89.23 becomes "89". This loses precision from the original data.'
       }
     }
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }
 
@@ -117,6 +127,9 @@ export const Comparison_Two_Decimals: Story = {
           'Forcing 2 decimal places adds unnecessary zeros: 1000 becomes "1,000.00", 45.7 becomes "45.70". This can look cluttered for whole numbers.'
       }
     }
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }
 
@@ -139,6 +152,9 @@ export const With_Prefix_And_Suffix: Story = {
           'Preserve Original Decimals works seamlessly with prefix and suffix formatting. Numbers show as "$1,000 USD", "$45.7 USD", etc.'
       }
     }
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }
 
@@ -167,6 +183,9 @@ export const Percentage_Data_Mixed_Precision: Story = {
           'Perfect for percentage data where some values are whole (25%, 50%) and others need decimals (33.3%, 12.75%). Each value displays naturally without forced rounding.'
       }
     }
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }
 
@@ -193,6 +212,9 @@ export const Line_Chart_With_Table: Story = {
           'When enabled, the preserve decimals setting applies to both the chart axis/tooltips AND the data table, ensuring consistency across all displays.'
       }
     }
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }
 
@@ -214,6 +236,9 @@ export const Editor_Mode: Story = {
           'In editor mode, look for the "Preserve Original Decimal Places" checkbox in the Number Formatting section, right below the "Round to decimal point" field. Toggle it to see the effect in real-time.'
       }
     }
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }
 

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

@@ -0,0 +1,161 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import Chart from '../CdcChart'
+import { assertVisualizationRendered } from '@cdc/core/helpers/testing'
+
+const meta: Meta<typeof Chart> = {
+  title: 'Components/Templates/Chart/Regions/Categorical',
+  component: Chart
+}
+
+type Story = StoryObj<typeof Chart>
+
+const categoricalData = [
+  { category: 'Jan 1', value: 10 },
+  { category: 'Jan 8', value: 25 },
+  { category: 'Jan 15', value: 35 },
+  { category: 'Jan 22', value: 45 },
+  { category: 'Jan 29', value: 55 },
+  { category: 'Feb 5', value: 40 },
+  { category: 'Feb 12', value: 60 },
+  { category: 'Feb 19', value: 75 },
+  { category: 'Feb 26', value: 65 },
+  { category: 'Mar 4', value: 80 }
+]
+
+const baseCategoricalConfig = {
+  type: 'chart',
+  visualizationType: 'Line',
+  orientation: 'vertical',
+  showTitle: true,
+  theme: 'theme-blue',
+  animate: false,
+  xAxis: {
+    type: 'categorical',
+    dataKey: 'category',
+    size: '0',
+    hideAxis: false,
+    hideTicks: false
+  },
+  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: categoricalData,
+  regions: []
+}
+
+// LINE CHARTS
+
+export const Line_Fixed_From_Fixed_To: Story = {
+  args: {
+    config: {
+      ...baseCategoricalConfig,
+      title: 'Categorical - Line: Fixed From + Fixed To',
+      regions: [
+        {
+          from: 'Jan 15',
+          to: 'Feb 12',
+          fromType: 'Fixed',
+          toType: 'Fixed',
+          label: 'Fixed Region',
+          background: '#0077cc',
+          color: '#000000',
+          range: 'Custom'
+        }
+      ]
+    },
+    isEditor: true
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
+  }
+}
+
+export const Line_Fixed_From_Last_Date: Story = {
+  args: {
+    config: {
+      ...baseCategoricalConfig,
+      title: 'Categorical - Line: Fixed From + Last Date',
+      regions: [
+        {
+          from: 'Feb 5',
+          to: '',
+          fromType: 'Fixed',
+          toType: 'Last Date',
+          label: 'To Last Date',
+          background: '#00aa55',
+          color: '#000000',
+          range: 'Custom'
+        }
+      ]
+    },
+    isEditor: true
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
+  }
+}
+
+// BAR CHARTS
+
+export const Bar_Fixed_From_Fixed_To: Story = {
+  args: {
+    config: {
+      ...baseCategoricalConfig,
+      visualizationType: 'Bar',
+      barThickness: 0.7,
+      title: 'Categorical - Bar: Fixed From + Fixed To',
+      regions: [
+        {
+          from: 'Jan 15',
+          to: 'Feb 12',
+          fromType: 'Fixed',
+          toType: 'Fixed',
+          label: 'Fixed Region',
+          background: '#0077cc',
+          color: '#000000',
+          range: 'Custom'
+        }
+      ]
+    },
+    isEditor: true
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
+  }
+}
+
+export const Bar_Fixed_From_Last_Date: Story = {
+  args: {
+    config: {
+      ...baseCategoricalConfig,
+      visualizationType: 'Bar',
+      barThickness: 0.7,
+      title: 'Categorical - Bar: Fixed From + Last Date',
+      regions: [
+        {
+          from: 'Feb 5',
+          to: '',
+          fromType: 'Fixed',
+          toType: 'Last Date',
+          label: 'To Last Date',
+          background: '#00aa55',
+          color: '#000000',
+          range: 'Custom'
+        }
+      ]
+    },
+    isEditor: true
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
+  }
+}
+
+export default meta