@cdc/chart 4.26.1 → 4.26.2

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

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

package/src/_stories/ChartBrush.stories.tsx

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react-vite'
 import Chart from '../CdcChartComponent'
 import brushEnabledConfig from './_mock/brush_enabled.json'
+import { assertVisualizationRendered } from '@cdc/core/helpers/testing'
 
 const meta: Meta<typeof Chart> = {
   title: 'Components/Templates/Chart/BrushSlider',
@@ -29,6 +30,9 @@ export const BrushSliderEnabled: Story = {
           'Line chart with brush slider enabled. Drag the handles on the slider below the chart to filter the data range.'
       }
     }
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }
 
@@ -44,6 +48,9 @@ export const BrushSliderInEditor: Story = {
           'Brush slider in editor mode. You can toggle the "Brush Slider" checkbox in the X-Axis section to enable/disable it.'
       }
     }
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }
 

package/src/_stories/ChartEditor.stories.tsx

@@ -4,6 +4,7 @@ import Chart from '../CdcChartComponent'
 import pieChartExample from './_mock/pie_config.json'
 import urlFilterExample from './_mock/url_filter.json'
 import mockScatterPlot from './_mock/scatterplot_mock.json'
+import { assertVisualizationRendered } from '@cdc/core/helpers/testing'
 
 const meta: Meta<typeof Chart> = {
   title: 'Components/Templates/Chart/Editor',
@@ -16,6 +17,9 @@ export const Primary: Story = {
   args: {
     config: { ...pieChartExample },
     isEditor: true
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }
 
@@ -27,6 +31,9 @@ export const Url_Filter: Story = {
   args: {
     config: urlFilterExample,
     isEditor: true
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }
 

package/src/_stories/ChartLine.QuadrantAngles.stories.tsx

@@ -0,0 +1,89 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import Chart from '../CdcChartComponent'
+import configAll from './_mock/line_chart_quadrant_angles.json'
+import configQ1 from './_mock/line_chart_angle_q1_steep_upward.json'
+import configQ2 from './_mock/line_chart_angle_q2_gentle_downward.json'
+import configQ3 from './_mock/line_chart_angle_q3_steep_downward.json'
+import configQ4 from './_mock/line_chart_angle_q4_gentle_upward.json'
+import configNearZeroRise from './_mock/line_chart_angle_near_zero_rise.json'
+import configNearZeroFall from './_mock/line_chart_angle_near_zero_fall.json'
+import { assertVisualizationRendered } from '@cdc/core/helpers/testing'
+
+const meta: Meta<typeof Chart> = {
+  title: 'Components/Templates/Chart/QuadrantAngles',
+  component: Chart
+}
+
+type Story = StoryObj<typeof Chart>
+
+export const AllQuadrants: Story = {
+  args: {
+    config: configAll,
+    isEditor: false
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
+  }
+}
+
+export const Q1SteepUpward: Story = {
+  args: {
+    config: configQ1,
+    isEditor: false
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
+  }
+}
+
+export const Q2GentleDownward: Story = {
+  args: {
+    config: configQ2,
+    isEditor: false
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
+  }
+}
+
+export const Q3SteepDownward: Story = {
+  args: {
+    config: configQ3,
+    isEditor: false
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
+  }
+}
+
+export const Q4GentleUpward: Story = {
+  args: {
+    config: configQ4,
+    isEditor: false
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
+  }
+}
+
+export const NearZeroRise: Story = {
+  args: {
+    config: configNearZeroRise,
+    isEditor: false
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
+  }
+}
+
+export const NearZeroFall: Story = {
+  args: {
+    config: configNearZeroFall,
+    isEditor: false
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
+  }
+}
+
+export default meta

package/src/_stories/ChartLine.Suppression.stories.tsx

@@ -2,6 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react-vite'
 import Chart from '../CdcChartComponent'
 import suppressionConfig from './_mock/suppression_mock.json'
 import SuppressedConfig from './_mock/bar-chart-suppressed.json'
+import { assertVisualizationRendered } from '@cdc/core/helpers/testing'
 const meta: Meta<typeof Chart> = {
   title: 'Components/Templates/Chart/Suppression',
   component: Chart
@@ -13,12 +14,18 @@ export const SuppressedLines: Story = {
   args: {
     config: suppressionConfig,
     isEditor: false
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }
 export const SuppressedBars: Story = {
   args: {
     config: SuppressedConfig,
     isEditor: false
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }
 

package/src/_stories/ChartLine.Symbols.stories.tsx

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

package/src/_stories/ChartPrefixSuffix.stories.tsx

@@ -7,6 +7,7 @@ import scatterPlotConfig from './_mock/scatterplot_mock.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/Prefix Suffix',
@@ -21,6 +22,9 @@ export const Inline_Label: Story = {
       { path: ['yAxis', 'inlineLabel'], value: ' Somethings per Something' },
       { path: ['yAxis', 'gridLines'], value: true }
     ])
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }
 export const Inline_Label_With_Suffix: Story = {
@@ -30,12 +34,18 @@ export const Inline_Label_With_Suffix: Story = {
       { path: ['dataFormat', 'suffix'], value: '%' },
       { path: ['yAxis', 'gridLines'], value: true }
     ])
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }
 
 export const Inline_Label_Worst_Case: Story = {
   args: {
     config: editConfigKeys(annotationConfig, [{ path: ['yAxis', 'inlineLabel'], value: ' Somethings per Something' }])
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }
 
@@ -47,6 +57,9 @@ export const Inline_Label_With_Options: Story = {
       { path: ['yAxis', 'tickRotation'], value: 45 },
       { path: ['yAxis', 'tickLabelColor'], value: 'red' }
     ])
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }
 
@@ -56,6 +69,9 @@ export const Inline_Label_No_Space: Story = {
       { path: ['yAxis', 'inlineLabel'], value: 'lbs' },
       { path: ['dataFormat', 'suffix'], value: '' }
     ])
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }
 
@@ -65,12 +81,18 @@ export const Inline_Label_With_Space: Story = {
       { path: ['yAxis', 'inlineLabel'], value: 'lbs of something' },
       { path: ['dataFormat', 'suffix'], value: '' }
     ])
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }
 
 export const Suffix: Story = {
   args: {
     config: annotationConfig
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }
 
@@ -80,6 +102,9 @@ export const Prefix: Story = {
       { path: ['dataFormat', 'prefix'], value: '$' },
       { path: ['dataFormat', 'suffix'], value: '' }
     ])
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }
 
@@ -89,6 +114,9 @@ export const Prefix_Suffix_And_Inline_Title: Story = {
       { path: ['yAxis', 'inlineLabel'], value: 'lbs of something' },
       { path: ['dataFormat', 'prefix'], value: '$' }
     ])
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }
 export const Horizontal_Bar: Story = {
@@ -97,6 +125,9 @@ export const Horizontal_Bar: Story = {
       { path: ['dataFormat', 'suffix'], value: ' suf' },
       { path: ['dataFormat', 'prefix'], value: 'pre' }
     ])
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }
 
@@ -109,6 +140,9 @@ export const Inline_Title_On_Line: Story = {
       { path: ['yAxis', 'labelsAboveGridlines'], value: true },
       { path: ['yAxis', 'hideAxis'], value: true }
     ])
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }
 
@@ -120,6 +154,9 @@ export const Values_On_Line_All_Suffix: Story = {
       { path: ['yAxis', 'gridLines'], value: true },
       { path: ['yAxis', 'hideAxis'], value: true }
     ])
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }
 
@@ -131,6 +168,9 @@ export const Values_on_Line_Top_Suffix_Only_Area_Worst_Case: Story = {
       { path: ['yAxis', 'labelsAboveGridlines'], value: true },
       { path: ['yAxis', 'gridLines'], value: true }
     ])
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }
 
@@ -143,6 +183,9 @@ export const Top_Suffix_Above_Gridlines_With_Options: Story = {
       { path: ['yAxis', 'gridLines'], value: true },
       { path: ['yAxis', 'hideAxis'], value: true }
     ])
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }
 
@@ -150,7 +193,9 @@ export const ScatterPlot_Bottom_Commas: Story = {
   args: {
     config: editConfigKeys(scatterPlotConfig, [{ path: ['dataFormat', 'bottomCommas'], value: true }])
   },
-  isEditor: true
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
+  }
 }
 
 export default meta