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:T3e7e,"use client" import * as React from "react" import { motion, useReducedMotion } from "motion/react" import { Bar, BarChart as RechartsBarChart, CartesianGrid, ReferenceLine, Tooltip, XAxis, YAxis, type BarShapeProps } from "recharts" import { SPRING } from "@/lib/motion" import { cn } from "@/lib/utils" import { ChartContainer, type ChartConfig } from "@/components/ui/chart" import { AnimatedNumber } from "@/components/ikas/animated-number" import { ChartBackground, ChartBackgroundDefs, ChartLegend, GlowFilter, type ChartBackgroundVariant, ChartLoading, ChartTooltipCard, compactNumberFormat, defaultNumberFormat, resolveSeries, type ChartSeries, } from "@/components/ikas/chart-kit" /** Bars never fill their slot: 24px max leaves air between categories. */ const MAX_BAR = 24 /** Rounded data-end; the baseline stays square. */ const RADIUS = 4 /** Surface gap between stacked segments and grouped bars. */ const GAP = 2 const Y_AXIS_WIDTH = 52 type BarChartVariant = "solid" | "hatched" | "duotone" | "gradient" type BarChartProps> = { data: T[] /** Category key, e.g. "month". */ index: keyof T & string /** One entry per bar series. Colors follow the categorical order. */ series: ChartSeries[] /** Fill style. Solid for most charts; the others add texture without adding color. */ variant?: BarChartVariant /** vertical = columns, horizontal = bars growing to the right (long category names). */ layout?: "vertical" | "horizontal" /** Stack series into one bar per category. */ stacked?: boolean /** hover-trace dims the other bars and draws a line at the hovered value. Default for a single series. */ highlight?: "hover-trace" | "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 /** Axis tick format. Defaults to compact (12,4 B). */ axisFormat?: (value: number) => string /** Plot height in px. */ height?: number className?: string /** Accessible summary of what the chart shows. */ "aria-label"?: string /** Expressive, opt-in: the hovered bar glows in its own color. */ glow?: boolean /** The last category is still in progress: hatched fill and "Devam ediyor" in the tooltip. */ incompleteLast?: boolean /** Expressive, opt-in: subtle texture behind the plot. */ background?: ChartBackgroundVariant } /** Path with a rounded data-end and a square baseline, the dataviz bar spec. */ function barPath(x: number, y: number, w: number, h: number, horizontal: boolean, rounded: boolean) { if (w <= 0 || h <= 0) return "" const r = rounded ? Math.min(RADIUS, horizontal ? h / 2 : w / 2, horizontal ? w : h) : 0 if (horizontal) return `M${x},${y} L${x + w - r},${y} Q${x + w},${y} ${x + w},${y + r} L${x + w},${y + h - r} Q${x + w},${y + h} ${x + w - r},${y + h} L${x},${y + h} Z` return `M${x},${y + h} L${x},${y + r} Q${x},${y} ${x + r},${y} L${x + w - r},${y} Q${x + w},${y} ${x + w},${y + r} L${x + w},${y + h} Z` } function FillDefs({ id, color, variant, horizontal }: { id: string; color: string; variant: BarChartVariant; horizontal: boolean }) { if (variant === "gradient") return ( ) if (variant === "duotone") return ( ) if (variant === "hatched") return ( ) return null } /** * recharts remounts every rectangle whenever the tooltip state changes, so a * plain mount animation would regrow all bars on each hover. The chart records * when its intro has played; remounted bars after that start in place. */ type BarHoverState = { dimmed: (index: number, seriesKey: string) => boolean glowing: (index: number, seriesKey: string) => boolean introPlayed: React.RefObject } const BarHoverContext = React.createContext({ dimmed: () => false, glowing: () => false, introPlayed: { current: false } }) type ShapeExtra = { /** Fill for this bar when it is the in-progress last category. */ incompleteFill?: string lastIndex: number glowFilter?: string seriesKey: string seriesKeys: string[] fill: string horizontal: boolean stacked: boolean animate: boolean } function BarShape(props: BarShapeProps & ShapeExtra) { const { x = 0, y = 0, width = 0, height = 0, index, payload, background, seriesKey, seriesKeys, fill, horizontal, stacked, animate, incompleteFill, lastIndex, glowFilter } = props const { dimmed, glowing, introPlayed } = React.useContext(BarHoverContext) const grow = animate && !introPlayed.current const row = payload as Record // In a stack only the outermost non-empty segment gets the rounded end. const outermost = !stacked || [...seriesKeys].reverse().find((k) => Number(row?.[k] ?? 0) > 0) === seriesKey const bx = Number(x) let by = Number(y) let bw = Number(width) let bh = Number(height) if (stacked && !outermost) { if (horizontal) bw -= GAP else { by += GAP bh -= GAP } } const baseline = horizontal ? Number(background?.x ?? bx) : Number(background?.y ?? 0) + Number(background?.height ?? 0) return ( ) } /** The line and value pill that follow the hovered bar. */ function TraceLine({ x1 = 0, y1 = 0, x2 = 0, y2 = 0, value, horizontal, format }: { x1?: number; y1?: number; x2?: number; y2?: number; value: number; horizontal: boolean; format: (v: number) => string }) { const reduce = useReducedMotion() const transition = reduce ? { duration: 0 } : SPRING if (horizontal) return (

) return (

) } /** Placeholder columns under a shimmer while data loads. */ function BarChartSkeleton({ height, horizontal }: { height: number; horizontal: boolean }) { const lengths = [42, 68, 55, 80, 62, 90, 48, 74, 58, 84, 66, 52] return (

{(horizontal ? lengths.slice(0, 6) : lengths).map((l, i) => ( ))}

) } /** * Column and bar chart. Bars grow from the baseline on mount with a short * stagger; hovering traces the value with a line and an animated pill. */ function BarChart>({ data, index, series: seriesProp, variant = "solid", layout = "vertical", stacked = false, highlight, loading = false, valueFormat = defaultNumberFormat, axisFormat = compactNumberFormat, height = 280, className, "aria-label": ariaLabel, glow = false, incompleteLast = false, background = "none", }: BarChartProps) { const id = React.useId().replace(/:/g, "") const reduce = useReducedMotion() const series = resolveSeries(seriesProp) const horizontal = layout === "horizontal" const trace = (highlight ?? (series.length === 1 ? "hover-trace" : "none")) === "hover-trace" const [activeIndex, setActiveIndex] = React.useState(null) const [activeSeries, setActiveSeries] = React.useState(null) const seriesKeys = series.map((s) => s.key) const config = Object.fromEntries(series.map((s) => [s.key, { label: s.label, color: s.color }])) satisfies ChartConfig const lastIndex = data.length - 1 const introPlayed = React.useRef(false) React.useEffect(() => { // Longest stagger plus the spring settling; after this bars never regrow. const done = window.setTimeout(() => (introPlayed.current = true), data.length * 35 + 700) return () => window.clearTimeout(done) }, [data.length]) if (loading) return (

) const tracedValue = trace && activeIndex != null && data[activeIndex] ? stacked ? seriesKeys.reduce((sum, k) => sum + Number(data[activeIndex][k] ?? 0), 0) : Number(data[activeIndex][series[0].key] ?? 0) : null const glowing = (i: number, key: string) => activeIndex === i && (activeSeries == null || activeSeries === key) const dimmed = (i: number, key: string) => (activeSeries != null && activeSeries !== key) || (trace && activeIndex != null && activeIndex !== i) const categoryAxis = { dataKey: index as string, type: "category" as const, tickLine: false, axisLine: false, tickMargin: 8, interval: "preserveStartEnd" as const, } const valueAxis = { type: "number" as const, tickLine: false, axisLine: false, tickMargin: 4, tickFormatter: (v: number) => axisFormat(v), } return (

{series.length > 1 && } []} layout={horizontal ? "vertical" : "horizontal"} margin={{ top: 8, right: 8, bottom: 0, left: 0 }} barCategoryGap={horizontal ? "28%" : "22%"} barGap={GAP} onMouseMove={(state) => { const i = state?.activeTooltipIndex setActiveIndex(i == null ? null : Number(i)) }} onMouseLeave={() => setActiveIndex(null)} > {series.map((s) => ( ))} {incompleteLast && series.map((s) => )} {glow && } {background !== "none" && } {background !== "none" && } {horizontal ? ( <> ) : ( <> )} active && payload?.length ? ( activeSeries == null || s.key === activeSeries) .map((s) => ({ key: s.key, label: s.label, color: s.color, value: payload.find((p) => p.dataKey === s.key)?.value as number | undefined }))} /> ) : null } /> {series.map((s) => ( ( )} /> ))} {tracedValue != null && ( ( )} /> )}

) } export { BarChart, type BarChartProps, type BarChartVariant } 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/animated-number","@ikas/chart","@ikas/chart-kit","@ikas/motion","@ikas/utils"]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"registry/ikas/bar-chart.tsx","content":"$50","type":"registry:component","target":"@components/ikas/bar-chart.tsx"}],"className":"h-[70svh] min-h-80"}]]}]