diff --git a/AppImage/components/network-traffic-chart.tsx b/AppImage/components/network-traffic-chart.tsx index 7d9eac0..809d3bf 100644 --- a/AppImage/components/network-traffic-chart.tsx +++ b/AppImage/components/network-traffic-chart.tsx @@ -17,33 +17,16 @@ interface NetworkTrafficChartProps { interfaceName?: string onTotalsCalculated?: (totals: { received: number; sent: number }) => void refreshInterval?: number // En milisegundos, por defecto 60000 (60 segundos) + networkUnit?: "Bytes" | "Bits" } -const CustomNetworkTooltip = ({ active, payload, label }: any) => { - if (active && payload && payload.length) { - return ( -
-

{label}

-
- {payload.map((entry: any, index: number) => ( -
-
- {entry.name}: - {entry.value.toFixed(3)} GB -
- ))} -
-
- ) - } - return null -} export function NetworkTrafficChart({ timeframe, interfaceName, onTotalsCalculated, refreshInterval = 60000, + networkUnit = "Bits", }: NetworkTrafficChartProps) { const [data, setData] = useState([]) const [loading, setLoading] = useState(true) @@ -138,6 +121,15 @@ export function NetworkTrafficChart({ const netInBytes = (item.netin || 0) * intervalSeconds const netOutBytes = (item.netout || 0) * intervalSeconds + if (networkUnit === "Bits") { + return { + time: timeLabel, + timestamp: item.time, + netIn: Number((netInBytes * 8 / 1024 / 1024 / 1024).toFixed(4)), + netOut: Number((netOutBytes * 8 / 1024 / 1024 / 1024).toFixed(4)), + } + } + return { time: timeLabel, timestamp: item.time, @@ -222,6 +214,26 @@ export function NetworkTrafficChart({ ) } + const CustomNetworkTooltip = ({ active, payload, label }: any) => { + if (active && payload && payload.length) { + return ( +
+

{label}

+
+ {payload.map((entry: any, index: number) => ( +
+
+ {entry.name}: + {entry.value.toFixed(3)} {networkUnit === "Bits" ? "Gb" : "GB"} +
+ ))} +
+
+ ) + } + return null +} + return ( @@ -240,7 +252,7 @@ export function NetworkTrafficChart({ stroke="currentColor" className="text-foreground" tick={{ fill: "currentColor", fontSize: 12 }} - label={{ value: "GB", angle: -90, position: "insideLeft", fill: "currentColor" }} + label={{ value: networkUnit === "Bits" ? "Gb" : "GB", angle: -90, position: "insideLeft", fill: "currentColor" }} domain={[0, "auto"]} /> } />