import { vars as e } from "../../theme/themeContract.css.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 { formatDayTick as s, formatYAxisTick as c, getVisibleDayTicks as l, resolveYAxisState as u } from "../../internal/charts/timeSeriesLineChartHelpers.js";
import { jsx as d, jsxs as f } from "react/jsx-runtime";
import { ResponsiveLine as p } from "@nivo/line";
//#region src/components/charts/TimeSeriesLineChart.tsx
var m = (m) => {
	let { ariaLabel: h, categoryColorById: g, categoryLabel: _, categoryOrder: v, formatValue: y, series: b, yAxis: x } = m, S = l(b), C = null;
	x != null && (C = u(b, x));
	let w = v, T = (e) => w.includes(e), E = [{
		anchor: "bottom",
		direction: "row",
		translateY: 56,
		itemWidth: 90,
		itemHeight: 16,
		itemsSpacing: 8,
		symbolSize: 10,
		symbolShape: "circle",
		itemTextColor: e.colors.textSecondary,
		data: v.map((e) => ({
			id: e,
			label: _(e),
			color: g[e]
		}))
	}];
	return /* @__PURE__ */ d("div", {
		className: t,
		children: /* @__PURE__ */ d(p, {
			data: b,
			margin: {
				top: 14,
				right: 16,
				bottom: 74,
				left: 52
			},
			colors: (t) => typeof t.id != "string" || !T(t.id) ? e.colors.primary : g[t.id],
			xScale: { type: "point" },
			yScale: {
				type: "linear",
				min: C?.min ?? 0,
				max: C?.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,
			gridYValues: C?.tickValues,
			axisTop: null,
			axisRight: null,
			axisBottom: {
				tickValues: S,
				format: (e) => s(String(e)),
				tickSize: 0,
				tickPadding: 10
			},
			axisLeft: {
				tickSize: 0,
				tickPadding: 8,
				tickValues: C?.tickValues ?? 5,
				format: (e) => typeof e == "number" ? x?.formatValue?.(e) ?? c(e) : ""
			},
			enablePoints: !0,
			useMesh: !0,
			legends: E,
			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), c = v[0] ?? null, l = [...e.points].map((e) => {
					let t = 0;
					typeof e.data.y == "number" && (t = e.data.y);
					let n = c;
					return typeof e.seriesId == "string" && T(e.seriesId) && (n = e.seriesId), n == null ? null : {
						seriesId: n,
						data: { y: t },
						color: e.seriesColor
					};
				}).filter((e) => e != null).sort((e, t) => v.indexOf(e.seriesId) - v.indexOf(t.seriesId));
				return /* @__PURE__ */ f("div", {
					className: n,
					children: [/* @__PURE__ */ d("p", {
						className: r,
						children: s(t)
					}), l.map((e) => /* @__PURE__ */ f("div", {
						className: i,
						children: [/* @__PURE__ */ f("span", {
							className: a,
							children: [/* @__PURE__ */ d("span", {
								className: o,
								style: { backgroundColor: e.color },
								"aria-hidden": !0
							}), /* @__PURE__ */ d("span", { children: _(e.seriesId) })]
						}), /* @__PURE__ */ d("strong", { children: y(e.data.y) })]
					}, `${t}-${e.seriesId}`))]
				});
			},
			enableSlices: "x",
			role: "img",
			ariaLabel: h
		})
	});
};
//#endregion
export { m as TimeSeriesLineChart, m as default };

//# sourceMappingURL=TimeSeriesLineChart.js.map