Update node-metrics-charts.tsx

AppImage/components/node-metrics-charts.tsx

@@ -78,6 +78,10 @@ export function NodeMetricsCharts() {
     memory: { memoryTotal: true, memoryUsed: true, memoryZfsArc: true, memoryFree: true },
   })
 
+  // Check if ZFS ARC or Free memory have any non-zero values to decide if we should show them
+  const hasZfsArc = data.some(d => d.memoryZfsArc > 0)
+  const hasMemoryFree = data.some(d => d.memoryFree > 0)
+
   useEffect(() => {
     console.log("[v0] NodeMetricsCharts component mounted")
     fetchMetrics()
@@ -194,6 +198,11 @@ export function NodeMetricsCharts() {
     return (
       <div className="flex justify-center gap-4 pb-2 flex-wrap">
         {payload.map((entry: any, index: number) => {
+          // For memory chart, hide ZFS ARC and Free from legend if they have no data
+          if (chartType === "memory") {
+            if (entry.dataKey === "memoryZfsArc" && !hasZfsArc) return null
+            if (entry.dataKey === "memoryFree" && !hasMemoryFree) return null
+          }
           const isVisible = visibleLines[chartType][entry.dataKey as keyof (typeof visibleLines)[typeof chartType]]
           return (
             <div
@@ -428,6 +437,8 @@ export function NodeMetricsCharts() {
                   name="Used"
                   hide={!visibleLines.memory.memoryUsed}
                 />
+                {/* Only show ZFS ARC if there's data */}
+                {hasZfsArc && (
                   <Area
                     type="monotone"
                     dataKey="memoryZfsArc"
@@ -438,6 +449,9 @@ export function NodeMetricsCharts() {
                     name="ZFS ARC"
                     hide={!visibleLines.memory.memoryZfsArc}
                   />
+                )}
+                {/* Only show Free memory if there's data */}
+                {hasMemoryFree && (
                   <Area
                     type="monotone"
                     dataKey="memoryFree"
@@ -445,9 +459,10 @@ export function NodeMetricsCharts() {
                     strokeWidth={2}
                     fill="#06b6d4"
                     fillOpacity={0.3}
-                  name="Available"
+                    name="Free"
                     hide={!visibleLines.memory.memoryFree}
                   />
+                )}
               </AreaChart>
             </ResponsiveContainer>
           </CardContent>