From adc4ec7c81fe50889ba7399565866da69ffba3af Mon Sep 17 00:00:00 2001 From: Oseer Williams <265368733+owilliams-tetrascience@users.noreply.github.com> Date: Tue, 23 Jun 2026 15:58:16 -0400 Subject: [PATCH 1/3] feat: SW-1891 add xTickText prop for categorical x-axis labels MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit AreaGraph, BarGraph, and LineGraph only accepted numeric x-values and forced the x-axis ticks to those literal numbers, so common dashboard cases (days of week, instrument names, dates) rendered as 0 1 2 … and consumers had to pre-convert categorical data to integers. Add an optional xTickText?: string[] prop to all three. When provided, the numeric x values still drive bar/line/area positioning while the rendered tick labels match xTickText in order via Plotly tickvals + ticktext. AreaGraph additionally switches tickvals from its nice-step values to the actual data x-positions when xTickText is set, so labels align with the data. Numeric-x behavior is unchanged when the prop is omitted. Adds a "Categorical X Labels" Storybook story per chart with a play test asserting the axis renders the categorical labels. Co-Authored-By: Claude Opus 4.8 --- .../charts/AreaGraph/AreaGraph.stories.tsx | 59 +++++++++++++++ src/components/charts/AreaGraph/AreaGraph.tsx | 20 ++++- .../charts/BarGraph/BarGraph.stories.tsx | 75 +++++++++++++++++++ src/components/charts/BarGraph/BarGraph.tsx | 11 ++- .../charts/LineGraph/LineGraph.stories.tsx | 73 ++++++++++++++++++ src/components/charts/LineGraph/LineGraph.tsx | 12 ++- 6 files changed, 245 insertions(+), 5 deletions(-) diff --git a/src/components/charts/AreaGraph/AreaGraph.stories.tsx b/src/components/charts/AreaGraph/AreaGraph.stories.tsx index f548ee13..b93e4b39 100644 --- a/src/components/charts/AreaGraph/AreaGraph.stories.tsx +++ b/src/components/charts/AreaGraph/AreaGraph.stories.tsx @@ -143,6 +143,65 @@ export const Stacked: Story = { }, }; +const weekdayDataSeries = [ + { + // x positions are integer indices; xTickText supplies the day labels + x: [0, 1, 2, 3, 4, 5, 6], + y: [120, 130, 100, 110, 140, 80, 60], + name: "Throughput", + }, +]; + +export const CategoricalXLabels: Story = { + name: "Categorical X Labels", + parameters: { + // Leave testCaseId empty for new stories; sync-storybook-zephyr generates it + zephyr: { testCaseId: "" }, + docs: { + description: { + story: + "Use `xTickText` to display categorical x-axis labels (e.g. days of the week). The numeric `x` values still drive area positioning, but the rendered tick labels match `xTickText` in order.", + }, + }, + }, + args: { + dataSeries: weekdayDataSeries, + xTickText: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], + title: "Throughput by Weekday", + xTitle: "Day", + yTitle: "Files", + width: 1000, + height: 600, + variant: "normal", + }, + play: async ({ canvasElement, step }) => { + const canvas = within(canvasElement); + + await step("Chart title is displayed", async () => { + expect(canvas.getByText("Throughput by Weekday")).toBeInTheDocument(); + }); + + await step("Chart container renders", async () => { + expect(canvasElement.querySelector(".js-plotly-plot")).toBeInTheDocument(); + }); + + await step("X-axis ticks show categorical labels, not integers", async () => { + const tickLabels = [ + ...canvasElement.querySelectorAll(".xtick text"), + ].map((node) => node.textContent); + expect(tickLabels).toEqual([ + "Mon", + "Tue", + "Wed", + "Thu", + "Fri", + "Sat", + "Sun", + ]); + }); + }, +}; + export const CustomRange: Story = { name: "Custom Range", parameters: { diff --git a/src/components/charts/AreaGraph/AreaGraph.tsx b/src/components/charts/AreaGraph/AreaGraph.tsx index d251ed11..18a1dd13 100644 --- a/src/components/charts/AreaGraph/AreaGraph.tsx +++ b/src/components/charts/AreaGraph/AreaGraph.tsx @@ -27,6 +27,13 @@ interface AreaGraphProps { xTitle?: string; yTitle?: string; title?: string; + /** + * Categorical labels for the x-axis ticks. When provided, the x data values + * still drive area positioning but the displayed tick labels match these + * strings in order (e.g. ["Mon", "Tue", …]). Should align 1:1 with the + * unique, ordered x values across all series. + */ + xTickText?: string[]; } const AreaGraph: React.FC = ({ @@ -39,6 +46,7 @@ const AreaGraph: React.FC = ({ xTitle = "Columns", yTitle = "Rows", title = "Area Graph", + xTickText, }) => { const plotRef = useRef(null); const theme = usePlotlyTheme(); @@ -125,6 +133,13 @@ const AreaGraph: React.FC = ({ return ticks; }, [effectiveYRange]); + // When categorical labels are supplied, ticks must sit on the actual data + // x-positions rather than the computed nice-step values above. + const xDataValues = useMemo( + () => [...new Set(dataSeries.flatMap((s) => s.x))], + [dataSeries], + ); + const tickOptions = useMemo( () => ({ tickcolor: theme.tickColor, @@ -258,7 +273,8 @@ const AreaGraph: React.FC = ({ range: xRange, autorange: !xRange, tickmode: "array" as const, - tickvals: xTicks, + tickvals: xTickText ? xDataValues : xTicks, + ...(xTickText ? { ticktext: xTickText } : {}), showgrid: true, ...tickOptions, }, @@ -316,7 +332,7 @@ const AreaGraph: React.FC = ({ Plotly.purge(plotElement); } }; - }, [dataSeries, width, height, xRange, yRange, effectiveXRange, effectiveYRange, variant, xTitle, yTitle, titleOptions, tickOptions, xTicks, yTicks, theme, bindTooltip]); + }, [dataSeries, width, height, xRange, yRange, effectiveXRange, effectiveYRange, variant, xTitle, yTitle, titleOptions, tickOptions, xTicks, yTicks, xDataValues, xTickText, theme, bindTooltip]); return (
diff --git a/src/components/charts/BarGraph/BarGraph.stories.tsx b/src/components/charts/BarGraph/BarGraph.stories.tsx index 467a471d..47d99784 100644 --- a/src/components/charts/BarGraph/BarGraph.stories.tsx +++ b/src/components/charts/BarGraph/BarGraph.stories.tsx @@ -51,6 +51,26 @@ const generateGroupedBarData = (): BarDataSeries[] => { ]; }; +const generatePipelineRunsByStatus = (): BarDataSeries[] => { + // x positions are integer indices; xTickText supplies the day labels + const x = [0, 1, 2, 3, 4, 5, 6]; + + return [ + { + name: "Success", + x, + y: [42, 51, 38, 60, 55, 12, 8], + color: "#29A634", + }, + { + name: "Failed", + x, + y: [3, 5, 2, 7, 4, 1, 0], + color: "#CD4246", + }, + ]; +}; + const generateStackedBarData = (): BarDataSeries[] => { const x = [200, 300, 400, 500, 600, 700, 800, 900, 1000]; @@ -171,6 +191,61 @@ export const StackedBars: Story = { }, }; +export const CategoricalXLabels: Story = { + name: "Categorical X Labels", + parameters: { + // Leave testCaseId empty for new stories; sync-storybook-zephyr generates it + zephyr: { testCaseId: "" }, + docs: { + description: { + story: + "Use `xTickText` to display categorical x-axis labels (e.g. days of the week). The numeric `x` values still drive bar positioning, but the rendered tick labels match `xTickText` in order.", + }, + }, + }, + args: { + dataSeries: generatePipelineRunsByStatus(), + xTickText: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], + variant: "group", + title: "Pipeline Runs by Status", + xTitle: "Day", + yTitle: "Runs", + width: 1000, + height: 600, + }, + play: async ({ canvasElement, step }) => { + const canvas = within(canvasElement); + + await step("Chart title is displayed", async () => { + expect(canvas.getByText("Pipeline Runs by Status")).toBeInTheDocument(); + }); + + await step("Chart container renders", async () => { + expect(canvasElement.querySelector(".js-plotly-plot")).toBeInTheDocument(); + }); + + await step("X-axis ticks show categorical labels, not integers", async () => { + const tickLabels = [ + ...canvasElement.querySelectorAll(".xtick text"), + ].map((node) => node.textContent); + expect(tickLabels).toEqual([ + "Mon", + "Tue", + "Wed", + "Thu", + "Fri", + "Sat", + "Sun", + ]); + }); + + await step("Legend shows all series names", async () => { + expect(canvas.getByText("Success")).toBeInTheDocument(); + expect(canvas.getByText("Failed")).toBeInTheDocument(); + }); + }, +}; + export const CustomStyling: Story = { name: "Custom Styling", parameters: { diff --git a/src/components/charts/BarGraph/BarGraph.tsx b/src/components/charts/BarGraph/BarGraph.tsx index 54aec4cf..b5c1bf31 100644 --- a/src/components/charts/BarGraph/BarGraph.tsx +++ b/src/components/charts/BarGraph/BarGraph.tsx @@ -32,6 +32,13 @@ interface BarGraphProps { yTitle?: string; title?: string; barWidth?: number; + /** + * Categorical labels for the x-axis ticks. When provided, the x data values + * still drive bar positioning but the displayed tick labels match these + * strings in order (e.g. ["Mon", "Tue", …]). Should align 1:1 with the + * unique, ordered x values across all series. + */ + xTickText?: string[]; } const BarGraph: React.FC = ({ @@ -45,6 +52,7 @@ const BarGraph: React.FC = ({ yTitle = "Rows", title = "Bar Graph", barWidth = 24, + xTickText, }) => { const plotRef = useRef(null); const theme = usePlotlyTheme(); @@ -188,6 +196,7 @@ const BarGraph: React.FC = ({ autorange: !xRange, tickmode: "array" as const, tickvals: xTicks, + ...(xTickText ? { ticktext: xTickText } : {}), showgrid: true, ...tickOptions, }, @@ -244,7 +253,7 @@ const BarGraph: React.FC = ({ Plotly.purge(plotElement); } }; - }, [dataSeries, width, height, xRange, yRange, xTitle, yTitle, title, barWidth, barMode, tickOptions, xTicks, yTicks, theme, bindTooltip]); + }, [dataSeries, width, height, xRange, yRange, xTitle, yTitle, title, barWidth, barMode, tickOptions, xTicks, yTicks, xTickText, theme, bindTooltip]); return (
diff --git a/src/components/charts/LineGraph/LineGraph.stories.tsx b/src/components/charts/LineGraph/LineGraph.stories.tsx index 8b927185..74ae5246 100644 --- a/src/components/charts/LineGraph/LineGraph.stories.tsx +++ b/src/components/charts/LineGraph/LineGraph.stories.tsx @@ -254,6 +254,26 @@ const generateDemoDataWithErrorBars = (): LineDataSeries[] => { })); }; +const generateWeekdayData = (): LineDataSeries[] => { + // x positions are integer indices; xTickText supplies the day labels + const x = [0, 1, 2, 3, 4, 5, 6]; + + return [ + { + name: "Instrument A", + symbol: "circle", + x, + y: [12, 18, 15, 22, 19, 8, 5], + }, + { + name: "Instrument B", + symbol: "square", + x, + y: [20, 24, 21, 28, 26, 14, 10], + }, + ]; +}; + const meta: Meta = { title: "Charts/Line Graph", component: LineGraph, @@ -298,6 +318,59 @@ export const Basic: Story = { }, }; +export const CategoricalXLabels: Story = { + name: "Categorical X Labels", + parameters: { + // Leave testCaseId empty for new stories; sync-storybook-zephyr generates it + zephyr: { testCaseId: "" }, + docs: { + description: { + story: + "Use `xTickText` to display categorical x-axis labels (e.g. days of the week). The numeric `x` values still drive line positioning, but the rendered tick labels match `xTickText` in order.", + }, + }, + }, + args: { + dataSeries: generateWeekdayData(), + xTickText: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], + variant: "lines+markers", + title: "Runs per Weekday", + xTitle: "Day", + yTitle: "Runs", + }, + play: async ({ canvasElement, step }) => { + const canvas = within(canvasElement); + + await step("Chart title is displayed", async () => { + expect(canvas.getByText("Runs per Weekday")).toBeInTheDocument(); + }); + + await step("Chart container renders", async () => { + expect(canvasElement.querySelector(".js-plotly-plot")).toBeInTheDocument(); + }); + + await step("X-axis ticks show categorical labels, not integers", async () => { + const tickLabels = [ + ...canvasElement.querySelectorAll(".xtick text"), + ].map((node) => node.textContent); + expect(tickLabels).toEqual([ + "Mon", + "Tue", + "Wed", + "Thu", + "Fri", + "Sat", + "Sun", + ]); + }); + + await step("Legend shows series names", async () => { + expect(canvas.getByText("Instrument A")).toBeInTheDocument(); + expect(canvas.getByText("Instrument B")).toBeInTheDocument(); + }); + }, +}; + export const WithMarkers: Story = { name: "With Markers", parameters: { diff --git a/src/components/charts/LineGraph/LineGraph.tsx b/src/components/charts/LineGraph/LineGraph.tsx index 390e8182..f34a0697 100644 --- a/src/components/charts/LineGraph/LineGraph.tsx +++ b/src/components/charts/LineGraph/LineGraph.tsx @@ -180,6 +180,13 @@ type LineGraphProps = { xTitle?: string; yTitle?: string; title?: string; + /** + * Categorical labels for the x-axis ticks. When provided, the x data values + * still drive line positioning but the displayed tick labels match these + * strings in order (e.g. ["Mon", "Tue", …]). Should align 1:1 with the + * unique, ordered x values across all series. + */ + xTickText?: string[]; }; const LineGraph: React.FC = ({ @@ -192,6 +199,7 @@ const LineGraph: React.FC = ({ xTitle = "Columns", yTitle = "Rows", title = "Line Graph", + xTickText, }) => { const plotRef = useRef(null); const theme = usePlotlyTheme(); @@ -353,7 +361,7 @@ const LineGraph: React.FC = ({ autorange: !xRange, tickmode: "array" as const, tickvals: xTicks, - ticktext: xTicks.map(String), + ticktext: xTickText ?? xTicks.map(String), showgrid: true, ...tickOptions, }, @@ -409,7 +417,7 @@ const LineGraph: React.FC = ({ Plotly.purge(plotElement); } }; - }, [dataSeries, width, height, xRange, yRange, xTitle, yTitle, title, mode, tickOptions, xTicks, yTicks, effectiveYRange, variant, theme, bindTooltip]); + }, [dataSeries, width, height, xRange, yRange, xTitle, yTitle, title, mode, tickOptions, xTicks, yTicks, xTickText, effectiveYRange, variant, theme, bindTooltip]); return (
From bd1c3613606b1f94f76adc1127f71fb7507fe3e1 Mon Sep 17 00:00:00 2001 From: Oseer Williams <265368733+owilliams-tetrascience@users.noreply.github.com> Date: Tue, 23 Jun 2026 16:07:01 -0400 Subject: [PATCH 2/3] fix: SW-1891 guard categorical x-labels and stabilize tick order Address review feedback on the xTickText feature: - Sort the unique x-positions ascending so categorical labels map deterministically to x regardless of per-series ordering. - Only apply xTickText when its length matches the tick positions 1:1; otherwise fall back to numeric ticks instead of silently mis-labeling. - Use the standard sync-storybook-zephyr marker comment above the empty testCaseId placeholders in the new stories. Co-Authored-By: Claude Opus 4.8 --- .../charts/AreaGraph/AreaGraph.stories.tsx | 2 +- src/components/charts/AreaGraph/AreaGraph.tsx | 15 ++++++++++----- .../charts/BarGraph/BarGraph.stories.tsx | 2 +- src/components/charts/BarGraph/BarGraph.tsx | 10 +++++++--- .../charts/LineGraph/LineGraph.stories.tsx | 2 +- src/components/charts/LineGraph/LineGraph.tsx | 10 +++++++--- 6 files changed, 27 insertions(+), 14 deletions(-) diff --git a/src/components/charts/AreaGraph/AreaGraph.stories.tsx b/src/components/charts/AreaGraph/AreaGraph.stories.tsx index b93e4b39..eb0a7467 100644 --- a/src/components/charts/AreaGraph/AreaGraph.stories.tsx +++ b/src/components/charts/AreaGraph/AreaGraph.stories.tsx @@ -155,7 +155,7 @@ const weekdayDataSeries = [ export const CategoricalXLabels: Story = { name: "Categorical X Labels", parameters: { - // Leave testCaseId empty for new stories; sync-storybook-zephyr generates it + // Auto-generated by sync-storybook-zephyr - do not add manually zephyr: { testCaseId: "" }, docs: { description: { diff --git a/src/components/charts/AreaGraph/AreaGraph.tsx b/src/components/charts/AreaGraph/AreaGraph.tsx index 18a1dd13..f5d32df4 100644 --- a/src/components/charts/AreaGraph/AreaGraph.tsx +++ b/src/components/charts/AreaGraph/AreaGraph.tsx @@ -134,12 +134,17 @@ const AreaGraph: React.FC = ({ }, [effectiveYRange]); // When categorical labels are supplied, ticks must sit on the actual data - // x-positions rather than the computed nice-step values above. + // x-positions rather than the computed nice-step values above. Sorted + // ascending so labels map deterministically to x regardless of series order. const xDataValues = useMemo( - () => [...new Set(dataSeries.flatMap((s) => s.x))], + () => [...new Set(dataSeries.flatMap((s) => s.x))].sort((a, b) => a - b), [dataSeries], ); + // Only apply categorical labels when they align 1:1 with the tick positions; + // a mismatch would silently mis-label ticks, so fall back to numeric ticks. + const useCategoricalX = !!xTickText && xTickText.length === xDataValues.length; + const tickOptions = useMemo( () => ({ tickcolor: theme.tickColor, @@ -273,8 +278,8 @@ const AreaGraph: React.FC = ({ range: xRange, autorange: !xRange, tickmode: "array" as const, - tickvals: xTickText ? xDataValues : xTicks, - ...(xTickText ? { ticktext: xTickText } : {}), + tickvals: useCategoricalX ? xDataValues : xTicks, + ...(useCategoricalX ? { ticktext: xTickText } : {}), showgrid: true, ...tickOptions, }, @@ -332,7 +337,7 @@ const AreaGraph: React.FC = ({ Plotly.purge(plotElement); } }; - }, [dataSeries, width, height, xRange, yRange, effectiveXRange, effectiveYRange, variant, xTitle, yTitle, titleOptions, tickOptions, xTicks, yTicks, xDataValues, xTickText, theme, bindTooltip]); + }, [dataSeries, width, height, xRange, yRange, effectiveXRange, effectiveYRange, variant, xTitle, yTitle, titleOptions, tickOptions, xTicks, yTicks, xDataValues, useCategoricalX, xTickText, theme, bindTooltip]); return (
diff --git a/src/components/charts/BarGraph/BarGraph.stories.tsx b/src/components/charts/BarGraph/BarGraph.stories.tsx index 47d99784..78097028 100644 --- a/src/components/charts/BarGraph/BarGraph.stories.tsx +++ b/src/components/charts/BarGraph/BarGraph.stories.tsx @@ -194,7 +194,7 @@ export const StackedBars: Story = { export const CategoricalXLabels: Story = { name: "Categorical X Labels", parameters: { - // Leave testCaseId empty for new stories; sync-storybook-zephyr generates it + // Auto-generated by sync-storybook-zephyr - do not add manually zephyr: { testCaseId: "" }, docs: { description: { diff --git a/src/components/charts/BarGraph/BarGraph.tsx b/src/components/charts/BarGraph/BarGraph.tsx index b5c1bf31..8786f74e 100644 --- a/src/components/charts/BarGraph/BarGraph.tsx +++ b/src/components/charts/BarGraph/BarGraph.tsx @@ -92,10 +92,14 @@ const BarGraph: React.FC = ({ ); const xTicks = useMemo( - () => [...new Set(dataSeries.flatMap((s) => s.x))], + () => [...new Set(dataSeries.flatMap((s) => s.x))].sort((a, b) => a - b), [dataSeries], ); + // Only apply categorical labels when they align 1:1 with the tick positions; + // a mismatch would silently mis-label ticks, so fall back to numeric ticks. + const useCategoricalX = !!xTickText && xTickText.length === xTicks.length; + const yTicks = useMemo(() => { const range = effectiveYRange[1] - effectiveYRange[0]; let step = Math.pow(10, Math.floor(Math.log10(range))); @@ -196,7 +200,7 @@ const BarGraph: React.FC = ({ autorange: !xRange, tickmode: "array" as const, tickvals: xTicks, - ...(xTickText ? { ticktext: xTickText } : {}), + ...(useCategoricalX ? { ticktext: xTickText } : {}), showgrid: true, ...tickOptions, }, @@ -253,7 +257,7 @@ const BarGraph: React.FC = ({ Plotly.purge(plotElement); } }; - }, [dataSeries, width, height, xRange, yRange, xTitle, yTitle, title, barWidth, barMode, tickOptions, xTicks, yTicks, xTickText, theme, bindTooltip]); + }, [dataSeries, width, height, xRange, yRange, xTitle, yTitle, title, barWidth, barMode, tickOptions, xTicks, yTicks, useCategoricalX, xTickText, theme, bindTooltip]); return (
diff --git a/src/components/charts/LineGraph/LineGraph.stories.tsx b/src/components/charts/LineGraph/LineGraph.stories.tsx index 74ae5246..1480b0c7 100644 --- a/src/components/charts/LineGraph/LineGraph.stories.tsx +++ b/src/components/charts/LineGraph/LineGraph.stories.tsx @@ -321,7 +321,7 @@ export const Basic: Story = { export const CategoricalXLabels: Story = { name: "Categorical X Labels", parameters: { - // Leave testCaseId empty for new stories; sync-storybook-zephyr generates it + // Auto-generated by sync-storybook-zephyr - do not add manually zephyr: { testCaseId: "" }, docs: { description: { diff --git a/src/components/charts/LineGraph/LineGraph.tsx b/src/components/charts/LineGraph/LineGraph.tsx index f34a0697..6f359143 100644 --- a/src/components/charts/LineGraph/LineGraph.tsx +++ b/src/components/charts/LineGraph/LineGraph.tsx @@ -255,10 +255,14 @@ const LineGraph: React.FC = ({ }, [effectiveYRange]); const xTicks = useMemo( - () => [...new Set(dataSeries.flatMap((s) => s.x))], + () => [...new Set(dataSeries.flatMap((s) => s.x))].sort((a, b) => a - b), [dataSeries], ); + // Only apply categorical labels when they align 1:1 with the tick positions; + // a mismatch would silently mis-label ticks, so fall back to numeric ticks. + const useCategoricalX = !!xTickText && xTickText.length === xTicks.length; + const mode = useMemo((): "lines" | "lines+markers" => { switch (variant) { case "lines+markers": @@ -361,7 +365,7 @@ const LineGraph: React.FC = ({ autorange: !xRange, tickmode: "array" as const, tickvals: xTicks, - ticktext: xTickText ?? xTicks.map(String), + ticktext: useCategoricalX ? xTickText : xTicks.map(String), showgrid: true, ...tickOptions, }, @@ -417,7 +421,7 @@ const LineGraph: React.FC = ({ Plotly.purge(plotElement); } }; - }, [dataSeries, width, height, xRange, yRange, xTitle, yTitle, title, mode, tickOptions, xTicks, yTicks, xTickText, effectiveYRange, variant, theme, bindTooltip]); + }, [dataSeries, width, height, xRange, yRange, xTitle, yTitle, title, mode, tickOptions, xTicks, yTicks, useCategoricalX, xTickText, effectiveYRange, variant, theme, bindTooltip]); return (
From 372236b3e113ec170a194bb06cd1e2211428a468 Mon Sep 17 00:00:00 2001 From: owilliams-tetrascience Date: Fri, 26 Jun 2026 13:44:00 +0000 Subject: [PATCH 3/3] chore: add Zephyr test case IDs to stories --- src/components/charts/AreaGraph/AreaGraph.stories.tsx | 2 +- src/components/charts/BarGraph/BarGraph.stories.tsx | 2 +- .../InteractiveScatter/InteractiveScatter.stories.tsx | 9 +++++++++ src/components/charts/LineGraph/LineGraph.stories.tsx | 2 +- 4 files changed, 12 insertions(+), 3 deletions(-) diff --git a/src/components/charts/AreaGraph/AreaGraph.stories.tsx b/src/components/charts/AreaGraph/AreaGraph.stories.tsx index eb0a7467..5e071b75 100644 --- a/src/components/charts/AreaGraph/AreaGraph.stories.tsx +++ b/src/components/charts/AreaGraph/AreaGraph.stories.tsx @@ -156,7 +156,7 @@ export const CategoricalXLabels: Story = { name: "Categorical X Labels", parameters: { // Auto-generated by sync-storybook-zephyr - do not add manually - zephyr: { testCaseId: "" }, + zephyr: { testCaseId: "SW-T5458" }, docs: { description: { story: diff --git a/src/components/charts/BarGraph/BarGraph.stories.tsx b/src/components/charts/BarGraph/BarGraph.stories.tsx index 78097028..94c141b0 100644 --- a/src/components/charts/BarGraph/BarGraph.stories.tsx +++ b/src/components/charts/BarGraph/BarGraph.stories.tsx @@ -195,7 +195,7 @@ export const CategoricalXLabels: Story = { name: "Categorical X Labels", parameters: { // Auto-generated by sync-storybook-zephyr - do not add manually - zephyr: { testCaseId: "" }, + zephyr: { testCaseId: "SW-T5459" }, docs: { description: { story: diff --git a/src/components/charts/InteractiveScatter/InteractiveScatter.stories.tsx b/src/components/charts/InteractiveScatter/InteractiveScatter.stories.tsx index 929c76af..7e840f8d 100644 --- a/src/components/charts/InteractiveScatter/InteractiveScatter.stories.tsx +++ b/src/components/charts/InteractiveScatter/InteractiveScatter.stories.tsx @@ -773,6 +773,9 @@ export const ContinuousColorMapping: Story = { }); }); }, + parameters: { + zephyr: { testCaseId: "SW-T5412" }, + }, }; const EVENT_DATA: ScatterPoint[] = Array.from({ length: 6 }, (_, i) => ({ @@ -858,6 +861,9 @@ export const SelectionEvents: Story = { }); }); }, + parameters: { + zephyr: { testCaseId: "SW-T5413" }, + }, }; /** @@ -917,4 +923,7 @@ export const ThemedTooltip: Story = { }); }); }, + parameters: { + zephyr: { testCaseId: "SW-T5414" }, + }, }; diff --git a/src/components/charts/LineGraph/LineGraph.stories.tsx b/src/components/charts/LineGraph/LineGraph.stories.tsx index 1480b0c7..0efc8a54 100644 --- a/src/components/charts/LineGraph/LineGraph.stories.tsx +++ b/src/components/charts/LineGraph/LineGraph.stories.tsx @@ -322,7 +322,7 @@ export const CategoricalXLabels: Story = { name: "Categorical X Labels", parameters: { // Auto-generated by sync-storybook-zephyr - do not add manually - zephyr: { testCaseId: "" }, + zephyr: { testCaseId: "SW-T5460" }, docs: { description: { story: