{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "chart-kit", "title": "Chart Kit", "description": "Shared chart parts: colors, fills, legend, tooltip, loading and reveal used by ikas charts.", "dependencies": [ "motion", "recharts" ], "registryDependencies": [ "@ikas/motion", "@ikas/skeleton", "@ikas/theme", "@ikas/utils" ], "files": [ { "path": "registry/ikas/chart-kit.tsx", "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { motion, useReducedMotion } from \"motion/react\"\nimport { usePlotArea } from \"recharts\"\n\nimport { useSkeletonVariant } from \"@/components/ui/skeleton\"\nimport { EASE_OUT } from \"@/lib/motion\"\nimport { cn } from \"@/lib/utils\"\n\n/**\n * Shared building blocks for the ikas charts (AreaChart, BarChart, DonutChart…).\n * Charts compose these instead of re-implementing fills, reveals and legends,\n * so every chart moves and reads the same way.\n */\n\n/** Categorical slots in fixed order. Never cycle: a 7th series folds into \"Diğer\". */\nconst CHART_COLORS = [\"var(--chart-1)\", \"var(--chart-2)\", \"var(--chart-3)\", \"var(--chart-4)\", \"var(--chart-5)\", \"var(--chart-6)\"] as const\n\ntype ChartSeries = {\n /** Data key in each row. */\n key: string\n /** Legend and tooltip label. */\n label: string\n /** Override the slot color. Single-series charts default to --chart-ink. */\n color?: string\n /** Opt-in. dashed for targets, animated-dashed for live or estimated values. */\n strokeStyle?: ChartStrokeStyle\n}\n\ntype ChartStrokeStyle = \"solid\" | \"dashed\" | \"animated-dashed\"\n\n/** strokeDasharray for a stroke style. */\nfunction strokeDash(style: ChartStrokeStyle | undefined) {\n return style === \"dashed\" || style === \"animated-dashed\" ? \"5 4\" : undefined\n}\n\n/**\n * Keyframes for animated-dashed strokes, scoped to the chart. Rendered once per\n * chart that needs it; reduced motion keeps the dashes still.\n */\nfunction ChartMotionStyles() {\n return (\n \n )\n}\n\n/**\n * Soft outer glow in the element's own color: a blurred copy at half strength\n * merged under the original. Opt-in only; one glowing element per screen.\n */\nfunction GlowFilter({ id, blur = 4, strength = 0.5 }: { id: string; blur?: number; strength?: number }) {\n return (\n \n \n \n \n \n \n \n \n \n \n )\n}\n\ntype ChartBackgroundVariant = \"none\" | \"dots\" | \"grid\" | \"diagonal\"\n\n/** Subtle plot-area texture in the border color. Pair with . */\nfunction ChartBackgroundDefs({ id, variant }: { id: string; variant: ChartBackgroundVariant }) {\n if (variant === \"dots\")\n return (\n \n \n \n )\n if (variant === \"grid\")\n return (\n \n \n \n )\n if (variant === \"diagonal\")\n return (\n \n \n \n )\n return null\n}\n\n/** Fills the plot area with a background pattern. Render it inside a recharts chart. */\nfunction ChartBackground({ id, variant }: { id: string; variant: ChartBackgroundVariant }) {\n const plot = usePlotArea()\n if (variant === \"none\" || !plot) return null\n return \n}\n\n/** Resolves each series to a color: explicit, ink for a lone series, else its slot. */\nfunction resolveSeries(series: T[]): (T & { color: string })[] {\n return series.map((s, i) => ({ ...s, color: s.color ?? (series.length === 1 ? \"var(--chart-ink)\" : CHART_COLORS[i % CHART_COLORS.length]) }))\n}\n\ntype ChartFillVariant = \"gradient\" | \"solid\" | \"hatched\" | \"dotted\" | \"none\"\n\n/**\n * SVG for one series' fill. Reference it with `fill={chartFill(id, color, variant)}`.\n * Washes stay light (≈10–25%) so the data line, not the fill, carries the value.\n */\nfunction ChartFillDefs({ id, color, variant }: { id: string; color: string; variant: ChartFillVariant }) {\n if (variant === \"gradient\")\n return (\n \n \n \n \n )\n if (variant === \"hatched\")\n return (\n \n \n \n \n )\n if (variant === \"dotted\")\n return (\n \n \n \n )\n return null\n}\n\nfunction chartFill(id: string, color: string, variant: ChartFillVariant) {\n if (variant === \"none\") return \"transparent\"\n if (variant === \"solid\") return color\n return `url(#${id})`\n}\n\ntype RevealDirection = \"left-to-right\" | \"right-to-left\" | \"center-out\"\n\n/**\n * A mask that wipes a series in once, on mount. Apply it with\n * `style={{ mask: `url(#${id})` }}` on the line, fill and dots together so they\n * reveal in lockstep. Reduced motion shows everything immediately.\n */\nfunction RevealMask({ id, direction = \"left-to-right\", duration = 0.9 }: { id: string; direction?: RevealDirection; duration?: number }) {\n const reduce = useReducedMotion()\n const originX = direction === \"left-to-right\" ? 0 : direction === \"right-to-left\" ? 1 : 0.5\n\n return (\n \n \n \n )\n}\n\n/**\n * Holds a chart's placeholder while it loads. Pulses or shimmers like Skeleton,\n * following the nearest SkeletonProvider, so charts match the tables beside them.\n * Draw the placeholder in `bg-skeleton` / `var(--skeleton)`.\n */\nfunction ChartLoading({ className, children }: { className?: string; children?: React.ReactNode }) {\n const variant = useSkeletonVariant()\n return (\n \n {children}\n \n )\n}\n\n/**\n * Legend with selectable entries. Clicking an entry focuses that series (others\n * dim); clicking it again clears the focus. Text uses text tokens, the swatch\n * carries the color.\n */\nfunction ChartLegend({\n series,\n active,\n onActiveChange,\n className,\n}: {\n series: { key: string; label: string; color: string }[]\n /** Key of the focused series. Others dim. */\n active?: string | null\n onActiveChange?: (key: string | null) => void\n className?: string\n}) {\n const interactive = Boolean(onActiveChange)\n\n return (\n
\n {series.map((s) => {\n const dimmed = active != null && active !== s.key\n const content = (\n <>\n \n {s.label}\n \n )\n return interactive ? (\n onActiveChange?.(active === s.key ? null : s.key)}\n className=\"flex items-center gap-1.5 rounded-md text-[13px] outline-none focus-visible:ring-3 focus-visible:ring-ring/30\"\n >\n {content}\n \n ) : (\n \n {content}\n \n )\n })}\n
\n )\n}\n\ntype TooltipRow = { key: string; label: string; color: string; value: number | null | undefined }\n\n/** Tooltip surface shared by all charts. Values are right-aligned and tabular. */\nfunction ChartTooltipCard({\n title,\n rows,\n format,\n note,\n}: {\n title?: React.ReactNode\n rows: TooltipRow[]\n /** Formats each row's value. */\n format: (value: number) => string\n /** Short qualifier next to the title, e.g. \"Tahmini\" or \"Devam ediyor\". */\n note?: React.ReactNode\n}) {\n return (\n
\n {(title != null || note != null) && (\n \n {title != null && {title}}\n {note != null && {note}}\n \n )}\n {rows.map((row) => (\n
\n \n {row.label}\n {row.value == null ? \"—\" : format(row.value)}\n
\n ))}\n
\n )\n}\n\nconst defaultNumberFormat = (value: number) => new Intl.NumberFormat(\"tr-TR\").format(value)\nconst compactNumberFormat = (value: number) => new Intl.NumberFormat(\"tr-TR\", { notation: \"compact\", maximumFractionDigits: 1 }).format(value)\n\nexport {\n CHART_COLORS,\n ChartBackground,\n ChartBackgroundDefs,\n ChartMotionStyles,\n GlowFilter,\n strokeDash,\n type ChartBackgroundVariant,\n type ChartStrokeStyle,\n ChartFillDefs,\n ChartLegend,\n ChartLoading,\n ChartTooltipCard,\n RevealMask,\n chartFill,\n compactNumberFormat,\n defaultNumberFormat,\n resolveSeries,\n type ChartFillVariant,\n type ChartSeries,\n type RevealDirection,\n type TooltipRow,\n}\n", "type": "registry:component", "target": "@components/ikas/chart-kit.tsx" } ], "docs": "https://builders.ikas.com/tr/docs/app-development/ui-kit/components/chart-kit", "categories": [ "charts", "utilities" ], "type": "registry:component" }