4e:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 4f:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 50:T3b26,"use client" import { ChartTooltip, ChartTooltipContent, type TooltipRoundness, type TooltipVariant, } from "@/components/evilcharts/ui/tooltip" import { type ChartConfig, ChartContainer, getColorsCount, LoadingIndicator, } from "@/components/evilcharts/ui/chart" import { ChartLegend, ChartLegendContent, type ChartLegendVariant, } from "@/components/evilcharts/ui/legend" import { useCallback, useEffect, useId, useMemo, useState, type ComponentProps, } from "react" import { LabelList, PolarAngleAxis, PolarGrid, PolarRadiusAxis, Radar, RadarChart, } from "recharts" import { ChartBackground, type BackgroundVariant, } from "@/components/evilcharts/ui/background" import type { TypedDataKey } from "recharts/types/util/typedDataKey" import { ChartDot, type DotVariant } from "@/components/evilcharts/ui/dot" // Loading animation constants const LOADING_POINTS = 6 const LOADING_ANIMATION_DURATION = 1500 // Constants const DEFAULT_FILL_OPACITY = 0.3 type ChartProps = ComponentProps type RadarProps = ComponentProps type PolarGridProps = ComponentProps type LabelListProps = ComponentProps type RadarVariant = "filled" | "lines" // Extract only keys from TData where the value is a number type NumericDataKeys = { [K in keyof T]: T[K] extends number ? K : never }[keyof T] type EvilRadarChartProps< TData extends Record, TConfig extends Record, > = { // Data data: TData[] dataKey: keyof TData & string // The key for the angle axis (e.g., "month", "category") chartConfig: TConfig className?: string chartProps?: ChartProps radarProps?: Omit polarGridProps?: PolarGridProps // Variant variant?: RadarVariant fillOpacity?: number showLabels?: boolean labelListProps?: Omit // Axes hideAngleAxis?: boolean hideRadiusAxis?: boolean hideGrid?: boolean gridType?: "polygon" | "circle" // Hide Stuffs hideTooltip?: boolean hideLegend?: boolean hideDots?: boolean legendVariant?: ChartLegendVariant // Tooltip tooltipRoundness?: TooltipRoundness tooltipVariant?: TooltipVariant tooltipDefaultIndex?: number dotVariant?: DotVariant activeDotVariant?: DotVariant // Interactive Stuffs isLoading?: boolean // Glow Effects glowingRadars?: NumericDataKeys[] // Background backgroundVariant?: BackgroundVariant } type EvilRadarChartClickable = { isClickable: true onSelectionChange?: (selectedDataKey: string | null) => void } type EvilRadarChartNotClickable = { isClickable?: false onSelectionChange?: never } type EvilRadarChartPropsWithCallback< TData extends Record, TConfig extends Record, > = EvilRadarChartProps & (EvilRadarChartClickable | EvilRadarChartNotClickable) export function EvilRadarChart< TData extends Record, TConfig extends Record, >({ data, dataKey, chartConfig, className, chartProps, radarProps, polarGridProps, variant = "filled", fillOpacity = DEFAULT_FILL_OPACITY, showLabels = false, labelListProps, hideAngleAxis = false, hideRadiusAxis = true, hideGrid = false, gridType = "polygon", hideTooltip = false, hideLegend = false, hideDots = false, legendVariant, tooltipRoundness, tooltipVariant, tooltipDefaultIndex, dotVariant, activeDotVariant, isClickable = false, isLoading = false, glowingRadars = [], onSelectionChange, backgroundVariant, }: EvilRadarChartPropsWithCallback) { const [selectedRadar, setSelectedRadar] = useState(null) const chartId = useId().replace(/:/g, "") const loadingData = useLoadingData(isLoading, dataKey) // Wrapper function to update state and call parent callback const handleSelectionChange = useCallback( (newSelectedRadar: string | null) => { setSelectedRadar(newSelectedRadar) if (isClickable && onSelectionChange) { onSelectionChange(newSelectedRadar) } }, [onSelectionChange, isClickable] ) // Get radar data keys from chartConfig const radarDataKeys = Object.keys(chartConfig) return ( {backgroundVariant && } {!hideGrid && ( )} {!hideAngleAxis && !isLoading && ( } tick={{ fill: "currentColor", fontSize: 12 }} tickLine={false} /> )} {!hideRadiusAxis && !isLoading && ( )} {!hideLegend && !isLoading && ( } /> )} {!hideTooltip && !isLoading && ( } /> )} {/* Render radars for each data key in chartConfig */} {!isLoading && radarDataKeys.map((radarKey) => { const isGlowing = glowingRadars.includes( radarKey as NumericDataKeys ) const isSelected = selectedRadar === null || selectedRadar === radarKey const opacity = isClickable && !isSelected ? 0.2 : 1 const getFilter = () => { if (isGlowing) return `url(#${chartId}-radar-glow-${radarKey})` return undefined } const showDots = !hideDots const dot = showDots ? ( dotVariant ? ( ) : ( true ) ) : ( false ) const activeDot = showDots ? ( activeDotVariant ? ( ) : undefined ) : ( false ) return ( { if (!isClickable) return handleSelectionChange( selectedRadar === radarKey ? null : radarKey ) }} className="transition-opacity duration-200" > {showLabels && ( )} ) })} {/* Loading state radar */} {isLoading && ( )} {/* ======== CHART STYLES ======== */} {/* Shared horizontal color gradient for dots */} {/* Stroke and fill gradients for each radar */} {/* Glow filters */} {glowingRadars.length > 0 && ( )} ) } // Generate random loading data for radar chart animation function generateLoadingData(dataKey: string) { const categories = ["A", "B", "C", "D", "E", "F"] return categories.slice(0, LOADING_POINTS).map((cat) => ({ [dataKey]: cat, value: 30 + Math.random() * 70, })) } function useLoadingData(isLoading: boolean, dataKey: string) { const [refreshKey, setRefreshKey] = useState(0) useEffect(() => { if (!isLoading) return const interval = setInterval(() => { setRefreshKey((prev) => prev + 1) }, LOADING_ANIMATION_DURATION) return () => clearInterval(interval) }, [isLoading]) // eslint-disable-next-line react-hooks/exhaustive-deps const loadingData = useMemo( () => generateLoadingData(dataKey), [dataKey, refreshKey] ) return loadingData } // Create stroke and fill gradients for radar chart paths const RadarGradientStyle = ({ chartConfig, chartId, }: { chartConfig: ChartConfig chartId: string }) => { return ( <> {Object.entries(chartConfig).map(([dataKey, config]) => { const colorsCount = getColorsCount(config) return ( {/* Stroke gradient */} {colorsCount === 1 ? ( <> ) : ( Array.from({ length: colorsCount }, (_, index) => ( )) )} {/* Fill gradient (radial for better effect) */} {colorsCount === 1 ? ( <> ) : ( Array.from({ length: colorsCount }, (_, index) => ( )) )} ) })} ) } // Shared horizontal color gradient (left to right) - used by dots const HorizontalColorGradientStyle = ({ chartConfig, chartId, }: { chartConfig: ChartConfig chartId: string }) => { return ( <> {Object.entries(chartConfig).map(([dataKey, config]) => { const colorsCount = getColorsCount(config) return ( {colorsCount === 1 ? ( <> ) : ( Array.from({ length: colorsCount }, (_, index) => ( )) )} ) })} ) } // Apply soft glow filter effect to radar areas using SVG filters const GlowFilterStyle = ({ chartId, glowingRadars, }: { chartId: string glowingRadars: string[] }) => { return ( <> {glowingRadars.map((radarKey) => ( ))} ) } 51:T20c5,"use client"; import * as RechartsPrimitive from "recharts"; import { cn } from "@/lib/utils"; import * as React from "react"; // Format: { THEME_NAME: CSS_SELECTOR } const THEMES = { light: "", dark: ".dark" } as const; type ThemeKey = keyof typeof THEMES; // All Keys are optional at first type ThemeColorsBase = { [K in ThemeKey]?: string[]; }; // Require at least one theme key type AtLeastOneThemeColor = { [K in ThemeKey]: Required> & Partial>; }[ThemeKey]; const VALID_THEME_KEYS = Object.keys(THEMES) as ThemeKey[]; // Validation for chart config colors at runtime function validateChartConfigColors(config: ChartConfig): void { for (const [key, value] of Object.entries(config)) { if (value.colors) { const hasValidThemeKey = VALID_THEME_KEYS.some( (themeKey) => value.colors?.[themeKey] !== undefined, ); if (!hasValidThemeKey) { throw new Error( `[EvilCharts] Invalid chart config for "${key}": colors object must have at least one theme key (${VALID_THEME_KEYS.join(", ")}). Received empty object or invalid keys.`, ); } } } } export type ChartConfig = Record< string, { label?: React.ReactNode; icon?: React.ComponentType; colors?: AtLeastOneThemeColor; } >; interface ChartContextProps { config: ChartConfig; } const ChartContext = React.createContext(null); export function useChart() { const context = React.useContext(ChartContext); if (!context) { throw new Error("useChart must be used within a "); } return context; } interface ChartContainerProps extends Omit, "children">, Pick< React.ComponentProps, | "initialDimension" | "aspect" | "debounce" | "minHeight" | "minWidth" | "maxHeight" | "height" | "width" | "onResize" | "children" > { config: ChartConfig; innerResponsiveContainerStyle?: React.ComponentProps< typeof RechartsPrimitive.ResponsiveContainer >["style"]; /** Optional content rendered below the chart (e.g. EvilBrush) */ footer?: React.ReactNode; } function ChartContainer({ id, config, initialDimension = { width: 320, height: 200 }, className, children, footer, ...props }: Readonly) { const uniqueId = React.useId(); const chartId = `chart-${id ?? uniqueId.replace(/:/g, "")}`; // Validate chart config at runtime validateChartConfigColors(config); return (

{children} {footer}

); } function LoadingIndicator({ isLoading }: { isLoading: boolean }) { if (!isLoading) { return null; } return (

); } // Distribute colors evenly across slots, extra slots go to last color(s) // Example: 2 colors for 4 slots → [red, red, pink, pink] // Example: 3 colors for 4 slots → [red, pink, blue, blue] function distributeColors(colorsArray: string[], maxCount: number): string[] { const availableCount = colorsArray.length; if (availableCount >= maxCount) { return colorsArray.slice(0, maxCount); } const result: string[] = []; const baseSlots = Math.floor(maxCount / availableCount); const extraSlots = maxCount % availableCount; // First (availableCount - extraSlots) colors get baseSlots each // Last extraSlots colors get (baseSlots + 1) each for (let colorIdx = 0; colorIdx < availableCount; colorIdx++) { const isExtraColor = colorIdx >= availableCount - extraSlots; const slotsForThisColor = baseSlots + (isExtraColor ? 1 : 0); for (let j = 0; j < slotsForThisColor; j++) { result.push(colorsArray[colorIdx]); } } return result; } const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => { const colorConfig = Object.entries(config).filter(([, config]) => config.colors); if (!colorConfig.length) { return null; } const generateCssVars = (theme: keyof typeof THEMES) => colorConfig .flatMap(([key, itemConfig]) => { const colorsArray = itemConfig.colors?.[theme]; if (!colorsArray || !Array.isArray(colorsArray) || colorsArray.length === 0) { return []; } // Get max count across all themes for this key const maxCount = getColorsCount(itemConfig); // Distribute colors evenly across all required slots const distributedColors = distributeColors(colorsArray, maxCount); return distributedColors.map((color, index) => ` --color-${key}-${index}: ${color};`); }) .filter(Boolean) .join("\n"); const css = Object.entries(THEMES) .map( ([theme, prefix]) => `${prefix} [data-chart=${id}] {\n${generateCssVars(theme as keyof typeof THEMES)}\n}`, ) .join("\n"); return