gib/GibSend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update dashboard chart ui (#73)

Browse Source
This commit is contained in:
KM Koushik
2024-09-29 10:17:10 +10:00
committed by GitHub
parent 3900fd0a05
commit b817e11f3d
1 changed files with 39 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
apps/web/src/app/(dashboard)/dashboard/dashboard-chart.tsx
View File

@@ -6,6 +6,9 @@ import {
YAxis, YAxis,
Tooltip, Tooltip,
ResponsiveContainer, ResponsiveContainer,
CartesianGrid,
AreaChart,
Area,
} from "recharts"; } from "recharts";
import { EmailStatusIcon } from "../emails/email-status-badge"; import { EmailStatusIcon } from "../emails/email-status-badge";
import { EmailStatus } from "@prisma/client"; import { EmailStatus } from "@prisma/client";
@@ -113,7 +116,7 @@ export default function DashboardChart() {
bottom: 5, bottom: 5,
}} }}
> >
{/* <CartesianGrid strokeDasharray="3 3" /> */} <CartesianGrid vertical={false} strokeDasharray="3 3" />
<XAxis dataKey="name" fontSize={12} /> <XAxis dataKey="name" fontSize={12} />
<YAxis fontSize={12} /> <YAxis fontSize={12} />
<Tooltip <Tooltip
@@ -134,38 +137,57 @@ export default function DashboardChart() {
return null; return null;
return ( return (
<div className=" bg-black border shadow-lg p-2 rounded flex flex-col gap-4 px-4"> <div className=" bg-background border shadow-lg p-2 rounded flex flex-col gap-2 px-4">
<p className="text-sm text-muted-foreground"> <p className="text-sm text-muted-foreground">
{data.name} {data.name}
</p> </p>
{data.DELIVERED ? ( {data.DELIVERED ? (
<div> <div className="flex gap-2 items-center">
<p className="text-sm text-[#10b981]">Delivered</p> <div className="w-2.5 h-2.5 bg-[#10b981] rounded-[2px]"></div>
<p className="text-xs">{data.DELIVERED} emails</p> <p className="text-xs text-muted-foreground w-[60px]">
Delivered
</p>
<p className="text-xs font-mono">
{data.DELIVERED}
</p>
</div> </div>
) : null} ) : null}
{data.BOUNCED ? ( {data.BOUNCED ? (
<div> <div className="flex gap-2 items-center">
<p className="text-sm text-[#ef4444]">Bounced</p> <div className="w-2.5 h-2.5 bg-[#ef4444] rounded-[2px]"></div>
<p className="text-xs">{data.BOUNCED} emails</p> <p className="text-xs text-muted-foreground w-[60px]">
Bounced
</p>
<p className="text-xs font-mono">{data.BOUNCED}</p>
</div> </div>
) : null} ) : null}
{data.COMPLAINED ? ( {data.COMPLAINED ? (
<div> <div className="flex gap-2 items-center">
<p className="text-sm text-[#eab308]">Complained</p> <div className="w-2.5 h-2.5 bg-[#eab308] rounded-[2px]"></div>
<p className="text-xs">{data.COMPLAINED} emails</p> <p className="text-xs text-muted-foreground w-[60px]">
Complained
</p>
<p className="text-xs font-mono">
{data.COMPLAINED}
</p>
</div> </div>
) : null} ) : null}
{data.OPENED ? ( {data.OPENED ? (
<div> <div className="flex gap-2 items-center">
<p className="text-sm text-[#6366f1]">Opened</p> <div className="w-2.5 h-2.5 bg-[#6366f1] rounded-[2px]"></div>
<p className="text-xs">{data.OPENED} emails</p> <p className="text-xs text-muted-foreground w-[60px]">
Opened
</p>
<p className="text-xs font-mono">{data.OPENED}</p>
</div> </div>
) : null} ) : null}
{data.CLICKED ? ( {data.CLICKED ? (
<div> <div className="flex gap-2 items-center">
<p className="text-sm text-[#06b6d4]">Clicked</p> <div className="w-2.5 h-2.5 bg-[#06b6d4] rounded-[2px]"></div>
<p className="text-xs">{data.CLICKED} emails</p> <p className="text-xs text-muted-foreground w-[60px]">
Clicked
</p>
<p className="text-xs font-mono">{data.CLICKED}</p>
</div> </div>
) : null} ) : null}
</div> </div>