iryx-ui 0.15.0 → 0.16.0

package/dist/components/DonutChart.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,234 @@
+import { useIryxUiConfig as e } from "../config.js";
+import { useElementSize as t } from "../composables/element-size.js";
+import { clampTooltip as n, seriesColor as r, slotOf as i, warnOnSlotOverflow as a } from "../composables/cartesian.js";
+import { useChartAnimation as o, useChartProgress as s } from "../composables/chart-reveal.js";
+import c from "./ChartLegend.js";
+import { donutChartTheme as l } from "../theme/donut-chart.js";
+import { Fragment as u, computed as d, createBlock as f, createCommentVNode as p, createElementBlock as m, createElementVNode as h, defineComponent as g, normalizeClass as _, normalizeStyle as v, openBlock as y, ref as b, renderList as x, renderSlot as ee, toDisplayString as S, unref as C } from "vue";
+//#region src/components/DonutChart.vue?vue&type=script&setup=true&lang.ts
+var te = ["role", "aria-label"], w = [
+	"width",
+	"height",
+	"viewBox"
+], ne = [
+	"cx",
+	"cy",
+	"r",
+	"fill",
+	"stroke",
+	"stroke-width"
+], re = ["d", "onPointerenter"], ie = { scope: "row" }, T = /*@__PURE__*/ g({
+	__name: "DonutChart",
+	props: {
+		data: { default: () => [] },
+		size: { default: 240 },
+		thickness: {},
+		pie: { type: Boolean },
+		gap: { default: 2 },
+		animate: {
+			type: [Boolean, Object],
+			default: !0
+		},
+		legend: {
+			type: Boolean,
+			default: !0
+		},
+		locale: {},
+		format: {},
+		label: {},
+		unstyled: {
+			type: Boolean,
+			default: void 0
+		},
+		class: {},
+		ui: {}
+	},
+	setup(g) {
+		let T = g, ae = e(), E = d(() => T.unstyled ?? ae.unstyled), D = b(), { width: O } = t(D), oe = d(() => new Intl.NumberFormat(T.locale, T.format));
+		function k(e) {
+			return oe.value.format(e);
+		}
+		let A = d(() => new Intl.NumberFormat(T.locale, {
+			style: "percent",
+			maximumFractionDigits: 1
+		})), j = !1;
+		function M() {
+			j || process.env.NODE_ENV === "production" || (j = !0, console.warn("[iryx-ui] IDonutChart dropped a negative value. A share of a whole cannot be negative — plot the magnitudes, or use IBarChart, which has a baseline."));
+		}
+		let N = d(() => {
+			let e = T.data.map((e, t) => ({
+				datum: e,
+				index: t
+			})).filter(({ datum: e }) => {
+				let t = e.value;
+				return typeof t != "number" || !Number.isFinite(t) || t === 0 ? !1 : t < 0 ? (M(), !1) : !0;
+			});
+			a(e.length);
+			let t = e.reduce((e, { datum: t }) => e + t.value, 0);
+			return e.map(({ datum: e, index: n }) => ({
+				label: e.label,
+				value: e.value,
+				share: t ? e.value / t : 0,
+				color: r(i(e, n)),
+				index: n
+			}));
+		}), P = d(() => N.value.reduce((e, t) => e + t.value, 0)), F = d(() => N.value.map((e) => ({
+			key: `${e.index}-${e.label}`,
+			name: e.label,
+			slot: T.data[e.index]?.slot ?? e.index
+		}))), I = d(() => T.legend && N.value.length > 0), L = d(() => ({
+			x: O.value / 2,
+			y: T.size / 2
+		})), R = d(() => Math.max(Math.min(O.value, T.size) / 2, 0)), z = d(() => {
+			if (T.pie) return 0;
+			let e = Math.min(T.thickness ?? R.value * .4, R.value);
+			return Math.max(R.value - e, 0);
+		}), B = -Math.PI / 2, V = d(() => Math.max(T.gap, 0) / 2);
+		function H(e) {
+			return Math.round(e * 100) / 100;
+		}
+		function U(e, t) {
+			return [H(L.value.x + e * Math.cos(t)), H(L.value.y + e * Math.sin(t))];
+		}
+		let W = d(() => !!(O.value && R.value && N.value.length)), { progress: G } = s(W, o(d(() => T.animate))), K = d(() => {
+			if (!W.value) return [];
+			let e = G.value, t = B;
+			return N.value.flatMap((n) => {
+				let r = n.share * Math.PI * 2, i = t;
+				t += r;
+				let a = B + (i - B) * e, o = r * e;
+				return o <= 0 ? [] : [{
+					...n,
+					mid: i + r / 2,
+					path: se(a, a + o)
+				}];
+			});
+		});
+		function q(e, t) {
+			let n = V.value;
+			return !n || e <= n ? 0 : Math.min(Math.asin(n / e), t / 3);
+		}
+		function se(e, t) {
+			let n = t - e, r = !z.value, i = N.value.length < 2 ? 0 : q(R.value, n), a = e + i, o = t - i, s = +(o - a > Math.PI), [c, l] = U(R.value, a), [u, d] = U(R.value, o);
+			if (r) {
+				let [t, r] = U(i ? Math.min(V.value / Math.sin(n / 2), R.value / 2) : 0, e + n / 2);
+				return `M${c} ${l} A${H(R.value)} ${H(R.value)} 0 ${s} 1 ${u} ${d} L${t} ${r} Z`;
+			}
+			let f = i ? q(z.value, n) : 0, p = +(n - f * 2 > Math.PI), [m, h] = U(z.value, t - f), [g, _] = U(z.value, e + f);
+			return `M${c} ${l} A${H(R.value)} ${H(R.value)} 0 ${s} 1 ${u} ${d} L${m} ${h} A${H(z.value)} ${H(z.value)} 0 ${p} 0 ${g} ${_} Z`;
+		}
+		let J = d(() => {
+			if (!(K.value.length !== 1 || !R.value || G.value < 1)) return {
+				...K.value[0],
+				radius: z.value ? (R.value + z.value) / 2 : R.value,
+				strokeWidth: R.value - z.value
+			};
+		}), ce = d(() => J.value ? [] : K.value), Y = b(), X = d(() => {
+			if (Y.value == null) return;
+			let e = K.value.find((e) => e.index === Y.value);
+			if (!e) return;
+			let t = k(e.value), r = A.value.format(e.share), [i, a] = U(z.value ? (R.value + z.value) / 2 : R.value / 2, e.mid);
+			return {
+				label: e.label,
+				value: t,
+				share: r,
+				x: n(i, `${e.label}${t}${r}`, O.value),
+				y: a
+			};
+		}), Z = d(() => l());
+		function Q(e, t) {
+			let n = T.ui?.[e];
+			return E.value ? [n, t] : Z.value[e]({ class: [n, t] });
+		}
+		function $(e) {
+			let t = Y.value != null && Y.value !== e;
+			return E.value ? [T.ui?.slice] : Z.value.slice({ class: [T.ui?.slice, t ? Z.value.faded() : void 0] });
+		}
+		return (e, t) => (y(), m("div", {
+			ref_key: "root",
+			ref: D,
+			role: T.label ? "figure" : void 0,
+			"aria-label": T.label,
+			class: _(Q("root", T.class))
+		}, [
+			I.value ? (y(), f(c, {
+				key: 0,
+				series: F.value,
+				active: Y.value == null ? void 0 : N.value.findIndex((e) => e.index === Y.value),
+				unstyled: T.unstyled
+			}, null, 8, [
+				"series",
+				"active",
+				"unstyled"
+			])) : p("", !0),
+			h("div", { class: _(E.value ? void 0 : Z.value.plot()) }, [
+				(y(), m("svg", {
+					width: C(O),
+					height: T.size,
+					viewBox: `0 0 ${C(O)} ${T.size}`,
+					"aria-hidden": "true",
+					class: _(Q("svg"))
+				}, [J.value ? (y(), m("circle", {
+					key: 0,
+					cx: L.value.x,
+					cy: L.value.y,
+					r: J.value.radius,
+					fill: z.value ? "none" : J.value.color,
+					stroke: z.value ? J.value.color : "none",
+					"stroke-width": z.value ? J.value.strokeWidth : 0,
+					class: _($(J.value.index)),
+					onPointerenter: t[0] ||= (e) => Y.value = J.value.index,
+					onPointerleave: t[1] ||= (e) => Y.value = void 0
+				}, null, 42, ne)) : p("", !0), (y(!0), m(u, null, x(ce.value, (e) => (y(), m("path", {
+					key: `slice-${e.index}`,
+					d: e.path,
+					style: v({ fill: e.color }),
+					class: _($(e.index)),
+					onPointerenter: (t) => Y.value = e.index,
+					onPointerleave: t[2] ||= (e) => Y.value = void 0
+				}, null, 46, re))), 128))], 10, w)),
+				e.$slots.center && z.value ? (y(), m("div", {
+					key: 0,
+					class: _(Q("center")),
+					style: v({
+						left: `${L.value.x}px`,
+						top: `${L.value.y}px`,
+						width: `${z.value * 2 * .82}px`,
+						transform: "translate(-50%, -50%)"
+					})
+				}, [ee(e.$slots, "center", {
+					total: P.value,
+					formatted: k(P.value)
+				})], 6)) : p("", !0),
+				X.value ? (y(), m("div", {
+					key: 1,
+					class: _(Q("tooltip")),
+					style: v({
+						left: `${X.value.x}px`,
+						top: `${X.value.y}px`,
+						transform: "translate(-50%, -50%)"
+					})
+				}, [
+					h("span", { class: _(Q("tooltipLabel")) }, S(X.value.label), 3),
+					h("span", { class: _(Q("tooltipValue")) }, S(X.value.value), 3),
+					h("span", { class: _(Q("tooltipShare")) }, S(X.value.share), 3)
+				], 6)) : p("", !0)
+			], 2),
+			h("div", { class: _(Q("table")) }, [h("table", null, [
+				h("caption", null, S(T.label), 1),
+				t[3] ||= h("thead", null, [h("tr", null, [
+					h("th", { scope: "col" }, " Category "),
+					h("th", { scope: "col" }, " Value "),
+					h("th", { scope: "col" }, " Share ")
+				])], -1),
+				h("tbody", null, [(y(!0), m(u, null, x(N.value, (e) => (y(), m("tr", { key: `row-${e.index}` }, [
+					h("th", ie, S(e.label), 1),
+					h("td", null, S(k(e.value)), 1),
+					h("td", null, S(A.value.format(e.share)), 1)
+				]))), 128))])
+			])], 2)
+		], 10, te));
+	}
+});
+//#endregion
+export { T as default };

package/dist/components/LineChart.vue.d.ts

@@ -1,4 +1,5 @@
 import type { ChartSeries } from '../composables/cartesian';
+import type { ChartAnimate } from '../composables/chart-reveal';
 import type { SparseValue } from '../composables/scale';
 /**
  * A row. `value` is the single-series shortcut; with `series` set, each entry
@@ -39,6 +40,12 @@ export interface LineChartProps {
     ticks?: number;
     /** Drop the value axis and its gridlines. */
     axis?: boolean;
+    /**
+     * Draw the line on across the plot on the first paint. Skipped for a reader
+     * who has asked for reduced motion, and played once — not again when the
+     * data changes underneath it.
+     */
+    animate?: ChartAnimate;
     /** Drop the legend. Only honoured for a single series. */
     legend?: boolean;
     /**
@@ -101,6 +108,7 @@ declare const __VLS_base: import("vue").DefineComponent<LineChartProps, {}, {},
     unstyled: boolean;
     data: readonly LineChartDatum[];
     legend: boolean;
+    animate: ChartAnimate;
     flush: boolean;
     height: number;
     ticks: number;