50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:T3464,"use client"; import * as stylex from "@stylexjs/stylex"; import type { ChartBuildContext, ChartPositionScaleOptions, ChartTooltipContent as ChartTooltipModel, ConfiguredScaleLike, ChartValue, DomChartDefinition, } from "@tanstack/charts"; import { Chart as ChartPrimitive } from "@tanstack/charts/react/tooltip"; import type { ChartProps as ChartPrimitiveProps, ChartTooltipBodyRenderContext, } from "@tanstack/charts/react/tooltip"; import { useLayoutEffect, useMemo, useRef, useState } from "react"; import type { ComponentProps } from "react"; import { ChartIndicator } from "@/components/tanstack/chart-legend"; import type { ChartConfig, ChartIndicatorVariant, } from "@/components/tanstack/chart-legend"; import type { Sx } from "@/lib/constella/styles"; import { typeStyles } from "@/lib/constella/styles"; import { colors, durations, easings, fonts, fontWeights, radii, shadows, sizes, space, } from "@/lib/constella/tokens.stylex"; type Styled = Omit & { sx?: Sx; }; /** * An axis's `ticks.format` for counts: `1.2M`, not `1200000`, and no `0.2` steps on whole * numbers. Takes the locale, as the server's default can differ from the reader's. */ const chartTickFormat = (locale: Intl.LocalesArgument) => { const compact = new Intl.NumberFormat(locale, { maximumFractionDigits: 1, notation: "compact", }); return (value: number) => Number.isInteger(value) ? compact.format(value) : ""; }; const styles = stylex.create({ root: { // Axis labels, ticks and grid lines are drawn in `currentColor`. color: colors.textMuted, fontVariantNumeric: "tabular-nums", minWidth: 0, }, // A popover's surface: it holds figures to read, not a one-line hint. // Rows share its columns (indicator, label, value), so one without an indicator still lines up. tooltip: { backgroundColor: colors.raised, borderStartStartRadius: radii.md, borderStartEndRadius: radii.md, borderEndStartRadius: radii.md, borderEndEndRadius: radii.md, boxShadow: shadows.lg, color: colors.textPrimary, columnGap: space.xs, display: "grid", fontWeight: fontWeights.regular, gridTemplateColumns: "auto minmax(0, 1fr) auto", maxWidth: sizes.tooltip, paddingBlock: space.popup, paddingInlineEnd: space.popup, paddingInlineStart: space.popup, rowGap: space.xxxs, whiteSpace: "pre-line", }, title: { alignItems: "center", columnGap: space.xs, display: "flex", fontWeight: fontWeights.medium, gridColumnEnd: -1, gridColumnStart: 1, marginBlockEnd: space.xxs, }, row: { alignItems: "center", display: "grid", gridColumnEnd: -1, gridColumnStart: 1, gridTemplateColumns: "subgrid", }, // The series under the pointer reads a step stronger than its neighbors. label: { color: { default: colors.textSecondary, ":is([data-active] > *)": colors.textPrimary, }, gridColumnStart: 2, minWidth: 0, }, value: { fontFamily: fonts.mono, fontWeight: fontWeights.medium, gridColumnStart: 3, paddingInlineStart: space.md, textAlign: "end", }, }); function ChartTooltip({ sx, ...props }: Styled>) { return (

); } function ChartTooltipTitle({ sx, ...props }: Styled>) { return (

); } function ChartTooltipRow({ active = false, sx, ...props }: Styled> & { /** The point under the pointer or keyboard, among the rows of its group. */ active?: boolean; }) { return (

); } function ChartTooltipLabel({ sx, ...props }: Styled>) { return ( ); } function ChartTooltipValue({ sx, ...props }: Styled>) { return ( ); } /** Renders TanStack Charts' tooltip content as a `ChartTooltip`, naming each series by `config`. */ function ChartTooltipContent({ config, content, hideLabel = false, indicator = "line", sx, }: { config?: ChartConfig; content: ChartTooltipModel | string; /** Leaves out the title, the shared x value. */ hideLabel?: boolean; indicator?: ChartIndicatorVariant; sx?: Sx; }) { // oxlint-disable-next-line anti-slop/no-runtime-typeof -- TanStack Charts hands plain text when the definition sets `format` if (typeof content === "string") { return {content}; } return ( {hideLabel || content.title === undefined || content.title === "" ? null : ( {content.color === undefined ? null : ( )} {content.title} )} {content.rows.map((row, index) => ( // Two marks on one series give two rows with its label. {row.color === undefined ? null : ( )} {config?.[row.label]?.label ?? row.label} {row.value} ))} ); } const tweenFor = Number(durations.chart.slice(0, -"ms".length)); /** * Eases each value toward `target` over `durations.chart`, or jumps when `animate` is false or * motion is reduced. Memoize `target`: a new object restarts the tween. Keep one chart's values in * one tween, or in tweens that share `animate`, so its axis and marks move together. */ function useChartTween>( target: T, animate: boolean ): T { const [current, setCurrent] = useState(target); const painted = useRef(target); // Before paint, so a jump lands in the same frame as the axis it belongs to. useLayoutEffect(() => { const from = painted.current; const duration = animate && !matchMedia("(prefers-reduced-motion: reduce)").matches ? tweenFor : 0; // A real animation keeps time, so the tween takes the `out` curve and follows DevTools' playback speed. const clock = document.documentElement.animate(null, { duration, easing: easings.out, fill: "forwards", }); const paint = () => { const eased = clock.effect?.getComputedTiming().progress ?? 1; const next = { ...target, ...Object.fromEntries( Object.entries(target).map(([key, value]) => { const begin = from[key] ?? 0; return [key, begin + (value - begin) * eased]; }) ), }; painted.current = next; setCurrent(next); }; if (duration === 0) { paint(); } let frame = requestAnimationFrame(function step() { paint(); if (clock.playState !== "finished") { frame = requestAnimationFrame(step); } }); return () => { cancelAnimationFrame(frame); clock.cancel(); }; }, [animate, target]); return current; } /** * A `group({ scale })` band scale where each series takes `weight` (0 to 1) of a slot, so a slot * eases open or shut with `useChartTween`. Every bar keeps the full bandwidth and is pulled inside * the group: put a closing series' rows first, and it paints under the bars that grow over it. */ const chartGroupScale = ( weights: readonly (readonly [string, number])[], padding = 0 ): ConfiguredScaleLike => { let [from, to] = [0, 1]; // At least one slot wide, so a last series closing doesn't stretch its bars. const total = Math.max( 1, weights.reduce((sum, [, weight]) => sum + weight, 0) ); const step = () => (to - from) / (total + padding); const scale = (key: string) => { const index = weights.findIndex(([member]) => member === key); // Not a member: NaN, which TanStack reports as a key outside the group's domain. if (index === -1) { return Number.NaN; } const before = weights .slice(0, index) .reduce((sum, [, weight]) => sum + weight, 0); const first = from + step() * padding; return Math.min(first + step() * before, first + step() * (total - 1)); }; const band = Object.assign(scale, { bandwidth: () => step() * (1 - padding), copy: () => chartGroupScale(weights, padding).range([from, to]), domain: () => weights.map(([member]) => member), // TanStack sets the range in place and reads the bandwidth after. range: (values: Iterable) => { [from = 0, to = 1] = values; return band; }, }); return band; }; type ChartScales = Readonly>; // captionLg's 12, set on the axes, not in CSS: TanStack measures labels by this number for margins and thinning. const tickLabelSize = 12; const withTickLabelSize = ( spec: TSpec ): TSpec => spec.scales === undefined ? spec : { ...spec, scales: Object.fromEntries( Object.entries(spec.scales).map(([id, options]) => [ id, options === null || options.axis === false || options.axis?.tickLabels === false ? options : { ...options, axis: { ...options.axis, tickLabels: { fontSize: tickLabelSize, ...options.axis?.tickLabels, }, }, }, ]) ), }; const withChartDefaults = < TDatum, TXValue extends ChartValue, TYValue extends ChartValue, >( definition: DomChartDefinition ): DomChartDefinition => "chart" in definition ? { ...definition, chart: (context: ChartBuildContext) => withTickLabelSize(definition.chart(context)), } : withTickLabelSize(definition); /** Renders a TanStack Charts definition in the theme's palette, with a `ChartTooltipContent` unless `renderTooltipBody` replaces it. Axis labels default to 12px. */ function Chart< TDatum, TXValue extends ChartValue = ChartValue, TYValue extends ChartValue = ChartValue, >({ animate = false, config, onRender, renderTooltipBody, sx, ...props }: Styled> & { /** Axis labels that arrive, move or change with this definition fade in; set it for a click, not a key press. */ animate?: boolean; /** Names the series in the default tooltip. */ config?: ChartConfig; }) { // Where each axis label was painted, so only the ones a change adds or moves fade in; a resize // moves labels too, so only a new definition counts. const placed = useRef( new WeakMap() ); const painted = useRef(props.definition); const definition = useMemo( () => withChartDefaults(props.definition), [props.definition] ); const renderConfigTooltip = ({ content }: ChartTooltipBodyRenderContext) => ( ); const fadeLabels: typeof onRender = (context) => { const changed = painted.current !== props.definition; painted.current = props.definition; for (const label of context.svg.querySelectorAll(".ts-chart__axes text")) { const at = { text: label.textContent, x: Number(label.getAttribute("x")), y: Number(label.getAttribute("y")), }; const was = placed.current.get(label); // A label width change nudges the plot under a pixel; that isn't a move. const moved = was === undefined || was.text !== at.text || Math.hypot(at.x - was.x, at.y - was.y) >= 1; if (animate && changed && moved) { // From partway, never from nothing: the old label is already gone. label.animate([{ opacity: 0.4 }, { opacity: 1 }], { duration: tweenFor, easing: easings.crossfade, }); } placed.current.set(label, at); } onRender?.(context); }; return (

); } export { Chart, ChartTooltip, ChartTooltipContent, ChartTooltipLabel, ChartTooltipRow, ChartTooltipTitle, ChartTooltipValue, chartTickFormat, chartGroupScale, useChartTween, }; 53:T19aa,"use client"; import * as stylex from "@stylexjs/stylex"; import type { ComponentProps, ReactNode } from "react"; import { ToggleGroup, ToggleGroupItem, } from "@/components/primitives/toggle-group"; import type { Sx } from "@/lib/constella/styles"; import { colors, durations, easings, fontWeights, media, radii, sizes, space, strokes, } from "@/lib/constella/tokens.stylex"; type Styled = Omit & { sx?: Sx; }; /** Each series by its value in the data: its name, and its paint when not the next in the palette. */ type ChartConfig = Record; const palette = [ colors.chart1, colors.chart2, colors.chart3, colors.chart4, colors.chart5, colors.chart6, ]; // The seventh is `chartFold`'s "Other", so it takes muted ink rather than a reused hue. const chartSeries = (config: ChartConfig) => Object.entries(config).map(([key, series], index) => ({ color: series.color ?? palette[index] ?? colors.textMuted, key, label: series.label ?? key, })); /** * Folds every series past six into one `other`, summing the rows that share their other fields, so * no hue repeats. `series` and `value` name the rows' series and number fields. */ const chartFold = >( config: ChartConfig, rows: readonly TRow[], { label = "Other", series, value, }: { label?: ReactNode; series: keyof TRow; value: keyof TRow } ) => { const keys = Object.keys(config); if (keys.length <= palette.length) { return { config, rows }; } const kept = new Set(keys.slice(0, palette.length)); const folded: TRow[] = []; const at = new Map(); for (const row of rows) { if (kept.has(String(row[series]))) { folded.push(row); continue; } const by = JSON.stringify( Object.entries(row).filter( ([field]) => field !== series && field !== value ) ); const index = at.get(by); if (index === undefined) { at.set(by, folded.length); folded.push({ ...row, [series]: "other", [value]: Number(row[value]) }); } else { const sum = folded[index]; folded[index] = { ...sum, [value]: Number(sum[value]) + Number(row[value]), }; } } return { config: { ...Object.fromEntries( keys.slice(0, palette.length).map((key) => [key, config[key]]) ), other: { label }, }, rows: folded, }; }; /** The definition's `color`: every series in `config` keeps its paint, shown or hidden. */ const chartColor = (config: ChartConfig) => { const series = chartSeries(config); return { domain: series.map(({ key }) => key), range: series.map(({ color }) => color), }; }; const hidden = ":is([data-slot='chart-legend-item']:not([data-pressed]) > *)"; const styles = stylex.create({ // Hollow in a hidden legend entry, so its state isn't color alone. indicator: (color: string) => ({ backgroundColor: { default: color, [hidden]: "transparent" }, borderStartStartRadius: radii.full, borderStartEndRadius: radii.full, borderEndStartRadius: radii.full, borderEndEndRadius: radii.full, boxShadow: `inset 0 0 0 ${strokes.border} ${color}`, flexShrink: 0, gridColumnStart: 1, transitionDuration: durations.hover, transitionProperty: "background-color", transitionTimingFunction: "ease", }), dot: { height: sizes.iconXxs, width: sizes.iconXxs, }, // A short bar beside a row of figures. line: { height: sizes.iconSm, width: strokes.track, }, legend: { flexWrap: "wrap", // Back by an item's start padding and border, so each row's first dot lines up with the text above. marginInlineStart: `calc(-1 * (${space.xs} - ${space.xxxs} + ${strokes.border}))`, }, // Every entry starts shown, so shown stays quiet and hidden is the state that reads. legendItem: { backgroundColor: { default: "transparent", [media.hover]: { default: "transparent", ":hover": colors.fillSubtle }, ":active": colors.fillSubtle, }, color: { default: colors.textMuted, ":is([data-pressed])": colors.textPrimary, }, fontWeight: fontWeights.regular, // Button's transitions (button.tsx `base`, kept in step by hand: StyleX can't import them), // plus the label's color, so hiding a series fades like its fill. transitionDuration: `${durations.press}, ${durations.hover}, ${durations.hover}, ${durations.hover}, ${durations.hover}`, transitionProperty: "transform, background-color, box-shadow, opacity, color", transitionTimingFunction: `${easings.out}, ease, ease, ease, ease`, }, }); const chartIndicatorVariants = ["dot", "line"] as const; type ChartIndicatorVariant = (typeof chartIndicatorVariants)[number]; /** A series' key, in its chart paint like `colors.chart1`. */ function ChartIndicator({ color, sx, variant = "dot", ...props }: Styled> & { color: string; variant?: ChartIndicatorVariant; }) { return ( ); } /** The series a chart shows, each a toggle; `value` lists the shown ones. */ function ChartLegend({ sx, ...props }: Omit, "multiple">) { return ( ); } function ChartLegendItem({ sx, ...props }: ComponentProps) { return ( ); } /** Renders a `ChartLegend` with an item per series in `config`, in its order. */ function ChartLegendContent({ config, ...props }: Omit, "children"> & { config: ChartConfig; }) { return ( {chartSeries(config).map(({ color, key, label }) => ( {label} ))} ); } export { ChartIndicator, ChartLegend, ChartLegendContent, ChartLegendItem, chartColor, chartFold, chartIndicatorVariants, }; export type { ChartConfig, ChartIndicatorVariant }; 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","@stylexjs/stylex",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40stylexjs%2Fstylex","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@stylexjs/stylex"}]]}]}],["$","li","@tanstack/charts@^1.1.0",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40tanstack%2Fcharts","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@tanstack/charts@^1.1.0"}]]}]}]]}],["$","$L50",null,{"namespace":"@constella","registryDependencies":["https://constella.aayush.cv/r/base.json","https://constella.aayush.cv/r/toggle-group.json"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"src/components/tanstack/chart.tsx","content":"$52","type":"registry:component"},{"path":"src/components/tanstack/chart-legend.tsx","content":"$53","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]