Skip to content

Fix arc animation and Angular SSR - #85

Merged
tannerlinsley merged 5 commits into
mainfrom
taren/fix-arc-angular-ssr
Aug 12, 2026
Merged

Fix arc animation and Angular SSR#85
tannerlinsley merged 5 commits into
mainfrom
taren/fix-arc-angular-ssr

Conversation

@tannerlinsley

@tannerlinsleytannerlinsley commented Aug 11, 2026

Copy link
Copy Markdown
Member

Summary

  • keep SVG arc flags discrete while interpolating the remaining path geometry
  • defer Angular DOM mounting to afterNextRender while retaining complete server-rendered SVG
  • repair stale catalog provenance on current main and refresh affected bundle evidence

The Angular mounting approach builds on #57 by @marcjulian and adds SSR regression coverage, documentation, and release integration.

Verification

  • pnpm validate
  • pnpm changeset status

Closes#71
Closes#56

Summary by CodeRabbit

  • Bug Fixes

    • Fixed animated SVG arcs so their flags remain valid and discrete during transitions.
    • Improved Angular server-side rendering to produce complete SVG output without requiring a browser host.
    • Updated Angular chart mounting for more reliable rendering lifecycle behavior.
  • Documentation

    • Updated Angular rendering guidance and comparison information.
  • Tests

    • Added coverage for SVG arc animation and Angular server-rendered charts.

Co-authored-by: Marc Stammerjohann <8985933+marcjulian@users.noreply.github.com>
@coderabbitai

coderabbitaiBot commented Aug 11, 2026

Copy link
Copy Markdown

Review Change Stack

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 4ef719e0-a3f6-4fe8-b444-96a5f2383c6f

📥 Commits

Reviewing files that changed from the base of the PR and between db05020 and c2a02d1.

📒 Files selected for processing (10)
  • API-FRICTION.md
  • benchmarks/bundle-size/universal-baseline.json
  • benchmarks/comparison/bundle-baseline.json
  • benchmarks/conformance/previews/manifest.json
  • docs/comparison.md
  • packages/angular-charts/src/Chart.ssr.test.ts
  • packages/charts-core/docs/comparison.md
  • packages/charts-core/src/reconcile.test.ts
  • packages/charts-core/src/reconcile.ts
  • scripts/measure-bundles.mjs
🚧 Files skipped from review as they are similar to previous changes (8)
  • packages/charts-core/docs/comparison.md
  • benchmarks/conformance/previews/manifest.json
  • benchmarks/bundle-size/universal-baseline.json
  • benchmarks/comparison/bundle-baseline.json
  • packages/angular-charts/src/Chart.ssr.test.ts
  • API-FRICTION.md
  • docs/comparison.md
  • scripts/measure-bundles.mjs

📝 Walkthrough

Walkthrough

The change fixes discrete SVG arc-flag animation, defers Angular adapter mounting until browser rendering, adds Angular SSR coverage, and refreshes release, benchmark, comparison, and conformance evidence.

Changes

Chart Rendering Fixes

Layer / File(s)Summary
Discrete SVG arc flags
packages/charts-core/src/reconcile.ts, packages/charts-core/src/reconcile.test.ts
Arc flags now use target values during path animation. Other numeric path values continue interpolating.
Angular SSR-safe mounting
packages/angular-charts/src/Chart.ts, packages/angular-charts/src/Chart.ssr.test.ts, packages/angular-charts/package.json, scripts/public-callback-contract.mjs, docs/framework/angular/adapter.md, packages/charts-core/docs/framework/angular/adapter.md
Angular mounts the adapter with afterNextRender. SSR tests verify complete SVG output and the configured accessibility label.
Release and evidence refresh
.changeset/calm-arcs-render.md, API-FRICTION.md, benchmarks/..., docs/comparison.md, packages/charts-core/docs/comparison.md, scripts/measure-bundles.mjs
Release notes, findings, bundle budgets, comparison baselines, conformance references, and preview metadata were updated.

Estimated code review effort: 3 (Moderate) | ~25 minutes

Sequence Diagram(s)

sequenceDiagram
participant renderApplication
participant Chart
participant afterNextRender
participant SVGHost
renderApplication->>Chart: instantiate chart host
Chart->>afterNextRender: schedule adapter mount
renderApplication->>SVGHost: render complete SVG during SSR
afterNextRender->>Chart: invoke browser callback
Chart->>SVGHost: mount adapter in browser
Loading

Possibly related PRs

  • TanStack/charts#57: Uses the same Angular lifecycle change from ngAfterViewInit to afterNextRender.
  • TanStack/charts#39: Updates the same comparison bundle baseline and revision metadata.
🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check nameStatusExplanationResolution
Docstring Coverage⚠️ WarningDocstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check nameStatusExplanation
Description Check✅ PassedCheck skipped - CodeRabbit’s high-level summary is enabled.
Title check✅ PassedThe title clearly summarizes the two primary fixes: SVG arc animation and Angular SSR mounting.
Linked Issues check✅ PassedThe changes discretize SVG arc flags and defer Angular mounting with afterNextRender while adding SSR coverage, satisfying issues [#71] and [#56].
Out of Scope Changes check✅ PassedThe documentation, release metadata, catalog provenance, and benchmark updates support the stated fixes and release integration objectives.
✨ 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/fix-arc-angular-ssr

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.

@socket-security

socket-securityBot commented Aug 11, 2026

Copy link
Copy Markdown

Review the following changes in direct dependencies. Learn more about Socket for GitHub.

DiffPackageSupply Chain
Security
VulnerabilityQualityMaintenanceLicense
Added@​angular/​platform-server@​22.0.879100779880

View full report

@nx-cloud

nx-cloudBot commented Aug 11, 2026

Copy link
Copy Markdown

View your CI Pipeline Execution ↗ for commit db05020

CommandStatusDurationResult
nx run charts-workspace:ci-distributed✅ Succeeded4m 54sView ↗
nx run charts-workspace:package-check✅ Succeeded2m 23sView ↗
nx run charts-workspace:benchmark-check✅ Succeeded1m 8sView ↗

☁️ Nx Cloud last updated this comment at 2026-08-12 00:04:02 UTC

@coderabbitaicoderabbitaiBot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Actionable comments posted: 1

🧹 Nitpick comments (1)
packages/angular-charts/src/Chart.ssr.test.ts (1)

46-47: 🎯 Functional Correctness | 🔵 Trivial | ⚡ Quick win

Strengthen the SSR content assertion.

The current assertions prove that an SVG shell and ARIA label exist. They do not prove that the line mark was rendered. Add one stable mark assertion so an empty <svg> cannot satisfy the complete-SVG regression test.

Proposed assertion
 expect(html).toContain('<svg')
+ expect(html).toContain('<path')
expect(html).toContain('aria-label="Server revenue"')
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@packages/angular-charts/src/Chart.ssr.test.ts` around lines 46 - 47,
Strengthen the SSR test assertions in Chart.ssr.test.ts by adding a stable
assertion for the rendered line mark alongside the existing SVG and aria-label
checks. Use a deterministic mark attribute or element produced by the chart so
an empty SVG cannot satisfy the complete-SVG regression test.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@packages/charts-core/src/reconcile.ts`:
- Around line 264-290: Update the path-number extraction flow around
markSvgArcFlags so adjacent SVG arc flags are separated before numeric
placeholders are generated, preserving arc-command context and correct
placeholder positions for inputs such as “00” and “01”. Adjust the relevant
tokenizer/extraction logic and add coverage for both adjacent flag pairs,
ensuring tweened arc geometry remains correct.
---
Nitpick comments:
In `@packages/angular-charts/src/Chart.ssr.test.ts`:
- Around line 46-47: Strengthen the SSR test assertions in Chart.ssr.test.ts by
adding a stable assertion for the rendered line mark alongside the existing SVG
and aria-label checks. Use a deterministic mark attribute or element produced by
the chart so an empty SVG cannot satisfy the complete-SVG regression test.
🪄 Autofix

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 03c9c031-b6f5-4a7c-91f9-9eb91123dd7a

📥 Commits

Reviewing files that changed from the base of the PR and between e2a0823 and db05020.

⛔ Files ignored due to path filters (2)
  • benchmarks/conformance/previews/87-echarts-synchronized-cursors.svg is excluded by !**/*.svg
  • pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml
📒 Files selected for processing (20)
  • .changeset/calm-arcs-render.md
  • API-FRICTION.md
  • benchmarks/bundle-size/README.md
  • benchmarks/bundle-size/universal-baseline.json
  • benchmarks/comparison/bundle-baseline.json
  • benchmarks/conformance/DEFINITION-COVERAGE-AUDIT.md
  • benchmarks/conformance/definition-coverage-roadmap.json
  • benchmarks/conformance/definition-coverage-roadmap.test.ts
  • benchmarks/conformance/previews/manifest.json
  • docs/comparison.md
  • docs/framework/angular/adapter.md
  • packages/angular-charts/package.json
  • packages/angular-charts/src/Chart.ssr.test.ts
  • packages/angular-charts/src/Chart.ts
  • packages/charts-core/docs/comparison.md
  • packages/charts-core/docs/framework/angular/adapter.md
  • packages/charts-core/src/reconcile.test.ts
  • packages/charts-core/src/reconcile.ts
  • scripts/measure-bundles.mjs
  • scripts/public-callback-contract.mjs

Comment threadpackages/charts-core/src/reconcile.ts Outdated
@tannerlinsley
tannerlinsley merged commit 11b37ab into mainAug 12, 2026
18 checks passed
@github-actionsgithub-actionsBot mentioned this pull request Aug 12, 2026
Sign up for freeto 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.

Animated arcs break when an arc flag flips: path d tween interpolates flag digits Angular adapter error calling mount in SSR

1 participant

@tannerlinsley