@stisocial/ui 0.2.0 → 0.3.0

package/dist/charts/CalendarHeatmap/CalendarHeatmap.js

@@ -0,0 +1,256 @@
+"use client";
+import { useFormatter, useLocale, useMessages } from "../../provider/UIProvider.js";
+import { template } from "../../text/text.js";
+import { clamp, extentOf, isNum, r2 } from "../_internal/math.js";
+import { useValueFormat } from "../_internal/format.js";
+import { ChartFrame } from "../_internal/frame/ChartFrame.js";
+import { step5 } from "../_internal/items.js";
+import { ScaleLegend, heatClass } from "../_internal/ScaleLegend.js";
+import CalendarHeatmap_module_default from "./CalendarHeatmap.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo, useRef, useState } from "react";
+// src/charts/CalendarHeatmap/CalendarHeatmap.tsx
+const toUtc = (day) => {
+	const [y, m, d] = day.split("-").map(Number);
+	return Date.UTC(y ?? 1970, (m ?? 1) - 1, d ?? 1);
+};
+const addDays = (day, n) => new Date(toUtc(day) + n * 864e5).toISOString().slice(0, 10);
+const TOP = 20;
+const LEFT = 30;
+const GAP = 3;
+/**
+* Takvim ısı haritası: günlük yoğunluk (yayın, etkinlik, sipariş) haftalar sütun, günler satır
+* olarak; hücreler beş basamakta tonlanır. Dar kapta son haftalar gösterilir. Oklar günler (↑ ↓)
+* ve haftalar (← →) arasında gezer; tablo görünümü aylık özet verir.
+*/
+function CalendarHeatmap({ label, title, description, data, to: toProp, from: fromProp, weekStartsOn = 1, valueFormat, tableToggle = false, isLoading = false, className, id, ref }) {
+	const t = useMessages();
+	const f = useFormatter();
+	const locale = useLocale();
+	const fmt = useValueFormat(valueFormat);
+	const [today] = useState(() => new Intl.DateTimeFormat("en-CA", { timeZone: f.context.timeZone }).format(/* @__PURE__ */ new Date()));
+	const to = toProp ?? today;
+	const from = fromProp ?? addDays(to, -364);
+	const wd = (day) => (new Date(toUtc(day)).getUTCDay() - weekStartsOn + 7) % 7;
+	const start = addDays(from, -wd(from));
+	const total = Math.round((toUtc(to) - toUtc(start)) / 864e5) + 1;
+	const weeks = Math.ceil(total / 7);
+	const values = useMemo(() => new Map(data.map((d) => [d.date, d.value])), [data]);
+	const [lo, hi] = extentOf(data.map((d) => d.value));
+	const height = 145;
+	const view = useRef({
+		first: 0,
+		count: weeks
+	});
+	const dayAt = (i) => addDays(start, i);
+	const inRange = (i) => {
+		const d = dayAt(i);
+		return d >= from && d <= to;
+	};
+	const longDate = (d) => f.date(/* @__PURE__ */ new Date(`${d}T12:00:00Z`));
+	const weekdayName = (d, style) => new Intl.DateTimeFormat(locale, {
+		weekday: style,
+		timeZone: "UTC"
+	}).format(/* @__PURE__ */ new Date(`${d}T12:00:00Z`));
+	const valueText = (d) => {
+		const v = values.get(d);
+		return isNum(v) ? fmt(v) : t.chartGeoNoData;
+	};
+	const layout = (ctx) => {
+		const fit = Math.max(1, Math.floor((ctx.width - LEFT) / 14));
+		const count = Math.min(weeks, fit);
+		const first = weeks - count;
+		const cell = Math.min(15, (ctx.width - LEFT) / count - GAP);
+		view.current = {
+			first,
+			count
+		};
+		return {
+			first,
+			count,
+			cell
+		};
+	};
+	const pos = (i, l) => ({
+		x: LEFT + (Math.floor(i / 7) - l.first) * (l.cell + GAP),
+		y: TOP + i % 7 * 18
+	});
+	const data_ = (ctx) => {
+		const l = layout(ctx);
+		const out = [];
+		for (let i = l.first * 7; i < Math.min(total, (l.first + l.count) * 7); i++) {
+			if (!inRange(i)) continue;
+			const d = dayAt(i);
+			const p = pos(i, l);
+			out.push({
+				id: `d${i}`,
+				x: p.x + l.cell,
+				y: p.y + 7,
+				title: `${longDate(d)}, ${weekdayName(d, "long")}`,
+				rows: [{
+					label: t.chartValue,
+					value: valueText(d)
+				}],
+				announce: `${longDate(d)}, ${weekdayName(d, "long")}: ${valueText(d)}`
+			});
+		}
+		return out;
+	};
+	const nav = (activeId, key) => {
+		const { first, count } = view.current;
+		const lo_ = Math.max(first * 7, Math.round((toUtc(from) - toUtc(start)) / 864e5));
+		const hi_ = Math.min(total - 1, (first + count) * 7 - 1);
+		if (hi_ < lo_) return null;
+		const i = activeId ? Number(activeId.slice(1)) : -1;
+		const step = {
+			left: -7,
+			right: 7,
+			up: -1,
+			down: 1,
+			home: 0,
+			end: 0
+		};
+		if (key === "home") return `d${lo_}`;
+		if (key === "end") return `d${hi_}`;
+		if (i < 0) return `d${hi_}`;
+		return `d${clamp(i + step[key], lo_, hi_)}`;
+	};
+	const hit = (x, y, ctx) => {
+		const l = layout(ctx);
+		if (x < LEFT || y < TOP) return null;
+		const w = Math.floor((x - LEFT) / (l.cell + GAP)) + l.first;
+		const d = Math.floor((y - TOP) / 18);
+		const i = w * 7 + d;
+		return d < 7 && i < total && inRange(i) ? `d${i}` : null;
+	};
+	const months = (() => {
+		const map = /* @__PURE__ */ new Map();
+		for (let i = 0; i < total; i++) {
+			if (!inRange(i)) continue;
+			const d = dayAt(i);
+			const key = d.slice(0, 7);
+			const m = map.get(key) ?? {
+				sum: 0,
+				days: 0,
+				best: null,
+				bestV: -Infinity
+			};
+			const v = values.get(d);
+			if (isNum(v)) {
+				m.sum += v;
+				if (v > 0) m.days += 1;
+				if (v > m.bestV) {
+					m.bestV = v;
+					m.best = d;
+				}
+			}
+			map.set(key, m);
+		}
+		return [...map.entries()];
+	})();
+	return /* @__PURE__ */ jsx(ChartFrame, {
+		ref,
+		id,
+		className: [CalendarHeatmap_module_default.root, className].filter(Boolean).join(" "),
+		label,
+		title,
+		description,
+		summary: template(t.chartSummaryPoints, { count: data.length }),
+		height,
+		data: data_,
+		nav,
+		hit,
+		legend: /* @__PURE__ */ jsx(ScaleLegend, {
+			low: t.chartLess,
+			high: t.chartMore
+		}),
+		table: {
+			rowHeaderLabel: t.chartMonth,
+			columns: [
+				{
+					id: "sum",
+					label: t.chartTotal
+				},
+				{
+					id: "days",
+					label: t.chartActiveDays
+				},
+				{
+					id: "best",
+					label: t.chartBusiestDay,
+					numeric: false
+				}
+			],
+			rows: months.map(([key, m]) => ({
+				id: key,
+				header: f.monthYear(/* @__PURE__ */ new Date(`${key}-15T12:00:00Z`)),
+				cells: [
+					fmt(m.sum),
+					String(m.days),
+					m.best ? `${longDate(m.best)} (${fmt(m.bestV)})` : null
+				]
+			}))
+		},
+		tableToggle,
+		isEmpty: total <= 0,
+		isLoading,
+		children: (ctx) => {
+			const l = layout(ctx);
+			const monthLabels = [];
+			for (let w = l.first; w < l.first + l.count; w++) {
+				const firstDay = dayAt(w * 7);
+				const lastDay = dayAt(w * 7 + 6);
+				const monthStart = firstDay.slice(8) === "01" || firstDay.slice(0, 7) !== lastDay.slice(0, 7);
+				if (w === l.first || monthStart) {
+					const ref_ = monthStart && firstDay.slice(8) !== "01" ? lastDay : firstDay;
+					const text = new Intl.DateTimeFormat(locale, {
+						month: "short",
+						timeZone: "UTC"
+					}).format(/* @__PURE__ */ new Date(`${ref_.slice(0, 7)}-15T12:00:00Z`));
+					const x = LEFT + (w - l.first) * (l.cell + GAP);
+					if (!monthLabels.length || x - (monthLabels.at(-1)?.x ?? 0) >= 28) monthLabels.push({
+						x,
+						text
+					});
+				}
+			}
+			const cells = [];
+			for (let i = l.first * 7; i < Math.min(total, (l.first + l.count) * 7); i++) {
+				if (!inRange(i)) continue;
+				const d = dayAt(i);
+				const p = pos(i, l);
+				const level = step5(values.get(d), lo, hi);
+				cells.push(/* @__PURE__ */ jsx("rect", {
+					className: `${CalendarHeatmap_module_default.cell} ${heatClass}`,
+					"data-level": level ?? 0,
+					"data-active": ctx.activeId === `d${i}` ? "" : void 0,
+					x: r2(p.x),
+					y: p.y,
+					width: r2(Math.max(1, l.cell)),
+					height: 15,
+					rx: 3
+				}, d));
+			}
+			return /* @__PURE__ */ jsxs("g", { children: [
+				monthLabels.map((m) => /* @__PURE__ */ jsx("text", {
+					className: CalendarHeatmap_module_default.month,
+					x: r2(m.x),
+					y: 12,
+					children: m.text
+				}, `${m.text}-${m.x}`)),
+				[
+					0,
+					2,
+					4
+				].map((r) => /* @__PURE__ */ jsx("text", {
+					className: CalendarHeatmap_module_default.weekday,
+					x: 24,
+					y: TOP + r * 18 + 8,
+					children: weekdayName(dayAt(r), "short")
+				}, r)),
+				cells
+			] });
+		}
+	});
+}
+export { CalendarHeatmap };

package/dist/charts/CalendarHeatmap/CalendarHeatmap.module.js

@@ -0,0 +1,9 @@
+import './CalendarHeatmap.css';
+// src/charts/CalendarHeatmap/CalendarHeatmap.module.css
+var CalendarHeatmap_module_default = {
+	"root": "sti-CalendarHeatmap-root-ed014",
+	"cell": "sti-CalendarHeatmap-cell-e1be6",
+	"month": "sti-CalendarHeatmap-month-53dfc",
+	"weekday": "sti-CalendarHeatmap-weekday-58629"
+};
+export { CalendarHeatmap_module_default as default };

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

@@ -0,0 +1,2 @@
+import { CalendarHeatmap, CalendarHeatmapDatum, CalendarHeatmapProps } from "./CalendarHeatmap.js";
+export { CalendarHeatmap, CalendarHeatmapDatum, CalendarHeatmapProps };

package/dist/charts/DonutChart/DonutChart.css

@@ -0,0 +1,24 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-DonutChart-root-ec649 {
+    width: 100%;
+    min-width: 0;
+  }
+
+  .sti-DonutChart-total-edd37 {
+    fill: var(--sti-fg);
+    font-family: var(--sti-font-numeric);
+    font-size: var(--sti-font-size-xl);
+    font-variant-numeric: tabular-nums;
+    font-weight: var(--sti-font-weight-semibold);
+    text-anchor: middle;
+    dominant-baseline: auto;
+  }
+
+  .sti-DonutChart-centerLabel-fa561 {
+    fill: var(--sti-fg-muted);
+    font-family: var(--sti-font-text);
+    font-size: var(--sti-font-size-xs);
+    text-anchor: middle;
+  }
+}

package/dist/charts/DonutChart/DonutChart.d.ts

@@ -0,0 +1,30 @@
+import { ChartValueFormat } from "../_internal/format.js";
+import { ChartDatum } from "../_internal/items.js";
+import { ReactNode, Ref } from "react";
+export interface DonutChartProps {
+  /** Grafiğin erişilebilir adı (zorunlu). */
+  label: string;
+  title?: ReactNode;
+  description?: ReactNode;
+  /** Dilimler (sıfırdan büyük değerler çizilir). */
+  data: readonly ChartDatum[];
+  valueFormat?: ChartValueFormat;
+  /** `donut` ortası boş (toplam yazılır), `pie` dolu. */
+  variant?: "donut" | "pie";
+  /** Ortadaki toplamın adı; verilmezse "Toplam". */
+  centerLabel?: string;
+  showLegend?: boolean;
+  tableToggle?: boolean;
+  isLoading?: boolean;
+  height?: number;
+  className?: string;
+  id?: string;
+  ref?: Ref<HTMLElement>;
+}
+/**
+ * Halka (ya da pasta) grafiği: bütünün paylarını gösterir (kanal başına bütçe, trafik
+ * kaynakları). En çok 6–7 dilim önerilir; küçük paylar "Diğer" altında toplanmalıdır. Oklar
+ * dilimler arasında gezer, ipucu değer ve payı yazar; gösterge değer ve yüzdeyi verir; tablo
+ * görünümü vardır.
+ */
+export declare function DonutChart({ label, title, description, data, valueFormat, variant, centerLabel, showLegend, tableToggle, isLoading, height, className, id, ref }: DonutChartProps): import("react").JSX.Element;

package/dist/charts/DonutChart/DonutChart.js

@@ -0,0 +1,157 @@
+"use client";
+import { useFormatter, useMessages } from "../../provider/UIProvider.js";
+import { template } from "../../text/text.js";
+import { isNum } from "../_internal/math.js";
+import { arcPath, polar } from "../_internal/shapes.js";
+import { SliceMark } 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 DonutChart_module_default from "./DonutChart.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/charts/DonutChart/DonutChart.tsx
+const GAP = .012;
+/**
+* Halka (ya da pasta) grafiği: bütünün paylarını gösterir (kanal başına bütçe, trafik
+* kaynakları). En çok 6–7 dilim önerilir; küçük paylar "Diğer" altında toplanmalıdır. Oklar
+* dilimler arasında gezer, ipucu değer ve payı yazar; gösterge değer ve yüzdeyi verir; tablo
+* görünümü vardır.
+*/
+function DonutChart({ label, title, description, data, valueFormat, variant = "donut", centerLabel, showLegend = true, tableToggle = false, isLoading = false, height = 240, className, id, ref }) {
+	const t = useMessages();
+	const fmt = useValueFormat(valueFormat);
+	const formatter = useFormatter();
+	const share = (r) => formatter.number(r, {
+		style: "percent",
+		maximumFractionDigits: 1
+	});
+	const items = data.filter((d) => isNum(d.value) && d.value > 0);
+	const total = items.reduce((s, d) => s + d.value, 0);
+	let acc = 0;
+	const slices = items.map((d, i) => {
+		const a0 = acc / total * Math.PI * 2;
+		acc += d.value;
+		return {
+			d,
+			i,
+			a0,
+			a1: acc / total * Math.PI * 2,
+			c: toneIndex(d.tone, i),
+			ratio: d.value / total
+		};
+	});
+	const geom = (ctx) => {
+		const r1 = Math.max(24, Math.min(ctx.height, ctx.width) / 2 - 8);
+		const r0 = variant === "donut" ? r1 * .62 : 0;
+		return {
+			cx: ctx.width / 2,
+			cy: ctx.height / 2,
+			r0,
+			r1
+		};
+	};
+	const rows = (k) => {
+		const s = slices[k];
+		return s ? [{
+			label: s.d.label,
+			value: fmt(s.d.value),
+			series: s.c
+		}, {
+			label: t.chartShare,
+			value: share(s.ratio)
+		}] : [];
+	};
+	const data_ = (ctx) => {
+		const g = geom(ctx);
+		return slices.map((s, k) => {
+			const mid = polar(g.cx, g.cy, (g.r0 + g.r1) / 2, (s.a0 + s.a1) / 2);
+			return {
+				id: `i${k}`,
+				x: mid.x,
+				y: mid.y,
+				rows: rows(k),
+				announce: `${s.d.label}: ${fmt(s.d.value)}, ${share(s.ratio)}`
+			};
+		});
+	};
+	const hit = (x, y, ctx) => {
+		const g = geom(ctx);
+		const dx = x - g.cx;
+		const dy = y - g.cy;
+		const r = Math.hypot(dx, dy);
+		if (r > g.r1 + 4 || r < g.r0 - 4) return null;
+		let a = Math.atan2(dx, -dy);
+		if (a < 0) a += Math.PI * 2;
+		const k = slices.findIndex((s) => a >= s.a0 && a < s.a1);
+		return k >= 0 ? `i${k}` : null;
+	};
+	const legend = showLegend ? /* @__PURE__ */ jsx(ChartLegend, { items: slices.map((s) => ({
+		id: s.d.id,
+		label: s.d.label,
+		series: s.c,
+		kind: "bar",
+		value: share(s.ratio)
+	})) }) : null;
+	return /* @__PURE__ */ jsx(ChartFrame, {
+		ref,
+		id,
+		className: [DonutChart_module_default.root, className].filter(Boolean).join(" "),
+		label,
+		title,
+		description,
+		summary: template(t.chartSummaryPoints, { count: slices.length }),
+		height,
+		data: data_,
+		nav: linearNav(slices.length),
+		hit,
+		legend,
+		table: {
+			rowHeaderLabel: t.chartCategory,
+			columns: [{
+				id: "value",
+				label: t.chartValue
+			}, {
+				id: "share",
+				label: t.chartShare
+			}],
+			rows: slices.map((s, k) => ({
+				id: `i${k}`,
+				header: s.d.label,
+				cells: [fmt(s.d.value), share(s.ratio)]
+			})),
+			footer: {
+				header: t.chartTotal,
+				cells: [fmt(total), share(1)]
+			}
+		},
+		tableToggle,
+		isEmpty: slices.length === 0,
+		isLoading,
+		children: (ctx) => {
+			const g = geom(ctx);
+			const active = ctx.activeId ? Number(ctx.activeId.slice(1)) : -1;
+			const single = slices.length === 1;
+			return /* @__PURE__ */ jsxs("g", { children: [slices.map((s, k) => {
+				const pad = single ? 0 : GAP;
+				const grow = k === active ? 4 : 0;
+				return /* @__PURE__ */ jsx(SliceMark, {
+					s: s.c,
+					dim: active >= 0 && k !== active,
+					d: arcPath(g.cx, g.cy, g.r0, g.r1 + grow, s.a0 + pad, s.a1 - pad)
+				}, s.d.id);
+			}), variant === "donut" ? /* @__PURE__ */ jsxs("g", { children: [/* @__PURE__ */ jsx("text", {
+				className: DonutChart_module_default.total,
+				x: g.cx,
+				y: g.cy - 2,
+				children: active >= 0 ? share(slices[active]?.ratio ?? 0) : fmt(total)
+			}), /* @__PURE__ */ jsx("text", {
+				className: DonutChart_module_default.centerLabel,
+				x: g.cx,
+				y: g.cy + 18,
+				children: active >= 0 ? slices[active]?.d.label ?? "" : centerLabel ?? t.chartTotal
+			})] }) : null] });
+		}
+	});
+}
+export { DonutChart };

package/dist/charts/DonutChart/DonutChart.module.js

@@ -0,0 +1,8 @@
+import './DonutChart.css';
+// src/charts/DonutChart/DonutChart.module.css
+var DonutChart_module_default = {
+	"root": "sti-DonutChart-root-ec649",
+	"total": "sti-DonutChart-total-edd37",
+	"centerLabel": "sti-DonutChart-centerLabel-fa561"
+};
+export { DonutChart_module_default as default };

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

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

package/dist/charts/FunnelChart/FunnelChart.css

@@ -0,0 +1,47 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-FunnelChart-root-ce217 {
+    width: 100%;
+    min-width: 0;
+  }
+
+  .sti-FunnelChart-track-cb66a {
+    fill: var(--sti-bg-surface-hover);
+  }
+
+  .sti-FunnelChart-stage-83f71, .sti-FunnelChart-value-a79b0 {
+    font-family: var(--sti-font-text);
+    dominant-baseline: central;
+    font-size: 13px;
+  }
+
+  .sti-FunnelChart-stage-83f71 {
+    fill: var(--sti-fg);
+    text-anchor: end;
+  }
+
+  .sti-FunnelChart-value-a79b0 {
+    fill: var(--sti-fg);
+    font-family: var(--sti-font-numeric);
+    font-variant-numeric: tabular-nums;
+    font-weight: var(--sti-font-weight-semibold);
+    text-anchor: start;
+  }
+
+  .sti-FunnelChart-stageTop-11d8d {
+    fill: var(--sti-fg);
+    font-family: var(--sti-font-text);
+    font-size: 12px;
+    font-weight: var(--sti-font-weight-medium);
+    dominant-baseline: central;
+  }
+
+  .sti-FunnelChart-conversion-b988f {
+    fill: var(--sti-fg-muted);
+    font-family: var(--sti-font-numeric);
+    font-variant-numeric: tabular-nums;
+    text-anchor: middle;
+    dominant-baseline: central;
+    font-size: 11px;
+  }
+}

package/dist/charts/FunnelChart/FunnelChart.d.ts

@@ -0,0 +1,22 @@
+import { ChartValueFormat } from "../_internal/format.js";
+import { ChartDatum } from "../_internal/items.js";
+import { ReactNode, Ref } from "react";
+export interface FunnelChartProps {
+  label: string;
+  title?: ReactNode;
+  description?: ReactNode;
+  /** Aşamalar (sırasıyla): gösterim, tıklama, sepete ekleme, satın alma. */
+  data: readonly ChartDatum[];
+  valueFormat?: ChartValueFormat;
+  tableToggle?: boolean;
+  isLoading?: boolean;
+  className?: string;
+  id?: string;
+  ref?: Ref<HTMLElement>;
+}
+/**
+ * Huni grafiği: ardışık aşamalarda kalan kitle (gösterim → tıklama → form → satış). Çubuklar
+ * ortalı, genişlik ilk aşamaya oranlı; aşamalar arasında bir sonrakine geçiş oranı yazılır.
+ * İpucu ve tablo önceki ve ilk aşamaya oranı verir. Oklar aşamalar arasında gezer.
+ */
+export declare function FunnelChart({ label, title, description, data, valueFormat, tableToggle, isLoading, className, id, ref }: FunnelChartProps): import("react").JSX.Element;