@stisocial/ui 0.2.0 → 0.3.0

package/dist/charts/FunnelChart/FunnelChart.js

@@ -0,0 +1,179 @@
+"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 FunnelChart_module_default from "./FunnelChart.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/charts/FunnelChart/FunnelChart.tsx
+const ROW = 40;
+const GAP = 22;
+/**
+* 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.
+*/
+function FunnelChart({ label, title, description, data, valueFormat, tableToggle = false, isLoading = false, className, id, ref }) {
+	const t = useMessages();
+	const fmt = useValueFormat(valueFormat);
+	const f = useFormatter();
+	const pct = (r) => f.number(r, {
+		style: "percent",
+		maximumFractionDigits: 1
+	});
+	const stages = data.filter((d) => isNum(d.value));
+	const first = stages[0]?.value ?? 0;
+	const height = stages.length * ROW + Math.max(0, stages.length - 1) * GAP;
+	const ratioPrev = (k) => {
+		const prev = stages[k - 1]?.value;
+		return k === 0 || !prev ? null : (stages[k]?.value ?? 0) / prev;
+	};
+	const ratioFirst = (k) => first ? (stages[k]?.value ?? 0) / first : null;
+	const layout = (ctx) => {
+		const labelW = ctx.compact ? 0 : Math.min(ctx.width * .3, Math.max(...stages.map((s) => textWidth(s.label, 13)), 0) + 16);
+		const valueW = Math.max(...stages.map((s) => textWidth(fmt(s.value), 13)), 0) + 16;
+		const barW = Math.max(40, ctx.width - labelW - valueW);
+		return {
+			labelW,
+			valueW,
+			barW,
+			cx: labelW + barW / 2
+		};
+	};
+	const y = (k) => k * 62;
+	const rows = (k) => {
+		const s = stages[k];
+		if (!s) return [];
+		const p = ratioPrev(k);
+		const r = ratioFirst(k);
+		return [
+			{
+				label: s.label,
+				value: fmt(s.value),
+				series: toneIndex(s.tone, 0)
+			},
+			...p !== null ? [{
+				label: t.chartFunnelPrevious,
+				value: pct(p)
+			}] : [],
+			...r !== null && k > 0 ? [{
+				label: t.chartFunnelFirst,
+				value: pct(r)
+			}] : []
+		];
+	};
+	const data_ = (ctx) => {
+		const l = layout(ctx);
+		return stages.map((s, k) => ({
+			id: `i${k}`,
+			x: l.cx + s.value / (first || 1) * l.barW / 2,
+			y: y(k) + ROW / 2,
+			rows: rows(k),
+			announce: rows(k).map((r) => `${r.label}: ${r.value}`).join(", ")
+		}));
+	};
+	const hit = (_x, yy) => {
+		const k = Math.floor(yy / 62);
+		return k >= 0 && k < stages.length && yy - y(k) <= ROW ? `i${k}` : null;
+	};
+	return /* @__PURE__ */ jsx(ChartFrame, {
+		ref,
+		id,
+		className: [FunnelChart_module_default.root, className].filter(Boolean).join(" "),
+		label,
+		title,
+		description,
+		summary: template(t.chartSummaryPoints, { count: stages.length }),
+		height: Math.max(height, ROW),
+		data: data_,
+		nav: linearNav(stages.length),
+		hit,
+		table: {
+			rowHeaderLabel: t.chartCategory,
+			columns: [
+				{
+					id: "value",
+					label: t.chartValue
+				},
+				{
+					id: "prev",
+					label: t.chartFunnelPrevious
+				},
+				{
+					id: "first",
+					label: t.chartFunnelFirst
+				}
+			],
+			rows: stages.map((s, k) => {
+				const p = ratioPrev(k);
+				const r = ratioFirst(k);
+				return {
+					id: `i${k}`,
+					header: s.label,
+					cells: [
+						fmt(s.value),
+						p === null ? null : pct(p),
+						r === null ? null : pct(r)
+					]
+				};
+			})
+		},
+		tableToggle,
+		isEmpty: stages.length === 0 || first <= 0,
+		isLoading,
+		children: (ctx) => {
+			const l = layout(ctx);
+			const active = ctx.activeId ? Number(ctx.activeId.slice(1)) : -1;
+			return /* @__PURE__ */ jsx("g", { children: stages.map((s, k) => {
+				const w = Math.max(3, s.value / first * l.barW);
+				const p = ratioPrev(k + 1);
+				return /* @__PURE__ */ jsxs("g", { children: [
+					/* @__PURE__ */ jsx("rect", {
+						className: FunnelChart_module_default.track,
+						x: r2(l.labelW),
+						y: ctx.compact ? y(k) + 18 : y(k),
+						width: r2(l.barW),
+						height: ctx.compact ? 22 : ROW,
+						rx: 6
+					}),
+					/* @__PURE__ */ jsx(BarMark, {
+						s: toneIndex(s.tone, 0),
+						x: l.cx - w / 2,
+						y: ctx.compact ? y(k) + 18 : y(k),
+						width: w,
+						height: ctx.compact ? 22 : ROW,
+						radius: Math.min(6, w / 2),
+						dim: active >= 0 && k !== active
+					}),
+					ctx.compact ? /* @__PURE__ */ jsx("text", {
+						className: FunnelChart_module_default.stageTop,
+						x: 0,
+						y: y(k) + 7,
+						children: s.label
+					}) : /* @__PURE__ */ jsx("text", {
+						className: FunnelChart_module_default.stage,
+						x: l.labelW - 12,
+						y: y(k) + ROW / 2,
+						children: s.label
+					}),
+					/* @__PURE__ */ jsx("text", {
+						className: FunnelChart_module_default.value,
+						x: r2(l.labelW + l.barW + 8),
+						y: ctx.compact ? y(k) + 18 + 11 : y(k) + ROW / 2,
+						children: fmt(s.value)
+					}),
+					p !== null && k < stages.length - 1 ? /* @__PURE__ */ jsx("text", {
+						className: FunnelChart_module_default.conversion,
+						x: r2(l.cx),
+						y: y(k) + ROW + GAP / 2,
+						children: `↓ ${pct(p)}`
+					}) : null
+				] }, s.id);
+			}) });
+		}
+	});
+}
+export { FunnelChart };

package/dist/charts/FunnelChart/FunnelChart.module.js

@@ -0,0 +1,11 @@
+import './FunnelChart.css';
+// src/charts/FunnelChart/FunnelChart.module.css
+var FunnelChart_module_default = {
+	"root": "sti-FunnelChart-root-ce217",
+	"track": "sti-FunnelChart-track-cb66a",
+	"stage": "sti-FunnelChart-stage-83f71",
+	"value": "sti-FunnelChart-value-a79b0",
+	"stageTop": "sti-FunnelChart-stageTop-11d8d",
+	"conversion": "sti-FunnelChart-conversion-b988f"
+};
+export { FunnelChart_module_default as default };

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

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

package/dist/charts/Gauge/Gauge.css

@@ -0,0 +1,122 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-Gauge-root-cc18d {
+    justify-items: center;
+    gap: var(--sti-space-1);
+    inline-size: 14rem;
+    max-inline-size: 100%;
+    color: var(--sti-fg);
+    font-family: var(--sti-font-text);
+    display: inline-grid;
+  }
+
+  .sti-Gauge-root-cc18d[data-size="sm"] {
+    inline-size: 10rem;
+  }
+
+  .sti-Gauge-root-cc18d[data-size="lg"] {
+    inline-size: 20rem;
+  }
+
+  .sti-Gauge-svg-fd727 {
+    block-size: auto;
+    inline-size: 100%;
+    display: block;
+    overflow: visible;
+  }
+
+  .sti-Gauge-track-80a87 {
+    fill: var(--sti-bg-surface-hover);
+  }
+
+  .sti-Gauge-band-f5d98 {
+    opacity: .9;
+    stroke: none;
+  }
+
+  .sti-Gauge-svg-fd727 path.sti-Gauge-value-a40ee {
+    stroke: none;
+  }
+
+  .sti-Gauge-target-68c01 {
+    stroke: var(--sti-fg);
+    stroke-width: 2.5px;
+    stroke-linecap: round;
+  }
+
+  .sti-Gauge-svg-fd727 text.sti-Gauge-value-a40ee {
+    fill: var(--sti-fg);
+    font-family: var(--sti-font-numeric);
+    font-variant-numeric: tabular-nums;
+    font-size: 26px;
+    font-weight: var(--sti-font-weight-semibold);
+    text-anchor: middle;
+  }
+
+  .sti-Gauge-end-a613e {
+    fill: var(--sti-fg-muted);
+    font-family: var(--sti-font-numeric);
+    text-anchor: middle;
+    dominant-baseline: hanging;
+    font-size: 11px;
+  }
+
+  .sti-Gauge-caption-94e59 {
+    text-align: center;
+    justify-items: center;
+    gap: 2px;
+    display: grid;
+  }
+
+  .sti-Gauge-label-52593 {
+    font-size: var(--sti-font-size-sm);
+    font-weight: var(--sti-font-weight-medium);
+  }
+
+  .sti-Gauge-bandLabel-4cd89 {
+    padding: 0 var(--sti-space-2);
+    border-radius: var(--sti-radius-pill);
+    background: var(--sti-bg-surface-hover);
+    font-size: var(--sti-font-size-xs);
+    font-weight: var(--sti-font-weight-semibold);
+  }
+
+  .sti-Gauge-bandLabel-4cd89[data-s="2"] {
+    background: var(--sti-bg-success-subtle);
+    color: var(--sti-fg-success);
+  }
+
+  .sti-Gauge-bandLabel-4cd89[data-s="1"] {
+    background: var(--sti-bg-warning-subtle);
+    color: var(--sti-fg-warning);
+  }
+
+  .sti-Gauge-bandLabel-4cd89[data-s="3"] {
+    background: var(--sti-bg-danger-subtle);
+    color: var(--sti-fg-danger);
+  }
+
+  .sti-Gauge-bandLabel-4cd89[data-s="0"] {
+    background: var(--sti-bg-accent-subtle);
+    color: var(--sti-fg-accent-strong);
+  }
+
+  .sti-Gauge-note-be6ed {
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-font-size-xs);
+  }
+
+  @media (forced-colors: active) {
+    .sti-Gauge-track-80a87 {
+      fill: graytext;
+    }
+
+    .sti-Gauge-svg-fd727 path.sti-Gauge-value-a40ee {
+      fill: highlight;
+    }
+
+    .sti-Gauge-target-68c01 {
+      stroke: canvastext;
+    }
+  }
+}

package/dist/charts/Gauge/Gauge.d.ts

@@ -0,0 +1,35 @@
+import { ChartValueFormat } from "../_internal/format.js";
+import { ChartTone } from "../_internal/items.js";
+import { ReactNode } from "react";
+export interface GaugeBand {
+  /** Bandın üst sınırı (dahil); son bant `max`'a kadar sürer. */
+  to: number;
+  tone: ChartTone;
+  /** Bandın adı ("Riskli", "Hedefte"): değer bu bantta olunca okunur. */
+  label?: string;
+}
+export interface GaugeProps {
+  /** Ne ölçtüğü (zorunlu): "Bütçe kullanımı". */
+  label: string;
+  value: number | null;
+  min?: number;
+  max?: number;
+  valueFormat?: ChartValueFormat;
+  /** Eşik bantları (artan sırada); değerin rengi içinde bulunduğu bandın tonudur. */
+  bands?: readonly GaugeBand[];
+  /** Bant yoksa değerin tonu. */
+  tone?: ChartTone;
+  /** Hedef çizgisi. */
+  target?: number;
+  /** Değerin altında kısa açıklama ("Aylık 50.000 ₺ bütçenin"). */
+  caption?: ReactNode;
+  size?: "sm" | "md" | "lg";
+  className?: string;
+  id?: string;
+}
+/**
+ * Gösterge (yarım daire): tek bir değerin aralıktaki yerini gösterir (bütçe kullanımı, hedefe
+ * ulaşma, kalite puanı). Erişilebilir `meter` rolündedir; değer, aralık ve bant adı okunur.
+ * Renk tek başına anlam taşımaz: değer ve bant adı yazılıdır.
+ */
+export declare function Gauge({ label, value, min, max, valueFormat, bands, tone, target, caption, size, className, id }: GaugeProps): import("react").JSX.Element;

package/dist/charts/Gauge/Gauge.js

@@ -0,0 +1,132 @@
+"use client";
+import { useMessages } from "../../provider/UIProvider.js";
+import { template } from "../../text/text.js";
+import { clamp, isNum } from "../_internal/math.js";
+import { arcPath, polar } from "../_internal/shapes.js";
+import marks_module_default from "../_internal/marks/marks.module.js";
+import { useValueFormat } from "../_internal/format.js";
+import { toneIndex } from "../_internal/items.js";
+import Gauge_module_default from "./Gauge.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/charts/Gauge/Gauge.tsx
+const START = -Math.PI / 2;
+const SWEEP = Math.PI;
+/**
+* Gösterge (yarım daire): tek bir değerin aralıktaki yerini gösterir (bütçe kullanımı, hedefe
+* ulaşma, kalite puanı). Erişilebilir `meter` rolündedir; değer, aralık ve bant adı okunur.
+* Renk tek başına anlam taşımaz: değer ve bant adı yazılıdır.
+*/
+function Gauge({ label, value, min = 0, max = 100, valueFormat, bands, tone = "accent", target, caption, size = "md", className, id }) {
+	const t = useMessages();
+	const fmt = useValueFormat(valueFormat);
+	const w = 200;
+	const cx = 100;
+	const cy = 100;
+	const r1 = 92;
+	const r0 = 72;
+	const ratio = (v) => clamp((v - min) / Math.max(1e-9, max - min), 0, 1);
+	const angle = (v) => START + ratio(v) * SWEEP;
+	const has = isNum(value);
+	const band = has ? bands?.find((b) => value <= b.to) ?? bands?.at(-1) : void 0;
+	const c = toneIndex(band?.tone ?? tone, 0);
+	const valueText = has ? fmt(value) : "–";
+	const rangeText = template(t.chartGaugeRange, {
+		min: fmt(min),
+		max: fmt(max)
+	});
+	const targetPoint = isNum(target) ? [polar(cx, cy, 68, angle(target)), polar(cx, cy, 96, angle(target))] : null;
+	let from = min;
+	const bandArcs = (bands ?? []).map((b) => {
+		const a0 = angle(from);
+		const a1 = angle(Math.min(b.to, max));
+		from = b.to;
+		return {
+			b,
+			a0,
+			a1
+		};
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		id,
+		className: [Gauge_module_default.root, className].filter(Boolean).join(" "),
+		"data-size": size,
+		role: "meter",
+		"aria-label": label,
+		"aria-valuemin": min,
+		"aria-valuemax": max,
+		"aria-valuenow": has ? value : void 0,
+		"aria-valuetext": [
+			valueText,
+			band?.label,
+			rangeText
+		].filter(Boolean).join(", "),
+		children: [/* @__PURE__ */ jsxs("svg", {
+			className: Gauge_module_default.svg,
+			viewBox: `0 0 ${w} 108`,
+			"aria-hidden": "true",
+			focusable: "false",
+			children: [
+				/* @__PURE__ */ jsx("path", {
+					className: Gauge_module_default.track,
+					d: arcPath(cx, cy, r0, r1, START, START + SWEEP)
+				}),
+				bandArcs.map(({ b, a0, a1 }) => /* @__PURE__ */ jsx("path", {
+					className: `${marks_module_default.mark} ${Gauge_module_default.band}`,
+					"data-kind": "slice",
+					"data-s": toneIndex(b.tone, 0),
+					d: arcPath(cx, cy, 95, 98, a0, a1)
+				}, `${b.to}-${b.tone}`)),
+				has && ratio(value) > 0 ? /* @__PURE__ */ jsx("path", {
+					className: `${marks_module_default.mark} ${Gauge_module_default.value}`,
+					"data-kind": "slice",
+					"data-s": c,
+					d: arcPath(cx, cy, r0, r1, START, angle(value))
+				}) : null,
+				targetPoint ? /* @__PURE__ */ jsx("line", {
+					className: Gauge_module_default.target,
+					x1: targetPoint[0]?.x,
+					y1: targetPoint[0]?.y,
+					x2: targetPoint[1]?.x,
+					y2: targetPoint[1]?.y
+				}) : null,
+				/* @__PURE__ */ jsx("text", {
+					className: Gauge_module_default.value,
+					x: cx,
+					y: 86,
+					children: valueText
+				}),
+				/* @__PURE__ */ jsx("text", {
+					className: Gauge_module_default.end,
+					x: 18,
+					y: 106,
+					children: fmt(min)
+				}),
+				/* @__PURE__ */ jsx("text", {
+					className: Gauge_module_default.end,
+					x: 182,
+					y: 106,
+					children: fmt(max)
+				})
+			]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: Gauge_module_default.caption,
+			"aria-hidden": "true",
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					className: Gauge_module_default.label,
+					children: label
+				}),
+				band?.label ? /* @__PURE__ */ jsx("span", {
+					className: Gauge_module_default.bandLabel,
+					"data-s": c,
+					children: band.label
+				}) : null,
+				caption ? /* @__PURE__ */ jsx("span", {
+					className: Gauge_module_default.note,
+					children: caption
+				}) : null
+			]
+		})]
+	});
+}
+export { Gauge };

package/dist/charts/Gauge/Gauge.module.js

@@ -0,0 +1,16 @@
+import './Gauge.css';
+// src/charts/Gauge/Gauge.module.css
+var Gauge_module_default = {
+	"root": "sti-Gauge-root-cc18d",
+	"svg": "sti-Gauge-svg-fd727",
+	"track": "sti-Gauge-track-80a87",
+	"band": "sti-Gauge-band-f5d98",
+	"value": "sti-Gauge-value-a40ee",
+	"target": "sti-Gauge-target-68c01",
+	"end": "sti-Gauge-end-a613e",
+	"caption": "sti-Gauge-caption-94e59",
+	"label": "sti-Gauge-label-52593",
+	"bandLabel": "sti-Gauge-bandLabel-4cd89",
+	"note": "sti-Gauge-note-be6ed"
+};
+export { Gauge_module_default as default };

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

@@ -0,0 +1,2 @@
+import { Gauge, GaugeBand, GaugeProps } from "./Gauge.js";
+export { Gauge, GaugeBand, GaugeProps };