matt/dashboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix realtime chart and add icons to realtime cards

Browse Source
This commit is contained in:
Matt
2025-01-02 15:23:30 -05:00
parent b855dd67c6
commit a59d0e985f
2 changed files with 21 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
dashboard/src/components/dashboard/MiniRealtimeAnalytics.jsx
View File

@@ -8,7 +8,7 @@ import {
Tooltip, Tooltip,
ResponsiveContainer, ResponsiveContainer,
} from "recharts"; } from "recharts";
import { AlertTriangle } from "lucide-react"; import { AlertTriangle, Users, Activity } from "lucide-react";
import { Alert, AlertDescription } from "@/components/ui/alert"; import { Alert, AlertDescription } from "@/components/ui/alert";
import { format } from "date-fns"; import { format } from "date-fns";
import { import {
@@ -100,9 +100,7 @@ const MiniRealtimeAnalytics = () => {
} }
return ( return (
<div>
<CardContent className="p-0">
{error && ( {error && (
<Alert variant="destructive" className="mb-4"> <Alert variant="destructive" className="mb-4">
<AlertTriangle className="h-4 w-4" /> <AlertTriangle className="h-4 w-4" />
@@ -119,7 +117,10 @@ const MiniRealtimeAnalytics = () => {
colorClass: "text-sky-200", colorClass: "text-sky-200",
titleClass: "text-sky-100 font-bold text-md", titleClass: "text-sky-100 font-bold text-md",
descriptionClass: "text-sky-200 text-md font-semibold", descriptionClass: "text-sky-200 text-md font-semibold",
background: "bg-gradient-to-br from-sky-800 to-sky-700" background: "bg-gradient-to-br from-sky-800 to-sky-700",
icon: Users,
iconColor: "text-sky-900",
iconBackground: "bg-sky-300"
} }
)} )}
{summaryCard( {summaryCard(
@@ -130,12 +131,15 @@ const MiniRealtimeAnalytics = () => {
colorClass: "text-sky-200", colorClass: "text-sky-200",
titleClass: "text-sky-100 font-bold text-md", titleClass: "text-sky-100 font-bold text-md",
descriptionClass: "text-sky-200 text-md font-semibold", descriptionClass: "text-sky-200 text-md font-semibold",
background: "bg-gradient-to-br from-sky-800 to-sky-700" background: "bg-gradient-to-br from-sky-800 to-sky-700",
icon: Activity,
iconColor: "text-sky-900",
iconBackground: "bg-sky-300"
} }
)} )}
</div> </div>
<div className="bg-gradient-to-br from-sky-800 to-sky-700 rounded-lg p-2"> <div className="bg-gradient-to-br from-sky-800 to-sky-700 rounded-lg p-2 h-[200px]">
<ResponsiveContainer width="100%" height="100%"> <ResponsiveContainer width="100%" height="100%">
<BarChart <BarChart
data={basicData.byMinute} data={basicData.byMinute}
@@ -182,7 +186,7 @@ const MiniRealtimeAnalytics = () => {
</BarChart> </BarChart>
</ResponsiveContainer> </ResponsiveContainer>
</div> </div>
</CardContent> </div>
); );
}; };

9
dashboard/src/components/dashboard/RealtimeAnalytics.jsx
View File

@@ -53,12 +53,21 @@ export const summaryCard = (label, sublabel, value, options = {}) => {
titleClass = "text-sm font-medium text-gray-600 dark:text-gray-300", titleClass = "text-sm font-medium text-gray-600 dark:text-gray-300",
descriptionClass = "text-sm text-muted-foreground", descriptionClass = "text-sm text-muted-foreground",
background = "bg-white dark:bg-gray-900/60", background = "bg-white dark:bg-gray-900/60",
icon: Icon,
iconColor,
iconBackground
} = options; } = options;
return ( return (
<Card className={`${background} backdrop-blur-sm`}> <Card className={`${background} backdrop-blur-sm`}>
<CardHeader className="flex flex-row items-center justify-between space-y-0 px-4 py-2"> <CardHeader className="flex flex-row items-center justify-between space-y-0 px-4 py-2">
<span className={titleClass}>{label}</span> <span className={titleClass}>{label}</span>
{Icon && (
<div className="relative p-2">
<div className={`absolute inset-0 rounded-full ${iconBackground}`} />
<Icon className={`h-5 w-5 ${iconColor} relative`} />
</div>
)}
</CardHeader> </CardHeader>
<CardContent className="px-4 pt-0 pb-2"> <CardContent className="px-4 pt-0 pb-2">
<div className={`text-2xl font-bold mb-1 ${colorClass}`}> <div className={`text-2xl font-bold mb-1 ${colorClass}`}>