poyrazavsever/neta
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ui: implement custom tooltips and update bar chart colors for analytics and dashboard components

Browse Source
This commit is contained in:
poyrazavsever
2026-06-07 07:27:38 +03:00
parent 1e8c66176b
commit 855723ffd1
2 changed files with 56 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/(dashboard)/analytics/analytics-client.tsx
+26 -8
View File
@@ -147,19 +147,37 @@ export function AnalyticsClient({ data }: AnalyticsClientProps) {
<XAxis dataKey="name" axisLine={false} tickLine={false} tick={{ fontSize: 12, fill: 'hsl(var(--muted-foreground))' }} dy={10} />
<YAxis axisLine={false} tickLine={false} tick={{ fontSize: 12, fill: 'hsl(var(--muted-foreground))' }} dx={-10} />
<Tooltip
cursor={{ fill: 'hsl(var(--muted))', opacity: 0.4 }}
contentStyle={{
backgroundColor: 'hsl(var(--background))',
borderColor: 'hsl(var(--border))',
borderRadius: '0.375rem',
}}
cursor={{ fill: 'transparent' }}
content={({ active, payload, label }) => {
if (active && payload && payload.length) {
return (
<div className="bg-background border border-border rounded-xl p-3 shadow-lg shadow-black/5">
<p className="font-medium text-foreground mb-2 text-sm">{label}</p>
<div className="space-y-1.5">
{payload.map((entry: any, index: number) => (
<div key={index} className="flex items-center justify-between gap-6 text-xs">
<div className="flex items-center gap-1.5">
<div className="w-2 h-2 rounded-full" style={{ backgroundColor: entry.color }} />
<span className="text-muted-foreground">Görev Sayısı</span>
</div>
<span className="font-semibold text-foreground">
{entry.value}
</span>
</div>
))}
</div>
</div>
);
}
return null;
}}
/>
<Bar
dataKey="value"
fill="hsl(var(--primary))"
fill="#3b82f6"
radius={[4, 4, 0, 0]}
barSize={60}
activeBar={{ fill: "hsl(var(--primary))", opacity: 0.8 }}
activeBar={{ fill: "#2563eb" }}
/>
</BarChart>
</ResponsiveContainer>
app/(dashboard)/dashboard-client.tsx
+30 -11
View File
@@ -159,25 +159,44 @@ export function DashboardClient({ data }: DashboardClientProps) {
dx={-10}
/>
<Tooltip
cursor={{ fill: 'hsl(var(--muted))', opacity: 0.4 }}
contentStyle={{
backgroundColor: 'hsl(var(--background))',
borderColor: 'hsl(var(--border))',
borderRadius: '0.375rem',
boxShadow: '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)'
}}
cursor={{ fill: 'transparent' }}
content={({ active, payload, label }) => {
if (active && payload && payload.length) {
return (
<div className="bg-background border border-border rounded-xl p-3 shadow-lg shadow-black/5">
<p className="font-medium text-foreground mb-2 text-sm">{label}</p>
<div className="space-y-1.5">
{payload.map((entry: any, index: number) => (
<div key={index} className="flex items-center justify-between gap-6 text-xs">
<div className="flex items-center gap-1.5">
<div className="w-2 h-2 rounded-full" style={{ backgroundColor: entry.color }} />
<span className="text-muted-foreground">{entry.name === 'income' ? 'Gelir' : 'Gider'}</span>
</div>
<span className="font-semibold text-foreground">
{formatCurrency(entry.value)}
</span>
</div>
))}
</div>
</div>
);
}
return null;
}}
/>
<Bar
dataKey="income"
fill="hsl(var(--primary))"
name="income"
fill="#10b981"
radius={[4, 4, 0, 0]}
activeBar={{ fill: "hsl(var(--primary))", opacity: 0.8 }}
activeBar={{ fill: "#059669" }}
/>
<Bar
dataKey="expense"
fill="hsl(var(--destructive))"
name="expense"
fill="#f43f5e"
radius={[4, 4, 0, 0]}
activeBar={{ fill: "hsl(var(--destructive))", opacity: 0.8 }}
activeBar={{ fill: "#e11d48" }}
/>
</BarChart>
</ResponsiveContainer>