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"]}
/>
} />