diff --git a/frontend/src/views/chat/chat-block/ChartBlock.vue b/frontend/src/views/chat/chat-block/ChartBlock.vue
index 57981a46..37f6e9a6 100644
--- a/frontend/src/views/chat/chat-block/ChartBlock.vue
+++ b/frontend/src/views/chat/chat-block/ChartBlock.vue
@@ -19,6 +19,7 @@ import icon_into_item_outlined from '@/assets/svg/icon_into-item_outlined.svg'
import icon_window_max_outlined from '@/assets/svg/icon_window-max_outlined.svg'
import icon_window_mini_outlined from '@/assets/svg/icon_window-mini_outlined.svg'
import icon_copy_outlined from '@/assets/svg/icon_copy_outlined.svg'
+import ICON_STYLE from '@/assets/svg/icon_style-set_outlined.svg'
import { useI18n } from 'vue-i18n'
import SQLComponent from '@/views/chat/component/SQLComponent.vue'
import { useAssistantStore } from '@/stores/assistant'
@@ -211,6 +212,8 @@ function showSql() {
sqlShow.value = true
}
+const showLabel = ref(false)
+
function addToDashboard() {
const recordeInfo = {
id: '1-1',
@@ -393,6 +396,27 @@ watch(
+
+
+
+
+
+
+
+
+
+
@@ -498,6 +522,7 @@ watch(
:message="message"
:data="data"
:loading-data="loadingData"
+ :show-label="showLabel"
/>
diff --git a/frontend/src/views/chat/component/BaseChart.ts b/frontend/src/views/chat/component/BaseChart.ts
index 598f8cea..bf02f587 100644
--- a/frontend/src/views/chat/component/BaseChart.ts
+++ b/frontend/src/views/chat/component/BaseChart.ts
@@ -17,6 +17,7 @@ export abstract class BaseChart {
_name: string = 'base-chart'
axis: Array = []
data: Array = []
+ showLabel: boolean = false
constructor(id: string, name: string) {
this.id = id
diff --git a/frontend/src/views/chat/component/ChartComponent.vue b/frontend/src/views/chat/component/ChartComponent.vue
index 811b504a..2feda417 100644
--- a/frontend/src/views/chat/component/ChartComponent.vue
+++ b/frontend/src/views/chat/component/ChartComponent.vue
@@ -14,6 +14,7 @@ const params = withDefaults(
y?: Array
series?: Array
multiQuotaName?: string | undefined
+ showLabel?: boolean
}>(),
{
data: () => [],
@@ -22,6 +23,7 @@ const params = withDefaults(
y: () => [],
series: () => [],
multiQuotaName: undefined,
+ showLabel: false,
}
)
@@ -61,14 +63,21 @@ const axis = computed(() => {
let chartInstance: BaseChart | undefined
-function renderChart() {
chartInstance = getChartInstance(params.type, chartId.value)
if (chartInstance) {
+ chartInstance.showLabel = params.showLabel
chartInstance.init(axis.value, params.data)
chartInstance.render()
}
}
+watch(
+ () => params.showLabel,
+ () => {
+ renderChart()
+ }
+)
+
function destroyChart() {
if (chartInstance) {
chartInstance.destroy()
diff --git a/frontend/src/views/chat/component/DisplayChartBlock.vue b/frontend/src/views/chat/component/DisplayChartBlock.vue
index 4f16a96e..b53f937c 100644
--- a/frontend/src/views/chat/component/DisplayChartBlock.vue
+++ b/frontend/src/views/chat/component/DisplayChartBlock.vue
@@ -11,6 +11,7 @@ const props = defineProps<{
message: ChatMessage
data: Array<{ [key: string]: any }>
loadingData?: boolean
+ showLabel?: boolean
}>()
const { t } = useI18n()
@@ -117,6 +118,7 @@ defineExpose({
:series="series"
:data="data"
:multi-quota-name="multiQuotaName"
+ :show-label="showLabel"
/>
diff --git a/frontend/src/views/chat/component/charts/Bar.ts b/frontend/src/views/chat/component/charts/Bar.ts
index adbee12b..70cc70f2 100644
--- a/frontend/src/views/chat/component/charts/Bar.ts
+++ b/frontend/src/views/chat/component/charts/Bar.ts
@@ -119,7 +119,7 @@ export class Bar extends BaseG2Chart {
elementHighlight: { background: true, region: true },
tooltip: { series: series.length > 0, shared: true },
},
- tooltip: (data) => {
+ tooltip: (data: any) => {
if (series.length > 0) {
return {
name: data[series[0].value],
@@ -129,6 +129,30 @@ export class Bar extends BaseG2Chart {
return { name: y[0].name, value: `${data[y[0].value]}${_data.isPercent ? '%' : ''}` }
}
},
+ labels: this.showLabel
+ ? [
+ {
+ 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' },
+ ],
+ },
+ ]
+ : [],
} as G2Spec
if (series.length > 0) {
diff --git a/frontend/src/views/chat/component/charts/Column.ts b/frontend/src/views/chat/component/charts/Column.ts
index 629037d4..c2034cd5 100644
--- a/frontend/src/views/chat/component/charts/Column.ts
+++ b/frontend/src/views/chat/component/charts/Column.ts
@@ -110,7 +110,7 @@ export class Column extends BaseG2Chart {
elementHighlight: { background: true, region: true },
tooltip: { series: series.length > 0, shared: true },
},
- tooltip: (data) => {
+ tooltip: (data: any) => {
if (series.length > 0) {
return {
name: data[series[0].value],
@@ -120,28 +120,30 @@ export class Column extends BaseG2Chart {
return { name: y[0].name, value: `${data[y[0].value]}${_data.isPercent ? '%' : ''}` }
}
},
- // labels: [
- // {
- // 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' },
- // ],
- // },
- // ],
+ labels: this.showLabel
+ ? [
+ {
+ 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' },
+ ],
+ },
+ ]
+ : [],
} as G2Spec
if (series.length > 0) {
diff --git a/frontend/src/views/chat/component/charts/Line.ts b/frontend/src/views/chat/component/charts/Line.ts
index 62c80c34..87d48c3b 100644
--- a/frontend/src/views/chat/component/charts/Line.ts
+++ b/frontend/src/views/chat/component/charts/Line.ts
@@ -86,27 +86,29 @@ export class Line extends BaseG2Chart {
encode: {
shape: 'smooth',
},
- // labels: [
- // {
- // 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' },
- // ],
- // },
- // ],
- tooltip: (data) => {
+ labels: this.showLabel
+ ? [
+ {
+ 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' },
+ ],
+ },
+ ]
+ : [],
+ tooltip: (data: any) => {
if (series.length > 0) {
return {
name: data[series[0].value],