From fa3f57e1b799917ba3b558ad10e9634335f93898 Mon Sep 17 00:00:00 2001
From: ulleo <ulleo.wang@gmail.com>
Date: Tue, 17 Jun 2025 15:38:46 +0800
Subject: [PATCH] feat: chart label & tooltip

---
 .../src/views/chat/component/charts/Bar.ts    | 12 +++++++++
 .../src/views/chat/component/charts/Column.ts | 12 +++++++++
 .../src/views/chat/component/charts/Line.ts   | 25 +++++++++++++------
 .../src/views/chat/component/charts/Pie.ts    |  3 +++
 4 files changed, 44 insertions(+), 8 deletions(-)

diff --git a/frontend/src/views/chat/component/charts/Bar.ts b/frontend/src/views/chat/component/charts/Bar.ts
index 8df6cbc2..b43f8271 100644
--- a/frontend/src/views/chat/component/charts/Bar.ts
+++ b/frontend/src/views/chat/component/charts/Bar.ts
@@ -34,6 +34,18 @@ export class Bar extends BaseG2Chart {
         nice: true,
       })
       .interaction('elementHighlight', { background: true })
+      .tooltip((data) => {
+        if (series.length > 0) {
+          return { name: data[series[0].value], value: data[y[0].value] }
+        } else {
+          return { name: y[0].name, value: data[y[0].value] }
+        }
+      })
+      .label({
+        text: y[0].value,
+        position: 'inside',
+        transform: [{ type: 'overlapDodgeY' }],
+      })
 
     if (series.length > 0) {
       this.chart?.encode('color', series[0].value).transform({ type: 'stackY' })
diff --git a/frontend/src/views/chat/component/charts/Column.ts b/frontend/src/views/chat/component/charts/Column.ts
index 31e93a33..c014e0f9 100644
--- a/frontend/src/views/chat/component/charts/Column.ts
+++ b/frontend/src/views/chat/component/charts/Column.ts
@@ -33,6 +33,18 @@ export class Column extends BaseG2Chart {
         nice: true,
       })
       .interaction('elementHighlight', { background: true })
+      .tooltip((data) => {
+        if (series.length > 0) {
+          return { name: data[series[0].value], value: data[y[0].value] }
+        } else {
+          return { name: y[0].name, value: data[y[0].value] }
+        }
+      })
+      .label({
+        text: y[0].value,
+        position: 'inside',
+        transform: [{ type: 'overlapDodgeY' }],
+      })
 
     if (series.length > 0) {
       this.chart?.encode('color', series[0].value).transform({ type: 'stackY' })
diff --git a/frontend/src/views/chat/component/charts/Line.ts b/frontend/src/views/chat/component/charts/Line.ts
index 55dbb2ea..57d5f23d 100644
--- a/frontend/src/views/chat/component/charts/Line.ts
+++ b/frontend/src/views/chat/component/charts/Line.ts
@@ -36,14 +36,23 @@ export class Line extends BaseG2Chart {
       this.chart?.encode('color', series[0].value)
     }
 
-    this.chart?.line().label({
-      text: y[0].value,
-      style: {
-        dx: -10,
-        dy: -12,
-      },
-      transform: [{ type: 'overlapDodgeY' }, { type: 'exceedAdjust' }, { type: 'overlapHide' }],
-    })
+    this.chart
+      ?.line()
+      .label({
+        text: y[0].value,
+        style: {
+          dx: -10,
+          dy: -12,
+        },
+        transform: [{ type: 'overlapDodgeY' }, { type: 'exceedAdjust' }, { type: 'overlapHide' }],
+      })
+      .tooltip((data) => {
+        if (series.length > 0) {
+          return { name: data[series[0].value], value: data[y[0].value] }
+        } else {
+          return { name: y[0].name, value: data[y[0].value] }
+        }
+      })
 
     this.chart?.point().style('fill', 'white').tooltip(false)
   }
diff --git a/frontend/src/views/chat/component/charts/Pie.ts b/frontend/src/views/chat/component/charts/Pie.ts
index bd785d78..76b5192e 100644
--- a/frontend/src/views/chat/component/charts/Pie.ts
+++ b/frontend/src/views/chat/component/charts/Pie.ts
@@ -24,5 +24,8 @@ export class Pie extends BaseG2Chart {
       .encode('y', y[0].value)
       .encode('color', series[0].value)
       .legend('color', { position: 'bottom', layout: { justifyContent: 'center' } })
+      .tooltip((data) => {
+        return { name: y[0].name, value: data[y[0].value] }
+      })
   }
 }