feat(web): home add trend value

web/src/i18n/en.ts

@@ -131,15 +131,15 @@ export const en = {
       desc_spaces: 'compared to last week',
       desc_users: 'New additions this week',
       desc_running_apps: "Today's success rate",
-      totalMemoryCapacity: 'Total Stored Memories',
+      total_memory: 'Total Stored Memories',
       userMemory: 'User Memory',
-      knowledgeBaseCount: 'Knowledge Bases',
+      total_knowledge: 'Knowledge Bases',
-      apiCallCount: 'API Calls',
+      total_api_call: 'API Calls',
       comparedToYesterday: 'compared to yesterday',
       thisWeek: 'this week',
       thisDay: 'day on day',
       failureRate: 'Failure Rate',
-      application: 'Applications',
+      total_app: 'Applications',
       total_num: 'Total Memory Capacity',
 
       lastDays: 'last {{days}} days',

web/src/i18n/zh.ts

@@ -842,15 +842,15 @@ export const zh = {
       desc_spaces: '多于上周',
       desc_users: '本周新增',
       desc_running_apps: '今日成功率',
-      totalMemoryCapacity: '总记忆容量',
+      total_memory: '总记忆容量',
       userMemory: '用户记忆',
-      knowledgeBaseCount: '知识库数量',
+      total_knowledge: '知识库数量',
-      apiCallCount: 'API调用次数',
+      total_api_call: 'API调用次数',
       comparedToYesterday: '与昨天相比',
       thisWeek: '本周',
       thisDay: '本日',
       failureRate: '故障率',
-      application: '应用数量',
+      total_app: '应用数量',
       total_num: '总记忆容量',
 
       lastDays: '最近{{days}}天',

web/src/views/Home/components/TopCardList.tsx

@@ -15,49 +15,22 @@ import { useTranslation } from 'react-i18next'
 import clsx from 'clsx';
 import { Flex } from 'antd';
 
-import totalMemoryCapacity from '@/assets/images/home/totalMemoryCapacity.svg';
-import userMemory from '@/assets/images/home/userMemory.svg';
-import knowledgeBaseCount from '@/assets/images/home/knowledgeBaseCount.svg';
-import apiCallCount from '@/assets/images/home/apiCallCount.svg';
 import type { DashboardData } from '../index'
 
 /** Card configuration with styling */
 const list = [
   {
-    key: 'totalMemoryCapacity',
+    key: 'total_memory',
-    icon: totalMemoryCapacity,
-    // value: '45,678',
-    // trendValue: '12.5%',
-    // trend: 'up',
-    // trendDesc: 'comparedToYesterday',
     background: 'rb:bg-[url("@/assets/images/home/totalMemoryCapacity.png")] rb:bg-cover rb:bg-no-repeat',
   },
   {
-    key: 'application',
+    key: 'total_app',
-    icon: userMemory,
-    // value: '32,145',
-    // trendValue: '12.5%',
-    // trend: 'down',
-    // trendDesc: 'comparedToYesterday',
-    // background: 'linear-gradient( 180deg, #F1FBF5 0%, #F9FDFF 100%)',
   },
   {
-    key: 'knowledgeBaseCount',
+    key: 'total_knowledge',
-    icon: knowledgeBaseCount,
-    // value: '13,533',
-    // trendValue: '15.7%',
-    // trend: 'up',
-    // trendDesc: 'thisWeek',
-    // background: 'linear-gradient( 180deg, #E6F5FE 0%, #FBFDFF 100%)',
   },
   {
-    key: 'apiCallCount',
+    key: 'total_api_call',
-    icon: apiCallCount,
-    // value: '856.2k',
-    // trendValue: '23.1%',
-    // trend: 'up',
-    // trendDesc: 'comparedToYesterday',
-    // background: 'linear-gradient( 180deg, #F8F6F5 0%, #FAFDFF 100%)',
   },
 ]
 /**
@@ -75,30 +48,32 @@ const TopCardList: FC<{data?: DashboardData}> = ({ data }) => {
             className={`rb:rounded-2xl rb:bg-[#FFFFFF] rb:py-4 rb:px-3  ${item.background || ''}`}
           >
             <div className={clsx("rb:text-[12px] rb:leading-4", {
-              'rb:text-[#FFFFFF]': item.key === 'totalMemoryCapacity',
+              'rb:text-[#FFFFFF]': item.key === 'total_memory',
-              'rb:text-[#5B6167]': item.key !== 'totalMemoryCapacity',
+              'rb:text-[#5B6167]': item.key !== 'total_memory',
             })}>{t(`dashboard.${item.key}`)}</div>
 
             <div className={clsx("rb:text-[20px] rb:font-bold rb:leading-7 rb:mt-1 rb:font-[MiSans-Bold]", {
-              'rb:text-[#FFFFFF]': item.key === 'totalMemoryCapacity',
+              'rb:text-[#FFFFFF]': item.key === 'total_memory',
-              // 'rb:text-[#171719]': item.key !== 'totalMemoryCapacity',
             })}>
               {data?.[item.key as keyof DashboardData] || 0}
             </div>
 
             <Flex align="center" className={clsx('rb:font-medium rb:mt-7.5!', {
-              'rb:text-[#FFFFFF]': item.key === 'totalMemoryCapacity',
+              'rb:text-[#FF5D34]': data?.[`${item.key}_change` as keyof DashboardData] && data?.[`${item.key}_change` as keyof DashboardData] < 0,
-              'rb:text-[#369F21]': item.key !== 'totalMemoryCapacity',
+              'rb:text-[#369F21]': !data?.[`${item.key}_change` as keyof DashboardData] || data?.[`${item.key}_change` as keyof DashboardData] >= 0,
             })}>
-              0%
+              {data?.[`${item.key}_change` as keyof DashboardData] && data?.[item.key as keyof DashboardData] > 0
+                ? (100 * data?.[`${item.key}_change` as keyof DashboardData] / data?.[item.key as keyof DashboardData]).toFixed(2)
+                : 0
+              }%
               <div className={clsx("rb:size-3.5 rb:cursor-pointer rb:bg-cover", {
-                "rb:bg-[url('@/assets/images/home/arrow_up.svg')]": item.key === 'totalMemoryCapacity',
+                "rb:bg-[url('@/assets/images/home/arrow_down.png')]": data?.[`${item.key}_change` as keyof DashboardData] && data?.[`${item.key}_change` as keyof DashboardData] < 0,
-                "rb:bg-[url('@/assets/images/home/arrow_up_success.svg')]": item.key !== 'totalMemoryCapacity',
+                "rb:bg-[url('@/assets/images/home/arrow_up_success.svg')]": !data?.[`${item.key}_change` as keyof DashboardData] || data?.[`${item.key}_change` as keyof DashboardData] >= 0,
               })}></div>
             </Flex>
             <div className={clsx("rb:text-[12px] rb:leading-4 rb:mt-0.5", {
-              'rb:text-[#FFFFFF]': item.key === 'totalMemoryCapacity',
+              'rb:text-[#FFFFFF]': item.key === 'total_memory',
-              'rb:text-[#5B6167]': item.key !== 'totalMemoryCapacity',
+              'rb:text-[#5B6167]': item.key !== 'total_memory',
             })}>
               {t('dashboard.comparedToYesterday')}
             </div>

web/src/views/Home/index.tsx

@@ -25,14 +25,18 @@ import ApiLineCard from './components/ApiLineCard'
  * Dashboard statistics data
  */
 export interface DashboardData {
-  totalMemoryCapacity?: number;
+  total_memory: number;
-  application?: number;
+  total_app: number;
-  knowledgeBaseCount?: number;
+  total_knowledge: number;
-  apiCallCount?: number;
+  total_api_call: number;
+  total_memory_change: number;
+  total_app_change: number;
+  total_knowledge_change: number;
+  total_api_call_change: number;
 }
 
 const Home = () => {
-  const [dashboardData, setDashboardData] = useState<DashboardData>({});
+  const [dashboardData, setDashboardData] = useState<DashboardData>({} as DashboardData);
   const [loading, setLoading] = useState({
     knowledgeTypeDistribution: true,
   });
@@ -65,12 +69,7 @@ const Home = () => {
       }
       const { storage_type = 'neo4j' } = response || {}
       const responseData = storage_type === 'neo4j' ? response.neo4j_data : response.rag_data
-      setDashboardData({
+      setDashboardData(responseData as DashboardData)
-        totalMemoryCapacity: responseData?.total_memory || 0,
-        application: responseData?.total_app || 0,
-        knowledgeBaseCount: responseData?.total_knowledge || 0,
-        apiCallCount: responseData?.total_api_call || 0
-      })
     })
   }
   /** Fetch knowledge base type distribution */