import { vars as e } from "../../theme/themeContract.js";
import { chartContainer as t, tooltip as n, tooltipDate as r, tooltipRow as i, tooltipRowLabel as a, tooltipSwatch as o } from "./timeSeriesLineChart.css.js";
import { jsx as s, jsxs as c } from "react/jsx-runtime";
import { ResponsiveLine as l } from "@nivo/line";
//#region src/components/charts/TimeSeriesLineChart.tsx
var u = 6;
function d(e) {
	let t = e[0];
	if (t == null || t.data.length <= u) return t == null ? [] : t.data.map((e) => e.x);
	let n = Math.ceil(t.data.length / u), r = t.data.filter((e, t) => t % n === 0).map((e) => e.x), i = t.data.at(-1);
	return i != null && r.at(-1) !== i.x && r.push(i.x), r;
}
function f(e) {
	return (/* @__PURE__ */ new Date(`${e}T00:00:00Z`)).toLocaleDateString(void 0, {
		month: "short",
		day: "2-digit"
	});
}
var p = (u) => {
	let { ariaLabel: p, categoryColorById: m, categoryLabel: h, categoryOrder: g, formatValue: _, series: v } = u, y = d(v), b = g, x = (e) => b.includes(e), S = [{
		anchor: "bottom",
		direction: "row",
		translateY: 56,
		itemWidth: 90,
		itemHeight: 16,
		itemsSpacing: 8,
		symbolSize: 10,
		symbolShape: "circle",
		itemTextColor: e.colors.textSecondary,
		data: g.map((e) => ({
			id: e,
			label: h(e),
			color: m[e]
		}))
	}];
	return /* @__PURE__ */ s("div", {
		className: t,
		children: /* @__PURE__ */ s(l, {
			data: v,
			margin: {
				top: 14,
				right: 16,
				bottom: 74,
				left: 52
			},
			colors: (t) => typeof t.id != "string" || !x(t.id) ? e.colors.primary : m[t.id],
			xScale: { type: "point" },
			yScale: {
				type: "linear",
				min: 0,
				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: {
				tickValues: y,
				format: (e) => f(String(e)),
				tickSize: 0,
				tickPadding: 10
			},
			axisLeft: {
				tickSize: 0,
				tickPadding: 8,
				tickValues: 5,
				format: (e) => typeof e == "number" ? new Intl.NumberFormat("en-US", {
					notation: "compact",
					maximumFractionDigits: 1
				}).format(e) : ""
			},
			enablePoints: !0,
			useMesh: !0,
			legends: S,
			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 = String(e.id), l = g[0] ?? null, u = [...e.points].map((e) => {
					let t = 0;
					typeof e.data.y == "number" && (t = e.data.y);
					let n = l;
					return typeof e.seriesId == "string" && x(e.seriesId) && (n = e.seriesId), n == null ? null : {
						seriesId: n,
						data: { y: t },
						color: e.seriesColor
					};
				}).filter((e) => e != null).sort((e, t) => g.indexOf(e.seriesId) - g.indexOf(t.seriesId));
				return /* @__PURE__ */ c("div", {
					className: n,
					children: [/* @__PURE__ */ s("p", {
						className: r,
						children: f(t)
					}), u.map((e) => /* @__PURE__ */ c("div", {
						className: i,
						children: [/* @__PURE__ */ c("span", {
							className: a,
							children: [/* @__PURE__ */ s("span", {
								className: o,
								style: { backgroundColor: e.color },
								"aria-hidden": !0
							}), /* @__PURE__ */ s("span", { children: h(e.seriesId) })]
						}), /* @__PURE__ */ s("strong", { children: _(e.data.y) })]
					}, `${t}-${e.seriesId}`))]
				});
			},
			enableSlices: "x",
			role: "img",
			ariaLabel: p
		})
	});
}, m = { formatDayTick: f };
//#endregion
export { p as TimeSeriesLineChart, p as default, m as __test };

//# sourceMappingURL=TimeSeriesLineChart.js.map