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:T3082,"use client" import * as React from "react" import { useReducedMotion } from "motion/react" import { Area, AreaChart as RechartsAreaChart, CartesianGrid, Tooltip, XAxis, YAxis } from "recharts" import { cn } from "@/lib/utils" import { ChartContainer, type ChartConfig } from "@/components/ui/chart" import { ChartBackground, ChartBackgroundDefs, ChartFillDefs, ChartMotionStyles, GlowFilter, strokeDash, type ChartBackgroundVariant, ChartLegend, ChartLoading, ChartTooltipCard, RevealMask, chartFill, compactNumberFormat, defaultNumberFormat, resolveSeries, type ChartSeries, type RevealDirection, } from "@/components/ikas/chart-kit" type AreaChartVariant = "gradient" | "solid" | "hatched" | "dotted" | "line" type AreaChartProps> = { /** Rows, in x order. */ data: T[] /** Key of the x value in each row (date, month…). */ index: keyof T & string /** One entry per area. Colors follow the categorical order; a lone series is ink. */ series: ChartSeries[] /** Fill style. `line` draws the stroke only. */ variant?: AreaChartVariant /** Line interpolation between points. */ curve?: "monotone" | "linear" | "step" | "bump" /** Stack series on top of each other (parts of a whole over time). */ stacked?: boolean /** Intro wipe. Plays once on mount; skipped with reduced motion. */ reveal?: RevealDirection | "none" /** Shows a shimmering placeholder instead of the data. */ loading?: boolean /** Formats values in the tooltip. Defaults to tr-TR numbers. */ valueFormat?: (value: number) => string /** Formats y-axis ticks. Defaults to compact tr-TR (12,4 B). */ yFormat?: (value: number) => string /** Formats x-axis ticks and the tooltip title. */ xFormat?: (value: string) => string /** Plot height in px. */ height?: number /** Legend is shown automatically for 2+ series. */ showLegend?: boolean /** Accessible summary of what the chart shows. */ "aria-label"?: string className?: string /** Expressive, opt-in: soft glow under the lines. */ glow?: boolean /** Expressive, opt-in: subtle texture behind the plot. */ background?: ChartBackgroundVariant /** Draw the last N points as an estimate: dashed line, lighter wash, "Tahmini" in the tooltip. */ projectedLast?: number /** Animate data changes (live data). Off by default; the reveal handles the first paint. */ animateUpdates?: boolean } const PROJECTED = "__projected" /** Active point: filled dot with a surface ring, plus a soft pulse around it. */ function ActiveDot({ cx, cy, color }: { cx?: number; cy?: number; color: string }) { if (cx == null || cy == null) return null return ( ) } /** Muted wave drawn while loading. Static shape; the shimmer does the moving. */ function LoadingWave({ height }: { height: number }) { const points = Array.from({ length: 25 }, (_, i) => { const x = (i / 24) * 400 const y = 58 - Math.sin(i / 3.2) * 16 - Math.sin(i / 1.7) * 6 - i * 0.9 return `${x.toFixed(1)},${y.toFixed(1)}` }) const line = `M${points.join(" L")}` return ( ) } /** * Change over time for one to six series. Thin 2px lines over a light wash, * horizontal hairline grid, one y-axis, crosshair tooltip. Series reveal from * left to right on mount and can be focused from the legend. */ function AreaChart>({ data, index, series, variant = "gradient", curve = "monotone", stacked = false, reveal = "left-to-right", loading = false, valueFormat = defaultNumberFormat, yFormat = compactNumberFormat, xFormat, height = 240, showLegend, "aria-label": ariaLabel, className, glow = false, background = "none", projectedLast = 0, animateUpdates = false, }: AreaChartProps) { const id = React.useId().replace(/:/g, "") const reduceMotion = useReducedMotion() const resolved = resolveSeries(series) const [active, setActive] = React.useState(null) const legend = showLegend ?? resolved.length > 1 const maskId = reveal === "none" || reduceMotion ? undefined : `${id}-reveal` const config = Object.fromEntries(resolved.map((s) => [s.key, { label: s.label, color: s.color }])) satisfies ChartConfig const animate = animateUpdates && !reduceMotion const flows = resolved.some((s) => s.strokeStyle === "animated-dashed") // Projection: the split point belongs to both halves so the dashed tail joins the solid line. const split = projectedLast > 0 ? Math.max(0, data.length - 1 - projectedLast) : -1 const rows: Record[] = split < 0 ? data : data.map((row, i) => { const next: Record = { ...row } for (const s of resolved) { next[`${s.key}${PROJECTED}`] = i >= split ? row[s.key] : null if (i > split) next[s.key] = null } return next }) return (

{flows && } {legend && } {loading ? ( ) : ( {glow && } {background !== "none" && } {maskId && } {resolved.map((s) => ( ))} {background !== "none" && } xFormat(String(value)) : undefined} /> yFormat(Number(value))} /> { if (!open || !payload?.length) return null const row = payload[0]?.payload as Record | undefined const at = rows.indexOf(row as Record) const estimated = split >= 0 && at > split return ( ({ key: s.key, label: s.label, color: s.color, value: (row?.[s.key] ?? row?.[`${s.key}${PROJECTED}`]) as number | null | undefined, }))} /> ) }} /> {resolved.map((s) => { const dimmed = active != null && active !== s.key const fillVariant = variant === "line" ? "none" : variant === "solid" ? "solid" : variant const fillOpacity = variant === "solid" ? (dimmed ? 0.04 : 0.14) : variant === "gradient" ? (dimmed ? 0.15 : 0.65) : dimmed ? 0.25 : 1 const masked = maskId ? { mask: `url(#${maskId})` } : {} const transition = { transition: "stroke-opacity 150ms var(--ease-out), fill-opacity 150ms var(--ease-out)" } return ( {glow && !dimmed && ( )} } isAnimationActive={animate} animationDuration={600} animationEasing="ease-out" style={{ ...transition, ...masked }} /> {split >= 0 && ( } tooltipType="none" legendType="none" isAnimationActive={false} style={{ ...transition, ...masked }} /> )} ) })} )}

) } export { AreaChart, type AreaChartProps, type AreaChartVariant } 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/chart","@ikas/chart-kit","@ikas/utils"]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"registry/ikas/area-chart.tsx","content":"$50","type":"registry:component","target":"@components/ikas/area-chart.tsx"}],"className":"h-[70svh] min-h-80"}]]}]