feat: column, bar and line charts support series

Author: ulleo

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 查询分类的列(有别名用别名,去掉外层的反引号、双引号、方括号)"}}}}

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' })
+    }
   }
 }

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' })
+    }
   }
 }

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: {