klinsmaya/SQLBot
1
0
Fork 0
mirror of https://gh-proxy.org/https://github.com/klinsmaya/SQLBot.git synced 2026-11-08 09:17:06 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: percent value in charts

Browse Source
This commit is contained in:
ulleo
2025-07-22 15:03:16 +08:00
parent 783717ea78
commit 344be8054d
5 changed files with 76 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/views/chat/component/charts/Bar.ts
+10 -4
View File
@@ -1,6 +1,7 @@
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 } from '@/views/chat/component/charts/utils.ts'
export class Bar extends BaseG2Chart {
constructor(id: string) {
@@ -18,10 +19,12 @@ export class Bar extends BaseG2Chart {
return
}
const _data = checkIsPercent(y[0], data)
const options: G2Spec = {
...this.chart.options(),
type: 'interval',
data: data,
data: _data.data,
coordinate: { transform: [{ type: 'transpose' }] },
encode: {
x: x[0].value,
@@ -45,14 +48,17 @@ export class Bar extends BaseG2Chart {
},
tooltip: (data) => {
if (series.length > 0) {
return { name: data[series[0].value], value: data[y[0].value] }
return {
name: data[series[0].value],
value: `${data[y[0].value]}${_data.isPercent ? '%' : ''}`,
}
} else {
return { name: y[0].name, value: data[y[0].value] }
return { name: y[0].name, value: `${data[y[0].value]}${_data.isPercent ? '%' : ''}` }
}
},
labels: [
{
text: y[0].value,
text: (data: any) => `${data[y[0].value]}${_data.isPercent ? '%' : ''}`,
transform: [
{ type: 'overlapDodgeY' },
{ type: 'contrastReverse' },
frontend/src/views/chat/component/charts/Column.ts
+10 -4
View File
@@ -1,6 +1,7 @@
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 } from '@/views/chat/component/charts/utils.ts'
export class Column extends BaseG2Chart {
constructor(id: string) {
@@ -18,10 +19,12 @@ export class Column extends BaseG2Chart {
return
}
const _data = checkIsPercent(y[0], data)
const options: G2Spec = {
...this.chart.options(),
type: 'interval',
data: data,
data: _data.data,
encode: {
x: x[0].value,
y: y[0].value,
@@ -44,14 +47,17 @@ export class Column extends BaseG2Chart {
},
tooltip: (data) => {
if (series.length > 0) {
return { name: data[series[0].value], value: data[y[0].value] }
return {
name: data[series[0].value],
value: `${data[y[0].value]}${_data.isPercent ? '%' : ''}`,
}
} else {
return { name: y[0].name, value: data[y[0].value] }
return { name: y[0].name, value: `${data[y[0].value]}${_data.isPercent ? '%' : ''}` }
}
},
labels: [
{
text: y[0].value,
text: (data: any) => `${data[y[0].value]}${_data.isPercent ? '%' : ''}`,
position: 'top',
dy: -25,
transform: [
frontend/src/views/chat/component/charts/Line.ts
+10 -4
View File
@@ -1,6 +1,7 @@
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 } from '@/views/chat/component/charts/utils.ts'
export class Line extends BaseG2Chart {
constructor(id: string) {
@@ -18,10 +19,12 @@ export class Line extends BaseG2Chart {
return
}
const _data = checkIsPercent(y[0], data)
const options: G2Spec = {
...this.chart.options(),
type: 'view',
data: data,
data: _data.data,
encode: {
x: x[0].value,
y: y[0].value,
@@ -44,7 +47,7 @@ export class Line extends BaseG2Chart {
type: 'line',
labels: [
{
text: y[0].value,
text: (data: any) => `${data[y[0].value]}${_data.isPercent ? '%' : ''}`,
style: {
dx: -10,
dy: -12,
@@ -58,9 +61,12 @@ export class Line extends BaseG2Chart {
],
tooltip: (data) => {
if (series.length > 0) {
return { name: data[series[0].value], value: data[y[0].value] }
return {
name: data[series[0].value],
value: `${data[y[0].value]}${_data.isPercent ? '%' : ''}`,
}
} else {
return { name: y[0].name, value: data[y[0].value] }
return { name: y[0].name, value: `${data[y[0].value]}${_data.isPercent ? '%' : ''}` }
}
},
},
frontend/src/views/chat/component/charts/Pie.ts
+5 -30
View File
@@ -1,7 +1,7 @@
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 { endsWith, filter, replace } from 'lodash-es'
import { checkIsPercent } from '@/views/chat/component/charts/utils.ts'
export class Pie extends BaseG2Chart {
constructor(id: string) {
@@ -18,39 +18,14 @@ export class Pie extends BaseG2Chart {
}
// %
const _data = []
let isPercent = false
const notEmptyData = filter(
data,
(d) =>
d &&
d[y[0].value] !== null &&
d[y[0].value] !== undefined &&
d[y[0].value] !== 0 &&
d[y[0].value] !== '0'
)
if (notEmptyData.length > 0) {
const v = notEmptyData[0][y[0].value] + ''
if (endsWith(v.trim(), '%')) {
isPercent = true
}
}
for (let i = 0; i < data.length; i++) {
const v = data[i]
const _v = { ...v }
if (isPercent) {
const formatValue = replace(v[y[0].value], '%', '')
_v[y[0].value] = Number(formatValue)
}
_data.push(_v)
}
const _data = checkIsPercent(y[0], data)
const options: G2Spec = {
...this.chart.options(),
type: 'interval',
coordinate: { type: 'theta', outerRadius: 0.8 },
transform: [{ type: 'stackY' }],
data: _data,
data: _data.data,
encode: {
y: y[0].value,
color: series[0].value,
@@ -62,11 +37,11 @@ export class Pie extends BaseG2Chart {
{
position: 'outside',
text: (data: any) =>
`${data[series[0].value]}: ${data[y[0].value]}${isPercent ? '%' : ''}`,
`${data[series[0].value]}: ${data[y[0].value]}${_data.isPercent ? '%' : ''}`,
},
],
tooltip: (data) => {
return { name: y[0].name, value: `${data[y[0].value]}${isPercent ? '%' : ''}` }
return { name: y[0].name, value: `${data[y[0].value]}${_data.isPercent ? '%' : ''}` }
},
}
frontend/src/views/chat/component/charts/utils.ts
+41
View File
@@ -0,0 +1,41 @@
import type { ChartAxis, ChartData } from '@/views/chat/component/BaseChart.ts'
import { endsWith, filter, replace } from 'lodash-es'
interface CheckedData {
isPercent: boolean
data: Array<ChartData>
}
export function checkIsPercent(valueAxis: ChartAxis, data: Array<ChartData>): CheckedData {
const result: CheckedData = {
isPercent: false,
data: [],
}
const notEmptyData = filter(
data,
(d) =>
d &&
d[valueAxis.value] !== null &&
d[valueAxis.value] !== undefined &&
d[valueAxis.value] !== 0 &&
d[valueAxis.value] !== '0'
)
if (notEmptyData.length > 0) {
const v = notEmptyData[0][valueAxis.value] + ''
if (endsWith(v.trim(), '%')) {
result.isPercent = true
}
}
for (let i = 0; i < data.length; i++) {
const v = data[i]
const _v = { ...v } as ChartData
if (result.isPercent) {
const formatValue = replace(v[valueAxis.value], '%', '')
_v[valueAxis.value] = Number(formatValue)
}
result.data.push(_v)
}
return result
}