feat(a2ui): add linechart by HuJean · Pull Request #2680 · lynx-family/lynx-stack

HuJean · 2026-05-20T11:14:11Z

Summary by CodeRabbit

New Features
- Added LineChart component to the A2UI catalog with configurable data series, axis labels, legend, grid display, and multiple interpolation variants.
- Included a sample weather trend demo showcasing the new LineChart in the playground.

Checklist

Tests updated (or not required).
Documentation updated (or not required).
Changeset added, and when a BREAKING CHANGE occurs, it needs to be clearly marked (or not required).

changeset-bot · 2026-05-20T11:14:16Z

⚠️ No Changeset found

Latest commit: 348ef50

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

codecov · 2026-05-20T11:17:11Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ All tests successful. No failed tests found.

📢 Thoughts on this report? Let us know!

coderabbitai · 2026-05-20T11:17:52Z

📝 Walkthrough

Walkthrough

This PR adds a complete LineChart component to the A2UI catalog. It includes the component implementation with three line variants (linear, natural, step), comprehensive styling, module exports, playground integration with a weather demo, and test coverage.

Changes

LineChart Component Integration

Layer / File(s)	Summary
LineChart component: types, SVG rendering, and output `packages/genui/a2ui/src/catalog/LineChart/index.tsx`	`LineChartSeries` and `LineChartProps` define the public API. SVG path generation supports linear, natural (cubic Bézier), and step variants. `buildSvgMarkup` computes scaling, renders paths with point circles, and optional grid lines. The `LineChart` component resolves props, samples x-axis labels when dense, renders header, scale values, and legend.
LineChart stylesheet and visual layout `packages/genui/a2ui/styles/catalog/LineChart.css`	Full CSS rules cover container layout (flex, border, gradient background), header/title typography, axis/legend/tick label styling with truncation, SVG block sizing with rounded corners and clipping, and legend flex wrapping with circular swatches and label ellipsis.
Package exports and re-exports `packages/genui/a2ui/package.json`, `packages/genui/a2ui/src/catalog/index.ts`, `packages/genui/a2ui/src/index.ts`	`package.json` adds `./catalog/LineChart` export mappings for both module entry and `catalog.json` asset. `catalog/index.ts` and `index.ts` re-export LineChart for public consumption.
Playground catalog registration and metadata `packages/genui/a2ui-playground/src/catalog/a2ui.ts`	Imports `lineChartManifest`, extends `ComponentCategory` type and `CATEGORIES` array to include `'Chart'`, and adds comprehensive `LineChart` entry to `COMPONENT_CATALOG` with description, generated props, and A2UI example payloads.
Playground app component wiring `packages/genui/a2ui-playground/lynx-src/a2ui/App.tsx`	Imports `LineChart` and `lineChartManifest` from a2ui-reactlynx and registers LineChart in the `ALL_BUILTINS` catalog composition.
Demo, test coverage, and documentation examples `packages/genui/a2ui-playground/src/demos.ts`, `packages/genui/a2ui-playground/src/mock/basic/hangzhou-weather-trend.json`, `packages/genui/a2ui/test/catalog.test.ts`, `packages/genui/a2ui/src/catalog/README.md`	Hangzhou weather demo adds `hangzhou-weather-trend` entry to `EXTENDED_STATIC_DEMOS` with mock JSON defining a surface with `LineChart` showing high/low temperatures by day. Test file adds `LineChart` stub and schema manifest, updates composition assertions. README provides all-builtins recipe example with LineChart imports and registration.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

lynx-family/lynx-stack#2618: Adds a different built-in component (Icon) to the same playground catalog wiring infrastructure (ALL_BUILTINS and COMPONENT_CATALOG).
lynx-family/lynx-stack#2649: Updates the same catalog composition points in the playground by registering a different component (Tabs).
lynx-family/lynx-stack#2663: Integrates a different built-in component (Slider) into the same playground catalog registration infrastructure.

Suggested labels

framework:React

Suggested reviewers

PupilTong
Sherry-hue
gaoachao
fzx2666-fz

Poem

🐰 A chart draws lines with colors bright,
natural curves or steps just right,
legends glow and grids align,
the LineChart sings in SVG's design!
Mon through Sun, the trend takes flight. 📈

🚥 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%.	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 and specifically describes the main feature addition: introducing a LineChart component to the a2ui package.
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.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

Create stacked PR
Commit on current branch

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch p/a2ui-linechart

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 and usage tips.}

coderabbitai

Actionable comments posted: 2

🤖 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/genui/a2ui/src/catalog/LineChart/index.tsx`:
- Around line 161-170: The minMax function currently uses raw values and can
produce invalid bounds when entries are NaN/Infinity; update minMax to first
filter values to only Number.isFinite(v) items, then if the filtered array is
empty return the safe default {min: 0, max: 1}, otherwise compute min/max from
the filtered list; apply the same filtering/safe-default fix to the other
similar min/max calculation in the file (the other min/max helper around the
same area) to ensure non-finite series values do not produce broken SVG
coordinates.
- Around line 322-333: The axis tick rendering uses visibleLabelIndices and maps
labels into evenly spaced flex slots, causing ticks to drift from actual x
positions; change the tick layout so each tick is positioned according to its
original data index/relative x-position instead of equal flex slots—use the
original index-to-position mapping (the same scale or compute percent =
index/(dataLength-1)) and apply that as a positioning style on the elements
rendered in the LineChart (the loop using visibleLabelIndices, className
'line-chart-axis-tick') so ticks align with the plotted points; ensure you
reference the same labels and visibleLabelIndices values when computing
positions and handle edge cases like single-point charts.

🪄 Autofix (Beta)

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: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: c66d0ea5-7e9b-46a4-a5c4-76bab2697a04

📥 Commits

Reviewing files that changed from the base of the PR and between e794bbf and 348ef50.

📒 Files selected for processing (11)

packages/genui/a2ui-playground/lynx-src/a2ui/App.tsx
packages/genui/a2ui-playground/src/catalog/a2ui.ts
packages/genui/a2ui-playground/src/demos.ts
packages/genui/a2ui-playground/src/mock/basic/hangzhou-weather-trend.json
packages/genui/a2ui/package.json
packages/genui/a2ui/src/catalog/LineChart/index.tsx
packages/genui/a2ui/src/catalog/README.md
packages/genui/a2ui/src/catalog/index.ts
packages/genui/a2ui/src/index.ts
packages/genui/a2ui/styles/catalog/LineChart.css
packages/genui/a2ui/test/catalog.test.ts

codspeed-hq · 2026-05-20T11:35:38Z

Merging this PR will improve performance by 17.36%

⚠️

Different runtime environments detected

Some benchmarks with significant performance changes were compared across different runtime environments,
which may affect the accuracy of the results.

Open the report in CodSpeed to investigate

⚡ 1 improved benchmark
✅ 80 untouched benchmarks
⏩ 26 skipped benchmarks¹

Performance Changes

	Benchmark	`BASE`	`HEAD`	Efficiency
⚡	`transform 1000 view elements`	47 ms	40 ms	+17.36%

Tip

Curious why this is faster? Comment @codspeedbot explain why this is faster on this PR, or directly use the CodSpeed MCP with your agent.

_{Comparing p/a2ui-linechart (348ef50) with main (e794bbf)}

26 benchmarks were skipped, so the baseline results were used instead. If they were deleted from the codebase, click here and archive them to remove them from the performance reports. ↩

relativeci · 2026-05-20T11:39:54Z

React External

#1625 Bundle Size — 697.99KiB (0%).

348ef50(current) vs e794bbf main#1615(baseline)

Bundle metrics no changes

	Current #1625	Baseline #1615
Initial JS	`0B`	`0B`
Initial CSS	`0B`	`0B`
Cache Invalidation	`0%`	`41.22%`
Chunks	`0`	`0`
Assets	`3`	`3`
Modules	`17`	`17`
Duplicate Modules	`5`	`5`
Duplicate Code	`8.59%`	`8.59%`
Packages	`0`	`0`
Duplicate Packages	`0`	`0`

Bundle size by type no changes

	Current #1625	Baseline #1615
Other	`697.99KiB`	`697.99KiB`

Bundle analysis report Branch p/a2ui-linechart Project dashboard

^{Generated by RelativeCI Documentation Report issue}

relativeci · 2026-05-20T11:39:56Z

React MTF Example

#1643 Bundle Size — 208.74KiB (0%).

348ef50(current) vs e794bbf main#1633(baseline)

Bundle metrics no changes

	Current #1643	Baseline #1633
Initial JS	`0B`	`0B`
Initial CSS	`0B`	`0B`
Cache Invalidation	`0%`	`46.7%`
Chunks	`0`	`0`
Assets	`3`	`3`
Modules	`194`	`194`
Duplicate Modules	`77`	`77`
Duplicate Code	`44.19%`	`44.19%`
Packages	`2`	`2`
Duplicate Packages	`0`	`0`

Bundle size by type no changes

	Current #1643	Baseline #1633
IMG	`111.23KiB`	`111.23KiB`
Other	`97.51KiB`	`97.51KiB`

Bundle analysis report Branch p/a2ui-linechart Project dashboard

^{Generated by RelativeCI Documentation Report issue}

relativeci · 2026-05-20T11:39:56Z

Web Explorer

#10084 Bundle Size — 903.53KiB (0%).

348ef50(current) vs e794bbf main#10074(baseline)

Bundle metrics

1 change

	Current #10084	Baseline #10074
Initial JS	`45.06KiB`	`45.06KiB`
Initial CSS	`2.22KiB`	`2.22KiB`
Cache Invalidation	`0%`	`0%`
Chunks	`9`	`9`
Assets	`11`	`11`
Modules	`231`(`+0.43%`)	`230`
Duplicate Modules	`11`	`11`
Duplicate Code	`27.12%`	`27.12%`
Packages	`10`	`10`
Duplicate Packages	`0`	`0`

Bundle size by type no changes

	Current #10084	Baseline #10074
JS	`499.15KiB`	`499.15KiB`
Other	`402.16KiB`	`402.16KiB`
CSS	`2.22KiB`	`2.22KiB`

Bundle analysis report Branch p/a2ui-linechart Project dashboard

^{Generated by RelativeCI Documentation Report issue}

relativeci · 2026-05-20T11:39:58Z

React Example with Element Template

#779 Bundle Size — 201.17KiB (0%).

348ef50(current) vs e794bbf main#769(baseline)

Bundle metrics no changes

	Current #779	Baseline #769
Initial JS	`0B`	`0B`
Initial CSS	`0B`	`0B`
Cache Invalidation	`0%`	`28.74%`
Chunks	`0`	`0`
Assets	`4`	`4`
Modules	`97`	`97`
Duplicate Modules	`30`	`30`
Duplicate Code	`39.41%`	`39.41%`
Packages	`2`	`2`
Duplicate Packages	`0`	`0`

Bundle size by type no changes

	Current #779	Baseline #769
IMG	`145.76KiB`	`145.76KiB`
Other	`55.42KiB`	`55.42KiB`

Bundle analysis report Branch p/a2ui-linechart Project dashboard

^{Generated by RelativeCI Documentation Report issue}

relativeci · 2026-05-20T11:39:59Z

React Example

#8510 Bundle Size — 237.79KiB (0%).

348ef50(current) vs e794bbf main#8500(baseline)

Bundle metrics no changes

	Current #8510	Baseline #8500
Initial JS	`0B`	`0B`
Initial CSS	`0B`	`0B`
Cache Invalidation	`0%`	`38.69%`
Chunks	`0`	`0`
Assets	`4`	`4`
Modules	`199`	`199`
Duplicate Modules	`80`	`80`
Duplicate Code	`44.69%`	`44.69%`
Packages	`2`	`2`
Duplicate Packages	`0`	`0`

Bundle size by type no changes

	Current #8510	Baseline #8500
IMG	`145.76KiB`	`145.76KiB`
Other	`92.04KiB`	`92.04KiB`

Bundle analysis report Branch p/a2ui-linechart Project dashboard

^{Generated by RelativeCI Documentation Report issue}

HuJean requested review from PupilTong, Sherry-hue, fzx2666-fz and gaoachao as code owners May 20, 2026 11:14

feat(a2ui): add linechart

348ef50

HuJean force-pushed the p/a2ui-linechart branch from e9440c8 to 348ef50 Compare May 20, 2026 11:18

coderabbitai Bot added the framework:React label May 20, 2026

coderabbitai Bot reviewed May 20, 2026

View reviewed changes

Comment thread packages/genui/a2ui/src/catalog/LineChart/index.tsx

Comment thread packages/genui/a2ui/src/catalog/LineChart/index.tsx

HuJean enabled auto-merge (squash) May 20, 2026 11:57

gaoachao approved these changes May 20, 2026

View reviewed changes

HuJean merged commit 4222846 into main May 20, 2026
112 of 117 checks passed

HuJean deleted the p/a2ui-linechart branch May 20, 2026 12:02

coderabbitai Bot mentioned this pull request May 20, 2026

feat(a2ui): add piechart #2682

Merged

3 tasks

Conversation

HuJean commented May 20, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Checklist

Uh oh!

changeset-bot Bot commented May 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

⚠️ No Changeset found

Uh oh!

codecov Bot commented May 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

coderabbitai Bot commented May 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

Possibly related PRs

Suggested labels

Suggested reviewers

Poem

❌ Failed checks (1 warning)

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

codspeed-hq Bot commented May 20, 2026

Merging this PR will improve performance by 17.36%

Performance Changes

Footnotes

Uh oh!

relativeci Bot commented May 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

React External

#1625 Bundle Size — 697.99KiB (0%).

Uh oh!

relativeci Bot commented May 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

React MTF Example

#1643 Bundle Size — 208.74KiB (0%).

Uh oh!

relativeci Bot commented May 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Web Explorer

#10084 Bundle Size — 903.53KiB (0%).

Uh oh!

relativeci Bot commented May 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

React Example with Element Template

#779 Bundle Size — 201.17KiB (0%).

Uh oh!

relativeci Bot commented May 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

React Example

#8510 Bundle Size — 237.79KiB (0%).

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

HuJean commented May 20, 2026 •

edited by coderabbitai Bot

Loading

changeset-bot Bot commented May 20, 2026 •

edited

Loading

codecov Bot commented May 20, 2026 •

edited

Loading

coderabbitai Bot commented May 20, 2026 •

edited

Loading

relativeci Bot commented May 20, 2026 •

edited

Loading

relativeci Bot commented May 20, 2026 •

edited

Loading

relativeci Bot commented May 20, 2026 •

edited

Loading

relativeci Bot commented May 20, 2026 •

edited

Loading

relativeci Bot commented May 20, 2026 •

edited

Loading