@mstone6969/graph 0.1.0 → 0.2.0

package/dist/charts/geomaps/FloorPlanMap.js

@@ -0,0 +1,324 @@
+import { ChartFamily, DataShape, Dimension, LegendPosition, SymbolKind } from "../../core/enums.js";
+import { Scales } from "../../core/Scales.js";
+import { ZoomControls } from "../../core/ZoomControls.js";
+import { GeoChart } from "./GeoChart.js";
+import { GeoClasses, GeoClassification } from "./GeoClasses.js";
+import { GeoLegend } from "./GeoLegend.js";
+import { FloorDoorSwing, FloorPlanModel } from "./FloorPlanModel.js";
+import { FloorPlanSamples } from "./FloorPlanSamples.js";
+import { RoomLabelFit, RoomLabelMode } from "./RoomLabelFit.js";
+import { geoIdentity, symbol } from "d3";
+// src/charts/geomaps/FloorPlanMap.ts
+/** Line draws walls as plan linework; Gap leaves them as a surface-coloured gap between rooms. */
+var FloorWallStyle = /* @__PURE__ */ function(FloorWallStyle) {
+	FloorWallStyle["Line"] = "line";
+	FloorWallStyle["Gap"] = "gap";
+	return FloorWallStyle;
+}({});
+/** Swing draws the plan convention of leaf and quarter arc; Opening marks only the gap in the wall. */
+var FloorDoorStyle = /* @__PURE__ */ function(FloorDoorStyle) {
+	FloorDoorStyle["Swing"] = "swing";
+	FloorDoorStyle["Opening"] = "opening";
+	FloorDoorStyle["None"] = "none";
+	return FloorDoorStyle;
+}({});
+/** Where the plan's y axis starts: BottomLeft for CAD and GeoJSON, TopLeft for pixel and SVG coordinates. */
+var FloorPlanOrigin = /* @__PURE__ */ function(FloorPlanOrigin) {
+	FloorPlanOrigin["BottomLeft"] = "bottom-left";
+	FloorPlanOrigin["TopLeft"] = "top-left";
+	return FloorPlanOrigin;
+}({});
+var EDGE = 8;
+var RAIL = 32;
+var BUTTON = 28;
+var WALL = 1.5;
+var MARKER_AREA = 80;
+var MARKER_BOX = 12;
+var SHORT_DOOR = 4;
+var SYMBOLS = [
+	SymbolKind.Circle,
+	SymbolKind.Square,
+	SymbolKind.Diamond,
+	SymbolKind.Triangle,
+	SymbolKind.Star,
+	SymbolKind.Wye,
+	SymbolKind.Cross
+];
+/**
+* Indoor map: rooms in plain x, y units shaded by a value, for occupancy, sensor or space-planning data
+* where the building is the geography. Plans go through an identity projection, so proportions are kept
+* and nothing is treated as a longitude. Doors follow the architectural convention of a leaf and quarter
+* arc. Every floor shares one frame and colour scale, so floors line up and compare. Zooming redraws
+* from the plan, which keeps text and symbols their size and lets small rooms take their labels.
+*/
+var FloorPlanMap = class extends GeoChart {
+	static meta = {
+		id: "floor-plan-map",
+		name: "Floor plan map",
+		family: ChartFamily.Geospatial,
+		dimension: Dimension.Two,
+		shape: DataShape.Geo,
+		description: "Shades the rooms of a building floor by floor in plain plan units, with fitted labels, doors and asset markers.",
+		tags: [
+			"map",
+			"indoor",
+			"floor plan",
+			"building",
+			"rooms",
+			"occupancy",
+			"facilities",
+			"level",
+			"assets"
+		],
+		sample: (seed) => FloorPlanSamples.building(seed),
+		variants: {
+			walls: ["line", "gap"],
+			doors: [
+				"swing",
+				"opening",
+				"none"
+			],
+			labels: [
+				RoomLabelMode.Name,
+				RoomLabelMode.NameValue,
+				RoomLabelMode.None
+			],
+			markers: [true, false],
+			classification: [
+				GeoClassification.Continuous,
+				GeoClassification.Quantile,
+				GeoClassification.EqualInterval,
+				GeoClassification.NaturalBreaks
+			]
+		}
+	};
+	#plan = null;
+	#moved = false;
+	defaults() {
+		return {
+			...super.defaults(),
+			graticule: false,
+			legend: LegendPosition.Top,
+			value: "value",
+			name: "name",
+			levelColumn: "level",
+			points: "points",
+			x: "x",
+			y: "y",
+			type: "type",
+			join: "name",
+			levelPicker: true,
+			origin: "bottom-left",
+			walls: "line",
+			doors: "swing",
+			labels: RoomLabelMode.Name,
+			markers: true,
+			classification: GeoClassification.Continuous,
+			bins: 5
+		};
+	}
+	get framed() {
+		return false;
+	}
+	get semanticZoom() {
+		return true;
+	}
+	get animated() {
+		return !this.#moved && super.animated;
+	}
+	get #model() {
+		return this.#plan ??= new FloorPlanModel(this.options.data, this.options);
+	}
+	/** The floors in the plan, lowest first. */
+	get levels() {
+		return this.#model.levels;
+	}
+	update(patch) {
+		this.#plan = null;
+		this.#moved = false;
+		return super.update(patch);
+	}
+	viewMoved(transform, settled) {
+		this.#moved = true;
+		this.render();
+		super.viewMoved(transform, settled);
+	}
+	target() {
+		const features = this.#model.rooms.map((room) => room.feature);
+		return features.length ? {
+			type: "FeatureCollection",
+			features
+		} : null;
+	}
+	get #picking() {
+		return !!this.options.levelPicker && this.#model.levels.length > 1;
+	}
+	/** Fits the whole building at one uniform scale, so proportions hold and floors stay in register. */
+	frame(ctx) {
+		const width = ctx.plot.width, height = Math.max(40, ctx.plot.height - this.keyHeight());
+		const left = EDGE + (this.#picking ? RAIL : 0), right = EDGE + (this.options.zoom ? RAIL : 0);
+		const { x0, y0, x1, y1 } = this.#model.bounds ?? {
+			x0: 0,
+			y0: 0,
+			x1: 1,
+			y1: 1
+		};
+		const up = this.options.origin === "bottom-left";
+		const room = [Math.max(1, width - left - right), Math.max(1, height - 16)];
+		const scale = Math.min(x1 > x0 ? room[0] / (x1 - x0) : Infinity, y1 > y0 ? room[1] / (y1 - y0) : Infinity);
+		const k = Number.isFinite(scale) ? scale : 1;
+		const tx = left + (room[0] - k * (x1 - x0)) / 2 - k * x0;
+		const ty = EDGE + (room[1] - k * (y1 - y0)) / 2 + (up ? k * y1 : -k * y0);
+		const view = this.viewport.transform;
+		const projection = geoIdentity().reflectY(up).scale(k * view.k).translate([view.x + view.k * tx, view.y + view.k * ty]);
+		return this.frameOf(projection, width, height);
+	}
+	#classes() {
+		const values = this.#model.rooms.flatMap((room) => room.value ?? []);
+		return new GeoClasses(values, this.options.classification, this.options.bins);
+	}
+	#tone(ctx, classes, value) {
+		const { midpoint } = this.options;
+		if (midpoint === void 0) return ctx.palette.sequential(classes.tone(value));
+		const reach = Math.max(classes.max - midpoint, midpoint - classes.min) || 1;
+		return ctx.palette.diverging((value - midpoint) / reach);
+	}
+	/** Hinge, latch and swing in pixels. Left is the viewer's left, whichever way the plan's y axis runs. */
+	#door(door, frame) {
+		const hinge = frame.locate(...door.from), latch = frame.locate(...door.to);
+		if (!hinge || !latch) return null;
+		const dx = latch[0] - hinge[0], dy = latch[1] - hinge[1], radius = Math.hypot(dx, dy);
+		const side = door.swing === FloorDoorSwing.Left ? 1 : -1;
+		const tip = [hinge[0] + side * dy, hinge[1] - side * dx];
+		const swings = door.swing !== FloorDoorSwing.None && this.options.doors === "swing" && radius >= SHORT_DOOR;
+		const corners = swings ? [
+			hinge,
+			latch,
+			tip,
+			[tip[0] + dx, tip[1] + dy]
+		] : [hinge, latch];
+		const xs = corners.map(([x]) => x), ys = corners.map(([, y]) => y), x = Math.min(...xs), y = Math.min(...ys);
+		return {
+			...door,
+			hinge,
+			latch,
+			swingPath: swings ? `M${hinge}L${tip}A${radius},${radius} 0 0 ${side > 0 ? 1 : 0} ${latch}` : null,
+			box: {
+				x,
+				y,
+				w: Math.max(...xs) - x,
+				h: Math.max(...ys) - y
+			}
+		};
+	}
+	#drawDoors(ctx, doors) {
+		const { theme } = ctx, { walls } = this.options;
+		const lined = walls === "line";
+		ctx.marks("door-openings", "line", doors, (d) => d.key).attr("x1", (d) => d.hinge[0]).attr("y1", (d) => d.hinge[1]).attr("x2", (d) => d.latch[0]).attr("y2", (d) => d.latch[1]).attr("stroke", lined ? theme.surface : theme.inkSecondary).attr("stroke-width", lined ? 3 : WALL);
+		const swung = doors.filter((door) => door.swingPath);
+		ctx.marks("door-halos", "path", swung, (d) => d.key).attr("d", (d) => d.swingPath).attr("fill", "none").attr("stroke", theme.surface).attr("stroke-width", 3).attr("stroke-opacity", .7).attr("pointer-events", "none");
+		const swings = ctx.marks("door-swings", "path", swung, (d) => d.key).attr("d", (d) => d.swingPath).attr("fill", "none").attr("stroke", theme.inkSecondary).attr("stroke-width", 1);
+		ctx.hover(swings, (d) => ({
+			title: d.name,
+			rows: [["Swing", d.swing]]
+		}));
+	}
+	#drawLabels(ctx, lines) {
+		const text = ctx.marks("room-labels", "text", lines, (d) => d.key).attr("x", (d) => d.rotated ? 0 : d.x).attr("y", (d) => d.rotated ? 0 : d.y).attr("transform", (d) => d.rotated ? `translate(${d.x},${d.y}) rotate(-90)` : null).attr("text-anchor", "middle").attr("pointer-events", "none").text((d) => d.text);
+		ctx.text(text, 11).attr("font-weight", (d) => d.strong ? 500 : 400).attr("fill", (d) => d.ink);
+	}
+	drawMap(ctx, frame) {
+		const { theme } = ctx, plan = this.#model, { walls, doors, labels, markers, value: column } = this.options;
+		const level = plan.selected(this.options.level), lined = walls === "line";
+		const rooms = plan.rooms.filter((room) => FloorPlanModel.on(room, level));
+		const classes = this.#classes();
+		const fill = (room) => room.value === null ? theme.grid : this.#tone(ctx, classes, classes.classed ? classes.center(classes.bin(room.value)) : room.value);
+		const shapes = ctx.marks("rooms", "path", rooms, (d) => d.key).attr("fill", fill).attr("fill-rule", "evenodd").attr("stroke", lined ? "none" : theme.surface).attr("stroke-width", lined ? 0 : 2);
+		this.fill(ctx, shapes, (d) => frame.path(d.feature) ?? "");
+		ctx.hover(shapes, (d) => ({
+			title: d.name,
+			rows: [[column, d.value ?? "No data"], ...d.level === null ? [] : [["Level", d.level]]]
+		}));
+		ctx.marks("walls", "path", lined ? rooms : [], (d) => d.key).attr("d", (d) => frame.path(d.feature) ?? "").attr("fill", "none").attr("stroke", theme.inkSecondary).attr("stroke-width", WALL).attr("pointer-events", "none");
+		const drawn = doors === "none" ? [] : plan.doors.filter((door) => FloorPlanModel.on(door, level)).flatMap((door) => this.#door(door, frame) ?? []);
+		this.#drawDoors(ctx, drawn);
+		const kinds = markers ? [...new Set(plan.assets.map((asset) => asset.type))] : [];
+		for (const kind of kinds) ctx.palette.color(kind);
+		const assets = markers ? plan.assets.filter((asset) => FloorPlanModel.on(asset, level)).flatMap((asset) => {
+			const at = frame.locate(asset.x, asset.y);
+			return at ? [{
+				...asset,
+				at
+			}] : [];
+		}) : [];
+		const shape = (kind) => symbol(Scales.symbol(SYMBOLS[kinds.indexOf(kind) % SYMBOLS.length]), MARKER_AREA)() ?? "";
+		const dots = ctx.marks("assets", "path", assets, (d) => d.key).attr("d", (d) => shape(d.type)).attr("transform", (d) => `translate(${d.at})`).attr("fill", (d) => ctx.palette.color(d.type)).attr("stroke", theme.surface).attr("stroke-width", 2);
+		ctx.hover(dots, (d) => ({
+			title: d.name,
+			color: ctx.palette.color(d.type),
+			rows: [["Type", d.type], ...d.level === null ? [] : [["Level", d.level]]]
+		}));
+		const blocked = [...drawn.map((door) => door.box), ...assets.map(({ at: [x, y] }) => ({
+			x: x - MARKER_BOX / 2,
+			y: y - MARKER_BOX / 2,
+			w: MARKER_BOX,
+			h: MARKER_BOX
+		}))];
+		const reach = Math.max(Math.abs(classes.min), Math.abs(classes.max));
+		const place = ([x, y]) => frame.locate(x, y) ?? [NaN, NaN];
+		const lines = labels === RoomLabelMode.None ? [] : rooms.flatMap((room) => RoomLabelFit.place({
+			room,
+			place,
+			blocked,
+			width: frame.width,
+			height: frame.height,
+			detail: labels === RoomLabelMode.NameValue && room.value !== null ? Scales.format(room.value, reach) : null
+		}).map((line) => ({
+			...line,
+			ink: this.inkOn(ctx, fill(room))
+		})));
+		this.#drawLabels(ctx, lines);
+	}
+	keyHeight() {
+		return this.#model.rooms.some((room) => room.value !== null) ? GeoLegend.height : 0;
+	}
+	drawKey(ctx, frame) {
+		const shaded = this.keyHeight() > 0, classes = this.#classes();
+		if (shaded) GeoLegend.classes(ctx, frame, classes, (value) => this.#tone(ctx, classes, value));
+		else for (const name of ["key-swatches", "key-ticks"]) ctx.group(name).selectAll("*").remove();
+		this.#drawPicker(ctx, frame);
+	}
+	/** An elevator panel: the top floor at the top, sliding around the current floor when they outnumber the room. */
+	#drawPicker(ctx, frame) {
+		const { levels } = this.#model, current = this.#model.selected(this.options.level);
+		const fit = Math.max(1, Math.floor(frame.height / BUTTON)), at = Math.max(0, levels.indexOf(current ?? ""));
+		const start = Math.max(0, Math.min(levels.length - fit, at - Math.floor(fit / 2)));
+		const buttons = (this.#picking ? levels.slice(start, start + fit).reverse() : []).map((level) => ({
+			key: level,
+			glyph: level.slice(0, 3),
+			label: `Level ${level}`,
+			run: () => void this.update({ level })
+		}));
+		const panel = ctx.nest("translate(0,0)", "level-picker");
+		ZoomControls.draw(panel, 30, buttons);
+		const { theme } = ctx;
+		const items = panel.group("zoom-controls").selectAll("g").attr("aria-pressed", (d) => String(d.key === current));
+		items.select("rect").attr("fill", (d) => d.key === current ? theme.ink : theme.surface);
+		items.select("text").attr("font-size", 11).attr("fill", (d) => d.key === current ? theme.surface : theme.ink).attr("y", 17);
+	}
+	table() {
+		return {
+			columns: [
+				"level",
+				"name",
+				"value"
+			],
+			rows: this.#model.rooms.map((room) => [
+				room.level,
+				room.name,
+				room.value
+			])
+		};
+	}
+};
+export { FloorDoorStyle, FloorPlanMap, FloorPlanOrigin, FloorWallStyle };

package/dist/charts/geomaps/FloorPlanModel.js

@@ -0,0 +1,179 @@
+import { index } from "d3";
+// src/charts/geomaps/FloorPlanModel.ts
+/** Which way a door leaf opens, looking along the plan from hinge to latch. `None` is an open archway. */
+var FloorDoorSwing = /* @__PURE__ */ function(FloorDoorSwing) {
+	FloorDoorSwing["Left"] = "left";
+	FloorDoorSwing["Right"] = "right";
+	FloorDoorSwing["None"] = "none";
+	return FloorDoorSwing;
+}({});
+var number = (value) => {
+	if (value === null || value === void 0 || value === "") return null;
+	const parsed = +value;
+	return Number.isFinite(parsed) ? parsed : null;
+};
+var point = (value) => {
+	if (!Array.isArray(value)) return null;
+	const x = number(value[0]), y = number(value[1]);
+	return x === null || y === null ? null : [x, y];
+};
+var levelOf = (value) => value === null || value === void 0 || value === "" || typeof value === "number" && !Number.isFinite(value) ? null : String(value);
+/** Closes a ring, because a polygon stream drops the last point as a repeat of the first. Rings under three corners are dropped. */
+var ring = (points) => {
+	if (!Array.isArray(points)) return null;
+	const pairs = points.map(point).filter((corner) => !!corner);
+	if (!pairs.length) return null;
+	const first = pairs[0], last = pairs.at(-1);
+	const closed = first[0] === last[0] && first[1] === last[1] ? pairs : [...pairs, first];
+	return closed.length < 4 ? null : closed;
+};
+/** How many arrays wrap a coordinate: 2 for a ring, 3 for rings, 4 for several polygons. */
+var depth = (value) => Array.isArray(value) ? 1 + depth(value[0]) : 0;
+/** A polygon whose outer ring is bad is dropped whole, since its holes mean nothing alone. */
+var polygon = (value) => {
+	const read = value.map(ring);
+	return read[0] ? read.filter((item) => !!item) : [];
+};
+/** Reads a ring, a ring with holes, or several polygons, the last two as GeoJSON nests them. */
+var polygons = (value) => {
+	const nesting = depth(value);
+	return (nesting === 2 ? [[value]] : nesting === 3 ? [value] : nesting === 4 ? value : []).map(polygon).filter((part) => part.length);
+};
+var isCollection = (data) => data.type === "FeatureCollection";
+var swingOf = (value) => Object.values(FloorDoorSwing).includes(value) ? value : "none";
+/** One plan read from either input form, with bad geometry dropped and values joined. */
+var FloorPlanModel = class FloorPlanModel {
+	rooms = [];
+	doors = [];
+	assets = [];
+	/** Lowest floor first: numbers ascending, names in first-seen order. */
+	levels;
+	bounds;
+	constructor(data, fields) {
+		const plan = !data ? { rooms: [] } : isCollection(data) ? FloorPlanModel.#fromFeatures(data, fields) : data;
+		const seen = /* @__PURE__ */ new Map();
+		const unique = (id) => {
+			const count = seen.get(id) ?? 0;
+			seen.set(id, count + 1);
+			return count ? `${id}#${count}` : id;
+		};
+		const table = fields.rows && index(fields.rows, (row) => String(row[fields.join]));
+		for (const [i, source] of (plan.rooms ?? []).entries()) {
+			const parts = polygons(source[fields.points]);
+			if (!parts.length) continue;
+			const row = {
+				...source,
+				...table?.get(String(source[fields.join]))
+			};
+			const level = levelOf(row[fields.levelColumn]);
+			const name = String(row[fields.name] ?? row.id ?? `Room ${i + 1}`);
+			this.rooms.push({
+				key: unique(`${level ?? ""}/${String(row.id ?? name)}`),
+				level,
+				name,
+				value: number(row[fields.value]),
+				row,
+				parts,
+				poles: /* @__PURE__ */ new Map(),
+				feature: {
+					type: "Feature",
+					properties: {},
+					geometry: {
+						type: "MultiPolygon",
+						coordinates: parts
+					}
+				}
+			});
+		}
+		for (const door of plan.doors ?? []) {
+			const from = point(door.from), to = point(door.to);
+			if (!from || !to || from[0] === to[0] && from[1] === to[1]) continue;
+			const level = levelOf(door[fields.levelColumn]);
+			this.doors.push({
+				key: unique(`door/${level ?? ""}/${from}/${to}`),
+				level,
+				name: door.name ?? "Door",
+				from,
+				to,
+				swing: swingOf(door.swing)
+			});
+		}
+		for (const asset of plan.assets ?? []) {
+			const x = number(asset[fields.x]), y = number(asset[fields.y]);
+			if (x === null || y === null) continue;
+			const level = levelOf(asset[fields.levelColumn]), type = String(asset[fields.type] ?? "Asset");
+			this.assets.push({
+				key: unique(`asset/${level ?? ""}/${String(asset.id ?? `${type}/${x}/${y}`)}`),
+				level,
+				name: String(asset[fields.name] ?? type),
+				type,
+				x,
+				y
+			});
+		}
+		this.levels = this.#levels();
+		this.bounds = this.#bounds();
+	}
+	/** Features as plain rows: polygons are rooms, lines are doors, points are assets. */
+	static #fromFeatures({ features }, fields) {
+		const plan = {
+			rooms: [],
+			doors: [],
+			assets: []
+		};
+		for (const feature of features ?? []) {
+			const { geometry } = feature, properties = {
+				id: feature.id,
+				...feature.properties
+			};
+			if (geometry?.type === "Polygon" || geometry?.type === "MultiPolygon") plan.rooms.push({
+				...properties,
+				[fields.points]: geometry.coordinates
+			});
+			else if (geometry?.type === "LineString") plan.doors.push({
+				...properties,
+				from: geometry.coordinates[0],
+				to: geometry.coordinates.at(-1)
+			});
+			else if (geometry?.type === "Point") plan.assets.push({
+				...properties,
+				[fields.x]: geometry.coordinates[0],
+				[fields.y]: geometry.coordinates[1]
+			});
+		}
+		return plan;
+	}
+	#levels() {
+		const levels = [...new Set([
+			...this.rooms,
+			...this.doors,
+			...this.assets
+		].flatMap((item) => item.level ?? []))];
+		return levels.every((level) => number(level) !== null) ? levels.sort((a, b) => +a - +b) : levels;
+	}
+	/** The whole building, so that floors stay registered with each other. */
+	#bounds() {
+		const points = [
+			...this.rooms.flatMap((room) => room.parts.flat(2)),
+			...this.doors.flatMap((door) => [door.from, door.to]),
+			...this.assets.map(({ x, y }) => [x, y])
+		];
+		if (!points.length) return null;
+		const xs = points.map(([x]) => x), ys = points.map(([, y]) => y);
+		return {
+			x0: Math.min(...xs),
+			y0: Math.min(...ys),
+			x1: Math.max(...xs),
+			y1: Math.max(...ys)
+		};
+	}
+	/** The floor to show: the one asked for, or the lowest. */
+	selected(level) {
+		return level === void 0 ? this.levels[0] ?? null : String(level);
+	}
+	/** Whether an item stands on this floor. */
+	static on(item, level) {
+		return item.level === null || level === null || item.level === level;
+	}
+};
+export { FloorDoorSwing, FloorPlanModel };