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

Enhance analytics charts with interactivity and skeletons
All checks were successful
Build Frontend / build (push) Successful in 1m16s
Details

Browse Source 
Added interactive active segment highlighting to the customer segments pie chart and improved the monthly revenue/orders chart with gradient areas and labeled axes. Replaced loading spinners with ChartSkeleton components for a more consistent loading state. Refactored SkeletonLoaders to accept className and improved code style.
This commit is contained in:
g
2026-01-13 06:05:52 +00:00
parent 66964a3218
commit 600ba1e10e
2 changed files with 153 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

179
components/admin/AdminAnalytics.tsx
View File

@@ -28,6 +28,7 @@ import {
DollarSign,
Package,
Trophy,
PieChart as PieChartIcon,
} from "lucide-react";
import { Alert, AlertDescription, AlertTitle } from "@/components/common/alert";
import { fetchClient } from "@/lib/api/api-client";
@@ -46,7 +47,7 @@ import {
Area,
} from "recharts";
import { formatGBP, formatNumber } from "@/lib/utils/format";
import { PieChart, Pie, Cell, Legend } from "recharts";
import { PieChart, Pie, Cell, Legend, Sector } from "recharts";
import { AdminStatCard } from "./AdminStatCard";
import { TrendIndicator } from "./TrendIndicator";
import {
@@ -56,6 +57,81 @@ import {
TableSkeleton
} from "../analytics/SkeletonLoaders";
const renderActiveShape = (props: any) => {
const RADIAN = Math.PI / 180;
const {
cx,
cy,
midAngle,
innerRadius,
outerRadius,
startAngle,
endAngle,
fill,
payload,
percent,
value,
} = props;
const sin = Math.sin(-RADIAN * midAngle);
const cos = Math.cos(-RADIAN * midAngle);
const sx = cx + (outerRadius + 10) * cos;
const sy = cy + (outerRadius + 10) * sin;
const mx = cx + (outerRadius + 30) * cos;
const my = cy + (outerRadius + 30) * sin;
const ex = mx + (cos >= 0 ? 1 : -1) * 22;
const ey = my;
const textAnchor = cos >= 0 ? "start" : "end";
return (
<g>
<text x={cx} y={cy} dy={8} textAnchor="middle" fill={fill} className="text-xl font-bold">
{payload.name.split(" ")[0]}
</text>
<Sector
cx={cx}
cy={cy}
innerRadius={innerRadius}
outerRadius={outerRadius + 6}
startAngle={startAngle}
endAngle={endAngle}
fill={fill}
/>
<Sector
cx={cx}
cy={cy}
startAngle={startAngle}
endAngle={endAngle}
innerRadius={outerRadius + 6}
outerRadius={outerRadius + 10}
fill={fill}
/>
<path
d={`M${sx},${sy}L${mx},${my}L${ex},${ey}`}
stroke={fill}
fill="none"
/>
<circle cx={ex} cy={ey} r={2} fill={fill} stroke="none" />
<text
x={ex + (cos >= 0 ? 1 : -1) * 12}
y={ey}
textAnchor={textAnchor}
fill="#888"
fontSize={12}
>{`Count ${value}`}</text>
<text
x={ex + (cos >= 0 ? 1 : -1) * 12}
y={ey}
dy={18}
textAnchor={textAnchor}
fill="#999"
fontSize={10}
>
{`(${(percent * 100).toFixed(0)}%)`}
</text>
</g>
);
};
interface GrowthData {
launchDate: string;
generatedAt: string;
@@ -190,6 +266,12 @@ export default function AdminAnalytics() {
const [growthData, setGrowthData] = useState<GrowthData | null>(null);
const [growthLoading, setGrowthLoading] = useState(false);
const [activeIndex, setActiveIndex] = useState(0);
const onPieEnter = (_: any, index: number) => {
setActiveIndex(index);
};
const currentYear = new Date().getFullYear();
// Segment colors for pie chart
@@ -1180,9 +1262,13 @@ export default function AdminAnalytics() {
</CardHeader>
<CardContent>
{growthLoading ? (
<div className="flex items-center justify-center h-80">
<div className="animate-spin h-8 w-8 border-4 border-primary border-t-transparent rounded-full"></div>
</div>
<ChartSkeleton
title="Monthly Revenue & Orders"
description="Platform performance by month since launch"
icon={BarChart}
showStats={false}
className="h-full border-0 shadow-none bg-transparent"
/>
) : growthData?.monthly && growthData.monthly.length > 0 ? (
<div className="h-80">
<ResponsiveContainer width="100%" height="100%">
@@ -1198,9 +1284,19 @@ export default function AdminAnalytics() {
}))}
margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
>
<defs>
<linearGradient id="colorGrowthOrders" x1="0" y1="0" x2="0" y2="1">
<stop offset="5%" stopColor="#3b82f6" stopOpacity={0.3} />
<stop offset="95%" stopColor="#3b82f6" stopOpacity={0} />
</linearGradient>
<linearGradient id="colorGrowthRevenue" x1="0" y1="0" x2="0" y2="1">
<stop offset="5%" stopColor="#10b981" stopOpacity={0.3} />
<stop offset="95%" stopColor="#10b981" stopOpacity={0} />
</linearGradient>
</defs>
<CartesianGrid strokeDasharray="3 3" vertical={false} stroke="hsl(var(--border))" opacity={0.4} />
<XAxis dataKey="formattedMonth" tick={{ fontSize: 12, fill: 'hsl(var(--muted-foreground))' }} axisLine={false} tickLine={false} />
<YAxis yAxisId="left" tick={{ fontSize: 12, fill: 'hsl(var(--muted-foreground))' }} axisLine={false} tickLine={false} />
<YAxis yAxisId="left" tick={{ fontSize: 12, fill: 'hsl(var(--muted-foreground))' }} axisLine={false} tickLine={false} label={{ value: "Orders", angle: -90, position: "insideLeft", style: { fill: 'hsl(var(--muted-foreground))' } }} />
<YAxis
yAxisId="right"
orientation="right"
@@ -1209,9 +1305,10 @@ export default function AdminAnalytics() {
tickFormatter={(value) =>
`£${(value / 1000).toFixed(0)}k`
}
label={{ value: "Revenue", angle: 90, position: "insideRight", style: { fill: 'hsl(var(--muted-foreground))' } }}
/>
<Tooltip
cursor={{ fill: 'hsl(var(--muted)/0.4)' }}
cursor={{ stroke: 'rgba(255,255,255,0.1)', strokeWidth: 1 }}
content={({ active, payload }) => {
if (active && payload?.length) {
const data = payload[0].payload;
@@ -1250,24 +1347,25 @@ export default function AdminAnalytics() {
return null;
}}
/>
<Bar
<Area
yAxisId="left"
type="monotone"
dataKey="orders"
fill="#3b82f6"
radius={[4, 4, 0, 0]}
maxBarSize={50}
stroke="#3b82f6"
fill="url(#colorGrowthOrders)"
strokeWidth={2}
name="Orders"
fillOpacity={0.8}
activeDot={{ r: 4, strokeWidth: 0, fill: "#3b82f6" }}
/>
<Line
<Area
yAxisId="right"
type="monotone"
dataKey="revenue"
stroke="#10b981"
strokeWidth={3}
dot={{ fill: "#10b981", r: 4, strokeWidth: 2, stroke: "hsl(var(--background))" }}
activeDot={{ r: 6, strokeWidth: 0 }}
fill="url(#colorGrowthRevenue)"
strokeWidth={2}
name="Revenue"
activeDot={{ r: 4, strokeWidth: 0, fill: "#10b981" }}
/>
</ComposedChart>
</ResponsiveContainer>
@@ -1288,15 +1386,21 @@ export default function AdminAnalytics() {
</CardHeader>
<CardContent className="flex-1 flex flex-col justify-center">
{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>
<ChartSkeleton
title="Customer Segments"
description="By purchase behavior"
icon={PieChartIcon}
showStats={false}
className="h-full border-0 shadow-none bg-transparent"
/>
) : growthData?.customers ? (
<>
<div className="h-64 min-w-0">
<ResponsiveContainer key={growthData?.customers ? 'ready' : 'loading'} width="100%" height="100%">
<PieChart>
<Pie
activeIndex={activeIndex}
activeShape={renderActiveShape}
data={[
{
name: "New (1 order)",
@@ -1322,12 +1426,10 @@ export default function AdminAnalytics() {
cx="50%"
cy="50%"
innerRadius={60}
outerRadius={90}
paddingAngle={3}
outerRadius={80}
fill="#8884d8"
dataKey="value"
label={({ percent }) => `${(percent * 100).toFixed(0)}%`}
labelLine={false}
stroke="none"
onMouseEnter={onPieEnter}
>
{[
{ color: SEGMENT_COLORS.new },
@@ -1338,37 +1440,6 @@ export default function AdminAnalytics() {
<Cell key={`cell-${index}`} fill={entry.color} />
))}
</Pie>
<Tooltip
content={({ active, payload }) => {
if (active && payload?.length) {
const data = payload[0].payload;
const details =
growthData.customers.segmentDetails[
data.name.split(" ")[0].toLowerCase()
];
return (
<div className="bg-background/95 border border-border/50 p-3 rounded-lg shadow-xl backdrop-blur-md">
<p className="font-semibold mb-1">{data.name}</p>
<p className="text-sm">
Count: <span className="font-mono">{data.value.toLocaleString()}</span>
</p>
{details && (
<>
<p className="text-sm text-green-600 font-medium">
Revenue:{" "}
{formatCurrency(details.totalRevenue)}
</p>
<p className="text-xs text-muted-foreground mt-1">
Avg Orders: {details.avgOrderCount}
</p>
</>
)}
</div>
);
}
return null;
}}
/>
</PieChart>
</ResponsiveContainer>
</div>