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:T58a9,"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 type { SankeyProps, SankeyNodeProps, SankeyLinkProps, SankeyData, SankeyNode, } from "recharts"; import { ChartBackground, type BackgroundVariant } from "@/components/evilcharts/ui/background"; import { useCallback, useId, useState, type ReactNode } from "react"; import { Sankey, Layer } from "recharts"; import { motion } from "motion/react"; // Loading animation constants const LOADING_ANIMATION_DURATION = 2000; // Full cycle duration in ms // Constants const DEFAULT_NODE_WIDTH = 10; const DEFAULT_NODE_PADDING = 10; const DEFAULT_LINK_CURVATURE = 0.5; const DEFAULT_ITERATIONS = 32; type LinkVariant = "gradient" | "solid" | "source" | "target"; // Node label position type type NodeLabelPosition = "inside" | "outside" | "none"; type EvilSankeyChartProps = { // Data data: SankeyData; chartConfig: ChartConfig; className?: string; sankeyProps?: Omit; // Layout nodeWidth?: number; nodePadding?: number; linkCurvature?: number; iterations?: number; sort?: boolean; align?: "left" | "justify"; verticalAlign?: "justify" | "top"; // Styling linkVariant?: LinkVariant; nodeRadius?: number; linkVerticalPadding?: number; // Node Labels showNodeLabels?: NodeLabelPosition; showNodeValues?: boolean; nodeValueFormatter?: (value: number) => string; // Hide Stuffs hideTooltip?: boolean; // Tooltip tooltipRoundness?: TooltipRoundness; tooltipVariant?: TooltipVariant; tooltipDefaultIndex?: number; // Interactive Stuffs isLoading?: boolean; // Glow Effects glowingNodes?: string[]; glowingLinks?: number[]; // Background backgroundVariant?: BackgroundVariant; }; type EvilSankeyChartClickable = { isClickable: true; onSelectionChange?: (selection: { dataKey: string; value: number } | null) => void; }; type EvilSankeyChartNotClickable = { isClickable?: false; onSelectionChange?: never; }; type EvilSankeyChartPropsWithCallback = EvilSankeyChartProps & (EvilSankeyChartClickable | EvilSankeyChartNotClickable); export function EvilSankeyChart({ data, chartConfig, className, sankeyProps, nodeWidth = DEFAULT_NODE_WIDTH, nodePadding = DEFAULT_NODE_PADDING, linkCurvature = DEFAULT_LINK_CURVATURE, iterations = DEFAULT_ITERATIONS, sort = true, align = "justify", verticalAlign = "justify", linkVariant = "gradient", nodeRadius = 0, linkVerticalPadding = 0, showNodeLabels = "none", showNodeValues = false, nodeValueFormatter = (value: number) => value.toLocaleString(), hideTooltip = false, tooltipRoundness, tooltipVariant, tooltipDefaultIndex, isClickable = false, isLoading = false, glowingNodes = [], glowingLinks = [], onSelectionChange, backgroundVariant, }: EvilSankeyChartPropsWithCallback) { const [selectedNode, setSelectedNode] = useState(null); const chartId = useId().replace(/:/g, ""); // Handler to update selection and call callback const handleNodeClick = useCallback( (nodeName: string | null) => { setSelectedNode(nodeName); if (isClickable && onSelectionChange) { if (nodeName === null) { onSelectionChange(null); } else { // Calculate node value: sum of all outgoing links (or incoming if no outgoing) const nodeIndex = data.nodes.findIndex((node) => node.name === nodeName); if (nodeIndex !== -1) { // Sum of outgoing links const outgoingValue = data.links .filter((link) => link.source === nodeIndex) .reduce((sum, link) => sum + link.value, 0); // Sum of incoming links (if no outgoing) const incomingValue = data.links .filter((link) => link.target === nodeIndex) .reduce((sum, link) => sum + link.value, 0); // Use outgoing value if available, otherwise incoming const value = outgoingValue > 0 ? outgoingValue : incomingValue; onSelectionChange({ dataKey: nodeName, value }); } } } }, [isClickable, onSelectionChange, data], ); return ( {backgroundVariant && } {!isLoading && ( ( { if (!isClickable) return; handleNodeClick(selectedNode === name ? null : name); }} /> )} link={(props: SankeyLinkProps) => ( )} {...sankeyProps} > {!hideTooltip && ( } /> )} {/* ======== CHART STYLES ======== */} {/* Color gradients for nodes */} {/* Glow filters for nodes */} {glowingNodes.length > 0 && ( )} {/* Glow filters for links */} {glowingLinks.length > 0 && ( )} )} {/* Loading state */} {isLoading && ( )} ); } // Custom node component with labels, icons, and glow effects type CustomNodeProps = SankeyNodeProps & { chartId: string; chartConfig: ChartConfig; data: SankeyData; selectedNode: string | null; isClickable: boolean; nodeRadius: number; showNodeLabels: NodeLabelPosition; showNodeValues: boolean; nodeValueFormatter: (value: number) => string; glowingNodes: string[]; onNodeClick: (name: string) => void; }; const CustomNode = ({ x, y, width, height, payload, chartId, chartConfig, data, selectedNode, isClickable, nodeRadius, showNodeLabels, showNodeValues, nodeValueFormatter, glowingNodes, onNodeClick, }: CustomNodeProps) => { const nodeName = payload.name; const nodeValue = payload.value; const nodeIcon = (payload as SankeyNode & { icon?: ReactNode }).icon; // Check if this node is the selected one, or connected to the selected one via a link const isConnectedToSelected = (() => { if (selectedNode === null) return true; if (selectedNode === nodeName) return true; const selectedIdx = data.nodes.findIndex((n) => n.name === selectedNode); const thisIdx = data.nodes.findIndex((n) => n.name === nodeName); return data.links.some( (link) => (link.source === selectedIdx && link.target === thisIdx) || (link.source === thisIdx && link.target === selectedIdx), ); })(); const isSelected = isConnectedToSelected; const isGlowing = glowingNodes.includes(nodeName); const hasConfigColor = nodeName in chartConfig; const configLabel = chartConfig[nodeName]?.label ?? nodeName; const getFilter = () => { if (isGlowing) return `url(#${chartId}-node-glow-${nodeName})`; return undefined; }; // Calculate positions for inside labels const labelX = x + width / 2; const labelY = showNodeValues ? y + height / 2 - 8 : y + height / 2; const valueY = y + height / 2 + 8; // Calculate positions for outside labels (to the right of the node) const outsideLabelX = x + width + 8; const outsideLabelY = y + height / 2; return ( {/* Main node rectangle - using native rect for proper rx/ry support */} onNodeClick(nodeName)} /> {/* Inside labels */} {showNodeLabels === "inside" && ( <> {/* Background overlay for label readability */} {/* Icon if provided */} {nodeIcon && (

{nodeIcon}

)} {/* Label text */} {configLabel} {/* Value text */} {showNodeValues && ( {nodeValueFormatter(nodeValue)} )} )} {/* Outside labels (to the side of nodes) */} {showNodeLabels === "outside" && ( <> {configLabel} {showNodeValues && ( {nodeValueFormatter(nodeValue)} )} )} ); }; // Custom link component with gradient variants and connection highlighting type CustomLinkProps = SankeyLinkProps & { chartId: string; chartConfig: ChartConfig; selectedNode: string | null; linkVariant: LinkVariant; linkVerticalPadding: number; glowingLinks: number[]; }; const CustomLink = ({ sourceX, targetX, sourceY, targetY, sourceControlX, targetControlX, linkWidth, index, payload, chartId, chartConfig, selectedNode, linkVariant, linkVerticalPadding, glowingLinks, }: CustomLinkProps) => { const sourceName = payload.source.name; const targetName = payload.target.name; // Check if either source or target is selected const isConnected = selectedNode === null || selectedNode === sourceName || selectedNode === targetName; const isGlowing = glowingLinks.includes(index); const getFilter = () => { if (isGlowing) return `url(#${chartId}-link-glow-${index})`; return undefined; }; // Calculate link fill based on variant const getLinkFill = () => { const hasSourceColor = sourceName in chartConfig; const hasTargetColor = targetName in chartConfig; switch (linkVariant) { case "gradient": // Create a unique gradient for this link return `url(#${chartId}-link-gradient-${index})`; case "source": return hasSourceColor ? `url(#${chartId}-sankey-colors-${sourceName})` : "currentColor"; case "target": return hasTargetColor ? `url(#${chartId}-sankey-colors-${targetName})` : "currentColor"; case "solid": default: return "currentColor"; } }; // Apply vertical padding to the link width (reduces stroke width to create padding effect) const paddedLinkWidth = Math.max(1, linkWidth - linkVerticalPadding); const halfWidth = paddedLinkWidth / 2; // Build a closed area path for the link band (top edge forward, bottom edge backward) const linkAreaPath = `M${sourceX},${sourceY - halfWidth} C${sourceControlX},${sourceY - halfWidth} ${targetControlX},${targetY - halfWidth} ${targetX},${targetY - halfWidth} L${targetX},${targetY + halfWidth} C${targetControlX},${targetY + halfWidth} ${sourceControlX},${sourceY + halfWidth} ${sourceX},${sourceY + halfWidth} Z`; return ( {/* Define gradient for this specific link if using gradient variant */} {/* Gradient fill for links */} {linkVariant === "gradient" && ( )} ); }; // Animated skeleton loading state with nodes and links const LoadingSankey = () => { // Full-width loading skeleton with 3 columns of nodes (with padding from edges) const nodes = [ // Column 1 (left side with padding) { x: 30, y: 25, width: 12, height: 65, delay: 0 }, { x: 30, y: 110, width: 12, height: 50, delay: 0.3 }, { x: 30, y: 180, width: 12, height: 45, delay: 0.15 }, // Column 2 (center) { x: 244, y: 20, width: 12, height: 55, delay: 0.45 }, { x: 244, y: 95, width: 12, height: 75, delay: 0.6 }, { x: 244, y: 190, width: 12, height: 40, delay: 0.25 }, // Column 3 (right side with padding) { x: 458, y: 35, width: 12, height: 80, delay: 0.5 }, { x: 458, y: 135, width: 12, height: 90, delay: 0.1 }, ]; // Links with unique delays for varied animation timing const links = [ // Column 1 -> Column 2 { from: 0, to: 3, width: 26, delay: 0.2 }, { from: 0, to: 4, width: 18, delay: 0.7 }, { from: 1, to: 4, width: 24, delay: 0.4 }, { from: 1, to: 5, width: 12, delay: 0.9 }, { from: 2, to: 4, width: 16, delay: 0.1 }, { from: 2, to: 5, width: 14, delay: 0.55 }, // Column 2 -> Column 3 { from: 3, to: 6, width: 22, delay: 0.35 }, { from: 3, to: 7, width: 18, delay: 0.8 }, { from: 4, to: 6, width: 28, delay: 0.05 }, { from: 4, to: 7, width: 32, delay: 0.65 }, { from: 5, to: 7, width: 16, delay: 0.45 }, ]; // Generate bezier path between two nodes const getLinkPath = (fromIdx: number, toIdx: number) => { const from = nodes[fromIdx]; const to = nodes[toIdx]; const startX = from.x + from.width; const startY = from.y + from.height / 2; const endX = to.x; const endY = to.y + to.height / 2; const controlX1 = startX + (endX - startX) * 0.4; const controlX2 = startX + (endX - startX) * 0.6; return `M${startX},${startY} C${controlX1},${startY} ${controlX2},${endY} ${endX},${endY}`; }; const baseDuration = LOADING_ANIMATION_DURATION / 1000; return ( <> {/* Loading links */} {links.map((link, i) => ( ))} {/* Loading nodes */} {nodes.map((node, i) => ( ))} ); }; // Create vertical color gradient for sankey nodes const NodeColorGradientStyle = ({ 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 nodes or links using SVG filters const GlowFilterStyle = ({ chartId, glowingNodes, type, }: { chartId: string; glowingNodes: string[]; type: "node" | "link"; }) => { return ( <> {glowingNodes.map((nodeName) => ( ))} ); }; 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