{"version":3,"file":"charts.mjs","names":["scalePoint","scaleLinear","scaleBand","tooltip","classes","classes","classes","areaY","stack","lineY","crosshair","barY","stack","group","areaY","lineY","dot","crosshair","barX","text","scaleLinear","scaleBand","tooltip"],"sources":["../src/charts/curves.ts","../src/charts/theme/theme.ts","../src/charts/components/chart-common.ts","../src/charts/components/chart-frame/chart-frame.module.css","../src/charts/components/chart-frame/chart-frame.tsx","../src/charts/components/chart-legend/chart-legend.module.css","../src/charts/components/chart-legend/chart-legend.tsx","../src/charts/components/hextech-chart/hextech-chart.module.css","../src/charts/components/hextech-chart/hextech-chart.tsx","../src/charts/components/area-chart/area-chart.tsx","../src/charts/components/bar-chart/bar-chart.tsx","../src/charts/components/line-chart/line-chart.tsx","../src/charts/components/ranking-chart/ranking-chart.tsx"],"sourcesContent":["import type { ChartCurve } from \"@tanstack/charts\";\n\n/** How a line or an area gets from one point to the next. */\nexport type ChartCurveName = \"linear\" | \"smooth\" | \"step\";\n\ntype Point = readonly [number, number];\n\n/*\n * A `ChartCurve` is only two functions from points to path data, so the three\n * shapes the charts offer are written out here rather than pulled in from\n * `d3-shape`. That keeps `@lolmath/ui/charts` down to a single optional peer —\n * TanStack Charts itself — instead of asking for a d3 package alongside it.\n *\n * `curves.test.ts` draws every case twice, once here and once with d3-shape\n * (dev-only), and compares them coordinate by coordinate — so \"written out\n * here\" never quietly becomes \"drifted from the reference\".\n */\n\n/** Path commands after the first point; the caller has written the move. */\ntype Segments = (points: readonly Point[]) => string;\n\ninterface CurveKernel {\n\tsegments: Segments;\n\t/**\n\t * The returning edge of an area, when it is not drawn the same way as the\n\t * outgoing one.\n\t */\n\tback?: Segments;\n\t/** Whether coincident points are dropped before drawing. */\n\tdedupe?: boolean;\n}\n\n/** Straight segments, like d3's `curveLinear`. */\nexport const linearCurve = makeCurve({ segments: linearSegments });\n\n/**\n * Monotone cubic interpolation over x — d3's `curveMonotoneX`, by way of\n * Steffen's method. Smooth, but it never overshoots a reading, so a rounded\n * corner cannot invent a value the data never had.\n */\nexport const smoothCurve = makeCurve({\n\tsegments: monotoneSegments,\n\t// Coincident points carry no shape and would divide by zero in the tangents.\n\tdedupe: true,\n});\n\n/** Holds each value until the next one, like d3's `curveStepAfter`. */\nexport const stepCurve = makeCurve({\n\tsegments: stepAfterSegments,\n\t// An area's two edges have to enclose the same region, so the step flips\n\t// direction on the way back — as d3's own step curve does.\n\tback: stepBeforeSegments,\n});\n\nconst CURVES: Record = {\n\tlinear: linearCurve,\n\tsmooth: smoothCurve,\n\tstep: stepCurve,\n};\n\nexport function resolveCurve(name: ChartCurveName): ChartCurve {\n\treturn CURVES[name];\n}\n\nfunction makeCurve(kernel: CurveKernel): ChartCurve {\n\tconst back = kernel.back ?? kernel.segments;\n\tconst prepare = (points: readonly Point[]) =>\n\t\tkernel.dedupe ? dedupe(points) : points;\n\n\treturn {\n\t\tline: (points) => {\n\t\t\tconst run = prepare(points);\n\t\t\tif (run.length === 0) return \"\";\n\t\t\t// A lone point has no segments to draw, and d3 closes its path.\n\t\t\tconst tail = run.length === 1 ? \"Z\" : kernel.segments(run);\n\t\t\treturn `M${pair(run[0])}${tail}`;\n\t\t},\n\n\t\t/*\n\t\t * An area is its top edge, then its bottom edge walked back to the\n\t\t * start. Both are drawn with the same interpolation, so the fill never\n\t\t * parts company with the line on top of it.\n\t\t */\n\t\tarea: (top, bottom) => {\n\t\t\tconst upper = prepare(top);\n\t\t\tconst lower = prepare([...bottom].reverse());\n\t\t\tif (upper.length === 0 || lower.length === 0) return \"\";\n\t\t\treturn (\n\t\t\t\t`M${pair(upper[0])}${upper.length === 1 ? \"\" : kernel.segments(upper)}` +\n\t\t\t\t`L${pair(lower[0])}${lower.length === 1 ? \"\" : back(lower)}Z`\n\t\t\t);\n\t\t},\n\t};\n}\n\nfunction dedupe(points: readonly Point[]): Point[] {\n\tconst run: Point[] = [];\n\tfor (const point of points) {\n\t\tconst last = run[run.length - 1];\n\t\tif (last && last[0] === point[0] && last[1] === point[1]) continue;\n\t\trun.push(point);\n\t}\n\treturn run;\n}\n\nfunction linearSegments(points: readonly Point[]): string {\n\tlet path = \"\";\n\tfor (let index = 1; index < points.length; index += 1) {\n\t\tpath += `L${pair(points[index])}`;\n\t}\n\treturn path;\n}\n\n/** Across at the height being held, then up to the new one. */\nfunction stepAfterSegments(points: readonly Point[]): string {\n\tlet path = \"\";\n\tfor (let index = 1; index < points.length; index += 1) {\n\t\tconst [x, y] = points[index];\n\t\tpath += `L${number(x)},${number(points[index - 1][1])}L${number(x)},${number(y)}`;\n\t}\n\treturn path;\n}\n\n/** Up to the new height first, then across — the mirror of the above. */\nfunction stepBeforeSegments(points: readonly Point[]): string {\n\tlet path = \"\";\n\tfor (let index = 1; index < points.length; index += 1) {\n\t\tconst [x, y] = points[index];\n\t\tpath += `L${number(points[index - 1][0])},${number(y)}L${number(x)},${number(y)}`;\n\t}\n\treturn path;\n}\n\nfunction monotoneSegments(points: readonly Point[]): string {\n\t// Two points have no interior tangent to constrain: d3 joins them straight.\n\tif (points.length < 3) return linearSegments(points);\n\n\tconst tangents = monotoneTangents(points);\n\tlet path = \"\";\n\tfor (let index = 1; index < points.length; index += 1) {\n\t\tconst [x0, y0] = points[index - 1];\n\t\tconst [x1, y1] = points[index];\n\t\t// A cubic Hermite span written as a Bézier: the control points sit a\n\t\t// third of the way along, offset by the tangent at each end.\n\t\tconst third = (x1 - x0) / 3;\n\t\tpath +=\n\t\t\t`C${number(x0 + third)},${number(y0 + third * tangents[index - 1])}` +\n\t\t\t`,${number(x1 - third)},${number(y1 - third * tangents[index])}` +\n\t\t\t`,${number(x1)},${number(y1)}`;\n\t}\n\treturn path;\n}\n\n/**\n * The tangent at every point. Interior tangents come from Steffen's rule,\n * which clamps each one to the smaller neighbouring slope and zeroes it at a\n * turning point — that clamp is what keeps the curve monotone. The two ends\n * take d3's one-sided estimate off their single neighbour.\n */\nfunction monotoneTangents(points: readonly Point[]): number[] {\n\tconst count = points.length;\n\tconst tangents = new Array(count);\n\n\tfor (let index = 1; index < count - 1; index += 1) {\n\t\ttangents[index] = steffen(\n\t\t\tpoints[index - 1],\n\t\t\tpoints[index],\n\t\t\tpoints[index + 1],\n\t\t);\n\t}\n\ttangents[0] = oneSided(points[0], points[1], tangents[1]);\n\ttangents[count - 1] = oneSided(\n\t\tpoints[count - 2],\n\t\tpoints[count - 1],\n\t\ttangents[count - 2],\n\t);\n\treturn tangents;\n}\n\nfunction steffen(before: Point, at: Point, after: Point): number {\n\tconst runBefore = at[0] - before[0];\n\tconst runAfter = after[0] - at[0];\n\t// The zero-run fallbacks are d3's: a span of no width still has to produce\n\t// a signed infinity, so the sign test below stays meaningful.\n\tconst slopeBefore =\n\t\t(at[1] - before[1]) / (runBefore || (runAfter < 0 ? -0 : 0));\n\tconst slopeAfter =\n\t\t(after[1] - at[1]) / (runAfter || (runBefore < 0 ? -0 : 0));\n\tconst parabolic =\n\t\t(slopeBefore * runAfter + slopeAfter * runBefore) / (runBefore + runAfter);\n\treturn (\n\t\t(sign(slopeBefore) + sign(slopeAfter)) *\n\t\t\tMath.min(\n\t\t\t\tMath.abs(slopeBefore),\n\t\t\t\tMath.abs(slopeAfter),\n\t\t\t\t0.5 * Math.abs(parabolic),\n\t\t\t) || 0\n\t);\n}\n\nfunction oneSided(from: Point, to: Point, neighbour: number): number {\n\tconst run = to[0] - from[0];\n\treturn run ? (3 * ((to[1] - from[1]) / run) - neighbour) / 2 : neighbour;\n}\n\nfunction sign(value: number): number {\n\treturn value < 0 ? -1 : 1;\n}\n\nfunction pair(point: Point): string {\n\treturn `${number(point[0])},${number(point[1])}`;\n}\n\n/** Trims float noise, so an unchanged scene serialises to an unchanged path. */\nfunction number(value: number): string {\n\treturn Number.isFinite(value) ? String(Math.round(value * 1e6) / 1e6) : \"0\";\n}\n","import type { ChartTheme } from \"@tanstack/charts\";\n\n/**\n * The Hextech palette, in slot order. Every entry is a CSS custom property, so\n * a host page retunes the whole library by redefining `--lol-chart-series-N`\n * rather than by threading colours through props.\n *\n * Assign these in sequence and never cycle them: a seventh series is not a\n * seventh colour, it is a sign that the chart should fold its tail into\n * \"Other\" or split into small multiples.\n */\nexport const hextechPalette = [\n\t\"var(--lol-chart-series-1)\",\n\t\"var(--lol-chart-series-2)\",\n\t\"var(--lol-chart-series-3)\",\n\t\"var(--lol-chart-series-4)\",\n\t\"var(--lol-chart-series-5)\",\n\t\"var(--lol-chart-series-6)\",\n] as const;\n\n/** How many categorical series the palette can carry. */\nexport const hextechPaletteSize = hextechPalette.length;\n\n/**\n * Dot, bubble and scatter forms are held to a harder test than bars and lines:\n * any two marks can end up touching, not just neighbouring slots. The palette\n * clears that test for its first three slots, so those forms cap at three\n * series — past that, facet rather than reach for a fourth colour.\n */\nexport const hextechScatterPaletteSize = 3;\n\n/**\n * Reserved status colours. A series that *means* good or bad — a win rate, a\n * gold lead, a delta — wears these; a series that is merely \"the third one\"\n * wears the categorical palette. Never both in one chart.\n */\nexport const hextechStatusColors = {\n\tpositive: \"var(--lol-chart-positive)\",\n\tnegative: \"var(--lol-chart-negative)\",\n} as const;\n\n/**\n * The chart theme: gold ink and a near-black plot, matching the League client.\n *\n * `background` stays transparent so the frame behind the chart — or whatever\n * the host puts there — shows through.\n */\nexport const hextechChartTheme = {\n\tforeground: \"var(--lol-chart-foreground)\",\n\tmuted: \"var(--lol-chart-muted)\",\n\tgrid: \"var(--lol-chart-grid)\",\n\tbackground: \"transparent\",\n\tpalette: hextechPalette,\n} as const satisfies ChartTheme;\n\n/** The colour for a categorical slot, counted from zero and never wrapped. */\nexport function hextechSeriesColor(index: number): string {\n\treturn hextechPalette[index] ?? hextechPalette[hextechPalette.length - 1];\n}\n\n/**\n * Applies the Hextech theme to a chart definition you wrote by hand, keeping\n * any theme fields the definition sets for itself.\n *\n * ```ts\n * const chart = withHextechTheme(defineChart({ marks: [...], x, y }));\n * ```\n */\nexport function withHextechTheme<\n\tTDefinition extends { theme?: Partial },\n>(definition: TDefinition): TDefinition {\n\treturn {\n\t\t...definition,\n\t\ttheme: { ...hextechChartTheme, ...definition.theme },\n\t};\n}\n","import type {\n\tChartAxisOptions,\n\tChartAxisPresentationOptions,\n\tChartTooltipItem,\n\tChartTooltipOptions,\n\tChartValue,\n} from \"@tanstack/charts\";\nimport { scaleBand } from \"@tanstack/charts/scales/band\";\nimport { scaleLinear } from \"@tanstack/charts/scales/linear\";\nimport { scalePoint } from \"@tanstack/charts/scales/point\";\nimport { tooltip } from \"@tanstack/charts/tooltip\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { type ChartCurveName, resolveCurve } from \"../curves\";\nimport { hextechSeriesColor } from \"../theme/theme\";\nimport type { ChartLegendItem } from \"./chart-legend/chart-legend\";\n\n/**\n * What a chart can plot along its independent axis. Dates are deliberately\n * absent: the engine ships no time scale, so map a date to a number or to a\n * pre-formatted label before it reaches a chart.\n */\nexport type ChartXValue = string | number;\n\n/** One measure drawn across the data — a line, an area, a set of bars. */\nexport interface ChartSeries {\n\t/** Stable identity. Used for React keys and for the mark's id. */\n\tkey: string;\n\t/** What the legend and the tooltip call it. Falls back to `key`. */\n\tlabel?: string;\n\t/** Reads this series' value out of a row. Return null to break the line. */\n\tvalue: (datum: TDatum) => number | null | undefined;\n\t/**\n\t * Overrides the palette slot. Reach for it when the series *means*\n\t * something — a win rate, a gold lead — and should wear a status colour.\n\t */\n\tcolor?: string;\n}\n\n/** Props every cartesian chart in this package accepts. */\nexport interface CartesianChartProps {\n\t/** One row per position along the x axis. */\n\tdata: readonly TDatum[];\n\t/** The measures to draw. Two or more get a legend. */\n\tseries: readonly ChartSeries[];\n\t/** Reads the x position out of a row. */\n\tx: (datum: TDatum) => ChartXValue;\n\t/** Plot height in pixels. The width fills the container. */\n\theight?: number;\n\t/** Names what is plotted, in the frame's header. */\n\ttitle?: ReactNode;\n\t/** A line of context under the title. */\n\tsubtitle?: ReactNode;\n\t/** Controls belonging to this chart, in the frame's header. */\n\tactions?: ReactNode;\n\t/** Axis titles. */\n\txLabel?: string;\n\tyLabel?: string;\n\t/** Tick and tooltip formatting. */\n\tformatX?: (value: ChartXValue) => string;\n\tformatY?: (value: number) => string;\n\t/** Horizontal grid lines. On by default. */\n\tgrid?: boolean;\n\t/**\n\t * Forces the legend on or off. By default it appears for two or more\n\t * series and is left off for one, whose title already names it.\n\t */\n\tlegend?: boolean;\n\t/** Drops the metal frame, keeping the type and colours. */\n\tframe?: boolean;\n\t/** Lights the marks with the hextech bloom. */\n\tglow?: boolean;\n\t/**\n\t * What a screen reader announces. Derived from a string `title` when it can\n\t * be; pass it explicitly whenever the title is a node or absent.\n\t */\n\tariaLabel?: string;\n\tariaDescription?: string;\n\tclassName?: string;\n\t/** Props for the frame element. */\n\tframeProps?: Omit<\n\t\tHTMLAttributes,\n\t\t\"title\" | \"className\" | \"children\"\n\t>;\n}\n\nexport { type ChartCurveName, resolveCurve };\n\n/** The colour a series is drawn in: its own, or its slot in the palette. */\nexport function seriesColor(\n\tseries: ChartSeries,\n\tindex: number,\n): string {\n\treturn series.color ?? hextechSeriesColor(index);\n}\n\nexport function seriesLabel(series: ChartSeries): string {\n\treturn series.label ?? series.key;\n}\n\nexport function legendItems(\n\tseries: readonly ChartSeries[],\n): ChartLegendItem[] {\n\treturn series.map((entry, index) => ({\n\t\tkey: entry.key,\n\t\tlabel: seriesLabel(entry),\n\t\tcolor: seriesColor(entry, index),\n\t}));\n}\n\n/**\n * Whether to draw the legend. One series does not get one: there is a single\n * colour, and the title already says what it is.\n */\nexport function showLegend(\n\tseries: readonly ChartSeries[],\n\tlegend: boolean | undefined,\n): boolean {\n\treturn legend ?? series.length > 1;\n}\n\n/**\n * The chart needs a label whatever the caller passed. A string title is the\n * obvious one; past that we fall back to naming the series, so the chart is\n * never announced as an unlabelled graphic.\n */\nexport function resolveAriaLabel(\n\tariaLabel: string | undefined,\n\ttitle: ReactNode,\n\tseries: readonly ChartSeries[],\n): string {\n\tif (ariaLabel) return ariaLabel;\n\tif (typeof title === \"string\") return title;\n\tif (typeof title === \"number\") return String(title);\n\tconst names = series.map(seriesLabel);\n\treturn names.length ? `Chart of ${names.join(\", \")}` : \"Chart\";\n}\n\n/** One (row, series) pair. See {@link foldSeries}. */\nexport interface FoldedRow {\n\tdatum: TDatum;\n\tseriesKey: string;\n\tx: ChartXValue;\n\tvalue: number | null | undefined;\n}\n\n/**\n * Folds wide rows into one row per (row, series) pair.\n *\n * Grouping and stacking are computed *within* a mark, off its series channel —\n * so a grouped or stacked chart is a single mark over folded data, not one mark\n * per series. Rows come out x-major, which keeps a stack in the order the\n * `series` array declares.\n */\nexport function foldSeries(\n\tdata: readonly TDatum[],\n\tseries: readonly ChartSeries[],\n\tx: (datum: TDatum) => ChartXValue,\n): FoldedRow[] {\n\tconst rows: FoldedRow[] = [];\n\tfor (const datum of data) {\n\t\tconst xValue = x(datum);\n\t\tfor (const entry of series) {\n\t\t\trows.push({\n\t\t\t\tdatum,\n\t\t\t\tseriesKey: entry.key,\n\t\t\t\tx: xValue,\n\t\t\t\tvalue: entry.value(datum),\n\t\t\t});\n\t\t}\n\t}\n\treturn rows;\n}\n\n/** Looks up each series' colour by key, for a folded mark's `fill`. */\nexport function seriesColorLookup(\n\tseries: readonly ChartSeries[],\n): (key: string) => string {\n\tconst colors = new Map(\n\t\tseries.map((entry, index) => [entry.key, seriesColor(entry, index)]),\n\t);\n\treturn (key) =>\n\t\tcolors.get(key) ?? seriesColor(series[0] ?? { key, value: () => 0 }, 0);\n}\n\n/** Every distinct x value, in the order the data first mentions it. */\nexport function xDomain(\n\tdata: readonly TDatum[],\n\tx: (datum: TDatum) => ChartXValue,\n): ChartXValue[] {\n\tconst seen = new Set();\n\tconst domain: ChartXValue[] = [];\n\tfor (const datum of data) {\n\t\tconst value = x(datum);\n\t\tif (seen.has(value)) continue;\n\t\tseen.add(value);\n\t\tdomain.push(value);\n\t}\n\treturn domain;\n}\n\n/** Categorical unless every x is a number. */\nexport function isCategoricalX(\n\tdata: readonly TDatum[],\n\tx: (datum: TDatum) => ChartXValue,\n): boolean {\n\treturn data.some((datum) => typeof x(datum) !== \"number\");\n}\n\n/**\n * The x axis for a chart whose marks sit *between* positions — lines, areas,\n * dots. Categorical data gets a point scale; numbers get a linear one.\n */\nexport function pointXAxis(\n\tdata: readonly TDatum[],\n\tx: (datum: TDatum) => ChartXValue,\n\toptions: { label?: string; format?: (value: ChartXValue) => string },\n): ChartAxisOptions {\n\tconst categorical = isCategoricalX(data, x);\n\tconst domain = xDomain(data, x);\n\treturn {\n\t\tscale: categorical\n\t\t\t? () => scalePoint().domain(domain).padding(0.2)\n\t\t\t: (scaleLinear as unknown as ChartAxisOptions[\"scale\"]),\n\t\tnice: !categorical,\n\t\taxis: axisPresentation(options),\n\t};\n}\n\n/** The x axis for marks that occupy a slot: bars and their labels. */\nexport function bandXAxis(\n\tdata: readonly TDatum[],\n\tx: (datum: TDatum) => ChartXValue,\n\toptions: {\n\t\tlabel?: string;\n\t\tformat?: (value: ChartXValue) => string;\n\t\tpadding?: number;\n\t},\n): ChartAxisOptions {\n\tconst domain = xDomain(data, x);\n\treturn {\n\t\tscale: () =>\n\t\t\tscaleBand()\n\t\t\t\t.domain(domain)\n\t\t\t\t.padding(options.padding ?? 0.24),\n\t\taxis: axisPresentation(options),\n\t};\n}\n\n/** A linear measure axis, niced and — usually — gridded. */\nexport function valueAxis(options: {\n\tlabel?: string;\n\tformat?: (value: number) => string;\n\tgrid?: boolean;\n}): ChartAxisOptions {\n\treturn {\n\t\tscale: scaleLinear,\n\t\tnice: true,\n\t\tgrid: options.grid ?? true,\n\t\taxis: axisPresentation(options),\n\t};\n}\n\nfunction axisPresentation(options: {\n\tlabel?: string;\n\tformat?: (value: TValue) => string;\n}): ChartAxisPresentationOptions {\n\treturn {\n\t\tlabel: options.label,\n\t\tticks: options.format ? { format: options.format } : undefined,\n\t};\n}\n\n/**\n * The tooltip, wired so it speaks the caller's labels and formats rather than\n * the raw channel values. The `group` item is what turns \"line-0\" into\n * \"Blue side\" on a shared-x tooltip.\n */\nexport function hextechTooltip(args: {\n\tseries: readonly ChartSeries[];\n\txLabel?: string;\n\tyLabel?: string;\n\tformatX?: (value: ChartXValue) => string;\n\tformatY?: (value: number) => string;\n}): { use: typeof tooltip } & ChartTooltipOptions {\n\tconst labels = new Map(\n\t\targs.series.map((entry) => [entry.key, seriesLabel(entry)]),\n\t);\n\tconst items: ChartTooltipItem[] = [\n\t\t{\n\t\t\tchannel: \"x\",\n\t\t\tlabel: args.xLabel,\n\t\t\ttext: (point) => formatChartValue(point.xValue, args.formatX),\n\t\t},\n\t\t{\n\t\t\tchannel: \"y\",\n\t\t\tlabel: args.yLabel,\n\t\t\ttext: (point) => formatChartValue(point.yValue, args.formatY),\n\t\t},\n\t];\n\tif (args.series.length > 1) {\n\t\titems.push({\n\t\t\tchannel: \"group\",\n\t\t\t// One mark per series names the series in `markId`; a folded mark\n\t\t\t// names it in the series channel. Either way the reader sees the\n\t\t\t// label they wrote, not a mark id.\n\t\t\ttext: (point) =>\n\t\t\t\tlabels.get(String(point.group ?? point.markId)) ?? point.groupLabel,\n\t\t});\n\t}\n\treturn { use: tooltip, items };\n}\n\n/** Row-level accessor for a tooltip item, tolerant of the widened value type. */\nfunction formatChartValue(\n\tvalue: unknown,\n\tformat?: ((value: never) => string) | undefined,\n): string {\n\tif (format) return (format as (value: unknown) => string)(value);\n\tif (typeof value === \"number\") return numberFormat.format(value);\n\treturn String(value);\n}\n\nconst numberFormat = new Intl.NumberFormat();\n","@layer lol {\n\t/*\n\t * \"Metal linework as a framing element to support and draw focus towards\n\t * key pieces of information.\" The frame is a one-pixel hairline and nothing\n\t * more: a gradient painted into the border box, the plot painted into the\n\t * padding box. Anything heavier would compete with the data.\n\t */\n\t.frame {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tposition: relative;\n\t\tborder: 1px solid transparent;\n\t\tbackground:\n\t\t\tvar(--lol-chart-frame-fill) padding-box,\n\t\t\tvar(--lol-chart-frame-border) border-box;\n\t\tcolor: var(--lol-chart-foreground);\n\t\tfont-family: var(--lol-chart-font-body);\n\t\t/* A
: the UA gives it 1em block and 40px inline margins. */\n\t\tmargin: 0;\n\t\tpadding: 1rem 1.125rem 1.125rem;\n\t\tgap: 0.75rem;\n\t}\n\n\t/* Unframed: the same type and colours, no metal. For charts that already\n\t * sit inside a panel of their own. */\n\t.bare {\n\t\tborder-color: transparent;\n\t\tbackground: none;\n\t\tpadding: 0;\n\t}\n\n\t/*\n\t * The diamond is the language's accent piece — it \"guides attention toward\n\t * key information\". Four of them pin the frame's corners to the grid the\n\t * square establishes. They are decoration, so they are hidden from the\n\t * accessibility tree by the component.\n\t */\n\t.corner {\n\t\tposition: absolute;\n\t\twidth: 5px;\n\t\theight: 5px;\n\t\trotate: 45deg;\n\t\tborder: 1px solid var(--lol-chart-frame-accent);\n\t\tbackground: var(--lol-chart-surface);\n\t}\n\n\t.bare .corner {\n\t\tdisplay: none;\n\t}\n\n\t.cornerTopLeft {\n\t\ttop: -3px;\n\t\tleft: -3px;\n\t}\n\n\t.cornerTopRight {\n\t\ttop: -3px;\n\t\tright: -3px;\n\t}\n\n\t.cornerBottomLeft {\n\t\tbottom: -3px;\n\t\tleft: -3px;\n\t}\n\n\t.cornerBottomRight {\n\t\tbottom: -3px;\n\t\tright: -3px;\n\t}\n\n\t.header {\n\t\tdisplay: flex;\n\t\talign-items: flex-start;\n\t\tjustify-content: space-between;\n\t\tgap: 1rem;\n\t}\n\n\t.headings {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tgap: 0.125rem;\n\t\tmin-width: 0;\n\t}\n\n\t/* Beaufort, spaced and uppercased — the client's voice for anything that\n\t * names a thing rather than measures it. */\n\t.title {\n\t\tmargin: 0;\n\t\tfont-family: var(--lol-chart-font-display);\n\t\tfont-size: var(--lol-font-size-h5, 1.1667rem);\n\t\tline-height: var(--lol-line-height-h5, 1.5);\n\t\tletter-spacing: var(--lol-letter-spacing-h5, 0.075em);\n\t\tfont-weight: var(--lol-font-weight-h5, 700);\n\t\ttext-transform: uppercase;\n\t\tcolor: var(--lol-chart-foreground);\n\t}\n\n\t.subtitle {\n\t\tmargin: 0;\n\t\tfont-size: var(--lol-font-size-sm, 0.875rem);\n\t\tline-height: var(--lol-line-height-sm, 1.1025rem);\n\t\tletter-spacing: var(--lol-letter-spacing-sm, 0.02em);\n\t\tcolor: var(--lol-chart-muted);\n\t}\n\n\t.actions {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tgap: 0.5rem;\n\t\tflex-shrink: 0;\n\t}\n\n\t/* A rule terminated at both ends by a diamond: the same figure the client\n\t * draws under every panel heading. */\n\t.rule {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tgap: 0.375rem;\n\t}\n\n\t.ruleLine {\n\t\theight: 1px;\n\t\tflex-grow: 1;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tbackground-image: linear-gradient(\n\t\t\tto right,\n\t\t\ttransparent,\n\t\t\tvar(--lol-chart-frame-rule) 15%,\n\t\t\tvar(--lol-chart-frame-rule) 85%,\n\t\t\ttransparent\n\t\t);\n\t}\n\n\t.ruleDiamond {\n\t\twidth: 4px;\n\t\theight: 4px;\n\t\trotate: 45deg;\n\t\tborder: 1px solid var(--lol-chart-frame-rule);\n\t\tflex-shrink: 0;\n\t}\n\n\t.body {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tmin-width: 0;\n\t}\n\n\t.footer {\n\t\tdisplay: flex;\n\t\tflex-wrap: wrap;\n\t\talign-items: center;\n\t\tjustify-content: space-between;\n\t\tgap: 0.5rem 1rem;\n\t}\n}\n","import { cx } from \"cva\";\nimport type { HTMLAttributes, JSX, ReactNode } from \"react\";\nimport classes from \"./chart-frame.module.css\";\n\nexport interface ChartFrameProps\n\textends Omit, \"title\"> {\n\t/** Names what is plotted. Set in Beaufort, uppercased, like the client. */\n\ttitle?: ReactNode;\n\t/** One line of context under the title — a patch, a rank, a sample size. */\n\tsubtitle?: ReactNode;\n\t/** Controls that belong to this chart: a range picker, a toggle group. */\n\tactions?: ReactNode;\n\t/** Rendered under the plot. The chart components put the legend here. */\n\tfooter?: ReactNode;\n\t/** Drops the metal, keeping the type and colours. */\n\tpreset?: \"framed\" | \"bare\";\n\tchildren?: ReactNode;\n}\n\n/**\n * The panel a Hextech chart sits in: a gold hairline, diamond corners, a title\n * in Beaufort and a rule under it.\n *\n * Every chart in this package renders one of these. Reach for it directly when\n * you are building a chart of your own and want it to sit alongside them.\n */\nexport function ChartFrame({\n\ttitle,\n\tsubtitle,\n\tactions,\n\tfooter,\n\tpreset = \"framed\",\n\tclassName,\n\tchildren,\n\t...rest\n}: ChartFrameProps): JSX.Element {\n\tconst hasHeader = title !== undefined || subtitle !== undefined || actions;\n\n\treturn (\n\t\t\n\t\t\t{hasHeader && (\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t{title !== undefined &&

{title}

}\n\t\t\t\t\t\t{subtitle !== undefined && (\n\t\t\t\t\t\t\t

{subtitle}

\n\t\t\t\t\t\t)}\n\t\t\t\t\t
\n\t\t\t\t\t{actions &&
{actions}
}\n\t\t\t\t
\n\t\t\t)}\n\n\t\t\t{hasHeader && (\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t)}\n\n\t\t\t
{children}
\n\n\t\t\t{footer &&
{footer}
}\n\n\t\t\t{/* Last, not first: `figcaption` has to be the figure's first or last\n\t\t\t child, and the caption claims the first slot. */}\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t
\n\t);\n}\n","@layer lol {\n\t.legend {\n\t\tdisplay: flex;\n\t\tflex-wrap: wrap;\n\t\talign-items: center;\n\t\tgap: 0.375rem 1.25rem;\n\t\t/* A
    : the UA gives it block margins and a list marker. */\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\tlist-style: none;\n\t}\n\n\t.item {\n\t\tdisplay: inline-flex;\n\t\talign-items: center;\n\t\tgap: 0.5rem;\n\t\t/* Never the series colour. Identity comes from the swatch beside the\n\t\t * label; a light teal or gold set as text would not clear contrast. */\n\t\tcolor: var(--lol-chart-muted);\n\t\tfont-size: var(--lol-font-size-sm, 0.875rem);\n\t\tline-height: var(--lol-line-height-sm, 1.1025rem);\n\t\tletter-spacing: var(--lol-letter-spacing-sm, 0.02em);\n\t}\n\n\t/* The diamond again, at series scale, lit by the hue it stands for. */\n\t.swatch {\n\t\twidth: 0.5rem;\n\t\theight: 0.5rem;\n\t\tflex-shrink: 0;\n\t\trotate: 45deg;\n\t\tbackground: var(--lol-chart-legend-color);\n\t\tbox-shadow: 0 0 5px var(--lol-chart-legend-color);\n\t}\n\n\t.square {\n\t\trotate: none;\n\t}\n\n\t.line {\n\t\twidth: 0.875rem;\n\t\theight: 2px;\n\t\trotate: none;\n\t\tbox-shadow: none;\n\t}\n}\n","import { cx } from \"cva\";\nimport type { CSSProperties, HTMLAttributes, JSX } from \"react\";\nimport classes from \"./chart-legend.module.css\";\n\nexport interface ChartLegendItem {\n\t/** Stable identity for the entry. */\n\tkey: string;\n\t/** What the reader sees. Falls back to `key`. */\n\tlabel?: string;\n\t/** The colour of the mark this entry stands for. */\n\tcolor: string;\n}\n\nexport interface ChartLegendProps extends HTMLAttributes {\n\titems: readonly ChartLegendItem[];\n\t/** Matches the swatch to the mark: a diamond, a square, or a line key. */\n\tswatch?: \"diamond\" | \"square\" | \"line\";\n}\n\n/**\n * The legend every multi-series chart carries.\n *\n * Colour alone is never allowed to be the only way to tell two series apart,\n * so this is not optional decoration — a chart with two or more series renders\n * one. A single-series chart does not: its title already says what is plotted,\n * and a lone swatch would only restate it.\n */\nexport function ChartLegend({\n\titems,\n\tswatch = \"diamond\",\n\tclassName,\n\t...rest\n}: ChartLegendProps): JSX.Element {\n\treturn (\n\t\t
      \n\t\t\t{items.map((item) => (\n\t\t\t\t
    • \n\t\t\t\t\t\n\t\t\t\t\t{item.label ?? item.key}\n\t\t\t\t
      • \n\t\t\t))}\n\t\t
    \n\t);\n}\n","@layer lol {\n\t.chart {\n\t\twidth: 100%;\n\t\tmin-width: 0;\n\t}\n}\n","import type { ChartValue, DomChartDefinition } from \"@tanstack/charts\";\nimport { Chart, type ChartProps } from \"@tanstack/charts/react\";\nimport { cx } from \"cva\";\nimport { type HTMLAttributes, type JSX, useMemo } from \"react\";\nimport { hextechChartTheme, withHextechTheme } from \"../../theme/theme\";\nimport classes from \"./hextech-chart.module.css\";\n\nexport interface HextechChartProps<\n\tTDatum = unknown,\n\tTXValue extends ChartValue = ChartValue,\n\tTYValue extends ChartValue = ChartValue,\n> extends ChartProps {\n\t/**\n\t * Lights the marks with the faint hextech bloom. On by default — turn it\n\t * off for dense charts, where a glow on every line turns into haze.\n\t */\n\tglow?: boolean;\n\t/** Props for the element wrapping the plot. */\n\twrapperProps?: HTMLAttributes;\n}\n\n/**\n * A TanStack chart wearing the Hextech theme, with no frame around it.\n *\n * Use it when you have written a `defineChart` definition of your own and want\n * it to look like the rest of the library. The theme is merged into the\n * definition, so anything the definition sets for itself still wins.\n */\nexport function HextechChart<\n\tTDatum,\n\tTXValue extends ChartValue = ChartValue,\n\tTYValue extends ChartValue = ChartValue,\n>({\n\tdefinition,\n\tglow = true,\n\tclassName,\n\twrapperProps,\n\t...rest\n}: HextechChartProps): JSX.Element {\n\tconst themed = useMemo(() => applyHextechTheme(definition), [definition]);\n\tconst { className: wrapperClassName, ...restWrapperProps } =\n\t\twrapperProps ?? {};\n\n\treturn (\n\t\t\n\t\t\t\n\t\t\n\t);\n}\n\n/**\n * Merges the theme in. A responsive definition builds its spec per size, so the\n * theme has to go on what the builder returns rather than on the definition.\n */\nfunction applyHextechTheme<\n\tTDatum,\n\tTXValue extends ChartValue,\n\tTYValue extends ChartValue,\n>(\n\tdefinition: DomChartDefinition,\n): DomChartDefinition {\n\tif (\"chart\" in definition) {\n\t\tconst build = definition.chart;\n\t\treturn {\n\t\t\t...definition,\n\t\t\tchart: (context) => withHextechTheme(build(context)),\n\t\t};\n\t}\n\treturn {\n\t\t...definition,\n\t\ttheme: { ...hextechChartTheme, ...definition.theme },\n\t};\n}\n","import type { ChartMark, DomChartDefinition } from \"@tanstack/charts\";\nimport { areaY, crosshair, lineY, stack } from \"@tanstack/charts\";\nimport type { JSX } from \"react\";\nimport { useMemo } from \"react\";\nimport {\n\ttype CartesianChartProps,\n\ttype ChartCurveName,\n\ttype ChartXValue,\n\tfoldSeries,\n\thextechTooltip,\n\tlegendItems,\n\tpointXAxis,\n\tresolveAriaLabel,\n\tresolveCurve,\n\tseriesColor,\n\tseriesColorLookup,\n\tshowLegend,\n\tvalueAxis,\n} from \"../chart-common\";\nimport { ChartFrame } from \"../chart-frame/chart-frame\";\nimport { ChartLegend } from \"../chart-legend/chart-legend\";\nimport { HextechChart } from \"../hextech-chart/hextech-chart\";\n\nexport interface AreaChartProps extends CartesianChartProps {\n\t/** How the boundary travels between points. */\n\tcurve?: ChartCurveName;\n\t/**\n\t * Stacks the series into a total instead of overlaying them. Stack when the\n\t * parts genuinely sum to something — damage by source, gold by lane.\n\t */\n\tstacked?: boolean;\n\t/**\n\t * Turns a stack into shares of 100%. Only meaningful when `stacked`.\n\t */\n\tnormalize?: boolean;\n\t/** Draws the boundary of each area. On by default. */\n\tstroke?: boolean;\n\t/** Follows the pointer with a vertical guide. On by default. */\n\tcrosshair?: boolean;\n}\n\n/**\n * Filled areas — a composition over time, or a single magnitude you want to\n * read as volume rather than as a trace.\n *\n * Overlaid areas (the default) are only honest for two or three series; past\n * that the ones behind disappear. Stack them, or split into small multiples.\n */\nexport function AreaChart({\n\tdata,\n\tseries,\n\tx,\n\tcurve = \"linear\",\n\tstacked = false,\n\tnormalize = false,\n\tstroke = true,\n\tcrosshair: withCrosshair = true,\n\theight = 280,\n\ttitle,\n\tsubtitle,\n\tactions,\n\txLabel,\n\tyLabel,\n\tformatX,\n\tformatY,\n\tgrid = true,\n\tlegend,\n\tframe = true,\n\tglow = true,\n\tariaLabel,\n\tariaDescription,\n\tclassName,\n\tframeProps,\n}: AreaChartProps): JSX.Element {\n\tconst definition = useMemo(() => {\n\t\tconst resolvedCurve = resolveCurve(curve);\n\t\tconst marks: ChartMark[] = [];\n\n\t\tif (stacked) {\n\t\t\t// A stack is resolved inside one mark, off its series channel, so the\n\t\t\t// wide rows are folded rather than split into a mark each.\n\t\t\tconst rows = foldSeries(data, series, x);\n\t\t\tconst colorOf = seriesColorLookup(series);\n\t\t\tmarks.push(\n\t\t\t\tareaY(rows, {\n\t\t\t\t\tid: \"areas\",\n\t\t\t\t\tx: (row) => row.x,\n\t\t\t\t\ty: (row) => row.value,\n\t\t\t\t\tz: (row) => row.seriesKey,\n\t\t\t\t\tfill: (row) => colorOf(row.seriesKey),\n\t\t\t\t\t// A stack reads as blocks, so it can carry more ink than an\n\t\t\t\t\t// overlay, where the series behind have to stay visible.\n\t\t\t\t\tfillOpacity: 0.62,\n\t\t\t\t\tcurve: resolvedCurve,\n\t\t\t\t\tlayout: stack(normalize ? { offset: \"normalize\" } : undefined),\n\t\t\t\t\t...(stroke\n\t\t\t\t\t\t? { stroke: \"var(--lol-chart-surface)\", strokeWidth: 1 }\n\t\t\t\t\t\t: {}),\n\t\t\t\t}) as unknown as ChartMark,\n\t\t\t);\n\t\t} else {\n\t\t\tfor (const [index, entry] of series.entries()) {\n\t\t\t\tconst color = seriesColor(entry, index);\n\n\t\t\t\tmarks.push(\n\t\t\t\t\tareaY(data, {\n\t\t\t\t\t\tid: entry.key,\n\t\t\t\t\t\tx,\n\t\t\t\t\t\ty: entry.value,\n\t\t\t\t\t\tfill: color,\n\t\t\t\t\t\tfillOpacity: 0.16,\n\t\t\t\t\t\tcurve: resolvedCurve,\n\t\t\t\t\t}) as ChartMark,\n\t\t\t\t);\n\n\t\t\t\t// An overlay's fill is too faint to trace, so the reading lives on\n\t\t\t\t// a full-weight line drawn over the top of every wash.\n\t\t\t\tif (stroke) {\n\t\t\t\t\tmarks.push(\n\t\t\t\t\t\tlineY(data, {\n\t\t\t\t\t\t\tid: `${entry.key}-line`,\n\t\t\t\t\t\t\tx,\n\t\t\t\t\t\t\ty: entry.value,\n\t\t\t\t\t\t\tstroke: color,\n\t\t\t\t\t\t\tstrokeWidth: 2,\n\t\t\t\t\t\t\tcurve: resolvedCurve,\n\t\t\t\t\t\t}) as ChartMark,\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\tif (withCrosshair) {\n\t\t\tmarks.push(\n\t\t\t\tcrosshair({\n\t\t\t\t\tx: true,\n\t\t\t\t\ty: false,\n\t\t\t\t\tstroke: \"var(--lol-chart-frame-accent)\",\n\t\t\t\t\tstrokeOpacity: 0.45,\n\t\t\t\t}) as unknown as ChartMark,\n\t\t\t);\n\t\t}\n\n\t\treturn {\n\t\t\tmarks,\n\t\t\tx: pointXAxis(data, x, { label: xLabel, format: formatX }),\n\t\t\ty: valueAxis({ label: yLabel, format: formatY, grid }),\n\t\t\tfocus: \"group-x\",\n\t\t\ttooltip: hextechTooltip({\n\t\t\t\tseries,\n\t\t\t\txLabel,\n\t\t\t\tyLabel,\n\t\t\t\tformatX,\n\t\t\t\tformatY,\n\t\t\t}),\n\t\t} as unknown as DomChartDefinition;\n\t}, [\n\t\tcurve,\n\t\tdata,\n\t\tformatX,\n\t\tformatY,\n\t\tgrid,\n\t\tnormalize,\n\t\tseries,\n\t\tstacked,\n\t\tstroke,\n\t\twithCrosshair,\n\t\tx,\n\t\txLabel,\n\t\tyLabel,\n\t]);\n\n\treturn (\n\t\t\n\t\t\t\t) : undefined\n\t\t\t}\n\t\t\t{...frameProps}\n\t\t>\n\t\t\t\n\t\t\n\t);\n}\n","import type { ChartMark, DomChartDefinition } from \"@tanstack/charts\";\nimport { barY, group, stack } from \"@tanstack/charts\";\nimport type { JSX } from \"react\";\nimport { useMemo } from \"react\";\nimport {\n\tbandXAxis,\n\ttype CartesianChartProps,\n\ttype ChartXValue,\n\tfoldSeries,\n\thextechTooltip,\n\tlegendItems,\n\tresolveAriaLabel,\n\tseriesColorLookup,\n\tshowLegend,\n\tvalueAxis,\n} from \"../chart-common\";\nimport { ChartFrame } from \"../chart-frame/chart-frame\";\nimport { ChartLegend } from \"../chart-legend/chart-legend\";\nimport { HextechChart } from \"../hextech-chart/hextech-chart\";\n\nexport interface BarChartProps extends CartesianChartProps {\n\t/**\n\t * Side by side or stacked. Group when the series are compared against each\n\t * other; stack when they sum to a whole.\n\t */\n\tlayout?: \"grouped\" | \"stacked\";\n\t/** Turns a stack into shares of 100%. Only meaningful when stacked. */\n\tnormalize?: boolean;\n\t/**\n\t * Corner radius. Zero by default: Hextech is chamfered and square, and the\n\t * square is the shape the language uses to sit things on a grid.\n\t */\n\tradius?: number;\n\t/** Widest a bar is allowed to get, in pixels. */\n\tmaxThickness?: number;\n}\n\n/**\n * Columns over categories — per-champion damage, per-role gold share, counts\n * by patch.\n *\n * Bars are separated by a gap in the surface rather than by an outline: a\n * stroke around a bar is ink that carries no data.\n */\nexport function BarChart({\n\tdata,\n\tseries,\n\tx,\n\tlayout = \"grouped\",\n\tnormalize = false,\n\tradius = 0,\n\tmaxThickness = 24,\n\theight = 280,\n\ttitle,\n\tsubtitle,\n\tactions,\n\txLabel,\n\tyLabel,\n\tformatX,\n\tformatY,\n\tgrid = true,\n\tlegend,\n\tframe = true,\n\tglow = false,\n\tariaLabel,\n\tariaDescription,\n\tclassName,\n\tframeProps,\n}: BarChartProps): JSX.Element {\n\tconst definition = useMemo(() => {\n\t\tconst stacked = layout === \"stacked\";\n\t\t// Grouping and stacking are resolved inside one mark, off its series\n\t\t// channel, so the wide rows are folded rather than split into a mark\n\t\t// each. A single series needs neither and keeps its rows as they are.\n\t\tconst rows = foldSeries(data, series, x);\n\t\tconst colorOf = seriesColorLookup(series);\n\n\t\tconst marks = [\n\t\t\tbarY(rows, {\n\t\t\t\tid: \"bars\",\n\t\t\t\tx: (row) => row.x,\n\t\t\t\ty: (row) => row.value,\n\t\t\t\tz: (row) => row.seriesKey,\n\t\t\t\tfill: (row) => colorOf(row.seriesKey),\n\t\t\t\t// One pixel off each edge leaves a two-pixel channel of surface\n\t\t\t\t// between neighbours — the gap does the separating.\n\t\t\t\tinset: 1,\n\t\t\t\tmaxThickness,\n\t\t\t\tradius,\n\t\t\t\tlayout: stacked\n\t\t\t\t\t? stack(normalize ? { offset: \"normalize\" } : undefined)\n\t\t\t\t\t: group({ padding: 0.16 }),\n\t\t\t}),\n\t\t] as ChartMark[];\n\n\t\treturn {\n\t\t\tmarks,\n\t\t\tx: bandXAxis(data, x, { label: xLabel, format: formatX }),\n\t\t\ty: valueAxis({ label: yLabel, format: formatY, grid }),\n\t\t\tfocus: series.length > 1 ? \"group-x\" : \"nearest\",\n\t\t\ttooltip: hextechTooltip({\n\t\t\t\tseries,\n\t\t\t\txLabel,\n\t\t\t\tyLabel,\n\t\t\t\tformatX,\n\t\t\t\tformatY,\n\t\t\t}),\n\t\t} as unknown as DomChartDefinition;\n\t}, [\n\t\tdata,\n\t\tformatX,\n\t\tformatY,\n\t\tgrid,\n\t\tlayout,\n\t\tmaxThickness,\n\t\tnormalize,\n\t\tradius,\n\t\tseries,\n\t\tx,\n\t\txLabel,\n\t\tyLabel,\n\t]);\n\n\treturn (\n\t\t\n\t\t\t\t) : undefined\n\t\t\t}\n\t\t\t{...frameProps}\n\t\t>\n\t\t\t\n\t\t\n\t);\n}\n","import type { ChartMark, DomChartDefinition } from \"@tanstack/charts\";\nimport { areaY, crosshair, dot, lineY } from \"@tanstack/charts\";\nimport type { JSX } from \"react\";\nimport { useMemo } from \"react\";\nimport {\n\ttype CartesianChartProps,\n\ttype ChartCurveName,\n\ttype ChartXValue,\n\thextechTooltip,\n\tlegendItems,\n\tpointXAxis,\n\tresolveAriaLabel,\n\tresolveCurve,\n\tseriesColor,\n\tshowLegend,\n\tvalueAxis,\n} from \"../chart-common\";\nimport { ChartFrame } from \"../chart-frame/chart-frame\";\nimport { ChartLegend } from \"../chart-legend/chart-legend\";\nimport { HextechChart } from \"../hextech-chart/hextech-chart\";\n\nexport interface LineChartProps extends CartesianChartProps {\n\t/** How the line travels between points. Straight by default. */\n\tcurve?: ChartCurveName;\n\t/** Marks each reading with a dot. Worth it below ~30 points a series. */\n\tpoints?: boolean;\n\t/** Washes the area under each line in its own hue. */\n\tarea?: boolean;\n\t/** Follows the pointer with a vertical guide. On by default. */\n\tcrosshair?: boolean;\n}\n\n/**\n * Lines over time — gold curves, damage curves, anything that only makes sense\n * read left to right.\n *\n * ```tsx\n * row.minute}\n * series={[\n * { key: \"blue\", label: \"Blue side\", value: (row) => row.blueGold },\n * { key: \"red\", label: \"Red side\", value: (row) => row.redGold },\n * ]}\n * xLabel=\"Minute\"\n * yLabel=\"Gold\"\n * />\n * ```\n */\nexport function LineChart({\n\tdata,\n\tseries,\n\tx,\n\tcurve = \"linear\",\n\tpoints = false,\n\tarea = false,\n\tcrosshair: withCrosshair = true,\n\theight = 280,\n\ttitle,\n\tsubtitle,\n\tactions,\n\txLabel,\n\tyLabel,\n\tformatX,\n\tformatY,\n\tgrid = true,\n\tlegend,\n\tframe = true,\n\tglow = true,\n\tariaLabel,\n\tariaDescription,\n\tclassName,\n\tframeProps,\n}: LineChartProps): JSX.Element {\n\tconst definition = useMemo(() => {\n\t\tconst resolvedCurve = resolveCurve(curve);\n\t\tconst marks: ChartMark[] = [];\n\n\t\tfor (const [index, entry] of series.entries()) {\n\t\t\tconst color = seriesColor(entry, index);\n\n\t\t\tif (area) {\n\t\t\t\tmarks.push(\n\t\t\t\t\tareaY(data, {\n\t\t\t\t\t\tid: `${entry.key}-area`,\n\t\t\t\t\t\tx,\n\t\t\t\t\t\ty: entry.value,\n\t\t\t\t\t\tfill: color,\n\t\t\t\t\t\t// A wash, never a saturated block: the line carries the\n\t\t\t\t\t\t// reading, the fill only says which side of it is \"under\".\n\t\t\t\t\t\tfillOpacity: 0.12,\n\t\t\t\t\t\tcurve: resolvedCurve,\n\t\t\t\t\t}) as ChartMark,\n\t\t\t\t);\n\t\t\t}\n\n\t\t\tmarks.push(\n\t\t\t\tlineY(data, {\n\t\t\t\t\tid: entry.key,\n\t\t\t\t\tx,\n\t\t\t\t\ty: entry.value,\n\t\t\t\t\tstroke: color,\n\t\t\t\t\tstrokeWidth: 2,\n\t\t\t\t\tcurve: resolvedCurve,\n\t\t\t\t}) as ChartMark,\n\t\t\t);\n\n\t\t\tif (points) {\n\t\t\t\tmarks.push(\n\t\t\t\t\tdot(data, {\n\t\t\t\t\t\tid: `${entry.key}-points`,\n\t\t\t\t\t\tx,\n\t\t\t\t\t\ty: entry.value,\n\t\t\t\t\t\tr: 4,\n\t\t\t\t\t\tfill: color,\n\t\t\t\t\t\t// A ring in the surface colour, so a dot stays legible\n\t\t\t\t\t\t// where it crosses another series' line.\n\t\t\t\t\t\tstroke: \"var(--lol-chart-surface)\",\n\t\t\t\t\t\tstrokeWidth: 2,\n\t\t\t\t\t}) as ChartMark,\n\t\t\t\t);\n\t\t\t}\n\t\t}\n\n\t\tif (withCrosshair) {\n\t\t\tmarks.push(\n\t\t\t\tcrosshair({\n\t\t\t\t\tx: true,\n\t\t\t\t\ty: false,\n\t\t\t\t\tstroke: \"var(--lol-chart-frame-accent)\",\n\t\t\t\t\tstrokeOpacity: 0.45,\n\t\t\t\t}) as unknown as ChartMark,\n\t\t\t);\n\t\t}\n\n\t\treturn {\n\t\t\tmarks,\n\t\t\tx: pointXAxis(data, x, { label: xLabel, format: formatX }),\n\t\t\ty: valueAxis({ label: yLabel, format: formatY, grid }),\n\t\t\t// Every series at the hovered x at once: comparing two gold curves is\n\t\t\t// the whole reason the chart exists.\n\t\t\tfocus: \"group-x\",\n\t\t\ttooltip: hextechTooltip({\n\t\t\t\tseries,\n\t\t\t\txLabel,\n\t\t\t\tyLabel,\n\t\t\t\tformatX,\n\t\t\t\tformatY,\n\t\t\t}),\n\t\t} as unknown as DomChartDefinition;\n\t}, [\n\t\tarea,\n\t\tcurve,\n\t\tdata,\n\t\tformatX,\n\t\tformatY,\n\t\tgrid,\n\t\tpoints,\n\t\tseries,\n\t\twithCrosshair,\n\t\tx,\n\t\txLabel,\n\t\tyLabel,\n\t]);\n\n\treturn (\n\t\t\n\t\t\t\t) : undefined\n\t\t\t}\n\t\t\t{...frameProps}\n\t\t>\n\t\t\t\n\t\t\n\t);\n}\n","import type { ChartMark, DomChartDefinition } from \"@tanstack/charts\";\nimport { barX, text } from \"@tanstack/charts\";\nimport { scaleBand } from \"@tanstack/charts/scales/band\";\nimport { scaleLinear } from \"@tanstack/charts/scales/linear\";\nimport { tooltip } from \"@tanstack/charts/tooltip\";\nimport type { HTMLAttributes, JSX, ReactNode } from \"react\";\nimport { useMemo } from \"react\";\nimport { hextechSeriesColor } from \"../../theme/theme\";\nimport { ChartFrame } from \"../chart-frame/chart-frame\";\nimport { HextechChart } from \"../hextech-chart/hextech-chart\";\n\nexport interface RankingChartProps {\n\t/** The rows to rank. */\n\tdata: readonly TDatum[];\n\t/** Names a row — a champion, an item, a player. */\n\tlabel: (datum: TDatum) => string;\n\t/** The measure the ranking is on. */\n\tvalue: (datum: TDatum) => number;\n\t/**\n\t * Paints one bar. Every bar wears the same hue by default, because the\n\t * ranking is already carried by the order and the length — spending the\n\t * identity channel on rank would mean a bar changes colour when the filter\n\t * changes. Reach for this when a row *means* something: a pick you are\n\t * highlighting, a positive against a negative delta.\n\t */\n\tcolor?: string | ((datum: TDatum, rank: number) => string);\n\t/** How to order the rows before drawing. */\n\torder?: \"descending\" | \"ascending\" | \"input\";\n\t/** Keeps only the first N rows after ordering. */\n\tlimit?: number;\n\t/** Writes each value at the tip of its bar. On by default. */\n\tshowValues?: boolean;\n\t/** Formats the value, for the tip label, the axis and the tooltip. */\n\tformatValue?: (value: number) => string;\n\t/** Axis title for the measure. */\n\tvalueLabel?: string;\n\t/** Draws the measure axis and its grid. Off by default — the tip labels\n\t * already carry every value, and the axis would only repeat them. */\n\taxis?: boolean;\n\t/** Plot height. Defaults to something proportional to the row count. */\n\theight?: number;\n\ttitle?: ReactNode;\n\tsubtitle?: ReactNode;\n\tactions?: ReactNode;\n\tframe?: boolean;\n\tglow?: boolean;\n\tariaLabel?: string;\n\tariaDescription?: string;\n\tclassName?: string;\n\tframeProps?: Omit<\n\t\tHTMLAttributes,\n\t\t\"title\" | \"className\" | \"children\"\n\t>;\n}\n\ninterface RankedRow {\n\tdatum: TDatum;\n\tlabel: string;\n\tvalue: number;\n\trank: number;\n}\n\nconst defaultFormat = new Intl.NumberFormat();\n\n/**\n * A ranked horizontal bar chart — the leaderboard shape. Longest bar on top,\n * every value written at the tip.\n *\n * ```tsx\n * row.champion}\n * value={(row) => row.damage}\n * formatValue={(value) => `${Math.round(value / 1000)}k`}\n * />\n * ```\n */\nexport function RankingChart({\n\tdata,\n\tlabel,\n\tvalue,\n\tcolor,\n\torder = \"descending\",\n\tlimit,\n\tshowValues = true,\n\tformatValue,\n\tvalueLabel,\n\taxis = false,\n\theight,\n\ttitle,\n\tsubtitle,\n\tactions,\n\tframe = true,\n\tglow = false,\n\tariaLabel,\n\tariaDescription,\n\tclassName,\n\tframeProps,\n}: RankingChartProps): JSX.Element {\n\tconst rows = useMemo(() => {\n\t\tconst mapped = data.map((datum) => ({\n\t\t\tdatum,\n\t\t\tlabel: label(datum),\n\t\t\tvalue: value(datum),\n\t\t}));\n\t\tif (order === \"descending\") mapped.sort((a, b) => b.value - a.value);\n\t\tif (order === \"ascending\") mapped.sort((a, b) => a.value - b.value);\n\t\tconst limited = limit === undefined ? mapped : mapped.slice(0, limit);\n\t\treturn limited.map((row, rank): RankedRow => ({ ...row, rank }));\n\t}, [data, label, limit, order, value]);\n\n\tconst format =\n\t\tformatValue ?? ((input: number) => defaultFormat.format(input));\n\n\tconst definition = useMemo(() => {\n\t\tconst fill = (row: RankedRow) =>\n\t\t\ttypeof color === \"function\"\n\t\t\t\t? color(row.datum, row.rank)\n\t\t\t\t: (color ?? hextechSeriesColor(0));\n\t\tconst domain = rows.map((row) => row.label);\n\n\t\tconst marks: ChartMark, number, string>[] = [\n\t\t\tbarX(rows, {\n\t\t\t\tid: \"value\",\n\t\t\t\tx: (row) => row.value,\n\t\t\t\ty: (row) => row.label,\n\t\t\t\tfill,\n\t\t\t\tinset: 1,\n\t\t\t\tmaxThickness: 24,\n\t\t\t}) as ChartMark, number, string>,\n\t\t];\n\n\t\tif (showValues) {\n\t\t\tmarks.push(\n\t\t\t\ttext(rows, {\n\t\t\t\t\tid: \"value-label\",\n\t\t\t\t\tx: (row) => row.value,\n\t\t\t\t\ty: (row) => row.label,\n\t\t\t\t\ttext: (row) => format(row.value),\n\t\t\t\t\t// Text wears ink, never the series hue — the bar beside it\n\t\t\t\t\t// already carries the identity.\n\t\t\t\t\tfill: \"var(--lol-chart-foreground)\",\n\t\t\t\t\tanchor: \"start\",\n\t\t\t\t\tdx: 8,\n\t\t\t\t\tfontSize: 12,\n\t\t\t\t}) as unknown as ChartMark, number, string>,\n\t\t\t);\n\t\t}\n\n\t\treturn {\n\t\t\tmarks,\n\t\t\tx: {\n\t\t\t\tscale: scaleLinear,\n\t\t\t\tnice: true,\n\t\t\t\tgrid: axis,\n\t\t\t\taxis: axis ? { label: valueLabel, ticks: { format } } : false,\n\t\t\t},\n\t\t\ty: {\n\t\t\t\tscale: () => scaleBand().domain(domain).padding(0.28),\n\t\t\t\taxis: { line: false, ticks: { size: 0, padding: 8 } },\n\t\t\t},\n\t\t\t// Room for the tip labels, which sit outside the plot area.\n\t\t\t...(showValues ? { margin: { right: 56 } } : {}),\n\t\t\tclip: false,\n\t\t\tfocus: \"nearest\",\n\t\t\ttooltip: {\n\t\t\t\tuse: tooltip,\n\t\t\t\titems: [\n\t\t\t\t\t{\n\t\t\t\t\t\tchannel: \"y\",\n\t\t\t\t\t\tlabel: \"Name\",\n\t\t\t\t\t\ttext: (point: { datum: RankedRow }) => point.datum.label,\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tchannel: \"x\",\n\t\t\t\t\t\tlabel: valueLabel,\n\t\t\t\t\t\ttext: (point: { datum: RankedRow }) =>\n\t\t\t\t\t\t\tformat(point.datum.value),\n\t\t\t\t\t},\n\t\t\t\t],\n\t\t\t},\n\t\t} as unknown as DomChartDefinition, number, string>;\n\t}, [axis, color, format, rows, showValues, valueLabel]);\n\n\treturn (\n\t\t\n\t\t\t\n\t\t\n\t);\n}\n"],"mappings":"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"}