Skip to content

Add static guide line styles - #148

Merged
tannerlinsley merged 39 commits into
mainfrom
taren/add-guide-line-styles
Sep 10, 2026
Merged

Add static guide line styles#148
tannerlinsley merged 39 commits into
mainfrom
taren/add-guide-line-styles

Conversation

@tannerlinsley

@tannerlinsley tannerlinsley commented Sep 10, 2026

Copy link
Copy Markdown
Member

Adds stroke styling for Cartesian grids and axis baselines while preserving existing boolean behavior and grid defaults. Thick strokes participate in automatic margins and stacked-axis spacing. Facet grids remain independent, and shared outer axes remain validated.

The style contract works across SVG, export, Canvas, motion, and React Native. Canvas now skips zero-width and invalid-width strokes consistently.

The reviewed shared bundle increase is roughly 0.5 KiB gzip, depending on the consumer. A minor changeset is included.

Validation: all 19 validation targets passed, including 1,996 tests across 288 files, package and type checks, bundle policy, comparison evidence, and 188 catalog previews. Hosted comparison and stress checks passed.

Closes #131

sukvvon and others added 26 commits August 8, 2026 13:09
A y scale with `side: 'right'` took its tick-label anchor from the physical
side alone. That anchor reaches the DOM as SVG `text-anchor`, which resolves
against inline base direction, so an RTL container painted the labels leftward
into the plot. The margin pass then read those bounds correctly and reserved
nothing on the right, widening the plot until it ran under its own labels.

Anchor the far side with `end` once the container reads right to left, and
mirror the same relation in the text estimator so a host without a DOM
measurer resolves the identical layout.
The layout fix costs 73 B raw in shared code, which puts the difference-mark
increment 0.02 kB over its ceiling. Gzip falls on most entries.
# Conflicts:
#	benchmarks/conformance/cases/103-bubble-map/tanstack.ts
#	benchmarks/conformance/cases/34-pointer-tooltip/tanstack.ts
#	benchmarks/conformance/cases/83-focus-context-window/view.tsx
#	benchmarks/conformance/cases/86-streaming-window-preservation/view.tsx
#	benchmarks/conformance/cases/88-echarts-free-cursor/controls.ts
#	benchmarks/conformance/cases/91-timeline-playback-scrubber/tanstack.ts
#	benchmarks/conformance/cases/92-editable-event-range/tanstack.ts
@coderabbitai

coderabbitai Bot commented Sep 10, 2026

Copy link
Copy Markdown

Review Change StackReview Change Stack

Warning

Review limit reached

Next included review available in 26 minutes.

Check out review usage here.

View limit details

Limit details: You’ve used all 4 included reviews currently available.

You've used all free OSS reviews for now. Wait for the free limit to reset to keep reviewing this public repository.

Learn how review limits work.

Review configuration:

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Advanced

Run ID: 589d46aa-8e5e-43bf-8408-6648a888410c

📥 Commits

Reviewing files that changed from the base of the PR and between 9a3cf58 and 00469ba.

📒 Files selected for processing (33)
  • API-FRICTION.md
  • benchmarks/bundle-size/README.md
  • benchmarks/bundle-size/universal-baseline.json
  • benchmarks/comparison/bundle-baseline.json
  • benchmarks/conformance/previews/manifest.json
  • docs/comparison.md
  • docs/concepts/layout-axes-and-coordinates.md
  • docs/guides/bundle-size-and-performance.md
  • docs/reference/chart-spec.md
  • docs/reference/scales-guides-and-color.md
  • docs/reference/types.md
  • packages/charts-core/docs/comparison.md
  • packages/charts-core/docs/concepts/layout-axes-and-coordinates.md
  • packages/charts-core/docs/guides/bundle-size-and-performance.md
  • packages/charts-core/docs/reference/chart-spec.md
  • packages/charts-core/docs/reference/scales-guides-and-color.md
  • packages/charts-core/docs/reference/types.md
  • packages/charts-core/src/canvas.test.ts
  • packages/charts-core/src/canvas.ts
  • packages/charts-core/src/cartesian-scales.test.ts
  • packages/charts-core/src/export.test.ts
  • packages/charts-core/src/exports.test.ts
  • packages/charts-core/src/facet.test.ts
  • packages/charts-core/src/facet.ts
  • packages/charts-core/src/guide-layout.ts
  • packages/charts-core/src/index.ts
  • packages/charts-core/src/motion.test.ts
  • packages/charts-core/src/scene.test.ts
  • packages/charts-core/src/scene.ts
  • packages/charts-core/src/types.ts
  • packages/charts-core/src/universal-types.ts
  • packages/react-native-charts/src/SvgScene.test.tsx
  • scripts/measure-bundles.mjs

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Advanced

Run ID: d797c752-a4d8-4708-831c-1b722cf93eb4

📥 Commits

Reviewing files that changed from the base of the PR and between 32e3c73 and 9a3cf58.

📒 Files selected for processing (32)
  • .changeset/styled-static-guides.md
  • API-FRICTION.md
  • benchmarks/bundle-size/README.md
  • benchmarks/bundle-size/universal-baseline.json
  • benchmarks/comparison/bundle-baseline.json
  • benchmarks/conformance/previews/manifest.json
  • docs/comparison.md
  • docs/concepts/layout-axes-and-coordinates.md
  • docs/reference/chart-spec.md
  • docs/reference/scales-guides-and-color.md
  • docs/reference/types.md
  • packages/charts-core/docs/comparison.md
  • packages/charts-core/docs/concepts/layout-axes-and-coordinates.md
  • packages/charts-core/docs/reference/chart-spec.md
  • packages/charts-core/docs/reference/scales-guides-and-color.md
  • packages/charts-core/docs/reference/types.md
  • packages/charts-core/src/canvas.test.ts
  • packages/charts-core/src/canvas.ts
  • packages/charts-core/src/cartesian-scales.test.ts
  • packages/charts-core/src/export.test.ts
  • packages/charts-core/src/exports.test.ts
  • packages/charts-core/src/facet.test.ts
  • packages/charts-core/src/facet.ts
  • packages/charts-core/src/guide-layout.ts
  • packages/charts-core/src/index.ts
  • packages/charts-core/src/motion.test.ts
  • packages/charts-core/src/scene.test.ts
  • packages/charts-core/src/scene.ts
  • packages/charts-core/src/types.ts
  • packages/charts-core/src/universal-types.ts
  • packages/react-native-charts/src/SvgScene.test.tsx
  • scripts/measure-bundles.mjs

Included review availability: Your plan provides up to 4 included reviews per hour; 1 remains after this review.


📝 Walkthrough

Walkthrough

Cartesian grid and axis lines now accept renderer-neutral stroke styles. Scene layout accounts for stroke extents. Canvas, SVG, export, motion, facet, and type-barrel tests cover the behavior. Bundle budgets and release documentation were updated.

Changes

Styled Cartesian guides

Layer / File(s) Summary
Guide style contract and documentation
packages/charts-core/src/types.ts, packages/charts-core/src/index.ts, packages/charts-core/src/universal-types.ts, docs/reference/*, packages/charts-core/docs/reference/*, docs/concepts/*, packages/charts-core/docs/concepts/*, .changeset/*, API-FRICTION.md
Adds ChartGuideLineStyle. W widens grid and axis.line to accept style objects. Documents defaults, validation, and margin behavior.
Guide scene generation and margin calculation
packages/charts-core/src/scene.ts, packages/charts-core/src/guide-layout.ts, packages/charts-core/src/facet.ts
Applies guide styles to scene rules. Accounts for stroke width, line caps, translations, shared-axis offsets, and facet margins.
Renderer behavior and functional validation
packages/charts-core/src/canvas.ts, packages/charts-core/src/*test.ts, packages/react-native-charts/src/SvgScene.test.tsx
Validates Canvas stroke widths. Tests styling, exports, animation, facets, containment, zero-width behavior, and public type alignment.
Bundle measurements and release records
benchmarks/*, docs/comparison.md, packages/charts-core/docs/comparison.md, scripts/measure-bundles.mjs
Updates bundle budgets, recorded measurements, comparison revisions, preview hashes, and release notes.

Estimated code review effort: 4 (Complex) | ~45 minutes

Severity of issue fixed: Medium

Sequence Diagram(s)

sequenceDiagram
  participant ChartOptions
  participant SceneBuilder
  participant GuideLayout
  participant Renderer
  ChartOptions->>SceneBuilder: Provide grid and axis.line styles
  SceneBuilder->>GuideLayout: Measure guide stroke extents
  GuideLayout-->>SceneBuilder: Return resolved margins
  SceneBuilder->>Renderer: Render styled guide rules
Loading

Merge Risk: ⚪ Minimal · up to 9a3cf

Guide styling, layout containment, rendering, exports, facets, motion, and public type exposure are covered without an identified merge-blocking issue.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 32 functions across 16 files. (16 skipped:… Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Linked Issues check ✅ Passed The implementation satisfies issue [#131] by adding renderer-neutral styling for grid lines and axis baselines, including stroke width, dash patterns, line caps, SVG rendering, and export preservation…
Out of Scope Changes check ✅ Passed The documentation, tests, benchmarks, changeset, and generated baseline updates support the guide styling change and its validation. No unrelated code changes are evident.
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title clearly and concisely describes the main change: adding static guide line styles for grid lines and axis baselines.
Full details: Docstring Coverage

Explanation

Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 32 functions across 16 files. (16 skipped: 16 unsupported.)

✨ Finishing Touches 💡 1
📝 Generate docstrings 💡
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch taren/add-guide-line-styles

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

@nx-cloud

nx-cloud Bot commented Sep 10, 2026

Copy link
Copy Markdown

View your CI Pipeline Execution ↗ for commit 00469ba

Command Status Duration Result
nx run charts-workspace:ci-distributed ✅ Succeeded 6m 1s View ↗
nx run charts-workspace:package-check ✅ Succeeded 2m 31s View ↗
nx run charts-workspace:benchmark-check ✅ Succeeded 1m 8s View ↗

☁️ Nx Cloud last updated this comment at 2026-09-10 05:09:26 UTC

@tannerlinsley
tannerlinsley merged commit a9f8591 into main Sep 10, 2026
18 checks passed
@github-actions github-actions Bot mentioned this pull request Sep 10, 2026
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.

Grid and axis guides cannot express stroke treatment (dashed grid, line width) — F-260

4 participants