feat: implement synchronized data update on ECharts hover

apps/admin/src/composables/useChartOption.ts

@@ -4,7 +4,7 @@ import type { EChartsOption } from "echarts";
 
 // Define function type
 interface ChartOptionsGenerator {
-  (): EChartsOption;
+  (isDark: boolean): EChartsOption;
 }
 
 // Define return type
@@ -15,13 +15,14 @@ interface UseChartOptionReturn {
 // 根据源选项生成图表选项
 // Generate chart options based on source options
 export function useChartOption(generateSourceOptions: ChartOptionsGenerator): UseChartOptionReturn {
+  const { getDarkMode: isDark } = useThemeSetting();
   // 生成图表选项
   // Generate chart options
   const generateChartOptions = (): EChartsOption => {
     // TODO: echarts themes
     // ECharts可以使用主题构建器，但这里未使用
     // ECharts can use theme builders, but it is not used here
-    return generateSourceOptions();
+    return generateSourceOptions(isDark.value);
   };
 
   // 返回计算属性

apps/admin/src/pages/dashboard/components/DataOverview.vue

@@ -95,7 +95,7 @@ const userData = ref<number[]>([]);
 const totalConversationData = ref<number[]>([]);
 const copiedConversationData = ref<number[]>([]);
 const likedResponsesData = ref<number[]>([]);
-const { chartOption } = useChartOption(() => {
+const { chartOption } = useChartOption((isDark: boolean) => {
   return {
     grid: {
       left: "2.6%",
@@ -152,7 +152,7 @@ const { chartOption } = useChartOption(() => {
       },
       splitLine: {
         lineStyle: {
-          color: getDarkMode.value ? "#2E2E30" : "#F2F3F5",
+          color: isDark ? "#2E2E30" : "#F2F3F5",
         },
       },
     },
@@ -269,7 +269,4 @@ fetchData();
 </template>
 
 <style scoped>
-.ca-statistic .ca-statistic-value .ca-statistic-value__prefix .ca-icon{
-  //vertical-align: text-top !important;
-}
 </style>

apps/admin/src/pages/dashboard/components/PerformanceMetrics.vue

@@ -1,9 +1,8 @@
 <script setup lang="ts">
 import { useThemeVars } from "@celeris/ca-components";
 
-const { getDarkMode } = useThemeSetting();
 const themeVariables = useThemeVars();
-const { chartOption } = useChartOption(() => {
+const { chartOption } = useChartOption((isDark: boolean) => {
   return {
     grid: {
       left: 0,
@@ -21,7 +20,7 @@ const { chartOption } = useChartOption(() => {
       itemHeight: 10,
       itemGap: 20,
       textStyle: {
-        color: getDarkMode.value ? "#ffffff" : "#4E5969",
+        color: isDark ? "#ffffff" : "#4E5969",
       },
     },
     radar: {
@@ -36,16 +35,16 @@ const { chartOption } = useChartOption(() => {
         { name: "消息处理速度" },
       ],
       axisName: {
-        color: getDarkMode.value ? "#ffffff" : "#1D2129",
+        color: isDark ? "#ffffff" : "#1D2129",
       },
       axisLine: {
         lineStyle: {
-          color: getDarkMode.value ? "#484849" : "#E5E6EB",
+          color: isDark ? "#484849" : "#E5E6EB",
         },
       },
       splitLine: {
         lineStyle: {
-          color: getDarkMode.value ? "#484849" : "#E5E6EB",
+          color: isDark ? "#484849" : "#E5E6EB",
         },
       },
       splitArea: {
@@ -74,15 +73,15 @@ const { chartOption } = useChartOption(() => {
             name: "gpt-4",
             symbol: "none",
             itemStyle: {
-              color: getDarkMode.value ? "#A079DC" : "#313CA9",
+              color: isDark ? "#A079DC" : "#313CA9",
             },
           },
           {
             value: [5850, 11000, 26000, 27500, 46950, 18000],
             name: "gpt-4-vision-preview",
             symbol: "none",
             itemStyle: {
-              color: getDarkMode.value ? "#3D72F6" : "#21CCFF",
+              color: isDark ? "#3D72F6" : "#21CCFF",
             },
           },
         ],

apps/admin/src/pages/dashboard/components/UserAnalysis.vue

@@ -7,15 +7,15 @@ import UserAnalysisItem from "~/pages/dashboard/components/UserAnalysisItem.vue"
     <NGridItem>
       <UserAnalysisItem title="对话满意度趋势" chart-type="line" quota="user-heart" icon="tabler:user-heart" />
     </NGridItem>
-    <NGridItem>
-      <UserAnalysisItem title="用户增长量" chart-type="bar" quota="user-up" icon="tabler:user-up" />
-    </NGridItem>
     <NGridItem>
       <UserAnalysisItem title="用户消费趋势" chart-type="line" quota="user-dollar" icon="tabler:user-dollar" />
     </NGridItem>
     <NGridItem>
       <UserAnalysisItem title="用户分享趋势" chart-type="line" quota="user-share" icon="tabler:user-share" />
     </NGridItem>
+    <NGridItem>
+      <UserAnalysisItem title="用户增长量" chart-type="bar" quota="user-up" icon="tabler:user-up" />
+    </NGridItem>
   </NGrid>
 </template>
 

apps/admin/src/pages/dashboard/components/UserAnalysisItem.vue

@@ -1,5 +1,7 @@
 <script setup lang="ts">
 import { useThemeVars } from "@celeris/ca-components";
+import { isNil } from "@celeris/utils";
+import type { ToolTipFormatterParams } from "../../../../types/echarts";
 import { DataInsightCard } from "~/component/Card";
 import CardInnerIcon from "~/pages/dashboard/components/CardInnerIcon.vue";
 import { queryUserAnalysisData } from "~/apis/internal/dashboard";
@@ -24,7 +26,7 @@ const props = defineProps({
 });
 
 const { loading, setLoading } = useLoading(true);
-const count = ref(0);
+const count = ref();
 const growth = ref(100);
 const chartData = ref<any>([]);
 const themeVariables = useThemeVars();
@@ -46,7 +48,18 @@ const { chartOption } = useChartOption(() => {
     tooltip: {
       show: true,
       trigger: "axis",
-      formatter: "{c}",
+      formatter(params) {
+        const [firstElement] = params as ToolTipFormatterParams[];
+        const getData = () => {
+          return firstElement.componentSubType === "line" ? firstElement.data : (firstElement.data as any)?.value;
+        };
+        if (!isNil(firstElement)) {
+          count.value = getData();
+        }
+        return `<div>
+            <p class="tooltip-title">${getData()}</p>
+          </div>`;
+      },
     },
     series: [
       {
@@ -98,7 +111,7 @@ fetchData({ quota: props.quota });
 
 <template>
   <NSpin :show="loading" class="w-full">
-    <DataInsightCard :title="title" :data-count="count" :chart-height="100">
+    <DataInsightCard :title="title" :data-count="count" :chart-height="150">
       <template #icon>
         <CardInnerIcon :icon-name="icon" container />
       </template>

packages/web/components/Charts/src/Charts.vue

@@ -32,6 +32,7 @@ nextTick(() => {
 <template>
   <VCharts
     v-if="renderChart"
+    v-bind="$attrs"
     :option="options"
     :autoresize="autoResize"
     :style="{ width, height }"