Skip to content

feat(a2ui): add piechart #2682

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
HuJean merged 1 commit into from
May 21, 2026
+738 −28
Merged

feat(a2ui): add piechart #2682

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions packages/genui/a2ui-playground/lynx-src/a2ui/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import {
LineChart,
List,
Modal,
PieChart,
RadioGroup,
Row,
Slider,
Expand Down Expand Up @@ -41,6 +42,7 @@ import imageManifest from '@lynx-js/a2ui-reactlynx/catalog/Image/catalog.json';
import lineChartManifest from '@lynx-js/a2ui-reactlynx/catalog/LineChart/catalog.json';
import listManifest from '@lynx-js/a2ui-reactlynx/catalog/List/catalog.json';
import modalManifest from '@lynx-js/a2ui-reactlynx/catalog/Modal/catalog.json';
import pieChartManifest from '@lynx-js/a2ui-reactlynx/catalog/PieChart/catalog.json';
import radioGroupManifest from '@lynx-js/a2ui-reactlynx/catalog/RadioGroup/catalog.json';
import rowManifest from '@lynx-js/a2ui-reactlynx/catalog/Row/catalog.json';
import sliderManifest from '@lynx-js/a2ui-reactlynx/catalog/Slider/catalog.json';
Expand Down Expand Up @@ -93,6 +95,7 @@ const ALL_BUILTINS: readonly CatalogInput[] = [
manifestEntry(Icon, iconManifest),
manifestEntry(CheckBox, checkBoxManifest),
manifestEntry(LineChart, lineChartManifest),
manifestEntry(PieChart, pieChartManifest),
manifestEntry(RadioGroup, radioGroupManifest),
manifestEntry(Slider, sliderManifest),
manifestEntry(TextField, textFieldManifest),
Expand Down
64 changes: 64 additions & 0 deletions packages/genui/a2ui-playground/src/catalog/a2ui.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import imageManifest from '@lynx-js/a2ui-reactlynx/catalog/Image/catalog.json';
import lineChartManifest from '@lynx-js/a2ui-reactlynx/catalog/LineChart/catalog.json';
import listManifest from '@lynx-js/a2ui-reactlynx/catalog/List/catalog.json';
import modalManifest from '@lynx-js/a2ui-reactlynx/catalog/Modal/catalog.json';
import pieChartManifest from '@lynx-js/a2ui-reactlynx/catalog/PieChart/catalog.json';
import radioGroupManifest from '@lynx-js/a2ui-reactlynx/catalog/RadioGroup/catalog.json';
import rowManifest from '@lynx-js/a2ui-reactlynx/catalog/Row/catalog.json';
import sliderManifest from '@lynx-js/a2ui-reactlynx/catalog/Slider/catalog.json';
Expand Down Expand Up @@ -619,6 +620,69 @@ export const COMPONENT_CATALOG: ComponentDoc[] = [
openui: [],
},
},
{
name: 'PieChart',
category: 'Chart',
description:
'Renders pie and donut slices with native SVG arcs and a responsive legend.',
props: schemaToProps(pieChartManifest),
usage: {
a2ui: {
id: 'revenue-share',
component: 'PieChart',
variant: 'donut',
title: 'Revenue mix',
subtitle: 'This month',
data: [
{ name: 'Subscriptions', value: 48, color: '#0057d9' },
{ name: 'Services', value: 26, color: '#0a8f8f' },
{ name: 'Licensing', value: 16, color: '#8a5cf6' },
{ name: 'Other', value: 10, color: '#d92d20' },
],
paddingAngle: 2,
},
openui: {},
},
usageExamples: {
a2ui: [
{
label: 'Donut',
value: {
id: 'donut-revenue-share',
component: 'PieChart',
variant: 'donut',
title: 'Revenue mix',
subtitle: 'This month',
data: [
{ name: 'Subscriptions', value: 48, color: '#0057d9' },
{ name: 'Services', value: 26, color: '#0a8f8f' },
{ name: 'Licensing', value: 16, color: '#8a5cf6' },
{ name: 'Other', value: 10, color: '#d92d20' },
],
paddingAngle: 2,
},
},
{
label: 'Flat pie',
value: {
id: 'flat-audience-share',
component: 'PieChart',
variant: 'pie',
title: 'Audience split',
subtitle: 'Active users by region',
data: [
{ name: 'Asia', value: 42, color: '#0057d9' },
{ name: 'Europe', value: 28, color: '#0a8f8f' },
{ name: 'North America', value: 18, color: '#8a5cf6' },
{ name: 'Other', value: 12, color: '#b26a00' },
],
paddingAngle: 3,
},
},
],
openui: [],
},
},
{
name: 'Card',
category: 'Layout',
Expand Down
9 changes: 9 additions & 0 deletions packages/genui/a2ui-playground/src/demos.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import castGrid from './mock/basic/cast-grid.json';
import citywalkList from './mock/basic/citywalk-list.json';
import fridgeSearch from './mock/basic/fridge-search.json';
import hangzhouWeatherTrend from './mock/basic/hangzhou-weather-trend.json';
import pieChartChinaEvShare from './mock/basic/pie-chart-china-ev-share.json';
import recs from './mock/basic/recs.json';
import tripPlanner from './mock/basic/trip-planner.json';
import workoutPlan from './mock/basic/workout-plan.json';
Expand Down Expand Up @@ -132,6 +133,14 @@ export const EXTENDED_STATIC_DEMOS: StaticDemo[] = [
tags: tagsFromMessages(hangzhouWeatherTrend),
messages: hangzhouWeatherTrend,
},
{
id: 'pie-chart-china-ev-share',
title: '2025 China EV Brand Share',
description:
'A CPCA-based donut chart shows the 2025 passenger NEV share for major Chinese EV brands.',
tags: tagsFromMessages(pieChartChinaEvShare),
messages: pieChartChinaEvShare,
},
{
id: 'fridge-search',
title: 'Fridge Search Results',
Expand Down
195 changes: 195 additions & 0 deletions packages/genui/a2ui-playground/src/mock/basic/pie-chart-china-ev-share.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,195 @@
[
{
"createSurface": {
"surfaceId": "default",
"catalogId": "demo-pie-chart-china-ev-share"
}
},
{
"updateComponents": {
"surfaceId": "default",
"components": [
{
"id": "root",
"component": "Column",
"align": "start",
"justify": "start",
"children": ["title", "subtitle", "stageList"]
},
{
"id": "title",
"component": "Text",
"variant": "h2",
"text": "2025 China EV Brand Share"
},
{
"id": "subtitle",
"component": "Text",
"variant": "body",
"text": "Building the chart in stages without overwriting earlier components."
},
{
"id": "stageList",
"component": "Column",
"align": "stretch",
"justify": "start",
"children": []
}
]
}
},

{
"updateComponents": {
"surfaceId": "default",
"components": [
{
"id": "stageList",
"component": "Column",
"align": "stretch",
"justify": "start",
"children": ["stage-1"]
},
{
"id": "stage-1",
"component": "Card",
"child": "stage-1-body"
},
{
"id": "stage-1-body",
"component": "Column",
"align": "stretch",
"justify": "start",
"children": ["stage-1-label", "stage-1-chart"]
},
{
"id": "stage-1-label",
"component": "Text",
"variant": "h4",
"text": "Snapshot 1 · Top 3 brands"
},
{
"id": "stage-1-chart",
"component": "PieChart",
"variant": "donut",
"title": "China EV brand share",
"subtitle": "Top 3 brands plus the rest",
"paddingAngle": 2,
"showPercentages": true,
"data": [
{ "name": "BYD", "value": 27.2, "color": "#0057d9" },
{ "name": "Geely", "value": 12.2, "color": "#0a8f8f" },
{ "name": "Changan", "value": 6.2, "color": "#8a5cf6" },
{ "name": "Other", "value": 54.4, "color": "#64748b" }
]
}
]
}
},

{
"updateComponents": {
"surfaceId": "default",
"components": [
{
"id": "stageList",
"component": "Column",
"align": "stretch",
"justify": "start",
"children": ["stage-1", "stage-2"]
},
{
"id": "stage-2",
"component": "Card",
"child": "stage-2-body"
},
{
"id": "stage-2-body",
"component": "Column",
"align": "stretch",
"justify": "start",
"children": ["stage-2-label", "stage-2-chart"]
},
{
"id": "stage-2-label",
"component": "Text",
"variant": "h4",
"text": "Snapshot 2 · Mid-tier brands added"
},
{
"id": "stage-2-chart",
"component": "PieChart",
"variant": "donut",
"title": "China EV brand share",
"subtitle": "Top 6 brands plus the rest",
"paddingAngle": 2,
"showPercentages": true,
"data": [
{ "name": "BYD", "value": 27.2, "color": "#0057d9" },
{ "name": "Geely", "value": 12.2, "color": "#0a8f8f" },
{ "name": "Changan", "value": 6.2, "color": "#8a5cf6" },
{ "name": "SAIC-GM-Wuling", "value": 6.0, "color": "#d92d20" },
{ "name": "Tesla China", "value": 4.9, "color": "#2d6a4f" },
{ "name": "HIMA", "value": 4.6, "color": "#b26a00" },
{ "name": "Other", "value": 38.9, "color": "#64748b" }
]
}
]
}
},

{
"updateComponents": {
"surfaceId": "default",
"components": [
{
"id": "stageList",
"component": "Column",
"align": "stretch",
"justify": "start",
"children": ["stage-1", "stage-2", "stage-3"]
},
{
"id": "stage-3",
"component": "Card",
"child": "stage-3-body"
},
{
"id": "stage-3-body",
"component": "Column",
"align": "stretch",
"justify": "start",
"children": ["stage-3-label", "stage-3-chart"]
},
{
"id": "stage-3-label",
"component": "Text",
"variant": "h4",
"text": "Snapshot 3 · Final full breakdown"
},
{
"id": "stage-3-chart",
"component": "PieChart",
"variant": "donut",
"title": "China EV brand share",
"subtitle": "2025 passenger NEV retail share",
"paddingAngle": 2,
"showPercentages": true,
"data": [
{ "name": "BYD", "value": 27.2, "color": "#0057d9" },
{ "name": "Geely", "value": 12.2, "color": "#0a8f8f" },
{ "name": "Changan", "value": 6.2, "color": "#8a5cf6" },
{ "name": "SAIC-GM-Wuling", "value": 6.0, "color": "#d92d20" },
{ "name": "Tesla China", "value": 4.9, "color": "#2d6a4f" },
{ "name": "HIMA", "value": 4.6, "color": "#b26a00" },
{ "name": "Chery", "value": 4.1, "color": "#a855f7" },
{ "name": "Leapmotor", "value": 4.1, "color": "#ea580c" },
{ "name": "Seres", "value": 3.3, "color": "#0891b2" },
{ "name": "Xiaomi EV", "value": 3.2, "color": "#111827" },
{ "name": "Other", "value": 24.2, "color": "#64748b" }
]
}
]
}
}
]
9 changes: 9 additions & 0 deletions packages/genui/a2ui/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,10 @@
"types": "./dist/catalog/index.d.ts",
"default": "./dist/catalog/index.js"
},
"./catalog/utils/chart": {
"types": "./dist/catalog/utils/chart.d.ts",
"default": "./dist/catalog/utils/chart.js"
},
"./catalog/Text": {
"types": "./dist/catalog/Text/index.d.ts",
"default": "./dist/catalog/Text/index.js"
Expand Down Expand Up @@ -61,6 +65,11 @@
"default": "./dist/catalog/LineChart/index.js"
},
"./catalog/LineChart/catalog.json": "./dist/catalog/LineChart/catalog.json",
"./catalog/PieChart": {
"types": "./dist/catalog/PieChart/index.d.ts",
"default": "./dist/catalog/PieChart/index.js"
},
"./catalog/PieChart/catalog.json": "./dist/catalog/PieChart/catalog.json",
"./catalog/Modal": {
"types": "./dist/catalog/Modal/index.d.ts",
"default": "./dist/catalog/Modal/index.js"
Expand Down
Loading
Loading