@howells/hairline 0.0.0-stage → 0.1.0

package/lib/charts/basics/stream-ribbon.js

@@ -0,0 +1,336 @@
+"use client";
+import { fmtDay as e, fmtInt as t, monthTickLabels as n } from "../../lib/format.js";
+import { useSvgId as r } from "../hooks.js";
+import { Plot as i, Tooltip as a } from "../core.js";
+import { noteOf as o, sansWidth as s, stagger as c, sum as l } from "../util.js";
+import { crisp as u } from "../axes.js";
+import { TICK as d } from "../marks.js";
+import { PlotNote as f } from "../plot-note.js";
+import { HRule as p, Stem as m } from "../rules.js";
+import { ChartSvg as h } from "../svg.js";
+import { Label as g } from "../text.js";
+import { inkWidth as _, maxIndex as v } from "./util-b.js";
+import { paint as y, useTextureIds as b } from "../texture-ids.js";
+import { CrossHatch as x, Hatch as S, PlateLabel as C, Rules as w, Stipple as T } from "../texture.js";
+import { streamRibbonDemo as E } from "./stream-ribbon.data.js";
+import { useState as D } from "react";
+import { scaleLinear as O, scaleUtc as k } from "d3-scale";
+import { utcFormat as A } from "d3-time-format";
+import { jsx as j, jsxs as M } from "react/jsx-runtime";
+import { area as N, curveCatmullRom as P, line as F, stack as I, stackOffsetWiggle as L, stackOrderNone as R } from "d3-shape";
+//#region src/charts/basics/stream-ribbon.tsx
+var z = [
+	"cross",
+	"hatch",
+	"stipple",
+	"rules"
+], B = [
+	[0],
+	[0, 4],
+	[
+		0,
+		3,
+		5
+	],
+	[
+		0,
+		2,
+		4,
+		5
+	],
+	[
+		0,
+		2,
+		3,
+		4,
+		5
+	]
+], V = P.alpha(.5), H = (e) => {
+	let t = (e.length - 1) / 2, n = l(e) / Math.max(1, e.length), r = 0, i = 0;
+	for (let [a, o] of e.entries()) r += (a - t) * (o - n), i += (a - t) ** 2;
+	return {
+		mean: n,
+		mid: t,
+		slope: i === 0 ? 0 : r / i
+	};
+}, U = (e) => {
+	let t = e.dates.map((t, n) => e.series.map((e) => e.values[n] ?? 0)), n = I().keys(e.series.map((e, t) => t)).value((e, t) => e[t] ?? 0).order(R).offset(L)(t), r = n[0] ?? [], i = n.at(-1) ?? [], { mean: a, mid: o, slope: s } = H(r.map((e, t) => (e[0] + (i[t]?.[1] ?? e[1])) / 2)), c = n.map((e) => e.map((e, t) => ({
+		y0: e[0] - a - s * (t - o),
+		y1: e[1] - a - s * (t - o)
+	}))), u = B[Math.min(5, e.series.length) - 1] ?? [
+		0,
+		2,
+		3,
+		4,
+		5
+	], d = e.series.map((e, t) => ({
+		k: t,
+		v: e.values.at(-1) ?? 0
+	})).toSorted((e, t) => t.v - e.v), f = e.series.map((e, t) => u[Math.min(d.findIndex((e) => e.k === t), u.length - 1)] ?? 0);
+	return {
+		hi: Math.max(...(c.at(-1) ?? []).map((e) => e.y1)),
+		layers: c,
+		lo: Math.min(...(c[0] ?? []).map((e) => e.y0)),
+		names: e.series.map((e) => e.name),
+		steps: f,
+		totals: t.map((e) => l(e))
+	};
+}, W = (e, t, n, r, i, a) => {
+	let o = e < 560, s = Math.max(_(a(r.totals.at(-1) ?? 0)), _("Total")), c = 12 + Math.ceil(s), l = Math.min(e - 12 - c, 1180), u = 12 + (e - 12 - c - l) / 2, d = n.dates[0] ?? /* @__PURE__ */ new Date(0), f = n.dates.at(-1) ?? d, p = k().domain([d, f]).range([u, u + l]), m = t - (i ? 84 : 42) - 18, h = Math.min((m - 18) / (r.hi - r.lo), l * .6 / Math.max(...r.totals)), g = (r.hi - r.lo) * h / 2, v = Math.max(0, Math.floor(m - 18 - 12 - g * 2)), y = m - v, b = Math.max((y + 18) / 2, y - 12 - g);
+	return {
+		height: t - v,
+		narrow: o,
+		plotW: l,
+		px0: u,
+		xs: n.dates.map((e) => p(e)),
+		y: O().domain([r.lo, r.hi]).range([b + g, b - g])
+	};
+}, G = (e) => {
+	let t = [...new Set(e)].toSorted((e, t) => e - t);
+	return e.map((e) => t.indexOf(e));
+}, K = (e) => {
+	let { layout: t, river: n, hover: r } = e, i = (e, n) => t.xs[n] ?? 0, a = N().x(i).y0((e) => t.y(e.y0)).y1((e) => t.y(e.y1)).curve(V), o = F().x(i).y((e) => t.y(e.y1)).curve(V), s = r === null ? 0 : t.y(n.layers.at(-1)?.[r.i]?.y1 ?? 0), c = r === null ? 0 : t.y(n.layers[0]?.[r.i]?.y0 ?? 0), l = G(n.steps), u = (e) => r !== null && r.s !== null && r.s !== e ? "opacity-30" : "", d = l.indexOf(0), f = n.layers[d];
+	return /* @__PURE__ */ M("g", {
+		clipPath: `url(#${e.clip})`,
+		children: [
+			n.layers.map((t, r) => {
+				let i = z[Math.min(l[r] ?? 0, z.length - 1)];
+				return /* @__PURE__ */ j("path", {
+					className: `stroke-l5 transition-opacity ${u(r)}`,
+					d: a(t) ?? "",
+					fill: y(e.textures(i ?? "rules")),
+					strokeWidth: 1
+				}, n.names[r]);
+			}),
+			f === void 0 ? null : /* @__PURE__ */ j("path", {
+				className: `cap-round stroke-ink fill-none transition-opacity ${u(d)}`,
+				d: o(f) ?? "",
+				strokeWidth: 2
+			}),
+			r === null ? null : /* @__PURE__ */ j(m, {
+				className: "stroke-paper",
+				x: r.x,
+				y0: s,
+				y1: c
+			})
+		]
+	});
+}, q = (e) => {
+	let { layout: t, river: n } = e, r = n.layers.map((r, i) => {
+		let a = e.data.series[i]?.name ?? "", o = (s(a, 12) + 16) / 2, c = r.map((e, n) => {
+			let r = t.xs[n] ?? 0;
+			return r - o >= t.px0 + 6 && r + o <= t.px0 + t.plotW - 6 ? t.y(e.y0) - t.y(e.y1) : 0;
+		}), l = v(c), u = r[l] ?? {
+			y0: 0,
+			y1: 0
+		};
+		return {
+			fits: (c[l] ?? 0) >= 18,
+			hero: (G(n.steps)[i] ?? 0) === 0,
+			name: a,
+			x: t.xs[l] ?? 0,
+			y: (t.y(u.y0) + t.y(u.y1)) / 2
+		};
+	});
+	return /* @__PURE__ */ j("g", {
+		className: "fade pointer-events-none",
+		style: c(8),
+		children: r.map((e) => e.fits ? /* @__PURE__ */ j(C, {
+			className: "t-label",
+			hero: e.hero,
+			text: e.name,
+			x: e.x,
+			y: e.y
+		}, e.name) : null)
+	});
+}, J = (e) => {
+	let { format: t, layout: n, river: r } = e, i = r.totals.length - 1, a = n.y(r.layers.at(-1)?.[i]?.y1 ?? 0), o = n.y(r.layers[0]?.[i]?.y0 ?? 0), s = n.px0 + n.plotW, l = (a + o) / 2;
+	return /* @__PURE__ */ M("g", {
+		className: "fade",
+		style: c(9),
+		children: [/* @__PURE__ */ j(g, {
+			voice: "value",
+			x: s + 10,
+			y: l - 2,
+			children: t(r.totals.at(-1) ?? 0)
+		}), /* @__PURE__ */ j(g, {
+			voice: "axis",
+			x: s + 10,
+			y: l + 12,
+			children: "Total"
+		})]
+	});
+}, Y = A("%Y"), X = 80, Z = (e) => {
+	let { layout: t, data: r, yearly: i } = e, a = t.narrow ? 6 : 3, o = r.dates.flatMap((e, n) => {
+		let o = r.dates[n - 1], s = o === void 0 || o.getUTCMonth() !== e.getUTCMonth();
+		return i || s && e.getUTCMonth() % a === 0 ? [{
+			date: e,
+			x: t.xs[n] ?? 0
+		}] : [];
+	}), s = [];
+	for (let e of o) {
+		let t = s.at(-1);
+		(t === void 0 || e.x - t.x >= X) && s.push(e);
+	}
+	let c = i ? s.map((e) => Y(e.date)) : n(s.map((e) => e.date));
+	return /* @__PURE__ */ M("g", { children: [
+		/* @__PURE__ */ j(p, {
+			x0: Math.round(t.px0 - 10),
+			x1: Math.round(t.px0 + t.plotW + 10),
+			y: e.y
+		}),
+		s.map((t) => /* @__PURE__ */ j("line", {
+			className: "hairline",
+			x1: u(t.x),
+			x2: u(t.x),
+			y1: Math.round(e.y) - d.md,
+			y2: Math.round(e.y)
+		}, t.date.getTime())),
+		s.map((t, n) => /* @__PURE__ */ j(g, {
+			anchor: n === 0 ? "start" : "middle",
+			voice: "axis",
+			x: n === 0 ? t.x - 2 : t.x,
+			y: e.y + 20,
+			children: c[n]
+		}, t.date.getTime()))
+	] });
+}, Q = (e, t, n) => {
+	let r = e.currentTarget.getBoundingClientRect(), i = e.clientX - r.left;
+	if (i < t.px0 - 10 || i > t.px0 + t.plotW + 10) return null;
+	let a = v(t.xs.map((e) => -Math.abs(e - i))), o = t.y.invert(e.clientY - r.top), s = n.layers.findIndex((e) => {
+		let t = e[a];
+		return t !== void 0 && o >= t.y0 && o <= t.y1;
+	});
+	return {
+		i: a,
+		narrow: t.narrow,
+		s: s === -1 ? null : s,
+		x: t.xs[a] ?? 0,
+		y: t.y(n.layers.at(-1)?.[a]?.y1 ?? 0) - 6
+	};
+}, $ = (t) => {
+	let { data: n, format: r, hover: i } = t, o = n.dates[i.i] ?? /* @__PURE__ */ new Date(0), s = t.yearly ? Y(o) : `Period from ${e(o)}`, c = r(t.river.totals[i.i] ?? 0);
+	if (i.narrow) {
+		let e = i.s === null ? void 0 : n.series[i.s];
+		return /* @__PURE__ */ M(a, {
+			x: i.x,
+			y: i.y,
+			children: [
+				/* @__PURE__ */ j("b", { children: s }),
+				/* @__PURE__ */ j("br", {}),
+				e === void 0 ? "" : `${e.name} ${r(e.values[i.i] ?? 0)} · `,
+				"Total ",
+				c
+			]
+		});
+	}
+	return /* @__PURE__ */ M(a, {
+		x: i.x,
+		y: i.y,
+		children: [
+			/* @__PURE__ */ j("b", { children: s }),
+			n.series.toReversed().map((e) => {
+				let t = n.series.indexOf(e);
+				return /* @__PURE__ */ M("span", {
+					className: i.s === null || i.s === t ? "" : "opacity-55",
+					children: [
+						" ",
+						"· ",
+						e.name,
+						" ",
+						r(e.values[i.i] ?? 0)
+					]
+				}, e.name);
+			}),
+			" ",
+			"· Total ",
+			c
+		]
+	});
+}, ee = (e) => {
+	let n = e.data ?? E, a = e.height ?? 440, s = e.format ?? t, c = r("stream"), l = b("stream"), [u, d] = D(null), p = U(n), m = `Stream of ${n.series.map((e) => e.name).join(", ")} over ${n.dates.length} ${e.yearly === !0 ? "years" : "periods"}; latest total ${s(p.totals.at(-1) ?? 0)}`;
+	return /* @__PURE__ */ j(i, {
+		overlay: u === null ? null : /* @__PURE__ */ j($, {
+			data: n,
+			format: s,
+			hover: u,
+			river: p,
+			yearly: e.yearly === !0
+		}),
+		children: (t) => {
+			let r = o(e) !== void 0, i = W(t, a, n, p, r, s);
+			return /* @__PURE__ */ M(h, {
+				height: i.height,
+				label: m,
+				leave: () => {
+					d(null);
+				},
+				onPointerMove: (e) => {
+					d(Q(e, i, p));
+				},
+				width: t,
+				children: [
+					/* @__PURE__ */ j("defs", { children: /* @__PURE__ */ j("clipPath", {
+						id: c,
+						children: /* @__PURE__ */ j("rect", {
+							className: "sweep",
+							height: i.height,
+							width: i.plotW + 8,
+							x: i.px0 - 4,
+							y: 0
+						})
+					}) }),
+					/* @__PURE__ */ M("defs", { children: [
+						/* @__PURE__ */ j(x, {
+							id: l("cross"),
+							tone: "fill-hero"
+						}),
+						/* @__PURE__ */ j(S, {
+							id: l("hatch"),
+							tone: "fill-l3"
+						}),
+						/* @__PURE__ */ j(T, {
+							id: l("stipple"),
+							tone: "fill-l3"
+						}),
+						/* @__PURE__ */ j(w, {
+							id: l("rules"),
+							tone: "fill-l4"
+						})
+					] }),
+					/* @__PURE__ */ j(K, {
+						clip: c,
+						hover: u,
+						layout: i,
+						river: p,
+						textures: l
+					}),
+					/* @__PURE__ */ j(q, {
+						data: n,
+						layout: i,
+						river: p
+					}),
+					/* @__PURE__ */ j(J, {
+						format: s,
+						layout: i,
+						river: p
+					}),
+					/* @__PURE__ */ j(Z, {
+						data: n,
+						layout: i,
+						yearly: e.yearly === !0,
+						y: i.height - (r ? 84 : 42) + 10
+					}),
+					/* @__PURE__ */ j(f, {
+						text: o(e),
+						width: t - 16,
+						x: i.px0 + i.plotW / 2,
+						y: i.height - 6
+					})
+				]
+			});
+		}
+	});
+};
+//#endregion
+export { ee as StreamRibbon };

package/lib/charts/basics/tick-box.data.js

@@ -0,0 +1,50 @@
+"use client";
+//#region src/charts/basics/tick-box.data.ts
+var e = [
+	{
+		label: "Spring",
+		max: 285,
+		median: 154.55,
+		min: 48.8,
+		outliers: [300.8, 322.8],
+		q1: 123.125,
+		q3: 188.275
+	},
+	{
+		label: "Summer",
+		max: 303.7,
+		median: 192,
+		min: 97.5,
+		outliers: [353],
+		q1: 161.875,
+		q3: 226.875
+	},
+	{
+		label: "Autumn",
+		max: 199.1,
+		median: 101.85,
+		min: 31,
+		outliers: [210.4, 213.9],
+		q1: 76.7,
+		q3: 129.25
+	},
+	{
+		label: "Winter",
+		max: 107,
+		median: 59.7,
+		min: 18.2,
+		outliers: [
+			112.9,
+			113,
+			115.1,
+			115.9,
+			117.6,
+			124.1,
+			127.8
+		],
+		q1: 47.7,
+		q3: 72.3
+	}
+];
+//#endregion
+export { e as tickBoxDemo };

package/lib/charts/basics/tick-box.js

@@ -0,0 +1,226 @@
+"use client";
+import { useHover as e } from "../hooks.js";
+import { Plot as t, Tooltip as n } from "../core.js";
+import { noteOf as r, stagger as i } from "../util.js";
+import { DimGroup as a, HitRect as o, TipText as s } from "../hover.js";
+import { crisp as c } from "../axes.js";
+import "../marks.js";
+import { Ring as l } from "../markers.js";
+import { FootNote as u } from "../plot-note.js";
+import { HRule as d, VRule as f } from "../rules.js";
+import { ChartSvg as p } from "../svg.js";
+import { Label as m } from "../text.js";
+import { inkWidth as h } from "./util-b.js";
+import { paint as g, useTextureIds as _ } from "../texture-ids.js";
+import { CrossHatch as v, Hatch as y } from "../texture.js";
+import { tickBoxDemo as b } from "./tick-box.data.js";
+import { scaleBand as x, scaleLinear as S } from "d3-scale";
+import { jsx as C, jsxs as w } from "react/jsx-runtime";
+//#region src/charts/basics/tick-box.tsx
+var T = (e, t, n, r, i, a) => {
+	let o = Math.max(...n.flatMap((e) => [e.max, ...e.outliers ?? []])), s = S().domain([0, o]).nice(4), c = a ?? s.ticks(4), l = 16 + Math.max(0, ...c.map((e) => Math.ceil(h(i(e))))), u = (e) => x().domain(n.map((e) => e.label)).range([0, e]).paddingInner(.3).paddingOuter(.25), d = (e) => {
+		let t = u(e), r = Math.min(50, t.bandwidth() * .55), a = e / n.length >= 110, o = l, s = 0;
+		for (let c of n) {
+			let n = (t(c.label) ?? 0) + t.bandwidth() / 2, l = Math.ceil(h(c.label)) / 2;
+			o = Math.max(o, l - n), s = Math.max(s, n + l - e, a ? n + r / 2 + 10 + h(i(c.median)) - e : 0);
+		}
+		return {
+			l: o,
+			r: s
+		};
+	}, f = n.length * 160, p = Math.min(e - 4 - l, f);
+	for (let t = 0; t < 3; t += 1) {
+		let { l: t, r: n } = d(p);
+		p = Math.min(e - 4 - t - n, f);
+	}
+	let { l: m, r: g } = d(p), _ = p / n.length < 110, v = (r ? 70 : 34) + (_ ? 16 : 0), y = s.copy().range([t - v, 14]), b = (e - m - p - g) / 2 + m, C = u(p).range([b, b + p]), w = Math.min(50, C.bandwidth() * .55);
+	return {
+		boxW: w,
+		cap: Math.min(14, w * .45),
+		floor: y.range()[0] ?? t,
+		narrow: _,
+		plotW: p,
+		px0: b,
+		ticks: c,
+		top: 14,
+		x: C,
+		y
+	};
+}, E = (e) => {
+	let { layout: t } = e;
+	return /* @__PURE__ */ C("g", { children: e.ticks.map((n) => /* @__PURE__ */ w("g", { children: [/* @__PURE__ */ C(d, {
+		kind: n === 0 ? "hairline" : "grid",
+		x0: Math.round(t.px0 - 8),
+		x1: Math.round(t.px0 + t.plotW),
+		y: t.y(n)
+	}), /* @__PURE__ */ C(m, {
+		anchor: "end",
+		middle: !0,
+		voice: "axis",
+		x: t.px0 - 16,
+		y: t.y(n),
+		children: e.format(n)
+	})] }, n)) });
+}, D = (e) => {
+	let { cx: t, datum: n, layout: r } = e, { cap: a, y: o } = r, s = Math.round(t - a), l = Math.round(t + a) + 1;
+	return /* @__PURE__ */ w("g", {
+		className: "fade stroke-l3 shape-crisp",
+		strokeWidth: 1,
+		style: i(e.index + 2, "series"),
+		children: [
+			/* @__PURE__ */ C(f, {
+				kind: "plain",
+				x: t,
+				y0: c(o(n.max)),
+				y1: o(n.q3)
+			}),
+			/* @__PURE__ */ C(f, {
+				kind: "plain",
+				x: t,
+				y0: o(n.q1),
+				y1: c(o(n.min))
+			}),
+			/* @__PURE__ */ C(d, {
+				kind: "plain",
+				x0: s,
+				x1: l,
+				y: o(n.max)
+			}),
+			/* @__PURE__ */ C(d, {
+				kind: "plain",
+				x0: s,
+				x1: l,
+				y: o(n.min)
+			})
+		]
+	});
+}, O = (e) => {
+	let { datum: t, layout: n, index: r } = e, { boxW: s, y: u } = n, d = n.x.bandwidth(), f = (n.x(t.label) ?? 0) + d / 2, p = Math.round(u(t.q3)), h = Math.max(2, Math.round(u(t.q1)) - p), _ = Math.round(f - s / 2), v = Math.round(s);
+	return /* @__PURE__ */ w(a, {
+		dim: e.dim,
+		onPointerEnter: () => {
+			e.onHover(f, u(t.max) - 10);
+		},
+		children: [
+			/* @__PURE__ */ C(o, {
+				height: n.floor - n.top + 24,
+				width: d,
+				x: f - d / 2,
+				y: n.top
+			}),
+			/* @__PURE__ */ C(D, {
+				cx: f,
+				datum: t,
+				index: r,
+				layout: n
+			}),
+			/* @__PURE__ */ C("rect", {
+				className: `grow-y shape-crisp ${e.hero ? "stroke-hero" : "stroke-l5"}`,
+				fill: g(e.hero ? e.textures("cross") : e.textures("hatch")),
+				height: h - 1,
+				rx: Math.min(h, v) < 24 ? 1.5 : 3.5,
+				strokeWidth: 1,
+				style: i(r, "series"),
+				width: v - 1,
+				x: _ + .5,
+				y: p + .5
+			}),
+			e.hero ? /* @__PURE__ */ C("rect", {
+				className: "grow-x fill-paper",
+				height: 6,
+				style: i(r + 3, "series"),
+				width: v - 2,
+				x: _ + 1,
+				y: Math.round(u(t.median)) - 3
+			}) : null,
+			/* @__PURE__ */ C("rect", {
+				className: `grow-x ${e.hero ? "fill-hero" : "fill-l2"}`,
+				height: 2,
+				style: i(r + 3, "series"),
+				width: Math.max(2, v - 12),
+				x: _ + 6,
+				y: Math.round(u(t.median)) - 1
+			}),
+			(t.outliers ?? []).map((e, t) => /* @__PURE__ */ C(l, {
+				className: "pop stroke-l3",
+				cx: c(f),
+				cy: u(e),
+				size: "sm",
+				style: i(r * 3 + t + 6, "mark")
+			}, e)),
+			/* @__PURE__ */ C(m, {
+				anchor: n.narrow ? "middle" : "start",
+				middle: !0,
+				order: r + 3,
+				tier: "series",
+				voice: "value",
+				x: n.narrow ? f : f + s / 2 + 10,
+				y: n.narrow ? n.floor + 38 : u(t.median),
+				children: e.format(t.median)
+			}),
+			/* @__PURE__ */ C(m, {
+				anchor: "middle",
+				muted: !0,
+				voice: "label",
+				x: f,
+				y: n.floor + 22,
+				children: t.label
+			})
+		]
+	});
+}, k = (e, t) => {
+	let n = e.outliers?.length ?? 0, r = n > 0 ? ` · ${n} outlier${n > 1 ? "s" : ""}` : "";
+	return `median ${t(e.median)} · middle half ${t(e.q1)}–${t(e.q3)}${r}`;
+}, A = (i) => {
+	let a = i.data ?? b, o = i.height ?? 400, c = i.format ?? String, l = e(), d = _("box"), [f] = a.toSorted((e, t) => i.darkest === "high" ? t.median - e.median : e.median - t.median), m = a.map((e) => `${e.label}: ${k(e, c)}`).join("; ");
+	return /* @__PURE__ */ C(t, {
+		overlay: l.at === null ? null : /* @__PURE__ */ C(n, {
+			x: l.at.x,
+			y: l.at.y,
+			children: /* @__PURE__ */ C(s, {
+				facts: [k(a[l.at.key], c)],
+				lead: a[l.at.key].label
+			})
+		}),
+		children: (e) => {
+			let t = T(e, o, a, r(i) !== void 0, c, i.ticks);
+			return /* @__PURE__ */ w(p, {
+				height: o,
+				label: m,
+				leave: l.clear,
+				width: e,
+				children: [
+					/* @__PURE__ */ w("defs", { children: [/* @__PURE__ */ C(y, {
+						id: d("hatch"),
+						tone: "fill-l4"
+					}), /* @__PURE__ */ C(v, {
+						id: d("cross"),
+						tone: "fill-hero"
+					})] }),
+					/* @__PURE__ */ C(E, {
+						format: c,
+						layout: t,
+						ticks: t.ticks
+					}),
+					a.map((e, n) => /* @__PURE__ */ C(O, {
+						datum: e,
+						dim: l.dim(n),
+						hero: e === f,
+						textures: d,
+						format: c,
+						index: n,
+						layout: t,
+						onHover: l.showAt(n)
+					}, e.label)),
+					/* @__PURE__ */ C(u, {
+						height: o,
+						text: r(i),
+						width: e
+					})
+				]
+			});
+		}
+	});
+};
+//#endregion
+export { A as TickBox };

package/lib/charts/basics/tick-donut.data.js

@@ -0,0 +1,30 @@
+"use client";
+//#region src/charts/basics/tick-donut.data.ts
+var e = [
+	{
+		label: "Wholesale",
+		value: 720
+	},
+	{
+		label: "Networks",
+		value: 396
+	},
+	{
+		label: "Operating",
+		value: 270
+	},
+	{
+		label: "Policy",
+		value: 215
+	},
+	{
+		label: "VAT",
+		value: 84
+	},
+	{
+		label: "Other",
+		value: 70
+	}
+];
+//#endregion
+export { e as tickDonutDemo };