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:T2aec,"use client" import * as React from "react" import { motion, useReducedMotion } from "motion/react" import { usePlotArea } from "recharts" import { EASE_OUT } from "@/lib/motion" import { cn } from "@/lib/utils" /** * Shared building blocks for the ikas charts (AreaChart, BarChart, DonutChart…). * Charts compose these instead of re-implementing fills, reveals and legends, * so every chart moves and reads the same way. */ /** Categorical slots in fixed order. Never cycle: a 7th series folds into "Diğer". */ const CHART_COLORS = ["var(--chart-1)", "var(--chart-2)", "var(--chart-3)", "var(--chart-4)", "var(--chart-5)", "var(--chart-6)"] as const type ChartSeries = { /** Data key in each row. */ key: string /** Legend and tooltip label. */ label: string /** Override the slot color. Single-series charts default to --chart-ink. */ color?: string /** Opt-in. dashed for targets, animated-dashed for live or estimated values. */ strokeStyle?: ChartStrokeStyle } type ChartStrokeStyle = "solid" | "dashed" | "animated-dashed" /** strokeDasharray for a stroke style. */ function strokeDash(style: ChartStrokeStyle | undefined) { return style === "dashed" || style === "animated-dashed" ? "5 4" : undefined } /** * Keyframes for animated-dashed strokes, scoped to the chart. Rendered once per * chart that needs it; reduced motion keeps the dashes still. */ function ChartMotionStyles() { return ( ) } /** * Soft outer glow in the element's own color: a blurred copy at half strength * merged under the original. Opt-in only; one glowing element per screen. */ function GlowFilter({ id, blur = 4, strength = 0.5 }: { id: string; blur?: number; strength?: number }) { return ( ) } type ChartBackgroundVariant = "none" | "dots" | "grid" | "diagonal" /** Subtle plot-area texture in the border color. Pair with . */ function ChartBackgroundDefs({ id, variant }: { id: string; variant: ChartBackgroundVariant }) { if (variant === "dots") return ( ) if (variant === "grid") return ( ) if (variant === "diagonal") return ( ) return null } /** Fills the plot area with a background pattern. Render it inside a recharts chart. */ function ChartBackground({ id, variant }: { id: string; variant: ChartBackgroundVariant }) { const plot = usePlotArea() if (variant === "none" || !plot) return null return } /** Resolves each series to a color: explicit, ink for a lone series, else its slot. */ function resolveSeries(series: T[]): (T & { color: string })[] { return series.map((s, i) => ({ ...s, color: s.color ?? (series.length === 1 ? "var(--chart-ink)" : CHART_COLORS[i % CHART_COLORS.length]) })) } type ChartFillVariant = "gradient" | "solid" | "hatched" | "dotted" | "none" /** * SVG for one series' fill. Reference it with `fill={chartFill(id, color, variant)}`. * Washes stay light (≈10–25%) so the data line, not the fill, carries the value. */ function ChartFillDefs({ id, color, variant }: { id: string; color: string; variant: ChartFillVariant }) { if (variant === "gradient") return ( ) if (variant === "hatched") return ( ) if (variant === "dotted") return ( ) return null } function chartFill(id: string, color: string, variant: ChartFillVariant) { if (variant === "none") return "transparent" if (variant === "solid") return color return `url(#${id})` } type RevealDirection = "left-to-right" | "right-to-left" | "center-out" /** * A mask that wipes a series in once, on mount. Apply it with * `style={{ mask: `url(#${id})` }}` on the line, fill and dots together so they * reveal in lockstep. Reduced motion shows everything immediately. */ function RevealMask({ id, direction = "left-to-right", duration = 0.9 }: { id: string; direction?: RevealDirection; duration?: number }) { const reduce = useReducedMotion() const originX = direction === "left-to-right" ? 0 : direction === "right-to-left" ? 1 : 0.5 return ( ) } /** A diagonal shimmer that sweeps over a placeholder while a chart loads. */ function ChartLoading({ className, children }: { className?: string; children?: React.ReactNode }) { return (

{children}

) } /** * Legend with selectable entries. Clicking an entry focuses that series (others * dim); clicking it again clears the focus. Text uses text tokens, the swatch * carries the color. */ function ChartLegend({ series, active, onActiveChange, className, }: { series: { key: string; label: string; color: string }[] /** Key of the focused series. Others dim. */ active?: string | null onActiveChange?: (key: string | null) => void className?: string }) { const interactive = Boolean(onActiveChange) return (

{series.map((s) => { const dimmed = active != null && active !== s.key const content = ( <> {s.label} ) return interactive ? ( ) : ( {content} ) })}

) } type TooltipRow = { key: string; label: string; color: string; value: number | null | undefined } /** Tooltip surface shared by all charts. Values are right-aligned and tabular. */ function ChartTooltipCard({ title, rows, format, note, }: { title?: React.ReactNode rows: TooltipRow[] /** Formats each row's value. */ format: (value: number) => string /** Short qualifier next to the title, e.g. "Tahmini" or "Devam ediyor". */ note?: React.ReactNode }) { return (

{(title != null || note != null) && ( {title != null && {title}} {note != null && {note}} )} {rows.map((row) => (

{row.label} {row.value == null ? "—" : format(row.value)}

))}

) } const defaultNumberFormat = (value: number) => new Intl.NumberFormat("tr-TR").format(value) const compactNumberFormat = (value: number) => new Intl.NumberFormat("tr-TR", { notation: "compact", maximumFractionDigits: 1 }).format(value) export { CHART_COLORS, ChartBackground, ChartBackgroundDefs, ChartMotionStyles, GlowFilter, strokeDash, type ChartBackgroundVariant, type ChartStrokeStyle, ChartFillDefs, ChartLegend, ChartLoading, ChartTooltipCard, RevealMask, chartFill, compactNumberFormat, defaultNumberFormat, resolveSeries, type ChartFillVariant, type ChartSeries, type RevealDirection, type TooltipRow, } 4d:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"motion"}]]}]}],["$","li","recharts",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/recharts","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"recharts"}]]}]}]]}],["$","$L4e",null,{"namespace":"@ikas","registryDependencies":["@ikas/motion","@ikas/utils"]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"registry/ikas/chart-kit.tsx","content":"$50","type":"registry:component","target":"@components/ikas/chart-kit.tsx"}],"className":"h-[70svh] min-h-80"}]]}]