@cdc/chart 4.26.1 → 4.26.3

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

@@ -1,5 +1,6 @@
 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',
@@ -70,6 +71,9 @@ export const Line_Fixed_From_Fixed_To: Story = {
       ]
     },
     isEditor: true
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }
 
@@ -92,6 +96,9 @@ export const Line_Fixed_From_Last_Date: Story = {
       ]
     },
     isEditor: true
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }
 
@@ -118,6 +125,9 @@ export const Bar_Fixed_From_Fixed_To: Story = {
       ]
     },
     isEditor: true
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }
 
@@ -142,6 +152,9 @@ export const Bar_Fixed_From_Last_Date: Story = {
       ]
     },
     isEditor: true
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }
 

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

@@ -1,5 +1,6 @@
 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/Date Scale (Band)',
@@ -73,6 +74,9 @@ export const Line_Fixed_From_Fixed_To: Story = {
       ]
     },
     isEditor: true
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }
 
@@ -95,6 +99,9 @@ export const Line_Fixed_From_Last_Date: Story = {
       ]
     },
     isEditor: true
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }
 
@@ -117,6 +124,9 @@ export const Line_Previous_Days_Last_Date: Story = {
       ]
     },
     isEditor: true
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }
 
@@ -143,6 +153,9 @@ export const Bar_Fixed_From_Fixed_To: Story = {
       ]
     },
     isEditor: true
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }
 
@@ -167,6 +180,9 @@ export const Bar_Fixed_From_Last_Date: Story = {
       ]
     },
     isEditor: true
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }
 
@@ -191,6 +207,9 @@ export const Bar_Previous_Days_Last_Date: Story = {
       ]
     },
     isEditor: true
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }
 

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

@@ -1,5 +1,6 @@
 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/Date-Time Scale (Continuous)',
@@ -52,6 +53,10 @@ const baseDateTimeConfig = {
   regions: []
 }
 
+const play = async ({ canvasElement }) => {
+  await assertVisualizationRendered(canvasElement)
+}
+
 // LINE CHARTS
 
 export const Line_Fixed_From_Fixed_To: Story = {
@@ -73,7 +78,8 @@ export const Line_Fixed_From_Fixed_To: Story = {
       ]
     },
     isEditor: true
-  }
+  },
+  play
 }
 
 export const Line_Fixed_From_Last_Date: Story = {
@@ -95,7 +101,8 @@ export const Line_Fixed_From_Last_Date: Story = {
       ]
     },
     isEditor: true
-  }
+  },
+  play
 }
 
 export const Line_Previous_Days_Last_Date: Story = {
@@ -117,7 +124,8 @@ export const Line_Previous_Days_Last_Date: Story = {
       ]
     },
     isEditor: true
-  }
+  },
+  play
 }
 
 // BAR CHARTS
@@ -143,7 +151,8 @@ export const Bar_Fixed_From_Fixed_To: Story = {
       ]
     },
     isEditor: true
-  }
+  },
+  play
 }
 
 export const Bar_Fixed_From_Last_Date: Story = {
@@ -167,7 +176,8 @@ export const Bar_Fixed_From_Last_Date: Story = {
       ]
     },
     isEditor: true
-  }
+  },
+  play
 }
 
 export const Bar_Previous_Days_Last_Date: Story = {
@@ -191,7 +201,8 @@ export const Bar_Previous_Days_Last_Date: Story = {
       ]
     },
     isEditor: true
-  }
+  },
+  play
 }
 
 // EDGE CASES
@@ -215,7 +226,8 @@ export const Edge_Region_At_Start: Story = {
       ]
     },
     isEditor: true
-  }
+  },
+  play
 }
 
 export const Edge_Region_At_End: Story = {
@@ -237,7 +249,8 @@ export const Edge_Region_At_End: Story = {
       ]
     },
     isEditor: true
-  }
+  },
+  play
 }
 
 export const Edge_Full_Coverage: Story = {
@@ -259,7 +272,8 @@ export const Edge_Full_Coverage: Story = {
       ]
     },
     isEditor: true
-  }
+  },
+  play
 }
 
 export const Multiple_Regions: Story = {
@@ -291,7 +305,8 @@ export const Multiple_Regions: Story = {
       ]
     },
     isEditor: true
-  }
+  },
+  play
 }
 
 export default meta

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

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react-vite'
 import Chart from '../CdcChartComponent'
 import scatterPlotDownloadImage from './_mock/scatterplot-image-download.json'
+import { assertVisualizationRendered } from '@cdc/core/helpers/testing'
 
 const meta: Meta<typeof Chart> = {
   title: 'Components/Templates/Chart/Scatter Plot Download Image',
@@ -13,6 +14,9 @@ export const ScatterPlot_Download_Image: Story = {
   args: {
     config: scatterPlotDownloadImage,
     isEditor: false
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }
 

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

@@ -5,6 +5,7 @@ import smallMultiplesBigDataBars from './_mock/small_multiples/small_multiples_b
 import smallMultiplesLinesColors from './_mock/small_multiples/small_multiples_lines_colors.json'
 import smallMultiplesLines from './_mock/small_multiples/small_multiples_lines.json'
 import smallMultiplesStackedBars from './_mock/small_multiples/small_multiples_stacked_bars.json'
+import { assertVisualizationRendered } from '@cdc/core/helpers/testing'
 
 const meta: Meta<typeof Chart> = {
   title: 'Components/Templates/Chart/Small Multiples',
@@ -17,6 +18,9 @@ export const smallMultiples_Bars: Story = {
   args: {
     config: smallMultiplesBars,
     isEditor: false
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }
 
@@ -24,24 +28,36 @@ export const smallMultiples_BigDataBars: Story = {
   args: {
     config: smallMultiplesBigDataBars,
     isEditor: false
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }
 export const smallMultiples_LinesColors: Story = {
   args: {
     config: smallMultiplesLinesColors,
     isEditor: false
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }
 export const smallMultiples_Lines: Story = {
   args: {
     config: smallMultiplesLines,
     isEditor: false
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }
 export const smallMultiples_StackedBars: Story = {
   args: {
     config: smallMultiplesStackedBars,
     isEditor: false
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }
 export default meta

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

@@ -0,0 +1,64 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import Chart from '../CdcChartComponent'
+import { editConfigKeys } from '@cdc/core/helpers/configHelpers'
+import smallestLeftAxisMaxConfig from './_mock/smallest_left_axis_max.json'
+import { assertVisualizationRendered } from '@cdc/core/helpers/testing'
+
+const meta: Meta<typeof Chart> = {
+  title: 'Components/Templates/Chart/Smallest Left Axis Maximum',
+  component: Chart
+}
+
+type Story = StoryObj<typeof Chart>
+
+/**
+ * Region B is the default filter — data only goes up to 1.
+ * Without smallestLeftAxisMax, the Y axis would show decimal ticks (0, 0.2, 0.4…).
+ * With smallestLeftAxisMax: 5, the axis extends to at least 5, producing clean integer ticks.
+ */
+export const WithSmallestLeftAxisMax: Story = {
+  args: {
+    config: smallestLeftAxisMaxConfig
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
+  }
+}
+
+/**
+ * Same chart without the smallestLeftAxisMax setting.
+ * Region B data (max 1) causes decimal ticks on the Y axis — the problem this feature solves.
+ */
+export const WithoutSmallestLeftAxisMax: Story = {
+  args: {
+    config: editConfigKeys(smallestLeftAxisMaxConfig, [{ path: ['yAxis', 'smallestLeftAxisMax'], value: undefined }])
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
+  }
+}
+
+/**
+ * Region A has data up to 28, well above the smallestLeftAxisMax of 5.
+ * The axis naturally scales to the data — the setting has no effect here.
+ */
+export const LargerDataUnaffected: Story = {
+  args: {
+    config: editConfigKeys(smallestLeftAxisMaxConfig, [{ path: ['filters', '0', 'active'], value: 'Region A' }])
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
+  }
+}
+
+/**
+ * Editor view so you can see the Smallest Left Axis Maximum field in the Left Value Axis section.
+ */
+export const Editor: Story = {
+  args: {
+    config: smallestLeftAxisMaxConfig,
+    isEditor: true
+  }
+}
+
+export default meta

package/src/_stories/Chart.stories.tsx

@@ -6,6 +6,7 @@ import lineChartTwoPointsNewChart from './_mock/line_chart_two_points_new_chart.
 import lollipop from './_mock/lollipop.json'
 import forestPlot from '../../examples/feature/forest-plot/forest-plot.json'
 import pairedBar from './_mock/paired-bar.json'
+import pairedBarAbbreviated from './_mock/paired-bar-abbr.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'
@@ -14,6 +15,8 @@ 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, waitForPresence } from '@cdc/core/helpers/testing'
+import { expect } from 'storybook/test'
 
 const meta: Meta<typeof Chart> = {
   title: 'Components/Templates/Chart',
@@ -26,18 +29,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)
   }
 }
 
@@ -45,18 +57,28 @@ export const Lollipop: Story = {
   args: {
     config: lollipop,
     isEditor: false
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }
 
 export const Forest_Plot: Story = {
   args: {
-    config: forestPlot
+    config: forestPlot,
+    isEditor: true
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }
 
 export const Horizontal_Bar: Story = {
   args: {
     config: horizontalBarConfig
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }
 
@@ -64,12 +86,18 @@ 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)
   }
 }
 
@@ -77,12 +105,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)
   }
 }
 
@@ -90,6 +124,19 @@ export const Paired_Bar: Story = {
   args: {
     config: pairedBar,
     isEditor: true
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
+  }
+}
+
+export const Paired_Bar_Year_Tick_Format_Regression: Story = {
+  args: {
+    config: pairedBarAbbreviated,
+    isEditor: true
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }
 
@@ -97,6 +144,30 @@ export const Area_Chart_stacked: Story = {
   args: {
     config: areaChartStacked,
     isEditor: false
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
+  }
+}
+
+export const Metadata_In_Description: Story = {
+  args: {
+    configUrl: '/packages/chart/tests/fixtures/chart-config-with-metadata.json'
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
+    const subtext = await waitForPresence('.subtext', canvasElement)
+    expect(subtext?.textContent).toContain('January 15, 2026')
+  }
+}
+
+export const Metadata_Backward_Compat_Plain_Array: Story = {
+  args: {
+    config: lineChartTwoPointsRegressionTest,
+    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)
   }
 }