klun-ui 0.1.0

package/dist/charts/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/charts/AreaChart.tsx","../../src/charts/BarChart.tsx","../../src/charts/Donut.tsx"],"names":["AreaChart","RAreaChart","forwardRef","BarChart","jsx","ResponsiveContainer","jsxs","RBarChart","Donut","Cell"],"mappings":"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","file":"index.js","sourcesContent":["import { forwardRef, useId, type CSSProperties } from \"react\";\nimport { Area, AreaChart as RAreaChart, ResponsiveContainer } from \"recharts\";\nimport { cx } from \"../utils/cx\";\n\n/** Chart color intent — resolves to a klun state token, so charts follow the\n *  active theme (including the Metronic skin) automatically. */\nexport type ChartIntent = \"primary\" | \"success\" | \"danger\" | \"warning\" | \"info\";\n\nexport const CHART_INTENT: Record<ChartIntent, string> = {\n  primary: \"var(--klun-primary-base)\",\n  success: \"var(--klun-state-success-base)\",\n  danger: \"var(--klun-state-error-base)\",\n  warning: \"var(--klun-state-warning-base)\",\n  info: \"var(--klun-state-information-base)\",\n};\n\n/** Shared klun-token styling for recharts tooltips. */\nexport const CHART_TOOLTIP_STYLE: CSSProperties = {\n  background: \"var(--klun-bg-white-0)\",\n  border: \"1px solid var(--klun-stroke-soft-200)\",\n  borderRadius: \"8px\",\n  padding: \"6px 10px\",\n  fontSize: \"12px\",\n  color: \"var(--klun-text-strong-950)\",\n};\n\nexport interface AreaChartProps {\n  /** A single numeric series. */\n  data?: number[];\n  /** Fixed pixel width. Default `320`. */\n  width?: number;\n  /** Fixed pixel height. Default `96`. */\n  height?: number;\n  /** Color intent. Default `\"primary\"`. */\n  color?: ChartIntent;\n  /** Render the gradient area fill under the line. Default `true`. */\n  fill?: boolean;\n  /** Line width. Default `2`. */\n  strokeWidth?: number;\n  /** Outer padding (recharts margin). Default `6`. */\n  padding?: number;\n  className?: string;\n  style?: CSSProperties;\n}\n\n/**\n * AreaChart — smoothed single-series area / sparkline, built on recharts. Pass\n * `data` as an array of numbers. Colors resolve from klun tokens so the chart\n * follows the active theme. Requires the `recharts` peer dependency.\n */\nexport const AreaChart = forwardRef<HTMLDivElement, AreaChartProps>(function AreaChart(\n  { data = [], width = 320, height = 96, color = \"primary\", fill = true, strokeWidth = 2, padding = 6, className, style },\n  ref,\n) {\n  const gid = \"klun-area-\" + useId().replace(/:/g, \"\");\n  const stroke = CHART_INTENT[color] ?? CHART_INTENT.primary;\n  const series = data.map((v, i) => ({ i, v }));\n\n  return (\n    <div ref={ref} className={cx(\"klun-area-chart\", className)} style={{ width, height, ...style }}>\n      <ResponsiveContainer width=\"100%\" height=\"100%\">\n        <RAreaChart data={series} margin={{ top: padding, right: padding, bottom: padding, left: padding }}>\n          <defs>\n            <linearGradient id={gid} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n              <stop offset=\"0%\" stopColor={stroke} stopOpacity={0.24} />\n              <stop offset=\"100%\" stopColor={stroke} stopOpacity={0} />\n            </linearGradient>\n          </defs>\n          <Area\n            type=\"monotone\"\n            dataKey=\"v\"\n            stroke={stroke}\n            strokeWidth={strokeWidth}\n            strokeLinecap=\"round\"\n            fill={fill ? `url(#${gid})` : \"none\"}\n            fillOpacity={1}\n            dot={false}\n            isAnimationActive={false}\n          />\n        </RAreaChart>\n      </ResponsiveContainer>\n    </div>\n  );\n});\n\nAreaChart.displayName = \"AreaChart\";\n","import { forwardRef, type CSSProperties, type ReactNode } from \"react\";\nimport { Bar, BarChart as RBarChart, Cell, LabelList, ResponsiveContainer, Tooltip, XAxis } from \"recharts\";\nimport { cx } from \"../utils/cx\";\nimport { CHART_INTENT, CHART_TOOLTIP_STYLE, type ChartIntent } from \"./AreaChart\";\n\nexport interface BarDatum {\n  label?: ReactNode;\n  value: number;\n  /** Per-bar color override (any CSS color or `var(--klun-*)`). */\n  color?: string;\n}\n\nexport interface BarChartProps {\n  /** Single series of labelled bars. */\n  data?: BarDatum[];\n  /** Fixed pixel height. Default `140`. Width fills the container. */\n  height?: number;\n  /** Color intent for the bars. Default `\"primary\"`. */\n  color?: ChartIntent;\n  /** Category gap between bars. Default `8`. */\n  gap?: number;\n  /** Render the numeric value above each bar. Default `false`. */\n  showValues?: boolean;\n  className?: string;\n  style?: CSSProperties;\n}\n\n/**\n * BarChart — single-series vertical bars, built on recharts. Colors resolve from\n * klun tokens so the chart follows the active theme. Requires the `recharts`\n * peer dependency.\n */\nexport const BarChart = forwardRef<HTMLDivElement, BarChartProps>(function BarChart(\n  { data = [], height = 140, color = \"primary\", gap = 8, showValues = false, className, style },\n  ref,\n) {\n  const fill = CHART_INTENT[color] ?? CHART_INTENT.primary;\n  return (\n    <div ref={ref} className={cx(\"klun-bar-chart\", className)} style={{ width: \"100%\", height, ...style }}>\n      <ResponsiveContainer width=\"100%\" height=\"100%\">\n        <RBarChart data={data} margin={{ top: showValues ? 18 : 6, right: 6, bottom: 0, left: 6 }} barCategoryGap={gap}>\n          <XAxis\n            dataKey=\"label\"\n            tickLine={false}\n            axisLine={false}\n            tick={{ fontSize: 11, fill: \"var(--klun-text-sub-600)\" }}\n          />\n          <Tooltip cursor={{ fill: \"var(--klun-bg-weak-50)\" }} contentStyle={CHART_TOOLTIP_STYLE} />\n          <Bar dataKey=\"value\" fill={fill} radius={[4, 4, 0, 0]} isAnimationActive={false}>\n            {showValues ? (\n              <LabelList\n                dataKey=\"value\"\n                position=\"top\"\n                style={{ fontSize: 11, fontWeight: 600, fill: \"var(--klun-text-sub-600)\" }}\n              />\n            ) : null}\n            {data.map((d, i) => (\n              <Cell key={i} fill={d.color || fill} />\n            ))}\n          </Bar>\n        </RBarChart>\n      </ResponsiveContainer>\n    </div>\n  );\n});\n\nBarChart.displayName = \"BarChart\";\n","import { forwardRef, type CSSProperties, type ReactNode } from \"react\";\nimport { Cell, Pie, PieChart } from \"recharts\";\nimport { cx } from \"../utils/cx\";\n\n/** Default donut palette — klun state tokens, so segments follow the theme. */\nconst PALETTE = [\n  \"var(--klun-primary-base)\",\n  \"var(--klun-state-success-base)\",\n  \"var(--klun-state-warning-base)\",\n  \"var(--klun-state-error-base)\",\n  \"var(--klun-state-information-base)\",\n  \"var(--klun-icon-disabled-300)\",\n];\n\nexport interface DonutDatum {\n  label?: ReactNode;\n  value: number;\n  /** Per-segment color override (any CSS color or `var(--klun-*)`). */\n  color?: string;\n}\n\nexport interface DonutProps {\n  /** Segments. */\n  data?: DonutDatum[];\n  /** Outer diameter in px. Default `160`. */\n  size?: number;\n  /** Ring thickness in px. Default `22`. */\n  thickness?: number;\n  /** Small caption under the center value. */\n  centerLabel?: ReactNode;\n  /** Large value in the center. */\n  centerValue?: ReactNode;\n  className?: string;\n  style?: CSSProperties;\n}\n\n/**\n * Donut — donut / pie chart with an optional center label and a percentage\n * legend, built on recharts. Colors resolve from klun tokens so the chart\n * follows the active theme. Requires the `recharts` peer dependency.\n */\nexport const Donut = forwardRef<HTMLDivElement, DonutProps>(function Donut(\n  { data = [], size = 160, thickness = 22, centerLabel, centerValue, className, style },\n  ref,\n) {\n  const total = data.reduce((s, d) => s + (d.value || 0), 0) || 1;\n  return (\n    <div\n      ref={ref}\n      className={cx(\"klun-donut\", className)}\n      style={{ display: \"inline-flex\", alignItems: \"center\", gap: 18, ...style }}\n    >\n      <div style={{ position: \"relative\", width: size, height: size, flexShrink: 0 }}>\n        <PieChart width={size} height={size}>\n          <Pie\n            data={data}\n            dataKey=\"value\"\n            cx=\"50%\"\n            cy=\"50%\"\n            innerRadius={size / 2 - thickness}\n            outerRadius={size / 2}\n            startAngle={90}\n            endAngle={-270}\n            stroke=\"none\"\n            isAnimationActive={false}\n          >\n            {data.map((d, i) => (\n              <Cell key={i} fill={d.color || PALETTE[i % PALETTE.length]} />\n            ))}\n          </Pie>\n        </PieChart>\n        {centerLabel || centerValue ? (\n          <div\n            style={{\n              position: \"absolute\",\n              inset: 0,\n              display: \"flex\",\n              flexDirection: \"column\",\n              alignItems: \"center\",\n              justifyContent: \"center\",\n              pointerEvents: \"none\",\n            }}\n          >\n            {centerValue ? (\n              <span style={{ fontSize: 22, fontWeight: 700, color: \"var(--klun-text-strong-950)\" }}>{centerValue}</span>\n            ) : null}\n            {centerLabel ? (\n              <span style={{ fontSize: 11, color: \"var(--klun-text-sub-600)\" }}>{centerLabel}</span>\n            ) : null}\n          </div>\n        ) : null}\n      </div>\n      {data.length > 0 ? (\n        <div style={{ display: \"flex\", flexDirection: \"column\", gap: 8 }}>\n          {data.map((d, i) => (\n            <div key={i} style={{ display: \"flex\", alignItems: \"center\", gap: 8, fontSize: 12 }}>\n              <span\n                style={{\n                  width: 10,\n                  height: 10,\n                  borderRadius: 3,\n                  background: d.color || PALETTE[i % PALETTE.length],\n                  flexShrink: 0,\n                }}\n              />\n              <span style={{ color: \"var(--klun-text-sub-600)\" }}>{d.label}</span>\n              <span style={{ marginLeft: \"auto\", fontWeight: 600, color: \"var(--klun-text-strong-950)\" }}>\n                {Math.round(((d.value || 0) / total) * 100)}%\n              </span>\n            </div>\n          ))}\n        </div>\n      ) : null}\n    </div>\n  );\n});\n\nDonut.displayName = \"Donut\";\n"]}