Enhance Charts landing page

[tannerlinsley]

Summary

• lead with stronger multi-axis, hierarchy, and application examples
• keep all 188 catalog examples in a lazy-loaded gallery
• restore the bundle-size comparison using TanStack Charts
• show typed authoring and opt-in SVG/Canvas composition
• tighten the landing-page copy throughout

Verification

• pnpm build
• pnpm test
• pnpm charts:check-landing-svg
• desktop and mobile production preview
• no page overflow, console errors, page errors, or failed app responses

Summary by CodeRabbit

• New Features

  • Added a bundle-size comparison chart to the Charts landing page, with responsive layouts for different screen sizes.
  • Added renderer examples and expanded calls to action for building charts and browsing examples.
  • Refreshed featured catalog examples and expanded the range of showcased chart categories.

• Performance

  • Catalog preview images now load lazily and decode asynchronously.

[coderabbitai]

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: a402b6cb-afa2-4042-983e-549a29f83d85

📥 Commits

Reviewing files that changed from the base of the PR and between c5eb84c and 56f5f40.

📒 Files selected for processing (7)

• scripts/charts-landing/bundle-size-chart.ts
• scripts/generate-charts-landing-svg.ts
• src/components/landing/ChartsCatalogGallery.tsx
• src/components/landing/ChartsLanding.tsx
• src/components/landing/ChartsLandingGraphics.tsx
• src/components/landing/chartsBundleSizeSvg.ts
• tests/charts-landing-ssr.test.ts

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

---

📝 Walkthrough

Walkthrough

The landing page adds bundle-size and renderer showcases, generates responsive bundle-size SVGs, updates catalog hero examples, and extends SSR assertions for catalog fixtures and preview image attributes.

Changes

Landing page showcase

Layer / File(s)	Summary
Bundle-size chart pipeline scripts/charts-landing/bundle-size-chart.ts, scripts/generate-charts-landing-svg.ts	Defines the bundle-size snapshot, renders chart variants, generates SVG outputs, and registers them in the generated module.
Landing graphic integration src/components/landing/chartsBundleSizeSvg.ts, src/components/landing/ChartsLandingGraphics.tsx	Adds full and compact SVG constants and renders them responsively through BundleSizeChart.
Landing page content and renderer example src/components/landing/ChartsLanding.tsx	Adds bundle-size and renderer sections, updates section copy and links, and shows SVG and Canvas renderer choices.
Catalog selection and SSR validation src/components/landing/ChartsCatalogGallery.tsx, tests/charts-landing-ssr.test.ts	Changes the hero catalog cases, expands catalog fixtures, and validates lazy asynchronous preview images.

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

Merge Risk: ⚪ Minimal · up to 56f5f

This PR refreshes the Charts landing page, catalog gallery, generated graphics, and SSR checks without introducing a merge-blocking correctness, security, availability, or deployment risk. No actionable merge-blocking risk remains after normal checks and review.

Sequence Diagram(s)

sequenceDiagram
  participant ChartsLanding
  participant BundleSizeChart
  participant StaticGraphic
  participant SVGGenerator
  ChartsLanding->>BundleSizeChart: render bundle-size section
  BundleSizeChart->>StaticGraphic: display responsive generated SVG
  SVGGenerator->>StaticGraphic: provide full and compact SVG assets

Loading

🚥 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 12 functions across 7 files.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly identifies the main change: enhancements to the Charts landing page. It is concise and related to the changeset.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

• Fix all pre-merge checks with AI

✨ 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/charts-landing-differentiators

---

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

• X
• Mastodon
• Reddit
• LinkedIn

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

[cloudflare-workers-and-pages]

Deploying with    Cloudflare Workers

The latest updates on your project. Learn more about integrating Git with Workers.

Status	Name	Latest Commit	Preview URL	Updated (UTC)
✅ Deployment successful! View logs	tanstack-com	56f5f40	Commit Preview URL Branch Preview URL	Aug 27 2026, 05:54 PM