feat: cycleTransferStats

src/components/ServiceTracker.tsx

@@ -3,6 +3,7 @@ import ServiceTrackerClient from "./ServiceTrackerClient";
 import { useQuery } from "@tanstack/react-query";
 import { fetchService } from "@/lib/nezha-api";
 import { ServiceData } from "@/types/nezha-api";
+import { CycleTransferStatsCard } from "./CycleTransferStats";
 
 export const ServiceTracker: React.FC = () => {
   const { data: serviceData, isLoading } = useQuery({
@@ -25,7 +26,13 @@ export const ServiceTracker: React.FC = () => {
       serviceData.down.reduce((a, b) => a + b, 0);
     const uptime = (totalUp / totalChecks) * 100;
 
-    return { days, uptime };
+    const avgDelay =
+      serviceData.delay.length > 0
+        ? serviceData.delay.reduce((a, b) => a + b, 0) /
+          serviceData.delay.length
+        : 0;
+
+    return { days, uptime, avgDelay };
   };
 
   if (isLoading) {
@@ -37,18 +44,30 @@ export const ServiceTracker: React.FC = () => {
   }
 
   return (
-    <div className="mt-4 w-full mx-auto grid grid-cols-1 md:grid-cols-2 gap-2 md:gap-4">
-      {Object.entries(serviceData.data.services).map(([name, data]) => {
-        const { days, uptime } = processServiceData(data);
-        return (
-          <ServiceTrackerClient
-            key={name}
-            days={days}
-            title={data.service.name}
-            uptime={uptime}
-          />
-        );
-      })}
+    <div className="mt-4 w-full mx-auto ">
+      <section className="grid grid-cols-1 md:grid-cols-2 gap-2 md:gap-4">
+        {serviceData.data.cycle_transfer_stats && (
+          <div>
+            <CycleTransferStatsCard
+              cycleStats={serviceData.data.cycle_transfer_stats}
+            />
+          </div>
+        )}
+      </section>
+      <section className="grid grid-cols-1 md:grid-cols-2 mt-4 gap-2 md:gap-4">
+        {Object.entries(serviceData.data.services).map(([name, data]) => {
+          const { days, uptime, avgDelay } = processServiceData(data);
+          return (
+            <ServiceTrackerClient
+              key={name}
+              days={days}
+              title={data.service.name}
+              uptime={uptime}
+              avgDelay={avgDelay}
+            />
+          );
+        })}
+      </section>
     </div>
   );
 };