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

balls :D
All checks were successful
Build Frontend / build (push) Successful in 1m6s
Details

Browse Source
This commit is contained in:
g
2026-01-12 02:32:23 +00:00
parent b10e8f8939
commit 624bfa5485
3 changed files with 89 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
components/analytics/RevenueChart.tsx
View File

@@ -7,7 +7,7 @@ import { Skeleton } from "@/components/ui/skeleton";
import { TrendingUp, DollarSign } from "lucide-react";
import { getRevenueTrendsWithStore, type RevenueData } from "@/lib/services/analytics-service";
import { formatGBP } from "@/utils/format";
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, BarChart, Bar } from 'recharts';
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, AreaChart, Area } from 'recharts';
import { ChartSkeleton } from './SkeletonLoaders';
interface RevenueChartProps {
@@ -61,9 +61,9 @@ export default function RevenueChart({ timeRange, hideNumbers = false }: Revenue
date: date.toISOString().split('T')[0], // YYYY-MM-DD format
revenue: item.revenue || 0,
orders: item.orders || 0,
formattedDate: date.toLocaleDateString('en-GB', {
formattedDate: date.toLocaleDateString('en-GB', {
weekday: 'short',
month: 'short',
month: 'short',
day: 'numeric',
timeZone: 'UTC'
})
@@ -79,12 +79,12 @@ export default function RevenueChart({ timeRange, hideNumbers = false }: Revenue
// Function to mask sensitive numbers
const maskValue = (value: string): string => {
if (!hideNumbers) return value;
// For currency values (£X.XX), show £***
if (value.includes('£')) {
return '£***';
}
// For regular numbers, replace with asterisks
return '***';
};
@@ -110,7 +110,7 @@ export default function RevenueChart({ timeRange, hideNumbers = false }: Revenue
if (isLoading) {
return (
<ChartSkeleton
<ChartSkeleton
title="Revenue Trends"
description="Revenue performance over the selected time period"
icon={TrendingUp}
@@ -176,31 +176,43 @@ export default function RevenueChart({ timeRange, hideNumbers = false }: Revenue
{/* Chart */}
<div className="h-64">
<ResponsiveContainer width="100%" height="100%">
<BarChart data={chartData} margin={{ top: 5, right: 30, left: 20, bottom: 5 }}>
<CartesianGrid strokeDasharray="3 3" />
<XAxis
dataKey="formattedDate"
tick={{ fontSize: 12 }}
<AreaChart data={chartData} margin={{ top: 5, right: 30, left: 20, bottom: 5 }}>
<defs>
<linearGradient id="colorRevenue" x1="0" y1="0" x2="0" y2="1">
<stop offset="5%" stopColor="#2563eb" stopOpacity={0.8} />
<stop offset="95%" stopColor="#2563eb" stopOpacity={0} />
</linearGradient>
</defs>
<CartesianGrid strokeDasharray="3 3" vertical={false} stroke="hsl(var(--border))" />
<XAxis
dataKey="formattedDate"
tick={{ fontSize: 12, fill: "hsl(var(--muted-foreground))" }}
axisLine={false}
tickLine={false}
angle={-45}
textAnchor="end"
height={60}
minTickGap={30}
/>
<YAxis
tick={{ fontSize: 12 }}
<YAxis
tick={{ fontSize: 12, fill: "hsl(var(--muted-foreground))" }}
axisLine={false}
tickLine={false}
tickFormatter={(value) => hideNumbers ? '***' : `£${(value / 1000).toFixed(0)}k`}
/>
<Tooltip content={<CustomTooltip />} />
<Bar
dataKey="revenue"
fill="#2563eb"
stroke="#1d4ed8"
strokeWidth={1}
radius={[2, 2, 0, 0]}
<Tooltip content={<CustomTooltip />} cursor={{ fill: "transparent", stroke: "hsl(var(--muted-foreground))", strokeDasharray: "3 3" }} />
<Area
type="monotone"
dataKey="revenue"
stroke="#2563eb"
fillOpacity={1}
fill="url(#colorRevenue)"
strokeWidth={2}
/>
</BarChart>
</AreaChart>
</ResponsiveContainer>
</div>
{/* Summary stats */}
<div className="grid grid-cols-3 gap-4 pt-4 border-t">
<div className="text-center">