feat: cycleTransferStats

src/components/CycleTransferStats.tsx

@@ -0,0 +1,42 @@
+import React from "react";
+import { CycleTransferStats } from "@/types/nezha-api";
+import { CycleTransferStatsClient } from "./CycleTransferStatsClient";
+
+interface CycleTransferStatsProps {
+  cycleStats: CycleTransferStats;
+  className?: string;
+}
+
+export const CycleTransferStatsCard: React.FC<CycleTransferStatsProps> = ({
+  cycleStats,
+  className,
+}) => {
+  return (
+    <>
+      {Object.entries(cycleStats).map(([cycleId, cycleData]) => {
+        const serverStats = Object.entries(cycleData.server_name).map(
+          ([serverId, serverName]) => ({
+            serverId,
+            serverName,
+            transfer: cycleData.transfer[serverId] || 0,
+            nextUpdate: cycleData.next_update[serverId],
+          }),
+        );
+
+        return (
+          <CycleTransferStatsClient
+            key={cycleId}
+            name={cycleData.name}
+            from={cycleData.from}
+            to={cycleData.to}
+            max={cycleData.max}
+            serverStats={serverStats}
+            className={className}
+          />
+        );
+      })}
+    </>
+  );
+};
+
+export default CycleTransferStatsCard;

src/components/CycleTransferStatsClient.tsx

@@ -0,0 +1,79 @@
+import React from "react";
+import { cn } from "@/lib/utils";
+import { formatBytes } from "@/lib/format";
+
+interface CycleTransferStatsClientProps {
+  name: string;
+  from: string;
+  to: string;
+  max: number;
+  serverStats: Array<{
+    serverId: string;
+    serverName: string;
+    transfer: number;
+    nextUpdate: string;
+  }>;
+  className?: string;
+}
+
+export const CycleTransferStatsClient: React.FC<
+  CycleTransferStatsClientProps
+> = ({ name, from, to, max, serverStats, className }) => {
+  return (
+    <div
+      className={cn(
+        "w-full space-y-2 bg-white px-4 py-3 dark:bg-black rounded-lg border bg-card text-card-foreground shadow-lg shadow-neutral-200/40 dark:shadow-none",
+        className,
+      )}
+    >
+      <div className="space-y-1">
+        {/* <div className="flex justify-between items-center">
+          <span className=" font-semibold text-sm">{name}</span>
+          <span className="text-stone-600 dark:text-stone-400 text-xs">
+            {new Date(from).toLocaleDateString()} -{" "}
+            {new Date(to).toLocaleDateString()}
+          </span>
+        </div> */}
+        <div className="space-y-2">
+          {serverStats.map(({ serverId, serverName, transfer, nextUpdate }) => {
+            const progress = (transfer / max) * 100;
+
+            return (
+              <div key={serverId} className="space-y-2">
+                <div className="flex justify-between items-center">
+                  <span className="text-sm font-semibold">{serverName}</span>
+                  <span className="text-sm text-stone-600 dark:text-stone-400 font-semibold">
+                    {formatBytes(transfer)} / {formatBytes(max)}
+                  </span>
+                </div>
+                <div className="w-full bg-neutral-200 dark:bg-neutral-800 rounded-full h-2.5">
+                  <div
+                    className="bg-blue-600 h-2.5 rounded-full"
+                    style={{ width: `${Math.min(progress, 100)}%` }}
+                  />
+                </div>
+
+                <section className="flex justify-between items-center">
+                  <div className="text-xs text-stone-500 dark:text-stone-400">
+                    Next update: {new Date(nextUpdate).toLocaleString()}
+                  </div>
+                  <section className="flex items-center gap-2">
+                    <span className="text-stone-600 dark:text-stone-400 text-xs">
+                      {new Date(from).toLocaleDateString()} -{" "}
+                      {new Date(to).toLocaleDateString()}
+                    </span>
+                    <div className=" bg-blue-600 text-white px-1 py-0.5 rounded text-[10px]">
+                      {name}
+                    </div>
+                  </section>
+                </section>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default CycleTransferStatsClient;

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">
+    <div className="mt-4 w-full mx-auto ">
-      {Object.entries(serviceData.data.services).map(([name, data]) => {
+      <section className="grid grid-cols-1 md:grid-cols-2 gap-2 md:gap-4">
-        const { days, uptime } = processServiceData(data);
+        {serviceData.data.cycle_transfer_stats && (
-        return (
+          <div>
-          <ServiceTrackerClient
+            <CycleTransferStatsCard
-            key={name}
+              cycleStats={serviceData.data.cycle_transfer_stats}
-            days={days}
+            />
-            title={data.service.name}
+          </div>
-            uptime={uptime}
+        )}
-          />
+      </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>
   );
 };

src/components/ServiceTrackerClient.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import { cn } from "@/lib/utils";
+import { Separator } from "./ui/separator";
 
 interface ServiceTrackerProps {
   days: Array<{
@@ -9,6 +10,7 @@ interface ServiceTrackerProps {
   className?: string;
   title?: string;
   uptime?: number;
+  avgDelay?: number;
 }
 
 export const ServiceTrackerClient: React.FC<ServiceTrackerProps> = ({
@@ -16,6 +18,7 @@ export const ServiceTrackerClient: React.FC<ServiceTrackerProps> = ({
   className,
   title,
   uptime = 100,
+  avgDelay = 0,
 }) => {
   return (
     <div
@@ -31,9 +34,15 @@ export const ServiceTrackerClient: React.FC<ServiceTrackerProps> = ({
           </div>
           <span className="font-medium text-sm">{title}</span>
         </div>
-        <span className="text-green-600 font-medium text-sm">
+        <div className="flex items-center gap-2">
-          {uptime.toFixed(1)}% uptime
+          <span className="text-stone-600 dark:text-stone-400 font-medium text-sm">
-        </span>
+            {avgDelay.toFixed(0)}ms
+          </span>
+          <Separator className="h-4 mx-0" orientation="vertical" />
+          <span className="text-green-600 font-medium text-sm">
+            {uptime.toFixed(1)}% uptime
+          </span>
+        </div>
       </div>
 
       <div className="flex gap-[2px]">

src/lib/format.ts

@@ -0,0 +1,11 @@
+export function formatBytes(bytes: number, decimals = 2): string {
+  if (bytes === 0) return "0 B";
+
+  const k = 1024;
+  const dm = decimals < 0 ? 0 : decimals;
+  const sizes = ["B", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
+
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+
+  return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`;
+}

src/types/nezha-api.ts

@@ -98,6 +98,7 @@ export interface ServiceResponse {
     services: {
       [key: string]: ServiceData;
     };
+    cycle_transfer_stats: CycleTransferStats;
   };
 }
 
@@ -127,3 +128,24 @@ export interface ServiceData {
   up: number[];
   down: number[];
 }
+
+export interface CycleTransferStats {
+  [key: string]: CycleTransferData;
+}
+
+export interface CycleTransferData {
+  name: string;
+  from: string;
+  to: string;
+  max: number;
+  min: number;
+  server_name: {
+    [key: string]: string;
+  };
+  transfer: {
+    [key: string]: number;
+  };
+  next_update: {
+    [key: string]: string;
+  };
+}