feat: chart style

Author: ulleo

backend/template.yaml

@@ -20,8 +20,8 @@ template:
       - 如果根据提供的表结构不能生成符合问题与条件的SQL，回答：
       {{"success":false,"message":"无法生成SQL的原因"}}
       - 如果问题是图表展示相关且与生成SQL查询无关时，请参考上一次回答的SQL来生成SQL
-      - 如果问题是图表展示相关，可参考的图表类型为表格(table)、条形图(bar)、折线图(line)或饼图(pie)，返回的JSON：
-       {{"success":true,"sql":"生成的SQL语句","chart-type":"选择的图表类型(table/bar/line/pie)"}}
+      - 如果问题是图表展示相关，可参考的图表类型为表格(table)、柱状图(column)、条形图(bar)、折线图(line)或饼图(pie)，返回的JSON：
+       {{"success":true,"sql":"生成的SQL语句","chart-type":"选择的图表类型(table/column/bar/line/pie)"}}
       
       ### 请遵守以下输出要求:      
       请逐步推理后给出答案
@@ -48,6 +48,9 @@ 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 轴的列(有别名用别名)"}}}}
+      必须从 SQL 查询列中提取“x”和“y”。
       - 如果需要条形图，则生成的 JSON 格式应为：
       {{"type":"bar", "title": "标题", "axis": {{"x": {{"name":"x轴的中文名称", "value": "SQL 查询 x 轴的列(有别名用别名)"}}, "y": {{"name":"y轴的中文名称","value": "SQL 查询 y 轴的列(有别名用别名)"}}}}
       必须从 SQL 查询列中提取“x”和“y”。

frontend/package.json

@@ -16,6 +16,7 @@
     "dayjs": "^1.11.13",
     "element-plus-secondary": "^1.0.0",
     "lodash": "^4.17.21",
+    "lodash-es": "^4.17.21",
     "snowflake-id": "^1.1.0",
     "tinymce": "^5.8.2",
     "vue": "^3.5.13",

frontend/src/views/chat/ChatAnswer.vue

@@ -148,16 +148,18 @@ function onTypeChange(type: string) {
           </template>
           <template v-else-if="settings.type === 'chart'">
             <div>
-              <div v-if="message.record.chart">
-                <Component
-                    ref="chartRef"
-                    v-if="message.record.id"
-                    :id="message.record.id"
-                    :type="chartType"
-                    :columns="chartObject?.columns"
-                    :x="xAxis"
-                    :y="yAxis"
-                    :data="dataObject.data"/>
+              <div v-if="message.record.chart" class="chart-base-container">
+                <div>
+                  <Component
+                      ref="chartRef"
+                      v-if="message.record.id"
+                      :id="message.record.id"
+                      :type="chartType"
+                      :columns="chartObject?.columns"
+                      :x="xAxis"
+                      :y="yAxis"
+                      :data="dataObject.data"/>
+                </div>
               </div>
             </div>
             <div v-if="message.record.error" style="color: red">
@@ -184,4 +186,9 @@ function onTypeChange(type: string) {
 .type-tabs {
   margin-right: 24px;
 }
+
+.chart-base-container {
+  padding: 20px;
+  background: rgba(224,224,226,0.29);
+}
 </style>

frontend/src/views/chat/component/BaseG2Chart.ts

@@ -11,6 +11,12 @@ export abstract class BaseG2Chart extends BaseChart {
             container: id,
             autoFit: true,
         })
+
+        this.chart.theme({
+            view: {
+                viewFill: '#FFFFFF',
+            },
+        })
     }
 
     render() {

frontend/src/views/chat/component/Component.vue

@@ -76,7 +76,7 @@ onUnmounted(() => {
 .chart-container {
   height: 100%;
   width: 100%;
-  min-height: 200px;
-  min-width: 200px;
+  min-height: 360px;
+  min-width: 360px;
 }
 </style>

frontend/src/views/chat/component/charts/Table.ts

@@ -1,15 +1,36 @@
 import {BaseChart} from "@/views/chat/component/BaseChart.ts";
 import {TableSheet, type S2Options, type S2DataConfig, type S2MountContainer} from "@antv/s2";
+import {debounce} from "lodash-es";
 
 export class Table extends BaseChart {
 
     table?: TableSheet = undefined
 
     container: S2MountContainer | null = null
 
+    debounceRender: any
+
+    resizeObserver: ResizeObserver
+
     constructor(id: string) {
         super(id, "table");
         this.container = document.getElementById(id);
+
+        this.debounceRender = debounce(async (width?: number, height?: number) => {
+            if (this.table) {
+                this.table.changeSheetSize(width, height);
+                await this.table.render(false);
+            }
+        }, 200);
+
+        this.resizeObserver = new ResizeObserver(([entry] = []) => {
+            const [size] = entry.borderBoxSize || [];
+            this.debounceRender(size.inlineSize, size.blockSize);
+        });
+
+        if (this.container?.parentElement) {
+            this.resizeObserver.observe(this.container.parentElement);
+        }
     }
 
     init(axis: Array<{ name: string; value: string; type: "x" | "y" }>, data: Array<{ [key: string]: any }>) {
@@ -30,7 +51,7 @@ export class Table extends BaseChart {
 
         const s2Options: S2Options = {
             width: 600,
-            height: 480,
+            height: 360,
             placeholder: {
                 cell: '-',
                 empty: {
@@ -52,6 +73,7 @@ export class Table extends BaseChart {
 
     destroy() {
         this.table?.destroy()
+        this.resizeObserver?.disconnect()
     }
 
 }