mirror of
https://github.com/kjanat/livedash-node.git
synced 2026-01-16 19:52:09 +01:00
Kaj Kowalski
93fbb44eec
Major code quality overhaul addressing 58% of all linting issues: • Type Safety Improvements: - Replace all any types with proper TypeScript interfaces - Fix Map component shadowing (renamed to CountryMap) - Add comprehensive custom error classes system - Enhance API route type safety • Accessibility Enhancements: - Add explicit button types to all interactive elements - Implement useId() hooks for form element accessibility - Add SVG title attributes for screen readers - Fix static element interactions with keyboard handlers • React Best Practices: - Resolve exhaustive dependencies warnings with useCallback - Extract nested component definitions to top level - Fix array index keys with proper unique identifiers - Improve component organization and prop typing • Code Organization: - Automatic import organization and type import optimization - Fix unused function parameters and variables - Enhanced error handling with structured error responses - Improve component reusability and maintainability Results: 248 → 104 total issues (58% reduction) - Fixed all critical type safety and security issues - Enhanced accessibility compliance significantly - Improved code maintainability and performance
121 lines
2.9 KiB
TypeScript
121 lines
2.9 KiB
TypeScript
"use client";
|
|
|
|
import {
|
|
Bar,
|
|
BarChart,
|
|
CartesianGrid,
|
|
Cell,
|
|
ResponsiveContainer,
|
|
Tooltip,
|
|
XAxis,
|
|
YAxis,
|
|
} from "recharts";
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
|
|
|
interface BarChartData {
|
|
name: string;
|
|
value: number;
|
|
[key: string]: string | number;
|
|
}
|
|
|
|
interface BarChartProps {
|
|
data: BarChartData[];
|
|
title?: string;
|
|
dataKey?: string;
|
|
colors?: string[];
|
|
height?: number;
|
|
className?: string;
|
|
}
|
|
|
|
interface TooltipProps {
|
|
active?: boolean;
|
|
payload?: Array<{ value: number; name?: string }>;
|
|
label?: string;
|
|
}
|
|
|
|
const CustomTooltip = ({ active, payload, label }: TooltipProps) => {
|
|
if (active && payload && payload.length) {
|
|
return (
|
|
<div className="rounded-lg border bg-background p-3 shadow-md">
|
|
<p className="text-sm font-medium">{label}</p>
|
|
<p className="text-sm text-muted-foreground">
|
|
<span className="font-medium text-foreground">
|
|
{payload[0].value}
|
|
</span>{" "}
|
|
sessions
|
|
</p>
|
|
</div>
|
|
);
|
|
}
|
|
return null;
|
|
};
|
|
|
|
export default function ModernBarChart({
|
|
data,
|
|
title,
|
|
dataKey = "value",
|
|
colors = [
|
|
"hsl(var(--chart-1))",
|
|
"hsl(var(--chart-2))",
|
|
"hsl(var(--chart-3))",
|
|
"hsl(var(--chart-4))",
|
|
"hsl(var(--chart-5))",
|
|
],
|
|
height = 300,
|
|
className,
|
|
}: BarChartProps) {
|
|
return (
|
|
<Card className={className}>
|
|
{title && (
|
|
<CardHeader>
|
|
<CardTitle className="text-lg font-semibold">{title}</CardTitle>
|
|
</CardHeader>
|
|
)}
|
|
<CardContent>
|
|
<ResponsiveContainer width="100%" height={height}>
|
|
<BarChart
|
|
data={data}
|
|
margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
|
|
>
|
|
<CartesianGrid
|
|
strokeDasharray="3 3"
|
|
stroke="hsl(var(--border))"
|
|
strokeOpacity={0.3}
|
|
/>
|
|
<XAxis
|
|
dataKey="name"
|
|
stroke="hsl(var(--muted-foreground))"
|
|
fontSize={12}
|
|
tickLine={false}
|
|
axisLine={false}
|
|
angle={-45}
|
|
textAnchor="end"
|
|
height={80}
|
|
/>
|
|
<YAxis
|
|
stroke="hsl(var(--muted-foreground))"
|
|
fontSize={12}
|
|
tickLine={false}
|
|
axisLine={false}
|
|
/>
|
|
<Tooltip content={<CustomTooltip />} />
|
|
<Bar
|
|
dataKey={dataKey}
|
|
radius={[4, 4, 0, 0]}
|
|
className="transition-all duration-200"
|
|
>
|
|
{data.map((entry, index) => (
|
|
<Cell
|
|
key={`cell-${entry.name}-${index}`}
|
|
fill={colors[index % colors.length]}
|
|
className="hover:opacity-80"
|
|
/>
|
|
))}
|
|
</Bar>
|
|
</BarChart>
|
|
</ResponsiveContainer>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|