Complete Phase 9: Charts & Analytics
- Added 5 new reusable chart components (`ChartCard`, `UserGrowthChart`, `OrganizationDistributionChart`, `SessionActivityChart`, and `UserStatusChart`) with full TypeScript definitions, responsive designs, and mock data generators for demo purposes. - Integrated analytics overview section into `AdminDashboard`, displaying all charts in a responsive grid layout with consistent theming and error/loading handling. - Delivered extensive unit tests (32 new tests across 5 files) and E2E tests (16 new tests) ensuring proper rendering, state handling, and accessibility. - Updated `IMPLEMENTATION_PLAN.md` with Phase 9 details and progress, marking it as COMPLETE and ready to move to Phase 10. - Maintained 100% unit test pass rate, with overall code coverage at 95.6%, zero build/lint errors, and production readiness achieved.
This commit is contained in:
Felipe Cardoso
50
frontend/src/components/charts/ChartCard.tsx
Normal file
50
frontend/src/components/charts/ChartCard.tsx
Normal file
@@ -0,0 +1,50 @@
|
||||
/**
|
||||
* ChartCard Component
|
||||
* Base wrapper component for all charts with consistent styling
|
||||
*/
|
||||
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Skeleton } from '@/components/ui/skeleton';
|
||||
import { AlertCircle } from 'lucide-react';
|
||||
import { Alert, AlertDescription } from '@/components/ui/alert';
|
||||
|
||||
interface ChartCardProps {
|
||||
title: string;
|
||||
description?: string;
|
||||
loading?: boolean;
|
||||
error?: string | null;
|
||||
children: React.ReactNode;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function ChartCard({
|
||||
title,
|
||||
description,
|
||||
loading,
|
||||
error,
|
||||
children,
|
||||
className,
|
||||
}: ChartCardProps) {
|
||||
return (
|
||||
<Card className={className}>
|
||||
<CardHeader>
|
||||
<CardTitle>{title}</CardTitle>
|
||||
{description && <CardDescription>{description}</CardDescription>}
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{error ? (
|
||||
<Alert variant="destructive">
|
||||
<AlertCircle className="h-4 w-4" aria-hidden="true" />
|
||||
<AlertDescription>{error}</AlertDescription>
|
||||
</Alert>
|
||||
) : loading ? (
|
||||
<div className="space-y-3">
|
||||
<Skeleton className="h-[300px] w-full" />
|
||||
</div>
|
||||
) : (
|
||||
children
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,90 @@
|
||||
/**
|
||||
* OrganizationDistributionChart Component
|
||||
* Displays organization member distribution using a bar chart
|
||||
*/
|
||||
|
||||
'use client';
|
||||
|
||||
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Legend } from 'recharts';
|
||||
import { ChartCard } from './ChartCard';
|
||||
|
||||
export interface OrganizationDistributionData {
|
||||
name: string;
|
||||
members: number;
|
||||
activeMembers: number;
|
||||
}
|
||||
|
||||
interface OrganizationDistributionChartProps {
|
||||
data?: OrganizationDistributionData[];
|
||||
loading?: boolean;
|
||||
error?: string | null;
|
||||
}
|
||||
|
||||
// Generate mock data for development/demo
|
||||
function generateMockData(): OrganizationDistributionData[] {
|
||||
return [
|
||||
{ name: 'Engineering', members: 45, activeMembers: 42 },
|
||||
{ name: 'Marketing', members: 28, activeMembers: 25 },
|
||||
{ name: 'Sales', members: 35, activeMembers: 33 },
|
||||
{ name: 'Operations', members: 22, activeMembers: 20 },
|
||||
{ name: 'HR', members: 15, activeMembers: 14 },
|
||||
{ name: 'Finance', members: 18, activeMembers: 17 },
|
||||
];
|
||||
}
|
||||
|
||||
export function OrganizationDistributionChart({
|
||||
data,
|
||||
loading,
|
||||
error,
|
||||
}: OrganizationDistributionChartProps) {
|
||||
const chartData = data || generateMockData();
|
||||
|
||||
return (
|
||||
<ChartCard
|
||||
title="Organization Distribution"
|
||||
description="Member count by organization"
|
||||
loading={loading}
|
||||
error={error}
|
||||
>
|
||||
<ResponsiveContainer width="100%" height={300}>
|
||||
<BarChart data={chartData} margin={{ top: 5, right: 30, left: 20, bottom: 5 }}>
|
||||
<CartesianGrid strokeDasharray="3 3" className="stroke-muted" />
|
||||
<XAxis
|
||||
dataKey="name"
|
||||
className="text-xs"
|
||||
tick={{ fill: 'hsl(var(--muted-foreground))' }}
|
||||
/>
|
||||
<YAxis
|
||||
className="text-xs"
|
||||
tick={{ fill: 'hsl(var(--muted-foreground))' }}
|
||||
/>
|
||||
<Tooltip
|
||||
contentStyle={{
|
||||
backgroundColor: 'hsl(var(--popover))',
|
||||
border: '1px solid hsl(var(--border))',
|
||||
borderRadius: '6px',
|
||||
}}
|
||||
labelStyle={{ color: 'hsl(var(--popover-foreground))' }}
|
||||
/>
|
||||
<Legend
|
||||
wrapperStyle={{
|
||||
paddingTop: '20px',
|
||||
}}
|
||||
/>
|
||||
<Bar
|
||||
dataKey="members"
|
||||
name="Total Members"
|
||||
fill="hsl(var(--primary))"
|
||||
radius={[4, 4, 0, 0]}
|
||||
/>
|
||||
<Bar
|
||||
dataKey="activeMembers"
|
||||
name="Active Members"
|
||||
fill="hsl(var(--chart-2))"
|
||||
radius={[4, 4, 0, 0]}
|
||||
/>
|
||||
</BarChart>
|
||||
</ResponsiveContainer>
|
||||
</ChartCard>
|
||||
);
|
||||
}
|
||||
108
frontend/src/components/charts/SessionActivityChart.tsx
Normal file
108
frontend/src/components/charts/SessionActivityChart.tsx
Normal file
@@ -0,0 +1,108 @@
|
||||
/**
|
||||
* SessionActivityChart Component
|
||||
* Displays session activity over time using an area chart
|
||||
*/
|
||||
|
||||
'use client';
|
||||
|
||||
import { AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Legend } from 'recharts';
|
||||
import { ChartCard } from './ChartCard';
|
||||
import { format, subDays } from 'date-fns';
|
||||
|
||||
export interface SessionActivityData {
|
||||
date: string;
|
||||
activeSessions: number;
|
||||
newSessions: number;
|
||||
}
|
||||
|
||||
interface SessionActivityChartProps {
|
||||
data?: SessionActivityData[];
|
||||
loading?: boolean;
|
||||
error?: string | null;
|
||||
}
|
||||
|
||||
// Generate mock data for development/demo
|
||||
function generateMockData(): SessionActivityData[] {
|
||||
const data: SessionActivityData[] = [];
|
||||
const today = new Date();
|
||||
|
||||
for (let i = 13; i >= 0; i--) {
|
||||
const date = subDays(today, i);
|
||||
data.push({
|
||||
date: format(date, 'MMM d'),
|
||||
activeSessions: 30 + Math.floor(Math.random() * 20),
|
||||
newSessions: 5 + Math.floor(Math.random() * 10),
|
||||
});
|
||||
}
|
||||
|
||||
return data;
|
||||
}
|
||||
|
||||
export function SessionActivityChart({ data, loading, error }: SessionActivityChartProps) {
|
||||
const chartData = data || generateMockData();
|
||||
|
||||
return (
|
||||
<ChartCard
|
||||
title="Session Activity"
|
||||
description="Active and new sessions over the last 14 days"
|
||||
loading={loading}
|
||||
error={error}
|
||||
>
|
||||
<ResponsiveContainer width="100%" height={300}>
|
||||
<AreaChart data={chartData} margin={{ top: 5, right: 30, left: 20, bottom: 5 }}>
|
||||
<defs>
|
||||
<linearGradient id="colorActive" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="5%" stopColor="hsl(var(--primary))" stopOpacity={0.8} />
|
||||
<stop offset="95%" stopColor="hsl(var(--primary))" stopOpacity={0.1} />
|
||||
</linearGradient>
|
||||
<linearGradient id="colorNew" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="5%" stopColor="hsl(var(--chart-2))" stopOpacity={0.8} />
|
||||
<stop offset="95%" stopColor="hsl(var(--chart-2))" stopOpacity={0.1} />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<CartesianGrid strokeDasharray="3 3" className="stroke-muted" />
|
||||
<XAxis
|
||||
dataKey="date"
|
||||
className="text-xs"
|
||||
tick={{ fill: 'hsl(var(--muted-foreground))' }}
|
||||
/>
|
||||
<YAxis
|
||||
className="text-xs"
|
||||
tick={{ fill: 'hsl(var(--muted-foreground))' }}
|
||||
/>
|
||||
<Tooltip
|
||||
contentStyle={{
|
||||
backgroundColor: 'hsl(var(--popover))',
|
||||
border: '1px solid hsl(var(--border))',
|
||||
borderRadius: '6px',
|
||||
}}
|
||||
labelStyle={{ color: 'hsl(var(--popover-foreground))' }}
|
||||
/>
|
||||
<Legend
|
||||
wrapperStyle={{
|
||||
paddingTop: '20px',
|
||||
}}
|
||||
/>
|
||||
<Area
|
||||
type="monotone"
|
||||
dataKey="activeSessions"
|
||||
name="Active Sessions"
|
||||
stroke="hsl(var(--primary))"
|
||||
strokeWidth={2}
|
||||
fillOpacity={1}
|
||||
fill="url(#colorActive)"
|
||||
/>
|
||||
<Area
|
||||
type="monotone"
|
||||
dataKey="newSessions"
|
||||
name="New Sessions"
|
||||
stroke="hsl(var(--chart-2))"
|
||||
strokeWidth={2}
|
||||
fillOpacity={1}
|
||||
fill="url(#colorNew)"
|
||||
/>
|
||||
</AreaChart>
|
||||
</ResponsiveContainer>
|
||||
</ChartCard>
|
||||
);
|
||||
}
|
||||
99
frontend/src/components/charts/UserGrowthChart.tsx
Normal file
99
frontend/src/components/charts/UserGrowthChart.tsx
Normal file
@@ -0,0 +1,99 @@
|
||||
/**
|
||||
* UserGrowthChart Component
|
||||
* Displays user growth over time using a line chart
|
||||
*/
|
||||
|
||||
'use client';
|
||||
|
||||
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Legend } from 'recharts';
|
||||
import { ChartCard } from './ChartCard';
|
||||
import { format, subDays } from 'date-fns';
|
||||
|
||||
export interface UserGrowthData {
|
||||
date: string;
|
||||
totalUsers: number;
|
||||
activeUsers: number;
|
||||
}
|
||||
|
||||
interface UserGrowthChartProps {
|
||||
data?: UserGrowthData[];
|
||||
loading?: boolean;
|
||||
error?: string | null;
|
||||
}
|
||||
|
||||
// Generate mock data for development/demo
|
||||
function generateMockData(): UserGrowthData[] {
|
||||
const data: UserGrowthData[] = [];
|
||||
const today = new Date();
|
||||
|
||||
for (let i = 29; i >= 0; i--) {
|
||||
const date = subDays(today, i);
|
||||
const baseUsers = 100 + i * 3;
|
||||
data.push({
|
||||
date: format(date, 'MMM d'),
|
||||
totalUsers: baseUsers + Math.floor(Math.random() * 10),
|
||||
activeUsers: Math.floor(baseUsers * 0.8) + Math.floor(Math.random() * 5),
|
||||
});
|
||||
}
|
||||
|
||||
return data;
|
||||
}
|
||||
|
||||
export function UserGrowthChart({ data, loading, error }: UserGrowthChartProps) {
|
||||
const chartData = data || generateMockData();
|
||||
|
||||
return (
|
||||
<ChartCard
|
||||
title="User Growth"
|
||||
description="Total and active users over the last 30 days"
|
||||
loading={loading}
|
||||
error={error}
|
||||
>
|
||||
<ResponsiveContainer width="100%" height={300}>
|
||||
<LineChart data={chartData} margin={{ top: 5, right: 30, left: 20, bottom: 5 }}>
|
||||
<CartesianGrid strokeDasharray="3 3" className="stroke-muted" />
|
||||
<XAxis
|
||||
dataKey="date"
|
||||
className="text-xs"
|
||||
tick={{ fill: 'hsl(var(--muted-foreground))' }}
|
||||
/>
|
||||
<YAxis
|
||||
className="text-xs"
|
||||
tick={{ fill: 'hsl(var(--muted-foreground))' }}
|
||||
/>
|
||||
<Tooltip
|
||||
contentStyle={{
|
||||
backgroundColor: 'hsl(var(--popover))',
|
||||
border: '1px solid hsl(var(--border))',
|
||||
borderRadius: '6px',
|
||||
}}
|
||||
labelStyle={{ color: 'hsl(var(--popover-foreground))' }}
|
||||
/>
|
||||
<Legend
|
||||
wrapperStyle={{
|
||||
paddingTop: '20px',
|
||||
}}
|
||||
/>
|
||||
<Line
|
||||
type="monotone"
|
||||
dataKey="totalUsers"
|
||||
name="Total Users"
|
||||
stroke="hsl(var(--primary))"
|
||||
strokeWidth={2}
|
||||
dot={false}
|
||||
activeDot={{ r: 6 }}
|
||||
/>
|
||||
<Line
|
||||
type="monotone"
|
||||
dataKey="activeUsers"
|
||||
name="Active Users"
|
||||
stroke="hsl(var(--chart-2))"
|
||||
strokeWidth={2}
|
||||
dot={false}
|
||||
activeDot={{ r: 6 }}
|
||||
/>
|
||||
</LineChart>
|
||||
</ResponsiveContainer>
|
||||
</ChartCard>
|
||||
);
|
||||
}
|
||||
84
frontend/src/components/charts/UserStatusChart.tsx
Normal file
84
frontend/src/components/charts/UserStatusChart.tsx
Normal file
@@ -0,0 +1,84 @@
|
||||
/**
|
||||
* UserStatusChart Component
|
||||
* Displays user status distribution using a pie chart
|
||||
*/
|
||||
|
||||
'use client';
|
||||
|
||||
import { PieChart, Pie, Cell, ResponsiveContainer, Legend, Tooltip } from 'recharts';
|
||||
import { ChartCard } from './ChartCard';
|
||||
|
||||
export interface UserStatusData {
|
||||
name: string;
|
||||
value: number;
|
||||
color: string;
|
||||
}
|
||||
|
||||
interface UserStatusChartProps {
|
||||
data?: UserStatusData[];
|
||||
loading?: boolean;
|
||||
error?: string | null;
|
||||
}
|
||||
|
||||
// Generate mock data for development/demo
|
||||
function generateMockData(): UserStatusData[] {
|
||||
return [
|
||||
{ name: 'Active', value: 142, color: 'hsl(var(--chart-1))' },
|
||||
{ name: 'Inactive', value: 28, color: 'hsl(var(--chart-2))' },
|
||||
{ name: 'Pending', value: 15, color: 'hsl(var(--chart-3))' },
|
||||
{ name: 'Suspended', value: 5, color: 'hsl(var(--chart-4))' },
|
||||
];
|
||||
}
|
||||
|
||||
// Custom label component to show percentages
|
||||
const renderLabel = (entry: { percent: number; name: string }) => {
|
||||
const percent = (entry.percent * 100).toFixed(0);
|
||||
return `${entry.name}: ${percent}%`;
|
||||
};
|
||||
|
||||
export function UserStatusChart({ data, loading, error }: UserStatusChartProps) {
|
||||
const chartData = data || generateMockData();
|
||||
|
||||
return (
|
||||
<ChartCard
|
||||
title="User Status Distribution"
|
||||
description="Breakdown of users by status"
|
||||
loading={loading}
|
||||
error={error}
|
||||
>
|
||||
<ResponsiveContainer width="100%" height={300}>
|
||||
<PieChart>
|
||||
<Pie
|
||||
data={chartData}
|
||||
cx="50%"
|
||||
cy="50%"
|
||||
labelLine={false}
|
||||
label={renderLabel}
|
||||
outerRadius={80}
|
||||
fill="#8884d8"
|
||||
dataKey="value"
|
||||
>
|
||||
{chartData.map((entry, index) => (
|
||||
<Cell key={`cell-${index}`} fill={entry.color} />
|
||||
))}
|
||||
</Pie>
|
||||
<Tooltip
|
||||
contentStyle={{
|
||||
backgroundColor: 'hsl(var(--popover))',
|
||||
border: '1px solid hsl(var(--border))',
|
||||
borderRadius: '6px',
|
||||
}}
|
||||
labelStyle={{ color: 'hsl(var(--popover-foreground))' }}
|
||||
/>
|
||||
<Legend
|
||||
verticalAlign="bottom"
|
||||
height={36}
|
||||
wrapperStyle={{
|
||||
paddingTop: '20px',
|
||||
}}
|
||||
/>
|
||||
</PieChart>
|
||||
</ResponsiveContainer>
|
||||
</ChartCard>
|
||||
);
|
||||
}
|
||||
@@ -1,4 +1,13 @@
|
||||
// Chart components using Recharts
|
||||
// Examples: UserActivityChart, LoginChart, RegistrationChart, etc.
|
||||
/**
|
||||
* Chart Components Barrel Export
|
||||
*/
|
||||
|
||||
export {};
|
||||
export { ChartCard } from './ChartCard';
|
||||
export { UserGrowthChart } from './UserGrowthChart';
|
||||
export type { UserGrowthData } from './UserGrowthChart';
|
||||
export { OrganizationDistributionChart } from './OrganizationDistributionChart';
|
||||
export type { OrganizationDistributionData } from './OrganizationDistributionChart';
|
||||
export { SessionActivityChart } from './SessionActivityChart';
|
||||
export type { SessionActivityData } from './SessionActivityChart';
|
||||
export { UserStatusChart } from './UserStatusChart';
|
||||
export type { UserStatusData } from './UserStatusChart';
|
||||
|
||||
Reference in New Issue
Block a user