@lolmath/ui 9.4.0 → 9.6.0

package/dist/charts.mjs

@@ -0,0 +1,942 @@
+/* empty css                */
+import { cx } from "cva";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { areaY, areaY as areaY$1, barX, barX as barX$1, barY, barY as barY$1, crosshair, crosshair as crosshair$1, d3Curve, defineChart, dot, dot as dot$1, group, group as group$1, lineX, lineY, lineY as lineY$1, rect, ruleX, ruleY, stack, stack as stack$1, text, text as text$1, tickX, tickY } from "@tanstack/charts";
+import { scaleBand, scaleBand as scaleBand$1 } from "@tanstack/charts/scales/band";
+import { scaleLinear, scaleLinear as scaleLinear$1 } from "@tanstack/charts/scales/linear";
+import { scaleOrdinal } from "@tanstack/charts/scales/ordinal";
+import { scalePoint, scalePoint as scalePoint$1 } from "@tanstack/charts/scales/point";
+import { tooltip, tooltip as tooltip$1 } from "@tanstack/charts/tooltip";
+import { Chart } from "@tanstack/charts/react";
+//#region src/charts/curves.ts
+/** Straight segments, like d3's `curveLinear`. */
+const linearCurve = makeCurve({ segments: linearSegments });
+/**
+* Monotone cubic interpolation over x — d3's `curveMonotoneX`, by way of
+* Steffen's method. Smooth, but it never overshoots a reading, so a rounded
+* corner cannot invent a value the data never had.
+*/
+const smoothCurve = makeCurve({
+	segments: monotoneSegments,
+	dedupe: true
+});
+/** Holds each value until the next one, like d3's `curveStepAfter`. */
+const stepCurve = makeCurve({
+	segments: stepAfterSegments,
+	back: stepBeforeSegments
+});
+const CURVES = {
+	linear: linearCurve,
+	smooth: smoothCurve,
+	step: stepCurve
+};
+function resolveCurve(name) {
+	return CURVES[name];
+}
+function makeCurve(kernel) {
+	const back = kernel.back ?? kernel.segments;
+	const prepare = (points) => kernel.dedupe ? dedupe(points) : points;
+	return {
+		line: (points) => {
+			const run = prepare(points);
+			if (run.length === 0) return "";
+			const tail = run.length === 1 ? "Z" : kernel.segments(run);
+			return `M${pair(run[0])}${tail}`;
+		},
+		area: (top, bottom) => {
+			const upper = prepare(top);
+			const lower = prepare([...bottom].reverse());
+			if (upper.length === 0 || lower.length === 0) return "";
+			return `M${pair(upper[0])}${upper.length === 1 ? "" : kernel.segments(upper)}L${pair(lower[0])}${lower.length === 1 ? "" : back(lower)}Z`;
+		}
+	};
+}
+function dedupe(points) {
+	const run = [];
+	for (const point of points) {
+		const last = run[run.length - 1];
+		if (last && last[0] === point[0] && last[1] === point[1]) continue;
+		run.push(point);
+	}
+	return run;
+}
+function linearSegments(points) {
+	let path = "";
+	for (let index = 1; index < points.length; index += 1) path += `L${pair(points[index])}`;
+	return path;
+}
+/** Across at the height being held, then up to the new one. */
+function stepAfterSegments(points) {
+	let path = "";
+	for (let index = 1; index < points.length; index += 1) {
+		const [x, y] = points[index];
+		path += `L${number(x)},${number(points[index - 1][1])}L${number(x)},${number(y)}`;
+	}
+	return path;
+}
+/** Up to the new height first, then across — the mirror of the above. */
+function stepBeforeSegments(points) {
+	let path = "";
+	for (let index = 1; index < points.length; index += 1) {
+		const [x, y] = points[index];
+		path += `L${number(points[index - 1][0])},${number(y)}L${number(x)},${number(y)}`;
+	}
+	return path;
+}
+function monotoneSegments(points) {
+	if (points.length < 3) return linearSegments(points);
+	const tangents = monotoneTangents(points);
+	let path = "";
+	for (let index = 1; index < points.length; index += 1) {
+		const [x0, y0] = points[index - 1];
+		const [x1, y1] = points[index];
+		const third = (x1 - x0) / 3;
+		path += `C${number(x0 + third)},${number(y0 + third * tangents[index - 1])},${number(x1 - third)},${number(y1 - third * tangents[index])},${number(x1)},${number(y1)}`;
+	}
+	return path;
+}
+/**
+* The tangent at every point. Interior tangents come from Steffen's rule,
+* which clamps each one to the smaller neighbouring slope and zeroes it at a
+* turning point — that clamp is what keeps the curve monotone. The two ends
+* take d3's one-sided estimate off their single neighbour.
+*/
+function monotoneTangents(points) {
+	const count = points.length;
+	const tangents = new Array(count);
+	for (let index = 1; index < count - 1; index += 1) tangents[index] = steffen(points[index - 1], points[index], points[index + 1]);
+	tangents[0] = oneSided(points[0], points[1], tangents[1]);
+	tangents[count - 1] = oneSided(points[count - 2], points[count - 1], tangents[count - 2]);
+	return tangents;
+}
+function steffen(before, at, after) {
+	const runBefore = at[0] - before[0];
+	const runAfter = after[0] - at[0];
+	const slopeBefore = (at[1] - before[1]) / (runBefore || (runAfter < 0 ? -0 : 0));
+	const slopeAfter = (after[1] - at[1]) / (runAfter || (runBefore < 0 ? -0 : 0));
+	const parabolic = (slopeBefore * runAfter + slopeAfter * runBefore) / (runBefore + runAfter);
+	return (sign(slopeBefore) + sign(slopeAfter)) * Math.min(Math.abs(slopeBefore), Math.abs(slopeAfter), .5 * Math.abs(parabolic)) || 0;
+}
+function oneSided(from, to, neighbour) {
+	const run = to[0] - from[0];
+	return run ? (3 * ((to[1] - from[1]) / run) - neighbour) / 2 : neighbour;
+}
+function sign(value) {
+	return value < 0 ? -1 : 1;
+}
+function pair(point) {
+	return `${number(point[0])},${number(point[1])}`;
+}
+/** Trims float noise, so an unchanged scene serialises to an unchanged path. */
+function number(value) {
+	return Number.isFinite(value) ? String(Math.round(value * 1e6) / 1e6) : "0";
+}
+//#endregion
+//#region src/charts/theme/theme.ts
+/**
+* The Hextech palette, in slot order. Every entry is a CSS custom property, so
+* a host page retunes the whole library by redefining `--lol-chart-series-N`
+* rather than by threading colours through props.
+*
+* Assign these in sequence and never cycle them: a seventh series is not a
+* seventh colour, it is a sign that the chart should fold its tail into
+* "Other" or split into small multiples.
+*/
+const hextechPalette = [
+	"var(--lol-chart-series-1)",
+	"var(--lol-chart-series-2)",
+	"var(--lol-chart-series-3)",
+	"var(--lol-chart-series-4)",
+	"var(--lol-chart-series-5)",
+	"var(--lol-chart-series-6)"
+];
+/** How many categorical series the palette can carry. */
+const hextechPaletteSize = hextechPalette.length;
+/**
+* Dot, bubble and scatter forms are held to a harder test than bars and lines:
+* any two marks can end up touching, not just neighbouring slots. The palette
+* clears that test for its first three slots, so those forms cap at three
+* series — past that, facet rather than reach for a fourth colour.
+*/
+const hextechScatterPaletteSize = 3;
+/**
+* Reserved status colours. A series that *means* good or bad — a win rate, a
+* gold lead, a delta — wears these; a series that is merely "the third one"
+* wears the categorical palette. Never both in one chart.
+*/
+const hextechStatusColors = {
+	positive: "var(--lol-chart-positive)",
+	negative: "var(--lol-chart-negative)"
+};
+/**
+* The chart theme: gold ink and a near-black plot, matching the League client.
+*
+* `background` stays transparent so the frame behind the chart — or whatever
+* the host puts there — shows through.
+*/
+const hextechChartTheme = {
+	foreground: "var(--lol-chart-foreground)",
+	muted: "var(--lol-chart-muted)",
+	grid: "var(--lol-chart-grid)",
+	background: "transparent",
+	palette: hextechPalette
+};
+/** The colour for a categorical slot, counted from zero and never wrapped. */
+function hextechSeriesColor(index) {
+	return hextechPalette[index] ?? hextechPalette[hextechPalette.length - 1];
+}
+/**
+* Applies the Hextech theme to a chart definition you wrote by hand, keeping
+* any theme fields the definition sets for itself.
+*
+* ```ts
+* const chart = withHextechTheme(defineChart({ marks: [...], x, y }));
+* ```
+*/
+function withHextechTheme(definition) {
+	return {
+		...definition,
+		theme: {
+			...hextechChartTheme,
+			...definition.theme
+		}
+	};
+}
+//#endregion
+//#region src/charts/components/chart-common.ts
+/** The colour a series is drawn in: its own, or its slot in the palette. */
+function seriesColor(series, index) {
+	return series.color ?? hextechSeriesColor(index);
+}
+function seriesLabel(series) {
+	return series.label ?? series.key;
+}
+function legendItems(series) {
+	return series.map((entry, index) => ({
+		key: entry.key,
+		label: seriesLabel(entry),
+		color: seriesColor(entry, index)
+	}));
+}
+/**
+* Whether to draw the legend. One series does not get one: there is a single
+* colour, and the title already says what it is.
+*/
+function showLegend(series, legend) {
+	return legend ?? series.length > 1;
+}
+/**
+* The chart needs a label whatever the caller passed. A string title is the
+* obvious one; past that we fall back to naming the series, so the chart is
+* never announced as an unlabelled graphic.
+*/
+function resolveAriaLabel(ariaLabel, title, series) {
+	if (ariaLabel) return ariaLabel;
+	if (typeof title === "string") return title;
+	if (typeof title === "number") return String(title);
+	const names = series.map(seriesLabel);
+	return names.length ? `Chart of ${names.join(", ")}` : "Chart";
+}
+/**
+* Folds wide rows into one row per (row, series) pair.
+*
+* Grouping and stacking are computed *within* a mark, off its series channel —
+* so a grouped or stacked chart is a single mark over folded data, not one mark
+* per series. Rows come out x-major, which keeps a stack in the order the
+* `series` array declares.
+*/
+function foldSeries(data, series, x) {
+	const rows = [];
+	for (const datum of data) {
+		const xValue = x(datum);
+		for (const entry of series) rows.push({
+			datum,
+			seriesKey: entry.key,
+			x: xValue,
+			value: entry.value(datum)
+		});
+	}
+	return rows;
+}
+/** Looks up each series' colour by key, for a folded mark's `fill`. */
+function seriesColorLookup(series) {
+	const colors = new Map(series.map((entry, index) => [entry.key, seriesColor(entry, index)]));
+	return (key) => colors.get(key) ?? seriesColor(series[0] ?? {
+		key,
+		value: () => 0
+	}, 0);
+}
+/** Every distinct x value, in the order the data first mentions it. */
+function xDomain(data, x) {
+	const seen = /* @__PURE__ */ new Set();
+	const domain = [];
+	for (const datum of data) {
+		const value = x(datum);
+		if (seen.has(value)) continue;
+		seen.add(value);
+		domain.push(value);
+	}
+	return domain;
+}
+/** Categorical unless every x is a number. */
+function isCategoricalX(data, x) {
+	return data.some((datum) => typeof x(datum) !== "number");
+}
+/**
+* The x axis for a chart whose marks sit *between* positions — lines, areas,
+* dots. Categorical data gets a point scale; numbers get a linear one.
+*/
+function pointXAxis(data, x, options) {
+	const categorical = isCategoricalX(data, x);
+	const domain = xDomain(data, x);
+	return {
+		scale: categorical ? () => scalePoint$1().domain(domain).padding(.2) : scaleLinear$1,
+		nice: !categorical,
+		axis: axisPresentation(options)
+	};
+}
+/** The x axis for marks that occupy a slot: bars and their labels. */
+function bandXAxis(data, x, options) {
+	const domain = xDomain(data, x);
+	return {
+		scale: () => scaleBand$1().domain(domain).padding(options.padding ?? .24),
+		axis: axisPresentation(options)
+	};
+}
+/** A linear measure axis, niced and — usually — gridded. */
+function valueAxis(options) {
+	return {
+		scale: scaleLinear$1,
+		nice: true,
+		grid: options.grid ?? true,
+		axis: axisPresentation(options)
+	};
+}
+function axisPresentation(options) {
+	return {
+		label: options.label,
+		ticks: options.format ? { format: options.format } : void 0
+	};
+}
+/**
+* The tooltip, wired so it speaks the caller's labels and formats rather than
+* the raw channel values. The `group` item is what turns "line-0" into
+* "Blue side" on a shared-x tooltip.
+*/
+function hextechTooltip(args) {
+	const labels = new Map(args.series.map((entry) => [entry.key, seriesLabel(entry)]));
+	const items = [{
+		channel: "x",
+		label: args.xLabel,
+		text: (point) => formatChartValue(point.xValue, args.formatX)
+	}, {
+		channel: "y",
+		label: args.yLabel,
+		text: (point) => formatChartValue(point.yValue, args.formatY)
+	}];
+	if (args.series.length > 1) items.push({
+		channel: "group",
+		text: (point) => labels.get(String(point.group ?? point.markId)) ?? point.groupLabel
+	});
+	return {
+		use: tooltip$1,
+		items
+	};
+}
+/** Row-level accessor for a tooltip item, tolerant of the widened value type. */
+function formatChartValue(value, format) {
+	if (format) return format(value);
+	if (typeof value === "number") return numberFormat.format(value);
+	return String(value);
+}
+const numberFormat = new Intl.NumberFormat();
+//#endregion
+//#region src/charts/components/chart-frame/chart-frame.module.css
+var chart_frame_module_default = {
+	"frame": "_frame_7dkb0_8",
+	"bare": "_bare_7dkb0_26",
+	"corner": "_corner_7dkb0_38",
+	"cornerTopLeft": "_cornerTopLeft_7dkb0_51",
+	"cornerTopRight": "_cornerTopRight_7dkb0_56",
+	"cornerBottomLeft": "_cornerBottomLeft_7dkb0_61",
+	"cornerBottomRight": "_cornerBottomRight_7dkb0_66",
+	"header": "_header_7dkb0_71",
+	"headings": "_headings_7dkb0_78",
+	"title": "_title_7dkb0_87",
+	"subtitle": "_subtitle_7dkb0_98",
+	"actions": "_actions_7dkb0_106",
+	"rule": "_rule_7dkb0_115",
+	"ruleLine": "_ruleLine_7dkb0_121",
+	"ruleDiamond": "_ruleDiamond_7dkb0_135",
+	"body": "_body_7dkb0_143",
+	"footer": "_footer_7dkb0_149"
+};
+//#endregion
+//#region src/charts/components/chart-frame/chart-frame.tsx
+/**
+* The panel a Hextech chart sits in: a gold hairline, diamond corners, a title
+* in Beaufort and a rule under it.
+*
+* Every chart in this package renders one of these. Reach for it directly when
+* you are building a chart of your own and want it to sit alongside them.
+*/
+function ChartFrame({ title, subtitle, actions, footer, preset = "framed", className, children, ...rest }) {
+	const hasHeader = title !== void 0 || subtitle !== void 0 || actions;
+	return /* @__PURE__ */ jsxs("figure", {
+		className: cx(chart_frame_module_default.frame, preset === "bare" && chart_frame_module_default.bare, className),
+		...rest,
+		children: [
+			hasHeader && /* @__PURE__ */ jsxs("figcaption", {
+				className: chart_frame_module_default.header,
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: chart_frame_module_default.headings,
+					children: [title !== void 0 && /* @__PURE__ */ jsx("p", {
+						className: chart_frame_module_default.title,
+						children: title
+					}), subtitle !== void 0 && /* @__PURE__ */ jsx("p", {
+						className: chart_frame_module_default.subtitle,
+						children: subtitle
+					})]
+				}), actions && /* @__PURE__ */ jsx("div", {
+					className: chart_frame_module_default.actions,
+					children: actions
+				})]
+			}),
+			hasHeader && /* @__PURE__ */ jsxs("div", {
+				"aria-hidden": true,
+				className: chart_frame_module_default.rule,
+				children: [
+					/* @__PURE__ */ jsx("span", { className: chart_frame_module_default.ruleDiamond }),
+					/* @__PURE__ */ jsx("hr", { className: chart_frame_module_default.ruleLine }),
+					/* @__PURE__ */ jsx("span", { className: chart_frame_module_default.ruleDiamond })
+				]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: chart_frame_module_default.body,
+				children
+			}),
+			footer && /* @__PURE__ */ jsx("div", {
+				className: chart_frame_module_default.footer,
+				children: footer
+			}),
+			/* @__PURE__ */ jsx("span", {
+				"aria-hidden": true,
+				className: cx(chart_frame_module_default.corner, chart_frame_module_default.cornerTopLeft)
+			}),
+			/* @__PURE__ */ jsx("span", {
+				"aria-hidden": true,
+				className: cx(chart_frame_module_default.corner, chart_frame_module_default.cornerTopRight)
+			}),
+			/* @__PURE__ */ jsx("span", {
+				"aria-hidden": true,
+				className: cx(chart_frame_module_default.corner, chart_frame_module_default.cornerBottomLeft)
+			}),
+			/* @__PURE__ */ jsx("span", {
+				"aria-hidden": true,
+				className: cx(chart_frame_module_default.corner, chart_frame_module_default.cornerBottomRight)
+			})
+		]
+	});
+}
+//#endregion
+//#region src/charts/components/chart-legend/chart-legend.module.css
+var chart_legend_module_default = {
+	"legend": "_legend_1rk8r_2",
+	"item": "_item_1rk8r_13",
+	"swatch": "_swatch_1rk8r_26",
+	"square": "_square_1rk8r_35",
+	"line": "_line_1rk8r_39"
+};
+//#endregion
+//#region src/charts/components/chart-legend/chart-legend.tsx
+/**
+* The legend every multi-series chart carries.
+*
+* Colour alone is never allowed to be the only way to tell two series apart,
+* so this is not optional decoration — a chart with two or more series renders
+* one. A single-series chart does not: its title already says what is plotted,
+* and a lone swatch would only restate it.
+*/
+function ChartLegend({ items, swatch = "diamond", className, ...rest }) {
+	return /* @__PURE__ */ jsx("ul", {
+		className: cx(chart_legend_module_default.legend, className),
+		...rest,
+		children: items.map((item) => /* @__PURE__ */ jsxs("li", {
+			className: chart_legend_module_default.item,
+			children: [/* @__PURE__ */ jsx("span", {
+				"aria-hidden": true,
+				className: cx(chart_legend_module_default.swatch, swatch === "square" && chart_legend_module_default.square, swatch === "line" && chart_legend_module_default.line),
+				style: { "--lol-chart-legend-color": item.color }
+			}), item.label ?? item.key]
+		}, item.key))
+	});
+}
+//#endregion
+//#region src/charts/components/hextech-chart/hextech-chart.module.css
+var hextech_chart_module_default = { "chart": "_chart_1mnqy_2" };
+//#endregion
+//#region src/charts/components/hextech-chart/hextech-chart.tsx
+/**
+* A TanStack chart wearing the Hextech theme, with no frame around it.
+*
+* Use it when you have written a `defineChart` definition of your own and want
+* it to look like the rest of the library. The theme is merged into the
+* definition, so anything the definition sets for itself still wins.
+*/
+function HextechChart({ definition, glow = true, className, wrapperProps, ...rest }) {
+	const themed = useMemo(() => applyHextechTheme(definition), [definition]);
+	const { className: wrapperClassName, ...restWrapperProps } = wrapperProps ?? {};
+	return /* @__PURE__ */ jsx("div", {
+		"data-lol-chart": "",
+		"data-lol-chart-glow": glow,
+		className: cx(hextech_chart_module_default.chart, wrapperClassName),
+		...restWrapperProps,
+		children: /* @__PURE__ */ jsx(Chart, {
+			definition: themed,
+			className,
+			...rest
+		})
+	});
+}
+/**
+* Merges the theme in. A responsive definition builds its spec per size, so the
+* theme has to go on what the builder returns rather than on the definition.
+*/
+function applyHextechTheme(definition) {
+	if ("chart" in definition) {
+		const build = definition.chart;
+		return {
+			...definition,
+			chart: (context) => withHextechTheme(build(context))
+		};
+	}
+	return {
+		...definition,
+		theme: {
+			...hextechChartTheme,
+			...definition.theme
+		}
+	};
+}
+//#endregion
+//#region src/charts/components/area-chart/area-chart.tsx
+/**
+* Filled areas — a composition over time, or a single magnitude you want to
+* read as volume rather than as a trace.
+*
+* Overlaid areas (the default) are only honest for two or three series; past
+* that the ones behind disappear. Stack them, or split into small multiples.
+*/
+function AreaChart({ data, series, x, curve = "linear", stacked = false, normalize = false, stroke = true, crosshair: withCrosshair = true, height = 280, title, subtitle, actions, xLabel, yLabel, formatX, formatY, grid = true, legend, frame = true, glow = true, ariaLabel, ariaDescription, className, frameProps }) {
+	const definition = useMemo(() => {
+		const resolvedCurve = resolveCurve(curve);
+		const marks = [];
+		if (stacked) {
+			const rows = foldSeries(data, series, x);
+			const colorOf = seriesColorLookup(series);
+			marks.push(areaY$1(rows, {
+				id: "areas",
+				x: (row) => row.x,
+				y: (row) => row.value,
+				z: (row) => row.seriesKey,
+				fill: (row) => colorOf(row.seriesKey),
+				fillOpacity: .62,
+				curve: resolvedCurve,
+				layout: stack$1(normalize ? { offset: "normalize" } : void 0),
+				...stroke ? {
+					stroke: "var(--lol-chart-surface)",
+					strokeWidth: 1
+				} : {}
+			}));
+		} else for (const [index, entry] of series.entries()) {
+			const color = seriesColor(entry, index);
+			marks.push(areaY$1(data, {
+				id: entry.key,
+				x,
+				y: entry.value,
+				fill: color,
+				fillOpacity: .16,
+				curve: resolvedCurve
+			}));
+			if (stroke) marks.push(lineY$1(data, {
+				id: `${entry.key}-line`,
+				x,
+				y: entry.value,
+				stroke: color,
+				strokeWidth: 2,
+				curve: resolvedCurve
+			}));
+		}
+		if (withCrosshair) marks.push(crosshair$1({
+			x: true,
+			y: false,
+			stroke: "var(--lol-chart-frame-accent)",
+			strokeOpacity: .45
+		}));
+		return {
+			marks,
+			x: pointXAxis(data, x, {
+				label: xLabel,
+				format: formatX
+			}),
+			y: valueAxis({
+				label: yLabel,
+				format: formatY,
+				grid
+			}),
+			focus: "group-x",
+			tooltip: hextechTooltip({
+				series,
+				xLabel,
+				yLabel,
+				formatX,
+				formatY
+			})
+		};
+	}, [
+		curve,
+		data,
+		formatX,
+		formatY,
+		grid,
+		normalize,
+		series,
+		stacked,
+		stroke,
+		withCrosshair,
+		x,
+		xLabel,
+		yLabel
+	]);
+	return /* @__PURE__ */ jsx(ChartFrame, {
+		title,
+		subtitle,
+		actions,
+		preset: frame ? "framed" : "bare",
+		className,
+		footer: showLegend(series, legend) ? /* @__PURE__ */ jsx(ChartLegend, { items: legendItems(series) }) : void 0,
+		...frameProps,
+		children: /* @__PURE__ */ jsx(HextechChart, {
+			definition,
+			height,
+			glow,
+			ariaLabel: resolveAriaLabel(ariaLabel, title, series),
+			ariaDescription
+		})
+	});
+}
+//#endregion
+//#region src/charts/components/bar-chart/bar-chart.tsx
+/**
+* Columns over categories — per-champion damage, per-role gold share, counts
+* by patch.
+*
+* Bars are separated by a gap in the surface rather than by an outline: a
+* stroke around a bar is ink that carries no data.
+*/
+function BarChart({ data, series, x, layout = "grouped", normalize = false, radius = 0, maxThickness = 24, height = 280, title, subtitle, actions, xLabel, yLabel, formatX, formatY, grid = true, legend, frame = true, glow = false, ariaLabel, ariaDescription, className, frameProps }) {
+	const definition = useMemo(() => {
+		const stacked = layout === "stacked";
+		const rows = foldSeries(data, series, x);
+		const colorOf = seriesColorLookup(series);
+		return {
+			marks: [barY$1(rows, {
+				id: "bars",
+				x: (row) => row.x,
+				y: (row) => row.value,
+				z: (row) => row.seriesKey,
+				fill: (row) => colorOf(row.seriesKey),
+				inset: 1,
+				maxThickness,
+				radius,
+				layout: stacked ? stack$1(normalize ? { offset: "normalize" } : void 0) : group$1({ padding: .16 })
+			})],
+			x: bandXAxis(data, x, {
+				label: xLabel,
+				format: formatX
+			}),
+			y: valueAxis({
+				label: yLabel,
+				format: formatY,
+				grid
+			}),
+			focus: series.length > 1 ? "group-x" : "nearest",
+			tooltip: hextechTooltip({
+				series,
+				xLabel,
+				yLabel,
+				formatX,
+				formatY
+			})
+		};
+	}, [
+		data,
+		formatX,
+		formatY,
+		grid,
+		layout,
+		maxThickness,
+		normalize,
+		radius,
+		series,
+		x,
+		xLabel,
+		yLabel
+	]);
+	return /* @__PURE__ */ jsx(ChartFrame, {
+		title,
+		subtitle,
+		actions,
+		preset: frame ? "framed" : "bare",
+		className,
+		footer: showLegend(series, legend) ? /* @__PURE__ */ jsx(ChartLegend, {
+			items: legendItems(series),
+			swatch: "square"
+		}) : void 0,
+		...frameProps,
+		children: /* @__PURE__ */ jsx(HextechChart, {
+			definition,
+			height,
+			glow,
+			ariaLabel: resolveAriaLabel(ariaLabel, title, series),
+			ariaDescription
+		})
+	});
+}
+//#endregion
+//#region src/charts/components/line-chart/line-chart.tsx
+/**
+* Lines over time — gold curves, damage curves, anything that only makes sense
+* read left to right.
+*
+* ```tsx
+* <LineChart
+*   title="Team gold"
+*   data={timeline}
+*   x={(row) => row.minute}
+*   series={[
+*     { key: "blue", label: "Blue side", value: (row) => row.blueGold },
+*     { key: "red", label: "Red side", value: (row) => row.redGold },
+*   ]}
+*   xLabel="Minute"
+*   yLabel="Gold"
+* />
+* ```
+*/
+function LineChart({ data, series, x, curve = "linear", points = false, area = false, crosshair: withCrosshair = true, height = 280, title, subtitle, actions, xLabel, yLabel, formatX, formatY, grid = true, legend, frame = true, glow = true, ariaLabel, ariaDescription, className, frameProps }) {
+	const definition = useMemo(() => {
+		const resolvedCurve = resolveCurve(curve);
+		const marks = [];
+		for (const [index, entry] of series.entries()) {
+			const color = seriesColor(entry, index);
+			if (area) marks.push(areaY$1(data, {
+				id: `${entry.key}-area`,
+				x,
+				y: entry.value,
+				fill: color,
+				fillOpacity: .12,
+				curve: resolvedCurve
+			}));
+			marks.push(lineY$1(data, {
+				id: entry.key,
+				x,
+				y: entry.value,
+				stroke: color,
+				strokeWidth: 2,
+				curve: resolvedCurve
+			}));
+			if (points) marks.push(dot$1(data, {
+				id: `${entry.key}-points`,
+				x,
+				y: entry.value,
+				r: 4,
+				fill: color,
+				stroke: "var(--lol-chart-surface)",
+				strokeWidth: 2
+			}));
+		}
+		if (withCrosshair) marks.push(crosshair$1({
+			x: true,
+			y: false,
+			stroke: "var(--lol-chart-frame-accent)",
+			strokeOpacity: .45
+		}));
+		return {
+			marks,
+			x: pointXAxis(data, x, {
+				label: xLabel,
+				format: formatX
+			}),
+			y: valueAxis({
+				label: yLabel,
+				format: formatY,
+				grid
+			}),
+			focus: "group-x",
+			tooltip: hextechTooltip({
+				series,
+				xLabel,
+				yLabel,
+				formatX,
+				formatY
+			})
+		};
+	}, [
+		area,
+		curve,
+		data,
+		formatX,
+		formatY,
+		grid,
+		points,
+		series,
+		withCrosshair,
+		x,
+		xLabel,
+		yLabel
+	]);
+	return /* @__PURE__ */ jsx(ChartFrame, {
+		title,
+		subtitle,
+		actions,
+		preset: frame ? "framed" : "bare",
+		className,
+		footer: showLegend(series, legend) ? /* @__PURE__ */ jsx(ChartLegend, {
+			items: legendItems(series),
+			swatch: "line"
+		}) : void 0,
+		...frameProps,
+		children: /* @__PURE__ */ jsx(HextechChart, {
+			definition,
+			height,
+			glow,
+			ariaLabel: resolveAriaLabel(ariaLabel, title, series),
+			ariaDescription
+		})
+	});
+}
+//#endregion
+//#region src/charts/components/ranking-chart/ranking-chart.tsx
+const defaultFormat = new Intl.NumberFormat();
+/**
+* A ranked horizontal bar chart — the leaderboard shape. Longest bar on top,
+* every value written at the tip.
+*
+* ```tsx
+* <RankingChart
+*   title="Damage to champions"
+*   data={scoreboard}
+*   label={(row) => row.champion}
+*   value={(row) => row.damage}
+*   formatValue={(value) => `${Math.round(value / 1000)}k`}
+* />
+* ```
+*/
+function RankingChart({ data, label, value, color, order = "descending", limit, showValues = true, formatValue, valueLabel, axis = false, height, title, subtitle, actions, frame = true, glow = false, ariaLabel, ariaDescription, className, frameProps }) {
+	const rows = useMemo(() => {
+		const mapped = data.map((datum) => ({
+			datum,
+			label: label(datum),
+			value: value(datum)
+		}));
+		if (order === "descending") mapped.sort((a, b) => b.value - a.value);
+		if (order === "ascending") mapped.sort((a, b) => a.value - b.value);
+		return (limit === void 0 ? mapped : mapped.slice(0, limit)).map((row, rank) => ({
+			...row,
+			rank
+		}));
+	}, [
+		data,
+		label,
+		limit,
+		order,
+		value
+	]);
+	const format = formatValue ?? ((input) => defaultFormat.format(input));
+	const definition = useMemo(() => {
+		const fill = (row) => typeof color === "function" ? color(row.datum, row.rank) : color ?? hextechSeriesColor(0);
+		const domain = rows.map((row) => row.label);
+		const marks = [barX$1(rows, {
+			id: "value",
+			x: (row) => row.value,
+			y: (row) => row.label,
+			fill,
+			inset: 1,
+			maxThickness: 24
+		})];
+		if (showValues) marks.push(text$1(rows, {
+			id: "value-label",
+			x: (row) => row.value,
+			y: (row) => row.label,
+			text: (row) => format(row.value),
+			fill: "var(--lol-chart-foreground)",
+			anchor: "start",
+			dx: 8,
+			fontSize: 12
+		}));
+		return {
+			marks,
+			x: {
+				scale: scaleLinear$1,
+				nice: true,
+				grid: axis,
+				axis: axis ? {
+					label: valueLabel,
+					ticks: { format }
+				} : false
+			},
+			y: {
+				scale: () => scaleBand$1().domain(domain).padding(.28),
+				axis: {
+					line: false,
+					ticks: {
+						size: 0,
+						padding: 8
+					}
+				}
+			},
+			...showValues ? { margin: { right: 56 } } : {},
+			clip: false,
+			focus: "nearest",
+			tooltip: {
+				use: tooltip$1,
+				items: [{
+					channel: "y",
+					label: "Name",
+					text: (point) => point.datum.label
+				}, {
+					channel: "x",
+					label: valueLabel,
+					text: (point) => format(point.datum.value)
+				}]
+			}
+		};
+	}, [
+		axis,
+		color,
+		format,
+		rows,
+		showValues,
+		valueLabel
+	]);
+	return /* @__PURE__ */ jsx(ChartFrame, {
+		title,
+		subtitle,
+		actions,
+		preset: frame ? "framed" : "bare",
+		className,
+		...frameProps,
+		children: /* @__PURE__ */ jsx(HextechChart, {
+			definition,
+			height: height ?? Math.max(120, rows.length * 34 + 24),
+			glow,
+			ariaLabel: ariaLabel ?? (typeof title === "string" ? title : "Ranking"),
+			ariaDescription
+		})
+	});
+}
+//#endregion
+export { AreaChart, BarChart, ChartFrame, ChartLegend, HextechChart, LineChart, RankingChart, areaY, barX, barY, crosshair, d3Curve, defineChart, dot, group, hextechChartTheme, hextechPalette, hextechPaletteSize, hextechScatterPaletteSize, hextechSeriesColor, hextechStatusColors, lineX, lineY, linearCurve, rect, ruleX, ruleY, scaleBand, scaleLinear, scaleOrdinal, scalePoint, smoothCurve, stack, stepCurve, text, tickX, tickY, tooltip, withHextechTheme };
+
+//# sourceMappingURL=charts.mjs.map