{caption}

4c: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 4d:I[544296,["/_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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"ItemStyles"] 4e:I[34002,["/_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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"CodeEditor"] 4f: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 50:T6c83,"use client"; import { useMorph } from "@/lib/cojeev-motion/use-morph"; import * as React from "react"; import { AnimatePresence, motion, useIsPresent } from "motion/react"; import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter, } from "@/components/ui/card"; import { Button } from "@/components/ui/button"; import { Label } from "@/components/ui/label"; import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem, } from "@/components/ui/select"; import { MotionPresence, MotionSurface } from "@/components/ui/presence"; import { ChartTooltip } from "@/components/ui/chart-tooltip"; import { useChoreography } from "@/lib/cojeev-motion/choreography"; import { chartColor, chartColors, clamp, finiteValue, type ChartPoint, type ChartSeries, type ChartColor, } from "@/lib/cojeev/chart-geometry"; import { cva, type VariantProps } from "class-variance-authority"; import { cn } from "@/lib/utils"; import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell, TableCaption, TableContainer, } from "@/components/ui/table"; export type { ChartPoint, ChartSeries, ChartSlice, ChartColor, } from "@/lib/cojeev/chart-geometry"; export type ChartDatasetSelectProps = { value: string; onValueChange: (value: string) => void; options: readonly { value: string; label: string }[]; label?: string; disabled?: boolean; }; /** The same accessible, custom-scrolling selector ships with the chart family. */ export function ChartDatasetSelect({ value, onValueChange, options, label = "Sample data", disabled, }: ChartDatasetSelectProps) { const id = React.useId(); return (

{label}

); } export type ChartDatum = { label: string; value: number | null; note?: string; variant?: "default" | "ink" | "dash" | "pink"; }; export type ChartContainerProps = React.ComponentProps<"figure">; export function ChartContainer({ className, ...props }: ChartContainerProps) { return (

); } export const chartVariants = cva( "v-bars flex items-end gap-[8px] h-[var(--h,88px)]", ); export type ChartProps = React.ComponentProps<"div"> & { data?: ChartDatum[]; max?: number; showTable?: boolean; caption?: string; }; export function Chart({ data, max, showTable = true, caption = "Chart data", className, children, ...props }: ChartProps) { const ceiling = max ?? Math.max( 1, ...(data ?? []).map((d) => (Number.isFinite(d.value) ? d.value! : 0)), ); return ( <>

{children ?? data?.map((item, index) => ( ))}

{data && showTable && } ); } export const chartBarVariants = cva( "flex-1 max-w-[16px] rounded-[var(--r-pill)] bg-[var(--wm,var(--v-beige))] h-[var(--p)] min-h-[8px]", { variants: { variant: { default: "", ink: "-ink bg-[var(--v-ink)]", dash: "-dash bg-transparent border border-dashed border-[var(--v-ink)]", pink: "-pink bg-[var(--v-pink)]", }, }, defaultVariants: { variant: "default" }, }, ); export type ChartBarProps = React.ComponentProps<"i"> & VariantProps & { value: number; max?: number }; export function ChartBar({ value, max = 100, variant, className, style, ...props }: ChartBarProps) { return ( 0 && Number.isFinite(value) && Number.isFinite(max) ? (value / max) * 100 : 0))}%`, ...style, } as React.CSSProperties } {...props} /> ); } export type ChartAxisProps = React.ComponentProps<"div">; export function ChartAxis({ className, ...props }: ChartAxisProps) { return (
); } export type ChartLineProps = React.ComponentProps<"svg"> & { data?: ChartDatum[]; showTable?: boolean; caption?: string; }; export function ChartLine({ className, data, showTable = true, caption = "Line chart data", children, ...props }: ChartLineProps) { const titleId = React.useId(); return ( <> {data && showTable && } ); } export type ChartLinePathProps = React.ComponentProps<"path"> & { variant?: "hist" | "next" | "cross"; }; export function ChartLinePath({ variant = "hist", className, ...props }: ChartLinePathProps) { return ( ); } export type ChartRingSegment = { label: string; value: number; color: "yellow" | "pink" | "blue" | "olive" | "ink" | "beige"; }; export type ChartRingProps = React.ComponentProps<"div"> & { segments: ChartRingSegment[]; strokeWidth?: number; gap?: number; unit?: string; showTable?: boolean; draw?: boolean; caption?: string; }; export function ChartRing({ ref: externalMorphRef, segments, strokeWidth = 12, gap = 6, unit = "", showTable = true, draw, className, children, caption = "Ring chart", ...props }: ChartRingProps) { const clean = segments.filter((s) => Number.isFinite(s.value) && s.value > 0); const total = clean.reduce((sum, s) => sum + s.value, 0); const width = Math.max( 1, Math.min(49, Number.isFinite(strokeWidth) ? strokeWidth : 12), ); const r = 50 - width / 2; const circumference = 2 * Math.PI * r; const arcs = clean.map((segment, index) => ({ segment, offset: (clean.slice(0, index).reduce((sum, s) => sum + s.value, 0) / total) * circumference, length: Math.max( 0, (circumference * segment.value) / total - (Number.isFinite(gap) ? Math.max(0, gap) : 6), ), })); const ownedMorphRef = useMorph("surfaces", externalMorphRef); return ( <>
`${s.color}:${s.value}`).join(",")} data-sw={width} className={cn( "v-ring relative grid place-items-center w-[min(100%,var(--sz,240px))] max-w-full h-auto aspect-square min-w-0 shrink", draw && "-draw", className, )} {...props} > {total > 0 ? ( ) : (
No data to plot.
)} {children ?? ( {total ? total.toFixed(total % 1 ? 1 : 0) : "—"} {unit && {unit}} )}
{showTable && ( ({ label: s.label, value: s.value, note: `${Math.round((s.value / total) * 100)}%`, }))} /> )} ); } export type ChartRingCenterProps = React.ComponentProps<"div">; export function ChartRingCenter({ className, ...props }: ChartRingCenterProps) { return (
); } export type ChartRankedRowProps = React.ComponentProps<"div">; export function ChartRankedRow({ className, ...props }: ChartRankedRowProps) { return (
); } export type ChartRankedLabelProps = React.ComponentProps<"div">; export function ChartRankedLabel({ className, ...props }: ChartRankedLabelProps) { return (
); } export type ChartRankedValueProps = React.ComponentProps<"span">; export function ChartRankedValue({ className, ...props }: ChartRankedValueProps) { return ( ); } export type ChartDataTableProps = { data: ChartDatum[]; caption?: string; visuallyHidden?: boolean; }; export function ChartDataTable({ data, caption = "Chart data", visuallyHidden = true, }: ChartDataTableProps) { const hasNotes = data.some((item) => item.note || item.value === null); const content = ( {caption} Label Value {hasNotes && Note} {data.map((item, index) => ( {item.label} {item.value ?? "—"} {hasNotes && ( {item.note ?? (item.value === null ? "Not observed" : "")} )} ))}

); return visuallyHidden ? ( content ) : ( {content} ); } export type ChartFrameProps = { data: ChartPoint[]; series: ChartSeries[]; caption?: string; description?: string; showTable?: boolean; tableVisible?: boolean; valueFormatter?: (value: number) => string; className?: string; legendMode?: "series" | "points"; interaction?: "x" | "columns" | "y" | "radar" | "shape"; emptyMessage?: string; /** Independent of the data's line/bar/shape geometry. */ appearance?: "analysis" | "brief" | "ledger"; /** An explicit source measure; it does not change when a legend series is hidden. */ summary?: { label: string; value: React.ReactNode; detail?: string }; children: (plot: ChartPlotState) => React.ReactNode; }; export type ChartPlotState = { width: number; height: number; left: number; right: number; top: number; bottom: number; data: ChartPoint[]; series: ChartSeries[]; active: number | null; id: string; inspect: (index: number) => void; }; function ChartPlotSvg(props: React.ComponentProps) { const present = useIsPresent(); return ( ); } /** Shared composition, focus model, legend and semantic fallback for the chart suite. */ export function ChartFrame({ data, series, caption = "Chart", description, showTable = true, tableVisible = false, valueFormatter = (value) => value.toLocaleString(), className, legendMode = "series", interaction = "x", emptyMessage = "No observations to plot.", appearance, summary, children, }: ChartFrameProps) { const { quiet, transition } = useChoreography(); const id = React.useId().replace(/:/g, ""); const plotRef = React.useRef(null); const [width, setWidth] = React.useState(640); const [active, setActive] = React.useState(null); const [keyboardMode, setKeyboardMode] = React.useState(false); const [pointer, setPointer] = React.useState({ x: 80, y: 60 }); const [hidden, setHidden] = React.useState([]); const [tableState, setTableState] = React.useState({ prop: tableVisible, visible: tableVisible, }); if (tableState.prop !== tableVisible) setTableState({ prop: tableVisible, visible: tableVisible }); const table = tableState.prop === tableVisible ? tableState.visible : tableVisible; const tableShown = showTable && (appearance === "ledger" || table); const measure = summary ?? { label: "Source observations", value: data.length, detail: "Includes rows with missing values.", }; const resolved = series.map((item, index) => ({ ...item, color: item.color ?? chartColors[index % chartColors.length], })); const legend = legendMode === "points" ? data.map((point, index) => ({ key: `point-${index}`, label: point.label, color: (point.color as ChartColor | undefined) ?? chartColors[index % chartColors.length], })) : resolved; const visibleSeries = legendMode === "series" ? resolved.filter((item) => !hidden.includes(item.key)) : resolved; const visibleData: ChartPoint[] = legendMode === "points" ? data .map((point, index) => ({ ...point, color: legend[index].color })) .filter((_, index) => !hidden.includes(`point-${index}`)) : data; const height = 300; const left = interaction === "y" ? Math.min(100, width * 0.27) : 42, right = width - 18, top = 24, bottom = height - 42; const current = active !== null ? visibleData[active] : undefined; const hasValues = visibleData.length > 0 && visibleSeries.some((item) => visibleData.some((point) => finiteValue(point[item.key]) !== null), ); React.useLayoutEffect(() => { const node = plotRef.current; if (!node) return; const measure = () => { // Hidden preview panels report zero. Keep the last useful viewBox until // reveal, and leave room for both axis gutters in very narrow containers. if (node.clientWidth > 0) setWidth(Math.max(64, node.clientWidth)); }; measure(); const observer = new ResizeObserver(measure); observer.observe(node); return () => observer.disconnect(); }, []); const inspect = (index: number) => setActive(Math.round(clamp(index, 0, visibleData.length - 1))); const tooltip = current ? { label: current.label, items: visibleSeries.map((item) => ({ label: item.label, value: finiteValue(current[item.key]), color: legendMode === "points" ? (current.color as ChartColor) : item.color, })), } : null; const tableData = data.flatMap((point) => resolved.map((item) => ({ label: resolved.length === 1 ? point.label : `${point.label} · ${item.label}`, value: finiteValue(point[item.key]), })), ); const keyboard = (event: React.KeyboardEvent) => { if (event.key === "Escape") { setActive(null); return; } if ( ![ "ArrowRight", "ArrowLeft", "ArrowUp", "ArrowDown", "Home", "End", ].includes(event.key) ) return; event.preventDefault(); const next = event.key === "Home" ? 0 : event.key === "End" ? visibleData.length - 1 : (active ?? 0) + (["ArrowLeft", "ArrowUp"].includes(event.key) ? -1 : 1); const index = Math.round(clamp(next, 0, visibleData.length - 1)); inspect(index); setPointer({ x: left + ((right - left) * (index + 0.5)) / Math.max(1, visibleData.length), y: height * 0.36, }); }; return ( {caption} {description && ( {description} )} {appearance === "brief" && (
{measure.label} {measure.value} {measure.detail &&
{measure.detail}
} Source measure · not filtered by the legend
)}
{legend.map((item) => ( ))}

setActive(null)} > {hasValues ? ( { setKeyboardMode(true); if (active === null) { inspect(0); setPointer({ x: left, y: top }); } }} onBlur={() => { setKeyboardMode(false); setActive(null); }} onKeyDown={keyboard} onPointerMove={(event) => { setKeyboardMode(false); const box = event.currentTarget.getBoundingClientRect(); const x = ((event.clientX - box.left) * width) / box.width, y = ((event.clientY - box.top) * height) / box.height; setPointer({ x, y }); if (interaction === "x") inspect( Math.round( ((x - left) / (right - left)) * Math.max(0, visibleData.length - 1), ), ); if (interaction === "columns") inspect( Math.floor( ((x - left) / (right - left)) * visibleData.length, ), ); if (interaction === "y") inspect( Math.floor( ((y - top) / (bottom - top)) * visibleData.length, ), ); if (interaction === "radar") { const angle = (Math.atan2(y - height / 2, x - width / 2) + Math.PI / 2 + Math.PI * 2) % (Math.PI * 2); inspect( Math.round( (angle / (Math.PI * 2)) * visibleData.length, ) % visibleData.length, ); } }} > {children({ width, height, left, right, top, bottom, data: visibleData, series: visibleSeries, active, id, inspect, })} ) : ( )} {keyboardMode && current ? `${current.label}. ${visibleSeries.map((item) => `${item.label}: ${finiteValue(current[item.key]) === null ? "No observation" : valueFormatter(finiteValue(current[item.key])!)}`).join(". ")}` : ""}
Hover to explore · Arrow keys to inspect {showTable && appearance !== "ledger" && ( )} {showTable && (

)} ); } 51:T30f5,@layer cojeev-states { [data-slot="chart-bar"] { transition: height var(--flow-dur) var(--flow-ease), transform var(--flow-dur) var(--flow-ease); transform-origin: bottom; } [data-slot="chart-bar"]:hover { transform: scaleY(calc(1 + 0.04 * var(--flow-intensity, 1))); } [data-slot="chart-axis"] b { color: var(--v-text); } [data-slot="chart-line"] path { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } [data-slot="chart-line"] .-hist { stroke: var(--v-ink); } [data-slot="chart-line"] .-next { stroke: var(--wm, var(--v-pink)); } [data-slot="chart-line"] .-cross { stroke: var(--v-ink); stroke-dasharray: 3 4; stroke-width: 1; } [data-slot="chart-line"] circle { fill: var(--v-ink); } [data-slot="chart-ring"] svg { width: 100%; height: 100%; transform: rotate(-90deg); } [data-slot="chart-ring"] circle { fill: none; stroke-width: var(--sw, 12); stroke-linecap: round; transition: stroke-dasharray var(--flow-dur) var(--flow-ease); } [data-slot="chart-ring"] .-track { stroke: var(--v-beige); } [data-slot="chart-ring"].-draw circle:not(.-track) { animation: v-chart-draw var(--t-draw) var(--enter) both; } [data-slot="chart-ring"] .v-disk { position: absolute; } [data-slot="chart-ring-center"] .v-hero { font-size: clamp(28px, calc(var(--sz, 240px) * 0.28), 68px); } [data-slot="chart-ring-center"] .v-caption { font-size: var(--fs-meta); color: var(--muted-foreground); } [data-slot="chart-ranked-label"] b { font-size: var(--fs-body); font-weight: 500; line-height: 1.2; } [data-slot="chart-ranked-value"] .u { font-size: 12px; font-weight: 400; margin-left: 3px; color: var(--muted-foreground); } @keyframes v-chart-draw { from { stroke-dasharray: 0 1000; } } /* The chart family shares one composed surface and a deliberately quiet grid. */ .v-chart-frame { width: 100%; min-width: 0; margin: 0; } .v-chart-frame > div > [data-slot="card"] { overflow: visible; } .v-chart-frame__content { min-width: 0; display: grid; gap: var(--s-4); } .v-chart-frame__header { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; align-items: start; } .v-chart-frame [data-slot="card-title"] { font-family: var(--font-display); font-size: 21px; line-height: 1.2; } .v-chart-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; } .v-chart-legend__item.v-btn { gap: 7px; padding-inline: 9px; max-width: 100%; height: auto; min-height: 32px; padding-block: 6px; white-space: normal; text-align: start; font-weight: 500; } .v-chart-legend__item[aria-pressed="false"] { opacity: 0.5; } .v-chart-key { display: inline-block; width: 10px; height: 10px; flex: none; border-radius: 40% 60% 55% 45%; background: var(--v-pink); } .v-chart-plot { position: relative; width: 100%; min-width: 0; isolation: isolate; } .v-chart-svg { display: block; width: 100%; height: 100%; overflow: visible; border-radius: var(--r-sm); } .v-chart-svg:focus-visible { outline: 2px solid var(--ring); outline-offset: 4px; } .v-chart-grid :is(line, path, circle) { stroke: var(--border); stroke-width: 1; stroke-dasharray: 3 5; } .v-chart-grid text, .v-chart-axis text { font: 11px var(--font-text); fill: var(--muted-foreground); font-variant-numeric: tabular-nums; } .v-chart-crosshair { stroke: var(--v-text-3); stroke-width: 1; stroke-dasharray: 3 4; pointer-events: none; } .v-chart-center text { font: 600 29px var(--font-display); letter-spacing: -0.025em; fill: var(--foreground); } .v-chart-center .v-chart-center__label { font: 12px var(--font-text); letter-spacing: 0; fill: var(--muted-foreground); } .v-chart-note { fill: var(--muted-foreground); font: 13px var(--font-text); } .v-chart-empty { height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: var(--s-4); color: var(--muted-foreground); text-align: center; font-size: var(--fs-control); } .v-chart-frame__footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--s-3); color: var(--muted-foreground); font-size: 11px; } .v-chart-frame__table { padding: 0; min-width: 0; } .v-chart-tooltip { position: absolute; inset: 0 auto auto 0; z-index: var(--z-popover); max-width: calc(100% - 16px); overflow: hidden; transform-origin: top left; pointer-events: none; } .v-chart-tooltip__card[data-slot="card"] { padding: 12px 14px; border-radius: var(--r-card-sm); background: var(--popover); color: var(--popover-foreground); border: 1px solid var(--border); box-shadow: var(--shadow-float); display: grid; gap: 10px; } .v-chart-tooltip__label { font-size: 13px; font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .v-chart-tooltip__row { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; align-items: start; gap: 8px; font-size: 12px; line-height: 1.45; } .v-chart-tooltip__row .v-chart-key { margin-top: 3px; } .v-chart-tooltip__row > span:not(.v-chart-key) { min-width: 0; overflow-wrap: anywhere; color: var(--popover-foreground); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .v-chart-tooltip__row strong { font-weight: 600; font-variant-numeric: tabular-nums; max-width: 96px; overflow-wrap: anywhere; text-align: end; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .v-chart-tooltip[data-presentation="summary"] .v-chart-tooltip__card { border-top: 3px solid var(--v-pink); } .v-chart-tooltip__total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--v-edge); } .v-chart-tooltip__total > span { font-size: 11px; color: var(--v-text-3); } .v-chart-tooltip__total > strong { font-family: var(--font-display); font-size: 25px; line-height: 1; font-variant-numeric: tabular-nums; } .v-chart-tooltip[data-presentation="ranked"] .v-chart-tooltip__row { grid-template-columns: 18px 8px minmax(0, 1fr) auto; font-size: 11px; } .v-chart-tooltip__rank { font-variant-numeric: tabular-nums; color: var(--v-text-3); font-size: 10px; } .v-chart-tooltip__empty { font-size: 12px; color: var(--v-text-3); } .v-chart-tooltip-example { width: 100%; max-width: 580px; margin-inline: auto; display: grid; gap: 20px; color: var(--v-text); } .v-chart-tooltip-example h3 { margin: 0; font-family: var(--font-display); font-size: 26px; } .v-chart-tooltip-example p { margin: 0; color: var(--v-text-2); font-size: 13px; line-height: 1.6; } .v-chart-tooltip-example__plot { position: relative; height: 280px; background: var(--v-paper); border: 1px solid var(--v-edge); border-radius: 20px; } .v-chart-tooltip-example__points { display: flex; justify-content: space-between; gap: 4px; padding: 16px; } .v-chart-tooltip-example__points .v-btn { font-size: 12px; padding-inline: 10px; min-height: 44px; } .v-chart-tooltip-example__guide { position: absolute; left: 30px; right: 30px; bottom: 34px; height: 96px; border-bottom: 1px solid var(--v-edge); background: repeating-linear-gradient( to top, transparent 0 30px, var(--v-edge) 30px 31px ); opacity: 0.35; pointer-events: none; } .v-chart-tooltip-example__guide svg { width: 100%; height: 100%; overflow: visible; } @media (max-width: 480px) { .v-chart-frame > div > [data-slot="card"] { padding: var(--s-4); } } /* Chart modes describe geometry; these compositions describe the reading task. */ .v-chart-example, .v-chart-introduction { display: grid; gap: 24px; min-width: 0; } .v-chart-example__tools { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px 24px; } .v-chart-example__tools > [role="status"] { font-size: 12px; line-height: 1.6; color: var(--v-text-2); max-width: 32ch; padding-bottom: 10px; } .v-chart-control { display: grid; gap: 8px; min-width: 0; width: min(100%, 260px); } .v-chart-control > [data-slot="select"] { width: 100%; min-width: 0; } .v-chart-control [data-slot="select-trigger"] { width: 100%; min-height: 44px; } .v-chart-frame[data-appearance] > div > [data-slot="card"] { display: grid; gap: 20px; padding: 24px; background: var(--v-canvas); color: var(--v-text); border: 1px solid var(--v-border); } .v-chart-frame[data-appearance] .v-chart-frame__header { margin: 0; } .v-chart-frame[data-appearance] .v-chart-frame__header [data-slot="card-description"] { font-size: 13px; line-height: 1.65; max-width: 65ch; } .v-chart-frame[data-appearance] .v-chart-legend__item.v-btn { min-height: 44px; } .v-chart-frame[data-appearance] .v-chart-frame__footer { margin: 0; min-height: 44px; } .v-chart-frame[data-appearance] .v-chart-frame__footer .v-btn { min-height: 44px; } .v-chart-summary { display: grid; align-content: center; gap: 12px; min-width: 0; padding: 28px 20px; border-inline-start: 3px solid var(--v-pink); } .v-chart-summary > span:first-child { font-size: 13px; line-height: 1.5; font-weight: 500; } .v-chart-summary > strong { font: 600 clamp(38px, 6cqi, 64px) / 1 var(--font-display); letter-spacing: -0.05em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; } .v-chart-summary > p { font-size: 13px; line-height: 1.7; color: var(--v-text-2); margin: 0; } .v-chart-summary__scope { font-size: 10px; line-height: 1.6; color: var(--v-text-2); } .v-chart-frame[data-appearance="brief"] > div > [data-slot="card"] { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr); grid-template-areas: "heading heading" "summary plot" "footer footer" "values values"; } .v-chart-frame[data-appearance="ledger"][data-table-visible="true"] > div > [data-slot="card"] { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); grid-template-areas: "heading heading" "plot values" "footer values"; } .v-chart-frame[data-appearance]:is( [data-appearance="brief"], [data-appearance="ledger"][data-table-visible="true"] ) .v-chart-frame__header { grid-area: heading; } .v-chart-frame[data-appearance]:is( [data-appearance="brief"], [data-appearance="ledger"][data-table-visible="true"] ) .v-chart-frame__content { grid-area: plot; } .v-chart-frame[data-appearance]:is( [data-appearance="brief"], [data-appearance="ledger"][data-table-visible="true"] ) .v-chart-summary { grid-area: summary; } .v-chart-frame[data-appearance]:is( [data-appearance="brief"], [data-appearance="ledger"][data-table-visible="true"] ) .v-chart-frame__footer { grid-area: footer; } .v-chart-frame[data-appearance]:is( [data-appearance="brief"], [data-appearance="ledger"][data-table-visible="true"] ) .v-chart-frame__table { grid-area: values; } .v-chart-frame [data-slot="table-container"].v-chart-values { max-height: 420px; } .v-chart-values [data-slot="chart-data-table"] { min-width: 260px; font-size: 12px; } .v-chart-anatomy { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; } .v-chart-anatomy li { display: grid; align-content: start; gap: 12px; padding: 20px; border-top: 2px solid var(--v-blue); min-width: 0; } .v-chart-anatomy li > span { font-size: 12px; color: var(--v-text-2); font-variant-numeric: tabular-nums; } .v-chart-anatomy strong { font-size: 16px; line-height: 1.4; } .v-chart-anatomy p { font-size: 13px; line-height: 1.7; margin: 0; color: var(--v-text-2); } @media (max-width: 850px) { .v-chart-frame[data-appearance="brief"] > div > [data-slot="card"], .v-chart-frame[data-appearance="ledger"][data-table-visible="true"] > div > [data-slot="card"] { grid-template-columns: minmax(0, 1fr); grid-template-areas: "heading" "summary" "plot" "footer" "values"; padding: 16px; } .v-chart-summary { padding: 12px 16px; } .v-chart-anatomy { grid-template-columns: minmax(0, 1fr); gap: 8px; } .v-chart-anatomy li { grid-template-columns: 24px minmax(0, 1fr); padding: 16px 0; } .v-chart-anatomy li > p { grid-column: 2; } } } 4b:["$","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","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","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":"motion"}]]}]}],["$","li","class-variance-authority",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/class-variance-authority","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":"class-variance-authority"}]]}]}]]}],["$","$L4c",null,{"namespace":"@000h-cojeev","registryDependencies":["https://000h.cojeev.com/r/cojeev.json","https://000h.cojeev.com/r/card.json","https://000h.cojeev.com/r/button.json","https://000h.cojeev.com/r/label.json","https://000h.cojeev.com/r/select.json","https://000h.cojeev.com/r/presence.json","https://000h.cojeev.com/r/chart-tooltip.json","https://000h.cojeev.com/r/table.json"]}]]}],["$","$L4d",null,{"children":["$","div",null,{"className":"@container","children":["$","div",null,{"className":"grid grid-cols-1 gap-4 @xl:grid-cols-2","children":[null,null,null,["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"CSS"}],["$","div",null,{"children":["$","$L4e",null,{"lang":"css","copyButton":true,"writing":false,"className":"rounded-none w-full max-h-80","header":false,"children":"@import \"@/styles/cojeev/chart.css\" {\n\n}"}]}]]}]]}]}]}]]}],["$","$L4f",null,{"files":[{"path":"registry/cojeev/ui/chart.tsx","content":"$50","type":"registry:ui"},{"path":"registry/cojeev/styles/chart.css","content":"$51","type":"registry:file","target":"styles/cojeev/chart.css"}],"className":"h-[70svh] min-h-80"}]]}]