Skip to content

Commit 344be80

Browse files
ulleoulleo
committed
fix: percent value in charts
1 parent 783717e commit 344be80

File tree

5 files changed

+76
-42
lines changed

5 files changed

+76
-42
lines changed

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

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +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 } from '@/views/chat/component/charts/utils.ts'
45

56
export class Bar extends BaseG2Chart {
67
constructor(id: string) {
@@ -18,10 +19,12 @@ export class Bar extends BaseG2Chart {
1819
return
1920
}
2021

22+
const _data = checkIsPercent(y[0], data)
23+
2124
const options: G2Spec = {
2225
...this.chart.options(),
2326
type: 'interval',
24-
data: data,
27+
data: _data.data,
2528
coordinate: { transform: [{ type: 'transpose' }] },
2629
encode: {
2730
x: x[0].value,
@@ -45,14 +48,17 @@ export class Bar extends BaseG2Chart {
4548
},
4649
tooltip: (data) => {
4750
if (series.length > 0) {
48-
return { name: data[series[0].value], value: data[y[0].value] }
51+
return {
52+
name: data[series[0].value],
53+
value: `${data[y[0].value]}${_data.isPercent ? '%' : ''}`,
54+
}
4955
} else {
50-
return { name: y[0].name, value: data[y[0].value] }
56+
return { name: y[0].name, value: `${data[y[0].value]}${_data.isPercent ? '%' : ''}` }
5157
}
5258
},
5359
labels: [
5460
{
55-
text: y[0].value,
61+
text: (data: any) => `${data[y[0].value]}${_data.isPercent ? '%' : ''}`,
5662
transform: [
5763
{ type: 'overlapDodgeY' },
5864
{ type: 'contrastReverse' },

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

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +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 } from '@/views/chat/component/charts/utils.ts'
45

56
export class Column extends BaseG2Chart {
67
constructor(id: string) {
@@ -18,10 +19,12 @@ export class Column extends BaseG2Chart {
1819
return
1920
}
2021

22+
const _data = checkIsPercent(y[0], data)
23+
2124
const options: G2Spec = {
2225
...this.chart.options(),
2326
type: 'interval',
24-
data: data,
27+
data: _data.data,
2528
encode: {
2629
x: x[0].value,
2730
y: y[0].value,
@@ -44,14 +47,17 @@ export class Column extends BaseG2Chart {
4447
},
4548
tooltip: (data) => {
4649
if (series.length > 0) {
47-
return { name: data[series[0].value], value: data[y[0].value] }
50+
return {
51+
name: data[series[0].value],
52+
value: `${data[y[0].value]}${_data.isPercent ? '%' : ''}`,
53+
}
4854
} else {
49-
return { name: y[0].name, value: data[y[0].value] }
55+
return { name: y[0].name, value: `${data[y[0].value]}${_data.isPercent ? '%' : ''}` }
5056
}
5157
},
5258
labels: [
5359
{
54-
text: y[0].value,
60+
text: (data: any) => `${data[y[0].value]}${_data.isPercent ? '%' : ''}`,
5561
position: 'top',
5662
dy: -25,
5763
transform: [

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

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +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 } from '@/views/chat/component/charts/utils.ts'
45

56
export class Line extends BaseG2Chart {
67
constructor(id: string) {
@@ -18,10 +19,12 @@ export class Line extends BaseG2Chart {
1819
return
1920
}
2021

22+
const _data = checkIsPercent(y[0], data)
23+
2124
const options: G2Spec = {
2225
...this.chart.options(),
2326
type: 'view',
24-
data: data,
27+
data: _data.data,
2528
encode: {
2629
x: x[0].value,
2730
y: y[0].value,
@@ -44,7 +47,7 @@ export class Line extends BaseG2Chart {
4447
type: 'line',
4548
labels: [
4649
{
47-
text: y[0].value,
50+
text: (data: any) => `${data[y[0].value]}${_data.isPercent ? '%' : ''}`,
4851
style: {
4952
dx: -10,
5053
dy: -12,
@@ -58,9 +61,12 @@ export class Line extends BaseG2Chart {
5861
],
5962
tooltip: (data) => {
6063
if (series.length > 0) {
61-
return { name: data[series[0].value], value: data[y[0].value] }
64+
return {
65+
name: data[series[0].value],
66+
value: `${data[y[0].value]}${_data.isPercent ? '%' : ''}`,
67+
}
6268
} else {
63-
return { name: y[0].name, value: data[y[0].value] }
69+
return { name: y[0].name, value: `${data[y[0].value]}${_data.isPercent ? '%' : ''}` }
6470
}
6571
},
6672
},

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

Lines changed: 5 additions & 30 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 { endsWith, filter, replace } from 'lodash-es'
4+
import { checkIsPercent } from '@/views/chat/component/charts/utils.ts'
55

66
export class Pie extends BaseG2Chart {
77
constructor(id: string) {
@@ -18,39 +18,14 @@ export class Pie extends BaseG2Chart {
1818
}
1919

2020
// %
21-
const _data = []
22-
let isPercent = false
23-
const notEmptyData = filter(
24-
data,
25-
(d) =>
26-
d &&
27-
d[y[0].value] !== null &&
28-
d[y[0].value] !== undefined &&
29-
d[y[0].value] !== 0 &&
30-
d[y[0].value] !== '0'
31-
)
32-
if (notEmptyData.length > 0) {
33-
const v = notEmptyData[0][y[0].value] + ''
34-
if (endsWith(v.trim(), '%')) {
35-
isPercent = true
36-
}
37-
}
38-
for (let i = 0; i < data.length; i++) {
39-
const v = data[i]
40-
const _v = { ...v }
41-
if (isPercent) {
42-
const formatValue = replace(v[y[0].value], '%', '')
43-
_v[y[0].value] = Number(formatValue)
44-
}
45-
_data.push(_v)
46-
}
21+
const _data = checkIsPercent(y[0], data)
4722

4823
const options: G2Spec = {
4924
...this.chart.options(),
5025
type: 'interval',
5126
coordinate: { type: 'theta', outerRadius: 0.8 },
5227
transform: [{ type: 'stackY' }],
53-
data: _data,
28+
data: _data.data,
5429
encode: {
5530
y: y[0].value,
5631
color: series[0].value,
@@ -62,11 +37,11 @@ export class Pie extends BaseG2Chart {
6237
{
6338
position: 'outside',
6439
text: (data: any) =>
65-
`${data[series[0].value]}: ${data[y[0].value]}${isPercent ? '%' : ''}`,
40+
`${data[series[0].value]}: ${data[y[0].value]}${_data.isPercent ? '%' : ''}`,
6641
},
6742
],
6843
tooltip: (data) => {
69-
return { name: y[0].name, value: `${data[y[0].value]}${isPercent ? '%' : ''}` }
44+
return { name: y[0].name, value: `${data[y[0].value]}${_data.isPercent ? '%' : ''}` }
7045
},
7146
}
7247

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

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import type { ChartAxis, ChartData } from '@/views/chat/component/BaseChart.ts'
2+
import { endsWith, filter, replace } from 'lodash-es'
3+
4+
interface CheckedData {
5+
isPercent: boolean
6+
data: Array<ChartData>
7+
}
8+
9+
export function checkIsPercent(valueAxis: ChartAxis, data: Array<ChartData>): CheckedData {
10+
const result: CheckedData = {
11+
isPercent: false,
12+
data: [],
13+
}
14+
15+
const notEmptyData = filter(
16+
data,
17+
(d) =>
18+
d &&
19+
d[valueAxis.value] !== null &&
20+
d[valueAxis.value] !== undefined &&
21+
d[valueAxis.value] !== 0 &&
22+
d[valueAxis.value] !== '0'
23+
)
24+
if (notEmptyData.length > 0) {
25+
const v = notEmptyData[0][valueAxis.value] + ''
26+
if (endsWith(v.trim(), '%')) {
27+
result.isPercent = true
28+
}
29+
}
30+
for (let i = 0; i < data.length; i++) {
31+
const v = data[i]
32+
const _v = { ...v } as ChartData
33+
if (result.isPercent) {
34+
const formatValue = replace(v[valueAxis.value], '%', '')
35+
_v[valueAxis.value] = Number(formatValue)
36+
}
37+
result.data.push(_v)
38+
}
39+
40+
return result
41+
}

0 commit comments

Comments
 (0)