chartist 1.5.0 → 2.0.0-rc.2

package/dist/compat.js

@@ -0,0 +1,603 @@
+import * as core from "./index.js";
+import { AutoScaleAxis, BarChart, LineChart, PieChart, StepAxis, Svg, axisUnits, findAll, getHighLow, isNumeric, normalizeData, safeHasProperty, serialMap } from "./index.js";
+//#region \0rolldown/runtime.js
+var __defProp = Object.defineProperty;
+var __exportAll = (all, no_symbols) => {
+	let target = {};
+	for (var name in all) __defProp(target, name, {
+		get: all[name],
+		enumerable: true
+	});
+	if (!no_symbols) __defProp(target, Symbol.toStringTag, { value: "Module" });
+	return target;
+};
+//#endregion
+//#region src/chart/types.ts
+/** The same handle, seen without event typing. Internal. */
+const untyped = (handle) => handle;
+//#endregion
+//#region src/core/data/range.ts
+/**
+* Repairs a value range that's empty because high is at or below low, from
+* flat data or a misconfigured `high`/`low`: sets the bound on the other
+* side of zero to 0, or gives `0` to `1` when there are no values. Chart
+* code that overrides a bound after `getHighLow` calls it again.
+*
+* @param highLow The range to check.
+* @returns The range, or the repaired one.
+*/
+function nonEmptyRange(highLow) {
+	const { high, low } = highLow;
+	if (high > low) return {
+		high,
+		low
+	};
+	if (low === 0) return {
+		high: 1,
+		low
+	};
+	if (low < 0) return {
+		high: 0,
+		low
+	};
+	if (high > 0) return {
+		high,
+		low: 0
+	};
+	return {
+		high: 1,
+		low: 0
+	};
+}
+//#endregion
+//#region src/compat/index.ts
+/**
+* The compat plugin: 1.x events, `Svg` wrappers and 1.x plugins on v2
+* charts. Opt-in: `plugins: [compat]`, or convert a 1.x plugin with
+* `fromLegacyPlugin()`.
+*
+* Imports only from the package root, so the built `chartist/compat` entry
+* shares the core with `chartist` instead of bundling a copy.
+*/
+var compat_exports = /* @__PURE__ */ __exportAll({
+	compat: () => compat,
+	fromLegacyPlugin: () => fromLegacyPlugin
+});
+/** The 1.x events the compat plugin emits. */
+const LEGACY_EVENTS = [
+	"data",
+	"optionsChanged",
+	"draw",
+	"created",
+	"animationBegin",
+	"animationEnd"
+];
+const states = /* @__PURE__ */ new WeakMap();
+/**
+* Where `Svg#animate()` looks for the emitter of an element's animations
+* when it gets none (on the element or an ancestor). The core reads the
+* same global symbol.
+*/
+const ANIMATION_EMITTER = Symbol.for("chartist.animationEmitter");
+/**
+* Where a preset's chart handle holds its preset state from the moment
+* plugins install. The core sets the same global symbol.
+*/
+const PRESET_STATE = Symbol.for("chartist.presetState");
+const presetOf = (handle) => handle[PRESET_STATE];
+/** The 1.x class of each preset, for 0.x and 1.x type checks in plugins. */
+const CLASSES = {
+	line: LineChart,
+	bar: BarChart,
+	pie: PieChart
+};
+/** Copies plain arrays and objects; other values are kept by reference. */
+function mutableCopy(value) {
+	if (Array.isArray(value)) return value.map(mutableCopy);
+	if (value && typeof value === "object") {
+		const proto = Object.getPrototypeOf(value);
+		if (proto === Object.prototype || proto === null) return Object.fromEntries(Object.entries(value).map(([key, entry]) => [key, mutableCopy(entry)]));
+	}
+	return value;
+}
+const isLegacyAxisClass = (type) => typeof type === "function" && typeof type.prototype?.projectValue === "function";
+function chartRectOf(layout) {
+	const { area, padding } = layout;
+	return {
+		x1: area.x1,
+		x2: area.x2,
+		y1: area.y1,
+		y2: area.y2,
+		padding,
+		width() {
+			return this.x2 - this.x1;
+		},
+		height() {
+			return this.y1 - this.y2;
+		}
+	};
+}
+/** The 1.x axes, constructed as 1.x `LineChart.createChart` does. */
+function lineAxes(options, data, chartRect) {
+	const normalized = normalizeData(data, options.reverseData, true);
+	const series = normalized.series;
+	return {
+		axisX: isLegacyAxisClass(options.axisX.type) ? new options.axisX.type(axisUnits.x, series, chartRect, options.axisX) : new StepAxis(axisUnits.x, series, chartRect, {
+			...options.axisX,
+			ticks: normalized.labels,
+			stretch: options.fullWidth
+		}),
+		axisY: isLegacyAxisClass(options.axisY.type) ? new options.axisY.type(axisUnits.y, series, chartRect, options.axisY) : new AutoScaleAxis(axisUnits.y, series, chartRect, {
+			...options.axisY,
+			high: isNumeric(options.high) ? options.high : options.axisY.high,
+			low: isNumeric(options.low) ? options.low : options.axisY.low
+		})
+	};
+}
+/** Sums per index across series, as 1.x `BarChart` stacks them. */
+function serialSums(series) {
+	return serialMap(series, (...values) => values.reduce((sum, value) => ({
+		x: sum.x + (safeHasProperty(value, "x") ? value.x : 0),
+		y: sum.y + (safeHasProperty(value, "y") ? value.y : 0)
+	}), {
+		x: 0,
+		y: 0
+	}));
+}
+/** The 1.x axes, constructed as 1.x `BarChart.createChart` does. */
+function barAxes(options, data, chartRect) {
+	const horizontal = Boolean(options.horizontalBars);
+	const valueDimension = horizontal ? "x" : "y";
+	const labelDimension = horizontal ? "y" : "x";
+	const normalized = normalizeData(data, options.reverseData, valueDimension, true);
+	const series = normalized.series;
+	const found = options.stackBars && options.stackMode !== true && series.length ? getHighLow([serialSums(series)], options, valueDimension) : getHighLow(series, options, valueDimension);
+	const highLow = nonEmptyRange({
+		high: typeof options.high === "number" ? options.high : found.high,
+		low: typeof options.low === "number" ? options.low : found.low
+	});
+	const valueOptions = horizontal ? options.axisX : options.axisY;
+	const labelOptions = horizontal ? options.axisY : options.axisX;
+	const valueAxis = new (isLegacyAxisClass(valueOptions.type) ? valueOptions.type : AutoScaleAxis)(axisUnits[valueDimension], series, chartRect, {
+		...valueOptions,
+		highLow,
+		referenceValue: 0
+	});
+	const labelAxis = isLegacyAxisClass(labelOptions.type) ? new labelOptions.type(axisUnits[labelDimension], series, chartRect, labelOptions) : new StepAxis(axisUnits[labelDimension], series, chartRect, { ticks: options.distributeSeries && options.stackBars ? normalized.labels.slice(0, 1) : normalized.labels });
+	return horizontal ? {
+		axisX: valueAxis,
+		axisY: labelAxis
+	} : {
+		axisX: labelAxis,
+		axisY: valueAxis
+	};
+}
+const AXES = {
+	line: lineAxes,
+	bar: barAxes,
+	pie: () => ({
+		axisX: void 0,
+		axisY: void 0
+	})
+};
+/** 1.x `draw` payloads in 1.x order, then `created`. */
+function emitDrawEvents(handle, state, scene, svgElement, elementOf) {
+	const options = state.preset?.options;
+	const data = state.copy ?? state.preset?.data;
+	const chartRect = chartRectOf(state.layout);
+	const { axisX, axisY } = AXES[state.preset.kind](options, data, chartRect);
+	const axisOf = (dimension) => dimension === "x" ? axisX : axisY;
+	const wrap = (element) => new Svg(element);
+	const draw = (payload) => untyped(handle).emit("draw", payload);
+	const parts = (node) => {
+		const element = elementOf(node);
+		return {
+			element: wrap(element),
+			group: wrap(element.parentElement)
+		};
+	};
+	const grids = findAll(scene, { role: "grid" });
+	const allLabels = findAll(scene, { role: "label" });
+	const labels = allLabels.filter((n) => n.ctx.kind === "axis");
+	const sliceLabels = allLabels.filter((n) => n.ctx.kind === "pie");
+	const order = [...new Set([...grids, ...labels].map((n) => n.ctx.axis.dimension))];
+	for (const dimension of order) {
+		const onAxis = (node) => node.ctx.axis.dimension === dimension;
+		const indexes = [...new Set([...grids, ...labels].filter(onAxis).map((n) => n.ctx.index))].sort((a, b) => a - b);
+		for (const index of indexes) {
+			const grid = grids.find((n) => onAxis(n) && n.ctx.index === index);
+			if (grid) {
+				const { x1, y1, x2, y2 } = grid.attrs;
+				draw({
+					type: "grid",
+					axis: axisOf(dimension),
+					index,
+					...parts(grid),
+					x1,
+					y1,
+					x2,
+					y2
+				});
+			}
+			const label = labels.find((n) => onAxis(n) && n.ctx.index === index);
+			if (label) {
+				const { x, y, width, height } = label.attrs;
+				draw({
+					type: "label",
+					axis: axisOf(dimension),
+					index,
+					...parts(label),
+					text: label.ctx.text,
+					x,
+					y,
+					width,
+					height
+				});
+			}
+		}
+	}
+	for (const background of findAll(scene, { role: "gridBackground" })) draw({
+		type: "gridBackground",
+		...parts(background)
+	});
+	const rawSeries = data.series ?? [];
+	for (const series of findAll(scene, { role: "series" })) {
+		const seriesIndex = series.ctx.seriesIndex;
+		const common = {
+			series: rawSeries[options.reverseData ? rawSeries.length - 1 - seriesIndex : seriesIndex],
+			seriesIndex,
+			axisX,
+			axisY
+		};
+		const children = series.children;
+		const slice = children.find((n) => n.role === "slice");
+		if (slice) {
+			const ctx = slice.ctx;
+			draw({
+				type: "slice",
+				value: ctx.value,
+				totalDataSum: ctx.totalDataSum,
+				index: ctx.index,
+				meta: ctx.meta,
+				series: ctx.series,
+				...parts(slice),
+				path: ctx.path.clone(),
+				center: ctx.center,
+				radius: ctx.radius,
+				startAngle: ctx.startAngle,
+				endAngle: ctx.endAngle,
+				chartRect
+			});
+			const label = sliceLabels.find((n) => n.ctx.index === ctx.index);
+			if (label) {
+				const labelCtx = label.ctx;
+				draw({
+					type: "label",
+					index: labelCtx.index,
+					...parts(label),
+					text: labelCtx.text,
+					chartRect,
+					series: labelCtx.series,
+					meta: labelCtx.meta,
+					x: labelCtx.x,
+					y: labelCtx.y
+				});
+			}
+			continue;
+		}
+		for (const barNode of children.filter((n) => n.role === "bar")) {
+			const ctx = barNode.ctx;
+			draw({
+				type: "bar",
+				value: ctx.value,
+				index: ctx.valueIndex,
+				meta: ctx.meta,
+				series: ctx.series,
+				seriesIndex,
+				axisX,
+				axisY,
+				chartRect,
+				...parts(barNode),
+				x1: ctx.x1,
+				y1: ctx.y1,
+				x2: ctx.x2,
+				y2: ctx.y2
+			});
+		}
+		for (const point of children.filter((n) => n.role === "point")) {
+			const ctx = point.ctx;
+			draw({
+				type: "point",
+				value: ctx.value,
+				index: ctx.valueIndex,
+				meta: ctx.meta,
+				...common,
+				...parts(point),
+				x: ctx.x,
+				y: ctx.y,
+				chartRect
+			});
+		}
+		const shapes = [...children.filter((n) => n.role === "line"), ...children.filter((n) => n.role === "area").reverse()];
+		for (const shape of shapes) {
+			const ctx = shape.ctx;
+			draw({
+				type: shape.role,
+				values: ctx.values,
+				path: ctx.path.clone(),
+				chartRect,
+				index: seriesIndex,
+				...common,
+				meta: ctx.meta,
+				...parts(shape)
+			});
+		}
+	}
+	const valueAxis = options.horizontalBars ? axisX : axisY;
+	untyped(handle).emit("created", state.preset.kind === "pie" ? {
+		chartRect,
+		svg: wrap(svgElement),
+		options
+	} : {
+		chartRect,
+		axisX,
+		axisY,
+		bounds: valueAxis.bounds,
+		svg: wrap(svgElement),
+		options
+	});
+}
+/** Turns the 1.x events on for a chart, once. */
+function enable(handle) {
+	const existing = states.get(handle);
+	if (existing) return existing;
+	const state = { instances: [] };
+	states.set(handle, state);
+	handle.on("resolve", ({ config }) => {
+		state.preset = config.preset;
+		if (config.data !== state.source) {
+			state.copy = mutableCopy(config.data);
+			untyped(handle).emit("data", {
+				type: state.source === void 0 ? "initial" : "update",
+				data: state.copy
+			});
+			state.source = config.data;
+		}
+		return { config: {
+			...config,
+			data: state.copy
+		} };
+	});
+	handle.on("layout", (layout) => {
+		state.layout = layout;
+	});
+	handle.on("responsive", (change) => "previousOptions" in change ? untyped(handle).emit("optionsChanged", {
+		previousOptions: change.previousOptions,
+		currentOptions: change.currentOptions
+	}) : void 0);
+	handle.on("mount", ({ scene, output, elementOf }) => {
+		const svg = output.svg;
+		if (!svg) throw new Error("Chartist: the compat plugin requires the DOM renderer");
+		state.svg = new Svg(svg);
+		for (const instance of state.instances) instance.svg = state.svg;
+		svg[ANIMATION_EMITTER] = { emit: (event, payload) => untyped(handle).emit(event, payload) };
+		if (state.preset) emitDrawEvents(handle, state, scene, svg, elementOf);
+	});
+	return state;
+}
+/** 1.x `optionsProvider`: the options in effect, after responsive options. */
+function optionsProviderOf(getOptions) {
+	return {
+		getCurrentOptions: getOptions,
+		removeMediaQueryListeners: () => void 0
+	};
+}
+/**
+* A 1.x-style chart object for 1.x plugins on the functional API. For a
+* preset it is an instance of the preset's 1.x class (without running its
+* constructor), so type checks such as `chart instanceof LineChart` hold;
+* for `chart()` compositions a plain object.
+*/
+function legacyChart(handle, state) {
+	const preset = presetOf(handle);
+	const chart = {
+		get container() {
+			return handle.container;
+		},
+		get data() {
+			return state.copy ?? preset?.data;
+		},
+		get options() {
+			return preset?.options;
+		},
+		get svg() {
+			return state.svg;
+		},
+		eventEmitter: {
+			on: (event, listener) => untyped(handle).on(event, listener),
+			off: (event, listener) => untyped(handle).off(event, listener),
+			emit: (event, payload) => untyped(handle).emit(event, payload)
+		},
+		optionsProvider: optionsProviderOf(() => preset?.options),
+		on(event, listener) {
+			untyped(handle).on(event, listener);
+			return chart;
+		},
+		off(event, listener) {
+			untyped(handle).off(event, listener);
+			return chart;
+		},
+		update(data, options, override) {
+			if (preset) preset.update(data, options, override);
+			else handle.update(data ? { data } : {});
+			return chart;
+		},
+		detach() {
+			if (preset) preset.detach();
+			else handle.detach();
+			return chart;
+		}
+	};
+	const type = preset && CLASSES[preset.kind];
+	return type ? Object.setPrototypeOf(chart, type.prototype) : chart;
+}
+/**
+* Runs a 1.x plugin function as a v2 plugin, with the given chart object.
+* Used by the 1.x chart classes, which pass themselves.
+*/
+function legacyPlugin(plugin, options, chart) {
+	return {
+		name: plugin.name || "legacy-plugin",
+		provides: LEGACY_EVENTS,
+		install(handle) {
+			const state = enable(handle);
+			if (chart) {
+				state.instances.push(chart);
+				const instance = chart;
+				if (!instance.optionsProvider) instance.optionsProvider = optionsProviderOf(() => presetOf(handle)?.options);
+			}
+			const chartObject = chart ?? legacyChart(handle, state);
+			if (options === void 0) plugin(chartObject);
+			else plugin(chartObject, options);
+		}
+	};
+}
+/**
+* The compat plugin. Restores the 1.x events (`data`, `optionsChanged`,
+* `draw`, `created`, `animationBegin`, `animationEnd`) with 1.x payloads.
+* With it, the 1.x chart classes also run 1.x plugin functions.
+*
+* Add it to `plugins`, of a 1.x class, a preset or `chart()`. The `draw`
+* events come in the 1.x order, right after the chart is in the DOM, so
+* `element` is a live element; then `created`. Animations started with
+* `animate()` on the chart's elements emit `animationBegin` and
+* `animationEnd`. Importing
+* `chartist/compat` also types the 1.x events on every chart handle. It
+* needs the DOM renderer, and the `draw` and `created` events need a
+* chart made by a preset or a 1.x class.
+*
+* @example
+* ```ts
+* import { lineChart } from 'chartist';
+* import { compat } from 'chartist/compat';
+*
+* const chart = lineChart(
+*   '#chart',
+*   {
+*     labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
+*     series: [[12, 9, 7, 8, 5]]
+*   },
+*   { plugins: [compat] }
+* );
+*
+* // Registered after the first render, so it runs from the next one on.
+* chart.on('draw', data => {
+*   if (data.type === 'point' && data.index === 4) {
+*     data.element.addClass('is-friday');
+*   }
+* });
+* ```
+*/
+const compat = {
+	name: "compat",
+	provides: LEGACY_EVENTS,
+	install: (handle) => void enable(handle),
+	legacyPlugin
+};
+/**
+* Converts a 1.x plugin function into a v2 plugin for `chart()` and the
+* preset functions. It turns the 1.x events on for the chart and calls the
+* plugin with a 1.x-style chart object (`container`, `data`, `options`,
+* `svg`, `eventEmitter`, `on`, `off`, `update`, `detach`). You don't need
+* {@link compat} in the list as well.
+*
+* @param plugin The 1.x plugin: a function that gets the chart (and its
+* options)
+* @param options The plugin's options; without them, the plugin is called
+* with the chart only, as in 1.x
+* @example
+* ```ts
+* import { lineChart, type Plugin } from 'chartist';
+* import { fromLegacyPlugin } from 'chartist/compat';
+*
+* // A 1.x plugin: a function that gets the chart and its options.
+* const caption: Plugin = (chart, options) => {
+*   chart.on('created', () => {
+*     chart.container.setAttribute('aria-label', options.text);
+*   });
+* };
+*
+* lineChart(
+*   '#chart',
+*   { series: [[1, 3, 2, 4]] },
+*   { plugins: [fromLegacyPlugin(caption, { text: 'Visitors per week' })] }
+* );
+* ```
+*/
+function fromLegacyPlugin(plugin, options) {
+	return legacyPlugin(plugin, options);
+}
+//#endregion
+//#region src/compat/global.ts
+/**
+* The global `Chartist` that plugin scripts of the 0.x and 1.x era read.
+* They register on `Chartist.plugins`, check the chart type with
+* `instanceof Chartist.Line`, and call helpers such as `Chartist.extend`.
+* Importing `chartist/compat` (any build: module, CommonJS or the UMD
+* script) sets this up, so such a script works when it loads after it.
+*
+* The names are added to the global only, never exported: the module
+* builds keep the 1.x and v2 names.
+*/
+/**
+* 0.x: the values of each series as plain numbers (`undefined` for holes),
+* normalized as the 1.x charts do; reversed when `reverse` is true. Line
+* and bar data give an array per series, pie data one array.
+*/
+function getDataArray(data, reverse) {
+	return normalizeData(data, reverse).series;
+}
+/** The 0.x names plugin scripts use, next to the library's own. */
+const LEGACY_NAMES = {
+	Line: LineChart,
+	Bar: BarChart,
+	Pie: PieChart,
+	getDataArray
+};
+/**
+* Adds the core, compat and the 0.x names to the global `Chartist`, only
+* what it lacks: a global set by the UMD build or by plugin scripts keeps
+* its values, and `plugins` keeps what scripts registered. If the global
+* belongs to another copy of Chartist (say the UMD build next to these
+* modules), it is left alone with a warning: mixing two copies breaks the
+* plugins' type checks. Outside a browser it does nothing.
+*/
+function installGlobal(compat, root = globalThis) {
+	if (root.document === void 0) return;
+	const existing = root.Chartist;
+	if (existing && "LineChart" in existing && existing.LineChart !== LineChart) {
+		console.warn("Chartist: the global `Chartist` belongs to another copy of Chartist, so chartist/compat leaves it alone. Load Chartist once: as modules, or as the UMD build with compat.umd.js.");
+		return;
+	}
+	const target = existing ?? (root.Chartist = {});
+	const add = (name, value) => {
+		if (!(name in target)) target[name] = value;
+	};
+	for (const [name, value] of Object.entries(core)) add(name, value);
+	for (const [name, value] of Object.entries(compat)) add(name, value);
+	add("plugins", {});
+	for (const [name, value] of Object.entries(LEGACY_NAMES)) add(name, value);
+}
+//#endregion
+//#region src/compat/entry.ts
+/**
+* The published entry of `chartist/compat`, in every build. Next to the
+* compat API, importing it sets up the global `Chartist` for plugin
+* scripts of the 0.x and 1.x era (see ./global.ts). That's why
+* package.json lists the compat files under `sideEffects`.
+*/
+installGlobal(compat_exports);
+//#endregion
+export { compat, fromLegacyPlugin };
+
+//# sourceMappingURL=compat.js.map