pref: improve show label button in chart display

Author: ulleo

frontend/src/views/chat/answer/ChartAnswer.vue

@@ -259,6 +259,7 @@ function stop() {
 }
 
 const enableThousandsSeparatorList = ref<Array<string>>([])
+const showLabel = ref<boolean>(false)
 
 onBeforeUnmount(() => {
   stop()
@@ -276,6 +277,7 @@ defineExpose({ sendMessage, index: () => index.value, stop })
 <template>
   <BaseAnswer v-if="message" :message="message" :reasoning-name="reasoningName" :loading="_loading">
     <ChartBlock
+      v-model:show-label="showLabel"
       v-model:thousands-separator-list="enableThousandsSeparatorList"
       style="margin-top: 6px"
       :message="message"

frontend/src/views/chat/answer/PredictAnswer.vue

@@ -258,6 +258,7 @@ function stop() {
 }
 
 const enableThousandsSeparatorList = ref<Array<string>>([])
+const showLabel = ref<boolean>(false)
 
 onBeforeUnmount(() => {
   stop()
@@ -278,6 +279,7 @@ defineExpose({ sendMessage, index: () => index.value, chatList: () => _chatList,
     <ChartBlock
       v-if="message.record?.predict_data?.length > 0 && message.record?.data"
       ref="chartBlockRef"
+      v-model:show-label="showLabel"
       v-model:thousands-separator-list="enableThousandsSeparatorList"
       style="margin-top: 12px"
       :record-id="recordId"

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

@@ -39,7 +39,8 @@ const props = withDefaults(
     chatType?: ChartTypes
     enlarge?: boolean
     loadingData?: boolean
-    thousandsSeparatorList?: Array<string>
+    thousandsSeparatorList: Array<string>
+    showLabel: boolean
   }>(),
   {
     recordId: undefined,
@@ -48,14 +49,15 @@ const props = withDefaults(
     enlarge: false,
     loadingData: false,
     thousandsSeparatorList: () => [],
+    showLabel: false,
   }
 )
 
 const { copy } = useClipboard({ legacy: true })
 const loading = ref<boolean>(false)
 const { t } = useI18n()
 const addViewRef = ref(null)
-const emits = defineEmits(['exitFullScreen', 'update:thousandsSeparatorList'])
+const emits = defineEmits(['exitFullScreen', 'update:thousandsSeparatorList', 'update:showLabel'])
 
 const dataObject = computed<{
   fields: Array<string>
@@ -229,8 +231,6 @@ function showSql() {
   sqlShow.value = true
 }
 
-const showLabel = ref(false)
-
 function addToDashboard() {
   const recordeInfo = {
     id: '1-1',
@@ -368,6 +368,15 @@ watch(
   }
 )
 
+const _showLabel = computed({
+  get() {
+    return props.showLabel
+  },
+  set(v) {
+    emits('update:showLabel', v)
+  },
+})
+
 const enableThousandsSeparatorList = computed({
   get() {
     return props.thousandsSeparatorList
@@ -434,14 +443,14 @@ function getBaseAxis() {
             <el-tooltip
               effect="dark"
               :offset="8"
-              :content="showLabel ? t('chat.hide_label') : t('chat.show_label')"
+              :content="_showLabel ? t('chat.hide_label') : t('chat.show_label')"
               placement="top"
             >
               <el-button
                 class="tool-btn"
-                :class="{ 'chart-active': showLabel }"
+                :class="{ 'chart-active': _showLabel }"
                 text
-                @click="showLabel = !showLabel"
+                @click="_showLabel = !_showLabel"
               >
                 <el-icon size="16">
                   <ICON_STYLE />
@@ -589,7 +598,7 @@ function getBaseAxis() {
           :message="message"
           :data="data"
           :loading-data="loadingData"
-          :show-label="showLabel"
+          :show-label="_showLabel"
           :thousands-separator-list="enableThousandsSeparatorList"
         />
       </div>
@@ -610,6 +619,7 @@ function getBaseAxis() {
     >
       <ChartBlock
         v-if="dialogVisible && !enlarge"
+        v-model:show-label="_showLabel"
         v-model:thousands-separator-list="enableThousandsSeparatorList"
         :message="message"
         :record-id="recordId"