90 lines
2.9 KiB
TypeScript
90 lines
2.9 KiB
TypeScript
|
'use client';
|
||
|
|
|
||
|
|
import { Bar, BarChart, CartesianGrid, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
|
||
|
|
|
||
|
|
import { CardSkeleton } from '@/components/shared/loading-skeleton';
|
||
|
|
import { EmptyState } from '@/components/shared/empty-state';
|
||
|
|
import { ChartCard } from './chart-card';
|
||
|
|
import { useFunnel } from './use-analytics';
|
||
|
|
import type { DateRange } from '@/lib/services/analytics.service';
|
||
|
|
|
||
|
|
const STAGE_LABELS: Record<string, string> = {
|
||
|
|
open: 'Open',
|
||
|
|
details_sent: 'Details Sent',
|
||
|
|
in_communication: 'In Communication',
|
||
|
|
visited: 'Visited',
|
||
|
|
signed_eoi_nda: 'Signed EOI/NDA',
|
||
|
|
deposit_10pct: 'Deposit 10%',
|
||
|
|
contract: 'Contract',
|
||
|
|
completed: 'Completed',
|
||
|
|
};
|
||
|
|
|
||
|
|
interface Props {
|
||
|
|
range: DateRange;
|
||
|
|
}
|
||
|
|
|
||
|
|
export function PipelineFunnelChart({ range }: Props) {
|
||
|
|
const { data, isLoading } = useFunnel(range);
|
||
|
|
|
||
|
|
const stages = data?.stages ?? [];
|
||
|
|
const chartData = stages.map((s) => ({
|
||
|
|
stage: STAGE_LABELS[s.stage] ?? s.stage,
|
||
|
|
count: s.count,
|
||
|
|
conversionPct: s.conversionPct,
|
||
|
|
}));
|
||
|
|
const allZero = stages.every((s) => s.count === 0);
|
||
|
|
|
||
|
|
function toCsv(): string | null {
|
||
|
|
if (!stages.length) return null;
|
||
|
|
const header = 'stage,count,conversion_pct';
|
||
|
|
const rows = stages.map((s) => `${s.stage},${s.count},${s.conversionPct}`);
|
||
|
|
return [header, ...rows].join('\n');
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<ChartCard
|
||
|
|
title="Pipeline Funnel"
|
||
|
|
description="Interests by stage with conversion rate vs. open"
|
||
|
|
exportFilename={`pipeline-funnel-${range}`}
|
||
|
|
toCsv={toCsv}
|
||
|
|
>
|
||
|
|
{isLoading ? (
|
||
|
|
<CardSkeleton />
|
||
|
|
) : allZero ? (
|
||
|
|
<EmptyState title="No interests in range" description="Try a longer date range." />
|
||
|
|
) : (
|
||
|
|
<ResponsiveContainer width="100%" height={260}>
|
||
|
|
<BarChart data={chartData} margin={{ top: 4, right: 8, left: -16, bottom: 60 }}>
|
||
|
|
<CartesianGrid strokeDasharray="3 3" className="stroke-border" />
|
||
|
|
<XAxis
|
||
|
|
dataKey="stage"
|
||
|
|
tick={{ fontSize: 11, fill: 'hsl(var(--muted-foreground))' }}
|
||
|
|
angle={-40}
|
||
|
|
textAnchor="end"
|
||
|
|
interval={0}
|
||
|
|
/>
|
||
|
|
<YAxis
|
||
|
|
tick={{ fontSize: 11, fill: 'hsl(var(--muted-foreground))' }}
|
||
|
|
allowDecimals={false}
|
||
|
|
/>
|
||
|
|
<Tooltip
|
||
|
|
contentStyle={{
|
||
|
|
background: 'hsl(var(--popover))',
|
||
|
|
border: '1px solid hsl(var(--border))',
|
||
|
|
borderRadius: '6px',
|
||
|
|
fontSize: 12,
|
||
|
|
}}
|
||
|
|
formatter={(value, _name, item) => {
|
||
|
|
const pct = (item?.payload as { conversionPct?: number } | undefined)
|
||
|
|
?.conversionPct;
|
||
|
|
return [`${value} (${pct ?? 0}%)`, 'Count'];
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
<Bar dataKey="count" fill="hsl(var(--chart-1))" radius={[4, 4, 0, 0]} />
|
||
|
|
</BarChart>
|
||
|
|
</ResponsiveContainer>
|
||
|
|
)}
|
||
|
|
</ChartCard>
|
||
|
|
);
|
||
|
|
}
|