feat: support data labels on charts

Author: ulleo

frontend/src/i18n/en.json

@@ -728,6 +728,8 @@
       "line": "Line",
       "pie": "Pie"
     },
+    "hide_label": "Hide Label",
+    "show_label": "Show Label",
     "sort_asc": "Ascending",
     "sort_desc": "Descending",
     "sort_none": "No Sort",

frontend/src/i18n/ko-KR.json

@@ -728,6 +728,8 @@
       "line": "선 차트",
       "pie": "원형 차트"
     },
+    "hide_label": "라벨 숨기기",
+    "show_label": "라벨 표시",
     "sort_asc": "오름차순",
     "sort_desc": "내림차순",
     "sort_none": "정렬 안 함",

frontend/src/i18n/zh-CN.json

@@ -728,6 +728,8 @@
       "line": "折线图",
       "pie": "饼图"
     },
+    "hide_label": "隐藏标签",
+    "show_label": "显示标签",
     "sort_asc": "升序",
     "sort_desc": "降序",
     "sort_none": "不排序",
@@ -930,4 +932,4 @@
     "to_doc": "查看 API",
     "trigger_limit": "最多支持创建 {0} 个 API Key"
   }
-}
+}

frontend/src/views/chat/chat-block/ChartBlock.vue

@@ -396,9 +396,8 @@ watch(
           </el-tooltip>
         </div>
 
-        <div class="chart-select-container">
+        <div v-if="currentChartType !== 'table'" class="chart-select-container">
           <el-tooltip
-            v-if="currentChartType !== 'table'"
             effect="dark"
             :offset="8"
             :content="showLabel ? t('chat.hide_label') : t('chat.show_label')"

frontend/src/views/chat/component/ChartComponent.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, nextTick, onMounted, onUnmounted } from 'vue'
+import { computed, nextTick, onMounted, onUnmounted, watch } from 'vue'
 import { getChartInstance } from '@/views/chat/component/index.ts'
 import type { BaseChart, ChartAxis, ChartData } from '@/views/chat/component/BaseChart.ts'
 import { useEmitt } from '@/utils/useEmitt.ts'
@@ -63,6 +63,7 @@ const axis = computed(() => {
 
 let chartInstance: BaseChart | undefined
 
+function renderChart() {
   chartInstance = getChartInstance(params.type, chartId.value)
   if (chartInstance) {
     chartInstance.showLabel = params.showLabel

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

@@ -131,27 +131,27 @@ export class Bar extends BaseG2Chart {
       },
       labels: this.showLabel
         ? [
-          {
-            text: (data: any) => {
-              const value = data[y[0].value]
-              if (value === undefined || value === null) {
-                return ''
-              }
-              return `${value}${_data.isPercent ? '%' : ''}`
+            {
+              text: (data: any) => {
+                const value = data[y[0].value]
+                if (value === undefined || value === null) {
+                  return ''
+                }
+                return `${value}${_data.isPercent ? '%' : ''}`
+              },
+              position: (data: any) => {
+                if (data[y[0].value] < 0) {
+                  return 'left'
+                }
+                return 'right'
+              },
+              transform: [
+                { type: 'contrastReverse' },
+                { type: 'exceedAdjust' },
+                { type: 'overlapHide' },
+              ],
             },
-            position: (data: any) => {
-              if (data[y[0].value] < 0) {
-                return 'left'
-              }
-              return 'right'
-            },
-            transform: [
-              { type: 'contrastReverse' },
-              { type: 'exceedAdjust' },
-              { type: 'overlapHide' },
-            ],
-          },
-        ]
+          ]
         : [],
     } as G2Spec
 

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

@@ -122,27 +122,27 @@ export class Column extends BaseG2Chart {
       },
       labels: this.showLabel
         ? [
-          {
-            text: (data: any) => {
-              const value = data[y[0].value]
-              if (value === undefined || value === null) {
-                return ''
-              }
-              return `${value}${_data.isPercent ? '%' : ''}`
+            {
+              text: (data: any) => {
+                const value = data[y[0].value]
+                if (value === undefined || value === null) {
+                  return ''
+                }
+                return `${value}${_data.isPercent ? '%' : ''}`
+              },
+              position: (data: any) => {
+                if (data[y[0].value] < 0) {
+                  return 'bottom'
+                }
+                return 'top'
+              },
+              transform: [
+                { type: 'contrastReverse' },
+                { type: 'exceedAdjust' },
+                { type: 'overlapHide' },
+              ],
             },
-            position: (data: any) => {
-              if (data[y[0].value] < 0) {
-                return 'bottom'
-              }
-              return 'top'
-            },
-            transform: [
-              { type: 'contrastReverse' },
-              { type: 'exceedAdjust' },
-              { type: 'overlapHide' },
-            ],
-          },
-        ]
+          ]
         : [],
     } as G2Spec
 

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

@@ -88,25 +88,25 @@ export class Line extends BaseG2Chart {
           },
           labels: this.showLabel
             ? [
-              {
-                text: (data: any) => {
-                  const value = data[y[0].value]
-                  if (value === undefined || value === null) {
-                    return ''
-                  }
-                  return `${value}${_data.isPercent ? '%' : ''}`
+                {
+                  text: (data: any) => {
+                    const value = data[y[0].value]
+                    if (value === undefined || value === null) {
+                      return ''
+                    }
+                    return `${value}${_data.isPercent ? '%' : ''}`
+                  },
+                  style: {
+                    dx: -10,
+                    dy: -12,
+                  },
+                  transform: [
+                    { type: 'contrastReverse' },
+                    { type: 'exceedAdjust' },
+                    { type: 'overlapHide' },
+                  ],
                 },
-                style: {
-                  dx: -10,
-                  dy: -12,
-                },
-                transform: [
-                  { type: 'contrastReverse' },
-                  { type: 'exceedAdjust' },
-                  { type: 'overlapHide' },
-                ],
-              },
-            ]
+              ]
             : [],
           tooltip: (data: any) => {
             if (series.length > 0) {

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

@@ -43,14 +43,16 @@ export class Pie extends BaseG2Chart {
         color: { position: 'bottom', layout: { justifyContent: 'center' } },
       },
       animate: { enter: { type: 'waveIn' } },
-      labels: [
-        {
-          position: 'spider',
-          text: (data: any) => {
-            return `${data[series[0].value]}: ${data[y[0].value]}${_data.isPercent ? '%' : ''}`
-          },
-        },
-      ],
+      labels: this.showLabel
+        ? [
+            {
+              position: 'spider',
+              text: (data: any) => {
+                return `${data[series[0].value]}: ${data[y[0].value]}${_data.isPercent ? '%' : ''}`
+              },
+            },
+          ]
+        : [],
       tooltip: {
         title: (data: any) => data[series[0].value],
         items: [