@tanstack/charts/dist/solid/index.js

A chart grammar for TypeScript and JavaScript. Marks consume your data directly, channels describe visual encodings, and the engine compiles them into a renderer-neutral keyed scene. TanStack's compact scales cover common numeric and categorical mappings.

import { Portal as e, className as t, createComponent as n, effect as r, insert as i, memo as a, setStyleProperty as o, style as s, template as c, use as l } from "solid-js/web";
import { Show as u, createEffect as d, createMemo as f, createSignal as p, createUniqueId as m, onCleanup as h, onMount as g } from "solid-js";
import { createChartRendererAdapter as _ } from "@tanstack/charts/adapter/renderer";
import { renderChartSvg as v } from "@tanstack/charts/svg";
import { createSvgChartRenderer as y } from "@tanstack/charts/svg/renderer";
//#region packages/solid-charts/src/Chart.tsx
var b = /*#__PURE__*/ c("<div style=position:relative><div class=ts-chart-surface style=width:100%;height:100%>"), x = /*#__PURE__*/ c("<div class=ts-chart-tooltip__title style=display:flex;align-items:center;gap:0.4rem;font-weight:650>"), S = /*#__PURE__*/ c("<div class=ts-chart-tooltip__rows aria-hidden=true>"), C = /*#__PURE__*/ c("<div class=ts-chart-tooltip__row style=\"display:grid;grid-template-columns:0.55rem minmax(0,1fr) auto;align-items:center;column-gap:0.4rem\"><span></span><span style=text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap>"), w = /*#__PURE__*/ c("<span>"), T = /*#__PURE__*/ c("<span class=ts-chart-tooltip__swatch aria-hidden=true style=\"display:block;width:0.55rem;height:0.55rem;border-radius:0.15rem;box-shadow:inset 0 0 0 1px rgb(0 0 0/.12)\">");
function E(e) {
	let i = `ts-chart-${m().replaceAll(/[^a-zA-Z0-9_-]/g, "")}`, a = f(() => y(e.renderSvg ?? v)), [o, c] = p(null), x = () => D(e, e.idPrefix ?? i, a(), c), S = _(x()), C = S.prerender(), w;
	d(() => S.update(x())), g(() => S.mount(w)), h(() => S.destroy());
	let T = () => typeof e.aspectRatio == "number" && Number.isFinite(e.aspectRatio) && e.aspectRatio > 0 ? e.aspectRatio : void 0;
	return [(() => {
		var n = b(), i = n.firstChild, a = w;
		return typeof a == "function" ? l(a, i) : w = i, i.innerHTML = C, r((r) => {
			var i = e.class ? `ts-chart-host ${e.class}` : "ts-chart-host", a = {
				width: e.width === void 0 ? "100%" : `${e.width}px`,
				height: e.height === void 0 ? T() === void 0 ? "320px" : void 0 : `${e.height}px`,
				"aspect-ratio": e.height === void 0 ? T()?.toString() : void 0,
				...e.style
			};
			return i !== r.e && t(n, r.e = i), r.t = s(n, a, r.t), r;
		}, {
			e: void 0,
			t: void 0
		}), n;
	})(), n(u, {
		get when() {
			return e.renderTooltipBody;
		},
		keyed: !0,
		children: (e) => n(u, {
			get when() {
				return o();
			},
			children: (t) => n(O, {
				render: e,
				target: t
			})
		})
	})];
}
function D(e, t, n, r) {
	let { class: i, style: a, renderSvg: o, renderTooltipBody: s, onRender: c, ...l } = e, u = c ? (e) => {
		let t = e.surface.element, n = e.container.ownerDocument.defaultView?.SVGSVGElement;
		if (!n || !(t instanceof n)) throw TypeError("Expected the SVG chart surface.");
		c({
			container: e.container,
			scene: e.scene,
			svg: t,
			interaction: e.interaction
		});
	} : void 0;
	return {
		...l,
		idPrefix: t,
		renderer: n,
		onRender: u,
		onTooltipBodyChange: s ? r : void 0
	};
}
function O(t) {
	let r = {
		get points() {
			return t.target().points;
		},
		get content() {
			return t.target().content;
		},
		defaultBody: n(k, { get content() {
			return t.target().content;
		} }),
		get pinned() {
			return t.target().pinned;
		},
		get dismiss() {
			return t.target().dismiss;
		}
	};
	return n(e, {
		get mount() {
			return t.target().element;
		},
		children: t.render(r)
	});
}
function k(e) {
	return () => {
		let t = e.content;
		return typeof t == "string" ? t : n(A, { content: t });
	};
}
function A(e) {
	return [a(() => a(() => !!e.content.title)() ? (() => {
		var t = x();
		return i(t, (() => {
			var t = a(() => !!e.content.color);
			return () => t() ? n(j, { get color() {
				return e.content.color;
			} }) : null;
		})(), null), i(t, () => e.content.title, null), r((n) => o(t, "margin-bottom", e.content.rows.length ? "0.3rem" : 0)), t;
	})() : null), a(() => a(() => !!e.content.rows.length)() ? (() => {
		var t = S();
		return i(t, () => e.content.rows.map((e) => (() => {
			var t = C(), r = t.firstChild, o = r.nextSibling;
			return i(t, (() => {
				var t = a(() => !!e.color);
				return () => t() ? n(j, { get color() {
					return e.color;
				} }) : w();
			})(), r), i(r, () => e.label), i(o, () => e.value), t;
		})())), t;
	})() : null)];
}
function j(e) {
	return (() => {
		var t = T();
		return r((n) => o(t, "background", e.color)), t;
	})();
}
//#endregion
export { E as Chart };