From fdf217c8e60978749e217312c747043bdc49c22f Mon Sep 17 00:00:00 2001 From: Christian Vidal Wolf Date: Tue, 10 Mar 2026 13:20:20 +0100 Subject: [PATCH] Implement dynamic annual impact projection in Experiment view --- components/ExperimentsView.tsx | 94 ++++++++++++++++++++++++---------- 1 file changed, 66 insertions(+), 28 deletions(-) diff --git a/components/ExperimentsView.tsx b/components/ExperimentsView.tsx index 6d5ad27..e7e1c13 100644 --- a/components/ExperimentsView.tsx +++ b/components/ExperimentsView.tsx @@ -675,35 +675,73 @@ const ExperimentDetailView: React.FC<{

Estimated Annual Impact

-
-
-
- Optimistic Forecast - $65,000 + {(() => { + const revenueResult = didResults?.metrics?.['revenue']; + if (!revenueResult) { + return
Run analysis to see projected impact
; + } + + const weeklyIncremental = revenueResult.did_estimate; + // Annual projection: weekly increment * 52 weeks + const expectedAnnual = weeklyIncremental * 52; + + // If the impact is negative, we show 0 or the actual loss depending on design choice. + // Given the visual context "Forecast", we'll show the actual projection but cap at 0 for progress bars. + const optimisticAnnual = expectedAnnual > 0 ? expectedAnnual * 1.5 : expectedAnnual * 0.5; + const conservativeAnnual = expectedAnnual > 0 ? expectedAnnual * 0.5 : expectedAnnual * 1.5; + + const formatImpact = (val: number) => { + return val.toLocaleString('de-DE', { + style: 'currency', + currency: 'EUR', + maximumFractionDigits: 0 + }); + }; + + const maxVal = Math.max(Math.abs(optimisticAnnual), Math.abs(expectedAnnual), 10000); + const getWidth = (val: number) => `${Math.max(5, Math.min(100, (Math.abs(val) / maxVal) * 100))}%`; + + return ( +
+
+
+ Optimistic Forecast + {formatImpact(optimisticAnnual)} +
+
+
= 0 ? 'bg-[#10b981]' : 'bg-red-500'} rounded-full transition-all duration-1000`} + style={{ width: getWidth(optimisticAnnual) }} + >
+
+
+
+
+ Expected Gain + {formatImpact(expectedAnnual)} +
+
+
= 0 ? 'bg-[#6366f1]' : 'bg-red-400'} rounded-full transition-all duration-1000`} + style={{ width: getWidth(expectedAnnual) }} + >
+
+
+
+
+ Conservative Baseline + {formatImpact(conservativeAnnual)} +
+
+
= 0 ? 'bg-[#475569]' : 'bg-red-900'} rounded-full transition-all duration-1000`} + style={{ width: getWidth(conservativeAnnual) }} + >
+
+
-
-
-
-
-
-
- Expected Gain - $42,000 -
-
-
-
-
-
-
- Conservative Baseline - $18,000 -
-
-
-
-
-
+ ); + })()}