-
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
@@ -538,6 +590,7 @@ watch(
:data="data"
:loading-data="loadingData"
:show-label="showLabel"
+ :thousands-separator-list="enableThousandsSeparatorList"
/>
@@ -556,7 +609,8 @@ watch(
body-class="chart-fullscreen-dialog-body"
>
= []
data: Array = []
showLabel: boolean = false
+ formatNumberFields: Array = []
constructor(id: string, name: string) {
this.id = id
this._name = name
}
- init(axis: Array, data: Array): void {
+ init(axis: Array, data: Array, formatNumberFields: Array): void {
this.axis = axis
this.data = data
+ this.formatNumberFields = formatNumberFields
}
abstract render(): void
diff --git a/frontend/src/views/chat/component/ChartComponent.vue b/frontend/src/views/chat/component/ChartComponent.vue
index 1e7a6f463..58d471909 100644
--- a/frontend/src/views/chat/component/ChartComponent.vue
+++ b/frontend/src/views/chat/component/ChartComponent.vue
@@ -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
multiQuotaName?: string | undefined
showLabel?: boolean
+ thousandsSeparatorList?: Array
}>(),
{
data: () => [],
@@ -24,6 +26,7 @@ const params = withDefaults(
series: () => [],
multiQuotaName: undefined,
showLabel: false,
+ thousandsSeparatorList: () => [],
}
)
@@ -34,10 +37,19 @@ const chartId = computed(() => {
const axis = computed(() => {
const _list: Array = []
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({
@@ -45,10 +57,16 @@ const axis = computed(() => {
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(() => {
diff --git a/frontend/src/views/chat/component/DisplayChartBlock.vue b/frontend/src/views/chat/component/DisplayChartBlock.vue
index b53f937c0..fb2565778 100644
--- a/frontend/src/views/chat/component/DisplayChartBlock.vue
+++ b/frontend/src/views/chat/component/DisplayChartBlock.vue
@@ -5,14 +5,21 @@ import { computed, nextTick, ref } from 'vue'
import type { ChartTypes } from '@/views/chat/component/BaseChart.ts'
import { useI18n } from 'vue-i18n'
-const props = defineProps<{
- id?: number | string
- chartType: ChartTypes
- message: ChatMessage
- data: Array<{ [key: string]: any }>
- loadingData?: boolean
- showLabel?: boolean
-}>()
+const props = withDefaults(
+ defineProps<{
+ id?: number | string
+ chartType: ChartTypes
+ message: ChatMessage
+ data: Array<{ [key: string]: any }>
+ loadingData?: boolean
+ showLabel?: boolean
+ thousandsSeparatorList?: Array
+ }>(),
+ {
+ id: 'default_chat_id',
+ thousandsSeparatorList: () => [],
+ }
+)
const { t } = useI18n()
@@ -102,6 +109,9 @@ defineExpose({
onTypeChange,
getViewInfo,
getExcelData,
+ getBaseAxis: () => {
+ return chartRef.value?.getBaseAxis() ?? []
+ },
})
@@ -119,6 +129,7 @@ defineExpose({
:data="data"
:multi-quota-name="multiQuotaName"
:show-label="showLabel"
+ :thousands-separator-list="thousandsSeparatorList"
/>
diff --git a/frontend/src/views/chat/component/charts/Bar.ts b/frontend/src/views/chat/component/charts/Bar.ts
index c14950823..69392bb7b 100644
--- a/frontend/src/views/chat/component/charts/Bar.ts
+++ b/frontend/src/views/chat/component/charts/Bar.ts
@@ -13,8 +13,8 @@ export class Bar extends BaseG2Chart {
super(id, 'bar')
}
- init(axis: Array, data: Array) {
- super.init(axis, data)
+ init(axis: Array, data: Array, formatNumberFields: Array) {
+ super.init(axis, data, formatNumberFields)
const axes = getAxesWithFilter(this.axis)
@@ -106,7 +106,8 @@ export class Bar extends BaseG2Chart {
labelAutoWrap: true,
labelAutoEllipsis: true,
labelFormatter: (value: any) => {
- return String(formatNumber(value))
+ const formatted = axes.y[0].formatNumber ? formatNumber(value) : value
+ return String(formatted)
},
},
},
@@ -124,15 +125,19 @@ export class Bar extends BaseG2Chart {
tooltip: { series: series.length > 0, shared: true },
},
tooltip: (data: any) => {
+ const v = y[0].formatNumber ? formatNumber(data[y[0].value]) : data[y[0].value]
if (series.length > 0) {
+ const s = series[0].formatNumber
+ ? formatNumber(data[series[0].value])
+ : data[series[0].value]
return {
- name: data[series[0].value],
- value: `${formatNumber(data[y[0].value])}${_data.isPercent ? '%' : ''}`,
+ name: s,
+ value: `${v}${_data.isPercent ? '%' : ''}`,
}
} else {
return {
name: y[0].name,
- value: `${formatNumber(data[y[0].value])}${_data.isPercent ? '%' : ''}`,
+ value: `${v}${_data.isPercent ? '%' : ''}`,
}
}
},
@@ -144,7 +149,8 @@ export class Bar extends BaseG2Chart {
if (value === undefined || value === null) {
return ''
}
- return `${formatNumber(value)}${_data.isPercent ? '%' : ''}`
+ const v = y[0].formatNumber ? formatNumber(value) : value
+ return `${v}${_data.isPercent ? '%' : ''}`
},
position: (data: any) => {
if (data[y[0].value] < 0) {
diff --git a/frontend/src/views/chat/component/charts/Column.ts b/frontend/src/views/chat/component/charts/Column.ts
index 8128caa63..db0c20d88 100644
--- a/frontend/src/views/chat/component/charts/Column.ts
+++ b/frontend/src/views/chat/component/charts/Column.ts
@@ -13,8 +13,8 @@ export class Column extends BaseG2Chart {
super(id, 'column')
}
- init(axis: Array, data: Array) {
- super.init(axis, data)
+ init(axis: Array, data: Array, formatNumberFields: Array) {
+ super.init(axis, data, formatNumberFields)
const axes = getAxesWithFilter(this.axis)
@@ -97,7 +97,8 @@ export class Column extends BaseG2Chart {
y: {
title: false, // y[0].name,
labelFormatter: (value: any) => {
- return String(formatNumber(value))
+ const formatted = axes.y[0].formatNumber ? formatNumber(value) : value
+ return String(formatted)
},
},
},
@@ -115,15 +116,19 @@ export class Column extends BaseG2Chart {
tooltip: { series: series.length > 0, shared: true },
},
tooltip: (data: any) => {
+ const v = y[0].formatNumber ? formatNumber(data[y[0].value]) : data[y[0].value]
if (series.length > 0) {
+ const s = series[0].formatNumber
+ ? formatNumber(data[series[0].value])
+ : data[series[0].value]
return {
- name: data[series[0].value],
- value: `${formatNumber(data[y[0].value])}${_data.isPercent ? '%' : ''}`,
+ name: s,
+ value: `${v}${_data.isPercent ? '%' : ''}`,
}
} else {
return {
name: y[0].name,
- value: `${formatNumber(data[y[0].value])}${_data.isPercent ? '%' : ''}`,
+ value: `${v}${_data.isPercent ? '%' : ''}`,
}
}
},
@@ -135,7 +140,8 @@ export class Column extends BaseG2Chart {
if (value === undefined || value === null) {
return ''
}
- return `${formatNumber(value)}${_data.isPercent ? '%' : ''}`
+ const v = y[0].formatNumber ? formatNumber(value) : value
+ return `${v}${_data.isPercent ? '%' : ''}`
},
position: (data: any) => {
if (data[y[0].value] < 0) {
diff --git a/frontend/src/views/chat/component/charts/Line.ts b/frontend/src/views/chat/component/charts/Line.ts
index bfa20a1bf..062a503e4 100644
--- a/frontend/src/views/chat/component/charts/Line.ts
+++ b/frontend/src/views/chat/component/charts/Line.ts
@@ -13,8 +13,8 @@ export class Line extends BaseG2Chart {
super(id, 'line')
}
- init(axis: Array, data: Array) {
- super.init(axis, data)
+ init(axis: Array, data: Array, formatNumberFields: Array) {
+ super.init(axis, data, formatNumberFields)
const axes = getAxesWithFilter(this.axis)
@@ -71,7 +71,8 @@ export class Line extends BaseG2Chart {
y: {
title: false, // y[0].name,
labelFormatter: (value: any) => {
- return String(formatNumber(value))
+ const formatted = axes.y[0].formatNumber ? formatNumber(value) : value
+ return String(formatted)
},
},
},
@@ -98,7 +99,8 @@ export class Line extends BaseG2Chart {
if (value === undefined || value === null) {
return ''
}
- return `${formatNumber(value)}${_data.isPercent ? '%' : ''}`
+ const v = y[0].formatNumber ? formatNumber(value) : value
+ return `${v}${_data.isPercent ? '%' : ''}`
},
style: {
dx: -10,
@@ -113,15 +115,19 @@ export class Line extends BaseG2Chart {
]
: [],
tooltip: (data: any) => {
+ const v = y[0].formatNumber ? formatNumber(data[y[0].value]) : data[y[0].value]
if (series.length > 0) {
+ const s = series[0].formatNumber
+ ? formatNumber(data[series[0].value])
+ : data[series[0].value]
return {
- name: data[series[0].value],
- value: `${formatNumber(data[y[0].value])}${_data.isPercent ? '%' : ''}`,
+ name: s,
+ value: `${v}${_data.isPercent ? '%' : ''}`,
}
} else {
return {
name: y[0].name,
- value: `${formatNumber(data[y[0].value])}${_data.isPercent ? '%' : ''}`,
+ value: `${v}${_data.isPercent ? '%' : ''}`,
}
}
},
diff --git a/frontend/src/views/chat/component/charts/Pie.ts b/frontend/src/views/chat/component/charts/Pie.ts
index d0f7227a0..25e6d8564 100644
--- a/frontend/src/views/chat/component/charts/Pie.ts
+++ b/frontend/src/views/chat/component/charts/Pie.ts
@@ -1,15 +1,19 @@
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 { checkIsPercent, formatNumber, getAxesWithFilter } from '@/views/chat/component/charts/utils.ts'
+import {
+ checkIsPercent,
+ formatNumber,
+ getAxesWithFilter,
+} from '@/views/chat/component/charts/utils.ts'
export class Pie extends BaseG2Chart {
constructor(id: string) {
super(id, 'pie')
}
- init(axis: Array, data: Array) {
- super.init(axis, data)
+ init(axis: Array, data: Array, formatNumberFields: Array) {
+ super.init(axis, data, formatNumberFields)
const { y, series } = getAxesWithFilter(this.axis)
if (series.length == 0 || y.length == 0) {
@@ -48,18 +52,25 @@ export class Pie extends BaseG2Chart {
{
position: 'spider',
text: (data: any) => {
- return `${data[series[0].value]}: ${formatNumber(data[y[0].value])}${_data.isPercent ? '%' : ''}`
+ const v = y[0].formatNumber ? formatNumber(data[y[0].value]) : data[y[0].value]
+ return `${data[series[0].value]}: ${v}${_data.isPercent ? '%' : ''}`
},
},
]
: [],
tooltip: {
- title: (data: any) => data[series[0].value],
+ title: (data: any) => {
+ const s = series[0].formatNumber
+ ? formatNumber(data[series[0].value])
+ : data[series[0].value]
+ return s
+ },
items: [
(data: any) => {
+ const v = y[0].formatNumber ? formatNumber(data[y[0].value]) : data[y[0].value]
return {
name: y[0].name,
- value: `${formatNumber(data[y[0].value])}${_data.isPercent ? '%' : ''}`,
+ value: `${v}${_data.isPercent ? '%' : ''}`,
}
},
],
diff --git a/frontend/src/views/chat/component/charts/Table.ts b/frontend/src/views/chat/component/charts/Table.ts
index b4c4c3b1f..885fb7c14 100644
--- a/frontend/src/views/chat/component/charts/Table.ts
+++ b/frontend/src/views/chat/component/charts/Table.ts
@@ -9,7 +9,7 @@ import {
TableSheet,
type SortFuncParam,
} from '@antv/s2'
-import { debounce, filter } from 'lodash-es'
+import { debounce, filter, includes } from 'lodash-es'
import { i18n } from '@/i18n'
import { formatNumber } from '@/views/chat/component/charts/utils.ts'
import '@antv/s2/dist/s2.min.css'
@@ -100,10 +100,11 @@ export class Table extends BaseChart {
}
}
- init(axis: Array, data: Array) {
+ init(axis: Array, data: Array, formatNumberFields: Array) {
super.init(
filter(axis, (a) => !a.hidden), //隐藏多指标的other-info列
- data
+ data,
+ formatNumberFields
)
const s2DataConfig: S2DataConfig = {
@@ -122,7 +123,7 @@ export class Table extends BaseChart {
field: a.value,
name: a.name,
formatter: (value: any) => {
- const formatted = formatNumber(value)
+ const formatted = a.formatNumber ? formatNumber(value) : value
return String(formatted)
},
}
@@ -201,7 +202,9 @@ export class Table extends BaseChart {
container.style.fontSize = '14px'
container.style.whiteSpace = 'pre-wrap'
- const formattedValue = formatNumber(meta.fieldValue)
+ const formattedValue = includes(this.formatNumberFields, meta.valueField)
+ ? formatNumber(meta.fieldValue)
+ : meta.fieldValue
const text = document.createTextNode(String(formattedValue))
container.appendChild(text)