pref: add loading data placeholder in chart

Author: ulleo

frontend/src/i18n/en.json

@@ -635,6 +635,7 @@
     "error": "Error",
     "exec-sql-err": "Execute SQL failed",
     "no_data": "No Data",
+    "loading_data": "Loading ...",
     "show_error_detail": "Show error info"
   },
   "about": {

frontend/src/i18n/ko-KR.json

@@ -635,6 +635,7 @@
     "error": "오류",
     "exec-sql-err": "SQL 실행 실패",
     "no_data": "데이터가 없습니다",
+    "loading_data": "로딩 중 ...",
     "show_error_detail": "구체적인 정보 보기"
   },
   "about": {
@@ -733,4 +734,4 @@
   "modelType": {
     "llm": "대형 언어 모델"
   }
-}
+}

frontend/src/i18n/zh-CN.json

@@ -635,6 +635,7 @@
     "error": "错误",
     "exec-sql-err": "执行SQL失败",
     "no_data": "暂无数据",
+    "loading_data": "加载中...",
     "show_error_detail": "查看具体信息"
   },
   "about": {
@@ -733,4 +734,4 @@
   "modelType": {
     "llm": "大语言模型"
   }
-}
+}

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

@@ -218,7 +218,10 @@ const sendMessage = async () => {
   }
 }
 
+const loadingData = ref(false)
+
 function getChatData(recordId?: number) {
+  loadingData.value = true
   chatApi
     .get_chart_data(recordId)
     .then((response) => {
@@ -229,6 +232,7 @@ function getChatData(recordId?: number) {
       })
     })
     .finally(() => {
+      loadingData.value = false
       emits('scrollBottom')
     })
 }
@@ -254,7 +258,12 @@ defineExpose({ sendMessage, index: () => index.value, stop })
 
 <template>
   <BaseAnswer v-if="message" :message="message" :reasoning-name="reasoningName" :loading="_loading">
-    <ChartBlock style="margin-top: 6px" :message="message" :record-id="recordId" />
+    <ChartBlock
+      style="margin-top: 6px"
+      :message="message"
+      :record-id="recordId"
+      :loading-data="loadingData"
+    />
     <slot></slot>
     <template #tool>
       <slot name="tool"></slot>

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

@@ -204,32 +204,49 @@ const sendMessage = async () => {
 
 const chartBlockRef = ref()
 
+const loadingData = ref(false)
+
 function getChatPredictData(recordId?: number) {
-  chatApi.get_chart_predict_data(recordId).then((response) => {
-    _currentChat.value.records.forEach((record) => {
-      if (record.id === recordId) {
-        record.predict_data = response ?? []
+  loadingData.value = true
+  chatApi
+    .get_chart_predict_data(recordId)
+    .then((response) => {
+      let has = false
+      _currentChat.value.records.forEach((record) => {
+        if (record.id === recordId) {
+          has = true
+          record.predict_data = response ?? []
 
-        if (record.predict_data.length > 1) {
-          getChatData(recordId)
+          if (record.predict_data.length > 1) {
+            getChatData(recordId)
+          } else {
+            loadingData.value = false
+          }
         }
+      })
+      if (!has) {
+        _loading.value = false
       }
     })
-  })
+    .catch((e) => {
+      loadingData.value = false
+      console.error(e)
+    })
 }
 
 function getChatData(recordId?: number) {
+  loadingData.value = true
   chatApi
     .get_chart_data(recordId)
     .then((response) => {
       _currentChat.value.records.forEach((record) => {
         if (record.id === recordId) {
           record.data = response
-          console.log(record.data)
         }
       })
     })
     .finally(() => {
+      loadingData.value = false
       emits('scrollBottom')
     })
 }
@@ -262,6 +279,7 @@ defineExpose({ sendMessage, index: () => index.value, chatList: () => _chatList,
       style="margin-top: 12px"
       :record-id="recordId"
       :message="message"
+      :loading-data="loadingData"
       is-predict
     />
     <slot></slot>

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

@@ -33,12 +33,14 @@ const props = withDefaults(
     isPredict?: boolean
     chatType?: ChartTypes
     enlarge?: boolean
+    loadingData?: boolean
   }>(),
   {
     recordId: undefined,
     isPredict: false,
     chatType: undefined,
     enlarge: false,
+    loadingData: false,
   }
 )
 
@@ -473,6 +475,7 @@ watch(
           :chart-type="chartType"
           :message="message"
           :data="data"
+          :loading-data="loadingData"
         />
       </div>
       <div v-if="dataObject.limit" class="over-limit-hint">
@@ -493,8 +496,10 @@ watch(
       <ChartBlock
         v-if="dialogVisible"
         :message="message"
+        :record-id="recordId"
         :is-predict="isPredict"
         :chat-type="chartType"
+        :loading-data="loadingData"
         enlarge
         @exit-full-screen="onExitFullScreen"
       />

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

@@ -10,6 +10,7 @@ const props = defineProps<{
   chartType: ChartTypes
   message: ChatMessage
   data: Array<{ [key: string]: any }>
+  loadingData?: boolean
 }>()
 
 const { t } = useI18n()
@@ -94,7 +95,7 @@ defineExpose({
       :series="series"
       :data="data"
     />
-    <el-empty v-else :description="t('chat.no_data')" />
+    <el-empty v-else :description="loadingData ? t('chat.loading_data') : t('chat.no_data')" />
   </div>
 </template>