@siyahi/ui 0.1.9-next.24 → 0.1.9-next.25

package/dist/lib/scatter.js

@@ -0,0 +1,218 @@
+//#region src/lib/scatter.ts
+/**
+* Ticks for a log axis at 1, 2 and 5 times a power of ten, from the largest at or under min to the smallest at or
+* over max, so the axis ends on a tick and every label reads as a round number.
+*/
+function logTicks(min, max) {
+	if (!(min > 0) || !Number.isFinite(max) || !(max >= min)) return [];
+	const ticks = [];
+	for (let decade = Math.floor(Math.log10(min));; decade++) for (const step of [
+		1,
+		2,
+		5
+	]) {
+		const tick = Number((step * 10 ** decade).toPrecision(12));
+		if (Number(((step === 5 ? 10 : step === 2 ? 5 : 2) * 10 ** decade).toPrecision(12)) <= min) continue;
+		ticks.push(tick);
+		if (tick >= max) return ticks;
+	}
+}
+const clean = (value) => Number(value.toPrecision(12)) || 0;
+/**
+* Ticks for a linear axis that just covers min to max, about `count` of them, a step of 1, 2, 2.5 or 5 times a power
+* of ten: −50% to +75% by 25s, never −50% to +150% because the step had to be 50. Values that differ only by float
+* noise, such as 0.3 and 0.30000000000000004, count as one value and get that value as their only tick.
+*/
+function linearTicks(min, max, count = 5) {
+	if (!Number.isFinite(min) || !Number.isFinite(max) || max < min) return [];
+	if (max - min <= Math.max(Math.abs(min), Math.abs(max)) * 1e-9) return [clean(min)];
+	const rough = (max - min) / (count - 1);
+	const power = 10 ** Math.floor(Math.log10(rough));
+	const step = ([
+		1,
+		2,
+		2.5,
+		5,
+		10
+	].find((m) => m * power >= rough * (1 - 1e-9)) ?? 10) * power;
+	const first = Math.floor(min / step + 1e-9);
+	const last = Math.ceil(max / step - 1e-9);
+	return Array.from({ length: last - first + 1 }, (_, i) => clean((first + i) * step));
+}
+const HALO = 2;
+const GAP = 4;
+const overlaps = (a, b) => a.x < b.x + b.width && b.x < a.x + a.width && a.y < b.y + b.height && b.y < a.y + a.height;
+/**
+* Names beside dots, in the candidates' order, up to `limit`: each tries the right of its dot, then the left, above,
+* below and the four corners, and takes the first spot inside the plot that covers no other label, no other dot and
+* nothing `reserved` (such as a quadrant's name). A name that finds no spot is left to the tooltip, so labels never sit
+* on top of each other.
+*/
+function placeLabels(candidates, plot, limit, { size, measure }, reserved = []) {
+	const line = size * 4 / 3;
+	const dots = candidates.map(({ key, cx, cy, r }) => ({
+		key,
+		box: {
+			x: cx - r,
+			y: cy - r,
+			width: r * 2,
+			height: r * 2
+		}
+	}));
+	const taken = [...reserved];
+	const placed = [];
+	for (const { key, text, cx, cy, r: radius } of candidates) {
+		if (placed.length >= limit) break;
+		const width = measure(text) + 4;
+		const spot = [
+			{
+				x: cx + radius + GAP,
+				y: cy - line / 2,
+				width,
+				height: line
+			},
+			{
+				x: cx - radius - GAP - width,
+				y: cy - line / 2,
+				width,
+				height: line
+			},
+			{
+				x: cx - width / 2,
+				y: cy - radius - GAP - line,
+				width,
+				height: line
+			},
+			{
+				x: cx - width / 2,
+				y: cy + radius + GAP,
+				width,
+				height: line
+			},
+			{
+				x: cx + radius,
+				y: cy - radius - line,
+				width,
+				height: line
+			},
+			{
+				x: cx - radius - width,
+				y: cy - radius - line,
+				width,
+				height: line
+			},
+			{
+				x: cx + radius,
+				y: cy + radius,
+				width,
+				height: line
+			},
+			{
+				x: cx - radius - width,
+				y: cy + radius,
+				width,
+				height: line
+			}
+		].find((box) => box.x >= plot.x && box.y >= plot.y && box.x + box.width <= plot.x + plot.width && box.y + box.height <= plot.y + plot.height && !taken.some((other) => overlaps(box, other)) && !dots.some((dot) => dot.key !== key && overlaps(box, dot.box)));
+		if (!spot) continue;
+		taken.push(spot);
+		placed.push({
+			key,
+			text,
+			x: spot.x + HALO,
+			y: spot.y + size
+		});
+	}
+	return placed;
+}
+/** A split a log axis cannot place, at or below zero, or one that is not a number, is no split at all. */
+function quadrantSplit(quadrants, xScale) {
+	if (!quadrants || !Number.isFinite(quadrants.x) || !Number.isFinite(quadrants.y)) return void 0;
+	return xScale === "linear" || quadrants.x > 0 ? quadrants : void 0;
+}
+/** The largest sized dot; the smallest stays big enough to see and to tap. */
+const MAX_RADIUS = 20;
+const MIN_RADIUS = 3;
+/** A size that is not a positive number (NaN, Infinity, a negative) weighs nothing. */
+const weight = (p) => p.size !== void 0 && Number.isFinite(p.size) && p.size > 0 ? p.size : 0;
+/**
+* Each dot's radius. Area, not radius, follows size, so a holding twice as large has twice the ink. A size that weighs
+* nothing draws the smallest dot, so it cannot shrink or hide the others. Points without sizes all take `plain`.
+*/
+function dotSizes(points, plain) {
+	const largest = points.reduce((most, p) => Math.max(most, weight(p)), 0);
+	const sized = points.some((p) => p.size !== void 0);
+	const radiusOf = (p) => {
+		if (!sized || p.size === void 0) return plain;
+		return largest > 0 ? Math.max(MIN_RADIUS, 20 * Math.sqrt(weight(p) / largest)) : MIN_RADIUS;
+	};
+	return {
+		radiusOf,
+		sized
+	};
+}
+/** Words broken into lines no wider than `width`; a word wider than that keeps a line of its own. */
+function wrap(text, width, measure) {
+	const lines = [];
+	for (const word of text.split(" ")) {
+		const last = lines.at(-1);
+		if (last !== void 0 && measure(`${last} ${word}`) <= width) lines[lines.length - 1] = `${last} ${word}`;
+		else lines.push(word);
+	}
+	return lines;
+}
+/**
+* Each corner's name in the plot's corner, in the band the y axis keeps clear above or below the data, wrapped to its
+* own quadrant's width so two names on one edge never meet: where its lines are drawn, and the box they take.
+*/
+function corners(plot, names, split, type) {
+	if (!names || !split) return [];
+	const line = type.size * 4 / 3;
+	const inset = 6;
+	return [
+		[
+			names.topLeft,
+			"left",
+			"top"
+		],
+		[
+			names.topRight,
+			"right",
+			"top"
+		],
+		[
+			names.bottomLeft,
+			"left",
+			"bottom"
+		],
+		[
+			names.bottomRight,
+			"right",
+			"bottom"
+		]
+	].flatMap(([text, side, edge]) => {
+		if (!text) return [];
+		const room = (side === "left" ? split.x - plot.x : plot.x + plot.width - split.x) - 12;
+		const lines = wrap(text, Math.max(room, 0), type.measure);
+		const width = Math.max(...lines.map(type.measure));
+		if (lines.length > 2 || width > room) return [];
+		const height = lines.length * line;
+		const x = side === "left" ? plot.x + inset : plot.x + plot.width - inset - width;
+		const top = edge === "top" ? plot.y + inset : plot.y + plot.height - inset - height;
+		return [{
+			key: `${side}-${edge}`,
+			lines,
+			x,
+			y: top + type.size,
+			line,
+			box: {
+				x,
+				y: top,
+				width,
+				height
+			}
+		}];
+	});
+}
+//#endregion
+export { MAX_RADIUS, corners, dotSizes, linearTicks, logTicks, placeLabels, quadrantSplit };

package/dist/lib/treemap.d.ts

@@ -18,10 +18,5 @@ export declare function layout<T extends {
   weight: number;
   group?: string;
 }>(items: T[], width: number, height: number): Layout<T>;
-export declare const HEAT_STEPS = 5;
-/** The range the heat scale uses: one that is not a positive number falls back to ±5%. */
-export declare const heatRange: (range?: number) => number;
-export declare const heatFill: (side: "positive" | "negative", step: number) => string;
-export declare function heat(change: number | null, range?: number): string;
 //#endregion
 export {};

package/dist/lib/treemap.js

@@ -31,20 +31,5 @@ function layout(items, width, height) {
 		}])
 	};
 }
-const DEFAULT_RANGE = .05;
-const HEAT_STEPS = 5;
-/** The range the heat scale uses: one that is not a positive number falls back to ±5%. */
-const heatRange = (range = DEFAULT_RANGE) => Number.isFinite(range) && range > 0 ? range : DEFAULT_RANGE;
-const DARK_FLOOR = 25;
-const heatFill = (side, step) => {
-	const mix = (share) => `color-mix(in oklab, var(--${side}) ${share}%, var(--card))`;
-	const dark = DARK_FLOOR + (step - 1) * 35 / 4;
-	return `light-dark(${mix(step * 12)}, ${mix(dark)})`;
-};
-function heat(change, range) {
-	if (!change) return "var(--muted)";
-	const step = Math.min(5, Math.ceil(Math.abs(change) / heatRange(range) * 5));
-	return heatFill(change > 0 ? "positive" : "negative", step);
-}
 //#endregion
-export { HEAT_STEPS, heat, heatFill, heatRange, layout };
+export { layout };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@siyahi/ui",
-  "version": "0.1.9-next.24",
+  "version": "0.1.9-next.25",
   "description": "Stock shadcn/ui on Base UI and Tailwind v4, a finance theme, a few compositions and formatters.",
   "keywords": [
     "base-ui",

package/report.css

@@ -30,6 +30,11 @@
   --negative-foreground: oklch(0.985 0 0);
   --warning: oklch(0.555 0.149 48.998);
   --warning-foreground: oklch(0.985 0 0);
+  --heat-1: 12%;
+  --heat-2: 24%;
+  --heat-3: 36%;
+  --heat-4: 48%;
+  --heat-5: 60%;
   --link: oklch(0.51 0.2 275);
   --chart-1: oklch(0.4 0.17 275);
   --chart-2: oklch(0.66 0.13 70);
@@ -72,6 +77,10 @@
     --negative-foreground: oklch(0.145 0 0);
     --warning: oklch(0.828 0.169 84.429);
     --warning-foreground: oklch(0.145 0 0);
+    --heat-1: 25%;
+    --heat-2: 33.75%;
+    --heat-3: 42.5%;
+    --heat-4: 51.25%;
     --link: oklch(0.75 0.128 275);
     --chart-1: oklch(0.58 0.2 275);
     --chart-2: oklch(0.88 0.08 75);

package/styles/siyahi.css

@@ -113,6 +113,16 @@
   --negative-foreground: oklch(0.985 0 0);
   --warning: oklch(0.555 0.149 48.998);
   --warning-foreground: oklch(0.985 0 0);
+  /*
+   * Heat steps: how much of --positive or --negative each of five steps mixes
+   * into the card, for Treemap, ChangeGrid and a signed CalendarHeatmap
+   * (lib/heat.ts). The contrast check reads them from here.
+   */
+  --heat-1: 12%;
+  --heat-2: 24%;
+  --heat-3: 36%;
+  --heat-4: 48%;
+  --heat-5: 60%;
   --link: oklch(0.51 0.2 275);
   /*
    * Indigo, amber, plum, sky, teal: no green or red, so no series reads as a
@@ -179,6 +189,12 @@
     --negative-foreground: oklch(0.145 0 0);
     --warning: oklch(0.828 0.169 84.429);
     --warning-foreground: oklch(0.145 0 0);
+    /* A 12% tint of a dark card reads as the card itself, so dark starts at 25%. */
+    --heat-1: 25%;
+    --heat-2: 33.75%;
+    --heat-3: 42.5%;
+    --heat-4: 51.25%;
+    --heat-5: 60%;
     --link: oklch(0.75 0.128 275);
     --chart-1: oklch(0.58 0.2 275);
     --chart-2: oklch(0.88 0.08 75);