feat: add table chart

Author: ulleo

frontend/package.json

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@antv/g2": "^5.3.3",
+    "@antv/s2": "^2.4.3",
     "@npkg/tinymce-plugins": "^0.0.7",
     "@tinymce/tinymce-vue": "^5.1.0",
     "dayjs": "^1.11.13",

frontend/src/i18n/index.ts

@@ -1,8 +1,8 @@
 import { createI18n } from 'vue-i18n'
 import en from './en.json'
 import zhCN from './zh-CN.json'
-import elementEnLocale from 'element-plus/es/locale/lang/en'
-import elementZhLocale from 'element-plus/es/locale/lang/zh-cn'
+import elementEnLocale from 'element-plus-secondary/es/locale/lang/en'
+import elementZhLocale from 'element-plus-secondary/es/locale/lang/zh-cn'
 
 const getDefaultLocale = () => {
   /* const savedLang = localStorage.getItem('lang')

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

@@ -6,7 +6,7 @@ export class Bar extends BaseG2Chart {
         super(id, "bar");
     }
 
-    init(axis: Array<{ name: string; value: string; type: "x" | "y" }>, data: Array<{ name: string; value: string }>) {
+    init(axis: Array<{ name: string; value: string; type: "x" | "y" }>, data: Array<{ [key: string]: any }>) {
         super.init(axis, data);
         const x = this.axis.filter(item => item.type === "x");
         const y = this.axis.filter(item => item.type === "y");

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

@@ -6,7 +6,7 @@ export class Column extends BaseG2Chart {
         super(id, "column");
     }
 
-    init(axis: Array<{ name: string; value: string; type: "x" | "y" }>, data: Array<{ name: string; value: string }>) {
+    init(axis: Array<{ name: string; value: string; type: "x" | "y" }>, data: Array<{ [key: string]: any }>) {
         super.init(axis, data);
 
         const x = this.axis.filter(item => item.type === "x");

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

@@ -6,7 +6,7 @@ export class Line extends BaseG2Chart {
         super(id, "line");
     }
 
-    init(axis: Array<{ name: string; value: string; type: "x" | "y" }>, data: Array<{ name: string; value: string }>) {
+    init(axis: Array<{ name: string; value: string; type: "x" | "y" }>, data: Array<{ [key: string]: any }>) {
         super.init(axis, data);
 
         const x = this.axis.filter(item => item.type === "x");

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

@@ -0,0 +1,57 @@
+import {BaseChart} from "@/views/chat/component/BaseChart.ts";
+import {TableSheet, type S2Options, type S2DataConfig, type S2MountContainer} from "@antv/s2";
+
+export class Table extends BaseChart {
+
+    table?: TableSheet = undefined
+
+    container: S2MountContainer | null = null
+
+    constructor(id: string) {
+        super(id, "table");
+        this.container = document.getElementById(id);
+    }
+
+    init(axis: Array<{ name: string; value: string; type: "x" | "y" }>, data: Array<{ [key: string]: any }>) {
+        super.init(axis, data);
+
+        const s2DataConfig: S2DataConfig = {
+            fields: {
+                columns: this.axis?.map(a => a.value) ?? [],
+            },
+            meta: this.axis?.map(a => {
+                return {
+                    field: a.value,
+                    name: a.name
+                }
+            }) ?? [],
+            data: this.data,
+        };
+
+        const s2Options: S2Options = {
+            width: 600,
+            height: 480,
+            placeholder: {
+                cell: '-',
+                empty: {
+                    icon: 'Empty',
+                    description: 'No Data',
+                },
+            },
+        };
+
+        if (this.container) {
+            this.table = new TableSheet(this.container, s2DataConfig, s2Options);
+        }
+
+    }
+
+    render() {
+        this.table?.render()
+    }
+
+    destroy() {
+        this.table?.destroy()
+    }
+
+}

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

@@ -2,11 +2,14 @@ import {BaseChart} from "@/views/chat/component/BaseChart.ts";
 import {Bar} from "@/views/chat/component/charts/Bar.ts";
 import {Column} from "@/views/chat/component/charts/Column.ts";
 import {Line} from "@/views/chat/component/charts/Line.ts";
+import {Table} from "@/views/chat/component/charts/Table.ts";
 
 const CHART_TYPE_MAP: { [key: string]: any } = {
+    "table": Table,
     "column": Column,
     "bar": Bar,
     "line": Line,
+    "pie": undefined
 }
 
 const isParent = (type: any, parentType: any) => {