From a718834830e0b53d6e194275f847dd4841243802 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Sun, 1 Feb 2026 11:57:20 +0000 Subject: [PATCH 1/9] Initial plan From ef7d5736502d3654f6a8c44ce05c09dceb9c0b13 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Sun, 1 Feb 2026 12:06:14 +0000 Subject: [PATCH 2/9] feat: add GPTVis syntax parser and integration Co-authored-by: hustcc <7856674+hustcc@users.noreply.github.com> --- .github/workflows/ci.yml | 14 + package.json | 3 + playground/index.html | 10 + playground/syntax-demo.html | 280 ++++++++++ playground/syntax-demo.ts | 101 ++++ src/ai/__tests__/integration.test.ts | 71 +++ src/ai/__tests__/parser.test.ts | 746 +++++++++++++++++++++++++++ src/ai/index.ts | 2 + src/ai/parser.ts | 298 +++++++++++ src/gpt-vis/index.ts | 41 +- src/index.ts | 2 + vitest.config.ts | 9 + 12 files changed, 1573 insertions(+), 4 deletions(-) create mode 100644 playground/syntax-demo.html create mode 100644 playground/syntax-demo.ts create mode 100644 src/ai/__tests__/integration.test.ts create mode 100644 src/ai/__tests__/parser.test.ts create mode 100644 src/ai/index.ts create mode 100644 src/ai/parser.ts create mode 100644 vitest.config.ts diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 75bfc9f2..0deca803 100644 --- a/.github/workflows/ci.yml +++ b/.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' diff --git a/package.json b/package.json index 6426728b..f2042c1a 100644 --- a/package.json +++ b/package.json @@ -42,6 +42,8 @@ "format": "prettier './**/*.{ts,tsx,js,jsx,json,md,css,less}' --write", "lint:ts": "eslint src/**", "lint:ts-fix": "pnpm lint:ts --fix", + "test": "vitest run", + "test:watch": "vitest", "test:size": "pnpm build && limit-size", "changeset": "changeset add", "publish-version": "changeset version", @@ -82,6 +84,7 @@ "ts-node": "^10.9.2", "typescript": "^5.9.3", "typescript-eslint": "^8.46.1", + "vitest": "^4.0.18", "webpack-bundle-analyzer": "^4.10.2" }, "engines": { diff --git a/playground/index.html b/playground/index.html index 79c0a86d..ec0ef092 100644 --- a/playground/index.html +++ b/playground/index.html @@ -155,6 +155,16 @@

Wrapper Feature Demo

New Feature + + +
📝
+

Vis Syntax Demo

+

+ Explore the new markdown-like syntax for chart configurations. + Reduced token usage for LLM outputs with better error tolerance. +

+ New Feature +
diff --git a/playground/syntax-demo.html b/playground/syntax-demo.html new file mode 100644 index 00000000..3fae08f8 --- /dev/null +++ b/playground/syntax-demo.html @@ -0,0 +1,280 @@ + + + + + + GPTVis Syntax Demo - GPT-Vis Playground + + + + + +
+

GPTVis Syntax Demo

+

Render charts using a markdown-like syntax string

+ +
+

About Vis Syntax

+

+ The vis syntax provides a concise, markdown-like format for defining chart configurations. + This reduces token usage for LLM outputs and provides better error tolerance than JSON. +

+

+ Syntax Rules: +

+
    +
  • vis [chartType] - Defines the chart type (required)
    • +
  • data - Starts a data array section
    • +
  • - key value - Array item with key-value pairs
    • +
  • key: value or key value - Top-level key-value pair
    • +
  • style - Starts a style object section
    • +
  • Multiple space-separated values become arrays
    • +
+
+ +

Syntax Examples

+
+
+

Pie Chart with Syntax

+
+
vis pie +data + - category 分类一 + value 27 + - category 分类二 + value 25 + - category 分类三 + value 18 + - category 其他 + value 30 +innerRadius: 0.6
+
+
+
+ +
+

Line Chart with Syntax

+
+
vis line +data + - time 2015年 + value 1700 + - time 2016年 + value 1500 + - time 2017年 + value 1200 + - time 2018年 + value 1000 +title 出生人口变化 +axisXTitle 年份 +axisYTitle 出生人口（万人）
+
+
+
+ +
+

Bar Chart with Syntax

+
+
vis bar +data + - category 2015年 + value 80 + - category 2016年 + value 140 + - category 2017年 + value 220 + - category 2018年 + value 280 +title 外卖收入
+
+
+
+ +
+

Pie with Custom Style

+
+
vis pie +data + - category TypeScript + value 45 + - category JavaScript + value 30 + - category Python + value 15 + - category Other + value 10 +innerRadius: 0.5 +style + palette #3178c6 #f7df1e #3776ab #666666
+
+
+
+
+
+ + + + diff --git a/playground/syntax-demo.ts b/playground/syntax-demo.ts new file mode 100644 index 00000000..3b762374 --- /dev/null +++ b/playground/syntax-demo.ts @@ -0,0 +1,101 @@ +import { GPTVis } from '../src/gpt-vis'; + +// Example 1: Pie Chart with Syntax +const pieSyntax = ` +vis pie +data + - category 分类一 + value 27 + - category 分类二 + value 25 + - category 分类三 + value 18 + - category 其他 + value 30 +innerRadius: 0.6 +`; + +const pieVis = new GPTVis({ + container: document.getElementById('syntax-pie')!, + width: 500, + height: 400, + theme: 'academy', +}); + +pieVis.render(pieSyntax); + +// Example 2: Line Chart with Syntax +const lineSyntax = ` +vis line +data + - time 2015年 + value 1700 + - time 2016年 + value 1500 + - time 2017年 + value 1200 + - time 2018年 + value 1000 +title 出生人口变化 +axisXTitle 年份 +axisYTitle 出生人口（万人） +`; + +const lineVis = new GPTVis({ + container: document.getElementById('syntax-line')!, + width: 500, + height: 400, + theme: 'default', +}); + +lineVis.render(lineSyntax); + +// Example 3: Bar Chart with Syntax +const barSyntax = ` +vis bar +data + - category 2015年 + value 80 + - category 2016年 + value 140 + - category 2017年 + value 220 + - category 2018年 + value 280 +title 外卖收入 +`; + +const barVis = new GPTVis({ + container: document.getElementById('syntax-bar')!, + width: 500, + height: 400, + theme: 'default', +}); + +barVis.render(barSyntax); + +// Example 4: Pie with Custom Style +const pieSyntaxWithStyle = ` +vis pie +data + - category TypeScript + value 45 + - category JavaScript + value 30 + - category Python + value 15 + - category Other + value 10 +innerRadius: 0.5 +style + palette #3178c6 #f7df1e #3776ab #666666 +`; + +const pieStyleVis = new GPTVis({ + container: document.getElementById('syntax-pie-style')!, + width: 500, + height: 400, + theme: 'default', +}); + +pieStyleVis.render(pieSyntaxWithStyle); diff --git a/src/ai/__tests__/integration.test.ts b/src/ai/__tests__/integration.test.ts new file mode 100644 index 00000000..f82d0240 --- /dev/null +++ b/src/ai/__tests__/integration.test.ts @@ -0,0 +1,71 @@ +import { describe, expect, it, vi } from 'vitest'; +import { isVisSyntax, parse } from '../parser'; + +describe('GPTVis syntax integration', () => { + it('should parse pie chart syntax and extract config', () => { + const syntax = ` +vis pie +data + - category 分类一 + value 27 + - category 分类二 + value 25 +innerRadius: 0.6 +`; + + const result = parse(syntax); + expect(result.type).toBe('pie'); + expect(result.innerRadius).toBe(0.6); + expect(result.data).toEqual([ + { category: '分类一', value: 27 }, + { category: '分类二', value: 25 }, + ]); + }); + + it('should detect syntax string correctly', () => { + expect(isVisSyntax('vis pie\ndata')).toBe(true); + expect(isVisSyntax('{ "type": "pie" }')).toBe(false); + expect(isVisSyntax('pie')).toBe(false); + }); + + it('should parse chart type with hyphens', () => { + const syntax = ` +vis word-cloud +data + - word JavaScript + weight 100 + - word TypeScript + weight 90 +`; + + const result = parse(syntax); + expect(result.type).toBe('word-cloud'); + expect(result.data).toEqual([ + { word: 'JavaScript', weight: 100 }, + { word: 'TypeScript', weight: 90 }, + ]); + }); + + it('should parse mind-map type', () => { + const syntax = ` +vis mind-map +data + - name Root +`; + + const result = parse(syntax); + expect(result.type).toBe('mind-map'); + }); + + it('should parse dual-axes type', () => { + const syntax = ` +vis dual-axes +data + - time 2020 + value 100 +`; + + const result = parse(syntax); + expect(result.type).toBe('dual-axes'); + }); +}); diff --git a/src/ai/__tests__/parser.test.ts b/src/ai/__tests__/parser.test.ts new file mode 100644 index 00000000..b1368a43 --- /dev/null +++ b/src/ai/__tests__/parser.test.ts @@ -0,0 +1,746 @@ +import { describe, expect, it } from 'vitest'; +import { isVisSyntax, parse } from '../parser'; + +describe('isVisSyntax', () => { + it('should return true for valid vis syntax', () => { + expect(isVisSyntax('vis pie')).toBe(true); + expect(isVisSyntax(' vis pie')).toBe(true); + expect(isVisSyntax('vis line')).toBe(true); + }); + + it('should return false for invalid syntax', () => { + expect(isVisSyntax('data')).toBe(false); + expect(isVisSyntax('type pie')).toBe(false); + expect(isVisSyntax('')).toBe(false); + expect(isVisSyntax('{ "type": "pie" }')).toBe(false); + }); +}); + +describe('parse - basic functionality', () => { + it('should parse chart type', () => { + const result = parse('vis pie'); + expect(result.type).toBe('pie'); + }); + + it('should parse chart type with extra spaces', () => { + const result = parse('vis pie'); + expect(result.type).toBe('pie'); + }); + + it('should parse top-level key-value pairs with colon', () => { + const result = parse(` +vis pie +innerRadius: 0.6 + `); + expect(result.type).toBe('pie'); + expect(result.innerRadius).toBe(0.6); + }); + + it('should parse top-level key-value pairs without colon', () => { + const result = parse(` +vis pie +innerRadius 0.6 + `); + expect(result.type).toBe('pie'); + expect(result.innerRadius).toBe(0.6); + }); + + it('should parse boolean values', () => { + const result = parse(` +vis bar +group true +stack false + `); + expect(result.group).toBe(true); + expect(result.stack).toBe(false); + }); + + it('should parse string values', () => { + const result = parse(` +vis pie +title Sales Report + `); + expect(result.title).toBe('Sales Report'); + }); +}); + +describe('parse - data arrays', () => { + it('should parse simple data array', () => { + const result = parse(` +vis pie +data + - category Category1 + value 27 + - category Category2 + value 25 + `); + + expect(result.type).toBe('pie'); + expect(result.data).toEqual([ + { category: 'Category1', value: 27 }, + { category: 'Category2', value: 25 }, + ]); + }); + + it('should parse data array with multiple spaces', () => { + const result = parse(` +vis pie +data + - category Category1 + value 27 + - category Category2 + value 25 + `); + + expect(result.data).toEqual([ + { category: 'Category1', value: 27 }, + { category: 'Category2', value: 25 }, + ]); + }); + + it('should handle data with Chinese characters', () => { + const result = parse(` +vis pie +data + - category 分类一 + value 27 + - category 分类二 + value 25 + `); + + expect(result.data).toEqual([ + { category: '分类一', value: 27 }, + { category: '分类二', value: 25 }, + ]); + }); +}); + +describe('parse - style object', () => { + it('should parse style section', () => { + const result = parse(` +vis pie +style + backgroundColor #333 + `); + + expect(result.style).toEqual({ + backgroundColor: '#333', + }); + }); + + it('should parse palette as array', () => { + const result = parse(` +vis pie +style + palette #ff5a5f #1fb6ff #13ce66 + `); + + expect(result.style).toEqual({ + palette: ['#ff5a5f', '#1fb6ff', '#13ce66'], + }); + }); + + it('should parse style with multiple properties', () => { + const result = parse(` +vis pie +style + backgroundColor #333 + palette #ff5a5f #1fb6ff #13ce66 + lineWidth 2 + `); + + expect(result.style).toEqual({ + backgroundColor: '#333', + palette: ['#ff5a5f', '#1fb6ff', '#13ce66'], + lineWidth: 2, + }); + }); +}); + +describe('parse - pie chart', () => { + it('should parse complete pie chart config', () => { + const result = parse(` +vis pie +data + - category 分类一 + value 27 + - category 分类二 + value 25 + - category 分类三 + value 18 + - category 分类四 + value 15 + - category 分类五 + value 10 + - category 其他 + value 5 +innerRadius: 0.6 +style + backgroundColor #333 + palette #ff5a5f #1fb6ff #13ce66 + `); + + expect(result).toEqual({ + type: 'pie', + data: [ + { category: '分类一', value: 27 }, + { category: '分类二', value: 25 }, + { category: '分类三', value: 18 }, + { category: '分类四', value: 15 }, + { category: '分类五', value: 10 }, + { category: '其他', value: 5 }, + ], + innerRadius: 0.6, + style: { + backgroundColor: '#333', + palette: ['#ff5a5f', '#1fb6ff', '#13ce66'], + }, + }); + }); +}); + +describe('parse - line chart', () => { + it('should parse line chart with time series data', () => { + const result = parse(` +vis line +data + - time 2015年 + value 1700 + - time 2016年 + value 1500 + - time 2017年 + value 1200 +title 出生人口变化 +axisXTitle 年份 +axisYTitle 出生人口（万人） + `); + + expect(result).toEqual({ + type: 'line', + data: [ + { time: '2015年', value: 1700 }, + { time: '2016年', value: 1500 }, + { time: '2017年', value: 1200 }, + ], + title: '出生人口变化', + axisXTitle: '年份', + axisYTitle: '出生人口（万人）', + }); + }); + + it('should parse line chart with grouped data', () => { + const result = parse(` +vis line +data + - time 2015年 + value 1700 + group 城市 + - time 2015年 + value 1200 + group 农村 + - time 2016年 + value 1500 + group 城市 + - time 2016年 + value 1100 + group 农村 + `); + + expect(result.data).toEqual([ + { time: '2015年', value: 1700, group: '城市' }, + { time: '2015年', value: 1200, group: '农村' }, + { time: '2016年', value: 1500, group: '城市' }, + { time: '2016年', value: 1100, group: '农村' }, + ]); + }); +}); + +describe('parse - bar chart', () => { + it('should parse bar chart config', () => { + 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 Q1 + value 100 + group 产品A + - category Q1 + value 80 + group 产品B +group true + `); + + expect(result.group).toBe(true); + expect(result.data).toEqual([ + { category: 'Q1', value: 100, group: '产品A' }, + { category: 'Q1', value: 80, group: '产品B' }, + ]); + }); + + it('should parse stacked bar chart', () => { + const result = parse(` +vis bar +data + - category Q1 + value 100 + group 产品A + - category Q1 + value 80 + group 产品B +stack true + `); + + expect(result.stack).toBe(true); + }); +}); + +describe('parse - column chart', () => { + it('should parse column chart config', () => { + const result = parse(` +vis column +data + - category Q1 + value 100 + - category Q2 + value 150 + - category Q3 + value 200 + - category Q4 + value 180 +title 季度销售额 +axisXTitle 季度 +axisYTitle 销售额（万元） + `); + + expect(result).toEqual({ + type: 'column', + data: [ + { category: 'Q1', value: 100 }, + { category: 'Q2', value: 150 }, + { category: 'Q3', value: 200 }, + { category: 'Q4', value: 180 }, + ], + title: '季度销售额', + axisXTitle: '季度', + axisYTitle: '销售额（万元）', + }); + }); +}); + +describe('parse - area chart', () => { + it('should parse area chart config', () => { + const result = parse(` +vis area +data + - time 2015 + value 3 + - time 2016 + value 4 + - time 2017 + value 3.5 + - time 2018 + value 5 +title 趋势图 + `); + + expect(result).toEqual({ + type: 'area', + data: [ + { time: 2015, value: 3 }, + { time: 2016, value: 4 }, + { time: 2017, value: 3.5 }, + { time: 2018, value: 5 }, + ], + title: '趋势图', + }); + }); +}); + +describe('parse - radar chart', () => { + it('should parse radar chart config', () => { + const result = parse(` +vis radar +data + - item 销售 + value 70 + - item 管理 + value 50 + - item 技术 + value 80 + - item 服务 + value 65 + `); + + expect(result.type).toBe('radar'); + expect(result.data).toEqual([ + { item: '销售', value: 70 }, + { item: '管理', value: 50 }, + { item: '技术', value: 80 }, + { item: '服务', value: 65 }, + ]); + }); +}); + +describe('parse - funnel chart', () => { + it('should parse funnel chart config', () => { + const result = parse(` +vis funnel +data + - category 展示 + value 5000 + - category 点击 + value 2000 + - category 访问 + value 1000 + - category 咨询 + value 500 + - category 订单 + value 200 + `); + + expect(result.type).toBe('funnel'); + expect(result.data).toEqual([ + { category: '展示', value: 5000 }, + { category: '点击', value: 2000 }, + { category: '访问', value: 1000 }, + { category: '咨询', value: 500 }, + { category: '订单', value: 200 }, + ]); + }); +}); + +describe('parse - scatter chart', () => { + it('should parse scatter chart config', () => { + const result = parse(` +vis scatter +data + - x 10 + y 20 + - x 15 + y 30 + - x 25 + y 25 + - x 35 + y 40 +axisXTitle X轴 +axisYTitle Y轴 + `); + + expect(result.type).toBe('scatter'); + expect(result.data).toEqual([ + { x: 10, y: 20 }, + { x: 15, y: 30 }, + { x: 25, y: 25 }, + { x: 35, y: 40 }, + ]); + expect(result.axisXTitle).toBe('X轴'); + expect(result.axisYTitle).toBe('Y轴'); + }); +}); + +describe('parse - sankey chart', () => { + it('should parse sankey chart config', () => { + const result = parse(` +vis sankey +data + - source 访问 + target 注册 + value 100 + - source 注册 + target 付费 + value 60 + - source 注册 + target 流失 + value 40 + `); + + expect(result.type).toBe('sankey'); + expect(result.data).toEqual([ + { source: '访问', target: '注册', value: 100 }, + { source: '注册', target: '付费', value: 60 }, + { source: '注册', target: '流失', value: 40 }, + ]); + }); +}); + +describe('parse - treemap chart', () => { + it('should parse treemap chart config', () => { + const result = parse(` +vis treemap +data + - name 分类A + value 100 + - name 分类B + value 80 + - name 分类C + value 60 + `); + + expect(result.type).toBe('treemap'); + expect(result.data).toEqual([ + { name: '分类A', value: 100 }, + { name: '分类B', value: 80 }, + { name: '分类C', value: 60 }, + ]); + }); +}); + +describe('parse - word-cloud chart', () => { + it('should parse word-cloud chart config', () => { + const result = parse(` +vis word-cloud +data + - word JavaScript + weight 100 + - word TypeScript + weight 90 + - word React + weight 85 + `); + + expect(result.type).toBe('word-cloud'); + expect(result.data).toEqual([ + { word: 'JavaScript', weight: 100 }, + { word: 'TypeScript', weight: 90 }, + { word: 'React', weight: 85 }, + ]); + }); +}); + +describe('parse - liquid chart', () => { + it('should parse liquid chart config', () => { + const result = parse(` +vis liquid +percent 0.75 +title 完成进度 + `); + + expect(result).toEqual({ + type: 'liquid', + percent: 0.75, + title: '完成进度', + }); + }); +}); + +describe('parse - waterfall chart', () => { + it('should parse waterfall chart config', () => { + const result = parse(` +vis waterfall +data + - category 起始值 + value 120 + - category 一月 + value 20 + - category 二月 + value -30 + - category 三月 + value 15 + `); + + expect(result.type).toBe('waterfall'); + expect(result.data).toEqual([ + { category: '起始值', value: 120 }, + { category: '一月', value: 20 }, + { category: '二月', value: -30 }, + { category: '三月', value: 15 }, + ]); + }); +}); + +describe('parse - histogram chart', () => { + it('should parse histogram chart config', () => { + const result = parse(` +vis histogram +data + - value 23 + - value 45 + - value 56 + - value 67 + - value 78 +binWidth 10 + `); + + expect(result.type).toBe('histogram'); + expect(result.data).toEqual([{ value: 23 }, { value: 45 }, { value: 56 }, { value: 67 }, { value: 78 }]); + expect(result.binWidth).toBe(10); + }); +}); + +describe('parse - venn chart', () => { + it('should parse venn chart config', () => { + const result = parse(` +vis venn +data + - sets A + value 10 + - sets B + value 8 + - sets A,B + value 3 + `); + + expect(result.type).toBe('venn'); + expect(result.data).toEqual([ + { sets: 'A', value: 10 }, + { sets: 'B', value: 8 }, + { sets: 'A,B', value: 3 }, + ]); + }); +}); + +describe('parse - dual-axes chart', () => { + it('should parse dual-axes chart config', () => { + const result = parse(` +vis dual-axes +data + - time 2020 + value 100 + value2 0.5 + - time 2021 + value 150 + value2 0.6 + `); + + expect(result.type).toBe('dual-axes'); + expect(result.data).toEqual([ + { time: 2020, value: 100, value2: 0.5 }, + { time: 2021, value: 150, value2: 0.6 }, + ]); + }); +}); + +describe('parse - error tolerance', () => { + it('should handle multiple consecutive spaces', () => { + const result = parse(` +vis pie +data + - category Category1 + value 27 + `); + + expect(result.type).toBe('pie'); + expect(result.data).toEqual([{ category: 'Category1', value: 27 }]); + }); + + it('should handle tabs mixed with spaces', () => { + const result = parse(` +vis pie +data + - category Category1 + value 27 + `); + + expect(result.type).toBe('pie'); + expect(result.data).toEqual([{ category: 'Category1', value: 27 }]); + }); + + it('should handle empty lines between sections', () => { + const result = parse(` +vis pie + +data + - category Cat1 + value 10 + + - category Cat2 + value 20 + +innerRadius 0.5 + `); + + expect(result.type).toBe('pie'); + expect(result.data).toEqual([ + { category: 'Cat1', value: 10 }, + { category: 'Cat2', value: 20 }, + ]); + expect(result.innerRadius).toBe(0.5); + }); + + it('should handle trailing whitespace', () => { + const result = parse(` +vis pie +data + - category Cat1 + value 10 + `); + + expect(result.type).toBe('pie'); + expect(result.data).toEqual([{ category: 'Cat1', value: 10 }]); + }); + + it('should handle leading whitespace in entire input', () => { + const result = parse(` + +vis pie +data + - category Cat1 + value 10 + `); + + expect(result.type).toBe('pie'); + }); + + it('should handle mixed colon and space formats', () => { + const result = parse(` +vis pie +innerRadius: 0.6 +title My Chart +theme: academy + `); + + expect(result.innerRadius).toBe(0.6); + expect(result.title).toBe('My Chart'); + expect(result.theme).toBe('academy'); + }); +}); + +describe('parse - theme configuration', () => { + it('should parse theme setting', () => { + const result = parse(` +vis pie +data + - category Cat1 + value 10 +theme academy + `); + + expect(result.theme).toBe('academy'); + }); + + it('should parse dark theme', () => { + const result = parse(` +vis bar +theme dark + `); + + expect(result.theme).toBe('dark'); + }); +}); diff --git a/src/ai/index.ts b/src/ai/index.ts new file mode 100644 index 00000000..ddf45067 --- /dev/null +++ b/src/ai/index.ts @@ -0,0 +1,2 @@ +export { parse, isVisSyntax } from './parser'; +export type { ParsedConfig } from './parser'; diff --git a/src/ai/parser.ts b/src/ai/parser.ts new file mode 100644 index 00000000..e70ee3f0 --- /dev/null +++ b/src/ai/parser.ts @@ -0,0 +1,298 @@ +/** + * GPT-Vis Syntax Parser + * + * Parses a markdown-like syntax for visualization configurations. + * + * Syntax rules: + * - `vis [chartType]` - Defines the chart type (required first line) + * - `data` - Starts a data array section + * - ` - key value` - Array item with key-value pairs + * - `key: value` or `key value` - Top-level key-value pair + * - `style` - Starts a style object section + * - Multiple values separated by spaces become arrays (e.g., `palette #ff5a5f #1fb6ff`) + * + * @example + * ``` + * vis pie + * data + * - category 分类一 + * value 27 + * - category 分类二 + * value 25 + * innerRadius: 0.6 + * style + * backgroundColor #333 + * palette #ff5a5f #1fb6ff #13ce66 + * ``` + */ + +/** + * Parsed chart configuration result + */ +export interface ParsedConfig { + type: string; + [key: string]: unknown; +} + +/** + * Parser state for tracking current context + */ +interface ParserState { + currentSection: string | null; + currentArrayItem: Record | null; + currentArray: Record[]; + result: ParsedConfig; +} + +// Known section names that contain arrays +const ARRAY_SECTIONS = new Set(['data']); + +// Known section names that contain objects +const OBJECT_SECTIONS = new Set(['style']); + +/** + * Try to parse a value as number, boolean, or keep as string + */ +function parseValue(value: string): unknown { + // Trim the value + const trimmed = value.trim(); + + // Empty string + if (trimmed === '') { + return ''; + } + + // Boolean values + if (trimmed === 'true') return true; + if (trimmed === 'false') return false; + + // Numeric values + const num = Number(trimmed); + if (!isNaN(num) && trimmed !== '') { + return num; + } + + return trimmed; +} + +/** + * Parse multiple space-separated values into an array or single value + * Used for style properties like palette where multiple colors are expected + */ +function parseMultipleValues(values: string): unknown { + const trimmed = values.trim(); + + // Split by spaces, but handle the case where we want a single value + const parts = trimmed.split(/\s+/).filter((p) => p.length > 0); + + if (parts.length === 0) { + return ''; + } + + if (parts.length === 1) { + return parseValue(parts[0]); + } + + // Multiple values become an array + return parts.map(parseValue); +} + +/** + * Parse a key-value line (supports both "key: value" and "key value" formats) + */ +function parseKeyValue(line: string): { key: string; value: string } | null { + const trimmed = line.trim(); + + // Try "key: value" format first + const colonMatch = trimmed.match(/^([a-zA-Z_][a-zA-Z0-9_-]*)\s*:\s*(.*)$/); + if (colonMatch) { + return { key: colonMatch[1], value: colonMatch[2] }; + } + + // Try "key value" format (key must be a valid identifier) + const spaceMatch = trimmed.match(/^([a-zA-Z_][a-zA-Z0-9_-]*)\s+(.+)$/); + if (spaceMatch) { + return { key: spaceMatch[1], value: spaceMatch[2] }; + } + + // Single key without value + const singleKey = trimmed.match(/^([a-zA-Z_][a-zA-Z0-9_-]*)$/); + if (singleKey) { + return { key: singleKey[1], value: '' }; + } + + return null; +} + +/** + * Get the indentation level of a line + */ +function getIndentLevel(line: string): number { + const match = line.match(/^(\s*)/); + return match ? match[1].length : 0; +} + +/** + * Check if a line is an array item marker (starts with -) + */ +function isArrayItemLine(line: string): boolean { + return line.trim().startsWith('-'); +} + +/** + * Parse an array item line (removes the leading -) + */ +function parseArrayItemLine(line: string): string { + return line.trim().replace(/^-\s*/, ''); +} + +/** + * Check if a key is a known section name (data, style, etc.) + */ +function isKnownSection(key: string): boolean { + return ARRAY_SECTIONS.has(key) || OBJECT_SECTIONS.has(key); +} + +/** + * Parse the visualization syntax string into a configuration object + */ +export function parse(syntax: string): ParsedConfig { + const lines = syntax.split('\n'); + const state: ParserState = { + currentSection: null, + currentArrayItem: null, + currentArray: [], + result: { type: '' }, + }; + + // Process each line + for (let i = 0; i < lines.length; i++) { + const line = lines[i]; + const trimmedLine = line.trim(); + const indentLevel = getIndentLevel(line); + + // Skip empty lines + if (trimmedLine === '') { + continue; + } + + // Handle "vis [type]" declaration + if (trimmedLine.startsWith('vis ')) { + finishCurrentSection(state); + const chartType = trimmedLine.substring(4).trim(); + state.result.type = chartType; + continue; + } + + // Check for section headers (data, style, etc.) - single word, no indentation + const isSectionHeader = + /^[a-zA-Z_][a-zA-Z0-9_-]*$/.test(trimmedLine) && indentLevel === 0 && isKnownSection(trimmedLine); + + if (isSectionHeader) { + // Finish previous section + finishCurrentSection(state); + + // Start new section + state.currentSection = trimmedLine; + state.currentArray = []; + state.currentArrayItem = null; + continue; + } + + // If we have no indentation and we're in a section, this is a top-level property + // that ends the section + if (indentLevel === 0 && state.currentSection) { + // Finish the current section + finishCurrentSection(state); + + // Parse as top-level key-value pair + const kv = parseKeyValue(trimmedLine); + if (kv) { + state.result[kv.key] = parseValue(kv.value); + } + continue; + } + + // Handle content within sections + if (state.currentSection) { + if (ARRAY_SECTIONS.has(state.currentSection)) { + // Array section (data) + if (isArrayItemLine(trimmedLine)) { + // Finish previous array item + if (state.currentArrayItem !== null) { + state.currentArray.push(state.currentArrayItem); + } + + // Start new array item + state.currentArrayItem = {}; + + // Parse the rest of the line after - + const itemContent = parseArrayItemLine(trimmedLine); + if (itemContent) { + const kv = parseKeyValue(itemContent); + if (kv) { + state.currentArrayItem[kv.key] = parseValue(kv.value); + } + } + } else if (state.currentArrayItem !== null) { + // Continue current array item with additional properties + const kv = parseKeyValue(trimmedLine); + if (kv) { + state.currentArrayItem[kv.key] = parseValue(kv.value); + } + } + } else if (OBJECT_SECTIONS.has(state.currentSection)) { + // Object section (style) + const kv = parseKeyValue(trimmedLine); + if (kv) { + // Initialize section as object if needed + if (!state.result[state.currentSection]) { + state.result[state.currentSection] = {}; + } + const sectionObj = state.result[state.currentSection] as Record; + sectionObj[kv.key] = parseMultipleValues(kv.value); + } + } + } else { + // Top-level key-value pair (not in a section) + const kv = parseKeyValue(trimmedLine); + if (kv) { + state.result[kv.key] = parseValue(kv.value); + } + } + } + + // Finish any remaining section + finishCurrentSection(state); + + return state.result; +} + +/** + * Finish processing the current section + */ +function finishCurrentSection(state: ParserState): void { + if (state.currentSection) { + // Finish last array item + if (state.currentArrayItem !== null) { + state.currentArray.push(state.currentArrayItem); + state.currentArrayItem = null; + } + + // If we have array items, set the section as an array + if (state.currentArray.length > 0) { + state.result[state.currentSection] = state.currentArray; + } + + state.currentSection = null; + state.currentArray = []; + } +} + +/** + * Check if a string is a valid visualization syntax + */ +export function isVisSyntax(input: string): boolean { + const trimmed = input.trim(); + return trimmed.startsWith('vis '); +} diff --git a/src/gpt-vis/index.ts b/src/gpt-vis/index.ts index 50557cd6..b9981fbd 100644 --- a/src/gpt-vis/index.ts +++ b/src/gpt-vis/index.ts @@ -1,3 +1,4 @@ +import { isVisSyntax, parse } from '../ai/parser'; import type { VisualizationOptions } from '../types'; import { createVisWrapper, type WrapperInstance } from '../vis-wrapper'; import type { AreaConfig, AreaInstance } from '../vis/area'; @@ -131,6 +132,7 @@ type ChartInstance = * wrapper: true, // Enable wrapper with tabs and controls (default: false) * }); * + * // Render with type and config object * g.render('pie', { * data: [ * { category: '分类一', value: 27 }, @@ -139,6 +141,17 @@ type ChartInstance = * innerRadius: 0.6, * }); * + * // Or render with syntax string + * g.render(` + * vis pie + * data + * - category 分类一 + * value 27 + * - category 分类二 + * value 25 + * innerRadius: 0.6 + * `); + * * g.destroy(); * ``` */ @@ -191,11 +204,31 @@ export class GPTVis { } /** - * Render a chart based on the provided type and configuration - * @param type - Chart type (e.g., 'pie', 'bar', 'line') - * @param config - Chart configuration (without type field) + * Render a chart based on the provided type and configuration. + * Supports two calling patterns: + * 1. render(type, config) - Traditional API with chart type and config object + * 2. render(syntax) - Syntax string format (vis syntax) + * + * @param typeOrSyntax - Chart type (e.g., 'pie', 'bar', 'line') or syntax string + * @param config - Chart configuration (optional, only when first param is type) + */ + render(typeOrSyntax: string, config?: any): void { + // Check if the first parameter is a syntax string + if (config === undefined && isVisSyntax(typeOrSyntax)) { + const parsed = parse(typeOrSyntax); + const { type, ...chartConfig } = parsed; + this.renderChart(type, chartConfig); + return; + } + + // Traditional API: render(type, config) + this.renderChart(typeOrSyntax, config || {}); + } + + /** + * Internal method to render a chart with type and config */ - render(type: string, config: any): void { + private renderChart(type: string, config: any): void { if (!type) { throw new Error('Chart type is required'); } diff --git a/src/index.ts b/src/index.ts index 2e6a3bf7..730fca39 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,6 +1,8 @@ export { GPTVis } from './gpt-vis'; export type { GPTVisConfig } from './gpt-vis'; export type { VisualizationOptions } from './types'; +export { isVisSyntax, parse } from './ai'; +export type { ParsedConfig } from './ai'; export { Area } from './vis/area'; export type { AreaConfig, AreaDataItem } from './vis/area'; export { Bar } from './vis/bar'; diff --git a/vitest.config.ts b/vitest.config.ts new file mode 100644 index 00000000..214ae2d2 --- /dev/null +++ b/vitest.config.ts @@ -0,0 +1,9 @@ +import { defineConfig } from 'vitest/config'; + +export default defineConfig({ + test: { + include: ['src/**/__tests__/**/*.test.ts', 'src/**/__tests__/**/*.spec.ts'], + globals: true, + environment: 'node', + }, +}); From fd34fe4b593e5fa7e99fb254647f618a8c8f1636 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Sun, 1 Feb 2026 12:08:02 +0000 Subject: [PATCH 3/9] fix: remove unused import in integration test Co-authored-by: hustcc <7856674+hustcc@users.noreply.github.com> --- src/ai/__tests__/integration.test.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/ai/__tests__/integration.test.ts b/src/ai/__tests__/integration.test.ts index f82d0240..13e43eec 100644 --- a/src/ai/__tests__/integration.test.ts +++ b/src/ai/__tests__/integration.test.ts @@ -1,4 +1,4 @@ -import { describe, expect, it, vi } from 'vitest'; +import { describe, expect, it } from 'vitest'; import { isVisSyntax, parse } from '../parser'; describe('GPTVis syntax integration', () => { From 5146bdd7c12c20a1ba7bfce72b199f52d04dcf8f Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Sun, 1 Feb 2026 12:30:50 +0000 Subject: [PATCH 4/9] refactor: reorganize unit tests by chart type with corrected data structures Co-authored-by: hustcc <7856674+hustcc@users.noreply.github.com> --- src/ai/__tests__/area.test.ts | 80 +++++ src/ai/__tests__/bar.test.ts | 79 +++++ src/ai/__tests__/column.test.ts | 69 ++++ src/ai/__tests__/dual-axes.test.ts | 80 +++++ src/ai/__tests__/funnel.test.ts | 69 ++++ src/ai/__tests__/histogram.test.ts | 89 +++++ src/ai/__tests__/integration.test.ts | 71 ---- src/ai/__tests__/line.test.ts | 102 ++++++ src/ai/__tests__/liquid.test.ts | 58 ++++ src/ai/__tests__/parser.test.ts | 480 --------------------------- src/ai/__tests__/pie.test.ts | 68 ++++ src/ai/__tests__/radar.test.ts | 86 +++++ src/ai/__tests__/sankey.test.ts | 83 +++++ src/ai/__tests__/scatter.test.ts | 81 +++++ src/ai/__tests__/treemap.test.ts | 69 ++++ src/ai/__tests__/venn.test.ts | 90 +++++ src/ai/__tests__/waterfall.test.ts | 91 +++++ src/ai/__tests__/word-cloud.test.ts | 80 +++++ src/ai/parser.ts | 6 +- 19 files changed, 1278 insertions(+), 553 deletions(-) create mode 100644 src/ai/__tests__/area.test.ts create mode 100644 src/ai/__tests__/bar.test.ts create mode 100644 src/ai/__tests__/column.test.ts create mode 100644 src/ai/__tests__/dual-axes.test.ts create mode 100644 src/ai/__tests__/funnel.test.ts create mode 100644 src/ai/__tests__/histogram.test.ts delete mode 100644 src/ai/__tests__/integration.test.ts create mode 100644 src/ai/__tests__/line.test.ts create mode 100644 src/ai/__tests__/liquid.test.ts create mode 100644 src/ai/__tests__/pie.test.ts create mode 100644 src/ai/__tests__/radar.test.ts create mode 100644 src/ai/__tests__/sankey.test.ts create mode 100644 src/ai/__tests__/scatter.test.ts create mode 100644 src/ai/__tests__/treemap.test.ts create mode 100644 src/ai/__tests__/venn.test.ts create mode 100644 src/ai/__tests__/waterfall.test.ts create mode 100644 src/ai/__tests__/word-cloud.test.ts diff --git a/src/ai/__tests__/area.test.ts b/src/ai/__tests__/area.test.ts new file mode 100644 index 00000000..943e360a --- /dev/null +++ b/src/ai/__tests__/area.test.ts @@ -0,0 +1,80 @@ +import { describe, expect, it } from 'vitest'; +import { parse } from '../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 }, + ]); + }); +}); diff --git a/src/ai/__tests__/bar.test.ts b/src/ai/__tests__/bar.test.ts new file mode 100644 index 00000000..ab0f454f --- /dev/null +++ b/src/ai/__tests__/bar.test.ts @@ -0,0 +1,79 @@ +import { describe, expect, it } from 'vitest'; +import { parse } from '../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('油车与新能源汽车售卖量'); + }); +}); diff --git a/src/ai/__tests__/column.test.ts b/src/ai/__tests__/column.test.ts new file mode 100644 index 00000000..2d3755be --- /dev/null +++ b/src/ai/__tests__/column.test.ts @@ -0,0 +1,69 @@ +import { describe, expect, it } from 'vitest'; +import { parse } from '../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); + }); +}); diff --git a/src/ai/__tests__/dual-axes.test.ts b/src/ai/__tests__/dual-axes.test.ts new file mode 100644 index 00000000..898ccc22 --- /dev/null +++ b/src/ai/__tests__/dual-axes.test.ts @@ -0,0 +1,80 @@ +import { describe, expect, it } from 'vitest'; +import { parse } from '../parser'; + +describe('parse - dual-axes chart', () => { + it('should parse basic dual-axes chart', () => { + const result = parse(` +vis dual-axes +categories + - value 2018 + - value 2019 + - value 2020 + - value 2021 + - value 2022 +title 2018-2022销售额与利润率 +axisXTitle 年份 + `); + + expect(result.type).toBe('dual-axes'); + expect(result.title).toBe('2018-2022销售额与利润率'); + expect(result.axisXTitle).toBe('年份'); + expect(result.categories).toEqual([ + { value: 2018 }, + { value: 2019 }, + { value: 2020 }, + { value: 2021 }, + { value: 2022 }, + ]); + }); + + it('should parse dual-axes chart with string categories', () => { + const result = parse(` +vis dual-axes +categories + - value Q1 + - value Q2 + - value Q3 + - value Q4 +title 季度数据 + `); + + expect(result.type).toBe('dual-axes'); + expect(result.categories).toEqual([ + { value: 'Q1' }, + { value: 'Q2' }, + { value: 'Q3' }, + { value: 'Q4' }, + ]); + expect(result.title).toBe('季度数据'); + }); + + it('should parse dual-axes chart with series', () => { + const result = parse(` +vis dual-axes +series + - type column + axisYTitle 人数 + - type line + axisYTitle 增长率 +title 五一期间景区人流量 + `); + + expect(result.series).toEqual([ + { type: 'column', axisYTitle: '人数' }, + { type: 'line', axisYTitle: '增长率' }, + ]); + }); + + it('should parse dual-axes chart with theme', () => { + const result = parse(` +vis dual-axes +categories + - value Q1 + - value Q2 + - value Q3 +theme academy + `); + + expect(result.theme).toBe('academy'); + }); +}); diff --git a/src/ai/__tests__/funnel.test.ts b/src/ai/__tests__/funnel.test.ts new file mode 100644 index 00000000..326c6fdc --- /dev/null +++ b/src/ai/__tests__/funnel.test.ts @@ -0,0 +1,69 @@ +import { describe, expect, it } from 'vitest'; +import { parse } from '../parser'; + +describe('parse - funnel chart', () => { + it('should parse basic funnel chart', () => { + const result = parse(` +vis funnel +data + - category 访问 + value 1000 + - category 咨询 + value 600 + - category 下单 + value 300 + - category 成交 + value 120 +title 销售漏斗 + `); + + expect(result.type).toBe('funnel'); + expect(result.data).toEqual([ + { category: '访问', value: 1000 }, + { category: '咨询', value: 600 }, + { category: '下单', value: 300 }, + { category: '成交', value: 120 }, + ]); + expect(result.title).toBe('销售漏斗'); + }); + + it('should parse funnel chart with theme', () => { + const result = parse(` +vis funnel +data + - category 注册 + value 800 + - category 激活 + value 500 + - category 付费 + value 200 +title 用户转化流程 +theme dark + `); + + expect(result.theme).toBe('dark'); + expect(result.title).toBe('用户转化流程'); + }); + + it('should parse funnel chart with custom style', () => { + const result = parse(` +vis funnel +data + - category 报名 + value 1500 + - category 签到 + value 900 + - category 参与 + value 700 +title 活动参与漏斗 +style + palette #FF7F50 #87CEFA #32CD32 + backgroundColor #FFF8DC + `); + + expect(result.style).toEqual({ + palette: ['#FF7F50', '#87CEFA', '#32CD32'], + backgroundColor: '#FFF8DC', + }); + }); +}); diff --git a/src/ai/__tests__/histogram.test.ts b/src/ai/__tests__/histogram.test.ts new file mode 100644 index 00000000..717d6bf6 --- /dev/null +++ b/src/ai/__tests__/histogram.test.ts @@ -0,0 +1,89 @@ +import { describe, expect, it } from 'vitest'; +import { parse } from '../parser'; + +describe('parse - histogram chart', () => { + it('should parse basic histogram chart', () => { + const result = parse(` +vis histogram +data + - value 78 + - value 88 + - value 60 + - value 100 + - value 95 +binNumber 5 +title 成绩分布 + `); + + expect(result.type).toBe('histogram'); + expect(result.data).toEqual([ + { value: 78 }, + { value: 88 }, + { value: 60 }, + { value: 100 }, + { value: 95 }, + ]); + expect(result.binNumber).toBe(5); + expect(result.title).toBe('成绩分布'); + }); + + it('should parse histogram chart with decimal values', () => { + const result = parse(` +vis histogram +data + - value 1.2 + - value 3.4 + - value 3.7 + - value 4.3 + - value 5.2 + - value 5.8 + - value 6.1 +axisXTitle 花瓣大小分布 +axisYTitle 花瓣分布数量 + `); + + expect(result.data).toEqual([ + { value: 1.2 }, + { value: 3.4 }, + { value: 3.7 }, + { value: 4.3 }, + { value: 5.2 }, + { value: 5.8 }, + { value: 6.1 }, + ]); + expect(result.axisXTitle).toBe('花瓣大小分布'); + expect(result.axisYTitle).toBe('花瓣分布数量'); + }); + + it('should parse histogram chart with theme', () => { + const result = parse(` +vis histogram +data + - value 20 + - value 25 + - value 30 + - value 35 +theme academy + `); + + expect(result.theme).toBe('academy'); + }); + + it('should parse histogram chart with style', () => { + const result = parse(` +vis histogram +data + - value 10 + - value 20 + - value 30 +style + backgroundColor #f5f5f5 + palette #5B8FF9 + `); + + expect(result.style).toEqual({ + backgroundColor: '#f5f5f5', + palette: '#5B8FF9', + }); + }); +}); diff --git a/src/ai/__tests__/integration.test.ts b/src/ai/__tests__/integration.test.ts deleted file mode 100644 index 13e43eec..00000000 --- a/src/ai/__tests__/integration.test.ts +++ /dev/null @@ -1,71 +0,0 @@ -import { describe, expect, it } from 'vitest'; -import { isVisSyntax, parse } from '../parser'; - -describe('GPTVis syntax integration', () => { - it('should parse pie chart syntax and extract config', () => { - const syntax = ` -vis pie -data - - category 分类一 - value 27 - - category 分类二 - value 25 -innerRadius: 0.6 -`; - - const result = parse(syntax); - expect(result.type).toBe('pie'); - expect(result.innerRadius).toBe(0.6); - expect(result.data).toEqual([ - { category: '分类一', value: 27 }, - { category: '分类二', value: 25 }, - ]); - }); - - it('should detect syntax string correctly', () => { - expect(isVisSyntax('vis pie\ndata')).toBe(true); - expect(isVisSyntax('{ "type": "pie" }')).toBe(false); - expect(isVisSyntax('pie')).toBe(false); - }); - - it('should parse chart type with hyphens', () => { - const syntax = ` -vis word-cloud -data - - word JavaScript - weight 100 - - word TypeScript - weight 90 -`; - - const result = parse(syntax); - expect(result.type).toBe('word-cloud'); - expect(result.data).toEqual([ - { word: 'JavaScript', weight: 100 }, - { word: 'TypeScript', weight: 90 }, - ]); - }); - - it('should parse mind-map type', () => { - const syntax = ` -vis mind-map -data - - name Root -`; - - const result = parse(syntax); - expect(result.type).toBe('mind-map'); - }); - - it('should parse dual-axes type', () => { - const syntax = ` -vis dual-axes -data - - time 2020 - value 100 -`; - - const result = parse(syntax); - expect(result.type).toBe('dual-axes'); - }); -}); diff --git a/src/ai/__tests__/line.test.ts b/src/ai/__tests__/line.test.ts new file mode 100644 index 00000000..c0f61a4a --- /dev/null +++ b/src/ai/__tests__/line.test.ts @@ -0,0 +1,102 @@ +import { describe, expect, it } from 'vitest'; +import { parse } from '../parser'; + +describe('parse - line chart', () => { + it('should parse basic line chart', () => { + const result = parse(` +vis line +data + - time 2015年 + value 1700 + - time 2016年 + value 1500 + - time 2017年 + value 1200 +title 出生人口变化 +axisXTitle 年份 +axisYTitle 出生人口（万人） + `); + + expect(result).toEqual({ + type: 'line', + data: [ + { time: '2015年', value: 1700 }, + { time: '2016年', value: 1500 }, + { time: '2017年', value: 1200 }, + ], + title: '出生人口变化', + axisXTitle: '年份', + axisYTitle: '出生人口（万人）', + }); + }); + + it('should parse multi-line chart with group field', () => { + const result = parse(` +vis line +data + - time 2015年 + value 1700 + group 出生人口 + - time 2015年 + value 965 + group 死亡人口 + - time 2016年 + value 1500 + group 出生人口 + - time 2016年 + value 846 + group 死亡人口 +title 出生人口与死亡人口变化 + `); + + expect(result.type).toBe('line'); + expect(result.data).toEqual([ + { time: '2015年', value: 1700, group: '出生人口' }, + { time: '2015年', value: 965, group: '死亡人口' }, + { time: '2016年', value: 1500, group: '出生人口' }, + { time: '2016年', value: 846, group: '死亡人口' }, + ]); + }); + + it('should parse line chart with numeric time values', () => { + const result = parse(` +vis line +data + - time 2015 + value 7200 + - time 2016 + value 3660 + - time 2017 + value 4100 +axisXTitle year +axisYTitle industrial + `); + + expect(result.data).toEqual([ + { time: 2015, value: 7200 }, + { time: 2016, value: 3660 }, + { time: 2017, value: 4100 }, + ]); + }); + + it('should parse line chart with style', () => { + const result = parse(` +vis line +data + - time Q1 + value 100 + - time Q2 + value 150 +theme academy +style + lineWidth 3 + palette #5B8FF9 #61DDAA + `); + + expect(result.theme).toBe('academy'); + expect(result.style).toEqual({ + lineWidth: 3, + palette: ['#5B8FF9', '#61DDAA'], + }); + }); +}); diff --git a/src/ai/__tests__/liquid.test.ts b/src/ai/__tests__/liquid.test.ts new file mode 100644 index 00000000..8fbe8b24 --- /dev/null +++ b/src/ai/__tests__/liquid.test.ts @@ -0,0 +1,58 @@ +import { describe, expect, it } from 'vitest'; +import { parse } from '../parser'; + +describe('parse - liquid chart', () => { + it('should parse basic liquid chart', () => { + const result = parse(` +vis liquid +percent 0.75 +title 任务完成度 + `); + + expect(result).toEqual({ + type: 'liquid', + percent: 0.75, + title: '任务完成度', + }); + }); + + it('should parse liquid chart with theme', () => { + const result = parse(` +vis liquid +percent 0.6 +title 资源使用率 +theme dark + `); + + expect(result.theme).toBe('dark'); + expect(result.percent).toBe(0.6); + }); + + it('should parse liquid chart with shape', () => { + const result = parse(` +vis liquid +percent 0.92 +title KPI达成率 +shape triangle + `); + + expect(result.shape).toBe('triangle'); + expect(result.percent).toBe(0.92); + }); + + it('should parse liquid chart with style', () => { + const result = parse(` +vis liquid +percent 0.8 +title 进度 +style + palette #00BFFF + backgroundColor #F0F0F0 + `); + + expect(result.style).toEqual({ + palette: '#00BFFF', + backgroundColor: '#F0F0F0', + }); + }); +}); diff --git a/src/ai/__tests__/parser.test.ts b/src/ai/__tests__/parser.test.ts index b1368a43..bd387bd7 100644 --- a/src/ai/__tests__/parser.test.ts +++ b/src/ai/__tests__/parser.test.ts @@ -157,486 +157,6 @@ style }); }); -describe('parse - pie chart', () => { - it('should parse complete pie chart config', () => { - const result = parse(` -vis pie -data - - category 分类一 - value 27 - - category 分类二 - value 25 - - category 分类三 - value 18 - - category 分类四 - value 15 - - category 分类五 - value 10 - - category 其他 - value 5 -innerRadius: 0.6 -style - backgroundColor #333 - palette #ff5a5f #1fb6ff #13ce66 - `); - - expect(result).toEqual({ - type: 'pie', - data: [ - { category: '分类一', value: 27 }, - { category: '分类二', value: 25 }, - { category: '分类三', value: 18 }, - { category: '分类四', value: 15 }, - { category: '分类五', value: 10 }, - { category: '其他', value: 5 }, - ], - innerRadius: 0.6, - style: { - backgroundColor: '#333', - palette: ['#ff5a5f', '#1fb6ff', '#13ce66'], - }, - }); - }); -}); - -describe('parse - line chart', () => { - it('should parse line chart with time series data', () => { - const result = parse(` -vis line -data - - time 2015年 - value 1700 - - time 2016年 - value 1500 - - time 2017年 - value 1200 -title 出生人口变化 -axisXTitle 年份 -axisYTitle 出生人口（万人） - `); - - expect(result).toEqual({ - type: 'line', - data: [ - { time: '2015年', value: 1700 }, - { time: '2016年', value: 1500 }, - { time: '2017年', value: 1200 }, - ], - title: '出生人口变化', - axisXTitle: '年份', - axisYTitle: '出生人口（万人）', - }); - }); - - it('should parse line chart with grouped data', () => { - const result = parse(` -vis line -data - - time 2015年 - value 1700 - group 城市 - - time 2015年 - value 1200 - group 农村 - - time 2016年 - value 1500 - group 城市 - - time 2016年 - value 1100 - group 农村 - `); - - expect(result.data).toEqual([ - { time: '2015年', value: 1700, group: '城市' }, - { time: '2015年', value: 1200, group: '农村' }, - { time: '2016年', value: 1500, group: '城市' }, - { time: '2016年', value: 1100, group: '农村' }, - ]); - }); -}); - -describe('parse - bar chart', () => { - it('should parse bar chart config', () => { - 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 Q1 - value 100 - group 产品A - - category Q1 - value 80 - group 产品B -group true - `); - - expect(result.group).toBe(true); - expect(result.data).toEqual([ - { category: 'Q1', value: 100, group: '产品A' }, - { category: 'Q1', value: 80, group: '产品B' }, - ]); - }); - - it('should parse stacked bar chart', () => { - const result = parse(` -vis bar -data - - category Q1 - value 100 - group 产品A - - category Q1 - value 80 - group 产品B -stack true - `); - - expect(result.stack).toBe(true); - }); -}); - -describe('parse - column chart', () => { - it('should parse column chart config', () => { - const result = parse(` -vis column -data - - category Q1 - value 100 - - category Q2 - value 150 - - category Q3 - value 200 - - category Q4 - value 180 -title 季度销售额 -axisXTitle 季度 -axisYTitle 销售额（万元） - `); - - expect(result).toEqual({ - type: 'column', - data: [ - { category: 'Q1', value: 100 }, - { category: 'Q2', value: 150 }, - { category: 'Q3', value: 200 }, - { category: 'Q4', value: 180 }, - ], - title: '季度销售额', - axisXTitle: '季度', - axisYTitle: '销售额（万元）', - }); - }); -}); - -describe('parse - area chart', () => { - it('should parse area chart config', () => { - const result = parse(` -vis area -data - - time 2015 - value 3 - - time 2016 - value 4 - - time 2017 - value 3.5 - - time 2018 - value 5 -title 趋势图 - `); - - expect(result).toEqual({ - type: 'area', - data: [ - { time: 2015, value: 3 }, - { time: 2016, value: 4 }, - { time: 2017, value: 3.5 }, - { time: 2018, value: 5 }, - ], - title: '趋势图', - }); - }); -}); - -describe('parse - radar chart', () => { - it('should parse radar chart config', () => { - const result = parse(` -vis radar -data - - item 销售 - value 70 - - item 管理 - value 50 - - item 技术 - value 80 - - item 服务 - value 65 - `); - - expect(result.type).toBe('radar'); - expect(result.data).toEqual([ - { item: '销售', value: 70 }, - { item: '管理', value: 50 }, - { item: '技术', value: 80 }, - { item: '服务', value: 65 }, - ]); - }); -}); - -describe('parse - funnel chart', () => { - it('should parse funnel chart config', () => { - const result = parse(` -vis funnel -data - - category 展示 - value 5000 - - category 点击 - value 2000 - - category 访问 - value 1000 - - category 咨询 - value 500 - - category 订单 - value 200 - `); - - expect(result.type).toBe('funnel'); - expect(result.data).toEqual([ - { category: '展示', value: 5000 }, - { category: '点击', value: 2000 }, - { category: '访问', value: 1000 }, - { category: '咨询', value: 500 }, - { category: '订单', value: 200 }, - ]); - }); -}); - -describe('parse - scatter chart', () => { - it('should parse scatter chart config', () => { - const result = parse(` -vis scatter -data - - x 10 - y 20 - - x 15 - y 30 - - x 25 - y 25 - - x 35 - y 40 -axisXTitle X轴 -axisYTitle Y轴 - `); - - expect(result.type).toBe('scatter'); - expect(result.data).toEqual([ - { x: 10, y: 20 }, - { x: 15, y: 30 }, - { x: 25, y: 25 }, - { x: 35, y: 40 }, - ]); - expect(result.axisXTitle).toBe('X轴'); - expect(result.axisYTitle).toBe('Y轴'); - }); -}); - -describe('parse - sankey chart', () => { - it('should parse sankey chart config', () => { - const result = parse(` -vis sankey -data - - source 访问 - target 注册 - value 100 - - source 注册 - target 付费 - value 60 - - source 注册 - target 流失 - value 40 - `); - - expect(result.type).toBe('sankey'); - expect(result.data).toEqual([ - { source: '访问', target: '注册', value: 100 }, - { source: '注册', target: '付费', value: 60 }, - { source: '注册', target: '流失', value: 40 }, - ]); - }); -}); - -describe('parse - treemap chart', () => { - it('should parse treemap chart config', () => { - const result = parse(` -vis treemap -data - - name 分类A - value 100 - - name 分类B - value 80 - - name 分类C - value 60 - `); - - expect(result.type).toBe('treemap'); - expect(result.data).toEqual([ - { name: '分类A', value: 100 }, - { name: '分类B', value: 80 }, - { name: '分类C', value: 60 }, - ]); - }); -}); - -describe('parse - word-cloud chart', () => { - it('should parse word-cloud chart config', () => { - const result = parse(` -vis word-cloud -data - - word JavaScript - weight 100 - - word TypeScript - weight 90 - - word React - weight 85 - `); - - expect(result.type).toBe('word-cloud'); - expect(result.data).toEqual([ - { word: 'JavaScript', weight: 100 }, - { word: 'TypeScript', weight: 90 }, - { word: 'React', weight: 85 }, - ]); - }); -}); - -describe('parse - liquid chart', () => { - it('should parse liquid chart config', () => { - const result = parse(` -vis liquid -percent 0.75 -title 完成进度 - `); - - expect(result).toEqual({ - type: 'liquid', - percent: 0.75, - title: '完成进度', - }); - }); -}); - -describe('parse - waterfall chart', () => { - it('should parse waterfall chart config', () => { - const result = parse(` -vis waterfall -data - - category 起始值 - value 120 - - category 一月 - value 20 - - category 二月 - value -30 - - category 三月 - value 15 - `); - - expect(result.type).toBe('waterfall'); - expect(result.data).toEqual([ - { category: '起始值', value: 120 }, - { category: '一月', value: 20 }, - { category: '二月', value: -30 }, - { category: '三月', value: 15 }, - ]); - }); -}); - -describe('parse - histogram chart', () => { - it('should parse histogram chart config', () => { - const result = parse(` -vis histogram -data - - value 23 - - value 45 - - value 56 - - value 67 - - value 78 -binWidth 10 - `); - - expect(result.type).toBe('histogram'); - expect(result.data).toEqual([{ value: 23 }, { value: 45 }, { value: 56 }, { value: 67 }, { value: 78 }]); - expect(result.binWidth).toBe(10); - }); -}); - -describe('parse - venn chart', () => { - it('should parse venn chart config', () => { - const result = parse(` -vis venn -data - - sets A - value 10 - - sets B - value 8 - - sets A,B - value 3 - `); - - expect(result.type).toBe('venn'); - expect(result.data).toEqual([ - { sets: 'A', value: 10 }, - { sets: 'B', value: 8 }, - { sets: 'A,B', value: 3 }, - ]); - }); -}); - -describe('parse - dual-axes chart', () => { - it('should parse dual-axes chart config', () => { - const result = parse(` -vis dual-axes -data - - time 2020 - value 100 - value2 0.5 - - time 2021 - value 150 - value2 0.6 - `); - - expect(result.type).toBe('dual-axes'); - expect(result.data).toEqual([ - { time: 2020, value: 100, value2: 0.5 }, - { time: 2021, value: 150, value2: 0.6 }, - ]); - }); -}); - describe('parse - error tolerance', () => { it('should handle multiple consecutive spaces', () => { const result = parse(` diff --git a/src/ai/__tests__/pie.test.ts b/src/ai/__tests__/pie.test.ts new file mode 100644 index 00000000..5758ab7b --- /dev/null +++ b/src/ai/__tests__/pie.test.ts @@ -0,0 +1,68 @@ +import { describe, expect, it } from 'vitest'; +import { parse } from '../parser'; + +describe('parse - pie chart', () => { + it('should parse basic pie chart', () => { + const result = parse(` +vis pie +data + - category 火锅 + value 22 + - category 自助餐 + value 12 + - category 川菜 + value 8 + `); + + expect(result.type).toBe('pie'); + expect(result.data).toEqual([ + { category: '火锅', value: 22 }, + { category: '自助餐', value: 12 }, + { category: '川菜', value: 8 }, + ]); + }); + + it('should parse pie chart with innerRadius (donut)', () => { + const result = parse(` +vis pie +data + - category 城镇人口 + value 63.89 + - category 乡村人口 + value 36.11 +innerRadius 0.6 +title 全国人口居住对比 + `); + + expect(result).toEqual({ + type: 'pie', + data: [ + { category: '城镇人口', value: 63.89 }, + { category: '乡村人口', value: 36.11 }, + ], + innerRadius: 0.6, + title: '全国人口居住对比', + }); + }); + + it('should parse pie chart with theme and style', () => { + const result = parse(` +vis pie +data + - category 分类一 + value 27 + - category 分类二 + value 25 +theme academy +style + backgroundColor #333 + palette #ff5a5f #1fb6ff #13ce66 + `); + + expect(result.theme).toBe('academy'); + expect(result.style).toEqual({ + backgroundColor: '#333', + palette: ['#ff5a5f', '#1fb6ff', '#13ce66'], + }); + }); +}); diff --git a/src/ai/__tests__/radar.test.ts b/src/ai/__tests__/radar.test.ts new file mode 100644 index 00000000..891e4d5a --- /dev/null +++ b/src/ai/__tests__/radar.test.ts @@ -0,0 +1,86 @@ +import { describe, expect, it } from 'vitest'; +import { parse } from '../parser'; + +describe('parse - radar chart', () => { + it('should parse basic radar chart', () => { + const result = parse(` +vis radar +data + - name 沟通能力 + value 2 + - name 协作能力 + value 3 + - name 领导能力 + value 2 + - name 学习能力 + value 5 + - name 创新能力 + value 6 + - name 技术能力 + value 9 + `); + + expect(result.type).toBe('radar'); + expect(result.data).toEqual([ + { name: '沟通能力', value: 2 }, + { name: '协作能力', value: 3 }, + { name: '领导能力', value: 2 }, + { name: '学习能力', value: 5 }, + { name: '创新能力', value: 6 }, + { name: '技术能力', value: 9 }, + ]); + }); + + it('should parse grouped radar chart', () => { + const result = parse(` +vis radar +data + - name 语文 + value 95 + group 一班 + - name 数学 + value 96 + group 一班 + - name 外语 + value 85 + group 一班 + - name 语文 + value 75 + group 二班 + - name 数学 + value 93 + group 二班 + - name 外语 + value 66 + group 二班 + `); + + expect(result.type).toBe('radar'); + expect(result.data).toEqual([ + { name: '语文', value: 95, group: '一班' }, + { name: '数学', value: 96, group: '一班' }, + { name: '外语', value: 85, group: '一班' }, + { name: '语文', value: 75, group: '二班' }, + { name: '数学', value: 93, group: '二班' }, + { name: '外语', value: 66, group: '二班' }, + ]); + }); + + it('should parse radar chart with title and theme', () => { + const result = parse(` +vis radar +data + - name Vitamin C + value 7 + - name Fiber + value 6 + - name Sugar + value 5 +title 营养成分分析 +theme academy + `); + + expect(result.title).toBe('营养成分分析'); + expect(result.theme).toBe('academy'); + }); +}); diff --git a/src/ai/__tests__/sankey.test.ts b/src/ai/__tests__/sankey.test.ts new file mode 100644 index 00000000..dba7d37f --- /dev/null +++ b/src/ai/__tests__/sankey.test.ts @@ -0,0 +1,83 @@ +import { describe, expect, it } from 'vitest'; +import { parse } from '../parser'; + +describe('parse - sankey chart', () => { + it('should parse basic sankey chart', () => { + const result = parse(` +vis sankey +data + - source 煤炭 + target 发电厂 + value 120 + - source 天然气 + target 发电厂 + value 80 + - source 发电厂 + target 工业 + value 100 + - source 发电厂 + target 居民 + value 60 + - source 发电厂 + target 商业 + value 40 +nodeAlign justify +title 能源流动关系 + `); + + expect(result.type).toBe('sankey'); + expect(result.data).toEqual([ + { source: '煤炭', target: '发电厂', value: 120 }, + { source: '天然气', target: '发电厂', value: 80 }, + { source: '发电厂', target: '工业', value: 100 }, + { source: '发电厂', target: '居民', value: 60 }, + { source: '发电厂', target: '商业', value: 40 }, + ]); + expect(result.nodeAlign).toBe('justify'); + expect(result.title).toBe('能源流动关系'); + }); + + it('should parse sankey chart with theme', () => { + const result = parse(` +vis sankey +data + - source 投资人 + target 创业公司 + value 200 + - source 创业公司 + target 市场营销 + value 80 + - source 创业公司 + target 研发 + value 120 +nodeAlign center +title 资金流转路径 +theme dark + `); + + expect(result.theme).toBe('dark'); + expect(result.nodeAlign).toBe('center'); + }); + + it('should parse sankey chart with custom style', () => { + const result = parse(` +vis sankey +data + - source 首页 + target 产品页 + value 300 + - source 产品页 + target 购物车 + value 150 +nodeAlign left +style + palette #5B8FF9 #61DDAA #65789B #F6BD16 #7262FD + backgroundColor #f0f2f5 + `); + + expect(result.style).toEqual({ + palette: ['#5B8FF9', '#61DDAA', '#65789B', '#F6BD16', '#7262FD'], + backgroundColor: '#f0f2f5', + }); + }); +}); diff --git a/src/ai/__tests__/scatter.test.ts b/src/ai/__tests__/scatter.test.ts new file mode 100644 index 00000000..3d4ceb97 --- /dev/null +++ b/src/ai/__tests__/scatter.test.ts @@ -0,0 +1,81 @@ +import { describe, expect, it } from 'vitest'; +import { parse } from '../parser'; + +describe('parse - scatter chart', () => { + it('should parse basic scatter chart', () => { + const result = parse(` +vis scatter +data + - x 10 + y 15 + - x 20 + y 25 + - x 30 + y 35 + - x 40 + y 45 + `); + + expect(result.type).toBe('scatter'); + expect(result.data).toEqual([ + { x: 10, y: 15 }, + { x: 20, y: 25 }, + { x: 30, y: 35 }, + { x: 40, y: 45 }, + ]); + }); + + it('should parse scatter chart with title', () => { + const result = parse(` +vis scatter +data + - x 25 + y 5000 + - x 35 + y 7000 + - x 45 + y 10000 +title 年龄与收入关系 + `); + + expect(result.title).toBe('年龄与收入关系'); + }); + + it('should parse scatter chart with group', () => { + const result = parse(` +vis scatter +data + - x 10 + y 20 + group A + - x 15 + y 25 + group A + - x 20 + y 30 + group B + - x 25 + y 35 + group B + `); + + expect(result.data).toEqual([ + { x: 10, y: 20, group: 'A' }, + { x: 15, y: 25, group: 'A' }, + { x: 20, y: 30, group: 'B' }, + { x: 25, y: 35, group: 'B' }, + ]); + }); + + it('should parse scatter chart with theme', () => { + const result = parse(` +vis scatter +data + - x 10 + y 20 +theme academy + `); + + expect(result.theme).toBe('academy'); + }); +}); diff --git a/src/ai/__tests__/treemap.test.ts b/src/ai/__tests__/treemap.test.ts new file mode 100644 index 00000000..0c6621c0 --- /dev/null +++ b/src/ai/__tests__/treemap.test.ts @@ -0,0 +1,69 @@ +import { describe, expect, it } from 'vitest'; +import { parse } from '../parser'; + +describe('parse - treemap chart', () => { + it('should parse basic treemap chart', () => { + const result = parse(` +vis treemap +data + - name 苹果 + value 800 + - name 橙子 + value 600 + - name 香蕉 + value 500 + `); + + expect(result.type).toBe('treemap'); + expect(result.data).toEqual([ + { name: '苹果', value: 800 }, + { name: '橙子', value: 600 }, + { name: '香蕉', value: 500 }, + ]); + }); + + it('should parse treemap chart with title', () => { + const result = parse(` +vis treemap +data + - name 产品A + value 500 + - name 产品B + value 400 +title 产品销售情况 + `); + + expect(result.title).toBe('产品销售情况'); + }); + + it('should parse treemap chart with theme', () => { + const result = parse(` +vis treemap +data + - name A + value 100 + - name B + value 80 +theme academy + `); + + expect(result.theme).toBe('academy'); + }); + + it('should parse treemap chart with style', () => { + const result = parse(` +vis treemap +data + - name A + value 100 +style + backgroundColor #f5f5f5 + palette #5B8FF9 #61DDAA #65789B + `); + + expect(result.style).toEqual({ + backgroundColor: '#f5f5f5', + palette: ['#5B8FF9', '#61DDAA', '#65789B'], + }); + }); +}); diff --git a/src/ai/__tests__/venn.test.ts b/src/ai/__tests__/venn.test.ts new file mode 100644 index 00000000..7a414d2b --- /dev/null +++ b/src/ai/__tests__/venn.test.ts @@ -0,0 +1,90 @@ +import { describe, expect, it } from 'vitest'; +import { parse } from '../parser'; + +describe('parse - venn chart', () => { + it('should parse basic venn chart with two sets', () => { + const result = parse(` +vis venn +data + - sets A + value 20 + label 集合A + - sets B + value 15 + label 集合B + - sets A,B + value 5 + label 交集AB +title 集合交集示例 + `); + + expect(result.type).toBe('venn'); + expect(result.data).toEqual([ + { sets: 'A', value: 20, label: '集合A' }, + { sets: 'B', value: 15, label: '集合B' }, + { sets: 'A,B', value: 5, label: '交集AB' }, + ]); + expect(result.title).toBe('集合交集示例'); + }); + + it('should parse venn chart with three sets', () => { + const result = parse(` +vis venn +data + - sets A + value 10 + label 集合A + - sets B + value 8 + label 集合B + - sets C + value 6 + label 集合C + - sets A,B + value 4 + - sets A,C + value 2 + - sets B,C + value 1 + - sets A,B,C + value 1 +title 三集合关系 +theme dark + `); + + expect(result.data).toEqual([ + { sets: 'A', value: 10, label: '集合A' }, + { sets: 'B', value: 8, label: '集合B' }, + { sets: 'C', value: 6, label: '集合C' }, + { sets: 'A,B', value: 4 }, + { sets: 'A,C', value: 2 }, + { sets: 'B,C', value: 1 }, + { sets: 'A,B,C', value: 1 }, + ]); + expect(result.theme).toBe('dark'); + }); + + it('should parse venn chart with custom style', () => { + const result = parse(` +vis venn +data + - sets A + value 30 + label 购买手机 + - sets B + value 25 + label 购买耳机 + - sets A,B + value 10 +title 标签交集 +style + palette #FFB6C1 #87CEFA + backgroundColor #F8F8FF + `); + + expect(result.style).toEqual({ + palette: ['#FFB6C1', '#87CEFA'], + backgroundColor: '#F8F8FF', + }); + }); +}); diff --git a/src/ai/__tests__/waterfall.test.ts b/src/ai/__tests__/waterfall.test.ts new file mode 100644 index 00000000..ca797b46 --- /dev/null +++ b/src/ai/__tests__/waterfall.test.ts @@ -0,0 +1,91 @@ +import { describe, expect, it } from 'vitest'; +import { parse } from '../parser'; + +describe('parse - waterfall chart', () => { + it('should parse basic waterfall chart', () => { + const result = parse(` +vis waterfall +data + - category 期初利润 + value 100 + - category 销售收入 + value 80 + - category 运营成本 + value -50 + - category 税费 + value -20 + - category 总计 + isTotal true + `); + + expect(result.type).toBe('waterfall'); + expect(result.data).toEqual([ + { category: '期初利润', value: 100 }, + { category: '销售收入', value: 80 }, + { category: '运营成本', value: -50 }, + { category: '税费', value: -20 }, + { category: '总计', isTotal: true }, + ]); + }); + + it('should parse waterfall chart with title and axis titles', () => { + const result = parse(` +vis waterfall +data + - category 起始值 + value 120 + - category 一月 + value 20 + - category 二月 + value -30 + - category 三月 + value 15 +title 利润变化 +axisXTitle 月份 +axisYTitle 金额（万元） + `); + + expect(result.title).toBe('利润变化'); + expect(result.axisXTitle).toBe('月份'); + expect(result.axisYTitle).toBe('金额（万元）'); + }); + + it('should parse waterfall chart with intermediate total', () => { + const result = parse(` +vis waterfall +data + - category 基础预算 + value 500 + - category 市场投入 + value 120 + - category 总投入 + isIntermediateTotal true + - category 采购优化 + value -60 + - category 总利润 + isTotal true + `); + + expect(result.data).toEqual([ + { category: '基础预算', value: 500 }, + { category: '市场投入', value: 120 }, + { category: '总投入', isIntermediateTotal: true }, + { category: '采购优化', value: -60 }, + { category: '总利润', isTotal: true }, + ]); + }); + + it('should parse waterfall chart with theme', () => { + const result = parse(` +vis waterfall +data + - category 起始 + value 100 + - category 增加 + value 50 +theme dark + `); + + expect(result.theme).toBe('dark'); + }); +}); diff --git a/src/ai/__tests__/word-cloud.test.ts b/src/ai/__tests__/word-cloud.test.ts new file mode 100644 index 00000000..49af449e --- /dev/null +++ b/src/ai/__tests__/word-cloud.test.ts @@ -0,0 +1,80 @@ +import { describe, expect, it } from 'vitest'; +import { parse } from '../parser'; + +describe('parse - word-cloud chart', () => { + it('should parse basic word-cloud chart', () => { + const result = parse(` +vis word-cloud +data + - text 环境 + value 20 + - text 保护 + value 15 + - text 可持续发展 + value 10 + `); + + expect(result.type).toBe('word-cloud'); + expect(result.data).toEqual([ + { text: '环境', value: 20 }, + { text: '保护', value: 15 }, + { text: '可持续发展', value: 10 }, + ]); + }); + + it('should parse word-cloud chart from product reviews', () => { + const result = parse(` +vis word-cloud +data + - text 质量好 + value 30 + - text 价格合理 + value 20 + - text 服务差 + value 5 + `); + + expect(result.data).toEqual([ + { text: '质量好', value: 30 }, + { text: '价格合理', value: 20 }, + { text: '服务差', value: 5 }, + ]); + }); + + it('should parse word-cloud chart with title', () => { + const result = parse(` +vis word-cloud +data + - text 数据 + value 50 + - text 分析 + value 40 + - text 结果 + value 30 +title 文章关键词分析 + `); + + expect(result.title).toBe('文章关键词分析'); + }); + + it('should parse word-cloud chart with theme and style', () => { + const result = parse(` +vis word-cloud +data + - text 环保 + value 10 + - text 气候变化 + value 8 +theme academy +style + backgroundColor #f5f5f5 + palette #5B8FF9 #61DDAA + `); + + expect(result.theme).toBe('academy'); + expect(result.style).toEqual({ + backgroundColor: '#f5f5f5', + palette: ['#5B8FF9', '#61DDAA'], + }); + }); +}); diff --git a/src/ai/parser.ts b/src/ai/parser.ts index e70ee3f0..21d40c5b 100644 --- a/src/ai/parser.ts +++ b/src/ai/parser.ts @@ -45,7 +45,7 @@ interface ParserState { } // Known section names that contain arrays -const ARRAY_SECTIONS = new Set(['data']); +const ARRAY_SECTIONS = new Set(['data', 'categories', 'series']); // Known section names that contain objects const OBJECT_SECTIONS = new Set(['style']); @@ -186,7 +186,9 @@ export function parse(syntax: string): ParsedConfig { // Check for section headers (data, style, etc.) - single word, no indentation const isSectionHeader = - /^[a-zA-Z_][a-zA-Z0-9_-]*$/.test(trimmedLine) && indentLevel === 0 && isKnownSection(trimmedLine); + /^[a-zA-Z_][a-zA-Z0-9_-]*$/.test(trimmedLine) && + indentLevel === 0 && + isKnownSection(trimmedLine); if (isSectionHeader) { // Finish previous section From 8022749b7c9826915e57b0b004538e271123159b Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Sun, 1 Feb 2026 12:38:49 +0000 Subject: [PATCH 5/9] fix: correct data structures for histogram and dual-axes charts based on knowledge bases Co-authored-by: hustcc <7856674+hustcc@users.noreply.github.com> --- src/ai/__tests__/dual-axes.test.ts | 61 +++++++++++++------------ src/ai/__tests__/histogram.test.ts | 60 ++++++++++--------------- src/ai/__tests__/parser.test.ts | 38 ++++++++++++++++ src/ai/index.ts | 2 +- src/ai/parser.ts | 71 ++++++++++++++++++++++++------ src/index.ts | 4 +- 6 files changed, 156 insertions(+), 80 deletions(-) diff --git a/src/ai/__tests__/dual-axes.test.ts b/src/ai/__tests__/dual-axes.test.ts index 898ccc22..445e204f 100644 --- a/src/ai/__tests__/dual-axes.test.ts +++ b/src/ai/__tests__/dual-axes.test.ts @@ -2,28 +2,32 @@ import { describe, expect, it } from 'vitest'; import { parse } from '../parser'; describe('parse - dual-axes chart', () => { - it('should parse basic dual-axes chart', () => { + it('should parse basic dual-axes chart with categories and series', () => { const result = parse(` vis dual-axes categories - - value 2018 - - value 2019 - - value 2020 - - value 2021 - - value 2022 + - 2018 + - 2019 + - 2020 + - 2021 + - 2022 title 2018-2022销售额与利润率 axisXTitle 年份 +series + - type column + axisYTitle 销售额 + - type line + axisYTitle 利润率 `); expect(result.type).toBe('dual-axes'); expect(result.title).toBe('2018-2022销售额与利润率'); expect(result.axisXTitle).toBe('年份'); - expect(result.categories).toEqual([ - { value: 2018 }, - { value: 2019 }, - { value: 2020 }, - { value: 2021 }, - { value: 2022 }, + // Categories parsed as numbers since they are numeric + expect(result.categories).toEqual([2018, 2019, 2020, 2021, 2022]); + expect(result.series).toEqual([ + { type: 'column', axisYTitle: '销售额' }, + { type: 'line', axisYTitle: '利润率' }, ]); }); @@ -31,34 +35,36 @@ axisXTitle 年份 const result = parse(` vis dual-axes categories - - value Q1 - - value Q2 - - value Q3 - - value Q4 + - Q1 + - Q2 + - Q3 + - Q4 title 季度数据 `); expect(result.type).toBe('dual-axes'); - expect(result.categories).toEqual([ - { value: 'Q1' }, - { value: 'Q2' }, - { value: 'Q3' }, - { value: 'Q4' }, - ]); + expect(result.categories).toEqual(['Q1', 'Q2', 'Q3', 'Q4']); expect(result.title).toBe('季度数据'); }); - it('should parse dual-axes chart with series', () => { + it('should parse dual-axes chart with date categories', () => { const result = parse(` vis dual-axes +categories + - 20240501 + - 20240502 + - 20240503 +title 五一期间景区人流量 +axisXTitle 日期 series - type column axisYTitle 人数 - type line axisYTitle 增长率 -title 五一期间景区人流量 `); + // Date-like values parsed as numbers + expect(result.categories).toEqual([20240501, 20240502, 20240503]); expect(result.series).toEqual([ { type: 'column', axisYTitle: '人数' }, { type: 'line', axisYTitle: '增长率' }, @@ -69,12 +75,13 @@ title 五一期间景区人流量 const result = parse(` vis dual-axes categories - - value Q1 - - value Q2 - - value Q3 + - Q1 + - Q2 + - Q3 theme academy `); + expect(result.categories).toEqual(['Q1', 'Q2', 'Q3']); expect(result.theme).toBe('academy'); }); }); diff --git a/src/ai/__tests__/histogram.test.ts b/src/ai/__tests__/histogram.test.ts index 717d6bf6..db1bb2c6 100644 --- a/src/ai/__tests__/histogram.test.ts +++ b/src/ai/__tests__/histogram.test.ts @@ -2,27 +2,21 @@ import { describe, expect, it } from 'vitest'; import { parse } from '../parser'; describe('parse - histogram chart', () => { - it('should parse basic histogram chart', () => { + it('should parse basic histogram chart with flat number array', () => { const result = parse(` vis histogram data - - value 78 - - value 88 - - value 60 - - value 100 - - value 95 + - 78 + - 88 + - 60 + - 100 + - 95 binNumber 5 title 成绩分布 `); expect(result.type).toBe('histogram'); - expect(result.data).toEqual([ - { value: 78 }, - { value: 88 }, - { value: 60 }, - { value: 100 }, - { value: 95 }, - ]); + expect(result.data).toEqual([78, 88, 60, 100, 95]); expect(result.binNumber).toBe(5); expect(result.title).toBe('成绩分布'); }); @@ -31,26 +25,18 @@ title 成绩分布 const result = parse(` vis histogram data - - value 1.2 - - value 3.4 - - value 3.7 - - value 4.3 - - value 5.2 - - value 5.8 - - value 6.1 + - 1.2 + - 3.4 + - 3.7 + - 4.3 + - 5.2 + - 5.8 + - 6.1 axisXTitle 花瓣大小分布 axisYTitle 花瓣分布数量 `); - expect(result.data).toEqual([ - { value: 1.2 }, - { value: 3.4 }, - { value: 3.7 }, - { value: 4.3 }, - { value: 5.2 }, - { value: 5.8 }, - { value: 6.1 }, - ]); + expect(result.data).toEqual([1.2, 3.4, 3.7, 4.3, 5.2, 5.8, 6.1]); expect(result.axisXTitle).toBe('花瓣大小分布'); expect(result.axisYTitle).toBe('花瓣分布数量'); }); @@ -59,13 +45,14 @@ axisYTitle 花瓣分布数量 const result = parse(` vis histogram data - - value 20 - - value 25 - - value 30 - - value 35 + - 20 + - 25 + - 30 + - 35 theme academy `); + expect(result.data).toEqual([20, 25, 30, 35]); expect(result.theme).toBe('academy'); }); @@ -73,14 +60,15 @@ theme academy const result = parse(` vis histogram data - - value 10 - - value 20 - - value 30 + - 10 + - 20 + - 30 style backgroundColor #f5f5f5 palette #5B8FF9 `); + expect(result.data).toEqual([10, 20, 30]); expect(result.style).toEqual({ backgroundColor: '#f5f5f5', palette: '#5B8FF9', diff --git a/src/ai/__tests__/parser.test.ts b/src/ai/__tests__/parser.test.ts index bd387bd7..2e6e9205 100644 --- a/src/ai/__tests__/parser.test.ts +++ b/src/ai/__tests__/parser.test.ts @@ -113,6 +113,44 @@ data { category: '分类二', value: 25 }, ]); }); + + it('should parse simple value arrays (flat arrays)', () => { + const result = parse(` +vis histogram +data + - 78 + - 88 + - 60 + - 100 + `); + + expect(result.data).toEqual([78, 88, 60, 100]); + }); + + it('should parse simple string arrays', () => { + const result = parse(` +vis dual-axes +categories + - 2018 + - 2019 + - 2020 + `); + + // Numeric-looking values are parsed as numbers + expect(result.categories).toEqual([2018, 2019, 2020]); + }); + + it('should parse simple string arrays with non-numeric values', () => { + const result = parse(` +vis dual-axes +categories + - Q1 + - Q2 + - Q3 + `); + + expect(result.categories).toEqual(['Q1', 'Q2', 'Q3']); + }); }); describe('parse - style object', () => { diff --git a/src/ai/index.ts b/src/ai/index.ts index ddf45067..47535933 100644 --- a/src/ai/index.ts +++ b/src/ai/index.ts @@ -1,2 +1,2 @@ -export { parse, isVisSyntax } from './parser'; +export { isVisSyntax, parse } from './parser'; export type { ParsedConfig } from './parser'; diff --git a/src/ai/parser.ts b/src/ai/parser.ts index 21d40c5b..7ff4c826 100644 --- a/src/ai/parser.ts +++ b/src/ai/parser.ts @@ -7,6 +7,7 @@ * - `vis [chartType]` - Defines the chart type (required first line) * - `data` - Starts a data array section * - ` - key value` - Array item with key-value pairs + * - ` - value` - Simple array item (for flat arrays like histogram data) * - `key: value` or `key value` - Top-level key-value pair * - `style` - Starts a style object section * - Multiple values separated by spaces become arrays (e.g., `palette #ff5a5f #1fb6ff`) @@ -24,6 +25,16 @@ * backgroundColor #333 * palette #ff5a5f #1fb6ff #13ce66 * ``` + * + * @example Simple array (histogram) + * ``` + * vis histogram + * data + * - 78 + * - 88 + * - 60 + * binNumber 5 + * ``` */ /** @@ -40,7 +51,8 @@ export interface ParsedConfig { interface ParserState { currentSection: string | null; currentArrayItem: Record | null; - currentArray: Record[]; + currentArray: unknown[]; + isSimpleArray: boolean; result: ParsedConfig; } @@ -124,6 +136,23 @@ function parseKeyValue(line: string): { key: string; value: string } | null { return null; } +/** + * Check if a value is a simple value (not a key-value pair) + * Simple values are: numbers, strings that don't look like key-value pairs + */ +function isSimpleValue(line: string): boolean { + const trimmed = line.trim(); + + // Check if it looks like a key-value pair + const hasKeyValue = parseKeyValue(trimmed); + if (hasKeyValue && hasKeyValue.value !== '') { + return false; + } + + // It's a simple value (number, string without spaces matching key pattern) + return true; +} + /** * Get the indentation level of a line */ @@ -162,6 +191,7 @@ export function parse(syntax: string): ParsedConfig { currentSection: null, currentArrayItem: null, currentArray: [], + isSimpleArray: false, result: { type: '' }, }; @@ -198,6 +228,7 @@ export function parse(syntax: string): ParsedConfig { state.currentSection = trimmedLine; state.currentArray = []; state.currentArrayItem = null; + state.isSimpleArray = false; continue; } @@ -218,26 +249,37 @@ export function parse(syntax: string): ParsedConfig { // Handle content within sections if (state.currentSection) { if (ARRAY_SECTIONS.has(state.currentSection)) { - // Array section (data) + // Array section (data, categories, series) if (isArrayItemLine(trimmedLine)) { - // Finish previous array item - if (state.currentArrayItem !== null) { + // Finish previous array item (for object arrays) + if (state.currentArrayItem !== null && !state.isSimpleArray) { state.currentArray.push(state.currentArrayItem); } - // Start new array item - state.currentArrayItem = {}; - // Parse the rest of the line after - const itemContent = parseArrayItemLine(trimmedLine); + if (itemContent) { - const kv = parseKeyValue(itemContent); - if (kv) { - state.currentArrayItem[kv.key] = parseValue(kv.value); + // Determine if this is a simple value or a key-value pair + if (isSimpleValue(itemContent)) { + // Simple value array (e.g., histogram data: [78, 88, 60]) + state.isSimpleArray = true; + state.currentArray.push(parseValue(itemContent)); + state.currentArrayItem = null; + } else { + // Object array with key-value pairs + state.currentArrayItem = {}; + const kv = parseKeyValue(itemContent); + if (kv) { + state.currentArrayItem[kv.key] = parseValue(kv.value); + } } + } else { + // Empty array item marker, start a new object + state.currentArrayItem = {}; } - } else if (state.currentArrayItem !== null) { - // Continue current array item with additional properties + } else if (state.currentArrayItem !== null && !state.isSimpleArray) { + // Continue current array item with additional properties (for object arrays) const kv = parseKeyValue(trimmedLine); if (kv) { state.currentArrayItem[kv.key] = parseValue(kv.value); @@ -275,8 +317,8 @@ export function parse(syntax: string): ParsedConfig { */ function finishCurrentSection(state: ParserState): void { if (state.currentSection) { - // Finish last array item - if (state.currentArrayItem !== null) { + // Finish last array item (for object arrays) + if (state.currentArrayItem !== null && !state.isSimpleArray) { state.currentArray.push(state.currentArrayItem); state.currentArrayItem = null; } @@ -288,6 +330,7 @@ function finishCurrentSection(state: ParserState): void { state.currentSection = null; state.currentArray = []; + state.isSimpleArray = false; } } diff --git a/src/index.ts b/src/index.ts index 730fca39..d82645a8 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,8 +1,8 @@ +export { isVisSyntax, parse } from './ai'; +export type { ParsedConfig } from './ai'; export { GPTVis } from './gpt-vis'; export type { GPTVisConfig } from './gpt-vis'; export type { VisualizationOptions } from './types'; -export { isVisSyntax, parse } from './ai'; -export type { ParsedConfig } from './ai'; export { Area } from './vis/area'; export type { AreaConfig, AreaDataItem } from './vis/area'; export { Bar } from './vis/bar'; From bb2d2031a3cb92c026ef08bc0fb26504b881334a Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Sun, 1 Feb 2026 12:44:26 +0000 Subject: [PATCH 6/9] feat: add tests for missing chart types Co-authored-by: hustcc <7856674+hustcc@users.noreply.github.com> --- src/ai/__tests__/boxplot.test.ts | 100 ++++++++++++++++++++ src/ai/__tests__/fishbone-diagram.test.ts | 57 +++++++++++ src/ai/__tests__/flow-diagram.test.ts | 62 ++++++++++++ src/ai/__tests__/heat-map.test.ts | 68 +++++++++++++ src/ai/__tests__/mind-map.test.ts | 50 ++++++++++ src/ai/__tests__/network-graph.test.ts | 65 +++++++++++++ src/ai/__tests__/organization-chart.test.ts | 51 ++++++++++ src/ai/__tests__/pin-map.test.ts | 69 ++++++++++++++ src/ai/__tests__/violin.test.ts | 100 ++++++++++++++++++++ 9 files changed, 622 insertions(+) create mode 100644 src/ai/__tests__/boxplot.test.ts create mode 100644 src/ai/__tests__/fishbone-diagram.test.ts create mode 100644 src/ai/__tests__/flow-diagram.test.ts create mode 100644 src/ai/__tests__/heat-map.test.ts create mode 100644 src/ai/__tests__/mind-map.test.ts create mode 100644 src/ai/__tests__/network-graph.test.ts create mode 100644 src/ai/__tests__/organization-chart.test.ts create mode 100644 src/ai/__tests__/pin-map.test.ts create mode 100644 src/ai/__tests__/violin.test.ts diff --git a/src/ai/__tests__/boxplot.test.ts b/src/ai/__tests__/boxplot.test.ts new file mode 100644 index 00000000..ee3459a2 --- /dev/null +++ b/src/ai/__tests__/boxplot.test.ts @@ -0,0 +1,100 @@ +import { describe, expect, it } from 'vitest'; +import { parse } from '../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 }, + ]); + }); +}); diff --git a/src/ai/__tests__/fishbone-diagram.test.ts b/src/ai/__tests__/fishbone-diagram.test.ts new file mode 100644 index 00000000..9be8bc70 --- /dev/null +++ b/src/ai/__tests__/fishbone-diagram.test.ts @@ -0,0 +1,57 @@ +import { describe, expect, it } from 'vitest'; +import { parse } from '../parser'; + +describe('parse - fishbone-diagram chart', () => { + it('should parse basic fishbone-diagram', () => { + const result = parse(` +vis fishbone-diagram +data + - name 产品销量下降 + `); + + expect(result.type).toBe('fishbone-diagram'); + expect(result.data).toEqual([{ name: '产品销量下降' }]); + }); + + it('should parse fishbone-diagram with categories', () => { + const result = parse(` +vis fishbone-diagram +data + - name 产品销量下降 + - name 市场推广 + - name 广告投入减少 + - name 促销活动不足 + - name 产品质量 + - name 产品缺陷 + - name 品质不稳定 + `); + + expect(result.type).toBe('fishbone-diagram'); + expect(result.data).toHaveLength(7); + }); + + it('should parse fishbone-diagram with production efficiency problem', () => { + const result = parse(` +vis fishbone-diagram +data + - name 生产效率低 + - name 设备问题 + - name 设备老化 + - name 维护不及时 + - name 员工问题 + - name 技能不足 + - name 工作态度差 + `); + + expect(result.type).toBe('fishbone-diagram'); + expect(result.data).toEqual([ + { name: '生产效率低' }, + { name: '设备问题' }, + { name: '设备老化' }, + { name: '维护不及时' }, + { name: '员工问题' }, + { name: '技能不足' }, + { name: '工作态度差' }, + ]); + }); +}); diff --git a/src/ai/__tests__/flow-diagram.test.ts b/src/ai/__tests__/flow-diagram.test.ts new file mode 100644 index 00000000..88a5680c --- /dev/null +++ b/src/ai/__tests__/flow-diagram.test.ts @@ -0,0 +1,62 @@ +import { describe, expect, it } from 'vitest'; +import { parse } from '../parser'; + +describe('parse - flow-diagram chart', () => { + it('should parse basic flow-diagram with nodes', () => { + const result = parse(` +vis flow-diagram +data + - name 访问注册页面 + - name 填写并提交注册表单 + - name 验证用户信息 + - name 创建新用户账户 + `); + + expect(result.type).toBe('flow-diagram'); + expect(result.data).toEqual([ + { name: '访问注册页面' }, + { name: '填写并提交注册表单' }, + { name: '验证用户信息' }, + { name: '创建新用户账户' }, + ]); + }); + + it('should parse flow-diagram with edges', () => { + const result = parse(` +vis flow-diagram +data + - source 客户下单 + target 系统生成订单 + - source 系统生成订单 + target 仓库拣货 + - source 仓库拣货 + target 仓库打包 + `); + + expect(result.type).toBe('flow-diagram'); + expect(result.data).toEqual([ + { source: '客户下单', target: '系统生成订单' }, + { source: '系统生成订单', target: '仓库拣货' }, + { source: '仓库拣货', target: '仓库打包' }, + ]); + }); + + it('should parse flow-diagram with named edges', () => { + const result = parse(` +vis flow-diagram +data + - source 验证用户信息 + target 创建新用户账户 + name 信息无误 + - source 验证用户信息 + target 提示修改错误信息 + name 信息有误 + `); + + expect(result.type).toBe('flow-diagram'); + expect(result.data).toEqual([ + { source: '验证用户信息', target: '创建新用户账户', name: '信息无误' }, + { source: '验证用户信息', target: '提示修改错误信息', name: '信息有误' }, + ]); + }); +}); diff --git a/src/ai/__tests__/heat-map.test.ts b/src/ai/__tests__/heat-map.test.ts new file mode 100644 index 00000000..43b7182c --- /dev/null +++ b/src/ai/__tests__/heat-map.test.ts @@ -0,0 +1,68 @@ +import { describe, expect, it } from 'vitest'; +import { parse } from '../parser'; + +describe('parse - heat-map chart', () => { + it('should parse basic heat-map chart', () => { + const result = parse(` +vis heat-map +data + - longitude 116.3974 + latitude 39.9087 + value 5 + - longitude 121.4737 + latitude 31.2304 + value 3 + `); + + expect(result.type).toBe('heat-map'); + expect(result.data).toEqual([ + { longitude: 116.3974, latitude: 39.9087, value: 5 }, + { longitude: 121.4737, latitude: 31.2304, value: 3 }, + ]); + }); + + it('should parse heat-map chart with tourist data', () => { + const result = parse(` +vis heat-map +data + - longitude 121.474856 + latitude 31.249162 + value 800 + - longitude 121.449895 + latitude 31.228609 + value 500 + - longitude 121.449486 + latitude 31.222042 + value 900 + `); + + expect(result.type).toBe('heat-map'); + expect(result.data).toEqual([ + { longitude: 121.474856, latitude: 31.249162, value: 800 }, + { longitude: 121.449895, latitude: 31.228609, value: 500 }, + { longitude: 121.449486, latitude: 31.222042, value: 900 }, + ]); + }); + + it('should parse heat-map chart with intensity data', () => { + const result = parse(` +vis heat-map +data + - longitude 121.449895 + latitude 31.228609 + value 500 + - longitude 121.449486 + latitude 31.222042 + value 900 + - longitude 121.431826 + latitude 31.204638 + value 400 + - longitude 121.448453 + latitude 31.222341 + value 300 + `); + + expect(result.type).toBe('heat-map'); + expect(result.data).toHaveLength(4); + }); +}); diff --git a/src/ai/__tests__/mind-map.test.ts b/src/ai/__tests__/mind-map.test.ts new file mode 100644 index 00000000..0ad87423 --- /dev/null +++ b/src/ai/__tests__/mind-map.test.ts @@ -0,0 +1,50 @@ +import { describe, expect, it } from 'vitest'; +import { parse } from '../parser'; + +describe('parse - mind-map chart', () => { + it('should parse basic mind-map chart', () => { + const result = parse(` +vis mind-map +data + - name 项目计划 + `); + + expect(result.type).toBe('mind-map'); + expect(result.data).toEqual([{ name: '项目计划' }]); + }); + + it('should parse mind-map chart with nested structure', () => { + const result = parse(` +vis mind-map +data + - name 人工智能应用 + - name 智能家居 + - name 自动驾驶 + - name 医疗保健 + `); + + expect(result.type).toBe('mind-map'); + expect(result.data).toEqual([ + { name: '人工智能应用' }, + { name: '智能家居' }, + { name: '自动驾驶' }, + { name: '医疗保健' }, + ]); + }); + + it('should parse mind-map chart with multiple nodes', () => { + const result = parse(` +vis mind-map +data + - name 台风形成的因素 + - name 气象条件 + - name 温暖的海水 + - name 气压分布 + - name 地理环境 + - name 大陆架的形状与深度 + `); + + expect(result.type).toBe('mind-map'); + expect(result.data).toHaveLength(6); + }); +}); diff --git a/src/ai/__tests__/network-graph.test.ts b/src/ai/__tests__/network-graph.test.ts new file mode 100644 index 00000000..91fbf3f9 --- /dev/null +++ b/src/ai/__tests__/network-graph.test.ts @@ -0,0 +1,65 @@ +import { describe, expect, it } from 'vitest'; +import { parse } from '../parser'; + +describe('parse - network-graph chart', () => { + it('should parse basic network-graph with nodes', () => { + const result = parse(` +vis network-graph +data + - name 哈利·波特 + - name 赫敏·格兰杰 + - name 罗恩·韦斯莱 + - name 伏地魔 + `); + + expect(result.type).toBe('network-graph'); + expect(result.data).toEqual([ + { name: '哈利·波特' }, + { name: '赫敏·格兰杰' }, + { name: '罗恩·韦斯莱' }, + { name: '伏地魔' }, + ]); + }); + + it('should parse network-graph with edges', () => { + const result = parse(` +vis network-graph +data + - source 哈利·波特 + target 赫敏·格兰杰 + name 朋友 + - source 哈利·波特 + target 罗恩·韦斯莱 + name 朋友 + - source 哈利·波特 + target 伏地魔 + name 敌人 + `); + + expect(result.type).toBe('network-graph'); + expect(result.data).toEqual([ + { source: '哈利·波特', target: '赫敏·格兰杰', name: '朋友' }, + { source: '哈利·波特', target: '罗恩·韦斯莱', name: '朋友' }, + { source: '哈利·波特', target: '伏地魔', name: '敌人' }, + ]); + }); + + it('should parse network-graph with bidirectional edges', () => { + const result = parse(` +vis network-graph +data + - source 哈利·波特 + target 伏地魔 + name 敌人 + - source 伏地魔 + target 哈利·波特 + name 试图杀死 + `); + + expect(result.type).toBe('network-graph'); + expect(result.data).toEqual([ + { source: '哈利·波特', target: '伏地魔', name: '敌人' }, + { source: '伏地魔', target: '哈利·波特', name: '试图杀死' }, + ]); + }); +}); diff --git a/src/ai/__tests__/organization-chart.test.ts b/src/ai/__tests__/organization-chart.test.ts new file mode 100644 index 00000000..7455aa26 --- /dev/null +++ b/src/ai/__tests__/organization-chart.test.ts @@ -0,0 +1,51 @@ +import { describe, expect, it } from 'vitest'; +import { parse } from '../parser'; + +describe('parse - organization-chart', () => { + it('should parse basic organization-chart', () => { + const result = parse(` +vis organization-chart +data + - name Alice Johnson + description Chief Technology Officer + `); + + expect(result.type).toBe('organization-chart'); + expect(result.data).toEqual([ + { name: 'Alice Johnson', description: 'Chief Technology Officer' }, + ]); + }); + + it('should parse organization-chart with multiple nodes', () => { + const result = parse(` +vis organization-chart +data + - name Eric Joplin + description Chief Executive Officer + - name Linda Newland + description Chief Executive Assistant + `); + + expect(result.type).toBe('organization-chart'); + expect(result.data).toEqual([ + { name: 'Eric Joplin', description: 'Chief Executive Officer' }, + { name: 'Linda Newland', description: 'Chief Executive Assistant' }, + ]); + }); + + it('should parse organization-chart with team structure', () => { + const result = parse(` +vis organization-chart +data + - name Bob Smith + description Senior Software Engineer + - name Charlie Brown + description Software Engineer + - name Diana White + description Software Engineer + `); + + expect(result.type).toBe('organization-chart'); + expect(result.data).toHaveLength(3); + }); +}); diff --git a/src/ai/__tests__/pin-map.test.ts b/src/ai/__tests__/pin-map.test.ts new file mode 100644 index 00000000..8f8fe39c --- /dev/null +++ b/src/ai/__tests__/pin-map.test.ts @@ -0,0 +1,69 @@ +import { describe, expect, it } from 'vitest'; +import { parse } from '../parser'; + +describe('parse - pin-map chart', () => { + it('should parse basic pin-map chart', () => { + const result = parse(` +vis pin-map +data + - longitude 120.153576 + latitude 30.287459 + label 杭州 + - longitude 121.4737 + latitude 31.2304 + label 上海 + `); + + expect(result.type).toBe('pin-map'); + expect(result.data).toEqual([ + { longitude: 120.153576, latitude: 30.287459, label: '杭州' }, + { longitude: 121.4737, latitude: 31.2304, label: '上海' }, + ]); + }); + + it('should parse pin-map chart with population data', () => { + const result = parse(` +vis pin-map +data + - longitude 121.549792 + latitude 29.868388 + label 宁波人口：51万 + - longitude 121.4737 + latitude 31.2304 + label 上海人口：151万 + - longitude 120.672111 + latitude 28.000575 + label 温州人口：67万 + `); + + expect(result.type).toBe('pin-map'); + expect(result.data).toEqual([ + { longitude: 121.549792, latitude: 29.868388, label: '宁波人口：51万' }, + { longitude: 121.4737, latitude: 31.2304, label: '上海人口：151万' }, + { longitude: 120.672111, latitude: 28.000575, label: '温州人口：67万' }, + ]); + }); + + it('should parse pin-map chart with scenic spots', () => { + const result = parse(` +vis pin-map +data + - label 杨梅岭 + longitude 120.118362 + latitude 30.217175 + - label 理安寺 + longitude 120.112958 + latitude 30.207319 + - label 九溪烟树 + longitude 120.11335 + latitude 30.202395 + `); + + expect(result.type).toBe('pin-map'); + expect(result.data).toEqual([ + { label: '杨梅岭', longitude: 120.118362, latitude: 30.217175 }, + { label: '理安寺', longitude: 120.112958, latitude: 30.207319 }, + { label: '九溪烟树', longitude: 120.11335, latitude: 30.202395 }, + ]); + }); +}); diff --git a/src/ai/__tests__/violin.test.ts b/src/ai/__tests__/violin.test.ts new file mode 100644 index 00000000..8e34d785 --- /dev/null +++ b/src/ai/__tests__/violin.test.ts @@ -0,0 +1,100 @@ +import { describe, expect, it } from 'vitest'; +import { parse } from '../parser'; + +describe('parse - violin chart', () => { + it('should parse basic violin chart', () => { + const result = parse(` +vis violin +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('violin'); + 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 violin chart with theme', () => { + const result = parse(` +vis violin +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('violin'); + expect(result.theme).toBe('dark'); + expect(result.title).toBe('实验数据分布'); + }); + + it('should parse violin chart with group field', () => { + const result = parse(` +vis violin +data + - group I.setosa + category PetalWidth + value 0.2 + - group I.setosa + category PetalLength + value 1.4 + - group I.versicolor + category PetalWidth + value 1.4 + - group I.versicolor + category PetalLength + value 4.7 +title 鸢尾花特征分布 + `); + + expect(result.type).toBe('violin'); + expect(result.data).toEqual([ + { group: 'I.setosa', category: 'PetalWidth', value: 0.2 }, + { group: 'I.setosa', category: 'PetalLength', value: 1.4 }, + { group: 'I.versicolor', category: 'PetalWidth', value: 1.4 }, + { group: 'I.versicolor', category: 'PetalLength', value: 4.7 }, + ]); + }); +}); From b8d46aad6f8ce947b85075847d9f0c1f9054d2aa Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Sun, 1 Feb 2026 13:09:11 +0000 Subject: [PATCH 7/9] refactor: simplify render API and add nested children support Co-authored-by: hustcc <7856674+hustcc@users.noreply.github.com> --- src/ai/__tests__/fishbone-diagram.test.ts | 95 +++++- src/ai/__tests__/mind-map.test.ts | 76 ++++- src/ai/__tests__/organization-chart.test.ts | 71 ++++- src/ai/__tests__/treemap.test.ts | 72 ++++- src/ai/parser.ts | 319 ++++++++++++-------- src/gpt-vis/index.ts | 47 ++- 6 files changed, 502 insertions(+), 178 deletions(-) diff --git a/src/ai/__tests__/fishbone-diagram.test.ts b/src/ai/__tests__/fishbone-diagram.test.ts index 9be8bc70..47c49873 100644 --- a/src/ai/__tests__/fishbone-diagram.test.ts +++ b/src/ai/__tests__/fishbone-diagram.test.ts @@ -13,7 +13,7 @@ data expect(result.data).toEqual([{ name: '产品销量下降' }]); }); - it('should parse fishbone-diagram with categories', () => { + it('should parse fishbone-diagram with flat categories', () => { const result = parse(` vis fishbone-diagram data @@ -30,28 +30,95 @@ data expect(result.data).toHaveLength(7); }); + it('should parse fishbone-diagram with nested children', () => { + const result = parse(` +vis fishbone-diagram +data + - name 产品销量下降 + children + - name 市场推广 + children + - name 广告投入减少 + - name 促销活动不足 + - name 产品质量 + children + - name 产品缺陷 + - name 品质不稳定 + - name 客户服务 + children + - name 响应速度慢 + - name 服务态度差 + - name 价格策略 + children + - name 定价过高 + - name 竞争对手降价 + `); + + expect(result.type).toBe('fishbone-diagram'); + expect(result.data).toEqual([ + { + name: '产品销量下降', + children: [ + { + name: '市场推广', + children: [{ name: '广告投入减少' }, { name: '促销活动不足' }], + }, + { + name: '产品质量', + children: [{ name: '产品缺陷' }, { name: '品质不稳定' }], + }, + { + name: '客户服务', + children: [{ name: '响应速度慢' }, { name: '服务态度差' }], + }, + { + name: '价格策略', + children: [{ name: '定价过高' }, { name: '竞争对手降价' }], + }, + ], + }, + ]); + }); + it('should parse fishbone-diagram with production efficiency problem', () => { const result = parse(` vis fishbone-diagram data - name 生产效率低 - - name 设备问题 - - name 设备老化 - - name 维护不及时 - - name 员工问题 - - name 技能不足 - - name 工作态度差 + children + - name 设备问题 + children + - name 设备老化 + - name 维护不及时 + - name 员工问题 + children + - name 技能不足 + - name 工作态度差 + - name 流程问题 + children + - name 流程繁琐 + - name 缺乏标准化 `); expect(result.type).toBe('fishbone-diagram'); expect(result.data).toEqual([ - { name: '生产效率低' }, - { name: '设备问题' }, - { name: '设备老化' }, - { name: '维护不及时' }, - { name: '员工问题' }, - { name: '技能不足' }, - { name: '工作态度差' }, + { + name: '生产效率低', + children: [ + { + name: '设备问题', + children: [{ name: '设备老化' }, { name: '维护不及时' }], + }, + { + name: '员工问题', + children: [{ name: '技能不足' }, { name: '工作态度差' }], + }, + { + name: '流程问题', + children: [{ name: '流程繁琐' }, { name: '缺乏标准化' }], + }, + ], + }, ]); }); }); diff --git a/src/ai/__tests__/mind-map.test.ts b/src/ai/__tests__/mind-map.test.ts index 0ad87423..3941a4b3 100644 --- a/src/ai/__tests__/mind-map.test.ts +++ b/src/ai/__tests__/mind-map.test.ts @@ -13,7 +13,7 @@ data expect(result.data).toEqual([{ name: '项目计划' }]); }); - it('should parse mind-map chart with nested structure', () => { + it('should parse mind-map chart with flat nodes', () => { const result = parse(` vis mind-map data @@ -32,19 +32,77 @@ data ]); }); - it('should parse mind-map chart with multiple nodes', () => { + it('should parse mind-map chart with nested children', () => { const result = parse(` vis mind-map data - - name 台风形成的因素 - - name 气象条件 - - name 温暖的海水 - - name 气压分布 - - name 地理环境 - - name 大陆架的形状与深度 + - name 项目计划 + children + - name 研究阶段 + children + - name 市场调研 + - name 技术可行性分析 + - name 设计阶段 + children + - name 产品功能确定 + - name UI设计 + - name 开发阶段 + children + - name 编写代码 + - name 单元测试 + `); + + expect(result.type).toBe('mind-map'); + expect(result.data).toEqual([ + { + name: '项目计划', + children: [ + { + name: '研究阶段', + children: [{ name: '市场调研' }, { name: '技术可行性分析' }], + }, + { + name: '设计阶段', + children: [{ name: '产品功能确定' }, { name: 'UI设计' }], + }, + { + name: '开发阶段', + children: [{ name: '编写代码' }, { name: '单元测试' }], + }, + ], + }, + ]); + }); + + it('should parse mind-map chart with deeply nested children', () => { + const result = parse(` +vis mind-map +data + - name 人工智能应用 + children + - name 智能家居 + - name 自动驾驶 + - name 医疗保健 + children + - name 精准医疗 + - name 诊断辅助 + - name 金融服务 `); expect(result.type).toBe('mind-map'); - expect(result.data).toHaveLength(6); + expect(result.data).toEqual([ + { + name: '人工智能应用', + children: [ + { name: '智能家居' }, + { name: '自动驾驶' }, + { + name: '医疗保健', + children: [{ name: '精准医疗' }, { name: '诊断辅助' }], + }, + { name: '金融服务' }, + ], + }, + ]); }); }); diff --git a/src/ai/__tests__/organization-chart.test.ts b/src/ai/__tests__/organization-chart.test.ts index 7455aa26..003b567f 100644 --- a/src/ai/__tests__/organization-chart.test.ts +++ b/src/ai/__tests__/organization-chart.test.ts @@ -33,19 +33,74 @@ data ]); }); - it('should parse organization-chart with team structure', () => { + it('should parse organization-chart with nested children', () => { const result = parse(` vis organization-chart data - - name Bob Smith - description Senior Software Engineer - - name Charlie Brown - description Software Engineer - - name Diana White - description Software Engineer + - name Alice Johnson + description Chief Technology Officer + children + - name Bob Smith + description Senior Software Engineer + children + - name Charlie Brown + description Software Engineer + - name Diana White + description Software Engineer + - name Eve Black + description IT Support Department Head + children + - name Frank Green + description IT Support Specialist + - name Grace Blue + description IT Support Specialist + `); + + expect(result.type).toBe('organization-chart'); + expect(result.data).toEqual([ + { + name: 'Alice Johnson', + description: 'Chief Technology Officer', + children: [ + { + name: 'Bob Smith', + description: 'Senior Software Engineer', + children: [ + { name: 'Charlie Brown', description: 'Software Engineer' }, + { name: 'Diana White', description: 'Software Engineer' }, + ], + }, + { + name: 'Eve Black', + description: 'IT Support Department Head', + children: [ + { name: 'Frank Green', description: 'IT Support Specialist' }, + { name: 'Grace Blue', description: 'IT Support Specialist' }, + ], + }, + ], + }, + ]); + }); + + it('should parse organization-chart with simple nested children', () => { + const result = parse(` +vis organization-chart +data + - name Eric Joplin + description Chief Executive Officer + children + - name Linda Newland + description Chief Executive Assistant `); expect(result.type).toBe('organization-chart'); - expect(result.data).toHaveLength(3); + expect(result.data).toEqual([ + { + name: 'Eric Joplin', + description: 'Chief Executive Officer', + children: [{ name: 'Linda Newland', description: 'Chief Executive Assistant' }], + }, + ]); }); }); diff --git a/src/ai/__tests__/treemap.test.ts b/src/ai/__tests__/treemap.test.ts index 0c6621c0..ed175033 100644 --- a/src/ai/__tests__/treemap.test.ts +++ b/src/ai/__tests__/treemap.test.ts @@ -36,18 +36,80 @@ title 产品销售情况 expect(result.title).toBe('产品销售情况'); }); - it('should parse treemap chart with theme', () => { + it('should parse treemap chart with nested children', () => { const result = parse(` vis treemap data - - name A + - name A部门 value 100 - - name B + children + - name A1 + value 40 + - name A2 + value 30 + - name A3 + value 30 + - name B部门 value 80 -theme academy + children + - name B1 + value 50 + - name B2 + value 30 + `); + + expect(result.type).toBe('treemap'); + expect(result.data).toEqual([ + { + name: 'A部门', + value: 100, + children: [ + { name: 'A1', value: 40 }, + { name: 'A2', value: 30 }, + { name: 'A3', value: 30 }, + ], + }, + { + name: 'B部门', + value: 80, + children: [ + { name: 'B1', value: 50 }, + { name: 'B2', value: 30 }, + ], + }, + ]); + }); + + it('should parse treemap chart with deeply nested children', () => { + const result = parse(` +vis treemap +data + - name 苹果 + value 800 + children + - name 红富士 + value 400 + - name 黄元帅 + value 400 + - name 橙子 + value 600 + - name 香蕉 + value 500 `); - expect(result.theme).toBe('academy'); + expect(result.type).toBe('treemap'); + expect(result.data).toEqual([ + { + name: '苹果', + value: 800, + children: [ + { name: '红富士', value: 400 }, + { name: '黄元帅', value: 400 }, + ], + }, + { name: '橙子', value: 600 }, + { name: '香蕉', value: 500 }, + ]); }); it('should parse treemap chart with style', () => { diff --git a/src/ai/parser.ts b/src/ai/parser.ts index 7ff4c826..d6608ed5 100644 --- a/src/ai/parser.ts +++ b/src/ai/parser.ts @@ -11,6 +11,7 @@ * - `key: value` or `key value` - Top-level key-value pair * - `style` - Starts a style object section * - Multiple values separated by spaces become arrays (e.g., `palette #ff5a5f #1fb6ff`) + * - `children` - Nested array for hierarchical data (mind-map, treemap, etc.) * * @example * ``` @@ -35,6 +36,19 @@ * - 60 * binNumber 5 * ``` + * + * @example Hierarchical data (mind-map) + * ``` + * vis mind-map + * data + * - name 项目计划 + * children + * - name 研究阶段 + * children + * - name 市场调研 + * - name 技术可行性分析 + * - name 开发阶段 + * ``` */ /** @@ -45,19 +59,8 @@ export interface ParsedConfig { [key: string]: unknown; } -/** - * Parser state for tracking current context - */ -interface ParserState { - currentSection: string | null; - currentArrayItem: Record | null; - currentArray: unknown[]; - isSimpleArray: boolean; - result: ParsedConfig; -} - // Known section names that contain arrays -const ARRAY_SECTIONS = new Set(['data', 'categories', 'series']); +const ARRAY_SECTIONS = new Set(['data', 'categories', 'series', 'children']); // Known section names that contain objects const OBJECT_SECTIONS = new Set(['style']); @@ -154,7 +157,7 @@ function isSimpleValue(line: string): boolean { } /** - * Get the indentation level of a line + * Get the indentation level of a line (normalized to units of 2 spaces) */ function getIndentLevel(line: string): number { const match = line.match(/^(\s*)/); @@ -183,155 +186,219 @@ function isKnownSection(key: string): boolean { } /** - * Parse the visualization syntax string into a configuration object + * Line information for parsing */ -export function parse(syntax: string): ParsedConfig { +interface LineInfo { + line: string; + trimmed: string; + indent: number; + lineNumber: number; +} + +/** + * Parse lines into line info array + */ +function parseLines(syntax: string): LineInfo[] { const lines = syntax.split('\n'); - const state: ParserState = { - currentSection: null, - currentArrayItem: null, - currentArray: [], - isSimpleArray: false, - result: { type: '' }, - }; - - // Process each line + const result: LineInfo[] = []; + for (let i = 0; i < lines.length; i++) { const line = lines[i]; - const trimmedLine = line.trim(); - const indentLevel = getIndentLevel(line); + const trimmed = line.trim(); // Skip empty lines - if (trimmedLine === '') { + if (trimmed === '') { continue; } - // Handle "vis [type]" declaration - if (trimmedLine.startsWith('vis ')) { - finishCurrentSection(state); - const chartType = trimmedLine.substring(4).trim(); - state.result.type = chartType; - continue; - } + result.push({ + line, + trimmed, + indent: getIndentLevel(line), + lineNumber: i, + }); + } - // Check for section headers (data, style, etc.) - single word, no indentation - const isSectionHeader = - /^[a-zA-Z_][a-zA-Z0-9_-]*$/.test(trimmedLine) && - indentLevel === 0 && - isKnownSection(trimmedLine); + return result; +} - if (isSectionHeader) { - // Finish previous section - finishCurrentSection(state); - - // Start new section - state.currentSection = trimmedLine; - state.currentArray = []; - state.currentArrayItem = null; - state.isSimpleArray = false; - continue; +/** + * Parse an array of items (data, children, etc.) + * Supports nested children arrays for hierarchical data + */ +function parseArraySection( + lines: LineInfo[], + startIndex: number, + baseIndent: number, +): { items: unknown[]; nextIndex: number } { + const items: unknown[] = []; + let currentItem: Record | null = null; + let isSimpleArray = false; + let i = startIndex; + let firstItemIndent = -1; + + while (i < lines.length) { + const { trimmed, indent } = lines[i]; + + // If we see something at base indent level or lower and it's not an array item, + // we're done with this section + if (indent <= baseIndent && !isArrayItemLine(trimmed)) { + break; } - // If we have no indentation and we're in a section, this is a top-level property - // that ends the section - if (indentLevel === 0 && state.currentSection) { - // Finish the current section - finishCurrentSection(state); + // If we see an array item at a lower or equal indent to base, + // we've reached a sibling at the parent level - return + if (isArrayItemLine(trimmed) && indent <= baseIndent) { + break; + } - // Parse as top-level key-value pair - const kv = parseKeyValue(trimmedLine); - if (kv) { - state.result[kv.key] = parseValue(kv.value); + // Check if this is a new array item at our level + const isThisLevelItem = + isArrayItemLine(trimmed) && (firstItemIndent === -1 || indent === firstItemIndent); + + // Handle array item marker at our level + if (isThisLevelItem) { + // Set the first item indent if not yet set + if (firstItemIndent === -1) { + firstItemIndent = indent; } - continue; - } - // Handle content within sections - if (state.currentSection) { - if (ARRAY_SECTIONS.has(state.currentSection)) { - // Array section (data, categories, series) - if (isArrayItemLine(trimmedLine)) { - // Finish previous array item (for object arrays) - if (state.currentArrayItem !== null && !state.isSimpleArray) { - state.currentArray.push(state.currentArrayItem); - } + // Save previous item if exists + if (currentItem !== null && !isSimpleArray) { + items.push(currentItem); + } - // Parse the rest of the line after - - const itemContent = parseArrayItemLine(trimmedLine); - - if (itemContent) { - // Determine if this is a simple value or a key-value pair - if (isSimpleValue(itemContent)) { - // Simple value array (e.g., histogram data: [78, 88, 60]) - state.isSimpleArray = true; - state.currentArray.push(parseValue(itemContent)); - state.currentArrayItem = null; - } else { - // Object array with key-value pairs - state.currentArrayItem = {}; - const kv = parseKeyValue(itemContent); - if (kv) { - state.currentArrayItem[kv.key] = parseValue(kv.value); - } - } - } else { - // Empty array item marker, start a new object - state.currentArrayItem = {}; - } - } else if (state.currentArrayItem !== null && !state.isSimpleArray) { - // Continue current array item with additional properties (for object arrays) - const kv = parseKeyValue(trimmedLine); + const itemContent = parseArrayItemLine(trimmed); + + if (itemContent) { + // Determine if this is a simple value or a key-value pair + if (isSimpleValue(itemContent)) { + // Simple value array (e.g., histogram data: [78, 88, 60]) + isSimpleArray = true; + items.push(parseValue(itemContent)); + currentItem = null; + } else { + // Object array with key-value pairs + currentItem = {}; + const kv = parseKeyValue(itemContent); if (kv) { - state.currentArrayItem[kv.key] = parseValue(kv.value); + currentItem[kv.key] = parseValue(kv.value); } } - } else if (OBJECT_SECTIONS.has(state.currentSection)) { - // Object section (style) - const kv = parseKeyValue(trimmedLine); - if (kv) { - // Initialize section as object if needed - if (!state.result[state.currentSection]) { - state.result[state.currentSection] = {}; - } - const sectionObj = state.result[state.currentSection] as Record; - sectionObj[kv.key] = parseMultipleValues(kv.value); - } + } else { + // Empty array item marker, start a new object + currentItem = {}; } - } else { - // Top-level key-value pair (not in a section) - const kv = parseKeyValue(trimmedLine); + i++; + continue; + } + + // If we have a first item indent set and we see an array item at a different indent, + // it might be a nested child's item - just skip for now, let nested parsing handle it + if (isArrayItemLine(trimmed) && firstItemIndent !== -1 && indent !== firstItemIndent) { + // This shouldn't happen if we're parsing correctly - skip and continue + i++; + continue; + } + + // Handle properties of current item (including nested children) + if (currentItem !== null && !isSimpleArray) { + const kv = parseKeyValue(trimmed); if (kv) { - state.result[kv.key] = parseValue(kv.value); + // Check if this is a 'children' key (start of nested array) + if (kv.key === 'children' && kv.value === '') { + // Parse nested children array - the children start after this line + const { items: childItems, nextIndex } = parseArraySection(lines, i + 1, indent); + currentItem.children = childItems; + i = nextIndex; + continue; + } else { + currentItem[kv.key] = parseValue(kv.value); + } } } + + i++; } - // Finish any remaining section - finishCurrentSection(state); + // Save last item if exists + if (currentItem !== null && !isSimpleArray) { + items.push(currentItem); + } - return state.result; + return { items, nextIndex: i }; } /** - * Finish processing the current section + * Parse the visualization syntax string into a configuration object */ -function finishCurrentSection(state: ParserState): void { - if (state.currentSection) { - // Finish last array item (for object arrays) - if (state.currentArrayItem !== null && !state.isSimpleArray) { - state.currentArray.push(state.currentArrayItem); - state.currentArrayItem = null; +export function parse(syntax: string): ParsedConfig { + const lines = parseLines(syntax); + const result: ParsedConfig = { type: '' }; + + let i = 0; + while (i < lines.length) { + const { trimmed, indent } = lines[i]; + + // Handle "vis [type]" declaration + if (trimmed.startsWith('vis ')) { + const chartType = trimmed.substring(4).trim(); + result.type = chartType; + i++; + continue; } - // If we have array items, set the section as an array - if (state.currentArray.length > 0) { - state.result[state.currentSection] = state.currentArray; + // Check for section headers (data, style, etc.) - single word, no indentation + const isSectionHeader = + /^[a-zA-Z_][a-zA-Z0-9_-]*$/.test(trimmed) && indent === 0 && isKnownSection(trimmed); + + if (isSectionHeader) { + if (ARRAY_SECTIONS.has(trimmed)) { + // Parse array section + const { items, nextIndex } = parseArraySection(lines, i + 1, indent); + if (items.length > 0) { + result[trimmed] = items; + } + i = nextIndex; + continue; + } else if (OBJECT_SECTIONS.has(trimmed)) { + // Parse object section (style) + const sectionName = trimmed; + result[sectionName] = {}; + i++; + + while (i < lines.length) { + const { trimmed: innerTrimmed, indent: innerIndent } = lines[i]; + + // If indent goes back to 0, we're done with this section + if (innerIndent === 0) { + break; + } + + const kv = parseKeyValue(innerTrimmed); + if (kv) { + (result[sectionName] as Record)[kv.key] = parseMultipleValues( + kv.value, + ); + } + i++; + } + continue; + } + } + + // Top-level key-value pair + if (indent === 0) { + const kv = parseKeyValue(trimmed); + if (kv) { + result[kv.key] = parseValue(kv.value); + } } - state.currentSection = null; - state.currentArray = []; - state.isSimpleArray = false; + i++; } + + return result; } /** diff --git a/src/gpt-vis/index.ts b/src/gpt-vis/index.ts index b9981fbd..c19a6bb4 100644 --- a/src/gpt-vis/index.ts +++ b/src/gpt-vis/index.ts @@ -1,4 +1,4 @@ -import { isVisSyntax, parse } from '../ai/parser'; +import { parse } from '../ai/parser'; import type { VisualizationOptions } from '../types'; import { createVisWrapper, type WrapperInstance } from '../vis-wrapper'; import type { AreaConfig, AreaInstance } from '../vis/area'; @@ -141,9 +141,8 @@ type ChartInstance = * innerRadius: 0.6, * }); * - * // Or render with syntax string - * g.render(` - * vis pie + * // Or render with type and syntax string + * g.render('pie', ` * data * - category 分类一 * value 27 @@ -205,24 +204,40 @@ export class GPTVis { /** * Render a chart based on the provided type and configuration. - * Supports two calling patterns: - * 1. render(type, config) - Traditional API with chart type and config object - * 2. render(syntax) - Syntax string format (vis syntax) * - * @param typeOrSyntax - Chart type (e.g., 'pie', 'bar', 'line') or syntax string - * @param config - Chart configuration (optional, only when first param is type) + * @param type - Chart type (e.g., 'pie', 'bar', 'line') + * @param config - Chart configuration object or syntax string + * + * @example + * ```ts + * // With config object + * g.render('pie', { + * data: [{ category: 'A', value: 30 }, { category: 'B', value: 70 }] + * }); + * + * // With syntax string + * g.render('pie', ` + * data + * - category A + * value 30 + * - category B + * value 70 + * `); + * ``` */ - render(typeOrSyntax: string, config?: any): void { - // Check if the first parameter is a syntax string - if (config === undefined && isVisSyntax(typeOrSyntax)) { - const parsed = parse(typeOrSyntax); - const { type, ...chartConfig } = parsed; + render(type: string, config: string | Record = {}): void { + // If config is a string, parse it as syntax + if (typeof config === 'string') { + // Parse the syntax string (without vis prefix since type is already provided) + const parsed = parse(`vis ${type}\n${config}`); + // eslint-disable-next-line @typescript-eslint/no-unused-vars + const { type: _type, ...chartConfig } = parsed; this.renderChart(type, chartConfig); return; } - // Traditional API: render(type, config) - this.renderChart(typeOrSyntax, config || {}); + // Config is an object + this.renderChart(type, config); } /** From c14c1ede519bafe30e1ca5a0cd3123866dee37dc Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Sun, 1 Feb 2026 13:45:48 +0000 Subject: [PATCH 8/9] fix: expect syntax string with vis prefix in render() Co-authored-by: hustcc <7856674+hustcc@users.noreply.github.com> --- playground/syntax-demo.ts | 8 ++++---- src/gpt-vis/index.ts | 13 +++++++------ 2 files changed, 11 insertions(+), 10 deletions(-) diff --git a/playground/syntax-demo.ts b/playground/syntax-demo.ts index 3b762374..03d339aa 100644 --- a/playground/syntax-demo.ts +++ b/playground/syntax-demo.ts @@ -22,7 +22,7 @@ const pieVis = new GPTVis({ theme: 'academy', }); -pieVis.render(pieSyntax); +pieVis.render('pie', pieSyntax); // Example 2: Line Chart with Syntax const lineSyntax = ` @@ -48,7 +48,7 @@ const lineVis = new GPTVis({ theme: 'default', }); -lineVis.render(lineSyntax); +lineVis.render('line', lineSyntax); // Example 3: Bar Chart with Syntax const barSyntax = ` @@ -72,7 +72,7 @@ const barVis = new GPTVis({ theme: 'default', }); -barVis.render(barSyntax); +barVis.render('bar', barSyntax); // Example 4: Pie with Custom Style const pieSyntaxWithStyle = ` @@ -98,4 +98,4 @@ const pieStyleVis = new GPTVis({ theme: 'default', }); -pieStyleVis.render(pieSyntaxWithStyle); +pieStyleVis.render('pie', pieSyntaxWithStyle); diff --git a/src/gpt-vis/index.ts b/src/gpt-vis/index.ts index c19a6bb4..0921d722 100644 --- a/src/gpt-vis/index.ts +++ b/src/gpt-vis/index.ts @@ -206,7 +206,7 @@ export class GPTVis { * Render a chart based on the provided type and configuration. * * @param type - Chart type (e.g., 'pie', 'bar', 'line') - * @param config - Chart configuration object or syntax string + * @param config - Chart configuration object or syntax string (must include 'vis [type]' prefix) * * @example * ```ts @@ -215,8 +215,9 @@ export class GPTVis { * data: [{ category: 'A', value: 30 }, { category: 'B', value: 70 }] * }); * - * // With syntax string + * // With syntax string (must include vis prefix) * g.render('pie', ` + * vis pie * data * - category A * value 30 @@ -226,12 +227,12 @@ export class GPTVis { * ``` */ render(type: string, config: string | Record = {}): void { - // If config is a string, parse it as syntax + // If config is a string, parse it as syntax (syntax must include vis prefix) if (typeof config === 'string') { - // Parse the syntax string (without vis prefix since type is already provided) - const parsed = parse(`vis ${type}\n${config}`); + const parsed = parse(config); // eslint-disable-next-line @typescript-eslint/no-unused-vars - const { type: _type, ...chartConfig } = parsed; + const { type: _parsedType, ...chartConfig } = parsed; + // Use the type from first parameter, which should match the parsed type this.renderChart(type, chartConfig); return; } From 1d04aeb53a5a98069fa11a4079b486793ab4370d Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Sun, 1 Feb 2026 14:04:56 +0000 Subject: [PATCH 9/9] refactor: simplify render and move tests to root directory Co-authored-by: hustcc <7856674+hustcc@users.noreply.github.com> --- {src/ai/__tests__ => __tests__}/area.test.ts | 2 +- {src/ai/__tests__ => __tests__}/bar.test.ts | 2 +- {src/ai/__tests__ => __tests__}/boxplot.test.ts | 2 +- {src/ai/__tests__ => __tests__}/column.test.ts | 2 +- {src/ai/__tests__ => __tests__}/dual-axes.test.ts | 2 +- .../fishbone-diagram.test.ts | 2 +- .../__tests__ => __tests__}/flow-diagram.test.ts | 2 +- {src/ai/__tests__ => __tests__}/funnel.test.ts | 2 +- {src/ai/__tests__ => __tests__}/heat-map.test.ts | 2 +- {src/ai/__tests__ => __tests__}/histogram.test.ts | 2 +- {src/ai/__tests__ => __tests__}/line.test.ts | 2 +- {src/ai/__tests__ => __tests__}/liquid.test.ts | 2 +- {src/ai/__tests__ => __tests__}/mind-map.test.ts | 2 +- .../__tests__ => __tests__}/network-graph.test.ts | 2 +- .../organization-chart.test.ts | 2 +- {src/ai/__tests__ => __tests__}/parser.test.ts | 2 +- {src/ai/__tests__ => __tests__}/pie.test.ts | 2 +- {src/ai/__tests__ => __tests__}/pin-map.test.ts | 2 +- {src/ai/__tests__ => __tests__}/radar.test.ts | 2 +- {src/ai/__tests__ => __tests__}/sankey.test.ts | 2 +- {src/ai/__tests__ => __tests__}/scatter.test.ts | 2 +- {src/ai/__tests__ => __tests__}/treemap.test.ts | 2 +- {src/ai/__tests__ => __tests__}/venn.test.ts | 2 +- {src/ai/__tests__ => __tests__}/violin.test.ts | 2 +- {src/ai/__tests__ => __tests__}/waterfall.test.ts | 2 +- .../ai/__tests__ => __tests__}/word-cloud.test.ts | 2 +- src/gpt-vis/index.ts | 15 +++------------ vitest.config.ts | 2 +- 28 files changed, 30 insertions(+), 39 deletions(-) rename {src/ai/__tests__ => __tests__}/area.test.ts (97%) rename {src/ai/__tests__ => __tests__}/bar.test.ts (97%) rename {src/ai/__tests__ => __tests__}/boxplot.test.ts (98%) rename {src/ai/__tests__ => __tests__}/column.test.ts (97%) rename {src/ai/__tests__ => __tests__}/dual-axes.test.ts (97%) rename {src/ai/__tests__ => __tests__}/fishbone-diagram.test.ts (98%) rename {src/ai/__tests__ => __tests__}/flow-diagram.test.ts (97%) rename {src/ai/__tests__ => __tests__}/funnel.test.ts (97%) rename {src/ai/__tests__ => __tests__}/heat-map.test.ts (97%) rename {src/ai/__tests__ => __tests__}/histogram.test.ts (97%) rename {src/ai/__tests__ => __tests__}/line.test.ts (98%) rename {src/ai/__tests__ => __tests__}/liquid.test.ts (96%) rename {src/ai/__tests__ => __tests__}/mind-map.test.ts (98%) rename {src/ai/__tests__ => __tests__}/network-graph.test.ts (97%) rename {src/ai/__tests__ => __tests__}/organization-chart.test.ts (98%) rename {src/ai/__tests__ => __tests__}/parser.test.ts (99%) rename {src/ai/__tests__ => __tests__}/pie.test.ts (97%) rename {src/ai/__tests__ => __tests__}/pin-map.test.ts (97%) rename {src/ai/__tests__ => __tests__}/radar.test.ts (97%) rename {src/ai/__tests__ => __tests__}/sankey.test.ts (97%) rename {src/ai/__tests__ => __tests__}/scatter.test.ts (96%) rename {src/ai/__tests__ => __tests__}/treemap.test.ts (98%) rename {src/ai/__tests__ => __tests__}/venn.test.ts (97%) rename {src/ai/__tests__ => __tests__}/violin.test.ts (98%) rename {src/ai/__tests__ => __tests__}/waterfall.test.ts (98%) rename {src/ai/__tests__ => __tests__}/word-cloud.test.ts (97%) diff --git a/src/ai/__tests__/area.test.ts b/__tests__/area.test.ts similarity index 97% rename from src/ai/__tests__/area.test.ts rename to __tests__/area.test.ts index 943e360a..44e7b0bb 100644 --- a/src/ai/__tests__/area.test.ts +++ b/__tests__/area.test.ts @@ -1,5 +1,5 @@ import { describe, expect, it } from 'vitest'; -import { parse } from '../parser'; +import { parse } from '../src/ai/parser'; describe('parse - area chart', () => { it('should parse basic area chart', () => { diff --git a/src/ai/__tests__/bar.test.ts b/__tests__/bar.test.ts similarity index 97% rename from src/ai/__tests__/bar.test.ts rename to __tests__/bar.test.ts index ab0f454f..65a617ce 100644 --- a/src/ai/__tests__/bar.test.ts +++ b/__tests__/bar.test.ts @@ -1,5 +1,5 @@ import { describe, expect, it } from 'vitest'; -import { parse } from '../parser'; +import { parse } from '../src/ai/parser'; describe('parse - bar chart', () => { it('should parse basic bar chart', () => { diff --git a/src/ai/__tests__/boxplot.test.ts b/__tests__/boxplot.test.ts similarity index 98% rename from src/ai/__tests__/boxplot.test.ts rename to __tests__/boxplot.test.ts index ee3459a2..b93a0516 100644 --- a/src/ai/__tests__/boxplot.test.ts +++ b/__tests__/boxplot.test.ts @@ -1,5 +1,5 @@ import { describe, expect, it } from 'vitest'; -import { parse } from '../parser'; +import { parse } from '../src/ai/parser'; describe('parse - boxplot chart', () => { it('should parse basic boxplot chart', () => { diff --git a/src/ai/__tests__/column.test.ts b/__tests__/column.test.ts similarity index 97% rename from src/ai/__tests__/column.test.ts rename to __tests__/column.test.ts index 2d3755be..2cc990ba 100644 --- a/src/ai/__tests__/column.test.ts +++ b/__tests__/column.test.ts @@ -1,5 +1,5 @@ import { describe, expect, it } from 'vitest'; -import { parse } from '../parser'; +import { parse } from '../src/ai/parser'; describe('parse - column chart', () => { it('should parse basic column chart', () => { diff --git a/src/ai/__tests__/dual-axes.test.ts b/__tests__/dual-axes.test.ts similarity index 97% rename from src/ai/__tests__/dual-axes.test.ts rename to __tests__/dual-axes.test.ts index 445e204f..820ba30a 100644 --- a/src/ai/__tests__/dual-axes.test.ts +++ b/__tests__/dual-axes.test.ts @@ -1,5 +1,5 @@ import { describe, expect, it } from 'vitest'; -import { parse } from '../parser'; +import { parse } from '../src/ai/parser'; describe('parse - dual-axes chart', () => { it('should parse basic dual-axes chart with categories and series', () => { diff --git a/src/ai/__tests__/fishbone-diagram.test.ts b/__tests__/fishbone-diagram.test.ts similarity index 98% rename from src/ai/__tests__/fishbone-diagram.test.ts rename to __tests__/fishbone-diagram.test.ts index 47c49873..eb885f7c 100644 --- a/src/ai/__tests__/fishbone-diagram.test.ts +++ b/__tests__/fishbone-diagram.test.ts @@ -1,5 +1,5 @@ import { describe, expect, it } from 'vitest'; -import { parse } from '../parser'; +import { parse } from '../src/ai/parser'; describe('parse - fishbone-diagram chart', () => { it('should parse basic fishbone-diagram', () => { diff --git a/src/ai/__tests__/flow-diagram.test.ts b/__tests__/flow-diagram.test.ts similarity index 97% rename from src/ai/__tests__/flow-diagram.test.ts rename to __tests__/flow-diagram.test.ts index 88a5680c..6c6c3d7c 100644 --- a/src/ai/__tests__/flow-diagram.test.ts +++ b/__tests__/flow-diagram.test.ts @@ -1,5 +1,5 @@ import { describe, expect, it } from 'vitest'; -import { parse } from '../parser'; +import { parse } from '../src/ai/parser'; describe('parse - flow-diagram chart', () => { it('should parse basic flow-diagram with nodes', () => { diff --git a/src/ai/__tests__/funnel.test.ts b/__tests__/funnel.test.ts similarity index 97% rename from src/ai/__tests__/funnel.test.ts rename to __tests__/funnel.test.ts index 326c6fdc..5706dace 100644 --- a/src/ai/__tests__/funnel.test.ts +++ b/__tests__/funnel.test.ts @@ -1,5 +1,5 @@ import { describe, expect, it } from 'vitest'; -import { parse } from '../parser'; +import { parse } from '../src/ai/parser'; describe('parse - funnel chart', () => { it('should parse basic funnel chart', () => { diff --git a/src/ai/__tests__/heat-map.test.ts b/__tests__/heat-map.test.ts similarity index 97% rename from src/ai/__tests__/heat-map.test.ts rename to __tests__/heat-map.test.ts index 43b7182c..d1d3d0f6 100644 --- a/src/ai/__tests__/heat-map.test.ts +++ b/__tests__/heat-map.test.ts @@ -1,5 +1,5 @@ import { describe, expect, it } from 'vitest'; -import { parse } from '../parser'; +import { parse } from '../src/ai/parser'; describe('parse - heat-map chart', () => { it('should parse basic heat-map chart', () => { diff --git a/src/ai/__tests__/histogram.test.ts b/__tests__/histogram.test.ts similarity index 97% rename from src/ai/__tests__/histogram.test.ts rename to __tests__/histogram.test.ts index db1bb2c6..18d3c04d 100644 --- a/src/ai/__tests__/histogram.test.ts +++ b/__tests__/histogram.test.ts @@ -1,5 +1,5 @@ import { describe, expect, it } from 'vitest'; -import { parse } from '../parser'; +import { parse } from '../src/ai/parser'; describe('parse - histogram chart', () => { it('should parse basic histogram chart with flat number array', () => { diff --git a/src/ai/__tests__/line.test.ts b/__tests__/line.test.ts similarity index 98% rename from src/ai/__tests__/line.test.ts rename to __tests__/line.test.ts index c0f61a4a..2ccb64c8 100644 --- a/src/ai/__tests__/line.test.ts +++ b/__tests__/line.test.ts @@ -1,5 +1,5 @@ import { describe, expect, it } from 'vitest'; -import { parse } from '../parser'; +import { parse } from '../src/ai/parser'; describe('parse - line chart', () => { it('should parse basic line chart', () => { diff --git a/src/ai/__tests__/liquid.test.ts b/__tests__/liquid.test.ts similarity index 96% rename from src/ai/__tests__/liquid.test.ts rename to __tests__/liquid.test.ts index 8fbe8b24..c77a26fd 100644 --- a/src/ai/__tests__/liquid.test.ts +++ b/__tests__/liquid.test.ts @@ -1,5 +1,5 @@ import { describe, expect, it } from 'vitest'; -import { parse } from '../parser'; +import { parse } from '../src/ai/parser'; describe('parse - liquid chart', () => { it('should parse basic liquid chart', () => { diff --git a/src/ai/__tests__/mind-map.test.ts b/__tests__/mind-map.test.ts similarity index 98% rename from src/ai/__tests__/mind-map.test.ts rename to __tests__/mind-map.test.ts index 3941a4b3..5c16d3ff 100644 --- a/src/ai/__tests__/mind-map.test.ts +++ b/__tests__/mind-map.test.ts @@ -1,5 +1,5 @@ import { describe, expect, it } from 'vitest'; -import { parse } from '../parser'; +import { parse } from '../src/ai/parser'; describe('parse - mind-map chart', () => { it('should parse basic mind-map chart', () => { diff --git a/src/ai/__tests__/network-graph.test.ts b/__tests__/network-graph.test.ts similarity index 97% rename from src/ai/__tests__/network-graph.test.ts rename to __tests__/network-graph.test.ts index 91fbf3f9..de1222b0 100644 --- a/src/ai/__tests__/network-graph.test.ts +++ b/__tests__/network-graph.test.ts @@ -1,5 +1,5 @@ import { describe, expect, it } from 'vitest'; -import { parse } from '../parser'; +import { parse } from '../src/ai/parser'; describe('parse - network-graph chart', () => { it('should parse basic network-graph with nodes', () => { diff --git a/src/ai/__tests__/organization-chart.test.ts b/__tests__/organization-chart.test.ts similarity index 98% rename from src/ai/__tests__/organization-chart.test.ts rename to __tests__/organization-chart.test.ts index 003b567f..ebed22b3 100644 --- a/src/ai/__tests__/organization-chart.test.ts +++ b/__tests__/organization-chart.test.ts @@ -1,5 +1,5 @@ import { describe, expect, it } from 'vitest'; -import { parse } from '../parser'; +import { parse } from '../src/ai/parser'; describe('parse - organization-chart', () => { it('should parse basic organization-chart', () => { diff --git a/src/ai/__tests__/parser.test.ts b/__tests__/parser.test.ts similarity index 99% rename from src/ai/__tests__/parser.test.ts rename to __tests__/parser.test.ts index 2e6e9205..faec741f 100644 --- a/src/ai/__tests__/parser.test.ts +++ b/__tests__/parser.test.ts @@ -1,5 +1,5 @@ import { describe, expect, it } from 'vitest'; -import { isVisSyntax, parse } from '../parser'; +import { isVisSyntax, parse } from '../src/ai/parser'; describe('isVisSyntax', () => { it('should return true for valid vis syntax', () => { diff --git a/src/ai/__tests__/pie.test.ts b/__tests__/pie.test.ts similarity index 97% rename from src/ai/__tests__/pie.test.ts rename to __tests__/pie.test.ts index 5758ab7b..7b3c8f02 100644 --- a/src/ai/__tests__/pie.test.ts +++ b/__tests__/pie.test.ts @@ -1,5 +1,5 @@ import { describe, expect, it } from 'vitest'; -import { parse } from '../parser'; +import { parse } from '../src/ai/parser'; describe('parse - pie chart', () => { it('should parse basic pie chart', () => { diff --git a/src/ai/__tests__/pin-map.test.ts b/__tests__/pin-map.test.ts similarity index 97% rename from src/ai/__tests__/pin-map.test.ts rename to __tests__/pin-map.test.ts index 8f8fe39c..3c12e871 100644 --- a/src/ai/__tests__/pin-map.test.ts +++ b/__tests__/pin-map.test.ts @@ -1,5 +1,5 @@ import { describe, expect, it } from 'vitest'; -import { parse } from '../parser'; +import { parse } from '../src/ai/parser'; describe('parse - pin-map chart', () => { it('should parse basic pin-map chart', () => { diff --git a/src/ai/__tests__/radar.test.ts b/__tests__/radar.test.ts similarity index 97% rename from src/ai/__tests__/radar.test.ts rename to __tests__/radar.test.ts index 891e4d5a..deb3fa95 100644 --- a/src/ai/__tests__/radar.test.ts +++ b/__tests__/radar.test.ts @@ -1,5 +1,5 @@ import { describe, expect, it } from 'vitest'; -import { parse } from '../parser'; +import { parse } from '../src/ai/parser'; describe('parse - radar chart', () => { it('should parse basic radar chart', () => { diff --git a/src/ai/__tests__/sankey.test.ts b/__tests__/sankey.test.ts similarity index 97% rename from src/ai/__tests__/sankey.test.ts rename to __tests__/sankey.test.ts index dba7d37f..716d1bc5 100644 --- a/src/ai/__tests__/sankey.test.ts +++ b/__tests__/sankey.test.ts @@ -1,5 +1,5 @@ import { describe, expect, it } from 'vitest'; -import { parse } from '../parser'; +import { parse } from '../src/ai/parser'; describe('parse - sankey chart', () => { it('should parse basic sankey chart', () => { diff --git a/src/ai/__tests__/scatter.test.ts b/__tests__/scatter.test.ts similarity index 96% rename from src/ai/__tests__/scatter.test.ts rename to __tests__/scatter.test.ts index 3d4ceb97..083faa32 100644 --- a/src/ai/__tests__/scatter.test.ts +++ b/__tests__/scatter.test.ts @@ -1,5 +1,5 @@ import { describe, expect, it } from 'vitest'; -import { parse } from '../parser'; +import { parse } from '../src/ai/parser'; describe('parse - scatter chart', () => { it('should parse basic scatter chart', () => { diff --git a/src/ai/__tests__/treemap.test.ts b/__tests__/treemap.test.ts similarity index 98% rename from src/ai/__tests__/treemap.test.ts rename to __tests__/treemap.test.ts index ed175033..bccde5fa 100644 --- a/src/ai/__tests__/treemap.test.ts +++ b/__tests__/treemap.test.ts @@ -1,5 +1,5 @@ import { describe, expect, it } from 'vitest'; -import { parse } from '../parser'; +import { parse } from '../src/ai/parser'; describe('parse - treemap chart', () => { it('should parse basic treemap chart', () => { diff --git a/src/ai/__tests__/venn.test.ts b/__tests__/venn.test.ts similarity index 97% rename from src/ai/__tests__/venn.test.ts rename to __tests__/venn.test.ts index 7a414d2b..a015108a 100644 --- a/src/ai/__tests__/venn.test.ts +++ b/__tests__/venn.test.ts @@ -1,5 +1,5 @@ import { describe, expect, it } from 'vitest'; -import { parse } from '../parser'; +import { parse } from '../src/ai/parser'; describe('parse - venn chart', () => { it('should parse basic venn chart with two sets', () => { diff --git a/src/ai/__tests__/violin.test.ts b/__tests__/violin.test.ts similarity index 98% rename from src/ai/__tests__/violin.test.ts rename to __tests__/violin.test.ts index 8e34d785..76dc666c 100644 --- a/src/ai/__tests__/violin.test.ts +++ b/__tests__/violin.test.ts @@ -1,5 +1,5 @@ import { describe, expect, it } from 'vitest'; -import { parse } from '../parser'; +import { parse } from '../src/ai/parser'; describe('parse - violin chart', () => { it('should parse basic violin chart', () => { diff --git a/src/ai/__tests__/waterfall.test.ts b/__tests__/waterfall.test.ts similarity index 98% rename from src/ai/__tests__/waterfall.test.ts rename to __tests__/waterfall.test.ts index ca797b46..48bd16c9 100644 --- a/src/ai/__tests__/waterfall.test.ts +++ b/__tests__/waterfall.test.ts @@ -1,5 +1,5 @@ import { describe, expect, it } from 'vitest'; -import { parse } from '../parser'; +import { parse } from '../src/ai/parser'; describe('parse - waterfall chart', () => { it('should parse basic waterfall chart', () => { diff --git a/src/ai/__tests__/word-cloud.test.ts b/__tests__/word-cloud.test.ts similarity index 97% rename from src/ai/__tests__/word-cloud.test.ts rename to __tests__/word-cloud.test.ts index 49af449e..26363c51 100644 --- a/src/ai/__tests__/word-cloud.test.ts +++ b/__tests__/word-cloud.test.ts @@ -1,5 +1,5 @@ import { describe, expect, it } from 'vitest'; -import { parse } from '../parser'; +import { parse } from '../src/ai/parser'; describe('parse - word-cloud chart', () => { it('should parse basic word-cloud chart', () => { diff --git a/src/gpt-vis/index.ts b/src/gpt-vis/index.ts index 0921d722..fa0464fe 100644 --- a/src/gpt-vis/index.ts +++ b/src/gpt-vis/index.ts @@ -227,18 +227,9 @@ export class GPTVis { * ``` */ render(type: string, config: string | Record = {}): void { - // If config is a string, parse it as syntax (syntax must include vis prefix) - if (typeof config === 'string') { - const parsed = parse(config); - // eslint-disable-next-line @typescript-eslint/no-unused-vars - const { type: _parsedType, ...chartConfig } = parsed; - // Use the type from first parameter, which should match the parsed type - this.renderChart(type, chartConfig); - return; - } - - // Config is an object - this.renderChart(type, config); + // If config is a string, parse it as syntax + const chartConfig = typeof config === 'string' ? parse(config) : config; + this.renderChart(type, chartConfig); } /** diff --git a/vitest.config.ts b/vitest.config.ts index 214ae2d2..a2846c06 100644 --- a/vitest.config.ts +++ b/vitest.config.ts @@ -2,7 +2,7 @@ import { defineConfig } from 'vitest/config'; export default defineConfig({ test: { - include: ['src/**/__tests__/**/*.test.ts', 'src/**/__tests__/**/*.spec.ts'], + include: ['__tests__/**/*.test.ts', '__tests__/**/*.spec.ts'], globals: true, environment: 'node', },