@tangle-network/charts 0.12.0 → 0.12.1

package/dist/react/index.d.ts

@@ -77,7 +77,7 @@ interface StackedBarChartProps {
   label: string;
   series: readonly StackedBarSeries[];
   buckets: readonly StackedBarBucket[];
-  /** Explicit [0, maxValue] domain. Zero is valid only for zero-valued data. */
+  /** Values must lie in [0, maxValue]; the axis extends to the next round tick. Zero is valid only for zero-valued data. */
   maxValue: number;
   formatValue: (value: number) => string;
   selectedBucketId: string | null;

package/dist/react/index.js

@@ -217,6 +217,41 @@ function validate({ series, buckets, maxValue }) {
 		}
 	}
 }
+/**
+* Round axis ticks covering [0, max]: three to six steps of 1, 2, 2.5 or 5
+* times a power of ten, so labels read $0.003 rather than $0.0028. The
+* tightest top wins, then the fewest steps, so bars keep their height.
+*/
+function niceTicks(max) {
+	if (!(max > 0)) return [0];
+	const magnitude = 10 ** Math.floor(Math.log10(max));
+	let best = {
+		top: Infinity,
+		step: 0,
+		count: 0
+	};
+	for (const scale of [
+		1,
+		.1,
+		.01
+	]) for (const multiple of [
+		1,
+		2,
+		2.5,
+		5
+	]) {
+		const step = multiple * magnitude * scale;
+		const count = Math.ceil(max / step - 1e-9);
+		const top = count * step;
+		if (count < 3 || count > 6) continue;
+		if (top < best.top - 1e-12 * top || Math.abs(top - best.top) <= 1e-12 * top && count < best.count) best = {
+			top,
+			step,
+			count
+		};
+	}
+	return Array.from({ length: best.count + 1 }, (_, i) => Number((i * best.step).toPrecision(12)));
+}
 function StackedBarChart(props) {
 	const { label, series, buckets, maxValue, formatValue, selectedBucketId, onSelectionChange, emptyLabel = "No data yet", unavailableLabel = "Not available", className } = props;
 	const readoutId = useId();
@@ -249,13 +284,16 @@ function StackedBarChart(props) {
 	const formatted = (value) => isValue(value) ? formatValue(value) : unavailableLabel;
 	const summary = (bucket) => `${bucket.label}: total ${formatted(bucket.total)}` + (hasGap(bucket) ? ` — ${unavailableLabel}` : "") + (bucket.segments.length ? ` — ${bucket.segments.map((segment) => `${bySeries.get(segment.seriesId).label} ${formatted(segment.value)}`).join(", ")}` : "") + (bucket.description ? ` — ${bucket.description}` : "");
 	const activeIndex = selectedBucketId === null ? -1 : buckets.findIndex(({ id }) => id === selectedBucketId);
-	const activeBucket = activeIndex >= 0 ? buckets[activeIndex] : null, marginTop = 12, marginRight = 16, marginLeft = 56;
+	const activeBucket = activeIndex >= 0 ? buckets[activeIndex] : null, marginTop = 12, marginRight = 24, marginLeft = 56;
 	const chartHeight = 220;
 	const innerHeight = 176;
 	const barGap = 6;
-	const barWidth = Math.max(8, Math.min(36, 648 / Math.max(1, buckets.length) - barGap));
+	const barWidth = Math.max(8, Math.min(36, 640 / Math.max(1, buckets.length) - barGap));
 	const viewWidth = Math.max(buckets.length * (barWidth + barGap) + marginLeft + marginRight, 400);
-	const denseLabels = buckets.length > 14;
+	const ticks = niceTicks(maxValue);
+	const scaleMax = ticks[ticks.length - 1];
+	const labelWidth = Math.max(0, ...buckets.map((bucket) => bucket.label.length)) * 6 + 8;
+	const labelStride = Math.max(1, Math.ceil(labelWidth / (barWidth + barGap)));
 	if (buckets.length === 0) return /* @__PURE__ */ jsxs("p", {
 		className,
 		children: [
@@ -284,16 +322,12 @@ function StackedBarChart(props) {
 						maxHeight: 300
 					},
 					preserveAspectRatio: "xMinYMin meet",
-					children: [[
-						0,
-						.25,
-						.5,
-						.75,
-						1
-					].map((fraction) => {
+					children: [ticks.map((tick) => {
+						const fraction = scaleMax > 0 ? tick / scaleMax : 0;
 						const y = 188 - fraction * innerHeight;
 						return /* @__PURE__ */ jsxs("g", {
 							"aria-hidden": "true",
+							"data-tick": "",
 							children: [/* @__PURE__ */ jsx("line", {
 								x1: marginLeft,
 								y1: y,
@@ -310,14 +344,14 @@ function StackedBarChart(props) {
 								fontSize: "11",
 								fill: "currentColor",
 								fontFamily: "inherit",
-								children: formatValue(maxValue * fraction)
+								children: formatValue(tick)
 							})]
-						}, fraction);
+						}, tick);
 					}), buckets.map((bucket, index) => {
 						const x = marginLeft + index * (barWidth + barGap) + barGap / 2;
 						const isActive = index === activeIndex;
 						const gap = hasGap(bucket);
-						const stackHeight = !gap && maxValue > 0 ? bucket.total / maxValue * innerHeight : 0;
+						const stackHeight = !gap && scaleMax > 0 ? bucket.total / scaleMax * innerHeight : 0;
 						let yOffset = 0;
 						const select = () => onSelectionChange(bucket.id);
 						const clear = () => {
@@ -398,7 +432,7 @@ function StackedBarChart(props) {
 									rx: 3
 								}),
 								!gap && bucket.segments.map((segment, segmentIndex) => {
-									const height = maxValue > 0 ? segment.value / maxValue * innerHeight : 0;
+									const height = scaleMax > 0 ? segment.value / scaleMax * innerHeight : 0;
 									const y = 188 - yOffset - height;
 									yOffset += height;
 									return /* @__PURE__ */ jsx("rect", {
@@ -434,16 +468,15 @@ function StackedBarChart(props) {
 									rx: 3,
 									pointerEvents: "none"
 								}),
-								/* @__PURE__ */ jsx("text", {
+								index % labelStride === 0 && /* @__PURE__ */ jsx("text", {
 									x: x + barWidth / 2,
 									y: 204,
-									textAnchor: denseLabels ? "end" : "middle",
+									textAnchor: "middle",
 									fontSize: "10",
 									fill: "currentColor",
 									fontFamily: "inherit",
 									pointerEvents: "none",
 									"aria-hidden": "true",
-									transform: denseLabels ? `rotate(-40, ${x + barWidth / 2}, 204)` : void 0,
 									children: bucket.label
 								})
 							]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/charts",
-  "version": "0.12.0",
+  "version": "0.12.1",
   "description": "Static SVG and HTML figures for benchmarks and operational timing. Draws from producer data and refuses what it cannot draw honestly.",
   "type": "module",
   "license": "MIT",