import { vars as e } from "../../theme/themeContract.js";
import { chartContainer as t, emptyState as n, tooltip as r, tooltipDate as i, tooltipRow as a, tooltipRowLabel as o, tooltipSwatch as s } from "./metricHistoryChart.css.js";
import { jsx as c, jsxs as l } from "react/jsx-runtime";
import { ResponsiveLine as u } from "@nivo/line";
//#region src/components/charts/MetricHistoryChart.tsx
function d(e, t) {
	let n = new Intl.NumberFormat(void 0, { maximumFractionDigits: 2 }).format(e);
	return t == null || t.length === 0 ? n : `${n} ${t}`;
}
function f(e) {
	let t = new Date(e);
	return Number.isNaN(t.getTime()) ? e : t.toLocaleString(void 0, {
		month: "short",
		day: "2-digit",
		hour: "2-digit",
		minute: "2-digit"
	});
}
function p(e) {
	return e.toLocaleTimeString(void 0, {
		hour: "2-digit",
		minute: "2-digit"
	});
}
var m = ({ ariaLabel: m, emptyMessage: h = "No data", formatTimestamp: g = f, formatValue: _ = d, series: v }) => {
	let y = v.filter((e) => e.data.length > 0);
	if (y.length === 0) return /* @__PURE__ */ c("div", {
		className: n,
		children: h
	});
	let b = Object.fromEntries(y.map((e) => [e.id, {
		color: e.color,
		label: e.label,
		unit: e.unit
	}]));
	return /* @__PURE__ */ c("div", {
		className: t,
		children: /* @__PURE__ */ c(u, {
			data: y.map((e) => ({
				id: e.id,
				data: e.data.map((e) => ({
					x: new Date(e.x),
					y: e.y
				}))
			})),
			margin: {
				top: 14,
				right: 16,
				bottom: 74,
				left: 52
			},
			colors: (t) => b[String(t.id)]?.color ?? e.colors.primary,
			xScale: {
				type: "time",
				format: "native",
				precision: "minute",
				useUTC: !1
			},
			xFormat: "time:%Y-%m-%dT%H:%M:%S.%LZ",
			yScale: {
				type: "linear",
				min: "auto",
				max: "auto"
			},
			curve: "monotoneX",
			lineWidth: 2.5,
			pointSize: 4,
			pointBorderWidth: 2,
			pointBorderColor: {
				from: "seriesColor",
				modifiers: [["darker", .2]]
			},
			enableArea: !0,
			areaOpacity: .1,
			enableGridX: !1,
			enableGridY: !0,
			axisTop: null,
			axisRight: null,
			axisBottom: {
				format: (e) => e instanceof Date ? p(e) : "",
				tickSize: 0,
				tickPadding: 10,
				tickValues: "every 15 minutes"
			},
			axisLeft: {
				tickSize: 0,
				tickPadding: 8,
				tickValues: 5,
				format: (e) => typeof e == "number" ? new Intl.NumberFormat(void 0, {
					notation: "compact",
					maximumFractionDigits: 1
				}).format(e) : ""
			},
			enablePoints: !0,
			useMesh: !0,
			legends: [{
				anchor: "bottom",
				direction: "row",
				translateY: 56,
				itemWidth: 110,
				itemHeight: 16,
				itemsSpacing: 8,
				symbolSize: 10,
				symbolShape: "circle",
				itemTextColor: e.colors.textSecondary,
				data: y.map((e) => ({
					id: e.id,
					label: e.label,
					color: e.color
				}))
			}],
			theme: {
				grid: { line: { stroke: e.colors.borderLight } },
				axis: { ticks: { text: {
					fill: e.colors.textMuted,
					fontSize: 12
				} } },
				crosshair: { line: {
					stroke: e.colors.border,
					strokeWidth: 1,
					strokeDasharray: "4 4"
				} },
				tooltip: { container: {
					background: "transparent",
					boxShadow: "none",
					padding: 0
				} }
			},
			sliceTooltip: ({ slice: e }) => {
				let t = e.points[0], n = String(e.id);
				t?.data.x instanceof Date && (n = t.data.x.toISOString());
				let u = [...e.points].map((e) => {
					let t = Number(e.data.y);
					if (typeof e.data.y == "number" && (t = e.data.y), Number.isNaN(t)) return null;
					let n = String(e.seriesId), r = b[n];
					return {
						seriesId: n,
						label: r?.label ?? n,
						value: t,
						color: e.seriesColor,
						unit: r?.unit
					};
				}).filter((e) => e != null);
				return /* @__PURE__ */ l("div", {
					className: r,
					children: [/* @__PURE__ */ c("p", {
						className: i,
						children: g(n)
					}), u.map((e) => /* @__PURE__ */ l("div", {
						className: a,
						children: [/* @__PURE__ */ l("span", {
							className: o,
							children: [/* @__PURE__ */ c("span", {
								className: s,
								style: { backgroundColor: e.color },
								"aria-hidden": !0
							}), /* @__PURE__ */ c("span", { children: e.label })]
						}), /* @__PURE__ */ c("strong", { children: _(e.value, e.unit) })]
					}, `${e.seriesId}-${n}`))]
				});
			},
			enableSlices: "x",
			role: "img",
			ariaLabel: m
		})
	});
}, h = {
	formatDefaultValue: d,
	formatDefaultTimestamp: f,
	formatAxisTimestamp: p
};
//#endregion
export { m as MetricHistoryChart, m as default, h as __test };

//# sourceMappingURL=MetricHistoryChart.js.map