4c: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"] 4d:T1335,"use client" import * as React from "react" import { cn } from "@/lib/utils" export interface DotPlotProps extends React.ComponentProps<"div"> { /** One value per column, in order. */ data: number[] /** Optional label per column, shown in the tooltip and used for the accessible name. */ labels?: string[] /** The value that fills a column. Defaults to the largest value in `data`. */ max?: number /** Number of dots in a full column. */ rows?: number /** Any CSS color. Defaults to chart-1. */ color?: string /** * Columns at or above this fraction of `max` are drawn at full strength and the * rest are faded, so the peak stands out. Set to 0 to draw every column at full strength. */ emphasis?: number /** Opacity of the faded columns. */ fadedOpacity?: number /** Show a tooltip with the column's label and value while it is hovered. */ showTooltip?: boolean /** Formats the value in the tooltip. Defaults to a plain grouped number. */ valueFormatter?: (value: number) => string /** Index of the hovered column, to control it from outside. */ activeIndex?: number | null /** Called when the hovered column changes, with null when the pointer leaves. */ onActiveIndexChange?: (index: number | null) => void } const defaultFormatter = (value: number) => value.toLocaleString("en-US") /** * A distribution drawn as columns of stacked dots, with the peak columns at full strength. * Hovering a column lights it up, fades the others, and shows its value. */ function DotPlot({ data, labels, max, rows = 6, color = "var(--chart-1)", emphasis = 0.5, fadedOpacity = 0.35, showTooltip = true, valueFormatter = defaultFormatter, activeIndex, onActiveIndexChange, className, ...props }: DotPlotProps) { const [internal, setInternal] = React.useState(null) const active = activeIndex === undefined ? internal : activeIndex const setActive = (index: number | null) => { setInternal(index) onActiveIndexChange?.(index) } const top = max ?? Math.max(0, ...data) const peak = data.indexOf(Math.max(...data)) const peakLabel = labels?.[peak] return (

setActive(null)} className={cn( // Dot size and gap are variables so they can be tuned from className, e.g. "[--dot-size:0.75rem]". "flex w-full justify-center [--dot-gap:0.25rem] [--dot-size:0.625rem]", className )} {...props} > {data.map((value, index) => { const fraction = Math.min(1, Math.max(0, value / (top || 1))) // Any non-zero value shows at least one dot so small values still register. const count = fraction === 0 ? 0 : Math.max(1, Math.round(fraction * rows)) const strong = emphasis <= 0 || fraction >= emphasis // While a column is hovered it alone is lit; otherwise the emphasized columns are. const lit = active === null ? strong : active === index const label = labels?.[index] return (

setActive(index)} // Columns stretch to the full height and carry the gap as padding, so the hover target has no dead zones. // They share the width equally and cap at the dot size, so dots shrink in narrow cards instead of overflowing. className="relative flex min-w-0 flex-1 cursor-default flex-col-reverse justify-start gap-(--dot-gap) px-[calc(var(--dot-gap)/2)] max-w-[calc(var(--dot-size)+var(--dot-gap))]" > {Array.from({ length: count }, (_, dot) => ( ))} {showTooltip && active === index ? ( ) : null}

) })}

) } export { DotPlot } 4b:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[null,["$","$L4c",null,{"files":[{"path":"registry/dashboardcn/ui/dot-plot.tsx","content":"$4d","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]