@typlog/ui 0.14.0 → 0.15.0

package/charts.js

@@ -0,0 +1,382 @@
+import { r as useForwardPropsWithout, t as buildPropsClass } from "./util-lkbchXvM.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, guardReactiveProps, h, mergeProps, normalizeClass, normalizeProps, normalizeStyle, onMounted, onUnmounted, openBlock, ref, render, renderList, renderSlot, toDisplayString, toRef, unref, useId, watch, withCtx } from "vue";
+import { Primitive, createContext } from "reka-ui";
+import { Icon, buildIcon, getIcon, loadIcons } from "@iconify/vue";
+import { VisCrosshair, VisTooltip } from "@unovis/vue";
+import { Donut, GroupedBar, StackedBar } from "@unovis/ts";
+//#region src/charts/context.ts
+var [injectChartContext, provideChartContext] = createContext("ui:Chart");
+var defaultChartColors = [
+	"var(--accent-9)",
+	"var(--blue-9)",
+	"var(--ruby-9)",
+	"var(--green-9)",
+	"var(--amber-9)",
+	"var(--cyan-9)"
+];
+//#endregion
+//#region src/charts/util.ts
+function getChartEntries(config) {
+	return Object.entries(config).filter((entry) => entry[1].role !== "x").map(([key, series], index) => ({
+		key,
+		series,
+		index
+	}));
+}
+function getChartColors(config) {
+	return getChartEntries(config).map(({ series, index }) => series.color ?? defaultChartColors[index % defaultChartColors.length]);
+}
+//#endregion
+//#region src/charts/ChartRoot.vue
+var ChartRoot_default = /* @__PURE__ */ defineComponent({
+	__name: "ChartRoot",
+	props: {
+		config: {},
+		asChild: { type: Boolean },
+		as: { default: "div" }
+	},
+	setup(__props) {
+		const props = __props;
+		const forwarded = useForwardPropsWithout(props, ["config"]);
+		const config = toRef(props, "config");
+		const mounted = ref(false);
+		onMounted(() => {
+			mounted.value = true;
+		});
+		const series = computed(() => getChartEntries(config.value));
+		const colors = computed(() => getChartColors(config.value));
+		const chartStyle = computed(() => {
+			const style = {};
+			defaultChartColors.forEach((color, index) => {
+				style[`--chart-${index + 1}`] = color;
+			});
+			colors.value.forEach((color, index) => {
+				style[`--chart-${index + 1}`] = color;
+				style[`--vis-color${index}`] = color;
+			});
+			return style;
+		});
+		provideChartContext({
+			config,
+			series,
+			colors,
+			mounted
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(Primitive), mergeProps(unref(forwarded), {
+				class: "ui-ChartRoot",
+				style: chartStyle.value
+			}), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default", { mounted: mounted.value })]),
+				_: 3
+			}, 16, ["style"]);
+		};
+	}
+});
+//#endregion
+//#region src/charts/ChartTooltipContent.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1$1 = { class: "ui-ChartTooltipContent" };
+var _hoisted_2 = {
+	key: 0,
+	class: "ui-ChartTooltipLabel"
+};
+var _hoisted_3 = { class: "ui-ChartTooltipItems" };
+var _hoisted_4 = ["innerHTML"];
+var _hoisted_5 = { class: "ui-ChartTooltipSeries" };
+var _hoisted_6 = { class: "ui-ChartTooltipSeriesLabel" };
+var _hoisted_7 = { class: "ui-ChartTooltipValue" };
+//#endregion
+//#region src/charts/ChartTooltipContent.vue
+var ChartTooltipContent_default = /* @__PURE__ */ defineComponent({
+	__name: "ChartTooltipContent",
+	props: {
+		payload: { default: () => ({}) },
+		config: { default: () => ({}) },
+		x: {},
+		indicator: { default: "dot" },
+		hideLabel: { type: Boolean },
+		hideIndicator: { type: Boolean },
+		labelKey: {},
+		labelFormatter: {},
+		valueFormatter: {}
+	},
+	setup(__props) {
+		const props = __props;
+		const items = computed(() => Object.entries(props.payload).map(([key, value]) => ({
+			key,
+			value,
+			series: props.config[key]
+		})).filter((item) => Boolean(item.series) && item.series.role !== "x").map((item, index) => ({
+			...item,
+			index,
+			icon: buildSeriesIcon(item.series.icon)
+		})));
+		function buildSeriesIcon(name) {
+			const icon = name ? getIcon(name) : void 0;
+			return icon ? buildIcon(icon) : void 0;
+		}
+		const label = computed(() => {
+			if (props.hideLabel) return void 0;
+			const xKey = Object.entries(props.config).find(([_key, series]) => series.role === "x")?.[0];
+			const value = props.labelKey ? props.config[props.labelKey]?.label ?? props.payload[props.labelKey] ?? props.x : xKey ? props.payload[xKey] ?? props.x : props.x;
+			if (value === void 0 || value === null) return void 0;
+			const labelValue = typeof value === "string" || typeof value === "number" || value instanceof Date ? value : String(value);
+			return props.labelFormatter ? props.labelFormatter(labelValue) : String(labelValue);
+		});
+		function formatValue(value, key) {
+			if (props.valueFormatter) return props.valueFormatter(value, key);
+			if (typeof value === "number") return value.toLocaleString();
+			return String(value ?? "—");
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", _hoisted_1$1, [renderSlot(_ctx.$slots, "default", {
+				items: items.value,
+				label: label.value
+			}, () => [label.value ? (openBlock(), createElementBlock("div", _hoisted_2, toDisplayString(label.value), 1)) : createCommentVNode("", true), createElementVNode("div", _hoisted_3, [(openBlock(true), createElementBlock(Fragment, null, renderList(items.value, (item) => {
+				return openBlock(), createElementBlock("div", {
+					key: item.key,
+					class: "ui-ChartTooltipItem"
+				}, [
+					item.icon ? (openBlock(), createElementBlock("svg", mergeProps({
+						key: 0,
+						ref_for: true
+					}, item.icon.attributes, {
+						class: "ui-ChartTooltipIcon",
+						"aria-hidden": "true",
+						focusable: "false",
+						innerHTML: item.icon.body
+					}), null, 16, _hoisted_4)) : !props.hideIndicator && props.indicator !== "none" ? (openBlock(), createElementBlock("span", {
+						key: 1,
+						class: normalizeClass(["ui-ChartTooltipIndicator", `r-indicator-${props.indicator}`]),
+						style: normalizeStyle({ "--chart-tooltip-color": item.series.color ?? `var(--chart-${item.index + 1})` })
+					}, null, 6)) : createCommentVNode("", true),
+					createElementVNode("span", _hoisted_5, [createElementVNode("span", _hoisted_6, toDisplayString(item.series.label), 1)]),
+					createElementVNode("span", _hoisted_7, toDisplayString(formatValue(item.value, item.key)), 1)
+				]);
+			}), 128))])])]);
+		};
+	}
+});
+//#endregion
+//#region src/charts/tooltip.ts
+/** Creates a synchronous Unovis template callback from a Vue tooltip component. */
+function createChartTooltipTemplate(config, component, props = {}) {
+	return (rawPayload, x) => {
+		if (typeof document === "undefined") return "";
+		const payload = unwrapPayload(rawPayload, config);
+		const container = document.createElement("div");
+		const vnode = h(component, {
+			...props,
+			payload,
+			config,
+			x
+		});
+		render(vnode, container);
+		const html = container.innerHTML;
+		render(null, container);
+		return html;
+	};
+}
+function unwrapPayload(payload, config) {
+	if (isRecord(payload) && isRecord(payload.data)) return unwrapPayload(payload.data, config);
+	if (!isRecord(payload)) return {};
+	const configured = Object.keys(config).filter((key) => key in payload);
+	if (configured.length) return Object.fromEntries(configured.map((key) => [key, payload[key]]));
+	return payload;
+}
+function isRecord(value) {
+	return typeof value === "object" && value !== null;
+}
+//#endregion
+//#region src/charts/ChartCrosshair.vue
+var ChartCrosshair_default = /* @__PURE__ */ defineComponent({
+	__name: "ChartCrosshair",
+	props: {
+		contentComponent: { default: ChartTooltipContent_default },
+		contentProps: { default: () => ({}) }
+	},
+	setup(__props) {
+		const props = __props;
+		const context = injectChartContext();
+		const forwarded = useForwardPropsWithout(props, [
+			"contentComponent",
+			"contentProps",
+			"template"
+		]);
+		const icons = computed(() => context.series.value.flatMap((entry) => entry.series.icon ? [entry.series.icon] : []));
+		let cancelIconLoad;
+		watch(icons, (value) => {
+			cancelIconLoad?.();
+			cancelIconLoad = value.length ? loadIcons(value) : void 0;
+		}, { immediate: true });
+		onUnmounted(() => cancelIconLoad?.());
+		const color = computed(() => {
+			return context.series.value.map((d) => `var(--chart-${d.index + 1})`);
+		});
+		const template = computed(() => createChartTooltipTemplate(context.config.value, props.contentComponent, props.contentProps));
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(VisCrosshair), normalizeProps(guardReactiveProps({
+				...unref(forwarded),
+				color: color.value,
+				template: template.value
+			})), null, 16);
+		};
+	}
+});
+//#endregion
+//#region src/charts/ChartTooltip.vue
+var ChartTooltip_default = /* @__PURE__ */ defineComponent({
+	__name: "ChartTooltip",
+	props: {
+		targets: {},
+		contentComponent: { default: ChartTooltipContent_default },
+		contentProps: { default: () => ({}) }
+	},
+	setup(__props) {
+		const props = __props;
+		const context = injectChartContext();
+		const forwarded = useForwardPropsWithout(props, [
+			"targets",
+			"contentComponent",
+			"contentProps",
+			"triggers"
+		]);
+		const tooltipClass = computed(() => ["ui-ChartTooltip", props.className].filter(Boolean).join(" "));
+		const template = computed(() => createChartTooltipTemplate(context.config.value, props.contentComponent, props.contentProps));
+		const generatedTriggers = computed(() => {
+			const triggers = {};
+			for (const target of props.targets ?? []) {
+				const { primitive, payload } = typeof target === "function" ? { primitive: target } : target;
+				if (primitive === Donut) triggers[Donut.selectors.segment] = (arc, index) => {
+					const mapped = payload ? payload(arc, index) : donutPayload(arc, index);
+					return template.value(mapped);
+				};
+				if (primitive === GroupedBar) triggers[GroupedBar.selectors.bar] = (datum, index) => {
+					const mapped = payload ? payload(datum, index) : datum;
+					return template.value(mapped);
+				};
+				if (primitive === StackedBar) triggers[StackedBar.selectors.bar] = (datum, index) => {
+					const mapped = payload ? payload(datum, index) : unwrapStackedDatum(datum);
+					return template.value(mapped);
+				};
+			}
+			return triggers;
+		});
+		const triggers = computed(() => ({
+			...generatedTriggers.value,
+			...props.triggers
+		}));
+		function donutPayload(value, callbackIndex) {
+			if (!isRecord(value)) return {};
+			const arcIndex = typeof value.index === "number" ? value.index : callbackIndex;
+			const entry = context.series.value[arcIndex];
+			if (!entry) return {};
+			return { [entry.key]: value.value };
+		}
+		function unwrapStackedDatum(value) {
+			if (!isRecord(value) || !isRecord(value.datum)) return value;
+			return {
+				...value,
+				...value.datum
+			};
+		}
+		function isRecord(value) {
+			return typeof value === "object" && value !== null;
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(VisTooltip), mergeProps({
+				...unref(forwarded),
+				triggers: triggers.value
+			}, { "class-name": tooltipClass.value }), null, 16, ["class-name"]);
+		};
+	}
+});
+//#endregion
+//#region src/charts/ChartAreaGradient.vue
+var ChartAreaGradient_default = /* @__PURE__ */ defineComponent({
+	__name: "ChartAreaGradient",
+	setup(__props) {
+		const context = injectChartContext();
+		const instanceId = useId();
+		const gradients = computed(() => {
+			return context.series.value.map((d) => {
+				return {
+					id: `ui-chart-area-${instanceId}-${d.index + 1}`,
+					color: `var(--chart-${d.index + 1})`
+				};
+			});
+		});
+		const svgDefs = computed(() => gradients.value.map((item) => `
+  <linearGradient id="${item.id}" x1="0" y1="0" x2="0" y2="1">
+    <stop offset="5%" stop-color="${item.color}" stop-opacity="0.8" />
+    <stop offset="95%" stop-color="${item.color}" stop-opacity="0.1" />
+  </linearGradient>
+`).join(""));
+		const areaColor = (_data, index) => {
+			const gradient = gradients.value[index];
+			return gradient ? `url(#${gradient.id})` : "none";
+		};
+		return (_ctx, _cache) => {
+			return renderSlot(_ctx.$slots, "default", {
+				color: areaColor,
+				svgDefs: svgDefs.value
+			});
+		};
+	}
+});
+//#endregion
+//#region src/charts/ChartLegend.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "ui-ChartLegendLabel" };
+//#endregion
+//#region src/charts/ChartLegend.vue
+var ChartLegend_default = /* @__PURE__ */ defineComponent({
+	__name: "ChartLegend",
+	props: {
+		orientation: { default: "horizontal" },
+		align: { default: "start" },
+		ariaLabel: { default: "Chart legend" },
+		asChild: { type: Boolean },
+		as: { default: "div" }
+	},
+	setup(__props) {
+		const props = __props;
+		const forwarded = useForwardPropsWithout(props, [
+			"orientation",
+			"align",
+			"ariaLabel"
+		]);
+		const resetClass = buildPropsClass(props, ["orientation", "align"]);
+		const context = injectChartContext();
+		const entries = computed(() => context.series.value);
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(Primitive), mergeProps(unref(forwarded), {
+				class: ["ui-ChartLegend", unref(resetClass)],
+				role: "list",
+				"aria-label": props.ariaLabel
+			}), {
+				default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(entries.value, (entry) => {
+					return openBlock(), createElementBlock("div", {
+						key: entry.key,
+						class: "ui-ChartLegendItem",
+						role: "listitem"
+					}, [renderSlot(_ctx.$slots, "item", mergeProps({ ref_for: true }, entry), () => [
+						renderSlot(_ctx.$slots, "marker", mergeProps({ ref_for: true }, entry), () => [createElementVNode("span", {
+							class: "ui-ChartLegendMarker",
+							style: normalizeStyle({ backgroundColor: unref(context).colors.value[entry.index] })
+						}, null, 4)]),
+						entry.series.icon ? (openBlock(), createBlock(unref(Icon), {
+							key: 0,
+							icon: entry.series.icon,
+							class: "ui-ChartLegendIcon",
+							"aria-hidden": "true"
+						}, null, 8, ["icon"])) : createCommentVNode("", true),
+						createElementVNode("span", _hoisted_1, toDisplayString(entry.series.label), 1)
+					])]);
+				}), 128))]),
+				_: 3
+			}, 16, ["class", "aria-label"]);
+		};
+	}
+});
+//#endregion
+export { ChartAreaGradient_default as ChartAreaGradient, ChartCrosshair_default as ChartCrosshair, ChartLegend_default as ChartLegend, ChartRoot_default as ChartRoot, ChartTooltip_default as ChartTooltip, ChartTooltipContent_default as ChartTooltipContent, createChartTooltipTemplate };