feat: charts css

Author: ulleo

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<string>(() => {
 const { t } = useI18n()
 
 function clickQuestion(question: string): void {
-  emits('clickQuestion', question)
+  if (!props.disabled) {
+    emits('clickQuestion', question)
+  }
 }
 
 const stopFlag = ref(false)

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({

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

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

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

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"
                       />