feat: CycleTransferStats display by group

src/components/CycleTransferStats.tsx

@@ -1,14 +1,21 @@
-import { CycleTransferStats } from "@/types/nezha-api"
+import { CycleTransferStats, NezhaServer } from "@/types/nezha-api"
 import React from "react"
 
 import { CycleTransferStatsClient } from "./CycleTransferStatsClient"
 
 interface CycleTransferStatsProps {
+  serverList: NezhaServer[]
   cycleStats: CycleTransferStats
   className?: string
 }
 
-export const CycleTransferStatsCard: React.FC<CycleTransferStatsProps> = ({ cycleStats, className }) => {
+export const CycleTransferStatsCard: React.FC<CycleTransferStatsProps> = ({ serverList, cycleStats, className }) => {
+  if (serverList.length === 0) {
+    return null
+  }
+
+  const serverIdList = serverList.map((server) => server.id.toString())
+
   return (
     <section className="grid grid-cols-1 md:grid-cols-2 gap-2 md:gap-4">
       {Object.entries(cycleStats).map(([cycleId, cycleData]) => {
@@ -20,6 +27,10 @@ export const CycleTransferStatsCard: React.FC<CycleTransferStatsProps> = ({ cycl
           const transfer = cycleData.transfer?.[serverId] || 0
           const nextUpdate = cycleData.next_update?.[serverId]
 
+          if (!serverIdList.includes(serverId)) {
+            return null
+          }
+
           if (!transfer && !nextUpdate) {
             return null
           }

src/components/ServiceTracker.tsx

@@ -1,15 +1,14 @@
 import { fetchService } from "@/lib/nezha-api"
-import { ServiceData } from "@/types/nezha-api"
+import { NezhaServer, ServiceData } from "@/types/nezha-api"
 import { ExclamationTriangleIcon } from "@heroicons/react/20/solid"
 import { useQuery } from "@tanstack/react-query"
-import React from "react"
 import { useTranslation } from "react-i18next"
 
 import { CycleTransferStatsCard } from "./CycleTransferStats"
 import ServiceTrackerClient from "./ServiceTrackerClient"
 import { Loader } from "./loading/Loader"
 
-export const ServiceTracker: React.FC = () => {
+export function ServiceTracker({ serverList }: { serverList: NezhaServer[] }) {
   const { t } = useTranslation()
   const { data: serviceData, isLoading } = useQuery({
     queryKey: ["service"],
@@ -56,7 +55,7 @@ export const ServiceTracker: React.FC = () => {
     <div className="mt-4 w-full mx-auto ">
       {serviceData.data.cycle_transfer_stats && (
         <div>
-          <CycleTransferStatsCard cycleStats={serviceData.data.cycle_transfer_stats} />
+          <CycleTransferStatsCard serverList={serverList} cycleStats={serviceData.data.cycle_transfer_stats} />
         </div>
       )}
       {serviceData.data.services && Object.keys(serviceData.data.services).length > 0 && (

src/pages/Server.tsx

@@ -304,7 +304,7 @@ export default function Servers() {
         </Popover>
       </div>
       {showMap === "1" && <GlobalMap now={nezhaWsData.now} serverList={nezhaWsData?.servers || []} />}
-      {showServices === "1" && <ServiceTracker />}
+      {showServices === "1" && <ServiceTracker serverList={filteredServers} />}
       {inline === "1" && (
         <section className="flex flex-col gap-2 overflow-x-scroll scrollbar-hidden mt-6 server-inline-list">
           {filteredServers.map((serverInfo) => (