From a3844211fce46d373924631f276f0f9480b7a4d4 Mon Sep 17 00:00:00 2001 From: ulleo Date: Tue, 10 Jun 2025 11:09:27 +0800 Subject: [PATCH] feat: add table chart --- frontend/package.json | 1 + frontend/src/i18n/index.ts | 4 +- .../src/views/chat/component/charts/Bar.ts | 2 +- .../src/views/chat/component/charts/Column.ts | 2 +- .../src/views/chat/component/charts/Line.ts | 2 +- .../src/views/chat/component/charts/Table.ts | 57 +++++++++++++++++++ frontend/src/views/chat/component/index.ts | 3 + 7 files changed, 66 insertions(+), 5 deletions(-) create mode 100644 frontend/src/views/chat/component/charts/Table.ts diff --git a/frontend/package.json b/frontend/package.json index ae6836ec..2d474153 100644 --- a/frontend/package.json +++ b/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", diff --git a/frontend/src/i18n/index.ts b/frontend/src/i18n/index.ts index 9fb39600..10cd6420 100644 --- a/frontend/src/i18n/index.ts +++ b/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') diff --git a/frontend/src/views/chat/component/charts/Bar.ts b/frontend/src/views/chat/component/charts/Bar.ts index c1ff190e..91813210 100644 --- a/frontend/src/views/chat/component/charts/Bar.ts +++ b/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"); diff --git a/frontend/src/views/chat/component/charts/Column.ts b/frontend/src/views/chat/component/charts/Column.ts index 54d6c577..041e750c 100644 --- a/frontend/src/views/chat/component/charts/Column.ts +++ b/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"); diff --git a/frontend/src/views/chat/component/charts/Line.ts b/frontend/src/views/chat/component/charts/Line.ts index 8269215d..45a5f777 100644 --- a/frontend/src/views/chat/component/charts/Line.ts +++ b/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"); diff --git a/frontend/src/views/chat/component/charts/Table.ts b/frontend/src/views/chat/component/charts/Table.ts new file mode 100644 index 00000000..68cea9ca --- /dev/null +++ b/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() + } + +} \ No newline at end of file diff --git a/frontend/src/views/chat/component/index.ts b/frontend/src/views/chat/component/index.ts index 85cb1b15..8d6366d6 100644 --- a/frontend/src/views/chat/component/index.ts +++ b/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) => {