g/ember-market-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update GrowthAnalyticsChart.tsx

Browse Source
This commit is contained in:
g
2026-01-07 13:09:12 +00:00
parent f78eaaff57
commit 8a43477aa8
1 changed files with 0 additions and 149 deletions
Download Patch File Download Diff File Expand all files Collapse all files

149
components/analytics/GrowthAnalyticsChart.tsx
View File

@@ -24,22 +24,12 @@ import {
CartesianGrid,
Tooltip,
ResponsiveContainer,
PieChart,
Pie,
Cell,
} from "recharts";
interface GrowthAnalyticsChartProps {
hideNumbers?: boolean;
}
const SEGMENT_COLORS = {
new: "#3b82f6",
returning: "#10b981",
loyal: "#f59e0b",
vip: "#8b5cf6",
};
export default function GrowthAnalyticsChart({
hideNumbers = false,
}: GrowthAnalyticsChartProps) {
@@ -277,145 +267,6 @@ export default function GrowthAnalyticsChart({
</CardContent>
</Card>
{/* Customer Segments Pie Chart */}
<Card>
<CardHeader>
<CardTitle>Customer Segments</CardTitle>
<CardDescription>Breakdown by purchase behavior</CardDescription>
</CardHeader>
<CardContent>
{growthLoading ? (
<div className="flex items-center justify-center h-64">
<div className="animate-spin h-8 w-8 border-4 border-primary border-t-transparent rounded-full"></div>
</div>
) : growthData?.customers ? (
<div className="h-64">
<ResponsiveContainer width="100%" height="100%">
<PieChart>
<Pie
data={[
{
name: "New (1 order)",
value: growthData.customers.segments.new,
color: SEGMENT_COLORS.new,
},
{
name: "Returning (2+)",
value: growthData.customers.segments.returning,
color: SEGMENT_COLORS.returning,
},
{
name: "Loyal (£300+/4+)",
value: growthData.customers.segments.loyal,
color: SEGMENT_COLORS.loyal,
},
{
name: "VIP (£1k+/10+)",
value: growthData.customers.segments.vip,
color: SEGMENT_COLORS.vip,
},
]}
cx="50%"
cy="50%"
innerRadius={50}
outerRadius={80}
paddingAngle={2}
dataKey="value"
label={({ name, percent }) =>
hideNumbers
? name
: `${name}: ${(percent * 100).toFixed(0)}%`
}
labelLine={false}
>
{[
{ color: SEGMENT_COLORS.new },
{ color: SEGMENT_COLORS.returning },
{ color: SEGMENT_COLORS.loyal },
{ color: SEGMENT_COLORS.vip },
].map((entry, index) => (
<Cell key={`cell-${index}`} fill={entry.color} />
))}
</Pie>
<Tooltip
content={({ active, payload }) => {
if (active && payload?.length) {
const data = payload[0].payload;
const segmentKey = data.name
.split(" ")[0]
.toLowerCase();
const details =
growthData.customers.segmentDetails[segmentKey];
return (
<div className="bg-background border border-border p-3 rounded-lg shadow-lg">
<p className="font-medium">{data.name}</p>
<p className="text-sm">
Count:{" "}
{hideNumbers
? "***"
: data.value.toLocaleString()}
</p>
{details && (
<>
<p className="text-sm text-green-600">
Revenue:{" "}
{formatCurrency(details.totalRevenue)}
</p>
<p className="text-sm">
Avg Orders:{" "}
{hideNumbers ? "***" : details.avgOrderCount}
</p>
</>
)}
</div>
);
}
return null;
}}
/>
</PieChart>
</ResponsiveContainer>
</div>
) : (
<div className="flex items-center justify-center h-64 text-muted-foreground">
No customer data available
</div>
)}
{/* Segment Stats */}
{growthData?.customers && (
<div className="grid grid-cols-2 gap-2 mt-4">
<div className="p-2 rounded bg-blue-500/10 text-center">
<div className="text-lg font-bold text-blue-600">
{hideNumbers ? "***" : growthData.customers.segments.new}
</div>
<div className="text-xs text-muted-foreground">New</div>
</div>
<div className="p-2 rounded bg-green-500/10 text-center">
<div className="text-lg font-bold text-green-600">
{hideNumbers
? "***"
: growthData.customers.segments.returning}
</div>
<div className="text-xs text-muted-foreground">Returning</div>
</div>
<div className="p-2 rounded bg-amber-500/10 text-center">
<div className="text-lg font-bold text-amber-600">
{hideNumbers ? "***" : growthData.customers.segments.loyal}
</div>
<div className="text-xs text-muted-foreground">Loyal</div>
</div>
<div className="p-2 rounded bg-purple-500/10 text-center">
<div className="text-lg font-bold text-purple-600">
{hideNumbers ? "***" : growthData.customers.segments.vip}
</div>
<div className="text-xs text-muted-foreground">VIP</div>
</div>
</div>
)}
</CardContent>
</Card>
{/* Monthly Growth Table */}
{growthData?.monthly && growthData.monthly.length > 0 && (
<Card>