@cdc/chart 4.26.1 → 4.26.2

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

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

@@ -14,6 +14,7 @@ import pieCalculatedArea from './_mock/pie_calculated_area.json'
 import areaChartStacked from './_mock/area_chart_stacked.json'
 import multipleLines from './_mock/short_dates.json'
 import { editConfigKeys } from '@cdc/core/helpers/configHelpers'
+import { assertVisualizationRendered } from '@cdc/core/helpers/testing'
 
 const meta: Meta<typeof Chart> = {
   title: 'Components/Templates/Chart',
@@ -26,18 +27,27 @@ export const line_Chart_Two_Points_Regression_Test: Story = {
   args: {
     config: lineChartTwoPointsRegressionTest,
     isEditor: false
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }
 export const line_Chart_Two_Points_New_Chart: Story = {
   args: {
     config: lineChartTwoPointsNewChart,
     isEditor: false
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }
 
 export const multiple_lines: Story = {
   args: {
     config: editConfigKeys(multipleLines, [{ path: ['tooltips', 'dateDisplayFormat'], value: '%b. %d %Y' }])
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }
 
@@ -45,18 +55,27 @@ export const Lollipop: Story = {
   args: {
     config: lollipop,
     isEditor: false
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }
 
 export const Forest_Plot: Story = {
   args: {
     config: forestPlot
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }
 
 export const Horizontal_Bar: Story = {
   args: {
     config: horizontalBarConfig
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }
 
@@ -64,12 +83,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 +102,18 @@ export const Pie: Story = {
   args: {
     config: pieConfig,
     isEditor: true
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }
 export const Pie_Calculated_Area: Story = {
   args: {
     config: pieCalculatedArea,
     isEditor: true
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }
 
@@ -90,6 +121,9 @@ export const Paired_Bar: Story = {
   args: {
     config: pairedBar,
     isEditor: true
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }
 
@@ -97,6 +131,9 @@ export const Area_Chart_stacked: Story = {
   args: {
     config: areaChartStacked,
     isEditor: false
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }