mirror of
https://github.com/chillpadclub/bedolaga-cabinet.git
synced 2026-07-28 17:43:47 +00:00
feat: add TrafficProgressBar and Sparkline components
TrafficProgressBar with zone tints, shimmer animation, glow dot, threshold markers, scale labels, unlimited/compact modes, and full ARIA support. Sparkline SVG component ready for daily usage data.
This commit is contained in:
Fringg
63
src/components/dashboard/Sparkline.tsx
Normal file
63
src/components/dashboard/Sparkline.tsx
Normal file
@@ -0,0 +1,63 @@
|
||||
import { useId } from 'react';
|
||||
|
||||
interface SparklineProps {
|
||||
data: number[];
|
||||
width?: number;
|
||||
height?: number;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export default function Sparkline({
|
||||
data,
|
||||
width = 120,
|
||||
height = 32,
|
||||
className = '',
|
||||
}: SparklineProps) {
|
||||
const gradientId = useId();
|
||||
|
||||
if (data.length < 2) return null;
|
||||
|
||||
const max = Math.max(...data);
|
||||
const min = Math.min(...data);
|
||||
const range = max - min || 1;
|
||||
const padding = 2;
|
||||
const innerW = width - padding * 2;
|
||||
const innerH = height - padding * 2;
|
||||
|
||||
const points = data.map((v, i) => {
|
||||
const x = padding + (i / (data.length - 1)) * innerW;
|
||||
const y = padding + innerH - ((v - min) / range) * innerH;
|
||||
return `${x},${y}`;
|
||||
});
|
||||
|
||||
const polyline = points.join(' ');
|
||||
const lastX = padding + innerW;
|
||||
const bottomY = padding + innerH;
|
||||
const areaPath = `M${points[0]} ${points.slice(1).join(' ')} L${lastX},${bottomY} L${padding},${bottomY} Z`;
|
||||
|
||||
return (
|
||||
<svg
|
||||
width={width}
|
||||
height={height}
|
||||
viewBox={`0 0 ${width} ${height}`}
|
||||
className={className}
|
||||
fill="none"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<defs>
|
||||
<linearGradient id={gradientId} x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stopColor="rgb(var(--color-accent-400))" stopOpacity="0.3" />
|
||||
<stop offset="100%" stopColor="rgb(var(--color-accent-400))" stopOpacity="0" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<path d={areaPath} fill={`url(#${gradientId})`} />
|
||||
<polyline
|
||||
points={polyline}
|
||||
stroke="rgb(var(--color-accent-400))"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
157
src/components/dashboard/TrafficProgressBar.tsx
Normal file
157
src/components/dashboard/TrafficProgressBar.tsx
Normal file
@@ -0,0 +1,157 @@
|
||||
import { useMemo } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { getTrafficZone } from '../../utils/trafficZone';
|
||||
|
||||
interface TrafficProgressBarProps {
|
||||
usedGb: number;
|
||||
limitGb: number;
|
||||
percent: number;
|
||||
isUnlimited: boolean;
|
||||
showScale?: boolean;
|
||||
showThresholds?: boolean;
|
||||
compact?: boolean;
|
||||
}
|
||||
|
||||
const THRESHOLDS = [50, 75, 90];
|
||||
|
||||
export default function TrafficProgressBar({
|
||||
limitGb,
|
||||
percent,
|
||||
isUnlimited,
|
||||
showScale = false,
|
||||
showThresholds = false,
|
||||
compact = false,
|
||||
}: TrafficProgressBarProps) {
|
||||
const { t } = useTranslation();
|
||||
const zone = useMemo(() => getTrafficZone(percent), [percent]);
|
||||
const clampedPercent = Math.min(percent, 100);
|
||||
const barHeight = compact ? 'h-2' : 'h-3';
|
||||
|
||||
if (isUnlimited) {
|
||||
return (
|
||||
<div className="relative" role="progressbar" aria-label={t('dashboard.unlimited')}>
|
||||
<div className={`${barHeight} w-full overflow-hidden rounded-full bg-dark-800`}>
|
||||
<div
|
||||
className="h-full w-full animate-unlimited-flow rounded-full"
|
||||
style={{
|
||||
background:
|
||||
'linear-gradient(90deg, rgb(var(--color-accent-400)), rgb(var(--color-accent-600)), rgb(var(--color-accent-400)))',
|
||||
backgroundSize: '200% 100%',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
{!compact && (
|
||||
<div className="absolute -right-1 top-1/2 -translate-y-1/2" aria-hidden="true">
|
||||
<div className="h-2.5 w-2.5 animate-unlimited-pulse rounded-full bg-accent-400" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
className="relative"
|
||||
role="progressbar"
|
||||
aria-valuenow={Math.round(clampedPercent)}
|
||||
aria-valuemin={0}
|
||||
aria-valuemax={100}
|
||||
aria-label={`${t('subscription.traffic')}: ${clampedPercent.toFixed(1)}%`}
|
||||
>
|
||||
{/* Track with zone tint backgrounds */}
|
||||
<div className={`relative ${barHeight} w-full overflow-hidden rounded-full bg-dark-800`}>
|
||||
{/* Zone tint backgrounds */}
|
||||
{showThresholds && (
|
||||
<>
|
||||
<div
|
||||
className="absolute inset-y-0 left-1/2 opacity-[0.06]"
|
||||
style={{
|
||||
right: '25%',
|
||||
background: 'rgb(var(--color-warning-500))',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
className="absolute inset-y-0 opacity-[0.06]"
|
||||
style={{
|
||||
left: '75%',
|
||||
right: '10%',
|
||||
background: 'rgb(var(--color-warning-600))',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
className="absolute inset-y-0 right-0 opacity-[0.06]"
|
||||
style={{
|
||||
left: '90%',
|
||||
background: 'rgb(var(--color-error-500))',
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Fill bar */}
|
||||
<div
|
||||
className="relative h-full rounded-full transition-all duration-700 ease-smooth"
|
||||
style={{
|
||||
width: `${clampedPercent}%`,
|
||||
background: `linear-gradient(90deg, ${zone.gradientFrom}, ${zone.gradientTo})`,
|
||||
}}
|
||||
>
|
||||
{/* Shimmer overlay */}
|
||||
<div className="absolute inset-0 overflow-hidden rounded-full" aria-hidden="true">
|
||||
<div
|
||||
className="absolute inset-y-0 w-1/2 animate-traffic-shimmer"
|
||||
style={{
|
||||
background:
|
||||
'linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent)',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Glow dot at fill edge */}
|
||||
{clampedPercent > 2 && !compact && (
|
||||
<div
|
||||
className="absolute top-1/2 transition-all duration-700"
|
||||
style={{ left: `${clampedPercent}%`, transform: 'translate(-50%, -50%)' }}
|
||||
aria-hidden="true"
|
||||
>
|
||||
<div
|
||||
className="h-2.5 w-2.5 rounded-full"
|
||||
style={{
|
||||
background: zone.gradientTo,
|
||||
boxShadow: `0 0 8px ${zone.glowColor}`,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Threshold marker lines */}
|
||||
{showThresholds &&
|
||||
THRESHOLDS.map((threshold) => (
|
||||
<div
|
||||
key={threshold}
|
||||
className="absolute inset-y-0 w-px bg-dark-500/40"
|
||||
style={{ left: `${threshold}%` }}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Scale labels */}
|
||||
{showScale && limitGb > 0 && (
|
||||
<div
|
||||
className="mt-1.5 flex justify-between font-mono text-2xs text-dark-500"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<span>0</span>
|
||||
<span>{(limitGb * 0.25).toFixed(0)}</span>
|
||||
<span>{(limitGb * 0.5).toFixed(0)}</span>
|
||||
<span>{(limitGb * 0.75).toFixed(0)}</span>
|
||||
<span>
|
||||
{limitGb} {t('common.units.gb')}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user