From 445b034ef1170ea7d8e5d5a11227bd1320d80fb8 Mon Sep 17 00:00:00 2001
From: Omar Zeineddine <ozeineddine.dev@gmail.com>
Date: Tue, 14 Jul 2026 16:46:54 +0300
Subject: [PATCH] fix(ui): stack failed series below completed in throughput
 charts

Both throughput charts stacked the failed Area on top of completed, so
with zero failures the red stroke traced the exact top of the green
area and the chart read as all-errors. Rendering failed first puts it
at the bottom of the stack: zero failures now draw as a flat red line
on the axis, with the completed area on top.

Closes #30
---
 .../components/metrics/throughput-chart.tsx   | 19 ++++++++-------
 packages/core/src/ui/pages/metrics.tsx        | 23 +++++++++++--------
 2 files changed, 24 insertions(+), 18 deletions(-)

diff --git a/packages/core/src/ui/components/metrics/throughput-chart.tsx b/packages/core/src/ui/components/metrics/throughput-chart.tsx
index fff9d87..28cad63 100644
--- a/packages/core/src/ui/components/metrics/throughput-chart.tsx
+++ b/packages/core/src/ui/components/metrics/throughput-chart.tsx
@@ -172,23 +172,26 @@ export function ThroughputChart({
               />
             </pattern>
           </defs>
+          {/* Failed renders first so it stacks at the bottom: with zero
+              failures its stroke is a flat line on the axis instead of
+              tracing the top of the completed area in red (#30). */}
           <Area
             type="monotone"
-            dataKey="completed"
-            name="Completed"
+            dataKey="failed"
+            name="Failed"
             stackId="1"
-            stroke="var(--color-completed)"
-            fill={`url(#${chartId}-completedGradient)`}
+            stroke="var(--color-failed)"
+            fill={`url(#${chartId}-failedPattern)`}
             strokeWidth={2}
             dot={false}
           />
           <Area
             type="monotone"
-            dataKey="failed"
-            name="Failed"
+            dataKey="completed"
+            name="Completed"
             stackId="1"
-            stroke="var(--color-failed)"
-            fill={`url(#${chartId}-failedPattern)`}
+            stroke="var(--color-completed)"
+            fill={`url(#${chartId}-completedGradient)`}
             strokeWidth={2}
             dot={false}
           />
diff --git a/packages/core/src/ui/pages/metrics.tsx b/packages/core/src/ui/pages/metrics.tsx
index 88e2c66..a1ae6d0 100644
--- a/packages/core/src/ui/pages/metrics.tsx
+++ b/packages/core/src/ui/pages/metrics.tsx
@@ -455,33 +455,36 @@ export function MetricsPage() {
                   />
                 </pattern>
               </defs>
+              {/* Failed renders first so it stacks at the bottom: with zero
+                  failures its stroke is a flat line on the axis instead of
+                  tracing the top of the completed area in red (#30). */}
               <Area
                 type="monotone"
-                dataKey="completed"
-                name="Completed"
+                dataKey="failed"
+                name="Failed"
                 stackId="1"
-                stroke="var(--color-completed)"
-                fill="url(#completedGradient)"
+                stroke="var(--color-failed)"
+                fill="url(#failedPattern)"
                 strokeWidth={2}
                 dot={false}
                 activeDot={{
                   r: 4,
-                  fill: "var(--color-completed)",
+                  fill: "var(--color-failed)",
                   stroke: "none",
                 }}
               />
               <Area
                 type="monotone"
-                dataKey="failed"
-                name="Failed"
+                dataKey="completed"
+                name="Completed"
                 stackId="1"
-                stroke="var(--color-failed)"
-                fill="url(#failedPattern)"
+                stroke="var(--color-completed)"
+                fill="url(#completedGradient)"
                 strokeWidth={2}
                 dot={false}
                 activeDot={{
                   r: 4,
-                  fill: "var(--color-failed)",
+                  fill: "var(--color-completed)",
                   stroke: "none",
                 }}
               />