chartist 2.0.0-rc.2 → 2.0.0

package/dist/live.js

@@ -0,0 +1,767 @@
+import { SvgPath, applyAttribute, domRenderer, keySplinesOf, namespaces, polarToCartesian, renderElement, sampleEasing } from "./index.js";
+//#region src/live/keyframes.ts
+/**
+* The keyframes `smilAnimations()` brings for the built-in nodes that
+* don't move well number by number: lines, areas and bands whose values
+* change their keys or count, and pie slices and their labels.
+*/
+const lerp = (from, to, progress) => (1 - progress) * from + progress * to;
+const between = (from, to, progress) => ({
+	x: lerp(from.x, to.x, progress),
+	y: lerp(from.y, to.y, progress)
+});
+/**
+* The vertices of a path: one per run of commands that share their
+* value's data. A step line draws a corner and the point with the same
+* data, so the point is the first or the last command of its run.
+*/
+function verticesOf(commands, last) {
+	const vertices = [];
+	let previous;
+	for (const { x, y, data } of commands) {
+		if (data && data !== previous) vertices.push({
+			x,
+			y,
+			data
+		});
+		else if (data && last) vertices[vertices.length - 1] = {
+			x,
+			y,
+			data
+		};
+		previous = data;
+	}
+	return vertices;
+}
+/**
+* Draws a path through points with the interpolation the layer used, a
+* hole between values whose indexes aren't next to each other.
+*/
+function draw(smoothing, vertices, points) {
+	const coordinates = [];
+	const data = [];
+	vertices.forEach((vertex, index) => {
+		const valueIndex = vertex.data.valueIndex;
+		if (index && valueIndex - vertices[index - 1].data.valueIndex > 1) {
+			coordinates.push(0, 0);
+			data.push({
+				value: void 0,
+				valueIndex: valueIndex - 1
+			});
+		}
+		coordinates.push(points[index].x, points[index].y);
+		data.push(vertex.data);
+	});
+	return smoothing(coordinates, data);
+}
+/** Draws an outline as the line, area and band layers do. */
+function drawOutline(role, { edges, smoothing }, points, base) {
+	const [first, second] = edges.map((edge, index) => draw(smoothing, edge, points[index]));
+	const commands = first.pathElements;
+	const start = commands[0];
+	const end = commands[commands.length - 1];
+	if (role === "area") return first.clone(true).position(0).remove(1).move(start.x, base).line(start.x, start.y, false, start.data).position(commands.length + 1).line(end.x, base).stringify();
+	if (role === "band") {
+		const lower = second.pathElements;
+		const last = lower[lower.length - 1];
+		const back = new SvgPath().line(last.x, last.y, false, last.data);
+		for (let index = lower.length - 1; index > 0; index--) {
+			const command = lower[index];
+			const target = lower[index - 1];
+			if (command.command === "C") back.curve(command.x2, command.y2, command.x1, command.y1, target.x, target.y, false, target.data);
+			else back.line(target.x, target.y, false, target.data);
+		}
+		return SvgPath.join([first, back], true).stringify();
+	}
+	return first.stringify();
+}
+/**
+* Reads a line, area or band back into its values, when drawing them
+* again gives the node's `d`: nothing for paths a listener changed or an
+* interpolation that can't be read back.
+*/
+function outlineOf(node) {
+	const { path, smoothing } = node.ctx;
+	const commands = path.pathElements;
+	for (const last of [false, true]) {
+		const vertices = verticesOf(node.role === "area" ? commands.slice(1, -1) : commands, last);
+		const half = vertices.length / 2;
+		const outline = {
+			edges: node.role !== "band" ? [vertices] : Number.isInteger(half) ? [vertices.slice(0, half), vertices.slice(half).reverse()] : [],
+			base: commands[0]?.y ?? 0,
+			smoothing
+		};
+		if (outline.edges.length && outline.edges.every((edge) => edge.length) && drawOutline(node.role, outline, outline.edges, outline.base) === String(node.attrs.d)) return outline;
+	}
+}
+/** The series a node's values belong to; for a band, the one it follows. */
+function seriesIndexOf(node) {
+	if (node.role !== "band") return node.ctx.seriesIndex;
+	const edge = node.ctx.high ?? node.ctx.low;
+	return edge && "seriesIndex" in edge ? edge.seriesIndex : node.ctx.series?.[0] ?? 0;
+}
+/** The value keys of each edge, a repeated key numbered in its order. */
+function keysOf(node, { edges }, context, scene) {
+	const seriesIndex = seriesIndexOf(node);
+	return edges.map((edge) => {
+		const seen = /* @__PURE__ */ new Map();
+		return edge.map(({ data }) => {
+			const key = context.valueKey({
+				seriesIndex,
+				valueIndex: data.valueIndex,
+				value: data.value,
+				meta: data.meta
+			}, scene);
+			const count = (seen.get(key) ?? 0) + 1;
+			seen.set(key, count);
+			return count > 1 ? `${key}#${count}` : key;
+		});
+	});
+}
+/**
+* Keeps the direction of X between neighbors as in the new path, so
+* interpolations that break the line where X turns back (monotone cubic)
+* draw every frame with the new path's commands.
+*/
+function keepDirection(points, edge) {
+	for (let index = 1; index < points.length; index++) {
+		const direction = Math.sign(edge[index].x - edge[index - 1].x);
+		const previous = points[index - 1].x;
+		if (Math.sign(points[index].x - previous) !== direction) points[index] = {
+			x: previous + direction / 1e3,
+			y: points[index].y
+		};
+	}
+	return points;
+}
+/**
+* Lines, areas and bands whose values changed keys or count: each value
+* starts where its key was, a new one where its nearest kept neighbor was
+* (the one before it, if any), and every frame is drawn through the
+* layer's interpolation.
+*/
+function pathKeyframes(previous, next, progress, context) {
+	const from = outlineOf(previous);
+	const to = outlineOf(next);
+	if (!from || !to || from.edges.length !== to.edges.length) return;
+	let fromKeys;
+	let toKeys;
+	try {
+		fromKeys = keysOf(previous, from, context, "previous");
+		toKeys = keysOf(next, to, context, "next");
+	} catch {
+		return;
+	}
+	if (fromKeys.join("\n") === toKeys.join("\n")) return;
+	const starts = [];
+	for (const [edgeIndex, keys] of toKeys.entries()) {
+		const positions = new Map(fromKeys[edgeIndex].map((key, index) => [key, from.edges[edgeIndex][index]]));
+		const kept = keys.map((key) => positions.get(key));
+		const edgeStarts = [];
+		for (let index = 0; index < keys.length; index++) {
+			let start;
+			for (let before = index; before >= 0 && !start; before--) start = kept[before];
+			for (let after = index + 1; after < keys.length && !start; after++) start = kept[after];
+			if (!start) return;
+			edgeStarts.push(start);
+		}
+		starts.push(edgeStarts);
+	}
+	return progress.map((at) => ({ d: drawOutline(next.role, to, to.edges.map((edge, edgeIndex) => keepDirection(edge.map((vertex, index) => between(starts[edgeIndex][index], vertex, at)), edge)), lerp(from.base, to.base, at)) }));
+}
+/** The angle of a point around a center, in degrees clockwise from the top. */
+const angleOf = (center, point) => Math.atan2(point.y - center.y, point.x - center.x) * 180 / Math.PI + 90;
+/**
+* A slice at interpolated angles, center and radius, drawn in the pie
+* layer's command layout: from its end around to its start, to the center
+* for a pie. The slice's overlap with the one before it is read from its
+* path.
+*/
+function sliceKeyframes(previous, next, progress) {
+	const { center, radius, startAngle, endAngle, path } = next.ctx;
+	const pie = String(next.attrs.d).endsWith("Z");
+	const commands = path.pathElements;
+	const overlap = ((startAngle - angleOf(center, commands[commands.length - 1 - +pie])) % 360 + 540) % 360 - 180;
+	return progress.map((at) => {
+		const middle = between(previous.ctx.center, center, at);
+		const r = lerp(previous.ctx.radius, radius, at);
+		const start = lerp(previous.ctx.startAngle, startAngle, at);
+		const end = lerp(previous.ctx.endAngle, endAngle, at);
+		const overlappingStart = Math.max(0, start - overlap);
+		const fullCircle = end - start >= 359.99;
+		const arcEnd = Math.min(end, overlappingStart + 359.99);
+		const from = polarToCartesian(middle.x, middle.y, r, overlappingStart);
+		const frame = new SvgPath(pie);
+		if (fullCircle) {
+			const opposite = polarToCartesian(middle.x, middle.y, r, overlappingStart + 180);
+			frame.move(from.x, from.y).arc(r, r, 0, 0, 0, opposite.x, opposite.y);
+		} else {
+			const to = polarToCartesian(middle.x, middle.y, r, arcEnd);
+			frame.move(to.x, to.y);
+		}
+		frame.arc(r, r, 0, Number(!fullCircle && end - start > 180), 0, from.x, from.y);
+		if (pie) frame.line(middle.x, middle.y);
+		return { d: frame.stringify() };
+	});
+}
+/** The slice with the label's key, in a scene. */
+function sliceOf(scene, key) {
+	if (scene.role === "slice" && scene.key === key) return scene;
+	for (const child of scene.children) {
+		const slice = sliceOf(child, key);
+		if (slice) return slice;
+	}
+}
+/**
+* A pie label moving around the pie with its slice: at the interpolated
+* middle angle of the slice, its distance from the center interpolated,
+* and a label moved away from that spot (to keep labels apart) moved by
+* as much.
+*/
+function labelKeyframes(previous, next, progress, context) {
+	const fromSlice = sliceOf(context.update.previousScene, previous.key);
+	const toSlice = sliceOf(context.scene, next.key);
+	if (!fromSlice || !toSlice || previous.ctx.kind !== "pie" || next.ctx.kind !== "pie") return;
+	const place = ({ ctx }, label) => {
+		const angle = (ctx.startAngle + ctx.endAngle) / 2;
+		const radius = Math.hypot(label.x - ctx.center.x, label.y - ctx.center.y);
+		const spot = polarToCartesian(ctx.center.x, ctx.center.y, radius, angle);
+		return {
+			angle,
+			radius,
+			center: ctx.center,
+			shift: {
+				x: label.x - spot.x,
+				y: label.y - spot.y
+			}
+		};
+	};
+	const from = place(fromSlice, previous.ctx);
+	const to = place(toSlice, next.ctx);
+	return progress.map((at) => {
+		const center = between(from.center, to.center, at);
+		const shift = between(from.shift, to.shift, at);
+		const spot = polarToCartesian(center.x, center.y, lerp(from.radius, to.radius, at), lerp(from.angle, to.angle, at));
+		const frame = {};
+		for (const name of [
+			"x",
+			"y",
+			"dx",
+			"dy"
+		]) {
+			const value = next.attrs[name];
+			if (typeof value === "number") {
+				const axis = name.endsWith("x") ? "x" : "y";
+				frame[name] = value + spot[axis] + shift[axis] - next.ctx[axis];
+			}
+		}
+		return frame;
+	});
+}
+/**
+* The built-in keyframes of an updated node, or nothing when it moves
+* well number by number.
+*/
+function builtInKeyframes(previous, next, progress, context) {
+	if (previous.role !== next.role) return;
+	switch (next.role) {
+		case "line":
+		case "area":
+		case "band": return pathKeyframes(previous, next, progress, context);
+		case "slice": return sliceKeyframes(previous, next, progress);
+		case "label": return labelKeyframes(previous, next, progress, context);
+		default: return;
+	}
+}
+//#endregion
+//#region src/live/animations.ts
+/** The class of the `animate` elements of update animations. */
+const ANIMATION_CLASS = "ct-update-animation";
+const NUMBER = /-?(?:\d+\.?\d*|\.\d+)(?:e[-+]?\d+)?/gi;
+/** The CSS easings `--ct-update-easing` takes; anything else is `ease-out`. */
+const CSS_EASING = /^(linear|ease(-in|-out|-in-out)?|(cubic-bezier|linear|steps)\(.*\))$/;
+/** Without a duration in the CSS, updates take this long, in ms. */
+const DEFAULT_DURATION = 300;
+/** A CSS time (`400ms`, `0.4s`) in ms; the default for anything else. */
+function durationOf(value) {
+	const [, amount, unit] = value?.trim().match(/^(\d*\.?\d+(?:e[-+]?\d+)?)(m?s)$/i) ?? [];
+	return unit ? Number(amount) * (unit.toLowerCase() === "s" ? 1e3 : 1) : DEFAULT_DURATION;
+}
+/** A path's `d` with absolute commands, unrounded. */
+function absolutePath(d) {
+	const path = new SvgPath(false, { accuracy: false }).parse(d);
+	let x = 0;
+	let y = 0;
+	let startX = 0;
+	let startY = 0;
+	for (const command of path.pathElements) {
+		const letter = String(command.command);
+		if (letter !== letter.toUpperCase()) {
+			for (const name of Object.keys(command)) if (name[0] === "x" && name !== "xAr") command[name] = Number(command[name]) + x;
+			else if (name[0] === "y") command[name] = Number(command[name]) + y;
+		}
+		command.command = letter.toUpperCase();
+		if (command.command === "Z") {
+			x = startX;
+			y = startY;
+		} else {
+			x = "x" in command ? Number(command.x) : x;
+			y = "y" in command ? Number(command.y) : y;
+		}
+		if (command.command === "M") {
+			startX = x;
+			startY = y;
+		}
+	}
+	return path.stringify() + (/z\s*$/i.test(d) ? "Z" : "");
+}
+/**
+* The shape of an attribute's value, for a number or a path's `d`;
+* nothing for other values.
+*/
+function shapeOf(name, value) {
+	let text = String(value);
+	if (name === "d") try {
+		text = absolutePath(text);
+	} catch {
+		return;
+	}
+	else if (value === void 0 || !text.trim() || !isFinite(Number(text))) return;
+	return {
+		text: text.replace(NUMBER, "#"),
+		numbers: (text.match(NUMBER) ?? []).map(Number)
+	};
+}
+/** A shape's text with the given numbers, rounded to 3 decimals. */
+function fill(text, numbers) {
+	let index = 0;
+	return text.replace(/#/g, () => `${Math.round(numbers[index++] * 1e3) / 1e3}`);
+}
+/**
+* Whether an attribute can animate as an offset added to its value: a
+* number, or a path with absolute commands and no arcs, whose flags
+* can't be added.
+*/
+const isAdditive = (name, value, shape) => name !== "d" || !/[mlhvcsqtaz]/.test(String(value)) && !shape.text.includes("A");
+/** Removes an element's update animations that have ended. */
+function removeEnded(element) {
+	for (const child of Array.from(element.children)) if (child.classList.contains(ANIMATION_CLASS)) {
+		const animation = child;
+		try {
+			if (animation.getStartTime() + animation.getSimpleDuration() <= animation.getCurrentTime()) child.remove();
+		} catch {
+			if (typeof animation.getStartTime === "function") child.remove();
+		}
+	}
+}
+/** Adds an `animate` element to an element and starts it. */
+function write(element, name, values, additive, timing, splines) {
+	const animate = element.ownerDocument.createElementNS(namespaces.svg, "animate");
+	const attributes = {
+		class: ANIMATION_CLASS,
+		attributeName: name,
+		begin: "indefinite",
+		dur: `${timing.duration}ms`,
+		fill: "remove",
+		values: values.join(";"),
+		keyTimes: values.map((_, index) => Math.round(index / (values.length - 1) * 1e4) / 1e4).join(";"),
+		calcMode: splines ? "spline" : timing.calcMode,
+		keySplines: splines,
+		additive: additive ? "sum" : void 0
+	};
+	for (const [attribute, value] of Object.entries(attributes)) if (value !== void 0) animate.setAttribute(attribute, value);
+	animate.addEventListener("endEvent", () => animate.remove());
+	element.appendChild(animate);
+	try {
+		animate.beginElement();
+		animate.getStartTime();
+	} catch {
+		if (typeof animate.getStartTime === "function") animate.remove();
+	}
+}
+/**
+* Animates an attribute number by number from its previous value: an
+* offset from `previous − next` to 0 when it can be added, else the
+* values themselves. Paths with different commands, or with arcs, don't
+* animate.
+*/
+function animateNumbers(element, name, previous, next, timing) {
+	const from = shapeOf(name, previous);
+	const to = shapeOf(name, next);
+	if (!from || !to || from.text !== to.text || to.text.includes("A")) return;
+	const additive = isAdditive(name, next, to);
+	const at = (progress) => fill(to.text, to.numbers.map((value, index) => additive ? (from.numbers[index] - value) * (1 - progress) : (1 - progress) * from.numbers[index] + progress * value));
+	write(element, name, (timing.splines ? [0, 1] : timing.progress).map(at), additive, timing, timing.splines);
+}
+/**
+* Animates an attribute through keyframes: as offsets from the new value
+* when every frame has its shape, so an interruption continues from where
+* the element is drawn, else as the frames' values.
+*/
+function animateFrames(element, name, frames, next, timing) {
+	const to = shapeOf(name, next);
+	const offsets = [];
+	if (to && isAdditive(name, String(next), to)) for (const frame of frames) {
+		const shape = shapeOf(name, frame);
+		if (shape?.text !== to.text) break;
+		offsets.push(fill(to.text, shape.numbers.map((value, index) => value - to.numbers[index])));
+	}
+	const additive = offsets.length === frames.length;
+	write(element, name, additive ? offsets : frames.map(String), additive, timing);
+}
+/**
+* Animates the changes of an update with SMIL, timed by the chart's CSS:
+* each updated node's changed numbers and paths move from their previous
+* value to their new one over `--ct-update-duration` (a CSS time, 300 ms
+* by default; `0s` turns the animations off) with the easing in
+* `--ct-update-easing` (a CSS easing, `ease-out` by default). The
+* attributes hold their new values from the start, and an update during an
+* animation continues from where each element is drawn.
+*
+* It animates updates (`update()`, `setOptions()`) and changes of the
+* matching `responsive` options, not resizes, and nothing while the
+* visitor's system asks for reduced motion. Lines and areas follow their
+* values' keys, and pie slices turn around the pie; layers and plugins can
+* give keyframes of their own.
+*
+* @example
+* ```ts
+* import { lineChart } from 'chartist';
+* import { liveDomRenderer, smilAnimations } from 'chartist/live';
+*
+* // 300 ms with ease-out, unless the CSS sets --ct-update-duration
+* // and --ct-update-easing.
+* const chart = lineChart(
+*   '#chart',
+*   { labels: ['Mon', 'Tue', 'Wed'], series: [[5, 2, 4]] },
+*   { renderer: liveDomRenderer({ animations: smilAnimations() }) }
+* );
+*
+* chart.update({ data: { labels: ['Mon', 'Tue', 'Wed'], series: [[3, 6, 1]] } });
+* ```
+* @returns The animations, for `liveDomRenderer({ animations })`
+* @experimental
+*/
+function smilAnimations() {
+	return { animate(context) {
+		const { update, container, measureStyle } = context;
+		const options = {
+			container,
+			rootClass: context.scene.classes.join(" ")
+		};
+		const duration = durationOf(measureStyle?.("--ct-update-duration", options));
+		if (update.cause !== "update" && update.cause !== "responsive" || !(duration > 0) || container.ownerDocument.defaultView?.matchMedia?.("(prefers-reduced-motion: reduce)").matches) return;
+		const css = measureStyle?.("--ct-update-easing", options)?.trim() ?? "";
+		const easing = CSS_EASING.test(css) ? css : "ease-out";
+		const timing = {
+			duration,
+			easing,
+			progress: sampleEasing(easing, duration),
+			splines: keySplinesOf(easing),
+			calcMode: easing.startsWith("steps(") ? "discrete" : "linear"
+		};
+		for (const { op, node, previous } of context.changes) {
+			const element = context.elementOf(node);
+			if (op !== "update" || !previous || !element) continue;
+			removeEnded(element);
+			const changed = Object.keys(node.attrs).filter((name) => !name.includes(":") && previous.attrs[name] !== void 0 && String(previous.attrs[name]) !== String(node.attrs[name]));
+			if (!changed.length) continue;
+			const frames = update.keyframes(previous, node, timing.progress) ?? builtInKeyframes(previous, node, timing.progress, context) ?? [];
+			const framed = Object.keys(frames[0] ?? {}).filter((name) => frames.every((frame) => frame[name] !== void 0));
+			for (const name of framed) animateFrames(element, name, frames.map((frame) => frame[name]), node.attrs[name], timing);
+			for (const name of changed) if (!framed.includes(name)) animateNumbers(element, name, previous.attrs[name], node.attrs[name], timing);
+		}
+		return {
+			duration,
+			easing
+		};
+	} };
+}
+//#endregion
+//#region src/live/diff.ts
+/** The value key function of a `key` option. */
+function valueKeyOf(key = "index") {
+	return key === "index" ? (value, index = value.valueIndex) => String(index) : key === "label" ? ({ label }) => String(label) : (value) => String(key(value));
+}
+/** What a node stands for, before repeats among its siblings are counted. */
+function identityOf(current, valueKey, labels) {
+	const ctx = current.ctx ?? {};
+	const { seriesIndex, valueIndex, axis, index } = ctx;
+	const role = current.role ?? current.name;
+	if (typeof seriesIndex === "number") {
+		const own = current.key ?? "";
+		const end = own.indexOf("/");
+		const layer = end < 0 ? own : own.slice(0, end);
+		const slice = current.role === "slice" || ctx.kind === "pie" ? ctx : current.role === "series" && current.children.length === 1 && current.children[0].role === "slice" ? current.children[0].ctx : void 0;
+		if (slice) return `v:${layer}/pie/${valueKey({
+			seriesIndex,
+			valueIndex: 0,
+			value: slice.value,
+			label: labels[seriesIndex],
+			meta: slice.meta
+		}, seriesIndex)}:${role}`;
+		if (typeof valueIndex !== "number") return `s:${layer}/${seriesIndex}:${role}`;
+		return `v:${layer}/${seriesIndex}/${valueKey({
+			seriesIndex,
+			valueIndex,
+			value: ctx.value,
+			label: labels[valueIndex],
+			meta: ctx.meta
+		})}:${role}`;
+	}
+	if (axis && typeof index === "number") return `t:${axis.id ?? axis.dimension}:${role}:${String(axis.ticks[index])}`;
+	if (current.key !== void 0) return `k:${current.key}`;
+	return `p:${current.name}.${current.classes[0] ?? ""}`;
+}
+/** The identities of sibling nodes, with `#2`, `#3` for repeats. */
+function identities(nodes, valueKey, labels) {
+	const seen = /* @__PURE__ */ new Map();
+	return nodes.map((current) => {
+		const identity = identityOf(current, valueKey, labels);
+		const count = (seen.get(identity) ?? 0) + 1;
+		seen.set(identity, count);
+		return count > 1 ? `${identity}#${count}` : identity;
+	});
+}
+/** Whether a node's classes, attributes or text changed. */
+function differs(previous, next) {
+	if (previous.content !== next.content || previous.classes.length !== next.classes.length || previous.classes.some((name, i) => next.classes[i] !== name)) return true;
+	const names = Object.keys(next.attrs);
+	return names.length !== Object.keys(previous.attrs).length || names.some((name) => previous.attrs[name] !== next.attrs[name]);
+}
+/** Lists a node and every node below it, in document order. */
+function every(op, current, changes) {
+	changes.push({
+		op,
+		node: current
+	});
+	current.children.forEach((child) => every(op, child, changes));
+}
+/**
+* Matches two scenes per parent and lists the changes in the new scene's
+* document order, `remove` entries after their former parent's kept
+* children. Roots with different element names aren't matched.
+*/
+function matchScenes(previous, next, options = {}) {
+	const valueKey = valueKeyOf(options.key);
+	const labels = options.labels ?? [];
+	const previousLabels = options.previousLabels ?? labels;
+	const changes = [];
+	const matched = /* @__PURE__ */ new Map();
+	const visit = (before, after) => {
+		matched.set(after, before);
+		if (differs(before, after)) changes.push({
+			op: "update",
+			node: after,
+			previous: before
+		});
+		const kept = /* @__PURE__ */ new Map();
+		identities(before.children, valueKey, previousLabels).forEach((identity, i) => kept.set(identity, before.children[i]));
+		const removed = new Set(before.children);
+		identities(after.children, valueKey, labels).forEach((identity, i) => {
+			const child = after.children[i];
+			const match = kept.get(identity);
+			if (match && match.name === child.name) {
+				removed.delete(match);
+				visit(match, child);
+			} else every("add", child, changes);
+		});
+		removed.forEach((child) => every("remove", child, changes));
+	};
+	if (previous.name === next.name) visit(previous, next);
+	else {
+		every("add", next, changes);
+		every("remove", previous, changes);
+	}
+	return {
+		changes,
+		matched
+	};
+}
+/**
+* The changes between two scenes, matched by what each node stands for:
+* `add`, `update` (with the previous node) and `remove`, in the new
+* scene's document order, with the `remove` entries after their former
+* parent's kept children. Every node of an added or removed subtree has
+* its own entry. The live renderer patches its SVG with them; other
+* renderers that change their output in place can use them too.
+*
+* Nodes are matched among the children of matched parents: values by
+* their layer, series and key (see `key`), series by layer and index,
+* grid lines and axis labels by axis and tick, nodes with their own
+* `key` by it, and the rest by element name and first class, in order.
+*
+* @example
+* ```ts
+* import { lineChartConfig, toScene } from 'chartist';
+* import { diffScenes } from 'chartist/live';
+*
+* const size = { width: 600, height: 300 };
+* const labels = ['Mo', 'Tu', 'We'];
+* const before = toScene(lineChartConfig({ labels, series: [[1, 2, 3]] }), size);
+* const after = toScene(lineChartConfig({ labels, series: [[1, 5, 3]] }), size);
+*
+* for (const { op, node } of diffScenes(before, after, { labels })) {
+*   console.log(op, node.role, node.key);
+* }
+* ```
+* @param previous The previous scene
+* @param next The new scene
+* @param options How values are identified, and the data's labels
+* @returns The changes, in the new scene's document order
+* @experimental
+*/
+function diffScenes(previous, next, options = {}) {
+	return matchScenes(previous, next, options).changes;
+}
+//#endregion
+//#region src/live/renderer.ts
+/** Sets the text of a childless element, keeping elements a listener added. */
+function setText(element, content) {
+	const text = Array.from(element.childNodes).find((child) => child.nodeType === 3);
+	if (!content) text?.remove();
+	else if (text) text.nodeValue = content;
+	else element.insertBefore(element.ownerDocument.createTextNode(content), element.firstChild);
+}
+/** Changes a kept element from its previous node to its new one. */
+function patchElement(element, previous, next) {
+	for (const name of Object.keys(previous.attrs)) if (!(name in next.attrs)) element.removeAttribute(name);
+	for (const [name, value] of Object.entries(next.attrs)) if (previous.attrs[name] !== value) applyAttribute(element, name, value);
+	const removed = previous.classes.filter((name) => !next.classes.includes(name));
+	const added = next.classes.filter((name) => !previous.classes.includes(name));
+	if (removed.length) {
+		element.classList.remove(...removed);
+		if (!element.classList.length) element.removeAttribute("class");
+	}
+	if (added.length) element.classList.add(...added);
+	if (!next.children.length && previous.content !== next.content) setText(element, next.content);
+}
+/**
+* Puts the elements of a node's children in their order, from the end:
+* an element moves only when it isn't before its successor already.
+* Elements the scene doesn't know are skipped, so they stay after their
+* previous sibling.
+*/
+function order(parent, elements) {
+	const known = new Set(elements);
+	let successor = null;
+	for (let i = elements.length - 1; i >= 0; i--) {
+		const element = elements[i];
+		let following = element.nextSibling;
+		while (following && !known.has(following)) following = following.nextSibling;
+		if (element.parentNode !== parent || following !== successor) parent.insertBefore(element, successor);
+		successor = element;
+	}
+}
+/**
+* Creates a DOM renderer that keeps a chart's SVG and changes it in place
+* on every later render, instead of drawing a new one: elements that
+* stand for the same thing as before stay, with only their changed
+* attributes, classes and text set, elements for new nodes are created
+* and elements of nodes that are gone are removed. What listeners added
+* to kept elements stays, and `mount` gets the `changes` of the render.
+*
+* Its first render, and every render without the previous one (1.x
+* charts), draws a new SVG as {@link domRenderer} does. The renderer
+* keeps no state of its own, so one instance can serve many charts.
+*
+* @example
+* ```ts
+* import { lineChart } from 'chartist';
+* import { liveDomRenderer } from 'chartist/live';
+*
+* const labels = ['Mo', 'Tu', 'We', 'Th', 'Fr'];
+* const values = [3, 5, 4, 6, 5];
+* const chart = lineChart(
+*   '#chart',
+*   { labels, series: [values] },
+*   // Points and labels follow their day as the window slides.
+*   { renderer: liveDomRenderer({ key: 'label' }) }
+* );
+*
+* let day = 0;
+* setInterval(() => {
+*   labels.push(`Day ${++day}`);
+*   labels.shift();
+*   values.push(Math.round(Math.random() * 10));
+*   values.shift();
+*   chart.update({ labels: [...labels], series: [[...values]] });
+* }, 1000);
+* ```
+* @param options How values are identified (`key`), and update
+*   animations, such as `smilAnimations()`
+* @returns The renderer, for `renderer` in `chart()` and the presets
+* @experimental
+*/
+function liveDomRenderer(options = {}) {
+	const dom = domRenderer();
+	const { key, animations } = options;
+	const valueKey = valueKeyOf(key);
+	return {
+		...dom,
+		render(scene, container, update) {
+			const svg = update?.previous.elementOf(update.previousScene);
+			if (!update || !svg || svg.parentNode !== container || scene.name !== update.previousScene.name) return dom.render(scene, container);
+			const { labels, previousLabels } = update;
+			const document = container.ownerDocument;
+			const { changes, matched } = matchScenes(update.previousScene, scene, {
+				key,
+				labels,
+				previousLabels
+			});
+			const elements = /* @__PURE__ */ new WeakMap();
+			const created = (current, element) => elements.set(current, element);
+			const removed = /* @__PURE__ */ new Set();
+			for (const change of changes) if (change.op === "remove") removed.add(change.node);
+			const patch = (previous, next, element, html) => {
+				elements.set(next, element);
+				patchElement(element, previous, next);
+				for (const child of previous.children) if (removed.has(child)) update.previous.elementOf(child)?.remove();
+				const inner = html || next.name === "foreignObject";
+				order(element, next.children.map((child) => {
+					const kept = matched.get(child);
+					const childElement = kept && update.previous.elementOf(kept);
+					if (kept && childElement) {
+						patch(kept, child, childElement, inner);
+						return childElement;
+					}
+					return renderElement(child, document, {
+						html: inner,
+						created
+					});
+				}));
+			};
+			patch(update.previousScene, scene, svg, false);
+			const elementOf = (node) => elements.get(node);
+			const rootClass = scene.classes.join(" ");
+			const animation = animations?.animate({
+				changes,
+				elementOf,
+				update,
+				container,
+				scene,
+				measureStyle: (property, measure) => dom.measureStyle?.(property, {
+					container,
+					rootClass,
+					...measure
+				}),
+				valueKey: (value, which) => valueKey({
+					...value,
+					label: (which === "previous" ? previousLabels : labels)[value.valueIndex]
+				})
+			});
+			return {
+				svg,
+				elementOf,
+				remove: () => svg.remove(),
+				changes,
+				patched: true,
+				...animation && { animation }
+			};
+		}
+	};
+}
+//#endregion
+export { diffScenes, liveDomRenderer, smilAnimations };
+
+//# sourceMappingURL=live.js.map