From 8ffa457231d098d0f34c5a06e9011b375bd2a614 Mon Sep 17 00:00:00 2001
From: ulleo <ulleo.wang@gmail.com>
Date: Mon, 16 Jun 2025 14:28:53 +0800
Subject: [PATCH] feat: column, bar and line charts support series

---
 backend/template.yaml                              | 12 ++++++------
 frontend/src/views/chat/component/charts/Bar.ts    |  6 ++++++
 frontend/src/views/chat/component/charts/Column.ts |  5 +++++
 frontend/src/views/chat/component/charts/Line.ts   |  5 +++++
 4 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/backend/template.yaml b/backend/template.yaml
index 7735be7d..1f017951 100644
--- a/backend/template.yaml
+++ b/backend/template.yaml
@@ -48,14 +48,14 @@ template:
       - 如果需要表格，则生成的 JSON 格式应为：
       {{"type":"table", "title": "标题", "columns": [{{"name":"中文字段名1", "value": "SQL 查询列 1(有别名用别名,去掉外层的反引号、双引号、方括号)"}}, {{"name": "中文字段名 2", "value": "SQL 查询列 2(有别名用别名,去掉外层的反引号、双引号、方括号)"}}]}}
       必须从 SQL 查询列中提取“columns”。
-      - 如果需要柱状图，则生成的 JSON 格式应为：
-      {{"type":"column", "title": "标题", "axis": {{"x": {{"name":"x轴的中文名称", "value": "SQL 查询 x 轴的列(有别名用别名,去掉外层的反引号、双引号、方括号)"}}, "y": {{"name":"y轴的中文名称","value": "SQL 查询 y 轴的列(有别名用别名,去掉外层的反引号、双引号、方括号)"}}}}
+      - 如果需要柱状图，则生成的 JSON 格式应为（如果有分类则在JSON中返回series）：
+      {{"type":"column", "title": "标题", "axis": {{"x": {{"name":"x轴的中文名称", "value": "SQL 查询 x 轴的列(有别名用别名,去掉外层的反引号、双引号、方括号)"}}, "y": {{"name":"y轴的中文名称","value": "SQL 查询 y 轴的列(有别名用别名,去掉外层的反引号、双引号、方括号)"}}, "series": {{"name":"分类的中文名称","value":"SQL 查询分类的列(有别名用别名,去掉外层的反引号、双引号、方括号)"}}}}}}
       必须从 SQL 查询列中提取“x”和“y”。
-      - 如果需要条形图，则生成的 JSON 格式应为：
-      {{"type":"bar", "title": "标题", "axis": {{"x": {{"name":"x轴的中文名称", "value": "SQL 查询 x 轴的列(有别名用别名,去掉外层的反引号、双引号、方括号)"}}, "y": {{"name":"y轴的中文名称","value": "SQL 查询 y 轴的列(有别名用别名,去掉外层的反引号、双引号、方括号)"}}}}
+      - 如果需要条形图，则生成的 JSON 格式应为（如果有分类则在JSON中返回series）：
+      {{"type":"bar", "title": "标题", "axis": {{"x": {{"name":"x轴的中文名称", "value": "SQL 查询 x 轴的列(有别名用别名,去掉外层的反引号、双引号、方括号)"}}, "y": {{"name":"y轴的中文名称","value": "SQL 查询 y 轴的列(有别名用别名,去掉外层的反引号、双引号、方括号)"}}, "series": {{"name":"分类的中文名称","value":"SQL 查询分类的列(有别名用别名,去掉外层的反引号、双引号、方括号)"}}}}}}
       必须从 SQL 查询列中提取“x”和“y”。
-      - 如果需要折线图，则生成的 JSON 格式应为：
-      {{"type":"line", "title": "标题", "axis": {{"x": {{"name":"x轴的中文名称","value": "SQL 查询 x 轴的列(有别名用别名,去掉外层的反引号、双引号、方括号)"}}, "y": {{"name":"y轴的中文名称","value": "SQL 查询 y 轴的列(有别名用别名,去掉外层的反引号、双引号、方括号)"}}}}
+      - 如果需要折线图，则生成的 JSON 格式应为（如果有分类则在JSON中返回series）：
+      {{"type":"line", "title": "标题", "axis": {{"x": {{"name":"x轴的中文名称","value": "SQL 查询 x 轴的列(有别名用别名,去掉外层的反引号、双引号、方括号)"}}, "y": {{"name":"y轴的中文名称","value": "SQL 查询 y 轴的列(有别名用别名,去掉外层的反引号、双引号、方括号)"}}, "series": {{"name":"分类的中文名称","value":"SQL 查询分类的列(有别名用别名,去掉外层的反引号、双引号、方括号)"}}}}}}
       其中“x”和“y”必须从SQL查询列中提取。
       - 如果需要饼图，则生成的 JSON 格式应为：
       {{"type":"pie", "title": "标题", "axis": {{"y": {{"值轴的中文名称","value":"SQL 查询数值的列(有别名用别名,去掉外层的反引号、双引号、方括号)"}}, "series": {{"name":"分类的中文名称","value":"SQL 查询分类的列(有别名用别名,去掉外层的反引号、双引号、方括号)"}}}}
diff --git a/frontend/src/views/chat/component/charts/Bar.ts b/frontend/src/views/chat/component/charts/Bar.ts
index c5eeaad3..144f7c7a 100644
--- a/frontend/src/views/chat/component/charts/Bar.ts
+++ b/frontend/src/views/chat/component/charts/Bar.ts
@@ -8,8 +8,10 @@ export class Bar extends BaseG2Chart {
 
   init(axis: Array<ChartAxis>, data: Array<ChartData>) {
     super.init(axis, data)
+
     const x = this.axis.filter((item) => item.type === 'x')
     const y = this.axis.filter((item) => item.type === 'y')
+    const series = this.axis.filter((item) => item.type === 'series')
 
     if (x.length == 0 || y.length == 0) {
       return
@@ -28,5 +30,9 @@ export class Bar extends BaseG2Chart {
         nice: true,
       })
       .interaction('elementHighlight', { background: true })
+
+    if (series.length > 0) {
+      this.chart?.encode('color', series[0].value).transform({ type: 'stackY' })
+    }
   }
 }
diff --git a/frontend/src/views/chat/component/charts/Column.ts b/frontend/src/views/chat/component/charts/Column.ts
index dcb0402c..d49821b8 100644
--- a/frontend/src/views/chat/component/charts/Column.ts
+++ b/frontend/src/views/chat/component/charts/Column.ts
@@ -11,6 +11,7 @@ export class Column extends BaseG2Chart {
 
     const x = this.axis.filter((item) => item.type === 'x')
     const y = this.axis.filter((item) => item.type === 'y')
+    const series = this.axis.filter((item) => item.type === 'series')
 
     if (x.length == 0 || y.length == 0) {
       return
@@ -28,5 +29,9 @@ export class Column extends BaseG2Chart {
         nice: true,
       })
       .interaction('elementHighlight', { background: true })
+
+    if (series.length > 0) {
+      this.chart?.encode('color', series[0].value).transform({ type: 'stackY' })
+    }
   }
 }
diff --git a/frontend/src/views/chat/component/charts/Line.ts b/frontend/src/views/chat/component/charts/Line.ts
index 1789db3c..b88cfdb4 100644
--- a/frontend/src/views/chat/component/charts/Line.ts
+++ b/frontend/src/views/chat/component/charts/Line.ts
@@ -11,6 +11,7 @@ export class Line extends BaseG2Chart {
 
     const x = this.axis.filter((item) => item.type === 'x')
     const y = this.axis.filter((item) => item.type === 'y')
+    const series = this.axis.filter((item) => item.type === 'series')
 
     if (x.length == 0 || y.length == 0) {
       return
@@ -27,6 +28,10 @@ export class Line extends BaseG2Chart {
         nice: true,
       })
 
+    if (series.length > 0) {
+      this.chart?.encode('color', series[0].value)
+    }
+
     this.chart?.line().label({
       text: y[0].value,
       style: {