feat: add thousands separator settings

Author: ulleo

frontend/src/assets/svg/chart/icon-thousand-separator.svg

@@ -788,6 +788,8 @@
     "no_data": "No Data",
     "loading_data": "Loading ...",
     "show_error_detail": "Show error info",
+    "thousands_separator_setting": "Thousands Separator Setting",
+    "thousands_separator_display": "Apply Thousands Separator Display",
     "log": {
       "GENERATE_SQL": "Generate SQL",
       "GENERATE_CHART": "Generate Chart Structure",

frontend/src/i18n/en.json

@@ -788,6 +788,8 @@
     "no_data": "데이터가 없습니다",
     "loading_data": "로딩 중 ...",
     "show_error_detail": "구체적인 정보 보기",
+    "thousands_separator_setting": "천 단위 구분 기호 설정",
+    "thousands_separator_display": "천 단위 구분 기호 표시 적용",
     "log": {
       "GENERATE_SQL": "SQL 생성",
       "GENERATE_CHART": "차트 구조 생성",

frontend/src/i18n/ko-KR.json

@@ -788,6 +788,8 @@
     "no_data": "暂无数据",
     "loading_data": "加载中...",
     "show_error_detail": "查看具体信息",
+    "thousands_separator_setting": "千分位符设置",
+    "thousands_separator_display": "应用千分位符展示",
     "log": {
       "GENERATE_SQL": "生成 SQL",
       "GENERATE_CHART": "生成图表结构",

frontend/src/i18n/zh-CN.json

@@ -788,6 +788,8 @@
     "no_data": "暫無資料",
     "loading_data": "載入中...",
     "show_error_detail": "檢視具體資訊",
+    "thousands_separator_setting": "千分位符設定",
+    "thousands_separator_display": "套用千分位符顯示",
     "log": {
       "GENERATE_SQL": "產生 SQL",
       "GENERATE_CHART": "產生圖表結構",

frontend/src/i18n/zh-TW.json

@@ -258,6 +258,8 @@ function stop() {
   emits('stop')
 }
 
+const enableThousandsSeparatorList = ref<Array<string>>([])
+
 onBeforeUnmount(() => {
   stop()
 })
@@ -274,6 +276,7 @@ defineExpose({ sendMessage, index: () => index.value, stop })
 <template>
   <BaseAnswer v-if="message" :message="message" :reasoning-name="reasoningName" :loading="_loading">
     <ChartBlock
+      v-model:thousands-separator-list="enableThousandsSeparatorList"
       style="margin-top: 6px"
       :message="message"
       :record-id="recordId"

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

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

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

@@ -20,6 +20,7 @@ import icon_window_max_outlined from '@/assets/svg/icon_window-max_outlined.svg'
 import icon_window_mini_outlined from '@/assets/svg/icon_window-mini_outlined.svg'
 import icon_copy_outlined from '@/assets/svg/icon_copy_outlined.svg'
 import ICON_STYLE from '@/assets/svg/icon_style-set_outlined.svg'
+import THOUSAND_SEPARATOR from '@/assets/svg/chart/icon-thousand-separator.svg'
 import { useI18n } from 'vue-i18n'
 import SQLComponent from '@/views/chat/component/SQLComponent.vue'
 import { useAssistantStore } from '@/stores/assistant'
@@ -38,21 +39,23 @@ const props = withDefaults(
     chatType?: ChartTypes
     enlarge?: boolean
     loadingData?: boolean
+    thousandsSeparatorList?: Array<string>
   }>(),
   {
     recordId: undefined,
     isPredict: false,
     chatType: undefined,
     enlarge: false,
     loadingData: false,
+    thousandsSeparatorList: () => [],
   }
 )
 
 const { copy } = useClipboard({ legacy: true })
 const loading = ref<boolean>(false)
 const { t } = useI18n()
 const addViewRef = ref(null)
-const emits = defineEmits(['exitFullScreen'])
+const emits = defineEmits(['exitFullScreen', 'update:thousandsSeparatorList'])
 
 const dataObject = computed<{
   fields: Array<string>
@@ -364,6 +367,20 @@ watch(
     }
   }
 )
+
+const enableThousandsSeparatorList = computed({
+  get() {
+    return props.thousandsSeparatorList
+  },
+  set(v) {
+    emits('update:thousandsSeparatorList', v)
+  },
+})
+
+const optionList = ref<Array<{ name: string; value: string }>>([])
+function getBaseAxis() {
+  optionList.value = chartRef.value?.getBaseAxis()
+}
 </script>
 
 <template>
@@ -390,7 +407,7 @@ watch(
               :chart-type="chartType"
               :title="t('chat.type')"
               @type-change="onTypeChange"
-            ></ChartPopover>
+            />
           </el-tooltip>
 
           <el-tooltip
@@ -412,23 +429,58 @@ watch(
           </el-tooltip>
         </div>
 
-        <div v-if="currentChartType !== 'table'" class="chart-select-container">
+        <div class="chart-select-container">
+          <template v-if="currentChartType !== 'table'">
+            <el-tooltip
+              effect="dark"
+              :offset="8"
+              :content="showLabel ? t('chat.hide_label') : t('chat.show_label')"
+              placement="top"
+            >
+              <el-button
+                class="tool-btn"
+                :class="{ 'chart-active': showLabel }"
+                text
+                @click="showLabel = !showLabel"
+              >
+                <el-icon size="16">
+                  <ICON_STYLE />
+                </el-icon>
+              </el-button>
+            </el-tooltip>
+          </template>
           <el-tooltip
             effect="dark"
             :offset="8"
-            :content="showLabel ? t('chat.hide_label') : t('chat.show_label')"
+            :content="t('chat.thousands_separator_setting')"
             placement="top"
           >
-            <el-button
-              class="tool-btn"
-              :class="{ 'chart-active': showLabel }"
-              text
-              @click="showLabel = !showLabel"
-            >
-              <el-icon size="16">
-                <ICON_STYLE />
-              </el-icon>
-            </el-button>
+            <div>
+              <el-popover placement="bottom" trigger="click">
+                <template #reference>
+                  <el-button class="tool-btn" text @click="getBaseAxis">
+                    <el-icon size="16">
+                      <THOUSAND_SEPARATOR />
+                    </el-icon>
+                  </el-button>
+                </template>
+                <label style="font-weight: 500; line-height: 28px">
+                  {{ t('chat.thousands_separator_display') }}
+                </label>
+                <el-checkbox-group
+                  v-model="enableThousandsSeparatorList"
+                  style="display: flex; flex-direction: column"
+                >
+                  <el-checkbox
+                    v-for="option in optionList"
+                    :key="option.value"
+                    size="large"
+                    :label="option.name"
+                    :value="option.value"
+                  />
+                </el-checkbox-group>
+              </el-popover>
+            </div>
           </el-tooltip>
         </div>
 
@@ -538,6 +590,7 @@ watch(
           :data="data"
           :loading-data="loadingData"
           :show-label="showLabel"
+          :thousands-separator-list="enableThousandsSeparatorList"
         />
       </div>
       <div v-if="dataObject.limit" class="over-limit-hint">
@@ -556,7 +609,8 @@ watch(
       body-class="chart-fullscreen-dialog-body"
     >
       <ChartBlock
-        v-if="dialogVisible"
+        v-if="dialogVisible && !enlarge"
+        v-model:thousands-separator-list="enableThousandsSeparatorList"
         :message="message"
         :record-id="recordId"
         :is-predict="isPredict"

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

@@ -4,6 +4,7 @@ export interface ChartAxis {
   type?: 'x' | 'y' | 'series' | 'other-info'
   'multi-quota'?: boolean
   hidden?: boolean
+  formatNumber?: boolean
 }
 
 export interface ChartData {
@@ -18,15 +19,17 @@ export abstract class BaseChart {
   axis: Array<ChartAxis> = []
   data: Array<ChartData> = []
   showLabel: boolean = false
+  formatNumberFields: Array<string> = []
 
   constructor(id: string, name: string) {
     this.id = id
     this._name = name
   }
 
-  init(axis: Array<ChartAxis>, data: Array<ChartData>): void {
+  init(axis: Array<ChartAxis>, data: Array<ChartData>, formatNumberFields: Array<string>): void {
     this.axis = axis
     this.data = data
+    this.formatNumberFields = formatNumberFields
   }
 
   abstract render(): void

frontend/src/views/chat/component/BaseChart.ts

@@ -3,6 +3,7 @@ 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'
+import { filter, includes } from 'lodash-es'
 
 const params = withDefaults(
   defineProps<{
@@ -15,6 +16,7 @@ const params = withDefaults(
     series?: Array<ChartAxis>
     multiQuotaName?: string | undefined
     showLabel?: boolean
+    thousandsSeparatorList?: Array<string>
   }>(),
   {
     data: () => [],
@@ -24,6 +26,7 @@ const params = withDefaults(
     series: () => [],
     multiQuotaName: undefined,
     showLabel: false,
+    thousandsSeparatorList: () => [],
   }
 )
 
@@ -34,21 +37,36 @@ const chartId = computed(() => {
 const axis = computed(() => {
   const _list: Array<ChartAxis> = []
   params.columns.forEach((column) => {
-    _list.push({ name: column.name, value: column.value })
+    _list.push({
+      name: column.name,
+      value: column.value,
+      formatNumber: includes(params.thousandsSeparatorList, column.value),
+    })
   })
   params.x.forEach((column) => {
-    _list.push({ name: column.name, value: column.value, type: 'x' })
+    _list.push({
+      name: column.name,
+      value: column.value,
+      type: 'x',
+      formatNumber: includes(params.thousandsSeparatorList, column.value),
+    })
   })
   params.y.forEach((column) => {
     _list.push({
       name: column.name,
       value: column.value,
       type: 'y',
       'multi-quota': column['multi-quota'],
+      formatNumber: includes(params.thousandsSeparatorList, column.value),
     })
   })
   params.series.forEach((column) => {
-    _list.push({ name: column.name, value: column.value, type: 'series' })
+    _list.push({
+      name: column.name,
+      value: column.value,
+      type: 'series',
+      formatNumber: includes(params.thousandsSeparatorList, column.value),
+    })
   })
   if (params.multiQuotaName) {
     _list.push({
@@ -67,16 +85,17 @@ function renderChart() {
   chartInstance = getChartInstance(params.type, chartId.value)
   if (chartInstance) {
     chartInstance.showLabel = params.showLabel
-    chartInstance.init(axis.value, params.data)
+    chartInstance.init(axis.value, params.data, params.thousandsSeparatorList)
     chartInstance.render()
   }
 }
 
 watch(
-  () => params.showLabel,
+  () => [params.showLabel, params.thousandsSeparatorList],
   () => {
     renderChart()
-  }
+  },
+  { deep: true }
 )
 
 function destroyChart() {
@@ -93,6 +112,10 @@ function getExcelData() {
   }
 }
 
+function getBaseAxis() {
+  return filter(axis.value, (a) => !a.hidden)
+}
+
 useEmitt({
   name: 'view-render-all',
   callback: renderChart,
@@ -107,6 +130,7 @@ defineExpose({
   renderChart,
   destroyChart,
   getExcelData,
+  getBaseAxis,
 })
 
 onMounted(() => {