Fix: Separate up/down graph areas

Separate the up and down areas in the response time history graph to improve clarity and correct the display of the down graph.

application/src/components/services/ResponseTimeChart.tsx

@@ -37,6 +37,10 @@ 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
+        upValue: data.status === "up" ? data.responseTime : null,
+        downValue: data.status === "down" ? data.responseTime : null,
+        warningValue: data.status === "warning" ? data.responseTime : null,
       };
     });
   }, [uptimeData]);
@@ -79,31 +83,6 @@ export function ResponseTimeChart({ uptimeData }: ResponseTimeChartProps) {
     return null;
   };
 
-  // Compute status segments for different areas
-  const getStatusSegments = () => {
-    const segments = {
-      up: [] as any[],
-      down: [] as any[],
-      warning: [] as any[]
-    };
-    
-    chartData.forEach(point => {
-      if (point.status === "paused") return;
-      
-      if (point.status === "up") {
-        segments.up.push(point);
-      } else if (point.status === "down") {
-        segments.down.push(point);
-      } else if (point.status === "warning") {
-        segments.warning.push(point);
-      }
-    });
-    
-    return segments;
-  };
-  
-  const segments = getStatusSegments();
-  
   // Check if we have any data to display - be more lenient by checking raw uptimeData
   const hasData = uptimeData.length > 0;
   
@@ -176,42 +155,36 @@ export function ResponseTimeChart({ uptimeData }: ResponseTimeChartProps) {
                 />
                 <Tooltip content={<CustomTooltip />} />
                 
-                {/* Area charts for different statuses */}
+                {/* Separate area charts for each status - rendered in order so they don't overlap */}
-                {segments.up.length > 0 && (
                 <Area 
                   type="monotone" 
-                    dataKey="value" 
+                  dataKey="downValue"
-                    data={segments.up}
-                    stroke="#10b981" 
-                    fillOpacity={1}
-                    fill="url(#colorUp)" 
-                    connectNulls
-                  />
-                )}
-                
-                {segments.down.length > 0 && (
-                  <Area 
-                    type="monotone" 
-                    dataKey="value" 
-                    data={segments.down}
                   stroke="#ef4444" 
-                    fillOpacity={1}
+                  strokeWidth={2}
+                  fillOpacity={0.3}
                   fill="url(#colorDown)" 
-                    connectNulls
+                  connectNulls={false}
                 />
-                )}
                 
-                {segments.warning.length > 0 && (
                 <Area 
                   type="monotone" 
-                    dataKey="value" 
+                  dataKey="warningValue"
-                    data={segments.warning}
                   stroke="#f59e0b" 
-                    fillOpacity={1}
+                  strokeWidth={2}
+                  fillOpacity={0.3}
                   fill="url(#colorWarning)" 
-                    connectNulls
+                  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) =>