Skip to content

fix: SW-1889 stop chart title defaulting to component name #152

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
owilliams-tetrascience wants to merge 1 commit into
base: main
Choose a base branch
from
Open

fix: SW-1889 stop chart title defaulting to component name #152

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 33 additions & 0 deletions src/components/charts/AreaGraph/AreaGraph.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -183,3 +183,36 @@ export const CustomRange: Story = {
});
},
};

export const NoTitle: Story = {
name: "No Title",
parameters: {
// Auto-generated by sync-storybook-zephyr - do not add manually
zephyr: { testCaseId: "" },
},
args: {
dataSeries: sampleDataSeries,
xTitle: "Columns",
yTitle: "Rows",
width: 1000,
height: 600,
variant: "normal",
},
play: async ({ canvasElement, step }) => {
const canvas = within(canvasElement);

await step("No title block is rendered", async () => {
expect(canvasElement.querySelector(".gtitle")).not.toBeInTheDocument();
expect(canvas.queryByText("Area Graph")).not.toBeInTheDocument();
});

await step("Chart container renders", async () => {
expect(canvasElement.querySelector(".js-plotly-plot")).toBeInTheDocument();
});

await step("Three traces are rendered", async () => {
const traces = canvasElement.querySelectorAll(".scatterlayer .trace");
expect(traces.length).toBe(3);
});
},
};
51 changes: 32 additions & 19 deletions src/components/charts/AreaGraph/AreaGraph.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,10 @@ interface AreaDataSeries {

type AreaGraphVariant = "normal" | "stacked";

/** Top margin reserving room for the 32px title; reduced when no title is set */
const TITLE_MARGIN_TOP = 80;
const NO_TITLE_MARGIN_TOP = 40;

interface AreaGraphProps {
dataSeries: AreaDataSeries[];
width?: number;
Expand All @@ -38,7 +42,7 @@ const AreaGraph: React.FC<AreaGraphProps> = ({
variant = "normal",
xTitle = "Columns",
yTitle = "Rows",
title = "Area Graph",
title,
}) => {
const plotRef = useRef<HTMLDivElement>(null);
const theme = usePlotlyTheme();
Expand Down Expand Up @@ -146,21 +150,24 @@ const AreaGraph: React.FC<AreaGraphProps> = ({
);

const titleOptions = useMemo(
() => ({
text: title,
x: 0.5,
y: 0.95,
xanchor: "center" as const,
yanchor: "top" as const,
font: {
size: 32,
weight: 600,
family: "Inter, sans-serif",
color: theme.textColor,
lineheight: 1.2,
standoff: 30,
},
}),
() =>
title
? {
text: title,
x: 0.5,
y: 0.95,
xanchor: "center" as const,
yanchor: "top" as const,
font: {
size: 32,
weight: 600,
family: "Inter, sans-serif",
color: theme.textColor,
lineheight: 1.2,
standoff: 30,
},
}
: undefined,
[title, theme],
);

Expand Down Expand Up @@ -235,8 +242,14 @@ const AreaGraph: React.FC<AreaGraphProps> = ({
const layout = {
width,
height: height,
title: titleOptions,
margin: { l: 80, r: 40, b: 80, t: 80, pad: 0 },
...(titleOptions ? { title: titleOptions } : {}),
margin: {
l: 80,
r: 40,
b: 80,
t: title ? TITLE_MARGIN_TOP : NO_TITLE_MARGIN_TOP,
pad: 0,
},
paper_bgcolor: theme.paperBg,
plot_bgcolor: theme.plotBg,
font: {
Expand Down Expand Up @@ -316,7 +329,7 @@ const AreaGraph: React.FC<AreaGraphProps> = ({
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, title, titleOptions, tickOptions, xTicks, yTicks, theme, bindTooltip]);

return (
<div className="area-graph-container relative">
Expand Down
30 changes: 30 additions & 0 deletions src/components/charts/BarGraph/BarGraph.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -135,6 +135,36 @@ export const GroupedBars: Story = {
},
};

export const NoTitle: Story = {
name: "No Title",
parameters: {
// Auto-generated by sync-storybook-zephyr - do not add manually
zephyr: { testCaseId: "" },
},
args: {
dataSeries: generateBasicData(),
width: 1000,
height: 600,
},
play: async ({ canvasElement, step }) => {
const canvas = within(canvasElement);

await step("No title block is rendered", async () => {
expect(canvasElement.querySelector(".gtitle")).not.toBeInTheDocument();
expect(canvas.queryByText("Bar Graph")).not.toBeInTheDocument();
});

await step("Chart container renders", async () => {
expect(canvasElement.querySelector(".js-plotly-plot")).toBeInTheDocument();
});

await step("One trace is rendered", async () => {
const traces = canvasElement.querySelectorAll(".barlayer .trace");
expect(traces.length).toBe(1);
});
},
};

export const StackedBars: Story = {
name: "Stacked Bars",
parameters: {
Expand Down
34 changes: 24 additions & 10 deletions src/components/charts/BarGraph/BarGraph.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,10 @@ interface BarDataSeries {

type BarGraphVariant = "group" | "stack" | "overlay";

/** Top margin reserving room for the 32px title; reduced when no title is set */
const TITLE_MARGIN_TOP = 60;
const NO_TITLE_MARGIN_TOP = 30;

interface BarGraphProps {
dataSeries: BarDataSeries[];
width?: number;
Expand All @@ -43,7 +47,7 @@ const BarGraph: React.FC<BarGraphProps> = ({
variant = "group",
xTitle = "Columns",
yTitle = "Rows",
title = "Bar Graph",
title,
barWidth = 24,
}) => {
const plotRef = useRef<HTMLDivElement>(null);
Expand Down Expand Up @@ -153,17 +157,27 @@ const BarGraph: React.FC<BarGraphProps> = ({
}));

const layout = {
title: {
text: title,
font: {
size: 32,
family: "Inter, sans-serif",
color: theme.textColor,
},
},
...(title
? {
title: {
text: title,
font: {
size: 32,
family: "Inter, sans-serif",
color: theme.textColor,
},
},
}
: {}),
width,
height,
margin: { l: 80, r: 30, b: 80, t: 60, pad: 0 },
margin: {
l: 80,
r: 30,
b: 80,
t: title ? TITLE_MARGIN_TOP : NO_TITLE_MARGIN_TOP,
pad: 0,
},
paper_bgcolor: theme.paperBg,
plot_bgcolor: theme.plotBg,
font: {
Expand Down
42 changes: 42 additions & 0 deletions src/components/charts/LineGraph/LineGraph.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -512,6 +512,7 @@ export const AutoRangeLineGraph: Story = {
height: 600,
dataSeries: generateDemoData(),
variant: "lines+markers",
title: "Line Graph",
xTitle: "Columns",
yTitle: "Rows",
},
Expand Down Expand Up @@ -559,6 +560,7 @@ export const WideRangeAutoScaled: Story = {
height: 600,
dataSeries: generateWideRangeData(),
variant: "lines+markers",
title: "Line Graph",
xTitle: "Columns",
yTitle: "Rows",
},
Expand Down Expand Up @@ -605,6 +607,7 @@ export const NarrowRangeAutoScaled: Story = {
height: 600,
dataSeries: generateNarrowRangeData(),
variant: "lines+markers",
title: "Line Graph",
xTitle: "Columns",
yTitle: "Rows",
},
Expand Down Expand Up @@ -662,6 +665,7 @@ export const OnlyXRangeProvided: Story = {
dataSeries: generateDemoData(),
variant: "lines+markers",
xRange: [150, 1050],
title: "Line Graph",
xTitle: "Columns",
yTitle: "Rows",
},
Expand Down Expand Up @@ -710,6 +714,7 @@ export const OnlyYRangeProvided: Story = {
dataSeries: generateDemoData(),
variant: "lines+markers",
yRange: [50, 350],
title: "Line Graph",
xTitle: "Columns",
yTitle: "Rows",
},
Expand Down Expand Up @@ -747,6 +752,7 @@ export const LineGraphStartingFromZero: Story = {
height: 600,
dataSeries: generateDataStartingFromZero(),
variant: "lines+markers",
title: "Line Graph",
xTitle: "Columns",
yTitle: "Rows",
},
Expand Down Expand Up @@ -785,3 +791,39 @@ export const LineGraphStartingFromZero: Story = {
},
},
};

export const NoTitle: Story = {
name: "No Title",
parameters: {
// Auto-generated by sync-storybook-zephyr - do not add manually
zephyr: { testCaseId: "" },
},
args: {
width: 1000,
height: 600,
dataSeries: generateBasicDemoData(),
xTitle: "Columns",
yTitle: "Rows",
},
play: async ({ canvasElement, step }) => {
const canvas = within(canvasElement);

await step("No title block is rendered", async () => {
expect(canvasElement.querySelector(".gtitle")).not.toBeInTheDocument();
expect(canvas.queryByText("Line Graph")).not.toBeInTheDocument();
});

await step("Chart container renders", async () => {
expect(canvasElement.querySelector(".js-plotly-plot")).toBeInTheDocument();
});

await step("6 traces are rendered", async () => {
expect(canvasElement.querySelectorAll(".scatterlayer .trace").length).toBe(6);
});

await step("Axis titles are displayed", async () => {
expect(canvas.getByText("Columns")).toBeInTheDocument();
expect(canvas.getByText("Rows")).toBeInTheDocument();
});
},
};
34 changes: 24 additions & 10 deletions src/components/charts/LineGraph/LineGraph.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -170,6 +170,10 @@ interface LineDataSeries {

type LineGraphVariant = "lines" | "lines+markers" | "lines+markers+error_bars";

/** Top margin reserving room for the 32px title; reduced when no title is set */
const TITLE_MARGIN_TOP = 60;
const NO_TITLE_MARGIN_TOP = 30;

type LineGraphProps = {
dataSeries: LineDataSeries[];
width?: number;
Expand All @@ -191,7 +195,7 @@ const LineGraph: React.FC<LineGraphProps> = ({
variant = "lines",
xTitle = "Columns",
yTitle = "Rows",
title = "Line Graph",
title,
}) => {
const plotRef = useRef<HTMLDivElement>(null);
const theme = usePlotlyTheme();
Expand Down Expand Up @@ -320,17 +324,27 @@ const LineGraph: React.FC<LineGraphProps> = ({
});

const layout = {
title: {
text: title,
font: {
size: 32,
family: "Inter, sans-serif",
color: theme.textColor,
},
},
...(title
? {
title: {
text: title,
font: {
size: 32,
family: "Inter, sans-serif",
color: theme.textColor,
},
},
}
: {}),
width,
height,
margin: { l: 80, r: 30, b: 80, t: 60, pad: 10 },
margin: {
l: 80,
r: 30,
b: 80,
t: title ? TITLE_MARGIN_TOP : NO_TITLE_MARGIN_TOP,
pad: 10,
},
paper_bgcolor: theme.paperBg,
plot_bgcolor: theme.plotBg,
font: {
Expand Down
Loading
Loading