feat: SW-1891 add xTickText prop for categorical x-axis labels#147
Open
owilliams-tetrascience wants to merge 2 commits into
Open
feat: SW-1891 add xTickText prop for categorical x-axis labels#147owilliams-tetrascience wants to merge 2 commits into
owilliams-tetrascience wants to merge 2 commits into
Conversation
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 <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
owilliams-tetrascience
temporarily deployed
to
artifactory-prod
GitHub Actions
Inactive
owilliams-tetrascience
changed the title
Contributor
There was a problem hiding this comment.
Pull request overview
Adds an optional xTickText?: string[] prop to the Plotly-based AreaGraph, BarGraph, and LineGraph components so consumers can keep numeric x positions while rendering categorical x-axis tick labels (e.g., weekdays).
Changes:
- Added
xTickText?: string[]to AreaGraph/BarGraph/LineGraph props and wired it into Plotlyxaxis.ticktext. - Updated AreaGraph tick positioning logic for categorical labels to use data-derived x positions instead of “nice-step” ticks.
- Added new “Categorical X Labels” Storybook stories (with play assertions on x-axis tick labels) for AreaGraph, BarGraph, and LineGraph.
Reviewed changes
Copilot reviewed 6 out of 6 changed files in this pull request and generated 7 comments.
Show a summary per file
| File | Description |
|---|---|
| src/components/charts/LineGraph/LineGraph.tsx | Adds xTickText prop and uses it for Plotly x-axis tick labels. |
| src/components/charts/LineGraph/LineGraph.stories.tsx | Adds a categorical-label story + play assertions for LineGraph. |
| src/components/charts/BarGraph/BarGraph.tsx | Adds xTickText prop and conditionally sets Plotly ticktext. |
| src/components/charts/BarGraph/BarGraph.stories.tsx | Adds a categorical-label story + play assertions for BarGraph. |
| src/components/charts/AreaGraph/AreaGraph.tsx | Adds xTickText prop; switches categorical tickvals to data-derived x positions. |
| src/components/charts/AreaGraph/AreaGraph.stories.tsx | Adds a categorical-label story + play assertions for AreaGraph. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
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 <noreply@anthropic.com>
owilliams-tetrascience
temporarily deployed
to
artifactory-prod
GitHub Actions
Inactive
Coverage Report
File Coverage
|
||||||||||||||||||||||||||||||||||||||||||||||||||
54321jenn-ts
approved these changes
Jun 23, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Adds an optional
xTickText?: string[]prop to AreaGraph, BarGraph, and LineGraph so consumers can display categorical x-axis labels (days of the week, instrument names, dates, …) instead of raw integer indices.These charts previously accepted only numeric
xvalues and forced the x-axis ticks to those literal numbers (tickmode: "array"+tickvals). Real dashboard tiles — e.g. a "Pipeline runs by status" chart that should show Mon–Sun — rendered0 1 2 3 4 5 6because the consumer had to pre-convert categorical labels to integers.When
xTickTextis provided, the numericxvalues still drive bar/line/area positioning, but the rendered tick labels matchxTickTextin order via Plotly'stickvals+ticktext:Implements SW-1891.
Notes for reviewers
xTickTextis set it switchestickvalsto the actual unique data x-positions. Bar/Line already keyed ticks off the data x-values.parameters.zephyr.testCaseIdempty per repo convention; thesync-storybook-zephyrworkflow will generate the IDs (apply thezephyr_synclabel).Type of Change
Checklist
yarn lintpassesyarn buildpassesyarn test:allpasses (656 storybook + 548 unit)Testing
A new "Categorical X Labels" Storybook story was added to each of AreaGraph, BarGraph, and LineGraph, each with a play-function test asserting the x-axis renders
["Mon" … "Sun"]rather than integer indices.Zephyr test case IDs to be generated via
sync-storybook-zephyr(IDs intentionally left empty on the new stories).Verification
🤖 Generated with Claude Code