Skip to content

Commit 6eceeb4

Browse files
izadoesdevizadoesdev
committed
cleanup
1 parent a66674f commit 6eceeb4

File tree

3 files changed

+84
-38
lines changed

3 files changed

+84
-38
lines changed

‎apps/dashboard/app/(main)/websites/[id]/experiments/[experimentId]/results/_components/conversion-chart.tsx‎

Lines changed: 80 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,14 @@
11
'use client';
22

3-
import { ChartLineIcon } from '@phosphor-icons/react';
43
import dayjs from 'dayjs';
5-
import { MetricsChart } from '@/components/charts/metrics-chart';
4+
import { Area, AreaChart, CartesianGrid, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
65
import type { Experiment } from '@/hooks/use-experiments';
76

87
interface ConversionChartProps {
98
experiment: Experiment;
109
}
1110

12-
// Mock data generator following the same pattern as overview-tab
11+
// Mock data generator
1312
const generateTimeSeriesData = (startDate: Date, days: number) => {
1413
const data = [];
1514
for (let i = 0; i < days; i++) {
@@ -19,32 +18,97 @@ const generateTimeSeriesData = (startDate: Date, days: number) => {
1918
const variantRate = 12.4 + (Math.random() - 0.5) * 2;
2019

2120
data.push({
22-
date: date.format('YYYY-MM-DD'),
21+
date: date.format('MMM D'),
2322
control: Number(controlRate.toFixed(1)),
2423
variant: Number(variantRate.toFixed(1)),
2524
});
2625
}
2726
return data;
2827
};
2928

29+
const CustomTooltip = ({ active, payload, label }: any) => {
30+
if (!active || !payload || !payload.length) return null;
31+
32+
return (
33+
<div className="rounded border bg-card p-3 shadow-lg">
34+
<p className="font-medium text-sm">{label}</p>
35+
<div className="mt-2 space-y-1">
36+
{payload.map((entry: any, index: number) => (
37+
<div key={index} className="flex items-center gap-2 text-xs">
38+
<div
39+
className="h-2 w-2 rounded-full"
40+
style={{ backgroundColor: entry.color }}
41+
/>
42+
<span className="capitalize">{entry.dataKey}:</span>
43+
<span className="font-medium">{entry.value}%</span>
44+
</div>
45+
))}
46+
</div>
47+
</div>
48+
);
49+
};
50+
3051
export function ConversionChart({ experiment }: ConversionChartProps) {
3152
const days = dayjs().diff(dayjs(experiment.createdAt), 'days') || 1;
32-
const data = generateTimeSeriesData(new Date(experiment.createdAt), Math.min(days, 30));
53+
const data = generateTimeSeriesData(new Date(experiment.createdAt), Math.min(days, 14));
3354

3455
return (
3556
<div className="rounded border bg-card shadow-sm">
36-
<div className="flex flex-col items-start justify-between gap-3 border-b p-4 sm:flex-row">
37-
<div>
38-
<h2 className="font-semibold text-lg tracking-tight">
39-
Conversion Rates
40-
</h2>
41-
<p className="text-muted-foreground text-sm">
42-
Daily conversion rates for control vs variant
43-
</p>
44-
</div>
57+
<div className="border-b p-4">
58+
<h2 className="font-semibold text-lg tracking-tight">
59+
Conversion Rates
60+
</h2>
61+
<p className="text-muted-foreground text-sm">
62+
Control vs variant performance over time
63+
</p>
4564
</div>
46-
<div>
47-
<MetricsChart data={data} height={350} isLoading={false} />
65+
<div className="p-4">
66+
<div className="h-64">
67+
<ResponsiveContainer width="100%" height="100%">
68+
<AreaChart data={data} margin={{ top: 10, right: 30, left: 0, bottom: 0 }}>
69+
<defs>
70+
<linearGradient id="controlGradient" x1="0" y1="0" x2="0" y2="1">
71+
<stop offset="5%" stopColor="hsl(var(--muted-foreground))" stopOpacity={0.3} />
72+
<stop offset="95%" stopColor="hsl(var(--muted-foreground))" stopOpacity={0.1} />
73+
</linearGradient>
74+
<linearGradient id="variantGradient" x1="0" y1="0" x2="0" y2="1">
75+
<stop offset="5%" stopColor="hsl(var(--primary))" stopOpacity={0.3} />
76+
<stop offset="95%" stopColor="hsl(var(--primary))" stopOpacity={0.1} />
77+
</linearGradient>
78+
</defs>
79+
<CartesianGrid strokeDasharray="3 3" stroke="hsl(var(--border))" />
80+
<XAxis
81+
dataKey="date"
82+
tick={{ fontSize: 12, fill: 'hsl(var(--muted-foreground))' }}
83+
axisLine={false}
84+
tickLine={false}
85+
/>
86+
<YAxis
87+
tick={{ fontSize: 12, fill: 'hsl(var(--muted-foreground))' }}
88+
axisLine={false}
89+
tickLine={false}
90+
domain={['dataMin - 1', 'dataMax + 1']}
91+
/>
92+
<Tooltip content={<CustomTooltip />} />
93+
<Area
94+
type="monotone"
95+
dataKey="control"
96+
stroke="hsl(var(--muted-foreground))"
97+
strokeWidth={2}
98+
fillOpacity={1}
99+
fill="url(#controlGradient)"
100+
/>
101+
<Area
102+
type="monotone"
103+
dataKey="variant"
104+
stroke="hsl(var(--primary))"
105+
strokeWidth={2}
106+
fillOpacity={1}
107+
fill="url(#variantGradient)"
108+
/>
109+
</AreaChart>
110+
</ResponsiveContainer>
111+
</div>
48112
</div>
49113
</div>
50114
);

‎apps/dashboard/app/(main)/websites/[id]/experiments/[experimentId]/results/_components/experiment-summary-cards.tsx‎

Lines changed: 3 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -28,13 +28,13 @@ export function ExperimentSummaryCards({ experiment }: ExperimentSummaryCardsPro
2828
};
2929

3030
return (
31-
<div className="grid grid-cols-1 gap-3 sm:grid-cols-2 sm:gap-4 md:grid-cols-4">
31+
<div className="grid grid-cols-1 gap-3 sm:grid-cols-2 sm:gap-4 lg:grid-cols-3">
3232
<StatCard
3333
title="CONVERSION LIFT"
3434
value={`+${results.lift}%`}
3535
description={`${results.conversionRateVariant}% vs ${results.conversionRateControl}%`}
3636
icon={TrendUpIcon}
37-
variant="positive"
37+
variant="success"
3838
className="h-full"
3939
/>
4040

@@ -49,18 +49,10 @@ export function ExperimentSummaryCards({ experiment }: ExperimentSummaryCardsPro
4949
<StatCard
5050
title="SAMPLE SIZE"
5151
value={formatNumber(results.sampleSizeControl + results.sampleSizeVariant)}
52-
description={`${formatNumber(results.sampleSizeControl)} / ${formatNumber(results.sampleSizeVariant)}`}
52+
description={`${formatNumber(results.sampleSizeControl)} total participants`}
5353
icon={UsersIcon}
5454
className="h-full"
5555
/>
56-
57-
<StatCard
58-
title="DURATION"
59-
value={`${results.duration} days`}
60-
description={`Since ${dayjs(experiment.createdAt).format('MMM D')}`}
61-
icon={CalendarIcon}
62-
className="h-full"
63-
/>
6456
</div>
6557
);
6658
}

‎apps/dashboard/app/(main)/websites/[id]/experiments/[experimentId]/results/page.tsx‎

Lines changed: 1 addition & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -102,7 +102,7 @@ export default function ExperimentResultsPage() {
102102
<div className="mx-auto max-w-[1600px] space-y-6 mt-6">
103103
<WebsitePageHeader
104104
title={experiment?.name || 'Experiment Results'}
105-
description="View detailed A/B test results and statistical analysis"
105+
description="A/B test performance data"
106106
icon={<FlaskIcon className="h-6 w-6 text-primary" size={16} weight="duotone" />}
107107
websiteId={websiteId}
108108
websiteName={websiteData?.name || undefined}
@@ -111,16 +111,6 @@ export default function ExperimentResultsPage() {
111111
onRefresh={handleRefresh}
112112
showBackButton={true}
113113
variant="minimal"
114-
additionalActions={
115-
experiment && (
116-
<ExperimentResultsHeader
117-
experiment={experiment}
118-
onDeclareWinner={() => {}}
119-
onPauseExperiment={() => {}}
120-
onExportResults={() => {}}
121-
/>
122-
)
123-
}
124114
/>
125115

126116
{isVisible && (

0 commit comments

Comments
 (0)