feat(a2ui): add linechart

packages/genui/a2ui-playground/lynx-src/a2ui/App.tsx

@@ -10,6 +10,7 @@ import {
   Divider,
   Icon,
   Image,
+  LineChart,
   List,
   Modal,
   RadioGroup,
@@ -37,6 +38,7 @@ import columnManifest from '@lynx-js/a2ui-reactlynx/catalog/Column/catalog.json'
 import dividerManifest from '@lynx-js/a2ui-reactlynx/catalog/Divider/catalog.json';
 import iconManifest from '@lynx-js/a2ui-reactlynx/catalog/Icon/catalog.json';
 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 radioGroupManifest from '@lynx-js/a2ui-reactlynx/catalog/RadioGroup/catalog.json';
@@ -90,6 +92,7 @@ const ALL_BUILTINS: readonly CatalogInput[] = [
   manifestEntry(Divider, dividerManifest),
   manifestEntry(Icon, iconManifest),
   manifestEntry(CheckBox, checkBoxManifest),
+  manifestEntry(LineChart, lineChartManifest),
   manifestEntry(RadioGroup, radioGroupManifest),
   manifestEntry(Slider, sliderManifest),
   manifestEntry(TextField, textFieldManifest),

packages/genui/a2ui-playground/src/catalog/a2ui.ts

@@ -8,6 +8,7 @@ import columnManifest from '@lynx-js/a2ui-reactlynx/catalog/Column/catalog.json'
 import dividerManifest from '@lynx-js/a2ui-reactlynx/catalog/Divider/catalog.json';
 import iconManifest from '@lynx-js/a2ui-reactlynx/catalog/Icon/catalog.json';
 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 radioGroupManifest from '@lynx-js/a2ui-reactlynx/catalog/RadioGroup/catalog.json';
@@ -31,7 +32,12 @@ export interface ComponentUsageExample {
   value: object | object[];
 }
 
-export type ComponentCategory = 'Display' | 'Layout' | 'Input' | 'Data';
+export type ComponentCategory =
+  | 'Display'
+  | 'Layout'
+  | 'Input'
+  | 'Data'
+  | 'Chart';
 
 export interface ComponentDoc {
   name: string;
@@ -47,6 +53,7 @@ export const CATEGORIES: { id: ComponentCategory; label: string }[] = [
   { id: 'Layout', label: 'Layout' },
   { id: 'Input', label: 'Input' },
   { id: 'Data', label: 'Data' },
+  { id: 'Chart', label: 'Chart' },
 ];
 
 type PropSchema = Record<string, unknown>;
@@ -536,6 +543,82 @@ export const COMPONENT_CATALOG: ComponentDoc[] = [
       openui: [],
     },
   },
+  {
+    name: 'LineChart',
+    category: 'Chart',
+    description:
+      'Plots one or more numeric series over category labels with native SVG rendering.',
+    props: schemaToProps(lineChartManifest),
+    usage: {
+      a2ui: {
+        id: 'sales-chart',
+        component: 'LineChart',
+        labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
+        series: [
+          {
+            name: 'Revenue',
+            values: [120, 180, 160, 220, 260, 240],
+            color: '#0057d9',
+          },
+          {
+            name: 'Orders',
+            values: [80, 92, 104, 118, 126, 140],
+            color: '#0a8f8f',
+          },
+        ],
+        variant: 'natural',
+        xLabel: 'Month',
+        yLabel: 'Performance',
+      },
+      openui: {},
+    },
+    usageExamples: {
+      a2ui: [
+        {
+          label: 'Multi-series',
+          value: {
+            id: 'multi-series-chart',
+            component: 'LineChart',
+            labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
+            series: [
+              {
+                name: 'Revenue',
+                values: [120, 180, 160, 220, 260, 240],
+                color: '#0057d9',
+              },
+              {
+                name: 'Orders',
+                values: [80, 92, 104, 118, 126, 140],
+                color: '#0a8f8f',
+              },
+            ],
+            variant: 'natural',
+            xLabel: 'Month',
+            yLabel: 'Performance',
+          },
+        },
+        {
+          label: 'Stepped',
+          value: {
+            id: 'step-chart',
+            component: 'LineChart',
+            labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
+            series: [
+              {
+                name: 'Traffic',
+                values: [32, 42, 39, 51, 58],
+                color: '#8a5cf6',
+              },
+            ],
+            variant: 'step',
+            xLabel: 'Day',
+            yLabel: 'Traffic',
+          },
+        },
+      ],
+      openui: [],
+    },
+  },
   {
     name: 'Card',
     category: 'Layout',

packages/genui/a2ui-playground/src/demos.ts

@@ -5,6 +5,7 @@ import { A2UI_GALLERY_DEMOS } from './mock/a2ui-gallery/index.js';
 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 recs from './mock/basic/recs.json';
 import tripPlanner from './mock/basic/trip-planner.json';
 import workoutPlan from './mock/basic/workout-plan.json';
@@ -123,6 +124,14 @@ export const EXTENDED_STATIC_DEMOS: StaticDemo[] = [
     tags: tagsFromMessages(citywalkList),
     messages: citywalkList,
   },
+  {
+    id: 'hangzhou-weather-trend',
+    title: 'Hangzhou Weather Trend',
+    description:
+      'Use LineChart to show a week-long temperature trend in Hangzhou.',
+    tags: tagsFromMessages(hangzhouWeatherTrend),
+    messages: hangzhouWeatherTrend,
+  },
   {
     id: 'fridge-search',
     title: 'Fridge Search Results',

packages/genui/a2ui-playground/src/mock/basic/hangzhou-weather-trend.json

@@ -0,0 +1,54 @@
+[
+  {
+    "createSurface": {
+      "surfaceId": "default",
+      "catalogId": "demo-hangzhou-weather-trend"
+    }
+  },
+  {
+    "updateComponents": {
+      "surfaceId": "default",
+      "components": [
+        {
+          "id": "root",
+          "component": "Column",
+          "align": "start",
+          "justify": "start",
+          "children": ["title", "subtitle", "chart"]
+        },
+        {
+          "id": "title",
+          "component": "Text",
+          "variant": "h2",
+          "text": "Hangzhou Weather Trend for the Next 7 Days"
+        },
+        {
+          "id": "subtitle",
+          "component": "Text",
+          "variant": "body",
+          "text": "Temperatures trend upward through the week, with a slight dip on the weekend."
+        },
+        {
+          "id": "chart",
+          "component": "LineChart",
+          "labels": ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
+          "series": [
+            {
+              "name": "High (°C)",
+              "values": [12, 14, 16, 18, 20, 22, 19],
+              "color": "#0057d9"
+            },
+            {
+              "name": "Low (°C)",
+              "values": [6, 7, 8, 10, 11, 13, 12],
+              "color": "#0a8f8f"
+            }
+          ],
+          "variant": "natural",
+          "xLabel": "Day",
+          "yLabel": "Temperature"
+        }
+      ]
+    }
+  }
+]

packages/genui/a2ui/package.json

@@ -56,6 +56,11 @@
       "default": "./dist/catalog/Card/index.js"
     },
     "./catalog/Card/catalog.json": "./dist/catalog/Card/catalog.json",
+    "./catalog/LineChart": {
+      "types": "./dist/catalog/LineChart/index.d.ts",
+      "default": "./dist/catalog/LineChart/index.js"
+    },
+    "./catalog/LineChart/catalog.json": "./dist/catalog/LineChart/catalog.json",
     "./catalog/Modal": {
       "types": "./dist/catalog/Modal/index.d.ts",
       "default": "./dist/catalog/Modal/index.js"