mirror of
https://github.com/ruvnet/RuVector.git
synced 2026-05-29 19:33:34 +00:00
814f595995
Major additions: - Complete Next.js studio application with 1600+ components - Docker support (Dockerfile.combined, docker-compose.yml) - GCP deployment documentation and benchmarks - SQL benchmark scripts for performance testing - Sentry integration for monitoring - Comprehensive test suite and mocks Studio features: - Dashboard and admin interfaces - Data visualization components - Authentication and user management - API integration with RuVector backend - Static data and public assets 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
58 lines
1.7 KiB
TypeScript
58 lines
1.7 KiB
TypeScript
import { PolarGrid, RadialBar, RadialBarChart } from 'recharts'
|
|
import { ChartConfig, ChartContainer } from 'ui'
|
|
|
|
interface CountdownTimerRadialProps {
|
|
progress: number
|
|
}
|
|
|
|
const chartConfig = {
|
|
timeRemaining: {
|
|
label: 'timeRemaining',
|
|
color: 'hsl(var(--warning-default))',
|
|
},
|
|
hand: {
|
|
label: 'hand',
|
|
color: 'hsl(var(--warning-default))',
|
|
},
|
|
} satisfies ChartConfig
|
|
|
|
const CountdownTimerRadial = ({ progress }: CountdownTimerRadialProps) => {
|
|
return (
|
|
<div className="relative w-12 h-12">
|
|
{/* timer ring */}
|
|
<ChartContainer config={chartConfig} className="absolute w-12 h-12">
|
|
<RadialBarChart
|
|
data={[{ timeRemaining: 100, fill: 'var(--color-timeRemaining)' }]}
|
|
startAngle={90}
|
|
endAngle={90 - (progress * 360) / 100}
|
|
innerRadius={21}
|
|
outerRadius={14}
|
|
>
|
|
<PolarGrid
|
|
gridType="circle"
|
|
radialLines={false}
|
|
stroke="none"
|
|
className="first:fill-foreground-muted/50 last:fill-background-200"
|
|
polarRadius={[16, 11]}
|
|
/>
|
|
<RadialBar dataKey="timeRemaining" cornerRadius={2} />
|
|
</RadialBarChart>
|
|
</ChartContainer>
|
|
|
|
<ChartContainer config={chartConfig} className="absolute top-1 left-1 w-10 h-10">
|
|
<RadialBarChart
|
|
data={[{ hand: 100, fill: 'var(--color-hand)' }]}
|
|
// Adjust the angles to create a small hand
|
|
startAngle={80 - (progress * 360) / 100}
|
|
endAngle={140 - (progress * 360) / 100}
|
|
innerRadius={14}
|
|
outerRadius={5}
|
|
>
|
|
<RadialBar dataKey="hand" cornerRadius={2} isAnimationActive={true} />
|
|
</RadialBarChart>
|
|
</ChartContainer>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default CountdownTimerRadial
|