Add File

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

@@ -0,0 +1,77 @@
+import { BaseChart, type ChartAxis, type ChartData } 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<ChartAxis>, data: Array<ChartData>) {
+    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: 360,
+      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()
+    this.resizeObserver?.disconnect()
+  }
+}