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

feat: support data labels on charts

Browse Source
This commit is contained in:
ulleo
2026-02-05 11:47:47 +08:00
committed by ulleo
parent cac3c6e39e
commit f790f2490b
9 changed files with 78 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/i18n/en.json
+2
View File
@@ -728,6 +728,8 @@
"line": "Line",
"pie": "Pie"
},
"hide_label": "Hide Label",
"show_label": "Show Label",
"sort_asc": "Ascending",
"sort_desc": "Descending",
"sort_none": "No Sort",
frontend/src/i18n/ko-KR.json
+2
View File
@@ -728,6 +728,8 @@
"line": "선 차트",
"pie": "원형 차트"
},
"hide_label": "라벨 숨기기",
"show_label": "라벨 표시",
"sort_asc": "오름차순",
"sort_desc": "내림차순",
"sort_none": "정렬 안 함",
frontend/src/i18n/zh-CN.json
+3 -1
View File
@@ -728,6 +728,8 @@
"line": "折线图",
"pie": "饼图"
},
"hide_label": "隐藏标签",
"show_label": "显示标签",
"sort_asc": "升序",
"sort_desc": "降序",
"sort_none": "不排序",
@@ -930,4 +932,4 @@
"to_doc": "查看 API",
"trigger_limit": "最多支持创建 {0} 个 API Key"
}
}
}
frontend/src/views/chat/chat-block/ChartBlock.vue
+1 -2
View File
@@ -396,9 +396,8 @@ watch(
</el-tooltip>
</div>
<div class="chart-select-container">
<div v-if="currentChartType !== 'table'" class="chart-select-container">
<el-tooltip
v-if="currentChartType !== 'table'"
effect="dark"
:offset="8"
:content="showLabel ? t('chat.hide_label') : t('chat.show_label')"
frontend/src/views/chat/component/ChartComponent.vue
+2 -1
View File
@@ -1,5 +1,5 @@
<script setup lang="ts">
import { computed, nextTick, onMounted, onUnmounted } from 'vue'
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'
@@ -63,6 +63,7 @@ const axis = computed(() => {
let chartInstance: BaseChart | undefined
function renderChart() {
chartInstance = getChartInstance(params.type, chartId.value)
if (chartInstance) {
chartInstance.showLabel = params.showLabel
frontend/src/views/chat/component/charts/Bar.ts
+20 -20
View File
@@ -131,27 +131,27 @@ export class Bar extends BaseG2Chart {
},
labels: this.showLabel
? [
{
text: (data: any) => {
const value = data[y[0].value]
if (value === undefined || value === null) {
return ''
}
return `${value}${_data.isPercent ? '%' : ''}`
{
text: (data: any) => {
const value = data[y[0].value]
if (value === undefined || value === null) {
return ''
}
return `${value}${_data.isPercent ? '%' : ''}`
},
position: (data: any) => {
if (data[y[0].value] < 0) {
return 'left'
}
return 'right'
},
transform: [
{ type: 'contrastReverse' },
{ type: 'exceedAdjust' },
{ type: 'overlapHide' },
],
},
position: (data: any) => {
if (data[y[0].value] < 0) {
return 'left'
}
return 'right'
},
transform: [
{ type: 'contrastReverse' },
{ type: 'exceedAdjust' },
{ type: 'overlapHide' },
],
},
]
]
: [],
} as G2Spec
frontend/src/views/chat/component/charts/Column.ts
+20 -20
View File
@@ -122,27 +122,27 @@ export class Column extends BaseG2Chart {
},
labels: this.showLabel
? [
{
text: (data: any) => {
const value = data[y[0].value]
if (value === undefined || value === null) {
return ''
}
return `${value}${_data.isPercent ? '%' : ''}`
{
text: (data: any) => {
const value = data[y[0].value]
if (value === undefined || value === null) {
return ''
}
return `${value}${_data.isPercent ? '%' : ''}`
},
position: (data: any) => {
if (data[y[0].value] < 0) {
return 'bottom'
}
return 'top'
},
transform: [
{ type: 'contrastReverse' },
{ type: 'exceedAdjust' },
{ type: 'overlapHide' },
],
},
position: (data: any) => {
if (data[y[0].value] < 0) {
return 'bottom'
}
return 'top'
},
transform: [
{ type: 'contrastReverse' },
{ type: 'exceedAdjust' },
{ type: 'overlapHide' },
],
},
]
]
: [],
} as G2Spec
frontend/src/views/chat/component/charts/Line.ts
+18 -18
View File
@@ -88,25 +88,25 @@ export class Line extends BaseG2Chart {
},
labels: this.showLabel
? [
{
text: (data: any) => {
const value = data[y[0].value]
if (value === undefined || value === null) {
return ''
}
return `${value}${_data.isPercent ? '%' : ''}`
{
text: (data: any) => {
const value = data[y[0].value]
if (value === undefined || value === null) {
return ''
}
return `${value}${_data.isPercent ? '%' : ''}`
},
style: {
dx: -10,
dy: -12,
},
transform: [
{ type: 'contrastReverse' },
{ type: 'exceedAdjust' },
{ type: 'overlapHide' },
],
},
style: {
dx: -10,
dy: -12,
},
transform: [
{ type: 'contrastReverse' },
{ type: 'exceedAdjust' },
{ type: 'overlapHide' },
],
},
]
]
: [],
tooltip: (data: any) => {
if (series.length > 0) {
frontend/src/views/chat/component/charts/Pie.ts
+10 -8
View File
@@ -43,14 +43,16 @@ export class Pie extends BaseG2Chart {
color: { position: 'bottom', layout: { justifyContent: 'center' } },
},
animate: { enter: { type: 'waveIn' } },
labels: [
{
position: 'spider',
text: (data: any) => {
return `${data[series[0].value]}: ${data[y[0].value]}${_data.isPercent ? '%' : ''}`
},
},
],
labels: this.showLabel
? [
{
position: 'spider',
text: (data: any) => {
return `${data[series[0].value]}: ${data[y[0].value]}${_data.isPercent ? '%' : ''}`
},
},
]
: [],
tooltip: {
title: (data: any) => data[series[0].value],
items: [