santasri.pachhal/road-monitoring-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

changed full frontend,added new features, and components.

Browse Source
This commit is contained in:
sumona-banerjeee
2026-02-11 11:17:22 +05:30
parent ae16cec5ff
commit 3c3aef7d82
24 changed files with 2144 additions and 379 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
components/dashboard/location-bar-chart.tsx
View File

@@ -39,13 +39,23 @@ export function LocationBarChart({ data, isLoading }: LocationBarChartProps) {
}
return (
<div className="h-[300px]">
<div className="h-[200px]">
<ResponsiveContainer width="100%" height="100%">
<BarChart
data={data}
margin={{ top: 10, right: 10, left: 0, bottom: 40 }}
barCategoryGap="20%"
margin={{ top: 10, right: 10, left: 0, bottom: 20 }}
barCategoryGap="25%"
>
<defs>
<linearGradient id="barGradientPothole" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stopColor="#ef4444" stopOpacity={0.8} />
<stop offset="100%" stopColor="#ef4444" stopOpacity={0.4} />
</linearGradient>
<linearGradient id="barGradientSignboard" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stopColor="#3b82f6" stopOpacity={0.8} />
<stop offset="100%" stopColor="#3b82f6" stopOpacity={0.4} />
</linearGradient>
</defs>
<CartesianGrid
strokeDasharray="3 3"
vertical={false}
@@ -53,28 +63,28 @@ export function LocationBarChart({ data, isLoading }: LocationBarChartProps) {
/>
<XAxis
dataKey="name"
tick={{ fontSize: 10, fill: 'hsl(var(--muted-foreground))' }}
tick={{ fontSize: 9, fill: 'hsl(var(--muted-foreground))' }}
tickLine={false}
axisLine={false}
angle={-45}
textAnchor="end"
height={60}
height={50}
interval={0}
/>
<YAxis
tick={{ fontSize: 11, fill: 'hsl(var(--muted-foreground))' }}
tick={{ fontSize: 9, fill: 'hsl(var(--muted-foreground))' }}
tickLine={false}
axisLine={false}
width={35}
width={25}
/>
<Tooltip
content={({ active, payload, label }) => {
if (active && payload && payload.length) {
return (
<div className="bg-background/95 backdrop-blur-sm border border-border rounded-lg px-3 py-2 shadow-lg">
<p className="font-medium text-sm mb-1">{label}</p>
<p className="font-medium text-xs mb-1">{label}</p>
{payload.map((entry, index) => (
<div key={index} className="flex items-center gap-2 text-sm">
<div key={index} className="flex items-center gap-2 text-xs">
<div
className="w-2 h-2 rounded-full"
style={{ backgroundColor: entry.color }}
@@ -91,16 +101,16 @@ export function LocationBarChart({ data, isLoading }: LocationBarChartProps) {
/>
<Legend
verticalAlign="top"
height={36}
height={30}
content={({ payload }) => (
<div className="flex items-center justify-center gap-6 mb-2">
{payload?.map((entry, index) => (
<div key={`legend-${index}`} className="flex items-center gap-2">
<div
className="w-3 h-3 rounded"
className="w-3 h-3 rounded-sm"
style={{ backgroundColor: entry.color }}
/>
<span className="text-xs text-muted-foreground">
<span className="text-[10px] text-muted-foreground">
{entry.value}
</span>
</div>
@@ -111,13 +121,13 @@ export function LocationBarChart({ data, isLoading }: LocationBarChartProps) {
<Bar
dataKey="potholes"
name="Potholes"
fill={COLORS.pothole}
fill="url(#barGradientPothole)"
radius={[4, 4, 0, 0]}
/>
<Bar
dataKey="signboards"
name="Signboards"
fill={COLORS.signboard}
fill="url(#barGradientSignboard)"
radius={[4, 4, 0, 0]}
/>
</BarChart>