/** * Spectrum UI — Radial Chart * * Full and semi-circle radial bars for share and progress. * * Dependencies: recharts, framer-motion, @/lib/utils */ 'use client'; import * as React from 'react'; import { Cell, PolarGrid, RadialBar, RadialBarChart as RechartsRadialBarChart, ResponsiveContainer, Tooltip, } from 'recharts'; import { cn } from '@/lib/utils'; import { BROWSER_SHARE, CHART_COLORS, ChartFrame, ChartGlowFilter, ChartLegend, ChartLoadingBars, ChartPlotSurface, ChartTooltipContent, HOVER_TRANSITION, markOpacity, useChartId, useChartMotion, } from './chart-kit'; export type RadialVariant = 'full' | 'semi'; export interface SpectrumRadialChartProps { className?: string; data?: typeof BROWSER_SHARE; variant?: RadialVariant; glowing?: boolean; isLoading?: boolean; showLegend?: boolean; } export function RadialChart({ className, data = BROWSER_SHARE, variant = 'full', glowing = false, isLoading = false, showLegend = true, }: SpectrumRadialChartProps) { const id = useChartId('radial'); const { isAnimationActive, animationDuration } = useChartMotion(); const [activeName, setActiveName] = React.useState(null); const glowId = `${id}-glow`; const semi = variant === 'semi'; const rows = data.map((item, index) => ({ ...item, fill: CHART_COLORS[index % CHART_COLORS.length], })); return ( {showLegend ? ( ({ label: item.name, color: item.fill }))} /> ) : null} {isLoading ? ( ) : ( setActiveName(null)} > {glowing ? : null} } /> {rows.map((item) => ( setActiveName(item.name)} /> ))} )} ); } export function DefaultRadialChart(props: SpectrumRadialChartProps) { return ; } export function SemiRadialChart(props: SpectrumRadialChartProps) { return ; } export function GlowingRadialChart(props: SpectrumRadialChartProps) { return ; }

Radial Chart

variant='full'

Installation

variant='semi'

glowing