Skip to content

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

Open
owilliams-tetrascience wants to merge 1 commit into
mainfrom
claude/bold-buck-cb30f3
Open

fix: SW-1889 stop chart title defaulting to component name#152
owilliams-tetrascience wants to merge 1 commit into
mainfrom
claude/bold-buck-cb30f3

Conversation

@owilliams-tetrascience

@owilliams-tetrascience owilliams-tetrascience commented Jun 23, 2026

Copy link
Copy Markdown
Collaborator

What & why

Fixes SW-1889.

AreaGraph, BarGraph, LineGraph, and PieChart hard-defaulted their title prop to the literal component name ("Area Graph", "Bar Graph", "Line Graph", "Pie Chart"). Any consumer that omitted title got a 32px placeholder title rendered in production, plus ~60px of reserved top margin — especially destructive on small dashboard tiles.

Changes

  • Default title to undefined in all four chart components.
  • When title is unset, omit the title block entirely — the Plotly layout.title is no longer included (and PieChart's JSX <h2> was already guarded) — and shrink margin.t so no top whitespace is reserved. The two top-margin values are extracted to named TITLE_MARGIN_TOP / NO_TITLE_MARGIN_TOP constants (required to satisfy no-magic-numbers, which flags ternary operands).
  • Added a "No Title" Storybook story per chart, asserting the title block is absent (.gtitle for Plotly charts, .title for PieChart) while the chart still renders.
  • Six existing LineGraph stories relied on the old default and asserted "Line Graph" was present — they now set title: "Line Graph" explicitly so they keep passing (per the acceptance criteria).

Testing

  • yarn typecheck
  • yarn lint ✅ (0 warnings)
  • yarn test ✅ (548 unit tests)
  • yarn test:storybook ✅ (657 play-function tests)

Reviewer notes

  • The four new "No Title" stories intentionally leave parameters.zephyr.testCaseId as "" — apply the zephyr_sync label so the workflow generates and commits the real IDs.

Copilot AI review requested due to automatic review settings June 23, 2026 22:46
@owilliams-tetrascience owilliams-tetrascience requested review from a team as code owners June 23, 2026 22:46
@vercel

vercel Bot commented Jun 23, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
ts-lib-ui-kit-storybook Ready Ready Preview, Comment Jun 24, 2026 1:42pm

Request Review

@owilliams-tetrascience owilliams-tetrascience changed the title fix(charts): stop chart title defaulting to component name (SW-1889) fix: SW-1889 stop chart title defaulting to component name Jun 23, 2026

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR updates several chart components to avoid rendering an unintended “placeholder” title (and associated top whitespace) when consumers omit the title prop, and adds Storybook coverage for the no-title behavior.

Changes:

  • Removed the default title value (component name) for AreaGraph, BarGraph, LineGraph, and PieChart.
  • For Plotly-based charts (AreaGraph, BarGraph, LineGraph), conditionally omit layout.title and reduce layout.margin.t when title is unset via extracted constants.
  • Added “No Title” Storybook stories (with play-function assertions) to ensure the title block is absent while charts still render.

Reviewed changes

Copilot reviewed 8 out of 8 changed files in this pull request and generated no comments.

Show a summary per file
File Description
src/components/charts/AreaGraph/AreaGraph.tsx Makes title optional, omits Plotly title when unset, and reduces top margin when there’s no title.
src/components/charts/AreaGraph/AreaGraph.stories.tsx Adds a “No Title” story asserting the Plotly title group is not rendered.
src/components/charts/BarGraph/BarGraph.tsx Makes title optional, conditionally includes Plotly title, and adjusts margin.t based on title presence.
src/components/charts/BarGraph/BarGraph.stories.tsx Adds a “No Title” story asserting no Plotly title is rendered and the chart still draws.
src/components/charts/LineGraph/LineGraph.tsx Makes title optional, conditionally includes Plotly title, and adjusts margin.t based on title presence.
src/components/charts/LineGraph/LineGraph.stories.tsx Updates stories to set title explicitly where needed and adds a “No Title” story.
src/components/charts/PieChart/PieChart.tsx Removes the default title so the JSX title block won’t render unless a title is provided.
src/components/charts/PieChart/PieChart.stories.tsx Adds a “No Title” story asserting the PieChart title elements are absent.
Comments suppressed due to low confidence (1)

src/components/charts/PieChart/PieChart.tsx:46

  • PR description mentions shrinking the Plotly top margin when title is unset so no top whitespace is reserved, but PieChart still hard-codes layout.margin.t to 40 regardless of title. If the whitespace issue applies to PieChart too, this will leave a fixed 40px gap even when title is omitted.
const PieChart: React.FC<PieChartProps> = ({
  dataSeries,
  width = 400,
  height = 400,
  title,
  textInfo = "percent",
  hole = 0,
  rotation = 0,
}) => {

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

AreaGraph, BarGraph, LineGraph, and PieChart hard-defaulted their
`title` prop to the literal component name ("Area Graph", etc.), so any
consumer that omitted `title` got a 32px placeholder title plus reserved
top margin leaking into production UIs.

- Default `title` to `undefined` in all four charts.
- Omit the Plotly title block (and the JSX title in PieChart) when no
  title is set, and shrink `margin.t` accordingly. Top margins extracted
  to TITLE_MARGIN_TOP / NO_TITLE_MARGIN_TOP constants.
- Add a "No Title" Storybook story per chart asserting no title block
  renders while the chart still draws.
- Six existing LineGraph stories relied on the old default; set their
  title explicitly so they keep asserting "Line Graph".

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@github-actions

Copy link
Copy Markdown

Coverage Report

Status Category Percentage Covered / Total
🟢 Lines 94.75% (🎯 83%)
⬆️ +0.01%
20663 / 21806
🟢 Statements 94.75% (🎯 83%)
⬆️ +0.01%
20663 / 21806
🟢 Functions 93.58% (🎯 74%)
🟰 ±0%
919 / 982
🟢 Branches 88.78% (🎯 81%)
⬆️ +0.04%
3785 / 4263
File Coverage
File Stmts Branches Functions Lines Uncovered Lines
Changed Files
src/components/charts/AreaGraph/AreaGraph.tsx 99.64%
⬆️ +0.02%
82.92%
⬆️ +2.92%
100%
🟰 ±0%
99.64%
⬆️ +0.02%
57
src/components/charts/BarGraph/BarGraph.tsx 99.53%
⬆️ +0.03%
85.71%
⬆️ +2.38%
100%
🟰 ±0%
99.53%
⬆️ +0.03%
116
src/components/charts/LineGraph/LineGraph.tsx 96.99%
⬆️ +0.16%
84.84%
⬆️ +2.09%
100%
🟰 ±0%
96.99%
⬆️ +0.16%
315-321
src/components/charts/PieChart/PieChart.tsx 100%
🟰 ±0%
77.77%
⬆️ +1.30%
100%
🟰 ±0%
100%
🟰 ±0%
Generated in workflow #843 for commit 8a4d7f0 by the Vitest Coverage Report Action

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants