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],