mirror of
https://github.com/kjanat/livedash-node.git
synced 2026-01-16 11:32:13 +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
110 lines
3.5 KiB
TypeScript
110 lines
3.5 KiB
TypeScript
import { cn } from "@/lib/utils";
|
|
|
|
interface AnimatedCircularProgressBarProps {
|
|
max: number;
|
|
value: number;
|
|
min: number;
|
|
gaugePrimaryColor: string;
|
|
gaugeSecondaryColor: string;
|
|
className?: string;
|
|
}
|
|
|
|
export function AnimatedCircularProgressBar({
|
|
max = 100,
|
|
min = 0,
|
|
value = 0,
|
|
gaugePrimaryColor,
|
|
gaugeSecondaryColor,
|
|
className,
|
|
}: AnimatedCircularProgressBarProps) {
|
|
const circumference = 2 * Math.PI * 45;
|
|
const percentPx = circumference / 100;
|
|
const currentPercent = Math.round(((value - min) / (max - min)) * 100);
|
|
|
|
return (
|
|
<div
|
|
className={cn("relative size-40 text-2xl font-semibold", className)}
|
|
style={
|
|
{
|
|
"--circle-size": "100px",
|
|
"--circumference": circumference,
|
|
"--percent-to-px": `${percentPx}px`,
|
|
"--gap-percent": "5",
|
|
"--offset-factor": "0",
|
|
"--transition-length": "1s",
|
|
"--transition-step": "200ms",
|
|
"--delay": "0s",
|
|
"--percent-to-deg": "3.6deg",
|
|
transform: "translateZ(0)",
|
|
} as React.CSSProperties
|
|
}
|
|
>
|
|
<svg
|
|
fill="none"
|
|
className="size-full"
|
|
strokeWidth="2"
|
|
viewBox="0 0 100 100"
|
|
>
|
|
<title>Circular progress indicator</title>
|
|
{currentPercent <= 90 && currentPercent >= 0 && (
|
|
<circle
|
|
cx="50"
|
|
cy="50"
|
|
r="45"
|
|
strokeWidth="10"
|
|
strokeDashoffset="0"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
className=" opacity-100"
|
|
style={
|
|
{
|
|
stroke: gaugeSecondaryColor,
|
|
"--stroke-percent": 90 - currentPercent,
|
|
"--offset-factor-secondary": "calc(1 - var(--offset-factor))",
|
|
strokeDasharray:
|
|
"calc(var(--stroke-percent) * var(--percent-to-px)) var(--circumference)",
|
|
transform:
|
|
"rotate(calc(1turn - 90deg - (var(--gap-percent) * var(--percent-to-deg) * var(--offset-factor-secondary)))) scaleY(-1)",
|
|
transition: "all var(--transition-length) ease var(--delay)",
|
|
transformOrigin:
|
|
"calc(var(--circle-size) / 2) calc(var(--circle-size) / 2)",
|
|
} as React.CSSProperties
|
|
}
|
|
/>
|
|
)}
|
|
<circle
|
|
cx="50"
|
|
cy="50"
|
|
r="45"
|
|
strokeWidth="10"
|
|
strokeDashoffset="0"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
className="opacity-100"
|
|
style={
|
|
{
|
|
stroke: gaugePrimaryColor,
|
|
"--stroke-percent": currentPercent,
|
|
strokeDasharray:
|
|
"calc(var(--stroke-percent) * var(--percent-to-px)) var(--circumference)",
|
|
transition:
|
|
"var(--transition-length) ease var(--delay),stroke var(--transition-length) ease var(--delay)",
|
|
transitionProperty: "stroke-dasharray,transform",
|
|
transform:
|
|
"rotate(calc(-90deg + var(--gap-percent) * var(--offset-factor) * var(--percent-to-deg)))",
|
|
transformOrigin:
|
|
"calc(var(--circle-size) / 2) calc(var(--circle-size) / 2)",
|
|
} as React.CSSProperties
|
|
}
|
|
/>
|
|
</svg>
|
|
<span
|
|
data-current-value={currentPercent}
|
|
className="duration-[var(--transition-length)] delay-[var(--delay)] absolute inset-0 m-auto size-fit ease-linear animate-in fade-in"
|
|
>
|
|
{currentPercent}
|
|
</span>
|
|
</div>
|
|
);
|
|
}
|