feat: pie chat to display data with percent value

Author: ulleo

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

@@ -1,6 +1,7 @@
 import { BaseG2Chart } from '@/views/chat/component/BaseG2Chart.ts'
 import type { ChartAxis, ChartData } from '@/views/chat/component/BaseChart.ts'
 import type { G2Spec } from '@antv/g2'
+import { endsWith, replace } from 'lodash-es'
 
 export class Pie extends BaseG2Chart {
   constructor(id: string) {
@@ -16,12 +17,31 @@ export class Pie extends BaseG2Chart {
       return
     }
 
+    // 特殊处理 %
+    const _data = []
+    let isPercent = false
+    if (data.length > 0) {
+      const v = data[0][y[0].value] + ''
+      if (endsWith(v, '%')) {
+        isPercent = true
+      }
+    }
+    for (let i = 0; i < data.length; i++) {
+      const v = data[i]
+      const _v = { ...v }
+      if (isPercent) {
+        const formatValue = replace(v[y[0].value], '%', '')
+        _v[y[0].value] = Number(formatValue)
+      }
+      _data.push(_v)
+    }
+
     const options: G2Spec = {
       ...this.chart.options(),
       type: 'interval',
       coordinate: { type: 'theta', outerRadius: 0.8 },
       transform: [{ type: 'stackY' }],
-      data: data,
+      data: _data,
       encode: {
         y: y[0].value,
         color: series[0].value,
@@ -32,7 +52,8 @@ export class Pie extends BaseG2Chart {
       labels: [
         {
           position: 'outside',
-          text: (data: any) => `${data[series[0].value]}: ${data[y[0].value]}`,
+          text: (data: any) =>
+            `${data[series[0].value]}: ${data[y[0].value]}${isPercent ? '%' : ''}`,
         },
       ],
       tooltip: (data) => {