@stisocial/ui 0.2.0 → 0.3.0

package/dist/charts/ScatterChart/ScatterChart.js

@@ -0,0 +1,223 @@
+"use client";
+import { useMessages } from "../../provider/UIProvider.js";
+import { template } from "../../text/text.js";
+import { extentOf, isNum, linear, niceScale, r2, textWidth } from "../_internal/math.js";
+import marks_module_default from "../_internal/marks/marks.module.js";
+import { AxisLine, Marker, YTicks } from "../_internal/marks/marks.js";
+import { ChartLegend } from "../ChartLegend/ChartLegend.js";
+import { useValueFormat } from "../_internal/format.js";
+import { ChartFrame } from "../_internal/frame/ChartFrame.js";
+import { linearNav, toneIndex } from "../_internal/items.js";
+import ScatterChart_module_default from "./ScatterChart.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+// src/charts/ScatterChart/ScatterChart.tsx
+/**
+* Saçılım (ve kabarcık) grafiği: iki sayısal değişkenin ilişkisi (harcama ile dönüşüm, süre ile
+* puan). Seriler renk ve işaret biçimiyle ayrılır. Oklar noktalar arasında x sırasıyla gezer;
+* ipucu ve tablo değerleri yazar.
+*/
+function ScatterChart({ label, title, description, series, xLabel, yLabel, sizeLabel, xFormat, yFormat, sizeFormat, bubble = false, showLegend = true, tableToggle = false, isLoading = false, height = 300, className, id, ref }) {
+	const t = useMessages();
+	const fx = useValueFormat(xFormat);
+	const fy = useValueFormat(yFormat);
+	const fs = useValueFormat(sizeFormat);
+	const [hidden, setHidden] = useState(() => /* @__PURE__ */ new Set());
+	const flat = useMemo(() => series.flatMap((sr, s) => hidden.has(sr.id) ? [] : sr.points.filter((p) => isNum(p.x) && isNum(p.y)).map((p) => ({
+		p,
+		s,
+		c: toneIndex(sr.tone, s),
+		series: sr
+	}))).sort((a, b) => a.p.x - b.p.x || a.p.y - b.p.y), [series, hidden]);
+	const all = series.flatMap((sr) => sr.points);
+	const xs = niceScale(...extentOf(all.map((p) => p.x)), 5);
+	const ys = niceScale(...extentOf(all.map((p) => p.y)), 5);
+	const sizes = extentOf(all.map((p) => p.size));
+	const radius = (p) => bubble && isNum(p.size) ? 4 + Math.sqrt(Math.max(0, (p.size - Math.min(0, sizes[0])) / Math.max(1e-9, sizes[1]))) * 18 : 4.5;
+	const layout = (ctx) => {
+		const left = Math.ceil(Math.max(...ys.ticks.map((v) => textWidth(fy(v))), 0)) + 28;
+		const right = bubble ? 22 : 12;
+		const top = bubble ? 22 : 10;
+		const bottom = 48;
+		const plotW = Math.max(0, ctx.width - left - right);
+		const plotH = Math.max(0, ctx.height - top - bottom);
+		return {
+			left,
+			right,
+			top,
+			bottom,
+			plotW,
+			plotH,
+			x: linear(xs.min, xs.max, left, left + plotW),
+			y: linear(ys.min, ys.max, top + plotH, top)
+		};
+	};
+	const rows = (f) => [
+		{
+			label: xLabel,
+			value: fx(f.p.x)
+		},
+		{
+			label: yLabel,
+			value: fy(f.p.y)
+		},
+		...bubble && isNum(f.p.size) ? [{
+			label: sizeLabel ?? t.chartValue,
+			value: fs(f.p.size)
+		}] : []
+	];
+	const data = (ctx) => {
+		const l = layout(ctx);
+		return flat.map((f, k) => ({
+			id: `i${k}`,
+			x: l.x(f.p.x),
+			y: l.y(f.p.y),
+			title: f.p.label ?? f.series.label,
+			rows: [{
+				label: f.series.label,
+				value: "",
+				series: f.c,
+				kind: "dot"
+			}, ...rows(f)].filter((_row, i) => i > 0 || series.length > 1),
+			announce: `${f.p.label ? `${f.p.label}, ` : ""}${f.series.label}: ${rows(f).map((r) => `${r.label} ${r.value}`).join(", ")}`
+		}));
+	};
+	const hit = (x, y, ctx) => {
+		const l = layout(ctx);
+		let best = -1;
+		let bestD = Infinity;
+		flat.forEach((f, k) => {
+			const d = Math.hypot(l.x(f.p.x) - x, l.y(f.p.y) - y) - radius(f.p);
+			if (d < bestD) {
+				bestD = d;
+				best = k;
+			}
+		});
+		return best >= 0 && bestD <= 14 ? `i${best}` : null;
+	};
+	const legend = showLegend && series.length > 1 ? /* @__PURE__ */ jsx(ChartLegend, {
+		items: series.map((sr, s) => ({
+			id: sr.id,
+			label: sr.label,
+			series: toneIndex(sr.tone, s),
+			kind: "dot",
+			isHidden: hidden.has(sr.id)
+		})),
+		onToggle: (sid) => setHidden((prev) => {
+			const next = new Set(prev);
+			if (next.has(sid)) next.delete(sid);
+			else if (series.length - prev.size > 1) next.add(sid);
+			return next;
+		})
+	}) : null;
+	return /* @__PURE__ */ jsx(ChartFrame, {
+		ref,
+		id,
+		className: [ScatterChart_module_default.root, className].filter(Boolean).join(" "),
+		label,
+		title,
+		description,
+		summary: template(t.chartSummaryPoints, { count: flat.length }),
+		height,
+		data,
+		nav: linearNav(flat.length),
+		hit,
+		legend,
+		table: {
+			rowHeaderLabel: series.length > 1 ? t.chartSeries : t.chartCategory,
+			columns: [
+				...series.length > 1 ? [{
+					id: "label",
+					label: t.chartCategory,
+					numeric: false
+				}] : [],
+				{
+					id: "x",
+					label: xLabel
+				},
+				{
+					id: "y",
+					label: yLabel
+				},
+				...bubble ? [{
+					id: "size",
+					label: sizeLabel ?? t.chartValue
+				}] : []
+			],
+			rows: flat.map((f, k) => ({
+				id: `i${k}`,
+				header: series.length > 1 ? f.series.label : f.p.label ?? String(k + 1),
+				cells: [
+					...series.length > 1 ? [f.p.label ?? "–"] : [],
+					fx(f.p.x),
+					fy(f.p.y),
+					...bubble ? [isNum(f.p.size) ? fs(f.p.size) : null] : []
+				]
+			}))
+		},
+		tableToggle,
+		isEmpty: flat.length === 0,
+		isLoading,
+		children: (ctx) => {
+			const l = layout(ctx);
+			const active = ctx.activeId ? Number(ctx.activeId.slice(1)) : -1;
+			const xTicks = xs.ticks.filter((_, i, a) => !ctx.compact || i % 2 === 0 || i === a.length - 1);
+			return /* @__PURE__ */ jsxs("g", { children: [
+				/* @__PURE__ */ jsx(YTicks, {
+					ticks: ys.ticks,
+					y: l.y,
+					left: l.left,
+					right: l.left + l.plotW,
+					format: fy
+				}),
+				xTicks.map((v) => /* @__PURE__ */ jsxs("g", { children: [/* @__PURE__ */ jsx("line", {
+					className: marks_module_default.grid,
+					x1: r2(l.x(v)),
+					x2: r2(l.x(v)),
+					y1: l.top,
+					y2: l.top + l.plotH
+				}), /* @__PURE__ */ jsx("text", {
+					className: marks_module_default.tick,
+					"data-anchor": "middle",
+					"data-baseline": "hanging",
+					x: r2(l.x(v)),
+					y: l.top + l.plotH + 8,
+					children: fx(v)
+				})] }, v)),
+				/* @__PURE__ */ jsx(AxisLine, {
+					x1: l.left,
+					y1: l.top + l.plotH,
+					x2: l.left + l.plotW,
+					y2: l.top + l.plotH
+				}),
+				/* @__PURE__ */ jsx("text", {
+					className: ScatterChart_module_default.axisTitle,
+					x: l.left + l.plotW / 2,
+					y: ctx.height - 6,
+					children: xLabel
+				}),
+				/* @__PURE__ */ jsx("text", {
+					className: ScatterChart_module_default.axisTitle,
+					transform: `translate(12 ${l.top + l.plotH / 2}) rotate(-90)`,
+					children: yLabel
+				}),
+				flat.map((f, k) => bubble ? /* @__PURE__ */ jsx("circle", {
+					className: `${marks_module_default.mark} ${ScatterChart_module_default.bubble}`,
+					"data-kind": "marker",
+					"data-s": f.c,
+					"data-dim": active >= 0 && k !== active ? "" : void 0,
+					cx: r2(l.x(f.p.x)),
+					cy: r2(l.y(f.p.y)),
+					r: r2(radius(f.p) + (k === active ? 2 : 0))
+				}, `${f.series.id}-${k}`) : /* @__PURE__ */ jsx(Marker, {
+					s: f.c,
+					cx: l.x(f.p.x),
+					cy: l.y(f.p.y),
+					r: k === active ? 6.5 : 4.5,
+					dim: active >= 0 && k !== active
+				}, `${f.series.id}-${k}`))
+			] });
+		}
+	});
+}
+export { ScatterChart };

package/dist/charts/ScatterChart/ScatterChart.module.js

@@ -0,0 +1,8 @@
+import './ScatterChart.css';
+// src/charts/ScatterChart/ScatterChart.module.css
+var ScatterChart_module_default = {
+	"root": "sti-ScatterChart-root-67fc4",
+	"axisTitle": "sti-ScatterChart-axisTitle-40bc7",
+	"bubble": "sti-ScatterChart-bubble-b6841"
+};
+export { ScatterChart_module_default as default };

package/dist/charts/ScatterChart/index.d.ts

@@ -0,0 +1,2 @@
+import { ScatterChart, ScatterChartProps, ScatterPoint, ScatterSeries } from "./ScatterChart.js";
+export { ScatterChart, ScatterChartProps, ScatterPoint, ScatterSeries };

package/dist/charts/Sparkline/Sparkline.css

@@ -0,0 +1,27 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-Sparkline-root-ddf93 {
+    aspect-ratio: 96 / 28;
+    vertical-align: middle;
+    flex: none;
+    block-size: auto;
+    inline-size: 6rem;
+    max-inline-size: 100%;
+    display: inline-block;
+    overflow: visible;
+  }
+
+  .sti-Sparkline-root-ddf93[data-size="sm"] {
+    aspect-ratio: 64 / 20;
+    inline-size: 4rem;
+  }
+
+  .sti-Sparkline-root-ddf93[data-size="lg"] {
+    aspect-ratio: 160 / 40;
+    inline-size: 10rem;
+  }
+
+  .sti-Sparkline-dot-88c41, .sti-Sparkline-root-ddf93 path {
+    vector-effect: non-scaling-stroke;
+  }
+}

package/dist/charts/Sparkline/Sparkline.d.ts

@@ -0,0 +1,24 @@
+import { ChartValueFormat } from "../_internal/format.js";
+import { ChartTone } from "../_internal/items.js";
+export interface SparklineProps {
+  /** Ne gösterdiği (zorunlu): "Son 30 günün ziyaretçileri". */
+  label: string;
+  /** Değerler (sıralı); `null` eksik. */
+  data: readonly (number | null)[];
+  tone?: ChartTone;
+  /** Çizginin altını hafif doldurur. */
+  showArea?: boolean;
+  /** Son değeri nokta ile vurgular. */
+  showLast?: boolean;
+  /** Erişilebilir özetteki değer biçimi. */
+  valueFormat?: ChartValueFormat;
+  /** Boy: `sm` 64×20, `md` 96×28, `lg` 160×40 piksel (en büyük; kabına sığar). */
+  size?: "sm" | "md" | "lg";
+  className?: string;
+  id?: string;
+}
+/**
+ * Küçük eğilim çizgisi: istatistik kartında, tablo hücresinde değerin yönünü gösterir. Eksen,
+ * ipucu ve etkileşim yoktur; ekran okuyucu adını ve özetini ("en düşük, en yüksek, son") okur.
+ */
+export declare function Sparkline({ label, data, tone, showArea, showLast, valueFormat, size, className, id }: SparklineProps): import("react").JSX.Element;

package/dist/charts/Sparkline/Sparkline.js

@@ -0,0 +1,71 @@
+"use client";
+import { useMessages } from "../../provider/UIProvider.js";
+import { template } from "../../text/text.js";
+import { extentOf, isNum, linear } from "../_internal/math.js";
+import { areaPath, linePath } from "../_internal/shapes.js";
+import marks_module_default from "../_internal/marks/marks.module.js";
+import { AreaMark, LineMark } from "../_internal/marks/marks.js";
+import { useValueFormat } from "../_internal/format.js";
+import { toneIndex } from "../_internal/items.js";
+import Sparkline_module_default from "./Sparkline.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/charts/Sparkline/Sparkline.tsx
+const SIZE = {
+	sm: [64, 20],
+	md: [96, 28],
+	lg: [160, 40]
+};
+/**
+* Küçük eğilim çizgisi: istatistik kartında, tablo hücresinde değerin yönünü gösterir. Eksen,
+* ipucu ve etkileşim yoktur; ekran okuyucu adını ve özetini ("en düşük, en yüksek, son") okur.
+*/
+function Sparkline({ label, data, tone = "accent", showArea = true, showLast = true, valueFormat, size = "md", className, id }) {
+	const t = useMessages();
+	const fmt = useValueFormat(valueFormat);
+	const [w, h] = SIZE[size];
+	const pad = 2.5;
+	const values = data.filter(isNum);
+	const [lo, hi] = extentOf(values);
+	const x = linear(0, Math.max(1, data.length - 1), pad, w - pad);
+	const y = linear(lo, hi === lo ? lo + 1 : hi, h - pad, pad);
+	const points = data.map((v, i) => isNum(v) ? {
+		x: x(i),
+		y: hi === lo ? h / 2 : y(v)
+	} : null);
+	const lastIndex = data.findLastIndex(isNum);
+	const last = lastIndex >= 0 ? points[lastIndex] : null;
+	const s = toneIndex(tone, 0);
+	const summary = values.length > 0 ? template(t.chartSparklineSummary, {
+		min: fmt(lo),
+		max: fmt(hi),
+		last: fmt(values[values.length - 1] ?? 0)
+	}) : t.chartEmpty;
+	return /* @__PURE__ */ jsxs("svg", {
+		id,
+		className: [Sparkline_module_default.root, className].filter(Boolean).join(" "),
+		"data-size": size,
+		viewBox: `0 0 ${w} ${h}`,
+		role: "img",
+		"aria-label": `${label}: ${summary}`,
+		preserveAspectRatio: "none",
+		children: [
+			showArea ? /* @__PURE__ */ jsx(AreaMark, {
+				d: areaPath(points, h),
+				s
+			}) : null,
+			/* @__PURE__ */ jsx(LineMark, {
+				d: linePath(points, "monotone"),
+				s
+			}),
+			showLast && last ? /* @__PURE__ */ jsx("circle", {
+				className: `${marks_module_default.mark} ${Sparkline_module_default.dot}`,
+				"data-kind": "marker",
+				"data-s": s,
+				cx: last.x,
+				cy: last.y,
+				r: 2.25
+			}) : null
+		]
+	});
+}
+export { Sparkline };

package/dist/charts/Sparkline/Sparkline.module.js

@@ -0,0 +1,7 @@
+import './Sparkline.css';
+// src/charts/Sparkline/Sparkline.module.css
+var Sparkline_module_default = {
+	"root": "sti-Sparkline-root-ddf93",
+	"dot": "sti-Sparkline-dot-88c41"
+};
+export { Sparkline_module_default as default };

package/dist/charts/Sparkline/index.d.ts

@@ -0,0 +1,2 @@
+import { Sparkline, SparklineProps } from "./Sparkline.js";
+export { Sparkline, SparklineProps };

package/dist/charts/Treemap/Treemap.css

@@ -0,0 +1,30 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-Treemap-root-5dc95 {
+    width: 100%;
+    min-width: 0;
+  }
+
+  .sti-Treemap-name-11150, .sti-Treemap-value-a26b5 {
+    fill: var(--sti-bg-canvas);
+    font-family: var(--sti-font-text);
+    pointer-events: none;
+    font-size: 12px;
+  }
+
+  .sti-Treemap-name-11150 {
+    font-weight: var(--sti-font-weight-semibold);
+  }
+
+  .sti-Treemap-value-a26b5 {
+    font-family: var(--sti-font-numeric);
+    font-variant-numeric: tabular-nums;
+    opacity: .9;
+  }
+
+  @media (forced-colors: active) {
+    .sti-Treemap-name-11150, .sti-Treemap-value-a26b5 {
+      fill: canvastext;
+    }
+  }
+}

package/dist/charts/Treemap/Treemap.d.ts

@@ -0,0 +1,23 @@
+import { ChartValueFormat } from "../_internal/format.js";
+import { ChartDatum } from "../_internal/items.js";
+import { ReactNode, Ref } from "react";
+export interface TreemapProps {
+  label: string;
+  title?: ReactNode;
+  description?: ReactNode;
+  /** Kutular; sıfırdan büyük değerler çizilir, büyükten küçüğe yerleşir. */
+  data: readonly ChartDatum[];
+  valueFormat?: ChartValueFormat;
+  tableToggle?: boolean;
+  isLoading?: boolean;
+  height?: number;
+  className?: string;
+  id?: string;
+  ref?: Ref<HTMLElement>;
+}
+/**
+ * Ağaç haritası: çok sayıda kalemin bütüne katkısı (müşteri başına gelir, içerik türüne göre
+ * izlenme). Alan değerle orantılıdır; kutu yeterince büyükse ad ve değer içine yazılır. Oklar
+ * kutular arasında büyükten küçüğe gezer; ipucu ve tablo değer ve payı verir.
+ */
+export declare function Treemap({ label, title, description, data, valueFormat, tableToggle, isLoading, height, className, id, ref }: TreemapProps): import("react").JSX.Element;

package/dist/charts/Treemap/Treemap.js

@@ -0,0 +1,134 @@
+"use client";
+import { useFormatter, useMessages } from "../../provider/UIProvider.js";
+import { template } from "../../text/text.js";
+import { isNum, r2, textWidth } from "../_internal/math.js";
+import { BarMark } from "../_internal/marks/marks.js";
+import { useValueFormat } from "../_internal/format.js";
+import { ChartFrame } from "../_internal/frame/ChartFrame.js";
+import { linearNav, toneIndex } from "../_internal/items.js";
+import { squarify } from "./squarify.js";
+import Treemap_module_default from "./Treemap.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/charts/Treemap/Treemap.tsx
+/**
+* Ağaç haritası: çok sayıda kalemin bütüne katkısı (müşteri başına gelir, içerik türüne göre
+* izlenme). Alan değerle orantılıdır; kutu yeterince büyükse ad ve değer içine yazılır. Oklar
+* kutular arasında büyükten küçüğe gezer; ipucu ve tablo değer ve payı verir.
+*/
+function Treemap({ label, title, description, data, valueFormat, tableToggle = false, isLoading = false, height = 300, className, id, ref }) {
+	const t = useMessages();
+	const fmt = useValueFormat(valueFormat);
+	const f = useFormatter();
+	const share = (r) => f.number(r, {
+		style: "percent",
+		maximumFractionDigits: 1
+	});
+	const items = data.map((d, i) => ({
+		d,
+		c: toneIndex(d.tone, i)
+	})).filter((x) => isNum(x.d.value) && x.d.value > 0).sort((a, b) => b.d.value - a.d.value);
+	const total = items.reduce((s, x) => s + x.d.value, 0);
+	const boxes = (ctx) => squarify(items.map((x) => x.d.value), {
+		x: 0,
+		y: 0,
+		w: ctx.width,
+		h: ctx.height
+	});
+	const rows = (k) => {
+		const x = items[k];
+		return x ? [{
+			label: x.d.label,
+			value: fmt(x.d.value),
+			series: x.c
+		}, {
+			label: t.chartShare,
+			value: share(x.d.value / total)
+		}] : [];
+	};
+	const data_ = (ctx) => {
+		const b = boxes(ctx);
+		return items.map((x, k) => ({
+			id: `i${k}`,
+			x: (b[k]?.x ?? 0) + (b[k]?.w ?? 0) / 2,
+			y: (b[k]?.y ?? 0) + (b[k]?.h ?? 0) / 2,
+			rows: rows(k),
+			announce: `${x.d.label}: ${fmt(x.d.value)}, ${share(x.d.value / total)}`
+		}));
+	};
+	const hit = (px, py, ctx) => {
+		const k = boxes(ctx).findIndex((r) => px >= r.x && px < r.x + r.w && py >= r.y && py < r.y + r.h);
+		return k >= 0 ? `i${k}` : null;
+	};
+	return /* @__PURE__ */ jsx(ChartFrame, {
+		ref,
+		id,
+		className: [Treemap_module_default.root, className].filter(Boolean).join(" "),
+		label,
+		title,
+		description,
+		summary: template(t.chartSummaryPoints, { count: items.length }),
+		height,
+		data: data_,
+		nav: linearNav(items.length),
+		hit,
+		table: {
+			rowHeaderLabel: t.chartCategory,
+			columns: [{
+				id: "value",
+				label: t.chartValue
+			}, {
+				id: "share",
+				label: t.chartShare
+			}],
+			rows: items.map((x, k) => ({
+				id: `i${k}`,
+				header: x.d.label,
+				cells: [fmt(x.d.value), share(x.d.value / total)]
+			})),
+			footer: {
+				header: t.chartTotal,
+				cells: [fmt(total), share(1)]
+			}
+		},
+		tableToggle,
+		isEmpty: items.length === 0,
+		isLoading,
+		children: (ctx) => {
+			const b = boxes(ctx);
+			const active = ctx.activeId ? Number(ctx.activeId.slice(1)) : -1;
+			return /* @__PURE__ */ jsx("g", { children: items.map((x, k) => {
+				const r = b[k];
+				if (!r) return null;
+				const name = x.d.label;
+				const showName = r.w >= Math.min(textWidth(name, 12) + 16, 90) && r.h >= 26;
+				const showValue = showName && r.h >= 44 && r.w >= textWidth(fmt(x.d.value), 12) + 16;
+				return /* @__PURE__ */ jsxs("g", { children: [
+					/* @__PURE__ */ jsx(BarMark, {
+						s: x.c,
+						x: r.x + 1,
+						y: r.y + 1,
+						width: r.w - 2,
+						height: r.h - 2,
+						radius: 4,
+						dim: active >= 0 && k !== active
+					}),
+					showName ? /* @__PURE__ */ jsx("text", {
+						className: Treemap_module_default.name,
+						x: r2(r.x + 9),
+						y: r2(r.y + 17),
+						"data-s": x.c,
+						children: textWidth(name, 12) + 16 > r.w ? `${name.slice(0, Math.max(1, Math.floor((r.w - 20) / 7)))}…` : name
+					}) : null,
+					showValue ? /* @__PURE__ */ jsx("text", {
+						className: Treemap_module_default.value,
+						x: r2(r.x + 9),
+						y: r2(r.y + 34),
+						"data-s": x.c,
+						children: fmt(x.d.value)
+					}) : null
+				] }, x.d.id);
+			}) });
+		}
+	});
+}
+export { Treemap };

package/dist/charts/Treemap/Treemap.module.js

@@ -0,0 +1,8 @@
+import './Treemap.css';
+// src/charts/Treemap/Treemap.module.css
+var Treemap_module_default = {
+	"root": "sti-Treemap-root-5dc95",
+	"name": "sti-Treemap-name-11150",
+	"value": "sti-Treemap-value-a26b5"
+};
+export { Treemap_module_default as default };

package/dist/charts/Treemap/index.d.ts

@@ -0,0 +1,3 @@
+import { Rect, squarify } from "./squarify.js";
+import { Treemap, TreemapProps } from "./Treemap.js";
+export { Rect, Treemap, TreemapProps, squarify };

package/dist/charts/Treemap/squarify.d.ts

@@ -0,0 +1,11 @@
+export interface Rect {
+  x: number;
+  y: number;
+  w: number;
+  h: number;
+}
+/**
+ * `values` (azalan sırada olmalı, sıfırdan büyük) için `rect` içinde kutular; dönen dizi aynı
+ * sıradadır.
+ */
+export declare function squarify(values: readonly number[], rect: Rect): Rect[];

package/dist/charts/Treemap/squarify.js

@@ -0,0 +1,78 @@
+// src/charts/Treemap/squarify.ts
+/**
+* `values` (azalan sırada olmalı, sıfırdan büyük) için `rect` içinde kutular; dönen dizi aynı
+* sıradadır.
+*/
+function squarify(values, rect) {
+	const total = values.reduce((s, v) => s + v, 0);
+	if (total <= 0 || rect.w <= 0 || rect.h <= 0) return values.map(() => ({
+		...rect,
+		w: 0,
+		h: 0
+	}));
+	const scale = rect.w * rect.h / total;
+	const areas = values.map((v) => v * scale);
+	const out = [];
+	let free = { ...rect };
+	let i = 0;
+	const worst = (row, side) => {
+		const sum = row.reduce((s, a) => s + a, 0);
+		const max = Math.max(...row);
+		const min = Math.min(...row);
+		const s2 = side * side;
+		const sum2 = sum * sum;
+		return Math.max(s2 * max / sum2, sum2 / (s2 * min));
+	};
+	while (i < areas.length) {
+		const side = Math.min(free.w, free.h);
+		const row = [areas[i]];
+		i++;
+		while (i < areas.length) {
+			if (worst([...row, areas[i]], side) > worst(row, side)) break;
+			row.push(areas[i]);
+			i++;
+		}
+		const sum = row.reduce((s, a) => s + a, 0);
+		if (free.w >= free.h) {
+			const colW = sum / free.h;
+			let y = free.y;
+			for (const a of row) {
+				const h = a / colW;
+				out.push({
+					x: free.x,
+					y,
+					w: colW,
+					h
+				});
+				y += h;
+			}
+			free = {
+				x: free.x + colW,
+				y: free.y,
+				w: free.w - colW,
+				h: free.h
+			};
+		} else {
+			const rowH = sum / free.w;
+			let x = free.x;
+			for (const a of row) {
+				const w = a / rowH;
+				out.push({
+					x,
+					y: free.y,
+					w,
+					h: rowH
+				});
+				x += w;
+			}
+			free = {
+				x: free.x,
+				y: free.y + rowH,
+				w: free.w,
+				h: free.h - rowH
+			};
+		}
+	}
+	return out;
+}
+export { squarify };

package/dist/charts/WaterfallChart/WaterfallChart.css

@@ -0,0 +1,20 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-WaterfallChart-root-72c9a {
+    width: 100%;
+    min-width: 0;
+  }
+
+  .sti-WaterfallChart-connector-73be5 {
+    stroke-dasharray: 3 3;
+  }
+
+  .sti-WaterfallChart-value-396c7 {
+    fill: var(--sti-fg);
+    font-family: var(--sti-font-numeric);
+    font-variant-numeric: tabular-nums;
+    font-size: 11px;
+    font-weight: var(--sti-font-weight-medium);
+    text-anchor: middle;
+  }
+}