feat: chart label & tooltip

Author: ulleo

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' })

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' })

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)
   }

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] }
+      })
   }
 }