@mstone6969/graph 0.0.0-stage → 0.1.0

package/dist/charts/flow/CohortFlow.js

@@ -0,0 +1,333 @@
+import { ChartFamily, CurveKind, DataShape, Dimension } from "../../core/enums.js";
+import { Scales } from "../../core/Scales.js";
+import { SampleData } from "../../data/SampleData.js";
+import { FlowChart } from "./FlowChart.js";
+import { area, line, scaleLinear, scalePoint } from "d3";
+// src/charts/flow/CohortFlow.ts
+var CohortForm = /* @__PURE__ */ function(CohortForm) {
+	CohortForm["LayerCake"] = "layer-cake";
+	CohortForm["Curves"] = "curves";
+	CohortForm["Triangle"] = "triangle";
+	return CohortForm;
+}({});
+/** `Age` lines cohorts up at their start; `Calendar` places them on the shared timeline. */
+var CohortAlignment = /* @__PURE__ */ function(CohortAlignment) {
+	CohortAlignment["Age"] = "age";
+	CohortAlignment["Calendar"] = "calendar";
+	return CohortAlignment;
+}({});
+/** `Absolute` plots the amount; `Relative` plots it as a share of the cohort's first period. */
+var CohortMeasure = /* @__PURE__ */ function(CohortMeasure) {
+	CohortMeasure["Absolute"] = "absolute";
+	CohortMeasure["Relative"] = "relative";
+	return CohortMeasure;
+}({});
+var CohortStack = /* @__PURE__ */ function(CohortStack) {
+	CohortStack["OldestFirst"] = "oldest-first";
+	CohortStack["NewestFirst"] = "newest-first";
+	return CohortStack;
+}({});
+/** Compare groups that started at different times: how each one decays, and what the installed base is built from. */
+var CohortFlow = class extends FlowChart {
+	static meta = {
+		id: "cohort-flow",
+		name: "Cohort flow",
+		family: ChartFamily.Flow,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Follows groups that started at different times, as a layer cake, aligned decay curves or a triangle.",
+		tags: [
+			"cohort",
+			"layer cake",
+			"retention triangle",
+			"vintage"
+		],
+		sample: (seed) => {
+			const rows = SampleData.categories(seed, 8, 8);
+			return Array.from({ length: 8 }, (_, c) => {
+				let value = 40 + +rows[c * 8].value;
+				return Array.from({ length: 8 - c }, (__, period) => {
+					const row = {
+						cohort: `Week ${c + 1}`,
+						period,
+						value: Math.round(value)
+					};
+					value *= .62 + +rows[c * 8 + period].value / 100 * .3;
+					return row;
+				});
+			}).flat();
+		},
+		variants: {
+			form: [
+				"layer-cake",
+				"curves",
+				"triangle"
+			],
+			alignment: ["calendar", "age"],
+			measure: ["absolute", "relative"],
+			curve: [
+				CurveKind.Monotone,
+				CurveKind.Linear,
+				CurveKind.StepAfter
+			],
+			stack: ["oldest-first", "newest-first"]
+		},
+		valid: (v) => {
+			if (v.form === "layer-cake") return v.alignment === "calendar";
+			if (v.form === "curves") return v.stack === "oldest-first";
+			return v.curve === CurveKind.Monotone;
+		}
+	};
+	defaults() {
+		return {
+			cohort: "cohort",
+			period: "period",
+			y: "value",
+			form: "layer-cake",
+			alignment: "calendar",
+			measure: "absolute",
+			curve: CurveKind.Monotone,
+			stack: "oldest-first"
+		};
+	}
+	plotMargin() {
+		return {
+			top: 10,
+			right: 12,
+			bottom: 26,
+			left: 52
+		};
+	}
+	points() {
+		const { data, cohort, period, y } = this.options;
+		const cohorts = [], merged = /* @__PURE__ */ new Map();
+		for (const row of data ?? []) {
+			const name = row[cohort], age = Number(row[period]), value = Number(row[y]);
+			if (name === null || name === void 0 || !Number.isFinite(age) || !Number.isFinite(value)) continue;
+			const label = String(name);
+			if (!cohorts.includes(label)) cohorts.push(label);
+			const key = `${label}/${age}`, hit = merged.get(key);
+			if (hit) hit.value += value;
+			else merged.set(key, {
+				cohort: label,
+				index: cohorts.indexOf(label),
+				age,
+				time: cohorts.indexOf(label) + age,
+				value,
+				share: 0
+			});
+		}
+		const points = [...merged.values()].sort((a, b) => a.index - b.index || a.age - b.age);
+		const base = /* @__PURE__ */ new Map();
+		for (const point of points) {
+			if (!base.has(point.cohort)) base.set(point.cohort, point.value || 1);
+			point.share = point.value / base.get(point.cohort);
+		}
+		return {
+			cohorts,
+			points
+		};
+	}
+	ramp(ctx, index, count) {
+		return ctx.palette.sequential(.25 + .75 * index / Math.max(1, count - 1));
+	}
+	axisLabels(ctx, ticks, x, values, y) {
+		this.ticks(ctx, "x-ticks", ticks.map((tick) => ({
+			key: `${tick}`,
+			x: x(tick),
+			y: 0,
+			text: `${tick}`,
+			anchor: "middle"
+		})), "bottom");
+		this.ticks(ctx, "y-ticks", values.map(([value, text]) => ({
+			key: text,
+			x: -8,
+			y: y(value),
+			text,
+			anchor: "end"
+		})), "left", 52);
+	}
+	draw(ctx) {
+		const data = this.points();
+		const empty = {
+			cake: [],
+			lines: [],
+			cells: []
+		};
+		const form = this.options.form;
+		if (form !== "layer-cake") ctx.marks("cake", "path", empty.cake);
+		if (form !== "curves") {
+			ctx.marks("lines", "path", empty.lines);
+			ctx.marks("ends", "circle", empty.cells);
+		}
+		if (form !== "triangle") {
+			ctx.marks("cells", "rect", empty.cells);
+			ctx.marks("percents", "text", empty.cells);
+		}
+		if (form === "layer-cake") this.cake(ctx, data);
+		else if (form === "curves") this.curves(ctx, data);
+		else this.triangle(ctx, data);
+	}
+	cake(ctx, { cohorts, points }) {
+		const { measure, curve, stack } = this.options;
+		const { width, height } = ctx.plot;
+		const times = [...new Set(points.map((point) => point.time))].sort((a, b) => a - b);
+		const order = stack === "oldest-first" ? cohorts : [...cohorts].reverse();
+		const lookup = new Map(points.map((point) => [`${point.cohort}/${point.time}`, point]));
+		const totals = new Map(times.map((time) => [time, cohorts.reduce((sum, name) => sum + Math.max(0, lookup.get(`${name}/${time}`)?.value ?? 0), 0)]));
+		const relative = measure === "relative";
+		const running = new Map(times.map((time) => [time, 0]));
+		const layers = order.map((name) => ({
+			name,
+			index: cohorts.indexOf(name),
+			rows: times.map((time) => {
+				const raw = Math.max(0, lookup.get(`${name}/${time}`)?.value ?? 0);
+				const value = relative ? raw / (totals.get(time) || 1) : raw;
+				const y0 = running.get(time);
+				running.set(time, y0 + value);
+				return {
+					time,
+					y0,
+					y1: y0 + value,
+					raw
+				};
+			})
+		}));
+		const top = Math.max(1e-9, ...running.values());
+		const x = scaleLinear([times[0] ?? 0, times[times.length - 1] ?? 1], [0, width]);
+		const y = scaleLinear([0, top], [height, 0]);
+		const shape = area().curve(Scales.curve(curve)).x((d) => x(d.time)).y0((d) => y(d.y0)).y1((d) => y(d.y1));
+		const flat = (rows) => shape(rows.map((row) => ({
+			...row,
+			y0: row.y0,
+			y1: row.y0
+		}))) ?? "";
+		const fill = (layer) => this.ramp(ctx, layer.index, cohorts.length);
+		const paths = ctx.marks("cake", "path", layers, (d) => d.name).attr("fill", fill).attr("stroke", ctx.theme.surface).attr("stroke-width", 2);
+		ctx.set(paths, { d: (d) => shape(d.rows) ?? "" }, { d: (d) => flat(d.rows) }, 30);
+		ctx.hover(paths, (d) => ({
+			title: d.name,
+			color: fill(d),
+			rows: d.rows.filter((row) => row.raw).slice(0, 8).map((row) => [`Period ${row.time + 1}`, row.raw])
+		}));
+		this.axisLabels(ctx, times, x, y.ticks(4).map((tick) => [tick, relative ? `${Math.round(tick * 100)}%` : tick.toLocaleString("en")]), y);
+		this.labels(ctx, "names", layers.flatMap((layer) => {
+			const row = layer.rows.reduce((best, item) => item.y1 - item.y0 > best.y1 - best.y0 ? item : best);
+			return y(row.y0) - y(row.y1) >= 16 ? [{
+				key: layer.name,
+				x: Math.max(4, Math.min(width - 4, x(row.time))),
+				y: y((row.y0 + row.y1) / 2),
+				text: layer.name,
+				anchor: x(row.time) > width * .8 ? "end" : "start",
+				fill: this.inkOver(ctx, fill(layer))
+			}] : [];
+		}));
+	}
+	curves(ctx, { cohorts, points }) {
+		const { measure, curve, alignment } = this.options;
+		const { width, height } = ctx.plot;
+		const relative = measure === "relative";
+		const along = (point) => alignment === "age" ? point.age : point.time;
+		const metric = (point) => relative ? point.share : point.value;
+		const ticks = [...new Set(points.map(along))].sort((a, b) => a - b);
+		const x = scalePoint(ticks, [0, Math.max(10, width - 58)]);
+		const y = scaleLinear([0, Math.max(1e-9, ...points.map(metric))], [height, 0]).nice();
+		const shape = line().curve(Scales.curve(curve)).x((d) => x(along(d))).y((d) => y(metric(d)));
+		const lines = cohorts.map((name, index) => ({
+			name,
+			index,
+			rows: points.filter((point) => point.cohort === name)
+		}));
+		const stroke = (d) => this.ramp(ctx, d.index, cohorts.length);
+		const paths = ctx.marks("lines", "path", lines, (d) => d.name).attr("fill", "none").attr("stroke", stroke).attr("stroke-width", 2).attr("stroke-linecap", "round");
+		this.stroke(ctx, paths, (d) => shape(d.rows) ?? "");
+		ctx.hover(paths, (d) => ({
+			title: d.name,
+			color: stroke(d),
+			rows: d.rows.slice(0, 8).map((point) => [`Period ${point.age}`, relative ? `${Math.round(point.share * 100)}%` : point.value])
+		}));
+		const ends = lines.flatMap((row) => row.rows.slice(-1).map((point) => ({
+			...point,
+			name: row.name
+		})));
+		const dots = ctx.marks("ends", "circle", ends, (d) => d.name).attr("fill", (d) => stroke(d)).attr("stroke", ctx.theme.surface).attr("stroke-width", 2);
+		ctx.set(dots, {
+			cx: (d) => x(along(d)),
+			cy: (d) => y(metric(d)),
+			r: 5
+		}, {
+			cx: (d) => x(along(d)),
+			cy: (d) => y(metric(d)),
+			r: 0
+		});
+		ctx.hover(dots, (d) => ({
+			title: d.name,
+			color: stroke(d),
+			rows: [[`Period ${d.age}`, relative ? `${Math.round(d.share * 100)}%` : d.value]]
+		}));
+		this.axisLabels(ctx, ticks, (tick) => x(tick), y.ticks(4).map((tick) => [tick, relative ? `${Math.round(tick * 100)}%` : tick.toLocaleString("en")]), y);
+		this.labels(ctx, "names", [...ends].sort((a, b) => b.index - a.index).map((point) => ({
+			key: point.cohort,
+			x: x(along(point)) + 9,
+			y: y(metric(point)),
+			text: point.cohort,
+			halo: true
+		})));
+	}
+	triangle(ctx, { cohorts, points }) {
+		const { measure, alignment, stack } = this.options;
+		const { width, height } = ctx.plot;
+		const relative = measure === "relative";
+		const along = (point) => alignment === "age" ? point.age : point.time;
+		const row = (index) => stack === "newest-first" ? cohorts.length - 1 - index : index;
+		const span = Math.max(1, ...points.map((point) => along(point) + 1));
+		const w = width / span, h = height / Math.max(1, cohorts.length);
+		const metric = (point) => relative ? point.share : point.value;
+		const top = Math.max(1e-9, ...points.map(metric));
+		const fill = (point) => ctx.palette.sequential(.05 + .95 * Math.max(0, point.share));
+		const cells = ctx.marks("cells", "rect", points, (d) => `${d.cohort}/${d.age}`).attr("fill", fill).attr("rx", 2);
+		const scale = (d) => relative ? 1 : Math.sqrt(Math.max(0, metric(d)) / top);
+		const wide = (d) => Math.max(1, (w - 2) * scale(d)), tall = (d) => Math.max(1, (h - 2) * scale(d));
+		const place = {
+			x: (d) => along(d) * w + (w - wide(d)) / 2,
+			y: (d) => row(d.index) * h + (h - tall(d)) / 2,
+			width: wide,
+			height: tall
+		};
+		ctx.set(cells, place, {
+			...place,
+			width: 0
+		}, 2);
+		ctx.hover(cells, (d) => ({
+			title: d.cohort,
+			color: fill(d),
+			rows: [[`Period ${d.age}`, d.value], ["Retained", `${Math.round(d.share * 100)}%`]]
+		}));
+		const text = (point) => relative ? `${Math.round(point.share * 100)}%` : Math.round(point.value).toLocaleString("en");
+		this.labels(ctx, "percents", relative && w >= 28 && h >= 15 ? points.map((point) => ({
+			key: `${point.cohort}/${point.age}`,
+			x: along(point) * w + w / 2,
+			y: row(point.index) * h + h / 2,
+			text: text(point),
+			anchor: "middle",
+			size: 10,
+			fill: this.inkOver(ctx, fill(point))
+		})) : []);
+		const ticks = Array.from({ length: span }, (_, i) => i);
+		this.ticks(ctx, "x-ticks", ticks.map((tick) => ({
+			key: `${tick}`,
+			x: tick * w + w / 2,
+			y: 0,
+			text: `${tick}`,
+			anchor: "middle"
+		})), "bottom");
+		this.ticks(ctx, "y-ticks", cohorts.map((name, i) => ({
+			key: name,
+			x: -6,
+			y: row(i) * h + h / 2,
+			text: name,
+			anchor: "end"
+		})), "left", 52);
+	}
+};
+export { CohortAlignment, CohortFlow, CohortForm, CohortMeasure, CohortStack };

package/dist/charts/flow/ConversionFlow.js

@@ -0,0 +1,281 @@
+import { ChartFamily, DataShape, Dimension, Orientation } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { FlowChart } from "./FlowChart.js";
+import { FlowRibbon } from "./flowEnums.js";
+import { FlowGeometry } from "./FlowPathKit.js";
+import { FlowTable } from "./FlowTable.js";
+// src/charts/flow/ConversionFlow.ts
+var ConversionShape = /* @__PURE__ */ function(ConversionShape) {
+	ConversionShape["Bars"] = "bars";
+	ConversionShape["Curved"] = "curved";
+	ConversionShape["Trapezoid"] = "trapezoid";
+	return ConversionShape;
+}({});
+var ConversionAlign = /* @__PURE__ */ function(ConversionAlign) {
+	ConversionAlign["Center"] = "center";
+	ConversionAlign["Start"] = "start";
+	return ConversionAlign;
+}({});
+/** Find where a process leaks: stages shrink in proportion to what remains, with conversion between them. */
+var ConversionFlow = class extends FlowChart {
+	static meta = {
+		id: "conversion-flow",
+		name: "Conversion flow",
+		family: ChartFamily.Flow,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "A funnel of sequential stages, showing how much survives each step and where the rest goes.",
+		tags: [
+			"funnel",
+			"pipeline",
+			"drop-off"
+		],
+		sample: (seed) => {
+			const rows = SampleData.categories(seed, 5, 3);
+			const left = /* @__PURE__ */ new Map();
+			return rows.map((row) => {
+				const series = String(row.series), value = Math.round((left.get(series) ?? 240) * (.5 + +row.value / 240));
+				left.set(series, value);
+				return {
+					...row,
+					value
+				};
+			});
+		},
+		variants: {
+			shape: [
+				"bars",
+				"curved",
+				"trapezoid"
+			],
+			align: ["center", "start"],
+			exits: [false, true],
+			segmented: [false, true],
+			orientation: [Orientation.Vertical, Orientation.Horizontal]
+		},
+		valid: (v) => !(v.exits === true && v.align === "center")
+	};
+	defaults() {
+		return {
+			x: "category",
+			series: "series",
+			y: "value",
+			shape: "bars",
+			align: "center",
+			exits: false,
+			segmented: false,
+			orientation: Orientation.Vertical
+		};
+	}
+	plotMargin() {
+		return {
+			top: 8,
+			right: 10,
+			bottom: 8,
+			left: 10
+		};
+	}
+	draw(ctx) {
+		const { data, x, series, y, shape, align, exits, segmented, orientation } = this.options;
+		const vertical = orientation === Orientation.Vertical;
+		const [width, height] = [ctx.plot.width, ctx.plot.height];
+		const table = FlowTable.pivot(data, x, series, y);
+		const names = segmented ? table.series : ["All"];
+		const value = (c, name) => Math.max(0, segmented ? table.at(c, name) : table.total(c));
+		const totals = table.columns.map((_, c) => names.reduce((sum, name) => sum + value(c, name), 0));
+		const peak = Math.max(1e-9, ...totals);
+		const stages = totals.length;
+		const head = vertical ? 0 : 34;
+		const stageGutter = vertical ? Math.min(width * .26, 12 + Math.max(0, ...table.labels.map((label) => FlowTable.width(label)))) : 0;
+		const valueGutter = vertical ? 74 : 0;
+		const offset = vertical ? stageGutter : 0;
+		const length = vertical ? height : width;
+		const crossRoom = vertical ? width - stageGutter - valueGutter : height - head;
+		const branch = exits ? crossRoom * .2 : 0;
+		const breadth = crossRoom - branch;
+		const to = vertical ? (u, v) => [v + offset, u] : (u, v) => [u, v + head];
+		const step = length / Math.max(1, stages);
+		const bars = shape === "bars";
+		const hold = bars ? Math.max(14, step * .62) : 0;
+		const form = shape === "trapezoid" ? FlowRibbon.Angular : FlowRibbon.Curved;
+		const start = (total) => align === "center" ? (breadth - total / peak * breadth) / 2 : 0;
+		const gap = segmented ? 2 : 0;
+		const edges = table.columns.map((_, c) => {
+			const used = names.filter((name) => value(c, name) > 0);
+			const free = totals[c] / peak * breadth - gap * Math.max(0, used.length - 1);
+			let v = start(totals[c]);
+			return new Map(used.map((name) => {
+				const v0 = v, v1 = v0 + value(c, name) / (totals[c] || 1) * Math.max(0, free);
+				v = v1 + gap;
+				return [name, {
+					v0,
+					v1
+				}];
+			}));
+		});
+		const color = (name) => ctx.palette.color(name);
+		if (segmented) for (const name of names) color(name);
+		const hue = (name) => segmented ? color(name) : ctx.theme.categorical[0];
+		const slabs = table.columns.flatMap((_, c) => [...edges[c]].map(([name, band]) => {
+			const center = step * (c + .5);
+			const u0 = bars ? center - hold / 2 : c === 0 ? 0 : center, u1 = bars ? center + hold / 2 : center;
+			return {
+				stage: c,
+				label: table.labels[c],
+				series: name,
+				value: value(c, name),
+				a: {
+					u: u0,
+					...band
+				},
+				b: {
+					u: u1,
+					...band
+				}
+			};
+		}));
+		const rail = [];
+		table.columns.forEach((_, c) => {
+			if (c === stages - 1) return;
+			for (const [name, band] of edges[c]) {
+				const next = edges[c + 1].get(name);
+				if (!next) continue;
+				const center = step * (c + .5), nextCenter = step * (c + 1.5);
+				const from = bars ? center + hold / 2 : center, end = bars ? nextCenter - hold / 2 : nextCenter;
+				const d = FlowGeometry.ribbon({
+					u: from,
+					...band
+				}, {
+					u: end,
+					...next
+				}, form, to);
+				rail.push({
+					key: `${name}#${c}`,
+					from: hue(name),
+					datum: {
+						stage: c,
+						label: table.labels[c],
+						series: name,
+						value: value(c + 1, name),
+						a: {
+							u: from,
+							...band
+						},
+						b: {
+							u: end,
+							...next
+						}
+					},
+					d
+				});
+			}
+		});
+		const tail = (c, name) => {
+			const band = edges[c]?.get(name);
+			return band && {
+				u: step * (c + .5),
+				...band
+			};
+		};
+		if (!bars) for (const name of names) {
+			const a = tail(0, name), z = tail(stages - 1, name);
+			if (a) rail.push({
+				key: `${name}<`,
+				from: hue(name),
+				datum: slabs[0],
+				d: FlowGeometry.ribbon({
+					...a,
+					u: 0
+				}, a, form, to)
+			});
+			if (z) rail.push({
+				key: `${name}>`,
+				from: hue(name),
+				datum: slabs[0],
+				d: FlowGeometry.ribbon(z, {
+					...z,
+					u: length
+				}, form, to)
+			});
+		}
+		this.bands(ctx, "rail", rail, (slab) => ({
+			title: slab.label,
+			color: hue(slab.series),
+			rows: [[slab.series, slab.value]]
+		}), bars ? .3 : .88);
+		const box = (d) => FlowGeometry.polygon([
+			to(d.a.u, d.a.v0),
+			to(d.b.u, d.b.v0),
+			to(d.b.u, d.b.v1),
+			to(d.a.u, d.a.v1)
+		]);
+		const marks = ctx.marks("slabs", "path", bars ? slabs : [], (d) => `${d.stage}/${d.series}`).attr("fill", (d) => hue(d.series));
+		ctx.set(marks, { d: box }, { d: box }, 10);
+		ctx.hover(marks, (d) => ({
+			title: d.label,
+			color: hue(d.series),
+			rows: [[d.series, d.value], ["Of stage", `${Math.round(d.value / (totals[d.stage] || 1) * 100)}%`]]
+		}));
+		const leaks = exits ? table.columns.slice(0, -1).flatMap((_, c) => {
+			const lost = totals[c] - totals[c + 1];
+			if (lost <= 0) return [];
+			const thick = lost / peak * breadth;
+			const centre = step * (c + 1);
+			const v1 = totals[c] / peak * breadth;
+			const a = {
+				u: bars ? step * (c + .5) + hold / 2 : step * (c + .5),
+				v0: v1 - thick,
+				v1
+			};
+			return [{
+				key: `leak${c}`,
+				from: ctx.theme.inkMuted,
+				datum: {
+					key: `leak${c}`,
+					from: table.labels[c],
+					value: lost,
+					rate: lost / (totals[c] || 1)
+				},
+				d: FlowGeometry.ribbon(a, {
+					u: centre + step * .32,
+					v0: breadth + branch - 1,
+					v1: breadth + branch
+				}, FlowRibbon.Curved, to)
+			}];
+		}) : [];
+		this.bands(ctx, "leaks", leaks, (d) => ({
+			title: `Left after ${d.from}`,
+			rows: [["Lost", Math.round(d.value)], ["Rate", `${Math.round(d.rate * 100)}%`]]
+		}), .35);
+		const percent = (c) => c === 0 ? "100%" : `${Math.round(totals[c] / (totals[0] || 1) * 100)}%`;
+		this.labels(ctx, "stages", table.labels.map((label, c) => vertical ? {
+			key: `s${c}`,
+			x: stageGutter - 10,
+			y: step * (c + .5),
+			text: label,
+			anchor: "end",
+			tone: "ink"
+		} : {
+			key: `s${c}`,
+			x: step * (c + .5),
+			y: 7,
+			text: FlowTable.fit(label, step - 4),
+			anchor: "middle",
+			tone: "ink"
+		}));
+		this.labels(ctx, "values", table.labels.map((_, c) => vertical ? {
+			key: `v${c}`,
+			x: width,
+			y: step * (c + .5),
+			text: `${Math.round(totals[c]).toLocaleString("en")} · ${percent(c)}`,
+			anchor: "end"
+		} : {
+			key: `v${c}`,
+			x: step * (c + .5),
+			y: 22,
+			text: `${Math.round(totals[c]).toLocaleString("en")} · ${percent(c)}`,
+			anchor: "middle"
+		}));
+	}
+};
+export { ConversionAlign, ConversionFlow, ConversionShape };