From 302351b04fa9ee0ee3737b80995fc06b355da86c Mon Sep 17 00:00:00 2001 From: ulleo Date: Tue, 22 Jul 2025 18:34:50 +0800 Subject: [PATCH] feat: charts css --- frontend/src/views/chat/RecommendQuestion.vue | 6 ++++- .../src/views/chat/component/BaseG2Chart.ts | 1 + .../src/views/chat/component/charts/Bar.ts | 22 +++++++++++++++--- .../src/views/chat/component/charts/Column.ts | 23 +++++++++++++++---- .../src/views/chat/component/charts/Line.ts | 22 ++++++++++++++++-- frontend/src/views/chat/index.vue | 2 ++ 6 files changed, 66 insertions(+), 10 deletions(-) diff --git a/frontend/src/views/chat/RecommendQuestion.vue b/frontend/src/views/chat/RecommendQuestion.vue index d239ee32..319cf483 100644 --- a/frontend/src/views/chat/RecommendQuestion.vue +++ b/frontend/src/views/chat/RecommendQuestion.vue @@ -10,12 +10,14 @@ const props = withDefaults( currentChat?: ChatInfo questions?: string firstChat?: boolean + disabled?: boolean }>(), { recordId: undefined, currentChat: () => new ChatInfo(), questions: '[]', firstChat: false, + disabled: false, } ) @@ -47,7 +49,9 @@ const computedQuestions = computed(() => { const { t } = useI18n() function clickQuestion(question: string): void { - emits('clickQuestion', question) + if (!props.disabled) { + emits('clickQuestion', question) + } } const stopFlag = ref(false) diff --git a/frontend/src/views/chat/component/BaseG2Chart.ts b/frontend/src/views/chat/component/BaseG2Chart.ts index c448905e..3dfc43f2 100644 --- a/frontend/src/views/chat/component/BaseG2Chart.ts +++ b/frontend/src/views/chat/component/BaseG2Chart.ts @@ -9,6 +9,7 @@ export abstract class BaseG2Chart extends BaseChart { this.chart = new Chart({ container: id, autoFit: true, + padding: 'auto', }) this.chart.theme({ diff --git a/frontend/src/views/chat/component/charts/Bar.ts b/frontend/src/views/chat/component/charts/Bar.ts index 8cb577e5..b017655d 100644 --- a/frontend/src/views/chat/component/charts/Bar.ts +++ b/frontend/src/views/chat/component/charts/Bar.ts @@ -31,8 +31,23 @@ export class Bar extends BaseG2Chart { y: y[0].value, color: series.length > 0 ? series[0].value : undefined, }, + style: { + radiusTopLeft: 4, + radiusTopRight: 4, + }, axis: { - x: { title: x[0].name }, + x: { + title: x[0].name, + labelFontSize: 12, + labelAutoHide: { + type: 'hide', + keepHeader: true, + keepTail: true, + }, + labelAutoRotate: false, + labelAutoWrap: true, + labelAutoEllipsis: true, + }, y: { title: y[0].name }, }, scale: { @@ -44,7 +59,8 @@ export class Bar extends BaseG2Chart { }, }, interaction: { - elementHighlight: { background: true }, + elementHighlight: { background: true, region: true }, + tooltip: { series: series.length > 0, shared: true }, }, tooltip: (data) => { if (series.length > 0) { @@ -60,8 +76,8 @@ export class Bar extends BaseG2Chart { { text: (data: any) => `${data[y[0].value]}${_data.isPercent ? '%' : ''}`, transform: [ - { type: 'overlapDodgeY' }, { type: 'contrastReverse' }, + { type: 'exceedAdjust' }, { type: 'overlapHide' }, ], }, diff --git a/frontend/src/views/chat/component/charts/Column.ts b/frontend/src/views/chat/component/charts/Column.ts index 37d3a639..8b33f1ed 100644 --- a/frontend/src/views/chat/component/charts/Column.ts +++ b/frontend/src/views/chat/component/charts/Column.ts @@ -30,8 +30,23 @@ export class Column extends BaseG2Chart { y: y[0].value, color: series.length > 0 ? series[0].value : undefined, }, + style: { + radiusTopLeft: 4, + radiusTopRight: 4, + }, axis: { - x: { title: x[0].name }, + x: { + title: x[0].name, + labelFontSize: 12, + labelAutoHide: { + type: 'hide', + keepHeader: true, + keepTail: true, + }, + labelAutoRotate: false, + labelAutoWrap: true, + labelAutoEllipsis: true, + }, y: { title: y[0].name }, }, scale: { @@ -43,7 +58,8 @@ export class Column extends BaseG2Chart { }, }, interaction: { - elementHighlight: { background: true }, + elementHighlight: { background: true, region: true }, + tooltip: { series: series.length > 0, shared: true }, }, tooltip: (data) => { if (series.length > 0) { @@ -59,10 +75,9 @@ export class Column extends BaseG2Chart { { text: (data: any) => `${data[y[0].value]}${_data.isPercent ? '%' : ''}`, position: 'top', - dy: -25, transform: [ - { type: 'overlapDodgeY' }, { type: 'contrastReverse' }, + { type: 'exceedAdjust' }, { type: 'overlapHide' }, ], }, diff --git a/frontend/src/views/chat/component/charts/Line.ts b/frontend/src/views/chat/component/charts/Line.ts index 6b75fc17..bbf0424e 100644 --- a/frontend/src/views/chat/component/charts/Line.ts +++ b/frontend/src/views/chat/component/charts/Line.ts @@ -31,7 +31,18 @@ export class Line extends BaseG2Chart { color: series.length > 0 ? series[0].value : undefined, }, axis: { - x: { title: x[0].name }, + x: { + title: x[0].name, + labelFontSize: 12, + labelAutoHide: { + type: 'hide', + keepHeader: true, + keepTail: true, + }, + labelAutoRotate: false, + labelAutoWrap: true, + labelAutoEllipsis: true, + }, y: { title: y[0].name }, }, scale: { @@ -42,9 +53,16 @@ export class Line extends BaseG2Chart { nice: true, }, }, + interaction: { + tooltip: { series: series.length > 0, shared: true }, + }, + children: [ { type: 'line', + encode: { + shape: 'smooth', + }, labels: [ { text: (data: any) => `${data[y[0].value]}${_data.isPercent ? '%' : ''}`, @@ -53,7 +71,7 @@ export class Line extends BaseG2Chart { dy: -12, }, transform: [ - { type: 'overlapDodgeY' }, + { type: 'contrastReverse' }, { type: 'exceedAdjust' }, { type: 'overlapHide' }, ], diff --git a/frontend/src/views/chat/index.vue b/frontend/src/views/chat/index.vue index bbf51f25..874d0bcf 100644 --- a/frontend/src/views/chat/index.vue +++ b/frontend/src/views/chat/index.vue @@ -97,6 +97,7 @@ :current-chat="currentChat" :record-id="message.record?.id" :questions="message.recommended_question" + :disabled="isTyping" :first-chat="message.first_chat" @click-question="quickAsk" @stop="onChatStop" @@ -191,6 +192,7 @@ :record-id="message.record?.id" :questions="message.recommended_question" :first-chat="message.first_chat" + :disabled="isTyping" @click-question="quickAsk" @stop="onChatStop" />