feat: Add markdown-like visualization syntax parser

.github/workflows/ci.yml

@@ -43,6 +43,20 @@ jobs:
       - name: Lint
         run: pnpm lint:ts
 
+  unit-test:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [18.x]
+    steps:
+      - uses: actions/checkout@v4
+      - name: Install dependencies
+        uses: ./.github/actions/prepare-install
+        with:
+          node-version: ${{ matrix.node-version }}
+      - name: Run unit tests
+        run: pnpm test
+
   ssr-test:
     runs-on: ubuntu-latest
     if: github.base_ref != 'ai'

__tests__/area.test.ts

@@ -0,0 +1,80 @@
+import { describe, expect, it } from 'vitest';
+import { parse } from '../src/ai/parser';
+
+describe('parse - area chart', () => {
+  it('should parse basic area chart', () => {
+    const result = parse(`
+vis area
+data
+  - time 1月
+    value 23.895
+  - time 2月
+    value 23.695
+  - time 3月
+    value 23.655
+title 1月到3月股票价格的变化
+axisXTitle 月份
+axisYTitle 价格
+    `);
+
+    expect(result).toEqual({
+      type: 'area',
+      data: [
+        { time: '1月', value: 23.895 },
+        { time: '2月', value: 23.695 },
+        { time: '3月', value: 23.655 },
+      ],
+      title: '1月到3月股票价格的变化',
+      axisXTitle: '月份',
+      axisYTitle: '价格',
+    });
+  });
+
+  it('should parse stacked area chart', () => {
+    const result = parse(`
+vis area
+data
+  - time 2019年
+    value 150
+    group 北京
+  - time 2020年
+    value 160
+    group 北京
+  - time 2019年
+    value 100
+    group 广州
+  - time 2020年
+    value 110
+    group 广州
+stack true
+title 城市空气污染指数变化
+    `);
+
+    expect(result.stack).toBe(true);
+    expect(result.data).toEqual([
+      { time: '2019年', value: 150, group: '北京' },
+      { time: '2020年', value: 160, group: '北京' },
+      { time: '2019年', value: 100, group: '广州' },
+      { time: '2020年', value: 110, group: '广州' },
+    ]);
+  });
+
+  it('should parse area chart with numeric time', () => {
+    const result = parse(`
+vis area
+data
+  - time 2015
+    value 7200
+  - time 2016
+    value 3660
+  - time 2017
+    value 4100
+    `);
+
+    expect(result.data).toEqual([
+      { time: 2015, value: 7200 },
+      { time: 2016, value: 3660 },
+      { time: 2017, value: 4100 },
+    ]);
+  });
+});

__tests__/bar.test.ts

@@ -0,0 +1,79 @@
+import { describe, expect, it } from 'vitest';
+import { parse } from '../src/ai/parser';
+
+describe('parse - bar chart', () => {
+  it('should parse basic bar chart', () => {
+    const result = parse(`
+vis bar
+data
+  - category 2015年
+    value 80
+  - category 2016年
+    value 140
+  - category 2017年
+    value 220
+title 海底捞公司外卖收入
+axisXTitle 年份
+axisYTitle 金额（百万元）
+    `);
+
+    expect(result).toEqual({
+      type: 'bar',
+      data: [
+        { category: '2015年', value: 80 },
+        { category: '2016年', value: 140 },
+        { category: '2017年', value: 220 },
+      ],
+      title: '海底捞公司外卖收入',
+      axisXTitle: '年份',
+      axisYTitle: '金额（百万元）',
+    });
+  });
+
+  it('should parse grouped bar chart', () => {
+    const result = parse(`
+vis bar
+data
+  - category 北京
+    value 825.6
+    group 油车
+  - category 北京
+    value 60.2
+    group 新能源汽车
+  - category 上海
+    value 450
+    group 油车
+  - category 上海
+    value 95
+    group 新能源汽车
+group true
+title 油车与新能源汽车售卖量
+    `);
+
+    expect(result.group).toBe(true);
+    expect(result.data).toEqual([
+      { category: '北京', value: 825.6, group: '油车' },
+      { category: '北京', value: 60.2, group: '新能源汽车' },
+      { category: '上海', value: 450, group: '油车' },
+      { category: '上海', value: 95, group: '新能源汽车' },
+    ]);
+  });
+
+  it('should parse stacked bar chart', () => {
+    const result = parse(`
+vis bar
+data
+  - category 北京
+    value 825.6
+    group 油车
+  - category 北京
+    value 60.2
+    group 新能源汽车
+stack true
+title 油车与新能源汽车售卖量
+    `);
+
+    expect(result.stack).toBe(true);
+    expect(result.title).toBe('油车与新能源汽车售卖量');
+  });
+});

__tests__/boxplot.test.ts

@@ -0,0 +1,100 @@
+import { describe, expect, it } from 'vitest';
+import { parse } from '../src/ai/parser';
+
+describe('parse - boxplot chart', () => {
+  it('should parse basic boxplot chart', () => {
+    const result = parse(`
+vis boxplot
+data
+  - category 班级A
+    value 15
+  - category 班级A
+    value 18
+  - category 班级A
+    value 22
+  - category 班级A
+    value 27
+  - category 班级A
+    value 35
+  - category 班级B
+    value 10
+  - category 班级B
+    value 14
+  - category 班级B
+    value 19
+  - category 班级B
+    value 23
+  - category 班级B
+    value 30
+title 成绩分布
+    `);
+
+    expect(result.type).toBe('boxplot');
+    expect(result.title).toBe('成绩分布');
+    expect(result.data).toEqual([
+      { category: '班级A', value: 15 },
+      { category: '班级A', value: 18 },
+      { category: '班级A', value: 22 },
+      { category: '班级A', value: 27 },
+      { category: '班级A', value: 35 },
+      { category: '班级B', value: 10 },
+      { category: '班级B', value: 14 },
+      { category: '班级B', value: 19 },
+      { category: '班级B', value: 23 },
+      { category: '班级B', value: 30 },
+    ]);
+  });
+
+  it('should parse boxplot chart with theme', () => {
+    const result = parse(`
+vis boxplot
+data
+  - category 实验组1
+    value 12
+  - category 实验组1
+    value 15
+  - category 实验组1
+    value 20
+  - category 实验组2
+    value 18
+  - category 实验组2
+    value 22
+  - category 实验组2
+    value 28
+title 实验数据分布
+theme dark
+    `);
+
+    expect(result.type).toBe('boxplot');
+    expect(result.theme).toBe('dark');
+    expect(result.title).toBe('实验数据分布');
+  });
+
+  it('should parse boxplot chart with group field', () => {
+    const result = parse(`
+vis boxplot
+data
+  - category Adelie
+    group MALE
+    value 181
+  - category Adelie
+    group FEMALE
+    value 186
+  - category Adelie
+    group MALE
+    value 190
+  - category Adelie
+    group FEMALE
+    value 181
+title 帕尔默企鹅身高性别差异
+    `);
+
+    expect(result.type).toBe('boxplot');
+    expect(result.data).toEqual([
+      { category: 'Adelie', group: 'MALE', value: 181 },
+      { category: 'Adelie', group: 'FEMALE', value: 186 },
+      { category: 'Adelie', group: 'MALE', value: 190 },
+      { category: 'Adelie', group: 'FEMALE', value: 181 },
+    ]);
+  });
+});

__tests__/column.test.ts

@@ -0,0 +1,69 @@
+import { describe, expect, it } from 'vitest';
+import { parse } from '../src/ai/parser';
+
+describe('parse - column chart', () => {
+  it('should parse basic column chart', () => {
+    const result = parse(`
+vis column
+data
+  - category 2015年
+    value 80
+  - category 2016年
+    value 140
+  - category 2017年
+    value 220
+title 海底捞公司外卖收入
+axisXTitle 年份
+axisYTitle 金额（百万元）
+    `);
+
+    expect(result).toEqual({
+      type: 'column',
+      data: [
+        { category: '2015年', value: 80 },
+        { category: '2016年', value: 140 },
+        { category: '2017年', value: 220 },
+      ],
+      title: '海底捞公司外卖收入',
+      axisXTitle: '年份',
+      axisYTitle: '金额（百万元）',
+    });
+  });
+
+  it('should parse grouped column chart', () => {
+    const result = parse(`
+vis column
+data
+  - category 北京
+    value 825.6
+    group 油车
+  - category 北京
+    value 60.2
+    group 新能源汽车
+group true
+title 油车与新能源汽车售卖量
+    `);
+
+    expect(result.group).toBe(true);
+    expect(result.data).toEqual([
+      { category: '北京', value: 825.6, group: '油车' },
+      { category: '北京', value: 60.2, group: '新能源汽车' },
+    ]);
+  });
+
+  it('should parse stacked column chart', () => {
+    const result = parse(`
+vis column
+data
+  - category 北京
+    value 825.6
+    group 油车
+  - category 北京
+    value 60.2
+    group 新能源汽车
+stack true
+    `);
+
+    expect(result.stack).toBe(true);
+  });
+});