@mstone6969/graph 0.0.0-stage → 0.1.0

package/dist/charts/indicators/SpeedometerChart.js

@@ -0,0 +1,142 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { DialChart } from "./DialChart.js";
+import { GaugeSweep, IndicatorStatus, NeedleStyle, NumeralPlacement, TickDensity } from "./IndicatorEnums.js";
+import { IndicatorSamples } from "./IndicatorSamples.js";
+// src/charts/indicators/SpeedometerChart.ts
+/** An instrument dial: dense graduations, numerals, needle and redline, for rate or throughput readings. */
+var SpeedometerChart = class extends DialChart {
+	static meta = {
+		id: "speedometer",
+		name: "Speedometer",
+		family: ChartFamily.Indicator,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Reads a rate off a graduated instrument dial, with numerals, a needle and an optional redline zone.",
+		tags: [
+			"dial",
+			"tachometer",
+			"needle",
+			"instrument"
+		],
+		sample: (seed) => IndicatorSamples.goals(seed, 1),
+		variants: {
+			sweep: [
+				GaugeSweep.Horseshoe,
+				GaugeSweep.ThreeQuarter,
+				GaugeSweep.Semi
+			],
+			needleStyle: [
+				NeedleStyle.Taper,
+				NeedleStyle.Line,
+				NeedleStyle.Arrow
+			],
+			numerals: [NumeralPlacement.Inside, NumeralPlacement.Outside],
+			density: [TickDensity.Coarse, TickDensity.Fine],
+			redline: [true, false],
+			trail: [false, true]
+		}
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			sweep: GaugeSweep.Horseshoe,
+			needleStyle: NeedleStyle.Taper,
+			numerals: NumeralPlacement.Inside,
+			density: TickDensity.Coarse,
+			redline: true,
+			redlineFrom: .8,
+			trail: false
+		};
+	}
+	drawReadings(ctx, readings) {
+		this.facets(ctx, readings, 1.3, (cell, reading) => this.instrument(cell, reading), 110);
+	}
+	instrument(ctx, reading) {
+		const { numerals, density, redline, redlineFrom, trail, needleStyle } = this.options;
+		const outside = numerals === NumeralPlacement.Outside;
+		const frame = this.frame(ctx.plot, {
+			pad: outside ? 20 : 3,
+			foot: this.frame(ctx.plot).closed ? 18 : 62
+		});
+		const { radius, cx, cy } = frame;
+		const dial = ctx.nest(`translate(${cx},${cy})`, "dial");
+		const majors = density === TickDensity.Fine ? 10 : 5;
+		const major = new Set(this.scaleTicks(majors).map((f) => f.toFixed(4)));
+		const ticks = this.scaleTicks(majors * 5).map((fraction) => ({
+			fraction,
+			major: major.has(fraction.toFixed(4))
+		}));
+		const rim = ctx.marks("rim", "path", [reading], (d) => d.id, dial.root).attr("fill", ctx.theme.axis).attr("d", this.ring(radius - 2, radius, frame.start, frame.end));
+		ctx.hover(rim, (d) => this.tooltip(d));
+		const zone = ctx.marks("redline", "path", redline ? [redlineFrom] : [], (_, i) => i, dial.root).attr("fill", ctx.theme.critical).attr("d", (f) => this.ring(radius - 7, radius, frame.angle(f), frame.end));
+		ctx.hover(zone, (f) => ({
+			title: "Redline",
+			color: ctx.theme.critical,
+			rows: [["Above", this.formatted(this.at(f))]]
+		}));
+		const band = ctx.marks("trail", "path", trail ? [reading] : [], (d) => d.id, dial.root).attr("fill", this.accent(ctx));
+		this.sweep(band, (d) => d.fraction, (_, f) => this.ring(radius - (outside ? 24 : 44), radius - (outside ? 18 : 38), frame.start, frame.angle(f), 3));
+		ctx.hover(band, (d) => this.tooltip(d));
+		const lines = ctx.marks("graduations", "line", ticks, (d) => d.fraction).attr("stroke", (d) => d.major ? ctx.theme.ink : ctx.theme.inkMuted).attr("stroke-width", (d) => d.major ? 2 : 1);
+		const reach = (d) => radius - (d.major ? 15 : 10);
+		lines.attr("x1", (d) => frame.point(d.fraction, reach(d))[0]).attr("y1", (d) => frame.point(d.fraction, reach(d))[1]).attr("x2", (d) => frame.point(d.fraction, radius - 3)[0]).attr("y2", (d) => frame.point(d.fraction, radius - 3)[1]);
+		const ring = outside ? radius + 12 : radius - 25;
+		const every = density === TickDensity.Fine && radius < 110 ? 2 : 1;
+		this.texts(ctx, "numerals", ticks.filter((d) => d.major).filter((_, i) => i % every === 0).map((d) => {
+			const [x, y] = frame.point(d.fraction, ring);
+			return {
+				key: d.fraction,
+				text: this.formatted(this.at(d.fraction)),
+				x,
+				y,
+				size: radius < 80 ? 9 : 10.5,
+				tone: "secondary",
+				weight: 500
+			};
+		}));
+		this.needle(ctx, frame, reading, needleStyle, radius - (outside ? 18 : 12));
+		this.display(ctx, frame, reading);
+	}
+	at(fraction) {
+		const [low, high] = this.domain();
+		return low + fraction * (high - low);
+	}
+	display(ctx, frame, reading) {
+		const { cx, cy, radius, closed } = frame;
+		const { redline, redlineFrom } = this.options;
+		const size = Math.max(14, Math.min(22, radius * .2));
+		const y = closed ? cy + radius * .46 : cy + Math.max(3, radius * .035) * 2 + 6 + size * .7;
+		const text = this.formatted(reading.value), wide = Math.max(44, this.textWidth(text, size) + 16);
+		const plate = ctx.marks("plate", "rect", [reading], (d) => d.id).attr("fill", ctx.theme.grid).attr("x", cx - wide / 2).attr("y", y - size * .7).attr("width", wide).attr("height", size * 1.4).attr("rx", 4);
+		ctx.hover(plate, (d) => this.tooltip(d));
+		this.texts(ctx, "digits", [{
+			key: "value",
+			text,
+			x: cx,
+			y,
+			size,
+			tone: "ink",
+			weight: 600,
+			count: [reading.value, (v) => this.formatted(v)]
+		}]);
+		const line = y + size * .7 + 11;
+		const danger = redline && reading.fraction >= redlineFrom;
+		const note = redline ? `Redline ${this.formatted(this.at(redlineFrom))}+` : this.fit(reading.label, ctx.plot.width);
+		this.chips(ctx, "caution", redline ? [{
+			key: "redline",
+			x: cx,
+			y: line,
+			status: this.statusView(danger ? IndicatorStatus.Critical : IndicatorStatus.Warning),
+			text: note,
+			anchor: "middle",
+			size: 6
+		}] : []);
+		this.texts(ctx, "caption", redline ? [] : [{
+			key: "label",
+			text: note,
+			x: cx,
+			y: line
+		}]);
+	}
+};
+export { SpeedometerChart };

package/dist/charts/indicators/StepProgress.js

@@ -0,0 +1,170 @@
+import { ChartFamily, DataShape, Dimension, Orientation } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { IndicatorChart } from "./IndicatorChart.js";
+import { IndicatorStatus, StepForm, StepLabels } from "./IndicatorEnums.js";
+// src/charts/indicators/StepProgress.ts
+/** Where a process stands: finished, current and remaining stages in order. */
+var StepProgress = class extends IndicatorChart {
+	static meta = {
+		id: "step-progress",
+		name: "Step progress",
+		family: ChartFamily.Indicator,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Shows which stage of an ordered process is complete, in progress or still to come.",
+		tags: [
+			"stepper",
+			"stages",
+			"pipeline",
+			"wizard"
+		],
+		sample: (seed) => {
+			const tasks = SampleData.tasks(seed, 6), reached = Math.round(+tasks[0].progress * 3) + 1;
+			return tasks.map((task, i) => ({
+				category: `Stage ${i + 1}`,
+				value: i < reached ? 100 : i === reached ? Math.round(+task.progress * 80) + 10 : 0
+			}));
+		},
+		variants: {
+			form: [
+				StepForm.Line,
+				StepForm.Chevrons,
+				StepForm.Bars
+			],
+			orientation: [Orientation.Horizontal, Orientation.Vertical],
+			labels: [StepLabels.Below, StepLabels.Alternate],
+			numbered: [true, false]
+		},
+		valid: (v) => (v.orientation === Orientation.Horizontal || v.labels === StepLabels.Below) && (v.form === StepForm.Line || v.numbered === true)
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			max: 100,
+			form: StepForm.Line,
+			orientation: Orientation.Horizontal,
+			labels: StepLabels.Below,
+			numbered: true
+		};
+	}
+	drawReadings(ctx, readings) {
+		const { form, orientation } = this.options;
+		const vertical = orientation === Orientation.Vertical;
+		const { width, height } = ctx.plot;
+		const room = vertical ? height : width;
+		const shown = readings.slice(0, Math.max(1, Math.floor(room / (vertical ? 28 : 44))));
+		const slot = room / Math.max(1, shown.length);
+		const steps = shown.map((reading, index) => ({
+			reading,
+			index,
+			done: reading.fraction >= 1,
+			active: reading.fraction > 0 && reading.fraction < 1,
+			at: (index + .5) * slot
+		}));
+		if (form === StepForm.Line) this.line(ctx, steps, vertical, slot);
+		this.blocks(ctx, form === StepForm.Line ? [] : steps, vertical, slot);
+		this.words(ctx, steps, vertical, slot);
+	}
+	line(ctx, steps, vertical, slot) {
+		const { height } = ctx.plot;
+		const { numbered } = this.options;
+		const axis = vertical ? 14 : height / 2;
+		const r = Math.max(8, Math.min(13, slot * .28));
+		const color = this.accent(ctx);
+		const spot = (at) => vertical ? {
+			x: axis,
+			y: at
+		} : {
+			x: at,
+			y: axis
+		};
+		const links = steps.slice(0, -1);
+		const rail = ctx.marks("rails", "line", links, (d) => d.reading.id).attr("stroke", ctx.theme.grid).attr("stroke-width", 2).attr("x1", (d) => spot(d.at).x).attr("y1", (d) => spot(d.at).y).attr("x2", (d) => spot(d.at + slot).x).attr("y2", (d) => spot(d.at + slot).y);
+		ctx.hover(rail, (d) => this.tooltip(d.reading, color));
+		const run = (d) => d.done ? slot : 0;
+		const lit = ctx.marks("runs", "line", links.filter((d) => d.done), (d) => d.reading.id).attr("stroke", color).attr("stroke-width", 2).attr("x1", (d) => spot(d.at).x).attr("y1", (d) => spot(d.at).y);
+		ctx.set(lit, {
+			x2: (d) => spot(d.at + run(d)).x,
+			y2: (d) => spot(d.at + run(d)).y
+		}, {
+			x2: (d) => spot(d.at).x,
+			y2: (d) => spot(d.at).y
+		}, 50);
+		ctx.hover(lit, (d) => this.tooltip(d.reading, color));
+		const nodes = ctx.marks("nodes", "circle", steps, (d) => d.reading.id).attr("cx", (d) => spot(d.at).x).attr("cy", (d) => spot(d.at).y).attr("r", r).attr("fill", (d) => d.done ? color : ctx.theme.surface).attr("stroke", (d) => d.done ? color : d.active ? ctx.theme.grid : ctx.theme.axis).attr("stroke-width", 2);
+		ctx.hover(nodes, (d) => this.tooltip(d.reading, color));
+		const arcs = ctx.marks("partial", "path", steps.filter((d) => d.active), (d) => d.reading.id).attr("fill", color).attr("transform", (d) => `translate(${spot(d.at).x},${spot(d.at).y})`);
+		this.sweep(arcs, (d) => d.reading.fraction, (_, f) => this.ring(r - 2, r + 1, 0, f * 2 * Math.PI));
+		ctx.hover(arcs, (d) => this.tooltip(d.reading, color));
+		ctx.marks("checks", "path", steps.filter((d) => d.done), (d) => d.reading.id).attr("d", this.statusView(IndicatorStatus.Good).glyph).attr("fill", "none").attr("stroke", ctx.palette.inkOn(color)).attr("stroke-width", 2).attr("stroke-linecap", "round").attr("stroke-linejoin", "round").attr("pointer-events", "none").attr("transform", (d) => `translate(${spot(d.at).x},${spot(d.at).y})`).attr("vector-effect", "non-scaling-stroke");
+		this.texts(ctx, "numbers", numbered ? steps.filter((d) => !d.done).map((d) => ({
+			key: d.reading.id,
+			text: `${d.index + 1}`,
+			x: spot(d.at).x,
+			y: spot(d.at).y,
+			tone: "ink",
+			weight: 600
+		})) : []);
+	}
+	blocks(ctx, steps, vertical, slot) {
+		const { form } = this.options;
+		const { width, height } = ctx.plot;
+		const chevron = form === StepForm.Chevrons;
+		const color = this.accent(ctx);
+		const thick = chevron ? Math.min(44, vertical ? 44 : height * .3) : 10;
+		const cross = vertical ? 0 : (height - thick) / 2;
+		const tip = chevron ? Math.min(12, slot * .2) : 0;
+		const outline = (d, length) => {
+			const start = d.at - slot / 2 + (d.index ? 1 : 0), end = start + length;
+			if (vertical) return chevron ? `M${cross} ${start}H${thick / 2}L${thick} ${start}V${end - tip}L${thick / 2} ${end}L${cross} ${end - tip}Z` : `M${cross + 2} ${start}H${thick - 2}V${end - 2}H${cross + 2}Z`;
+			return chevron ? `M${start} ${cross}H${end - tip}L${end} ${cross + thick / 2}L${end - tip} ${cross + thick}H${start}${d.index ? `L${start + tip} ${cross + thick / 2}` : ""}Z` : `M${start} ${cross}H${end - 3}V${cross + thick}H${start}Z`;
+		};
+		const full = slot + (chevron ? tip - 3 : 0);
+		const clipped = (d) => Math.min(full, (vertical ? height : width) - (d.at - slot / 2));
+		const bases = ctx.marks("bases", "path", steps, (d) => d.reading.id).attr("fill", ctx.theme.grid).attr("d", (d) => outline(d, clipped(d)));
+		ctx.hover(bases, (d) => this.tooltip(d.reading, color));
+		const fills = ctx.marks("fills", "path", steps.filter((d) => d.done || d.active), (d) => d.reading.id).attr("fill", color).attr("fill-opacity", (d) => d.done ? 1 : .55);
+		this.sweep(fills, () => 1, (d, f) => outline(d, Math.max(tip + 2, clipped(d) * f)));
+		ctx.hover(fills, (d) => this.tooltip(d.reading, color));
+	}
+	words(ctx, steps, vertical, slot) {
+		const { labels, form } = this.options;
+		const { height } = ctx.plot;
+		const line = form === StepForm.Line;
+		const onFill = !line && form === StepForm.Chevrons;
+		const axis = height / 2;
+		const alternate = labels === StepLabels.Alternate;
+		const thick = line ? 16 : onFill ? Math.min(44, height * .3) / 2 + 2 : 7;
+		this.texts(ctx, "names", steps.map((d) => {
+			const state = d.done ? "Done" : d.active ? this.percent(d.reading.fraction) : "To do";
+			const up = alternate && d.index % 2 === 1;
+			if (vertical) return {
+				key: d.reading.id,
+				text: this.fit(`${d.reading.label} · ${state}`, ctx.plot.width - 56),
+				x: line ? 34 : onFill ? 56 : 20,
+				y: d.at,
+				anchor: "start",
+				tone: d.done || d.active ? "ink" : "secondary"
+			};
+			return {
+				key: d.reading.id,
+				text: this.fit(d.reading.label, (alternate ? 1.9 : .96) * slot),
+				x: d.at,
+				y: axis + (up ? -thick - 10 : thick + 10),
+				tone: d.done || d.active ? "ink" : "secondary"
+			};
+		}));
+		this.texts(ctx, "states", vertical ? [] : steps.map((d) => {
+			const up = alternate && d.index % 2 === 1;
+			return {
+				key: d.reading.id,
+				text: this.fit(d.done ? "Done" : d.active ? this.percent(d.reading.fraction) : "To do", .96 * slot, 10),
+				x: d.at,
+				y: axis + (up ? -thick - 24 : thick + 24),
+				size: 10,
+				tone: "muted"
+			};
+		}));
+	}
+};
+export { StepProgress };

package/dist/charts/indicators/TallyChart.js

@@ -0,0 +1,268 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { IndicatorChart } from "./IndicatorChart.js";
+import { TallyBundle, TallyLayout } from "./IndicatorEnums.js";
+import { randomLcg, range } from "d3";
+// src/charts/indicators/TallyChart.ts
+var STROKES = {
+	[TallyBundle.Gate]: [
+		[
+			.1,
+			0,
+			.1,
+			1
+		],
+		[
+			.34,
+			0,
+			.34,
+			1
+		],
+		[
+			.58,
+			0,
+			.58,
+			1
+		],
+		[
+			.82,
+			0,
+			.82,
+			1
+		],
+		[
+			-.08,
+			.84,
+			1,
+			.16
+		]
+	],
+	[TallyBundle.Zheng]: [
+		[
+			.08,
+			.04,
+			.92,
+			.04
+		],
+		[
+			.5,
+			.04,
+			.5,
+			.96
+		],
+		[
+			.5,
+			.48,
+			.86,
+			.48
+		],
+		[
+			.2,
+			.42,
+			.2,
+			.96
+		],
+		[
+			0,
+			.96,
+			1,
+			.96
+		]
+	],
+	[TallyBundle.Box]: [
+		[
+			.06,
+			.06,
+			.06,
+			.94
+		],
+		[
+			.06,
+			.06,
+			.94,
+			.06
+		],
+		[
+			.94,
+			.06,
+			.94,
+			.94
+		],
+		[
+			.06,
+			.94,
+			.94,
+			.94
+		],
+		[
+			.06,
+			.94,
+			.94,
+			.06
+		]
+	],
+	[TallyBundle.Plain]: [
+		[
+			.08,
+			0,
+			.08,
+			1
+		],
+		[
+			.29,
+			0,
+			.29,
+			1
+		],
+		[
+			.5,
+			0,
+			.5,
+			1
+		],
+		[
+			.71,
+			0,
+			.71,
+			1
+		],
+		[
+			.92,
+			0,
+			.92,
+			1
+		]
+	]
+};
+/** Counts as bundled tally marks, for small totals that should feel counted by hand. */
+var TallyChart = class extends IndicatorChart {
+	static meta = {
+		id: "tally",
+		name: "Tally chart",
+		family: ChartFamily.Indicator,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Records counts as groups of five tally marks, so totals can be read by bundles at a glance.",
+		tags: [
+			"count",
+			"hash marks",
+			"frequency",
+			"classroom"
+		],
+		sample: (seed) => SampleData.categories(seed, 5, 1).map((row) => ({
+			...row,
+			value: Math.round(+row.value / 3)
+		})),
+		variants: {
+			bundle: [
+				TallyBundle.Gate,
+				TallyBundle.Zheng,
+				TallyBundle.Box,
+				TallyBundle.Plain
+			],
+			layout: [TallyLayout.Rows, TallyLayout.Columns],
+			perStroke: [
+				1,
+				2,
+				5
+			],
+			wobble: [true, false]
+		}
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			bundle: TallyBundle.Gate,
+			layout: TallyLayout.Rows,
+			perStroke: 1,
+			wobble: true
+		};
+	}
+	bundles(reading) {
+		const total = Math.max(0, Math.round(reading.value / this.options.perStroke));
+		return [...range(Math.floor(total / 5)).map(() => 5), ...total % 5 ? [total % 5] : []];
+	}
+	drawReadings(ctx, readings) {
+		const groups = this.options.layout === TallyLayout.Columns ? this.columns(ctx, readings) : this.rows(ctx, readings);
+		const color = this.accent(ctx);
+		const marks = ctx.marks("bundles", "path", groups, (d) => d.key).attr("fill", "none").attr("stroke", color).attr("stroke-width", (d) => Math.max(1.5, Math.min(2.5, d.size / 10))).attr("stroke-linecap", "round").attr("d", (d) => this.strokes(d)).attr("transform", (d) => `translate(${d.x},${d.y})`);
+		ctx.drawOn(marks);
+		ctx.hover(marks, (d) => this.tooltip(d.reading, color));
+	}
+	strokes(group) {
+		const { bundle, wobble } = this.options;
+		const next = randomLcg(group.seed * .6180339887 % 1), jitter = () => wobble ? (next() - .5) * group.size * .09 : 0;
+		return STROKES[bundle].slice(0, group.strokes).map(([x1, y1, x2, y2]) => {
+			const s = group.size;
+			return `M${(x1 * s + jitter()).toFixed(2)} ${(y1 * s + jitter()).toFixed(2)}L${(x2 * s + jitter()).toFixed(2)} ${(y2 * s + jitter()).toFixed(2)}`;
+		}).join("");
+	}
+	rows(ctx, readings) {
+		const { width, height } = ctx.plot;
+		const shown = readings.slice(0, Math.max(1, Math.floor(height / 20)));
+		const slot = height / Math.max(1, shown.length);
+		const gutter = Math.min(width * .26, Math.max(20, ...shown.map((r) => this.textWidth(r.label))) + 12);
+		const room = width - gutter - 40;
+		const most = Math.max(1, ...shown.map((r) => this.bundles(r).length));
+		const size = Math.max(7, Math.min(22, slot * .68, room / (most * 1.45)));
+		const pitch = size * 1.45, fit = Math.max(1, Math.floor(room / pitch));
+		this.texts(ctx, "text", shown.flatMap((r, i) => [{
+			key: `${r.id}n`,
+			text: this.fit(r.label, gutter - 10),
+			x: 0,
+			y: (i + .5) * slot,
+			anchor: "start"
+		}, {
+			key: `${r.id}v`,
+			text: this.formatted(r.value),
+			x: width,
+			y: (i + .5) * slot,
+			anchor: "end",
+			tone: "ink",
+			weight: 600
+		}]));
+		return shown.flatMap((reading, i) => this.bundles(reading).slice(0, fit).map((strokes, j) => ({
+			key: `${reading.id}/${j}`,
+			x: gutter + j * pitch,
+			y: (i + .5) * slot - size / 2,
+			size,
+			strokes,
+			seed: i * 31 + j + 1,
+			reading
+		})));
+	}
+	columns(ctx, readings) {
+		const { width, height } = ctx.plot;
+		const shown = readings.slice(0, Math.max(1, Math.floor(width / 36)));
+		const slot = width / Math.max(1, shown.length), base = height - 20, room = base - 22;
+		const most = Math.max(1, ...shown.map((r) => this.bundles(r).length));
+		const size = Math.max(7, Math.min(22, slot * .5, room / (most * 1.3)));
+		const pitch = size * 1.3, fit = Math.max(1, Math.floor(room / pitch));
+		this.texts(ctx, "text", shown.flatMap((r, i) => {
+			const count = Math.min(fit, this.bundles(r).length);
+			return [{
+				key: `${r.id}n`,
+				text: this.fit(r.label, slot - 4),
+				x: (i + .5) * slot,
+				y: height - 7
+			}, {
+				key: `${r.id}v`,
+				text: this.formatted(r.value),
+				x: (i + .5) * slot,
+				y: base - count * pitch - 8,
+				tone: "ink",
+				weight: 600
+			}];
+		}));
+		return shown.flatMap((reading, i) => this.bundles(reading).slice(0, fit).map((strokes, j) => ({
+			key: `${reading.id}/${j}`,
+			x: (i + .5) * slot - size / 2,
+			y: base - (j + 1) * pitch + (pitch - size),
+			size,
+			strokes,
+			seed: i * 31 + j + 1,
+			reading
+		})));
+	}
+};
+export { TallyChart };