Update AppImage

AppImage/components/network-traffic-chart.tsx

@@ -17,7 +17,29 @@ interface NetworkTrafficChartProps {
   interfaceName?: string
   onTotalsCalculated?: (totals: { received: number; sent: number }) => void
   refreshInterval?: number // En milisegundos, por defecto 60000 (60 segundos)
-  networkUnit?: string // Added networkUnit prop with default value
+  networkUnit?: "Bytes" | "Bits" // Added networkUnit prop
+}
+
+const CustomNetworkTooltip = ({ active, payload, label, networkUnit }: any) => {
+  if (active && payload && payload.length) {
+    return (
+      <div className="bg-gray-900/95 backdrop-blur-sm border border-gray-700 rounded-lg p-3 shadow-xl">
+        <p className="text-sm font-semibold text-white mb-2">{label}</p>
+        <div className="space-y-1.5">
+          {payload.map((entry: any, index: number) => (
+            <div key={index} className="flex items-center gap-2">
+              <div className="w-2.5 h-2.5 rounded-full flex-shrink-0" style={{ backgroundColor: entry.color }} />
+              <span className="text-xs text-gray-300 min-w-[60px]">{entry.name}:</span>
+              <span className="text-sm font-semibold text-white">
+                {entry.value.toFixed(3)} {networkUnit === "Bits" ? "Gb" : "GB"}
+              </span>
+            </div>
+          ))}
+        </div>
+      </div>
+    )
+  }
+  return null
 }
 
 export function NetworkTrafficChart({
@@ -25,7 +47,7 @@ export function NetworkTrafficChart({
   interfaceName,
   onTotalsCalculated,
   refreshInterval = 60000,
-  networkUnit = "Bytes", // Added networkUnit prop with default value
+  networkUnit = "Bytes", // Default to Bytes
 }: NetworkTrafficChartProps) {
   const [data, setData] = useState<NetworkMetricsData[]>([])
   const [loading, setLoading] = useState(true)
@@ -39,7 +61,7 @@ export function NetworkTrafficChart({
   useEffect(() => {
     setIsInitialLoad(true)
     fetchMetrics()
-  }, [timeframe, interfaceName])
+  }, [timeframe, interfaceName, networkUnit]) // Added networkUnit to dependencies
 
   useEffect(() => {
     if (refreshInterval > 0) {
@@ -49,7 +71,7 @@ export function NetworkTrafficChart({
 
       return () => clearInterval(interval)
     }
-  }, [timeframe, interfaceName, refreshInterval])
+  }, [timeframe, interfaceName, refreshInterval, networkUnit]) // Added networkUnit to dependencies
 
   const fetchMetrics = async () => {
     if (isInitialLoad) {
@@ -121,16 +143,14 @@ export function NetworkTrafficChart({
         const netOutBytes = (item.netout || 0) * intervalSeconds
 
         if (networkUnit === "Bits") {
-          // Convert to Gigabits: bytes * 8 / 1024^3
           return {
             time: timeLabel,
             timestamp: item.time,
-            netIn: Number((netInBytes * 8 / 1024 / 1024 / 1024).toFixed(4)),
-            netOut: Number((netOutBytes * 8 / 1024 / 1024 / 1024).toFixed(4)),
+            netIn: Number(((netInBytes * 8) / 1024 / 1024 / 1024).toFixed(4)),
+            netOut: Number(((netOutBytes * 8) / 1024 / 1024 / 1024).toFixed(4)),
           }
         }
 
-        // Default: Convert to Gigabytes
         return {
           time: timeLabel,
           timestamp: item.time,
@@ -190,28 +210,6 @@ export function NetworkTrafficChart({
     )
   }
 
-  const CustomNetworkTooltip = ({ active, payload, label }: any) => {
-    if (active && payload && payload.length) {
-      return (
-        <div className="bg-gray-900/95 backdrop-blur-sm border border-gray-700 rounded-lg p-3 shadow-xl">
-          <p className="text-sm font-semibold text-white mb-2">{label}</p>
-          <div className="space-y-1.5">
-            {payload.map((entry: any, index: number) => (
-              <div key={index} className="flex items-center gap-2">
-                <div className="w-2.5 h-2.5 rounded-full flex-shrink-0" style={{ backgroundColor: entry.color }} />
-                <span className="text-xs text-gray-300 min-w-[60px]">{entry.name}:</span>
-                <span className="text-sm font-semibold text-white">
-                  {entry.value.toFixed(3)} {networkUnit === "Bits" ? "Gb" : "GB"}
-                </span>
-              </div>
-            ))}
-          </div>
-        </div>
-      )
-    }
-    return null
-  }
-
   if (loading && isInitialLoad) {
     return (
       <div className="flex items-center justify-center h-[300px]">
@@ -255,10 +253,15 @@ export function NetworkTrafficChart({
           stroke="currentColor"
           className="text-foreground"
           tick={{ fill: "currentColor", fontSize: 12 }}
-          label={{ value: networkUnit === "Bits" ? "Gb" : "GB", angle: -90, position: "insideLeft", fill: "currentColor" }}
+          label={{
+            value: networkUnit === "Bits" ? "Gb" : "GB", // Dynamic label based on unit
+            angle: -90,
+            position: "insideLeft",
+            fill: "currentColor",
+          }}
           domain={[0, "auto"]}
         />
-        <Tooltip content={<CustomNetworkTooltip />} />
+        <Tooltip content={<CustomNetworkTooltip networkUnit={networkUnit} />} /> // Pass networkUnit to tooltip
         <Legend verticalAlign="top" height={36} content={renderLegend} />
         <Area
           type="monotone"