From 1187bcac0a47cc36027a603f8a47a83bbf875e17 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Carl-Gerhard=20Lindesva=CC=88rd?= <lindesvard@gmail.com>
Date: Thu, 16 Oct 2025 14:34:32 +0200
Subject: [PATCH] fix: better previous on overview

---
 apps/start/src/components/charts/common-bar.tsx |  9 +++++++++
 .../components/overview/overview-metrics.tsx    | 17 +++++------------
 2 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/apps/start/src/components/charts/common-bar.tsx b/apps/start/src/components/charts/common-bar.tsx
index 5bb3bdb1..dc74bb83 100644
--- a/apps/start/src/components/charts/common-bar.tsx
+++ b/apps/start/src/components/charts/common-bar.tsx
@@ -36,6 +36,15 @@ export const BarWithBorder = (options: Options) => {
   };
 };
 
+export const BarShapeGrey = BarWithBorder({
+  borderHeight: 2,
+  border: 'rgba(100, 100, 100, 1)',
+  fill: 'rgba(100, 100, 100, 0.3)',
+  active: {
+    border: 'rgba(100, 100, 100, 1)',
+    fill: 'rgba(100, 100, 100, 0.4)',
+  },
+});
 export const BarShapeBlue = BarWithBorder({
   borderHeight: 2,
   border: 'rgba(59, 121, 255, 1)',
diff --git a/apps/start/src/components/overview/overview-metrics.tsx b/apps/start/src/components/overview/overview-metrics.tsx
index 1a652667..a6959981 100644
--- a/apps/start/src/components/overview/overview-metrics.tsx
+++ b/apps/start/src/components/overview/overview-metrics.tsx
@@ -24,7 +24,7 @@ import {
   YAxis,
 } from 'recharts';
 import { createChartTooltip } from '../charts/chart-tooltip';
-import { BarShapeBlue } from '../charts/common-bar';
+import { BarShapeBlue, BarShapeGrey } from '../charts/common-bar';
 import { useXAxisProps, useYAxisProps } from '../report-chart/common/axis';
 import { PreviousDiffIndicatorPure } from '../report-chart/common/previous-diff-indicator';
 import { Skeleton } from '../skeleton';
@@ -245,20 +245,13 @@ function Chart({
             className="stroke-border"
           />
 
-          <Line
+          <Bar
             key={`prev_${activeMetric.key}`}
-            type="step"
             dataKey={`prev_${activeMetric.key}`}
-            stroke={'var(--border)'}
-            strokeWidth={2}
             isAnimationActive={false}
-            dot={false}
-            activeDot={{
-              stroke: 'var(--foreground)',
-              fill: 'var(--def-100)',
-              strokeWidth: 1,
-              r: 2,
-            }}
+            shape={(props: any) => (
+              <BarShapeGrey isActive={activeBar === props.index} {...props} />
+            )}
           />
           <Bar
             key={activeMetric.key}