From 1eabf66311eabf993670d476e0e258691bfc5fc9 Mon Sep 17 00:00:00 2001
From: Tola Leng <tolaleng.oss@gmail.com>
Date: Fri, 20 Jun 2025 19:09:32 +0700
Subject: [PATCH] Fix: Improve response time chart Improve the Response Time
 History chart by separating and ordering the 'down', 'warning', and 'up'
 statuses to prevent overlap and improve positioning.

---
 .../components/services/ResponseTimeChart.tsx | 47 +++++++++++++------
 1 file changed, 32 insertions(+), 15 deletions(-)

diff --git a/application/src/components/services/ResponseTimeChart.tsx b/application/src/components/services/ResponseTimeChart.tsx
index b8bba74..1383863 100644
--- a/application/src/components/services/ResponseTimeChart.tsx
+++ b/application/src/components/services/ResponseTimeChart.tsx
@@ -37,7 +37,7 @@ export function ResponseTimeChart({ uptimeData }: ResponseTimeChartProps) {
         date: format(timestamp, 'MMM dd, yyyy'),
         value: data.status === "paused" ? null : data.responseTime,
         status: data.status,
-        // Separate values for different statuses with proper spacing
+        // Separate values for different statuses with proper positioning
         upValue: data.status === "up" ? data.responseTime : null,
         downValue: data.status === "down" ? data.responseTime : null,
         warningValue: data.status === "warning" ? data.responseTime : null,
@@ -45,6 +45,23 @@ export function ResponseTimeChart({ uptimeData }: ResponseTimeChartProps) {
     });
   }, [uptimeData]);
   
+  // Calculate Y-axis domain for better positioning
+  const yAxisDomain = useMemo(() => {
+    if (!chartData.length) return ['dataMin - 10', 'dataMax + 10'];
+    
+    const allValues = chartData
+      .filter(d => d.value !== null && d.status !== 'paused')
+      .map(d => d.value);
+    
+    if (allValues.length === 0) return [0, 100];
+    
+    const minValue = Math.min(...allValues);
+    const maxValue = Math.max(...allValues);
+    const padding = (maxValue - minValue) * 0.1 || 10;
+    
+    return [Math.max(0, minValue - padding), maxValue + padding];
+  }, [chartData]);
+  
   // Create a custom tooltip for the chart
   const CustomTooltip = ({ active, payload, label }: any) => {
     if (active && payload && payload.length) {
@@ -151,17 +168,27 @@ export function ResponseTimeChart({ uptimeData }: ResponseTimeChartProps) {
                 <YAxis 
                   stroke={theme === 'dark' ? '#666' : '#9ca3af'} 
                   allowDecimals={false}
-                  domain={['dataMin - 10', 'dataMax + 10']}
+                  domain={yAxisDomain}
                 />
                 <Tooltip content={<CustomTooltip />} />
                 
-                {/* Separate area charts for each status - rendered in order so they don't overlap */}
+                {/* Separate area charts for each status - positioned closer together */}
+                <Area 
+                  type="monotone" 
+                  dataKey="upValue"
+                  stroke="#10b981" 
+                  strokeWidth={2}
+                  fillOpacity={0.4}
+                  fill="url(#colorUp)" 
+                  connectNulls={false}
+                />
+                
                 <Area 
                   type="monotone" 
                   dataKey="downValue"
                   stroke="#ef4444" 
                   strokeWidth={2}
-                  fillOpacity={0.3}
+                  fillOpacity={0.4}
                   fill="url(#colorDown)" 
                   connectNulls={false}
                 />
@@ -171,21 +198,11 @@ export function ResponseTimeChart({ uptimeData }: ResponseTimeChartProps) {
                   dataKey="warningValue"
                   stroke="#f59e0b" 
                   strokeWidth={2}
-                  fillOpacity={0.3}
+                  fillOpacity={0.4}
                   fill="url(#colorWarning)" 
                   connectNulls={false}
                 />
                 
-                <Area 
-                  type="monotone" 
-                  dataKey="upValue"
-                  stroke="#10b981" 
-                  strokeWidth={2}
-                  fillOpacity={0.3}
-                  fill="url(#colorUp)" 
-                  connectNulls={false}
-                />
-                
                 {/* Add reference lines for paused periods */}
                 {chartData.map((entry, index) => 
                   entry.status === 'paused' ? (