Fix: Server Historical Performance chart improvement

Fix: Improve sidebar collapse/expand performance
2025-07-19 15:23:28 +07:00
parent d40d5898c0
commit dc586dc15f
19 changed files with 1534 additions and 643 deletions
@@ -1,7 +1,7 @@

 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { ChartContainer, ChartTooltip } from "@/components/ui/chart";
-import { AreaChart, Area, XAxis, YAxis, CartesianGrid } from "recharts";
+import { AreaChart, Area, XAxis, YAxis, CartesianGrid, ResponsiveContainer } from "recharts";
 import { Cpu } from "lucide-react";
 import { useTheme } from "@/contexts/ThemeContext";
 import { DetailedTooltipContent } from "./tooltips/DetailedTooltipContent";
@@ -18,65 +18,62 @@ export const CPUChart = ({ data, latestData }: CPUChartProps) => {
  const getAxisColor = () => theme === 'dark' ? '#9ca3af' : '#6b7280';

  return (
-    <Card className="bg-gradient-to-br from-background to-muted/20 border-border/50 shadow-lg hover:shadow-xl transition-all duration-300 backdrop-blur-sm">
-      <CardHeader className="pb-2">
+    <Card className="bg-gradient-to-br from-background to-muted/20 border-border/50 shadow-lg hover:shadow-xl transition-all duration-300 backdrop-blur-sm h-full flex flex-col">
+      <CardHeader className="pb-2 flex-shrink-0">
        <CardTitle className="flex items-center justify-between text-foreground">
          <div className="flex items-center gap-2">
            <div className="p-2 rounded-lg bg-blue-500/15">
-              <Cpu className="h-5 w-5 text-blue-500" />
+              <Cpu className="h-4 w-4 lg:h-5 lg:w-5 text-blue-500" />
            </div>
-            CPU Usage
+            <span className="text-sm lg:text-base">CPU Usage</span>
          </div>
          {latestData && (
-            <div className="text-right text-sm">
+            <div className="text-right text-xs lg:text-sm">
              <div className="text-blue-500 font-semibold">{latestData.cpuUsage}%</div>
              <div className="text-xs text-muted-foreground">{latestData.cpuCores} cores</div>
            </div>
          )}
        </CardTitle>
      </CardHeader>
-      <CardContent className="pt-2">
-        <ChartContainer config={{
-          cpuUsage: {
-            label: "CPU Usage (%)",
-            color: theme === 'dark' ? "#3b82f6" : "#2563eb",
-          }
-        }} className="h-80">
-          <AreaChart data={data}>
-            <defs>
-              <linearGradient id="cpuGradient" x1="0" y1="0" x2="0" y2="1">
-                <stop offset="5%" stopColor={theme === 'dark' ? "#3b82f6" : "#2563eb"} stopOpacity={0.4}/>
-                <stop offset="95%" stopColor={theme === 'dark' ? "#1e40af" : "#1d4ed8"} stopOpacity={0.1}/>
-              </linearGradient>
-            </defs>
-            <CartesianGrid strokeDasharray="3 3" stroke={getGridColor()} opacity={0.3} />
-            <XAxis 
-              dataKey="timestamp" 
-              tick={{ fontSize: 10, fill: getAxisColor() }}
-              axisLine={{ stroke: getGridColor() }}
-            />
-            <YAxis 
-              domain={[0, 100]}
-              tick={{ fontSize: 10, fill: getAxisColor() }}
-              axisLine={{ stroke: getGridColor() }}
-              label={{ value: 'CPU %', angle: -90, position: 'insideLeft' }}
-            />
-            <ChartTooltip 
-              content={<DetailedTooltipContent />}
-              cursor={{ stroke: getGridColor() }}
-            />
-            <Area 
-              type="monotone" 
-              dataKey="cpuUsage" 
-              stroke={theme === 'dark' ? "#60a5fa" : "#2563eb"}
-              strokeWidth={3}
-              dot={false}
-              fill="url(#cpuGradient)"
-              fillOpacity={1}
-              name="CPU Usage (%)"
-            />
-          </AreaChart>
-        </ChartContainer>
+      <CardContent className="pt-2 flex-1 min-h-0">
+        <div className="w-full h-full min-h-[240px] lg:min-h-[320px]">
+          <ResponsiveContainer width="100%" height="100%">
+            <AreaChart data={data} margin={{ top: 5, right: 5, left: 5, bottom: 5 }}>
+              <defs>
+                <linearGradient id="cpuGradient" x1="0" y1="0" x2="0" y2="1">
+                  <stop offset="5%" stopColor={theme === 'dark' ? "#3b82f6" : "#2563eb"} stopOpacity={0.4}/>
+                  <stop offset="95%" stopColor={theme === 'dark' ? "#1e40af" : "#1d4ed8"} stopOpacity={0.1}/>
+                </linearGradient>
+              </defs>
+              <CartesianGrid strokeDasharray="3 3" stroke={getGridColor()} opacity={0.3} />
+              <XAxis 
+                dataKey="timestamp" 
+                tick={{ fontSize: 10, fill: getAxisColor() }}
+                axisLine={{ stroke: getGridColor() }}
+              />
+              <YAxis 
+                domain={[0, 100]}
+                tick={{ fontSize: 10, fill: getAxisColor() }}
+                axisLine={{ stroke: getGridColor() }}
+                label={{ value: 'CPU %', angle: -90, position: 'insideLeft' }}
+              />
+              <ChartTooltip 
+                content={<DetailedTooltipContent />}
+                cursor={{ stroke: getGridColor() }}
+              />
+              <Area 
+                type="monotone" 
+                dataKey="cpuUsage" 
+                stroke={theme === 'dark' ? "#60a5fa" : "#2563eb"}
+                strokeWidth={2}
+                dot={false}
+                fill="url(#cpuGradient)"
+                fillOpacity={1}
+                name="CPU Usage (%)"
+              />
+            </AreaChart>
+          </ResponsiveContainer>
+        </div>
      </CardContent>
    </Card>
  );
@@ -1,7 +1,7 @@

 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { ChartContainer, ChartTooltip } from "@/components/ui/chart";
-import { AreaChart, Area, XAxis, YAxis, CartesianGrid } from "recharts";
+import { AreaChart, Area, XAxis, YAxis, CartesianGrid, ResponsiveContainer } from "recharts";
 import { HardDrive } from "lucide-react";
 import { useTheme } from "@/contexts/ThemeContext";
 import { DetailedTooltipContent } from "./tooltips/DetailedTooltipContent";
@@ -18,65 +18,62 @@ export const DiskChart = ({ data, latestData }: DiskChartProps) => {
  const getAxisColor = () => theme === 'dark' ? '#9ca3af' : '#6b7280';

  return (
-    <Card className="bg-gradient-to-br from-background to-muted/20 border-border/50 shadow-lg hover:shadow-xl transition-all duration-300 backdrop-blur-sm">
-      <CardHeader className="pb-2">
+    <Card className="bg-gradient-to-br from-background to-muted/20 border-border/50 shadow-lg hover:shadow-xl transition-all duration-300 backdrop-blur-sm h-full flex flex-col">
+      <CardHeader className="pb-2 flex-shrink-0">
        <CardTitle className="flex items-center justify-between text-foreground">
          <div className="flex items-center gap-2">
            <div className="p-2 rounded-lg bg-amber-500/15">
-              <HardDrive className="h-5 w-5 text-amber-500" />
+              <HardDrive className="h-4 w-4 lg:h-5 lg:w-5 text-amber-500" />
            </div>
-            Disk Usage
+            <span className="text-sm lg:text-base">Disk Usage</span>
          </div>
          {latestData && (
-            <div className="text-right text-sm">
+            <div className="text-right text-xs lg:text-sm">
              <div className="text-amber-500 font-semibold">{latestData.diskUsagePercent}%</div>
              <div className="text-xs text-muted-foreground">{latestData.diskUsed} / {latestData.diskTotal}</div>
            </div>
          )}
        </CardTitle>
      </CardHeader>
-      <CardContent className="pt-2">
-        <ChartContainer config={{
-          diskUsagePercent: {
-            label: "Disk Usage (%)",
-            color: theme === 'dark' ? "#f59e0b" : "#d97706",
-          }
-        }} className="h-80">
-          <AreaChart data={data}>
-            <defs>
-              <linearGradient id="diskGradient" x1="0" y1="0" x2="0" y2="1">
-                <stop offset="5%" stopColor={theme === 'dark' ? "#f59e0b" : "#d97706"} stopOpacity={0.6}/>
-                <stop offset="95%" stopColor={theme === 'dark' ? "#d97706" : "#b45309"} stopOpacity={0.1}/>
-              </linearGradient>
-            </defs>
-            <CartesianGrid strokeDasharray="3 3" stroke={getGridColor()} opacity={0.3} />
-            <XAxis 
-              dataKey="timestamp" 
-              tick={{ fontSize: 10, fill: getAxisColor() }}
-              axisLine={{ stroke: getGridColor() }}
-            />
-            <YAxis 
-              domain={[0, 100]}
-              tick={{ fontSize: 10, fill: getAxisColor() }}
-              axisLine={{ stroke: getGridColor() }}
-              label={{ value: 'Disk %', angle: -90, position: 'insideLeft' }}
-            />
-            <ChartTooltip 
-              content={<DetailedTooltipContent />}
-              cursor={{ stroke: getGridColor() }}
-            />
-            <Area 
-              type="step" 
-              dataKey="diskUsagePercent" 
-              stroke={theme === 'dark' ? "#fbbf24" : "#d97706"}
-              strokeWidth={3}
-              dot={false}
-              fill="url(#diskGradient)"
-              fillOpacity={1}
-              name="Disk Usage (%)"
-            />
-          </AreaChart>
-        </ChartContainer>
+      <CardContent className="pt-2 flex-1 min-h-0">
+        <div className="w-full h-full min-h-[240px] lg:min-h-[320px]">
+          <ResponsiveContainer width="100%" height="100%">
+            <AreaChart data={data} margin={{ top: 5, right: 5, left: 5, bottom: 5 }}>
+              <defs>
+                <linearGradient id="diskGradient" x1="0" y1="0" x2="0" y2="1">
+                  <stop offset="5%" stopColor={theme === 'dark' ? "#f59e0b" : "#d97706"} stopOpacity={0.6}/>
+                  <stop offset="95%" stopColor={theme === 'dark' ? "#d97706" : "#b45309"} stopOpacity={0.1}/>
+                </linearGradient>
+              </defs>
+              <CartesianGrid strokeDasharray="3 3" stroke={getGridColor()} opacity={0.3} />
+              <XAxis 
+                dataKey="timestamp" 
+                tick={{ fontSize: 10, fill: getAxisColor() }}
+                axisLine={{ stroke: getGridColor() }}
+              />
+              <YAxis 
+                domain={[0, 100]}
+                tick={{ fontSize: 10, fill: getAxisColor() }}
+                axisLine={{ stroke: getGridColor() }}
+                label={{ value: 'Disk %', angle: -90, position: 'insideLeft' }}
+              />
+              <ChartTooltip 
+                content={<DetailedTooltipContent />}
+                cursor={{ stroke: getGridColor() }}
+              />
+              <Area 
+                type="step" 
+                dataKey="diskUsagePercent" 
+                stroke={theme === 'dark' ? "#fbbf24" : "#d97706"}
+                strokeWidth={2}
+                dot={false}
+                fill="url(#diskGradient)"
+                fillOpacity={1}
+                name="Disk Usage (%)"
+              />
+            </AreaChart>
+          </ResponsiveContainer>
+        </div>
      </CardContent>
    </Card>
  );
@@ -1,7 +1,7 @@

 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { ChartContainer, ChartTooltip } from "@/components/ui/chart";
-import { AreaChart, Area, XAxis, YAxis, CartesianGrid } from "recharts";
+import { AreaChart, Area, XAxis, YAxis, CartesianGrid, ResponsiveContainer } from "recharts";
 import { MemoryStick } from "lucide-react";
 import { useTheme } from "@/contexts/ThemeContext";
 import { DetailedTooltipContent } from "./tooltips/DetailedTooltipContent";
@@ -18,65 +18,62 @@ export const MemoryChart = ({ data, latestData }: MemoryChartProps) => {
  const getAxisColor = () => theme === 'dark' ? '#9ca3af' : '#6b7280';

  return (
-    <Card className="bg-gradient-to-br from-background to-muted/20 border-border/50 shadow-lg hover:shadow-xl transition-all duration-300 backdrop-blur-sm">
-      <CardHeader className="pb-2">
+    <Card className="bg-gradient-to-br from-background to-muted/20 border-border/50 shadow-lg hover:shadow-xl transition-all duration-300 backdrop-blur-sm h-full flex flex-col">
+      <CardHeader className="pb-2 flex-shrink-0">
        <CardTitle className="flex items-center justify-between text-foreground">
          <div className="flex items-center gap-2">
            <div className="p-2 rounded-lg bg-green-500/15">
-              <MemoryStick className="h-5 w-5 text-green-500" />
+              <MemoryStick className="h-4 w-4 lg:h-5 lg:w-5 text-green-500" />
            </div>
-            Memory Usage
+            <span className="text-sm lg:text-base">Memory Usage</span>
          </div>
          {latestData && (
-            <div className="text-right text-sm">
+            <div className="text-right text-xs lg:text-sm">
              <div className="text-green-500 font-semibold">{latestData.ramUsagePercent}%</div>
              <div className="text-xs text-muted-foreground">{latestData.ramUsed} / {latestData.ramTotal}</div>
            </div>
          )}
        </CardTitle>
      </CardHeader>
-      <CardContent className="pt-2">
-        <ChartContainer config={{
-          ramUsagePercent: {
-            label: "Memory Usage (%)",
-            color: theme === 'dark' ? "#10b981" : "#059669",
-          }
-        }} className="h-80">
-          <AreaChart data={data}>
-            <defs>
-              <linearGradient id="memoryGradient" x1="0" y1="0" x2="0" y2="1">
-                <stop offset="5%" stopColor={theme === 'dark' ? "#10b981" : "#059669"} stopOpacity={0.5}/>
-                <stop offset="95%" stopColor={theme === 'dark' ? "#047857" : "#065f46"} stopOpacity={0.1}/>
-              </linearGradient>
-            </defs>
-            <CartesianGrid strokeDasharray="3 3" stroke={getGridColor()} opacity={0.3} />
-            <XAxis 
-              dataKey="timestamp" 
-              tick={{ fontSize: 10, fill: getAxisColor() }}
-              axisLine={{ stroke: getGridColor() }}
-            />
-            <YAxis 
-              domain={[0, 100]}
-              tick={{ fontSize: 10, fill: getAxisColor() }}
-              axisLine={{ stroke: getGridColor() }}
-              label={{ value: 'Memory %', angle: -90, position: 'insideLeft' }}
-            />
-            <ChartTooltip 
-              content={<DetailedTooltipContent />}
-              cursor={{ stroke: getGridColor() }}
-            />
-            <Area 
-              type="basis" 
-              dataKey="ramUsagePercent" 
-              stroke={theme === 'dark' ? "#34d399" : "#059669"}
-              strokeWidth={3}
-              dot={false}
-              fill="url(#memoryGradient)"
-              fillOpacity={1}
-              name="Memory Usage (%)"
-            />
-          </AreaChart>
-        </ChartContainer>
+      <CardContent className="pt-2 flex-1 min-h-0">
+        <div className="w-full h-full min-h-[240px] lg:min-h-[320px]">
+          <ResponsiveContainer width="100%" height="100%">
+            <AreaChart data={data} margin={{ top: 5, right: 5, left: 5, bottom: 5 }}>
+              <defs>
+                <linearGradient id="memoryGradient" x1="0" y1="0" x2="0" y2="1">
+                  <stop offset="5%" stopColor={theme === 'dark' ? "#10b981" : "#059669"} stopOpacity={0.5}/>
+                  <stop offset="95%" stopColor={theme === 'dark' ? "#047857" : "#065f46"} stopOpacity={0.1}/>
+                </linearGradient>
+              </defs>
+              <CartesianGrid strokeDasharray="3 3" stroke={getGridColor()} opacity={0.3} />
+              <XAxis 
+                dataKey="timestamp" 
+                tick={{ fontSize: 10, fill: getAxisColor() }}
+                axisLine={{ stroke: getGridColor() }}
+              />
+              <YAxis 
+                domain={[0, 100]}
+                tick={{ fontSize: 10, fill: getAxisColor() }}
+                axisLine={{ stroke: getGridColor() }}
+                label={{ value: 'Memory %', angle: -90, position: 'insideLeft' }}
+              />
+              <ChartTooltip 
+                content={<DetailedTooltipContent />}
+                cursor={{ stroke: getGridColor() }}
+              />
+              <Area 
+                type="basis" 
+                dataKey="ramUsagePercent" 
+                stroke={theme === 'dark' ? "#34d399" : "#059669"}
+                strokeWidth={2}
+                dot={false}
+                fill="url(#memoryGradient)"
+                fillOpacity={1}
+                name="Memory Usage (%)"
+              />
+            </AreaChart>
+          </ResponsiveContainer>
+        </div>
      </CardContent>
    </Card>
  );
@@ -1,7 +1,7 @@

 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { ChartContainer, ChartTooltip } from "@/components/ui/chart";
-import { LineChart, Line, XAxis, YAxis, CartesianGrid } from "recharts";
+import { LineChart, Line, XAxis, YAxis, CartesianGrid, ResponsiveContainer } from "recharts";
 import { Wifi } from "lucide-react";
 import { useTheme } from "@/contexts/ThemeContext";
 import { NetworkTooltipContent } from "./tooltips/NetworkTooltipContent";
@@ -18,84 +18,77 @@ export const NetworkChart = ({ data, latestData }: NetworkChartProps) => {
  const getAxisColor = () => theme === 'dark' ? '#9ca3af' : '#6b7280';

  return (
-    <Card className="bg-gradient-to-br from-background to-muted/20 border-border/50 shadow-lg hover:shadow-xl transition-all duration-300 backdrop-blur-sm">
-      <CardHeader className="pb-2">
+    <Card className="bg-gradient-to-br from-background to-muted/20 border-border/50 shadow-lg hover:shadow-xl transition-all duration-300 backdrop-blur-sm h-full flex flex-col">
+      <CardHeader className="pb-2 flex-shrink-0">
        <CardTitle className="flex items-center justify-between text-foreground">
          <div className="flex items-center gap-2">
            <div className="p-2 rounded-lg bg-purple-500/15">
-              <Wifi className="h-5 w-5 text-purple-500" />
+              <Wifi className="h-4 w-4 lg:h-5 lg:w-5 text-purple-500" />
            </div>
-            Network Traffic
+            <span className="text-sm lg:text-base">Network Traffic</span>
          </div>
          {latestData && (
-            <div className="text-right text-sm">
+            <div className="text-right text-xs lg:text-sm">
              <div className="text-purple-500 font-semibold">{latestData.networkRxSpeed} KB/s ↓</div>
              <div className="text-red-500 font-semibold">{latestData.networkTxSpeed} KB/s ↑</div>
            </div>
          )}
        </CardTitle>
      </CardHeader>
-      <CardContent className="pt-2">
-        <ChartContainer config={{
-          networkRxSpeed: {
-            label: "RX Speed",
-            color: theme === 'dark' ? "#8b5cf6" : "#7c3aed",
-          },
-          networkTxSpeed: {
-            label: "TX Speed", 
-            color: theme === 'dark' ? "#ef4444" : "#dc2626",
-          }
-        }} className="h-80">
-          <LineChart data={data}>
-            <defs>
-              <linearGradient id="networkGradient" x1="0" y1="0" x2="0" y2="1">
-                <stop offset="5%" stopColor={theme === 'dark' ? "#8b5cf6" : "#7c3aed"} stopOpacity={0.2}/>
-                <stop offset="95%" stopColor={theme === 'dark' ? "#7c3aed" : "#6d28d9"} stopOpacity={0.05}/>
-              </linearGradient>
-              <filter id="glow">
-                <feGaussianBlur stdDeviation="2" result="coloredBlur"/>
-                <feMerge> 
-                  <feMergeNode in="coloredBlur"/>
-                  <feMergeNode in="SourceGraphic"/>
-                </feMerge>
-              </filter>
-            </defs>
-            <CartesianGrid strokeDasharray="3 3" stroke={getGridColor()} opacity={0.3} />
-            <XAxis 
-              dataKey="timestamp" 
-              tick={{ fontSize: 10, fill: getAxisColor() }}
-              axisLine={{ stroke: getGridColor() }}
-            />
-            <YAxis 
-              tick={{ fontSize: 10, fill: getAxisColor() }}
-              axisLine={{ stroke: getGridColor() }}
-              label={{ value: 'Network Speed (KB/s)', angle: -90, position: 'insideLeft' }}
-            />
-            <ChartTooltip 
-              content={<NetworkTooltipContent />}
-              cursor={{ stroke: getGridColor() }}
-            />
-            <Line 
-              type="monotone" 
-              dataKey="networkRxSpeed" 
-              stroke={theme === 'dark' ? "#a78bfa" : "#7c3aed"}
-              strokeWidth={3}
-              dot={false}
-              name="RX Speed"
-              filter="url(#glow)"
-              strokeDasharray="0"
-            />
-            <Line 
-              type="monotone" 
-              dataKey="networkTxSpeed" 
-              stroke={theme === 'dark' ? "#f87171" : "#dc2626"}
-              strokeWidth={3}
-              dot={false}
-              name="TX Speed"
-              strokeDasharray="5 5"
-            />
-          </LineChart>
-        </ChartContainer>
+      <CardContent className="pt-2 flex-1 min-h-0">
+        <div className="w-full h-full min-h-[240px] lg:min-h-[320px]">
+          <ResponsiveContainer width="100%" height="100%">
+            <LineChart data={data} margin={{ top: 5, right: 5, left: 5, bottom: 5 }}>
+              <defs>
+                <linearGradient id="networkGradient" x1="0" y1="0" x2="0" y2="1">
+                  <stop offset="5%" stopColor={theme === 'dark' ? "#8b5cf6" : "#7c3aed"} stopOpacity={0.2}/>
+                  <stop offset="95%" stopColor={theme === 'dark' ? "#7c3aed" : "#6d28d9"} stopOpacity={0.05}/>
+                </linearGradient>
+                <filter id="glow">
+                  <feGaussianBlur stdDeviation="2" result="coloredBlur"/>
+                  <feMerge> 
+                    <feMergeNode in="coloredBlur"/>
+                    <feMergeNode in="SourceGraphic"/>
+                  </feMerge>
+                </filter>
+              </defs>
+              <CartesianGrid strokeDasharray="3 3" stroke={getGridColor()} opacity={0.3} />
+              <XAxis 
+                dataKey="timestamp" 
+                tick={{ fontSize: 10, fill: getAxisColor() }}
+                axisLine={{ stroke: getGridColor() }}
+              />
+              <YAxis 
+                tick={{ fontSize: 10, fill: getAxisColor() }}
+                axisLine={{ stroke: getGridColor() }}
+                label={{ value: 'Network Speed (KB/s)', angle: -90, position: 'insideLeft' }}
+              />
+              <ChartTooltip 
+                content={<NetworkTooltipContent />}
+                cursor={{ stroke: getGridColor() }}
+              />
+              <Line 
+                type="monotone" 
+                dataKey="networkRxSpeed" 
+                stroke={theme === 'dark' ? "#a78bfa" : "#7c3aed"}
+                strokeWidth={2}
+                dot={false}
+                name="RX Speed"
+                filter="url(#glow)"
+                strokeDasharray="0"
+              />
+              <Line 
+                type="monotone" 
+                dataKey="networkTxSpeed" 
+                stroke={theme === 'dark' ? "#f87171" : "#dc2626"}
+                strokeWidth={2}
+                dot={false}
+                name="TX Speed"
+                strokeDasharray="5 5"
+              />
+            </LineChart>
+          </ResponsiveContainer>
+        </div>
      </CardContent>
    </Card>
  );
@@ -1,4 +1,3 @@
-
 export const formatBytes = (bytes: number, decimals = 2) => {
  if (bytes === 0) return '0 B';
  const k = 1024;
@@ -49,34 +48,82 @@ export const timeRangeOptions = [
  { value: '3m' as TimeRange, label: 'Last 90 days', hours: 24 * 90 },
 ];

-// Optimized time range filtering with early returns
 export const filterMetricsByTimeRange = (metrics: any[], timeRange: TimeRange): any[] => {
-  if (!metrics?.length) return [];
+  if (!metrics?.length) {
+    console.log('🔍 filterMetricsByTimeRange: No metrics provided');
+    return [];
+  }
+  
+  console.log('🔍 filterMetricsByTimeRange: Starting with', metrics.length, 'metrics for', timeRange);
  
  const now = new Date();
+  
+  // For 60m, let's be very specific about what we're looking for
+  if (timeRange === '60m') {
+    console.log('⏰ 60m filter: Current time:', now.toISOString());
+    
+    // Try exact 60 minutes first
+    const cutoffTime60m = new Date(now.getTime() - (60 * 60 * 1000));
+    console.log('⏰ 60m filter: Cutoff time:', cutoffTime60m.toISOString());
+    
+    const filtered60m = metrics.filter(metric => {
+      const metricTime = new Date(metric.created || metric.timestamp);
+      const isWithinRange = metricTime >= cutoffTime60m && metricTime <= now;
+      
+      if (!isWithinRange) {
+        const ageMinutes = Math.round((now.getTime() - metricTime.getTime()) / (1000 * 60));
+        console.log('⏰ Excluding record:', {
+          created: metric.created || metric.timestamp,
+          ageMinutes: ageMinutes,
+          reason: ageMinutes > 60 ? 'too old' : 'future date'
+        });
+      }
+      
+      return isWithinRange;
+    });
+    
+    console.log('✅ 60m strict filter result:', filtered60m.length, 'records');
+    
+    if (filtered60m.length > 0) {
+      return filtered60m.sort((a, b) => 
+        new Date(a.created || a.timestamp).getTime() - new Date(b.created || b.timestamp).getTime()
+      );
+    }
+    
+    // If no data in exactly 60m, show what we have and return it anyway for debugging
+    console.log('⚠️ No data in 60m range, showing all available data ages:');
+    metrics.forEach((metric, index) => {
+      const metricTime = new Date(metric.created || metric.timestamp);
+      const ageMinutes = Math.round((now.getTime() - metricTime.getTime()) / (1000 * 60));
+      console.log(`Record ${index}: ${metric.created || metric.timestamp} (${ageMinutes} minutes ago)`);
+    });
+    
+    // Return the most recent data regardless of age
+    const sorted = metrics.sort((a, b) => 
+      new Date(b.created || b.timestamp).getTime() - new Date(a.created || a.timestamp).getTime()
+    );
+    console.log('🔄 Returning most recent available data for 60m view');
+    return sorted.slice(0, 20); // Show last 20 records
+  }
+  
+  // For other time ranges, use normal filtering
  const selectedRange = timeRangeOptions.find(opt => opt.value === timeRange);
  if (!selectedRange) return metrics;

-  // Add small buffer to avoid edge cases
-  const bufferMinutes = timeRange === '60m' ? 5 : timeRange === '1d' ? 30 : 60;
-  const cutoffTime = new Date(now.getTime() - (selectedRange.hours * 60 * 60 * 1000) - (bufferMinutes * 60 * 1000));
-  
-//  console.log('filterMetricsByTimeRange: timeRange:', timeRange, 'cutoffTime:', cutoffTime.toISOString());
+  const cutoffTime = new Date(now.getTime() - (selectedRange.hours * 60 * 60 * 1000));
  
  const filtered = metrics.filter(metric => {
    const metricTime = new Date(metric.created || metric.timestamp);
    return metricTime >= cutoffTime && metricTime <= now;
  });
  
-//  console.log('filterMetricsByTimeRange: Filtered', metrics.length, 'to', filtered.length, 'metrics');
+  console.log('✅ Filtered', metrics.length, 'to', filtered.length, 'metrics for', timeRange);
  
-  // Sort by timestamp for proper chart display
  return filtered.sort((a, b) => 
    new Date(a.created || a.timestamp).getTime() - new Date(b.created || b.timestamp).getTime()
  );
 };

-// Optimized timestamp formatting with caching
 const timestampCache = new Map<string, string>();

 const formatTimestamp = (timestamp: string, timeRange: TimeRange): string => {
@@ -118,7 +165,6 @@ const formatTimestamp = (timestamp: string, timeRange: TimeRange): string => {
    });
  }
  
-  // Cache the result (limit cache size)
  if (timestampCache.size > 1000) {
    timestampCache.clear();
  }
@@ -127,37 +173,49 @@ const formatTimestamp = (timestamp: string, timeRange: TimeRange): string => {
  return formatted;
 };

-// Optimized chart data formatting with better performance
 export const formatChartData = (metrics: any[], timeRange: TimeRange) => {
-//  console.log('formatChartData: Input metrics count:', metrics?.length || 0, 'timeRange:', timeRange);
+  console.log('📊 formatChartData: Processing', {
+    inputCount: metrics?.length || 0,
+    timeRange,
+    sampleMetric: metrics?.[0] ? {
+      id: metrics[0].id,
+      created: metrics[0].created,
+      timestamp: metrics[0].timestamp,
+      server_id: metrics[0].server_id
+    } : null
+  });
  
-  if (!metrics?.length) return [];
+  if (!metrics?.length) {
+    console.log('❌ formatChartData: No metrics provided');
+    return [];
+  }
  
  const filteredMetrics = filterMetricsByTimeRange(metrics, timeRange);
-//  console.log('formatChartData: After time filtering:', filteredMetrics?.length || 0, 'metrics');
+  console.log('📊 formatChartData: After time filtering:', filteredMetrics?.length || 0, 'metrics');
  
-  if (!filteredMetrics.length) return [];
+  if (!filteredMetrics.length) {
+    console.log('❌ formatChartData: No metrics after time filtering');
+    return [];
+  }
  
  // Dynamic sampling based on time range and data volume
  let maxDataPoints: number;
  switch (timeRange) {
-    case '60m': maxDataPoints = 60; break;   // 1 point per minute max
-    case '1d': maxDataPoints = 144; break;   // 1 point per 10 minutes max
-    case '7d': maxDataPoints = 168; break;   // 1 point per hour max
-    case '1m': maxDataPoints = 120; break;   // 1 point per 6 hours max
-    case '3m': maxDataPoints = 90; break;    // 1 point per day max
+    case '60m': maxDataPoints = 60; break;
+    case '1d': maxDataPoints = 144; break;
+    case '7d': maxDataPoints = 168; break;
+    case '1m': maxDataPoints = 120; break;
+    case '3m': maxDataPoints = 90; break;
    default: maxDataPoints = 100;
  }
  
-  // Smart sampling - only sample if we have significantly more data
  const sampledMetrics = filteredMetrics.length > maxDataPoints * 1.2
    ? filteredMetrics.filter((_, index) => index % Math.ceil(filteredMetrics.length / maxDataPoints) === 0)
    : filteredMetrics;
  
-//  console.log('formatChartData: After sampling:', sampledMetrics.length, 'metrics for display');
+  console.log('📊 formatChartData: After sampling:', sampledMetrics.length, 'metrics for display');
  
-  // Batch process the data transformation for better performance
-  return sampledMetrics.map((metric) => {
+  const formattedData = sampledMetrics.map((metric) => {
    const cpuUsage = typeof metric.cpu_usage === 'string' ? 
      parseFloat(metric.cpu_usage.replace('%', '')) : 
      parseFloat(metric.cpu_usage) || 0;
@@ -210,4 +268,7 @@ export const formatChartData = (metrics: any[], timeRange: TimeRange) => {
      networkTxSpeed: Math.round(networkTxSpeed * 100) / 100,
    };
  });
+  
+  console.log('✅ formatChartData: Final formatted data count:', formattedData.length);
+  return formattedData;
 };