fix: account for null numeric values from supabase in metric cards to uncrash detail view

This commit is contained in:
Christian Vidal Wolf
2026-02-21 18:05:04 +01:00
parent a6135862c2
commit e44f9b30b3
+5 -5
View File
@@ -194,7 +194,7 @@ const ExperimentDetail: React.FC<ExperimentDetailProps> = ({ experimentId, onClo
) : experiment ? ( ) : experiment ? (
<div className="space-y-6"> <div className="space-y-6">
{/* Performance Cards */} {/* Performance Cards */}
{(experiment.experiment_units !== undefined) && ( {(experiment.experiment_units != null) && (
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4"> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
{experiment.type === 'pricing' && ( {experiment.type === 'pricing' && (
<> <>
@@ -223,10 +223,10 @@ const ExperimentDetail: React.FC<ExperimentDetailProps> = ({ experimentId, onClo
<PerformanceCard <PerformanceCard
label="Primary Target Lift" label="Primary Target Lift"
value={experiment.actual_lift_percent !== undefined value={experiment.actual_lift_percent != null
? `${experiment.actual_lift_percent >= 0 ? '+' : ''}${experiment.actual_lift_percent}%` ? `${experiment.actual_lift_percent >= 0 ? '+' : ''}${experiment.actual_lift_percent}%`
: '—'} : '—'}
color={experiment.actual_lift_percent !== undefined && experiment.actual_lift_percent >= 0 ? 'emerald' : 'red'} color={experiment.actual_lift_percent != null && experiment.actual_lift_percent >= 0 ? 'emerald' : 'red'}
/> />
<PerformanceCard <PerformanceCard
label="Significance" label="Significance"
@@ -244,7 +244,7 @@ const ExperimentDetail: React.FC<ExperimentDetailProps> = ({ experimentId, onClo
onClick={handleCalculateResults} onClick={handleCalculateResults}
className="w-full py-3 bg-indigo-600/20 border border-indigo-500/30 hover:bg-indigo-600/30 text-indigo-400 rounded-xl font-medium transition-colors" className="w-full py-3 bg-indigo-600/20 border border-indigo-500/30 hover:bg-indigo-600/30 text-indigo-400 rounded-xl font-medium transition-colors"
> >
{experiment.experiment_units === undefined ? '📊 Calculate Experiment Results' : '🔄 Refresh Results Data'} {experiment.experiment_units == null ? '📊 Calculate Experiment Results' : '🔄 Refresh Results Data'}
</button> </button>
)} )}
@@ -551,7 +551,7 @@ const MetricDeltaCard: React.FC<{
format?: 'number' | 'currency' | 'percent'; format?: 'number' | 'currency' | 'percent';
invertColors?: boolean; invertColors?: boolean;
}> = ({ title, baseline, experimentVal, format = 'number', invertColors = false }) => { }> = ({ title, baseline, experimentVal, format = 'number', invertColors = false }) => {
if (baseline === undefined || experimentVal === undefined) return null; if (baseline == null || experimentVal == null) return null;
const delta = baseline > 0 ? ((experimentVal - baseline) / baseline) * 100 : 0; const delta = baseline > 0 ? ((experimentVal - baseline) / baseline) * 100 : 0;
const isPositive = invertColors ? delta <= 0 : delta >= 0; const isPositive = invertColors ? delta <= 0 : delta >= 0;