fix: better previous on overview

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)',

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}
+            shape={(props: any) => (
-            activeDot={{
+              <BarShapeGrey isActive={activeBar === props.index} {...props} />
-              stroke: 'var(--foreground)',
+            )}
-              fill: 'var(--def-100)',
-              strokeWidth: 1,
-              r: 2,
-            }}
           />
           <Bar
             key={activeMetric.key}