@mstone6969/graph 0.0.0-stage → 0.1.0

package/dist/charts/bars/ProgressBars.js

@@ -0,0 +1,180 @@
+import { Chart2D } from "../../core/Chart2D.js";
+import { ChartFamily, DataShape, Dimension, LegendPosition, Orientation } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { BarFrame } from "./BarFrame.js";
+import { BarRows, BarSort } from "./BarRows.js";
+import { scaleLinear } from "d3";
+// src/charts/bars/ProgressBars.ts
+var ProgressBarsTrack = /* @__PURE__ */ function(ProgressBarsTrack) {
+	ProgressBarsTrack["Solid"] = "solid";
+	ProgressBarsTrack["Segmented"] = "segmented";
+	ProgressBarsTrack["Thin"] = "thin";
+	return ProgressBarsTrack;
+}({});
+var ProgressBarsLabel = /* @__PURE__ */ function(ProgressBarsLabel) {
+	ProgressBarsLabel["Side"] = "side";
+	ProgressBarsLabel["Above"] = "above";
+	ProgressBarsLabel["Inside"] = "inside";
+	return ProgressBarsLabel;
+}({});
+var CELLS = 10;
+/** Completion of several tasks against a full-length track, for status panels and onboarding lists. */
+var ProgressBars = class extends Chart2D {
+	static meta = {
+		id: "bar-progress",
+		name: "Progress bars",
+		family: ChartFamily.Indicator,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Fills each item along a fixed track so remaining work is as visible as finished work.",
+		tags: [
+			"completion",
+			"track",
+			"meter",
+			"status"
+		],
+		sample: (seed) => SampleData.tasks(seed, 6),
+		variants: {
+			orientation: [Orientation.Horizontal, Orientation.Vertical],
+			track: [
+				"solid",
+				"segmented",
+				"thin"
+			],
+			labelPlacement: [
+				"side",
+				"above",
+				"inside"
+			],
+			sort: [
+				BarSort.Data,
+				BarSort.Descending,
+				BarSort.Ascending
+			]
+		},
+		valid: (values) => !(values.track === "thin" && values.labelPlacement === "inside") && !(values.orientation === Orientation.Vertical && values.labelPlacement === "above")
+	};
+	defaults() {
+		return {
+			x: "task",
+			y: "progress",
+			max: 1,
+			orientation: Orientation.Horizontal,
+			track: "solid",
+			labelPlacement: "side",
+			sort: BarSort.Data
+		};
+	}
+	get items() {
+		const { data, x, y, max, sort } = this.options;
+		const rows = BarRows.rollup(data, x, y).map(({ band, value }) => ({
+			band,
+			raw: value,
+			share: Math.max(0, Math.min(1, value / (max || 1))),
+			index: 0
+		}));
+		return BarRows.order(rows, sort, (row) => row.share, (row) => row.band).map((row, index) => ({
+			...row,
+			index
+		}));
+	}
+	get legendPosition() {
+		return LegendPosition.None;
+	}
+	percent(item) {
+		return `${Math.round(item.share * 100)}%`;
+	}
+	draw(ctx) {
+		if (this.options.orientation === Orientation.Vertical) this.drawColumns(ctx);
+		else this.drawRows(ctx);
+	}
+	drawRows(ctx) {
+		const { items } = this;
+		const { track, labelPlacement } = this.options;
+		const { width, height } = ctx.plot;
+		const row = height / Math.max(1, items.length);
+		const inside = labelPlacement === "inside", above = labelPlacement === "above";
+		const widest = Math.max(0, ...items.map((item) => Math.min(item.band.length, 14)));
+		const left = labelPlacement === "side" ? widest * 6.2 + 10 : 0;
+		const right = inside || above ? 0 : 38;
+		const thick = track === "thin" ? 4 : Math.max(4, Math.min(inside ? 26 : 14, row - (above ? 18 : 6)));
+		const scale = scaleLinear([0, 1], [left, width - right]);
+		const frame = new BarFrame(false, scale);
+		const top = (item) => item.index * row + (above ? Math.min(row - thick - 1, row * .5 + 2) : (row - thick) / 2);
+		this.drawBars(ctx, frame, items, top, thick);
+		const textY = (item) => above ? top(item) - 5 : top(item) + thick / 2 + 3.5;
+		const showNames = above ? row >= 26 : row >= 12;
+		const name = ctx.text(ctx.marks("names", "text", showNames ? items : [], (d) => d.band), 11, "secondary").attr("text-anchor", labelPlacement === "side" ? "end" : "start").text((d) => BarRows.clip(d.band, inside ? 24 : 14));
+		if (inside) name.attr("fill", (d) => scale(d.share) - scale(0) > d.band.length * 6.2 + 14 ? ctx.palette.inkOn(ctx.palette.color(this.options.y)) : ctx.theme.inkSecondary);
+		ctx.set(name, {
+			x: (d) => labelPlacement === "side" ? left - 10 : inside ? this.nameX(scale, d) : 0,
+			y: textY
+		});
+		const value = ctx.text(ctx.marks("values", "text", showNames ? items : [], (d) => d.band), 11, "ink").attr("text-anchor", "end").text((d) => this.percent(d));
+		ctx.set(value, {
+			x: width - (inside ? 6 : 0),
+			y: textY
+		});
+	}
+	nameX(scale, d) {
+		const fill = scale(d.share) - scale(0);
+		return fill > d.band.length * 6.2 + 14 ? 8 : fill + 6;
+	}
+	drawColumns(ctx) {
+		const { items } = this;
+		const { track, labelPlacement } = this.options;
+		const { width, height } = ctx.plot;
+		const inside = labelPlacement === "inside";
+		const step = width / Math.max(1, items.length);
+		const thick = track === "thin" ? 4 : Math.max(4, Math.min(inside ? 34 : 22, step - 12));
+		const top = inside ? 0 : 18;
+		const frame = new BarFrame(true, scaleLinear([0, 1], [height - 18, top]));
+		const left = (item) => item.index * step + (step - thick) / 2;
+		this.drawBars(ctx, frame, items, left, thick);
+		const every = Math.max(1, Math.ceil(Math.max(...items.map((item) => Math.min(item.band.length, 10)), 0) * 6.2 + 6) / Math.max(1, step));
+		const kept = items.filter((_, i) => i % Math.ceil(every) === 0);
+		const names = ctx.text(ctx.marks("names", "text", kept, (d) => d.band), 11).attr("text-anchor", "middle").text((d) => BarRows.clip(d.band, 10));
+		ctx.set(names, {
+			x: (d) => left(d) + thick / 2,
+			y: height - 4
+		});
+		const value = ctx.text(ctx.marks("values", "text", step >= 30 ? items : [], (d) => d.band), inside ? 10 : 11, "ink").attr("text-anchor", "middle").text((d) => this.percent(d));
+		const fillTop = (d) => frame.value(d.share);
+		if (inside) value.attr("fill", (d) => d.share > .14 ? ctx.palette.inkOn(ctx.palette.color(this.options.y)) : ctx.theme.ink);
+		ctx.set(value, {
+			x: (d) => left(d) + thick / 2,
+			y: (d) => inside ? d.share > .14 ? fillTop(d) + 14 : fillTop(d) - 5 : top - 6
+		});
+	}
+	drawBars(ctx, frame, items, at, thick) {
+		const { track, y } = this.options;
+		const color = ctx.palette.color(y);
+		const segmented = track === "segmented";
+		const span = frame.value.range()[1] - frame.value.range()[0];
+		const tip = (item) => ({
+			title: item.band,
+			color,
+			rows: [["Progress", this.percent(item)], ["Value", item.raw]]
+		});
+		const tracks = ctx.marks("tracks", "path", segmented ? [] : items, (d) => d.band).attr("fill", ctx.theme.grid);
+		ctx.set(tracks, { d: (d) => frame.bar(at(d), thick, 0, 1, thick / 2, 0, true) });
+		const fills = ctx.marks("fills", "path", segmented ? [] : items, (d) => d.band).attr("fill", color);
+		ctx.set(fills, { d: (d) => frame.bar(at(d), thick, 0, d.share, thick / 2, 0, true) }, { d: (d) => frame.bar(at(d), thick, 0, 0, thick / 2, 0, true) }, 40);
+		ctx.hover(fills, tip);
+		const cells = segmented ? items.flatMap((item) => Array.from({ length: CELLS }, (_, slot) => ({
+			key: `${item.band}/${slot}`,
+			item,
+			slot,
+			fill: Math.max(0, Math.min(1, item.share * CELLS - slot))
+		}))) : [];
+		const gap = 2 / Math.abs(span);
+		const size = 1 / CELLS;
+		const cell = (d, part) => frame.bar(at(d.item), thick, d.slot * size, d.slot * size + (size - gap) * part, 1.5, 0, true);
+		const back = ctx.marks("cell-tracks", "path", cells, (d) => d.key).attr("fill", ctx.theme.grid);
+		ctx.set(back, { d: (d) => cell(d, 1) });
+		const front = ctx.marks("cell-fills", "path", cells, (d) => d.key).attr("fill", color);
+		ctx.set(front, { d: (d) => cell(d, d.fill) }, { d: (d) => cell(d, 0) }, 6);
+		ctx.hover(front, (d) => tip(d.item));
+	}
+};
+export { ProgressBars, ProgressBarsLabel, ProgressBarsTrack };

package/dist/charts/bars/RangeBarChart.js

@@ -0,0 +1,197 @@
+import { ChartFamily, DataShape, Dimension, LegendPosition, Orientation } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { BandChart } from "./BandChart.js";
+import { BarRows } from "./BarRows.js";
+import { ascending, descending, deviation, max, mean, median, min, quantile } from "d3";
+// src/charts/bars/RangeBarChart.ts
+var RangeBarSpread = /* @__PURE__ */ function(RangeBarSpread) {
+	RangeBarSpread["Extent"] = "extent";
+	RangeBarSpread["Interquartile"] = "interquartile";
+	RangeBarSpread["Decile"] = "decile";
+	RangeBarSpread["Deviation"] = "deviation";
+	return RangeBarSpread;
+}({});
+var RangeBarMark = /* @__PURE__ */ function(RangeBarMark) {
+	RangeBarMark["Bar"] = "bar";
+	RangeBarMark["Capsule"] = "capsule";
+	RangeBarMark["Whisker"] = "whisker";
+	return RangeBarMark;
+}({});
+var RangeBarSort = /* @__PURE__ */ function(RangeBarSort) {
+	RangeBarSort["Data"] = "data";
+	RangeBarSort["Middle"] = "middle";
+	RangeBarSort["Width"] = "width";
+	return RangeBarSort;
+}({});
+/** Floating bars for low-to-high spans: temperature ranges, salary bands, price ranges, quantile summaries. */
+var RangeBarChart = class extends BandChart {
+	static meta = {
+		id: "bar-range",
+		name: "Range bar chart",
+		family: ChartFamily.Distribution,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Floats a bar between each category’s low and high, either supplied or summarised from raw rows.",
+		tags: [
+			"floating",
+			"span",
+			"interval",
+			"column range"
+		],
+		sample: (seed) => SampleData.distribution(seed, 60, 7),
+		variants: {
+			orientation: [Orientation.Horizontal, Orientation.Vertical],
+			spread: [
+				"extent",
+				"interquartile",
+				"decile",
+				"deviation"
+			],
+			mark: [
+				"bar",
+				"capsule",
+				"whisker"
+			],
+			sort: [
+				"data",
+				"middle",
+				"width"
+			],
+			midpoint: [true, false]
+		}
+	};
+	defaults() {
+		return {
+			x: "group",
+			y: "value",
+			orientation: Orientation.Horizontal,
+			spread: "extent",
+			mark: "bar",
+			sort: "data",
+			midpoint: true
+		};
+	}
+	summarise(values) {
+		const sorted = [...values].sort(ascending);
+		const middle = median(sorted) ?? 0;
+		switch (this.options.spread) {
+			case "interquartile": return {
+				low: quantile(sorted, .25) ?? 0,
+				high: quantile(sorted, .75) ?? 0,
+				middle
+			};
+			case "decile": return {
+				low: quantile(sorted, .1) ?? 0,
+				high: quantile(sorted, .9) ?? 0,
+				middle
+			};
+			case "deviation": {
+				const centre = mean(sorted) ?? 0, spread = deviation(sorted) ?? 0;
+				return {
+					low: centre - spread,
+					high: centre + spread,
+					middle: centre
+				};
+			}
+			default: return {
+				low: sorted[0] ?? 0,
+				high: sorted[sorted.length - 1] ?? 0,
+				middle
+			};
+		}
+	}
+	get spans() {
+		const { data, x, y, low, high, sort } = this.options;
+		const spans = low && high ? (data ?? []).flatMap((row) => {
+			const a = BarRows.number(row[low]), b = BarRows.number(row[high]);
+			return a === null || b === null ? [] : [{
+				band: BarRows.label(row[x]),
+				low: Math.min(a, b),
+				high: Math.max(a, b),
+				middle: (a + b) / 2
+			}];
+		}) : [...BarRows.values(data, x, y)].map(([band, values]) => ({
+			band,
+			...this.summarise(values)
+		}));
+		const unique = [...new Map(spans.map((span) => [span.band, span])).values()];
+		if (sort === "middle") unique.sort((a, b) => descending(a.middle, b.middle));
+		if (sort === "width") unique.sort((a, b) => descending(a.high - a.low, b.high - b.low));
+		return unique;
+	}
+	get legendPosition() {
+		return LegendPosition.None;
+	}
+	bandNames() {
+		return this.spans.map((span) => span.band);
+	}
+	bandPadding() {
+		return .28;
+	}
+	baseline() {
+		return null;
+	}
+	valueExtent() {
+		const { spans } = this;
+		return [min(spans, (span) => span.low) ?? 0, max(spans, (span) => span.high) ?? 1];
+	}
+	drawBands(ctx, frame) {
+		const { spans } = this;
+		const { mark, midpoint, x } = this.options;
+		const color = ctx.palette.color(x);
+		const whisker = mark === "whisker";
+		const capsule = mark === "capsule";
+		const thick = Math.min(frame.thick, 26);
+		const at = (d) => frame.center(d.band) - thick / 2;
+		const start = (d) => frame.bar(at(d), thick, d.middle, d.middle, 0, 0, capsule);
+		const bars = ctx.marks("bars", "path", whisker ? [] : spans, (d) => d.band).attr("fill", color);
+		ctx.set(bars, { d: (d) => frame.bar(at(d), thick, d.low, d.high, capsule ? thick / 2 : 2, 0, true) }, { d: start }, 16);
+		ctx.hover(bars, (d) => this.details(d, color));
+		const stems = ctx.marks("stems", "line", whisker ? spans : [], (d) => d.band).attr("stroke", color).attr("stroke-width", 2).attr("stroke-linecap", "round");
+		const stem = (d) => frame.stem(frame.center(d.band), d.low, d.high);
+		ctx.set(stems, {
+			x1: (d) => stem(d).x1,
+			y1: (d) => stem(d).y1,
+			x2: (d) => stem(d).x2,
+			y2: (d) => stem(d).y2
+		});
+		ctx.hover(stems, (d) => this.details(d, color));
+		const ends = whisker ? spans.flatMap((d) => [{
+			key: `${d.band}/low`,
+			band: d.band,
+			value: d.low
+		}, {
+			key: `${d.band}/high`,
+			band: d.band,
+			value: d.high
+		}]) : [];
+		const caps = ctx.marks("caps", "line", ends, (d) => d.key).attr("stroke", color).attr("stroke-width", 2).attr("stroke-linecap", "round");
+		const cap = (d) => frame.rule(d.value, frame.center(d.band) - 6, frame.center(d.band) + 6);
+		ctx.set(caps, {
+			x1: (d) => cap(d).x1,
+			y1: (d) => cap(d).y1,
+			x2: (d) => cap(d).x2,
+			y2: (d) => cap(d).y2
+		});
+		const ticks = ctx.marks("middles", "line", midpoint ? spans : [], (d) => d.band).attr("stroke", whisker ? color : ctx.palette.inkOn(color)).attr("stroke-width", 2).style("pointer-events", "none");
+		const tick = (d) => frame.rule(d.middle, at(d), at(d) + thick);
+		ctx.set(ticks, {
+			x1: (d) => tick(d).x1,
+			y1: (d) => tick(d).y1,
+			x2: (d) => tick(d).x2,
+			y2: (d) => tick(d).y2
+		});
+	}
+	details(d, color) {
+		return {
+			title: d.band,
+			color,
+			rows: [
+				["High", +d.high.toFixed(2)],
+				["Middle", +d.middle.toFixed(2)],
+				["Low", +d.low.toFixed(2)]
+			]
+		};
+	}
+};
+export { RangeBarChart, RangeBarMark, RangeBarSort, RangeBarSpread };

package/dist/charts/bars/TripleBarOverlay.js

@@ -0,0 +1,145 @@
+import { ChartFamily, DataShape, Dimension, Orientation } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { BandChart } from "./BandChart.js";
+import { BarRows, BarSort } from "./BarRows.js";
+import { max, min } from "d3";
+// src/charts/bars/TripleBarOverlay.ts
+var OverlayNesting = /* @__PURE__ */ function(OverlayNesting) {
+	OverlayNesting["Centered"] = "centered";
+	OverlayNesting["Stepped"] = "stepped";
+	OverlayNesting["Edge"] = "edge";
+	return OverlayNesting;
+}({});
+var OverlayFront = /* @__PURE__ */ function(OverlayFront) {
+	OverlayFront["Bar"] = "bar";
+	OverlayFront["Tick"] = "tick";
+	OverlayFront["Dot"] = "dot";
+	return OverlayFront;
+}({});
+/** Nest three measures in one column, widest at the back, for budget, forecast and actual on a shared scale. */
+var TripleBarOverlay = class extends BandChart {
+	static meta = {
+		id: "bar-triple-overlay",
+		name: "Triple bar overlay",
+		family: ChartFamily.Comparison,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Layers three measures of one category in nested bars so each reads against the others at the same spot.",
+		tags: [
+			"nested",
+			"overlay",
+			"budget actual",
+			"bar in bar"
+		],
+		sample: (seed) => SampleData.categories(seed, 7, 3),
+		variants: {
+			orientation: [Orientation.Vertical, Orientation.Horizontal],
+			nesting: [
+				"centered",
+				"stepped",
+				"edge"
+			],
+			front: [
+				"bar",
+				"tick",
+				"dot"
+			],
+			ratio: [
+				.62,
+				.78,
+				.45
+			],
+			sort: [BarSort.Data, BarSort.Descending]
+		}
+	};
+	defaults() {
+		return {
+			x: "category",
+			y: "value",
+			series: "series",
+			orientation: Orientation.Vertical,
+			nesting: "centered",
+			front: "bar",
+			ratio: .62,
+			sort: BarSort.Data
+		};
+	}
+	get layers() {
+		const { data, x, y, series, layers, sort } = this.options;
+		const pivot = BarRows.pivot(data, x, series, y);
+		const names = (layers ?? pivot.series).slice(0, 3);
+		const lead = (band) => pivot.cell(band, names[0] ?? "");
+		return BarRows.order(pivot.bands, sort, lead, (band) => band).flatMap((band) => names.map((name, level) => ({
+			band,
+			series: name,
+			level,
+			value: pivot.cell(band, name)
+		})));
+	}
+	bandNames() {
+		return [...new Set(this.layers.map((layer) => layer.band))];
+	}
+	bandPadding() {
+		return .18;
+	}
+	valueExtent() {
+		const { layers } = this;
+		return [Math.min(0, min(layers, (layer) => layer.value) ?? 0), Math.max(0, max(layers, (layer) => layer.value) ?? 1)];
+	}
+	reserve() {
+		return [0, this.options.front === "dot" ? 8 : 0];
+	}
+	span(frame, d) {
+		const { nesting, ratio } = this.options;
+		const full = frame.thick, size = full * ratio ** d.level;
+		const start = frame.band(d.band) ?? 0;
+		if (nesting === "edge") return [start, size];
+		if (nesting === "stepped") return [start + (full - size) * (d.level === 1 ? 1 : .5), size];
+		return [start + (full - size) / 2, size];
+	}
+	drawBands(ctx, frame) {
+		const { layers } = this;
+		const { front } = this.options;
+		const last = Math.max(0, ...layers.map((layer) => layer.level));
+		const point = front !== "bar";
+		const fillers = point ? layers.filter((layer) => layer.level < last) : layers;
+		const accents = point ? layers.filter((layer) => layer.level === last) : [];
+		const bars = ctx.marks("bars", "path", fillers, (d) => `${d.band}/${d.series}`).attr("fill", (d) => ctx.palette.color(d.series));
+		ctx.set(bars, { d: (d) => frame.bar(...this.span(frame, d), 0, d.value) }, { d: (d) => frame.bar(...this.span(frame, d), 0, 0) }, 10);
+		const tip = (d) => ({
+			title: d.band,
+			color: ctx.palette.color(d.series),
+			rows: [[d.series, d.value]]
+		});
+		ctx.hover(bars, tip);
+		const ticks = ctx.marks("ticks", "line", front === "tick" ? accents : [], (d) => d.band).attr("stroke", (d) => ctx.palette.color(d.series)).attr("stroke-width", 3).attr("stroke-linecap", "round");
+		const rule = (d) => {
+			const [start, size] = this.span(frame, {
+				...d,
+				level: 1
+			});
+			return frame.rule(d.value, start, start + size);
+		};
+		ctx.set(ticks, {
+			x1: (d) => rule(d).x1,
+			y1: (d) => rule(d).y1,
+			x2: (d) => rule(d).x2,
+			y2: (d) => rule(d).y2
+		});
+		ctx.hover(ticks, tip);
+		const dots = ctx.marks("dots", "circle", front === "dot" ? accents : [], (d) => d.band).attr("r", 6).attr("fill", (d) => ctx.palette.color(d.series)).attr("stroke", ctx.theme.surface).attr("stroke-width", 2);
+		const center = (d) => {
+			const [start, size] = this.span(frame, {
+				...d,
+				level: 1
+			});
+			return frame.point(start + size / 2, d.value);
+		};
+		ctx.set(dots, {
+			cx: (d) => center(d)[0],
+			cy: (d) => center(d)[1]
+		});
+		ctx.hover(dots, tip);
+	}
+};
+export { OverlayFront, OverlayNesting, TripleBarOverlay };