mirror of
https://github.com/supabase/supabase.git
synced 2026-06-13 01:39:53 +08:00
07699ad76b
* init * moar * moat * moar * add read replica bar * moar * Update DiskMangementPanelForm.tsx * added temp state mang to test * moar * Prepare react queries + data from API for disk mgt * moat * moat * moar * Update DiskMangementReviewAndSubmitDialog.tsx * badge updates * Hook up actual endpoints for E2E testing, but commented out for now for local dev * Hook up real data + clean up files and add tests * Update APi types * Hook up E2E and fix all validation logic * Only show new disk mgt UI for orb billing * Add note on RRs 25% more disk size * Add state to handle free plan for disk mgt * Update increase disk size CTA in reports/database * Fix file spelling errors * Address feedback * Fix missing framer motion package in ui * Address comments * Address feedabck * Minor fix * Use new disk util endpoint * Remove unused import * Address feedback * More addressing of feedback * Update pricing details for IO2 - no included disk size --------- Co-authored-by: Jonathan Summers-Muir <MildTomato@users.noreply.github.com>
59 lines
1.7 KiB
TypeScript
59 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
|