@thewhatmatters/wmds 0.2.0

package/dist/components/organisms/Chart/ChartCartesian.js

@@ -0,0 +1,479 @@
+"use client";
+import { cn as e } from "../../../lib/cn.js";
+import { Badge as t } from "../../atoms/Badge/Badge.js";
+import { chartAreaPresets as n, chartCartesianMargins as r, chartFormatAxisDateLabel as i, chartFormatAxisValue as a, chartFormatTooltipLabel as o, chartTooltipItemsFromConfig as s, chartUiTokens as c } from "../../../lib/chartTheme.js";
+import { chartCartesianAxisTickLabelClasses as l, chartCartesianHostClasses as u, chartCartesianNoDataOverlayClasses as d, chartCartesianNoDataPillSlotClasses as f, chartCartesianSvgClasses as p, chartTooltipActiveDotClasses as m, chartTooltipAnchorAboveLeftClasses as h, chartTooltipAnchorAboveRightClasses as g, chartTooltipAnchorBelowLeftClasses as _, chartTooltipAnchorBelowRightClasses as v, chartTooltipCrosshairLineClasses as y, chartTooltipPortalClasses as b } from "./chartStyles.js";
+import { ChartTooltipContent as x } from "./ChartTooltipContent.js";
+import { ChartCartesianProvider as S, useChartCartesian as C } from "./chartCartesianContext.js";
+import { chartCartesianDefinedSegments as w, chartCartesianGapBands as T, chartCartesianGapRuns as E, chartCartesianHasPlottableValues as D, chartCartesianNoDataLabelDefault as O, isChartCartesianNumber as k, isChartCartesianSeriesDefined as A, resolveChartCartesianGapKeys as j, resolveChartCartesianNoData as M } from "./chartCartesianGaps.js";
+import { chartCartesianAreaEnterTransition as N, chartCartesianEnterTransition as P, chartCartesianEnterVariants as F, chartCartesianLineEnterTransition as ee } from "./chartCartesianMotion.js";
+import { useCallback as te, useId as I, useMemo as L, useRef as ne } from "react";
+import { Fragment as R, jsx as z, jsxs as B } from "react/jsx-runtime";
+import { motion as V, useReducedMotion as H } from "motion/react";
+import { Group as U } from "@visx/group";
+import { ParentSize as re } from "@visx/responsive";
+import { useTooltip as ie, useTooltipInPortal as ae } from "@visx/tooltip";
+import { AxisBottom as oe, AxisLeft as se } from "@visx/axis";
+import { scaleLinear as ce, scaleTime as le } from "@visx/scale";
+import { AreaClosed as W, LinePath as ue } from "@visx/shape";
+import { curveMonotoneX as G } from "@visx/curve";
+import { localPoint as de } from "@visx/event";
+import { GridColumns as fe, GridRows as pe } from "@visx/grid";
+import { LinearGradient as me } from "@visx/gradient";
+import { line as he } from "@visx/vendor/d3-shape";
+//#region src/components/organisms/Chart/ChartCartesian.tsx
+function ge(e, t) {
+	let n = e[t];
+	return k(n) ? n : NaN;
+}
+function _e(e, t, n) {
+	let r = 0;
+	for (let i of e) for (let e of t) {
+		let t = n(i, e);
+		Number.isFinite(t) && (r = Math.max(r, t));
+	}
+	return r <= 0 ? 1 : r * 1.08;
+}
+function ve({ width: e, height: t, data: n, config: i, seriesKeys: a, variant: o, periodKind: s, xAccessor: c, yAccessor: l, noData: u, "aria-label": d, animateEnter: f, verticalGrid: m, yTickFormat: h, children: g, TooltipInPortal: _ }) {
+	let v = a ?? Object.keys(i), y = r[o ?? "hero"], b = Math.max(0, e - y.left - y.right), x = Math.max(0, t - y.top - y.bottom), C = M(u), w = j({
+		mode: C.mode,
+		seriesKeys: v,
+		configKeys: Object.keys(i)
+	}), E = L(() => le({
+		domain: n.length > 0 ? [c(n[0]), c(n[n.length - 1])] : [/* @__PURE__ */ new Date(), /* @__PURE__ */ new Date()],
+		range: [0, b]
+	}), [
+		n,
+		b,
+		c
+	]), D = L(() => ce({
+		domain: [0, _e(n, v, l)],
+		range: [x, 0],
+		nice: !0
+	}), [
+		n,
+		x,
+		v,
+		l
+	]), O = L(() => C.enabled ? T({
+		data: n,
+		keys: w,
+		xAccessor: c,
+		xScale: (e) => E(e),
+		innerWidth: b,
+		yAccessor: l,
+		ranges: C.ranges
+	}) : [], [
+		n,
+		w,
+		b,
+		C.enabled,
+		C.ranges,
+		c,
+		E,
+		l
+	]), k = L(() => ({
+		data: n,
+		config: i,
+		seriesKeys: v,
+		variant: o ?? "hero",
+		periodKind: s,
+		width: e,
+		height: t,
+		margin: y,
+		innerWidth: b,
+		innerHeight: x,
+		xScale: E,
+		yScale: D,
+		xAccessor: c,
+		yAccessor: l,
+		TooltipInPortal: _,
+		animateEnter: f,
+		verticalGrid: m,
+		yTickFormat: h,
+		noDataLabel: C.label,
+		gapBands: O
+	}), [
+		_,
+		f,
+		m,
+		h,
+		i,
+		n,
+		O,
+		t,
+		x,
+		b,
+		v,
+		y,
+		C.label,
+		s,
+		o,
+		e,
+		c,
+		l,
+		E,
+		D
+	]);
+	return b <= 0 || x <= 0 || n.length === 0 ? null : /* @__PURE__ */ B(S, {
+		value: k,
+		children: [/* @__PURE__ */ z(V.svg, {
+			width: e,
+			height: t,
+			className: p,
+			role: "img",
+			"aria-label": d,
+			variants: F,
+			initial: f ? "hidden" : !1,
+			animate: "visible",
+			transition: P,
+			children: /* @__PURE__ */ z(U, {
+				left: y.left,
+				top: y.top,
+				children: g ?? /* @__PURE__ */ B(R, { children: [
+					/* @__PURE__ */ z(q, {}),
+					/* @__PURE__ */ z(Z, {}),
+					/* @__PURE__ */ z(Q, {}),
+					/* @__PURE__ */ z(Y, {}),
+					/* @__PURE__ */ z(J, {}),
+					/* @__PURE__ */ z($, {})
+				] })
+			})
+		}), /* @__PURE__ */ z(Se, {})]
+	});
+}
+function K({ data: t, config: n, seriesKeys: r, variant: i = "hero", minHeight: a = 240, periodKind: o, xAccessor: s = (e) => e.date, yAccessor: c = ge, noData: l, animate: d = "initial", verticalGrid: f = !0, yTickFormat: p, className: m, children: h, "aria-label": g = "Time series chart" }) {
+	let { containerRef: _, TooltipInPortal: v } = ae({
+		scroll: !0,
+		detectBounds: !1
+	}), y = H(), b = d === "initial" && !y;
+	return /* @__PURE__ */ z("div", {
+		ref: _,
+		className: e(u, m),
+		style: {
+			minHeight: a,
+			height: a
+		},
+		children: /* @__PURE__ */ z(re, { children: ({ width: e, height: a }) => e > 0 && a > 0 ? /* @__PURE__ */ z(ve, {
+			width: e,
+			height: a,
+			data: t,
+			config: n,
+			seriesKeys: r,
+			variant: i,
+			periodKind: o,
+			xAccessor: s,
+			yAccessor: c,
+			noData: l,
+			"aria-label": g,
+			animateEnter: b,
+			verticalGrid: f,
+			yTickFormat: p,
+			TooltipInPortal: v,
+			children: h
+		}) : null })
+	});
+}
+var ye = 6, be = {
+	stroke: c.grid,
+	strokeOpacity: .4,
+	strokeWidth: 1,
+	pointerEvents: "none"
+}, xe = {
+	...be,
+	strokeDasharray: "2 6"
+};
+function q() {
+	let { yScale: e, innerWidth: t, innerHeight: n, verticalGrid: r, xScale: i } = C();
+	return /* @__PURE__ */ B(R, { children: [/* @__PURE__ */ z(pe, {
+		scale: e,
+		width: t,
+		...be
+	}), r ? /* @__PURE__ */ z(fe, {
+		scale: i,
+		height: n,
+		numTicks: ye,
+		...xe
+	}) : null] });
+}
+function J() {
+	let { xScale: e, innerHeight: t, periodKind: n } = C();
+	return /* @__PURE__ */ z(oe, {
+		top: t,
+		scale: e,
+		numTicks: ye,
+		stroke: c.axis,
+		tickStroke: c.axis,
+		hideTicks: !0,
+		hideAxisLine: !0,
+		tickFormat: (e) => {
+			let t = e instanceof Date ? e : new Date(e.valueOf());
+			return i(t, n);
+		},
+		tickLabelProps: (e, t, n) => ({
+			fill: c.tooltipMuted,
+			fontSize: 11,
+			textAnchor: t === 0 ? "start" : t === n.length - 1 ? "end" : "middle",
+			dy: 4,
+			className: l
+		})
+	});
+}
+function Y() {
+	let { yScale: e, yTickFormat: t } = C();
+	return /* @__PURE__ */ z(se, {
+		scale: e,
+		numTicks: 5,
+		stroke: c.axis,
+		tickStroke: c.axis,
+		hideTicks: !0,
+		hideAxisLine: !0,
+		tickFormat: (e) => {
+			let n = typeof e == "number" ? e : Number(e);
+			return (t ?? a)(n);
+		},
+		tickLabelProps: () => ({
+			fill: c.tooltipMuted,
+			fontSize: 11,
+			textAnchor: "end",
+			dx: -4,
+			dy: 3,
+			className: l
+		})
+	});
+}
+var X = 10;
+function Z() {
+	let { gapBands: e, innerHeight: t, noDataLabel: n } = C(), r = `wmds-no-data-${I().replace(/:/g, "")}`;
+	return e.length === 0 ? null : /* @__PURE__ */ B("g", {
+		pointerEvents: "none",
+		children: [/* @__PURE__ */ z("defs", { children: /* @__PURE__ */ z("pattern", {
+			id: r,
+			width: X,
+			height: X,
+			patternUnits: "userSpaceOnUse",
+			patternTransform: "rotate(-45)",
+			children: /* @__PURE__ */ z("line", {
+				x1: 1,
+				y1: 0,
+				x2: 1,
+				y2: X,
+				stroke: c.noDataStripe,
+				strokeWidth: 1
+			})
+		}) }), e.map((e) => /* @__PURE__ */ B("g", {
+			role: "img",
+			"aria-label": n,
+			children: [
+				/* @__PURE__ */ z("title", { children: n }),
+				/* @__PURE__ */ z("rect", {
+					x: e.x,
+					y: 0,
+					width: e.width,
+					height: t,
+					fill: c.noDataBand,
+					fillOpacity: .55
+				}),
+				/* @__PURE__ */ z("rect", {
+					x: e.x,
+					y: 0,
+					width: e.width,
+					height: t,
+					fill: `url(#${r})`
+				})
+			]
+		}, `${e.start.getTime()}-${e.end.getTime()}`))]
+	});
+}
+function Se() {
+	let { gapBands: e, innerHeight: n, margin: r, noDataLabel: i } = C();
+	return e.length === 0 ? null : /* @__PURE__ */ z("div", {
+		className: d,
+		children: e.map((e) => e.width >= 80 ? /* @__PURE__ */ z("div", {
+			className: f,
+			style: {
+				left: r.left + e.x,
+				top: r.top,
+				width: e.width,
+				height: n
+			},
+			children: /* @__PURE__ */ z("span", {
+				"aria-hidden": !0,
+				children: /* @__PURE__ */ z(t, {
+					variant: "neutral",
+					emphasis: "muted",
+					size: "sm",
+					children: i
+				})
+			})
+		}, `${e.start.getTime()}-${e.end.getTime()}`) : null)
+	});
+}
+function Q() {
+	let { data: e, config: t, seriesKeys: r, xScale: i, yScale: a, xAccessor: o, yAccessor: s, variant: l, animateEnter: u } = C(), d = n[l], f = I().replace(/:/g, "");
+	return /* @__PURE__ */ z(R, { children: r.map((n) => {
+		let r = t[n]?.color ?? c.axis, l = `wmds-area-${f}-${n.replace(/[^a-z0-9]/gi, "")}`, p = (e) => A(e, n, s), m = he().defined(p).x((e) => i(o(e)) ?? 0).y((e) => a(s(e, n)) ?? 0).curve(G)(e) ?? "";
+		return /* @__PURE__ */ B(U, { children: [
+			/* @__PURE__ */ z(me, {
+				id: l,
+				from: r,
+				to: r,
+				fromOpacity: d.fillOpacity,
+				toOpacity: 0,
+				vertical: !0
+			}),
+			u ? /* @__PURE__ */ z(V.g, {
+				initial: { opacity: 0 },
+				animate: { opacity: 1 },
+				transition: N,
+				children: /* @__PURE__ */ z(W, {
+					data: e,
+					defined: p,
+					x: (e) => i(o(e)) ?? 0,
+					y: (e) => a(s(e, n)) ?? 0,
+					yScale: a,
+					fill: `url(#${l})`,
+					stroke: "transparent",
+					curve: G
+				})
+			}) : /* @__PURE__ */ z(W, {
+				data: e,
+				defined: p,
+				x: (e) => i(o(e)) ?? 0,
+				y: (e) => a(s(e, n)) ?? 0,
+				yScale: a,
+				fill: `url(#${l})`,
+				stroke: "transparent",
+				curve: G
+			}),
+			u ? /* @__PURE__ */ z(V.path, {
+				d: m,
+				fill: "none",
+				stroke: r,
+				strokeWidth: d.strokeWidth,
+				initial: { pathLength: 0 },
+				animate: { pathLength: 1 },
+				transition: ee
+			}) : /* @__PURE__ */ z(ue, {
+				data: e,
+				defined: p,
+				x: (e) => i(o(e)) ?? 0,
+				y: (e) => a(s(e, n)) ?? 0,
+				stroke: r,
+				strokeWidth: d.strokeWidth,
+				curve: G
+			})
+		] }, n);
+	}) });
+}
+function Ce(e, t, n, r) {
+	if (e.length === 0) return -1;
+	let i = 0, a = Infinity;
+	for (let o = 0; o < e.length; o++) {
+		let s = r(n(e[o])) ?? 0, c = Math.abs(s - t);
+		c < a && (a = c, i = o);
+	}
+	return i;
+}
+var we = 176, Te = 8;
+function Ee(e, t, n, r) {
+	let i = t.filter((t) => A(e, t, r)), a = i.length > 0 ? i : t;
+	return Math.min(...a.map((t) => n(r(e, t))));
+}
+function De(e, t, n) {
+	return t.some((t) => A(e, t, n));
+}
+function $() {
+	let { data: t, config: n, seriesKeys: r, innerWidth: i, innerHeight: a, margin: l, width: u, xScale: d, yScale: f, xAccessor: p, yAccessor: S, periodKind: w, TooltipInPortal: T } = C(), { tooltipOpen: E, tooltipLeft: D, tooltipTop: O, tooltipData: k, showTooltip: j, hideTooltip: M } = ie(), N = ne(null), P = l.left, F = te(() => {
+		N.current = null, M();
+	}, [M]), ee = te((e) => {
+		let n = de(e);
+		if (n == null) return;
+		let i = n.x - P, a = Ce(t, i, p, d);
+		if (a < 0 || t[a] == null) return;
+		if (!De(t[a], r, S)) {
+			N.current = null, M();
+			return;
+		}
+		if (N.current === a) return;
+		N.current = a;
+		let o = t[a], s = d(p(o)) ?? 0, c = Ee(o, r, f, S);
+		j({
+			tooltipData: {
+				point: o,
+				index: a
+			},
+			tooltipLeft: l.left + s,
+			tooltipTop: l.top + c
+		});
+	}, [
+		t,
+		M,
+		l.left,
+		l.top,
+		P,
+		r,
+		j,
+		p,
+		S,
+		d,
+		f
+	]), I = k == null ? [] : s(n, Object.fromEntries(r.filter((e) => A(k.point, e, S)).map((e) => [e, S(k.point, e)])), r.filter((e) => A(k.point, e, S))), V = k == null ? null : d(p(k.point)) ?? 0, H = k == null ? null : Ee(k.point, r, f, S), U = L(() => {
+		let e = H != null && H < 56, t = V == null ? null : l.left + V, n = t != null && t + we + Te > u;
+		return e && n ? _ : e ? v : n ? h : g;
+	}, [
+		H,
+		V,
+		l.left,
+		u
+	]);
+	return /* @__PURE__ */ B(R, { children: [
+		/* @__PURE__ */ z("rect", {
+			x: -P,
+			y: 0,
+			width: i + P + 12,
+			height: a,
+			fill: "transparent",
+			onPointerMove: ee,
+			onPointerLeave: F
+		}),
+		E && V != null ? /* @__PURE__ */ z("line", {
+			x1: V,
+			x2: V,
+			y1: 0,
+			y2: a,
+			className: y
+		}) : null,
+		E && V != null && k != null ? r.filter((e) => A(k.point, e, S)).map((e) => {
+			let t = n[e]?.color ?? c.axis, r = f(S(k.point, e));
+			return /* @__PURE__ */ z("circle", {
+				cx: V,
+				cy: r,
+				r: 4,
+				fill: t,
+				className: m,
+				"aria-hidden": !0
+			}, e);
+		}) : null,
+		E && k != null && I.length > 0 ? /* @__PURE__ */ z(T, {
+			unstyled: !0,
+			applyPositionStyle: !0,
+			left: D,
+			top: O,
+			offsetLeft: 0,
+			offsetTop: 0,
+			className: b,
+			style: { pointerEvents: "none" },
+			children: /* @__PURE__ */ z("div", {
+				className: e(U, b),
+				children: /* @__PURE__ */ z(x, {
+					label: o(p(k.point), w),
+					items: I
+				})
+			})
+		}) : null
+	] });
+}
+K.Grid = q, K.AxisBottom = J, K.AxisLeft = Y, K.NoData = Z, K.Area = Q, K.Tooltip = $;
+//#endregion
+export { K as ChartCartesian, Q as ChartCartesianAreaSeries, J as ChartCartesianAxisBottom, Y as ChartCartesianAxisLeft, q as ChartCartesianGrid, Z as ChartCartesianNoData, $ as ChartCartesianTooltipLayer, w as chartCartesianDefinedSegments, T as chartCartesianGapBands, E as chartCartesianGapRuns, D as chartCartesianHasPlottableValues, O as chartCartesianNoDataLabelDefault, k as isChartCartesianNumber, A as isChartCartesianSeriesDefined, j as resolveChartCartesianGapKeys, M as resolveChartCartesianNoData };

package/dist/components/organisms/Chart/ChartDistributionStrip.d.ts

@@ -0,0 +1,24 @@
+import { type ChartTone } from "../../../lib/chartTheme";
+export interface ChartDistributionItem {
+    id: string;
+    label: string;
+    value: number;
+    valueLabel?: string;
+}
+export interface ChartDistributionReference {
+    value: number;
+    label: string;
+}
+export type ChartDistributionStripLayoutClassName = string;
+export interface ChartDistributionStripProps {
+    items: ChartDistributionItem[];
+    "aria-label": string;
+    reference?: ChartDistributionReference;
+    tone?: ChartTone;
+    metricLabel?: string;
+    valueFormatter?: (value: number) => string;
+    minHeight?: number;
+    className?: ChartDistributionStripLayoutClassName;
+}
+export declare function ChartDistributionStrip({ items, "aria-label": ariaLabel, reference, tone, metricLabel, valueFormatter, minHeight, className, }: ChartDistributionStripProps): import("react").JSX.Element;
+//# sourceMappingURL=ChartDistributionStrip.d.ts.map

package/dist/components/organisms/Chart/ChartDistributionStrip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartDistributionStrip.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/Chart/ChartDistributionStrip.tsx"],"names":[],"mappings":"AAOA,OAAO,EAIL,KAAK,SAAS,EACf,MAAM,yBAAyB,CAAC;AAWjC,MAAM,WAAW,qBAAqB;IACpC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,0BAA0B;IACzC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,MAAM,qCAAqC,GAAG,MAAM,CAAC;AAE3D,MAAM,WAAW,2BAA2B;IAC1C,KAAK,EAAE,qBAAqB,EAAE,CAAC;IAC/B,YAAY,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,0BAA0B,CAAC;IACvC,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,qCAAqC,CAAC;CACnD;AAOD,wBAAgB,sBAAsB,CAAC,EACrC,KAAK,EACL,YAAY,EAAE,SAAS,EACvB,SAAS,EACT,IAAgB,EAChB,WAAqB,EACrB,cAAqC,EACrC,SAAe,EACf,SAAS,GACV,EAAE,2BAA2B,+BAuL7B"}

package/dist/components/organisms/Chart/ChartDistributionStrip.js

@@ -0,0 +1,156 @@
+"use client";
+import { cn as e } from "../../../lib/cn.js";
+import { chartFormatAxisValue as t, chartStroke as n, chartUiTokens as r } from "../../../lib/chartTheme.js";
+import { chartExplorationEmptyClasses as i, chartExplorationPlotHostClasses as a, chartExplorationRootClasses as o, chartExplorationSummaryClasses as s, chartExplorationSvgClasses as c } from "./chartStyles.js";
+import { resolveDistributionDomain as l } from "./chartExploration.js";
+import { ChartHoverTooltip as u } from "./ChartHoverTooltip.js";
+import { Fragment as d, jsx as f, jsxs as p } from "react/jsx-runtime";
+import { ParentSize as m } from "@visx/responsive";
+import { useTooltip as h, useTooltipInPortal as g } from "@visx/tooltip";
+import { AxisBottom as _ } from "@visx/axis";
+import { GlyphDot as v } from "@visx/glyph";
+import { scaleLinear as y } from "@visx/scale";
+import { LinePath as b } from "@visx/shape";
+//#region src/components/organisms/Chart/ChartDistributionStrip.tsx
+function x({ items: x, "aria-label": S, reference: C, tone: w = "primary", metricLabel: T = "Value", valueFormatter: E = t, minHeight: D = 240, className: O }) {
+	let { containerRef: k, TooltipInPortal: A } = g({
+		scroll: !0,
+		detectBounds: !1
+	}), { tooltipOpen: j, tooltipLeft: M = 0, tooltipTop: N = 0, tooltipData: P, showTooltip: F, hideTooltip: I } = h(), L = x.filter((e) => Number.isFinite(e.value));
+	if (L.length === 0) return /* @__PURE__ */ f("div", {
+		className: e(i, O),
+		children: "No distribution data"
+	});
+	let R = l(L.map((e) => e.value), C?.value), z = n(w);
+	return /* @__PURE__ */ p("div", {
+		className: e(o, O),
+		children: [/* @__PURE__ */ f("div", {
+			ref: k,
+			className: a,
+			style: {
+				height: D,
+				minHeight: D
+			},
+			children: /* @__PURE__ */ f(m, { children: ({ width: e, height: t }) => {
+				if (e <= 0 || t <= 0) return null;
+				let n = {
+					left: 28,
+					right: 20,
+					top: 24
+				}, i = t - 48, a = y({
+					domain: R,
+					range: [n.left, e - n.right],
+					nice: !0
+				});
+				return /* @__PURE__ */ p(d, { children: [/* @__PURE__ */ p("svg", {
+					width: e,
+					height: t,
+					role: "img",
+					"aria-label": S,
+					className: c,
+					children: [
+						/* @__PURE__ */ f(b, {
+							data: [{
+								x: n.left,
+								y: i
+							}, {
+								x: e - n.right,
+								y: i
+							}],
+							x: (e) => e.x,
+							y: (e) => e.y,
+							stroke: r.grid,
+							strokeWidth: 1
+						}),
+						C == null ? null : /* @__PURE__ */ p(d, { children: [/* @__PURE__ */ f(b, {
+							data: [{
+								x: a(C.value),
+								y: n.top
+							}, {
+								x: a(C.value),
+								y: i + 10
+							}],
+							x: (e) => e.x,
+							y: (e) => e.y,
+							stroke: r.axis,
+							strokeWidth: 1,
+							strokeDasharray: "3 3"
+						}), /* @__PURE__ */ f("text", {
+							x: a(C.value),
+							y: 14,
+							textAnchor: "middle",
+							fill: r.axis,
+							fontSize: 10,
+							children: C.label
+						})] }),
+						L.map((e, t) => {
+							let n = i - t % 3 * 14, o = e.valueLabel ?? E(e.value), s = a(e.value), c = () => {
+								F({
+									tooltipData: {
+										index: t,
+										item: e
+									},
+									tooltipLeft: s,
+									tooltipTop: n
+								});
+							};
+							return /* @__PURE__ */ p("g", {
+								"aria-hidden": !0,
+								children: [/* @__PURE__ */ f("text", {
+									x: s,
+									y: n - 7,
+									textAnchor: "middle",
+									fill: r.axis,
+									fontSize: 9,
+									children: e.label
+								}), /* @__PURE__ */ f(v, {
+									cx: s,
+									cy: n,
+									r: j && P?.index === t ? 5 : 3.5,
+									fill: z,
+									stroke: "var(--color-bg)",
+									strokeWidth: 2,
+									onPointerEnter: c,
+									onPointerMove: c,
+									onPointerLeave: I,
+									children: /* @__PURE__ */ f("title", { children: `${e.label}: ${o}` })
+								})]
+							}, e.id);
+						}),
+						/* @__PURE__ */ f(_, {
+							top: i + 14,
+							scale: a,
+							numTicks: 5,
+							stroke: r.grid,
+							tickStroke: r.grid,
+							tickFormat: (e) => E(Number(e)),
+							tickLabelProps: () => ({
+								fill: r.axis,
+								fontSize: 10,
+								textAnchor: "middle"
+							})
+						})
+					]
+				}), /* @__PURE__ */ f(u, {
+					TooltipInPortal: A,
+					open: j && P != null,
+					left: M,
+					top: N,
+					chartWidth: e,
+					label: P?.item.label ?? "",
+					items: P == null ? [] : [{
+						key: "value",
+						label: T,
+						value: P.item.valueLabel ?? E(P.item.value),
+						color: z
+					}]
+				})] });
+			} })
+		}), /* @__PURE__ */ p("ul", {
+			className: s,
+			children: [C == null ? null : /* @__PURE__ */ f("li", { children: `${C.label}: ${E(C.value)}` }), L.map((e) => /* @__PURE__ */ f("li", { children: `${e.label}: ${e.valueLabel ?? E(e.value)}` }, e.id))]
+		})]
+	});
+}
+//#endregion
+export { x as ChartDistributionStrip };

package/dist/components/organisms/Chart/ChartHeatmap.d.ts

@@ -0,0 +1,24 @@
+import { type ChartTone } from "../../../lib/chartTheme";
+export interface ChartHeatmapAxisItem {
+    key: string;
+    label: string;
+}
+export interface ChartHeatmapCell {
+    rowKey: string;
+    columnKey: string;
+    value: number;
+    valueLabel?: string;
+}
+export type ChartHeatmapLayoutClassName = string;
+export interface ChartHeatmapProps {
+    rows: ChartHeatmapAxisItem[];
+    columns: ChartHeatmapAxisItem[];
+    cells: ChartHeatmapCell[];
+    "aria-label": string;
+    tone?: ChartTone;
+    metricLabel?: string;
+    minHeight?: number;
+    className?: ChartHeatmapLayoutClassName;
+}
+export declare function ChartHeatmap({ rows, columns, cells, "aria-label": ariaLabel, tone, metricLabel, minHeight, className, }: ChartHeatmapProps): import("react").JSX.Element;
+//# sourceMappingURL=ChartHeatmap.d.ts.map

package/dist/components/organisms/Chart/ChartHeatmap.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartHeatmap.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/Chart/ChartHeatmap.tsx"],"names":[],"mappings":"AAIA,OAAO,EAGL,KAAK,SAAS,EACf,MAAM,yBAAyB,CAAC;AAcjC,MAAM,WAAW,oBAAoB;IACnC,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,gBAAgB;IAC/B,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,MAAM,2BAA2B,GAAG,MAAM,CAAC;AAEjD,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,oBAAoB,EAAE,CAAC;IAC7B,OAAO,EAAE,oBAAoB,EAAE,CAAC;IAChC,KAAK,EAAE,gBAAgB,EAAE,CAAC;IAC1B,YAAY,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,2BAA2B,CAAC;CACzC;AAgBD,wBAAgB,YAAY,CAAC,EAC3B,IAAI,EACJ,OAAO,EACP,KAAK,EACL,YAAY,EAAE,SAAS,EACvB,IAAgB,EAChB,WAAqB,EACrB,SAAe,EACf,SAAS,GACV,EAAE,iBAAiB,+BAqNnB"}