Skip to content

Commit e8463fb

Browse files
ulleoulleo
committed
feat: Add thousand separators to default chart value display
#1095
1 parent e72c0be commit e8463fb

11 files changed

Lines changed: 141 additions & 33 deletions

File tree

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

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import type { ChartAxis, ChartData } from '@/views/chat/component/BaseChart.ts'
33
import type { G2Spec } from '@antv/g2'
44
import {
55
checkIsPercent,
6+
formatNumber,
67
getAxesWithFilter,
78
processMultiQuotaData,
89
} from '@/views/chat/component/charts/utils.ts'
@@ -104,6 +105,9 @@ export class Bar extends BaseG2Chart {
104105
labelAutoRotate: false,
105106
labelAutoWrap: true,
106107
labelAutoEllipsis: true,
108+
labelFormatter: (value: any) => {
109+
return String(formatNumber(value))
110+
},
107111
},
108112
},
109113
scale: {
@@ -123,10 +127,13 @@ export class Bar extends BaseG2Chart {
123127
if (series.length > 0) {
124128
return {
125129
name: data[series[0].value],
126-
value: `${data[y[0].value]}${_data.isPercent ? '%' : ''}`,
130+
value: `${formatNumber(data[y[0].value])}${_data.isPercent ? '%' : ''}`,
127131
}
128132
} else {
129-
return { name: y[0].name, value: `${data[y[0].value]}${_data.isPercent ? '%' : ''}` }
133+
return {
134+
name: y[0].name,
135+
value: `${formatNumber(data[y[0].value])}${_data.isPercent ? '%' : ''}`,
136+
}
130137
}
131138
},
132139
labels: this.showLabel
@@ -137,7 +144,7 @@ export class Bar extends BaseG2Chart {
137144
if (value === undefined || value === null) {
138145
return ''
139146
}
140-
return `${value}${_data.isPercent ? '%' : ''}`
147+
return `${formatNumber(value)}${_data.isPercent ? '%' : ''}`
141148
},
142149
position: (data: any) => {
143150
if (data[y[0].value] < 0) {

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

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import type { ChartAxis, ChartData } from '@/views/chat/component/BaseChart.ts'
33
import type { G2Spec } from '@antv/g2'
44
import {
55
checkIsPercent,
6+
formatNumber,
67
getAxesWithFilter,
78
processMultiQuotaData,
89
} from '@/views/chat/component/charts/utils.ts'
@@ -95,6 +96,9 @@ export class Column extends BaseG2Chart {
9596
},
9697
y: {
9798
title: false, // y[0].name,
99+
labelFormatter: (value: any) => {
100+
return String(formatNumber(value))
101+
},
98102
},
99103
},
100104
scale: {
@@ -114,10 +118,13 @@ export class Column extends BaseG2Chart {
114118
if (series.length > 0) {
115119
return {
116120
name: data[series[0].value],
117-
value: `${data[y[0].value]}${_data.isPercent ? '%' : ''}`,
121+
value: `${formatNumber(data[y[0].value])}${_data.isPercent ? '%' : ''}`,
118122
}
119123
} else {
120-
return { name: y[0].name, value: `${data[y[0].value]}${_data.isPercent ? '%' : ''}` }
124+
return {
125+
name: y[0].name,
126+
value: `${formatNumber(data[y[0].value])}${_data.isPercent ? '%' : ''}`,
127+
}
121128
}
122129
},
123130
labels: this.showLabel
@@ -128,7 +135,7 @@ export class Column extends BaseG2Chart {
128135
if (value === undefined || value === null) {
129136
return ''
130137
}
131-
return `${value}${_data.isPercent ? '%' : ''}`
138+
return `${formatNumber(value)}${_data.isPercent ? '%' : ''}`
132139
},
133140
position: (data: any) => {
134141
if (data[y[0].value] < 0) {

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

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import type { ChartAxis, ChartData } from '@/views/chat/component/BaseChart.ts'
33
import type { G2Spec } from '@antv/g2'
44
import {
55
checkIsPercent,
6+
formatNumber,
67
getAxesWithFilter,
78
processMultiQuotaData,
89
} from '@/views/chat/component/charts/utils.ts'
@@ -69,6 +70,9 @@ export class Line extends BaseG2Chart {
6970
},
7071
y: {
7172
title: false, // y[0].name,
73+
labelFormatter: (value: any) => {
74+
return String(formatNumber(value))
75+
},
7276
},
7377
},
7478
scale: {
@@ -94,7 +98,7 @@ export class Line extends BaseG2Chart {
9498
if (value === undefined || value === null) {
9599
return ''
96100
}
97-
return `${value}${_data.isPercent ? '%' : ''}`
101+
return `${formatNumber(value)}${_data.isPercent ? '%' : ''}`
98102
},
99103
style: {
100104
dx: -10,
@@ -112,10 +116,13 @@ export class Line extends BaseG2Chart {
112116
if (series.length > 0) {
113117
return {
114118
name: data[series[0].value],
115-
value: `${data[y[0].value]}${_data.isPercent ? '%' : ''}`,
119+
value: `${formatNumber(data[y[0].value])}${_data.isPercent ? '%' : ''}`,
116120
}
117121
} else {
118-
return { name: y[0].name, value: `${data[y[0].value]}${_data.isPercent ? '%' : ''}` }
122+
return {
123+
name: y[0].name,
124+
value: `${formatNumber(data[y[0].value])}${_data.isPercent ? '%' : ''}`,
125+
}
119126
}
120127
},
121128
},

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { BaseG2Chart } from '@/views/chat/component/BaseG2Chart.ts'
22
import type { ChartAxis, ChartData } from '@/views/chat/component/BaseChart.ts'
33
import type { G2Spec } from '@antv/g2'
4-
import { checkIsPercent, getAxesWithFilter } from '@/views/chat/component/charts/utils.ts'
4+
import { checkIsPercent, formatNumber, getAxesWithFilter } from '@/views/chat/component/charts/utils.ts'
55

66
export class Pie extends BaseG2Chart {
77
constructor(id: string) {
@@ -48,7 +48,7 @@ export class Pie extends BaseG2Chart {
4848
{
4949
position: 'spider',
5050
text: (data: any) => {
51-
return `${data[series[0].value]}: ${data[y[0].value]}${_data.isPercent ? '%' : ''}`
51+
return `${data[series[0].value]}: ${formatNumber(data[y[0].value])}${_data.isPercent ? '%' : ''}`
5252
},
5353
},
5454
]
@@ -59,7 +59,7 @@ export class Pie extends BaseG2Chart {
5959
(data: any) => {
6060
return {
6161
name: y[0].name,
62-
value: `${data[y[0].value]}${_data.isPercent ? '%' : ''}`,
62+
value: `${formatNumber(data[y[0].value])}${_data.isPercent ? '%' : ''}`,
6363
}
6464
},
6565
],

‎frontend/src/views/chat/component/charts/Table.ts‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import {
1111
} from '@antv/s2'
1212
import { debounce, filter } from 'lodash-es'
1313
import { i18n } from '@/i18n'
14+
import { formatNumber } from '@/views/chat/component/charts/utils.ts'
1415
import '@antv/s2/dist/s2.min.css'
1516

1617
const { t } = i18n.global
@@ -120,6 +121,10 @@ export class Table extends BaseChart {
120121
return {
121122
field: a.value,
122123
name: a.name,
124+
formatter: (value: any) => {
125+
const formatted = formatNumber(value)
126+
return String(formatted)
127+
},
123128
}
124129
}) ?? [],
125130
data: this.data,
@@ -196,7 +201,8 @@ export class Table extends BaseChart {
196201
container.style.fontSize = '14px'
197202
container.style.whiteSpace = 'pre-wrap'
198203

199-
const text = document.createTextNode(meta.fieldValue)
204+
const formattedValue = formatNumber(meta.fieldValue)
205+
const text = document.createTextNode(String(formattedValue))
200206
container.appendChild(text)
201207

202208
return container
@@ -207,7 +213,7 @@ export class Table extends BaseChart {
207213
interaction: {
208214
copy: {
209215
enable: true,
210-
withFormat: true,
216+
withFormat: false,
211217
withHeader: true,
212218
},
213219
brushSelection: {

‎frontend/src/views/chat/component/charts/utils.ts‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,39 @@
11
import type { ChartAxis, ChartData } from '@/views/chat/component/BaseChart.ts'
22
import { endsWith, filter, replace } from 'lodash-es'
33

4+
/**
5+
* 为数值添加千分符，保持原有小数位数不变
6+
* 纯字符串处理，避免精度丢失
7+
* 支持：正负整数、小数、字符串格式的数值
8+
*/
9+
export function formatNumber(value: any): string | number {
10+
if (value === null || value === undefined || value === '') {
11+
return value
12+
}
13+
14+
let str: string
15+
if (typeof value === 'string') {
16+
str = value.trim()
17+
} else if (typeof value === 'number') {
18+
str = String(value)
19+
} else {
20+
return value
21+
}
22+
23+
const match = str.match(/^([+-])?(\d+)(\.(\d+))?$/)
24+
if (!match) {
25+
return value
26+
}
27+
28+
const sign = match[1] || ''
29+
const intPart = match[2]
30+
const decPart = match[3] || ''
31+
32+
const formattedInt = intPart.replace(/\B(?=(\d{3})+(?!\d))/g, ',')
33+
34+
return sign + formattedInt + decPart
35+
}
36+
437
interface CheckedData {
538
isPercent: boolean
639
data: Array<ChartData>

‎g2-ssr/charts/bar.js‎

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
const { checkIsPercent, getAxesWithFilter, processMultiQuotaData } = require('./utils')
1+
const { checkIsPercent, formatNumber, getAxesWithFilter, processMultiQuotaData } = require('./utils')
22

33
function getBarOptions(baseOptions, axis, data) {
44

@@ -78,7 +78,12 @@ function getBarOptions(baseOptions, axis, data) {
7878
labelAutoWrap: true,
7979
labelAutoEllipsis: true,
8080
},
81-
y: { title: false },
81+
y: {
82+
title: false,
83+
labelFormatter: (value) => {
84+
return String(formatNumber(value))
85+
},
86+
},
8287
},
8388
scale: {
8489
x: {
@@ -96,10 +101,10 @@ function getBarOptions(baseOptions, axis, data) {
96101
if (series.length > 0) {
97102
return {
98103
name: data[series[0].value],
99-
value: `${data[y[0].value]}${_data.isPercent ? '%' : ''}`,
104+
value: `${formatNumber(data[y[0].value])}${_data.isPercent ? '%' : ''}`,
100105
}
101106
} else {
102-
return { name: y[0].name, value: `${data[y[0].value]}${_data.isPercent ? '%' : ''}` }
107+
return { name: y[0].name, value: `${formatNumber(data[y[0].value])}${_data.isPercent ? '%' : ''}` }
103108
}
104109
},
105110
labels: [
@@ -109,7 +114,7 @@ function getBarOptions(baseOptions, axis, data) {
109114
if (value === undefined || value === null) {
110115
return ''
111116
}
112-
return `${value}${_data.isPercent ? '%' : ''}`
117+
return `${formatNumber(value)}${_data.isPercent ? '%' : ''}`
113118
},
114119
position: (data) => {
115120
if (data[y[0].value] < 0) {

‎g2-ssr/charts/column.js‎

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
const { checkIsPercent, getAxesWithFilter, processMultiQuotaData } = require('./utils')
1+
const { checkIsPercent, formatNumber, getAxesWithFilter, processMultiQuotaData } = require('./utils')
22

33
function getColumnOptions(baseOptions, axis, data) {
44

@@ -77,7 +77,12 @@ function getColumnOptions(baseOptions, axis, data) {
7777
labelAutoWrap: true,
7878
labelAutoEllipsis: true,
7979
},
80-
y: { title: false },
80+
y: {
81+
title: false,
82+
labelFormatter: (value) => {
83+
return String(formatNumber(value))
84+
},
85+
},
8186
},
8287
scale: {
8388
x: {
@@ -95,10 +100,10 @@ function getColumnOptions(baseOptions, axis, data) {
95100
if (series.length > 0) {
96101
return {
97102
name: data[series[0].value],
98-
value: `${data[y[0].value]}${_data.isPercent ? '%' : ''}`,
103+
value: `${formatNumber(data[y[0].value])}${_data.isPercent ? '%' : ''}`,
99104
}
100105
} else {
101-
return { name: y[0].name, value: `${data[y[0].value]}${_data.isPercent ? '%' : ''}` }
106+
return { name: y[0].name, value: `${formatNumber(data[y[0].value])}${_data.isPercent ? '%' : ''}` }
102107
}
103108
},
104109
labels: [
@@ -108,7 +113,7 @@ function getColumnOptions(baseOptions, axis, data) {
108113
if (value === undefined || value === null) {
109114
return ''
110115
}
111-
return `${value}${_data.isPercent ? '%' : ''}`
116+
return `${formatNumber(value)}${_data.isPercent ? '%' : ''}`
112117
},
113118
position: (data) => {
114119
if (data[y[0].value] < 0) {

‎g2-ssr/charts/line.js‎

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
const { checkIsPercent, getAxesWithFilter, processMultiQuotaData } = require('./utils')
1+
const { checkIsPercent, formatNumber, getAxesWithFilter, processMultiQuotaData } = require('./utils')
22

33
function getLineOptions(baseOptions, axis, data) {
44

@@ -51,7 +51,12 @@ function getLineOptions(baseOptions, axis, data) {
5151
labelAutoWrap: true,
5252
labelAutoEllipsis: true,
5353
},
54-
y: { title: y[0].name },
54+
y: {
55+
title: y[0].name,
56+
labelFormatter: (value) => {
57+
return String(formatNumber(value))
58+
},
59+
},
5560
},
5661
scale: {
5762
x: {
@@ -75,7 +80,7 @@ function getLineOptions(baseOptions, axis, data) {
7580
if (value === undefined || value === null) {
7681
return ''
7782
}
78-
return `${value}${_data.isPercent ? '%' : ''}`
83+
return `${formatNumber(value)}${_data.isPercent ? '%' : ''}`
7984
},
8085
style: {
8186
dx: -10,
@@ -92,10 +97,10 @@ function getLineOptions(baseOptions, axis, data) {
9297
if (series.length > 0) {
9398
return {
9499
name: data[series[0].value],
95-
value: `${data[y[0].value]}${_data.isPercent ? '%' : ''}`,
100+
value: `${formatNumber(data[y[0].value])}${_data.isPercent ? '%' : ''}`,
96101
}
97102
} else {
98-
return { name: y[0].name, value: `${data[y[0].value]}${_data.isPercent ? '%' : ''}` }
103+
return { name: y[0].name, value: `${formatNumber(data[y[0].value])}${_data.isPercent ? '%' : ''}` }
99104
}
100105
},
101106
},

‎g2-ssr/charts/pie.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
const { checkIsPercent, getAxesWithFilter } = require('./utils')
1+
const { checkIsPercent, formatNumber, getAxesWithFilter } = require('./utils')
22

33
function getPieOptions(baseOptions, axis, data) {
44

@@ -35,7 +35,7 @@ function getPieOptions(baseOptions, axis, data) {
3535
{
3636
position: 'spider',
3737
text: (data) =>
38-
`${data[series[0].value]}: ${data[y[0].value]}${_data.isPercent ? '%' : ''}`,
38+
`${data[series[0].value]}: ${formatNumber(data[y[0].value])}${_data.isPercent ? '%' : ''}`,
3939
},
4040
],
4141
tooltip: {
@@ -44,7 +44,7 @@ function getPieOptions(baseOptions, axis, data) {
4444
(data) => {
4545
return {
4646
name: y[0].name,
47-
value: `${data[y[0].value]}${_data.isPercent ? '%' : ''}`,
47+
value: `${formatNumber(data[y[0].value])}${_data.isPercent ? '%' : ''}`,
4848
}
4949
},
5050
],

0 commit comments

Comments
 (0)