Skip to content

Commit ab9b5dc

Browse files
atharva20-coderatharva20-coder
committed
Redesigned charts
1 parent 2bf9ac2 commit ab9b5dc

File tree

4 files changed

+149
-49
lines changed

4 files changed

+149
-49
lines changed

‎prisma/migrations/20250224133930_updated_analytics_table/migration.sql

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
-- AlterTable
2+
ALTER TABLE "Analytics" ADD COLUMN "commentReplyCount" INTEGER NOT NULL DEFAULT 0;

‎prisma/schema.prisma

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -126,6 +126,7 @@ model Analytics {
126126
date DateTime @default(now())
127127
dmCount Int @default(0)
128128
commentCount Int @default(0)
129+
commentReplyCount Int @default(0)
129130
postCount Int @default(0)
130131
automationCount Int @default(0)
131132
createdAt DateTime @default(now())

‎src/actions/analytics/index.ts

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,8 +42,11 @@ export const getUserAnalytics = async (slug: string) => {
4242
);
4343

4444
const analyticsData = dbUser.analytics.map((item) => ({
45-
date: item.date.toLocaleDateString("en-US", { month: "long" }),
45+
date: item.date,
46+
month: item.date.toLocaleDateString("en-US", { month: "long" }),
4647
activity: item.dmCount + item.commentCount,
48+
dmCount: item.dmCount,
49+
commentCount: item.commentCount
4750
}));
4851

4952
return {

‎src/app/(protected)/dashboard/[slug]/_components/metrics/index.tsx

Lines changed: 142 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,13 @@ import {
77
} from '@/components/ui/chart'
88
import React from 'react'
99
import {
10-
Area,
11-
AreaChart,
10+
Bar,
11+
BarChart,
1212
CartesianGrid,
1313
ResponsiveContainer,
1414
XAxis,
15+
YAxis,
16+
Tooltip
1517
} from 'recharts'
1618
import { useAnalytics } from '@/hooks/use-analytics'
1719
import { useParams } from 'next/navigation'
@@ -22,11 +24,19 @@ type Props = {
2224
}
2325

2426
const chartConfig = {
25-
desktop: {
26-
label: 'Desktop',
27-
color: 'hsl(var(--chart-1))',
27+
dmCount: {
28+
label: 'Messages',
29+
color: '#2761D8',
2830
},
29-
}
31+
commentCount: {
32+
label: 'Comments',
33+
color: '#2DB78A',
34+
},
35+
commentReply: {
36+
label: 'Replies',
37+
color: '#105427',
38+
},
39+
} as const
3040

3141
const Chart = ({ hasActivity = false }: Props) => {
3242
const params = useParams()
@@ -37,35 +47,68 @@ const Chart = ({ hasActivity = false }: Props) => {
3747
<Card className="border-none p-0 border-opacity-50 rounded-lg mx-0 sm:mx-2 shadow-sm">
3848
<CardContent className="p-0">
3949
<ResponsiveContainer height={300} width={'100%'}>
40-
<AreaChart
41-
data={Array.from({ length: 7 }, (_, i) => ({
42-
month: `Day ${i + 1}`,
43-
desktop: Math.random() * 50 + 25,
44-
}))}
50+
<BarChart
51+
data={[
52+
{ date: "2024-07-15", dmCount: 450, commentCount: 300, commentReply: 200 },
53+
{ date: "2024-07-16", dmCount: 380, commentCount: 420, commentReply: 150 },
54+
{ date: "2024-07-17", dmCount: 520, commentCount: 120, commentReply: 300 },
55+
{ date: "2024-07-18", dmCount: 140, commentCount: 550, commentReply: 250 },
56+
{ date: "2024-07-19", dmCount: 600, commentCount: 350, commentReply: 180 },
57+
{ date: "2024-07-20", dmCount: 480, commentCount: 400, commentReply: 220 },
58+
]}
4559
margin={{
46-
left: 12,
47-
right: 12,
48-
top: 12,
49-
bottom: 12
60+
left: 24,
61+
right: 24,
62+
top: 24,
63+
bottom: 24
5064
}}
5165
>
52-
<CartesianGrid vertical={false} />
66+
<CartesianGrid strokeDasharray="3 3" vertical={false} />
5367
<XAxis
5468
dataKey="month"
55-
tickLine={false}
56-
axisLine={false}
57-
tickMargin={6}
58-
tickFormatter={(value) => value.slice(0, 3)}
59-
fontSize={12}
69+
tickLine={true}
70+
axisLine={true}
71+
tickMargin={16}
72+
fontSize={14}
73+
stroke="#94a3b8"
74+
tick={{ fill: '#94a3b8' }}
75+
/>
76+
<YAxis
77+
tickLine={true}
78+
axisLine={true}
79+
tickMargin={16}
80+
fontSize={14}
81+
stroke="#94a3b8"
82+
tick={{ fill: '#94a3b8' }}
83+
/>
84+
<Bar
85+
dataKey="dmCount"
86+
stackId="stack"
87+
fill="#2761D8"
88+
radius={[4, 4, 0, 0]}
89+
maxBarSize={40}
90+
animationDuration={300}
91+
minPointSize={3}
92+
/>
93+
<Bar
94+
dataKey="commentCount"
95+
stackId="stack"
96+
fill="#2DB78A"
97+
radius={[0, 0, 0, 0]}
98+
maxBarSize={40}
99+
animationDuration={300}
100+
minPointSize={3}
60101
/>
61-
<Area
62-
dataKey="desktop"
63-
type="natural"
64-
fill="hsl(var(--muted))"
65-
fillOpacity={0.4}
66-
stroke="hsl(var(--muted))"
102+
<Bar
103+
dataKey="commentReply"
104+
stackId="stack"
105+
fill="#105427"
106+
radius={[0, 0, 4, 4]}
107+
maxBarSize={40}
108+
animationDuration={300}
109+
minPointSize={3}
67110
/>
68-
</AreaChart>
111+
</BarChart>
69112
</ResponsiveContainer>
70113
</CardContent>
71114
</Card>
@@ -90,38 +133,89 @@ const Chart = ({ hasActivity = false }: Props) => {
90133
<CardContent className="p-0">
91134
<ResponsiveContainer height={300} width={'100%'}>
92135
<ChartContainer config={chartConfig}>
93-
<AreaChart
94-
accessibilityLayer
136+
<BarChart
95137
data={analytics.data.chartData}
96138
margin={{
97-
left: 12,
98-
right: 12,
99-
top: 12,
100-
bottom: 12
139+
left: 24,
140+
right: 24,
141+
top: 24,
142+
bottom: 24
101143
}}
102144
>
103-
<CartesianGrid vertical={false} />
145+
<CartesianGrid strokeDasharray="3 3" vertical={false} />
104146
<XAxis
105147
dataKey="month"
106-
tickLine={false}
107-
axisLine={false}
108-
tickMargin={6}
109-
tickFormatter={(value) => value.slice(0, 3)}
110-
fontSize={12}
148+
tickLine={true}
149+
axisLine={true}
150+
tickMargin={16}
151+
fontSize={14}
152+
stroke="#94a3b8"
153+
tick={{ fill: '#94a3b8' }}
154+
interval={0}
155+
/>
156+
<YAxis
157+
tickLine={true}
158+
axisLine={true}
159+
tickMargin={16}
160+
fontSize={14}
161+
stroke="#94a3b8"
162+
tick={{ fill: '#94a3b8' }}
111163
/>
112164
<ChartTooltip
165+
content={
166+
<ChartTooltipContent
167+
hideLabel
168+
className="w-[180px]"
169+
formatter={(value, name, item, index) => (
170+
<>
171+
<div
172+
className="h-2.5 w-2.5 shrink-0 rounded-[2px]"
173+
style={{ backgroundColor: chartConfig[name as keyof typeof chartConfig]?.color }}
174+
/>
175+
{chartConfig[name as keyof typeof chartConfig]?.label || name}
176+
<div className="ml-auto flex items-baseline gap-0.5 font-mono font-medium tabular-nums text-foreground">
177+
{value}
178+
</div>
179+
{index === 2 && (
180+
<div className="mt-1.5 flex basis-full items-center border-t pt-1.5 text-xs font-medium text-foreground">
181+
Total
182+
<div className="ml-auto flex items-baseline gap-0.5 font-mono font-medium tabular-nums text-foreground">
183+
{item.payload.dmCount + item.payload.commentCount + item.payload.commentReply}
184+
</div>
185+
</div>
186+
)}
187+
</>
188+
)}
189+
/>
190+
}
113191
cursor={false}
114-
content={<ChartTooltipContent indicator="line" />}
192+
defaultIndex={1}
193+
/>
194+
<Bar
195+
dataKey="dmCount"
196+
stackId="stack"
197+
radius={[0, 0, 4, 4]}
198+
maxBarSize={40}
199+
animationDuration={300}
200+
fill="#2761D8"
201+
/>
202+
<Bar
203+
dataKey="commentCount"
204+
stackId="stack"
205+
radius={[0, 0, 0, 0]}
206+
maxBarSize={40}
207+
animationDuration={300}
208+
fill="#2DB78A"
115209
/>
116-
<Area
117-
dataKey="desktop"
118-
type="natural"
119-
fill="var(--color-desktop)"
120-
fillOpacity={0.4}
121-
stroke="var(--color-desktop)"
210+
<Bar
211+
dataKey="commentReply"
212+
stackId="stack"
213+
radius={[4, 4, 0, 0]}
214+
maxBarSize={40}
122215
animationDuration={300}
216+
fill="#105427"
123217
/>
124-
</AreaChart>
218+
</BarChart>
125219
</ChartContainer>
126220
</ResponsiveContainer>
127221
</CardContent>

0 commit comments

Comments
 (0)