4d: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"] 4e: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"] 4f:T251c,"use client" import * as React from "react" import { cva } from "class-variance-authority" import { cn } from "@/lib/utils" import { Skeleton } from "@/components/ui/skeleton" import { UI_I18N, type UILocale } from "@/lib/ui-i18n" import { formatChartValue, type FormatPreset } from "@/lib/format-utils" import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from "@/components/ui/tooltip" // ── Types ────────────────────────────────────────────────────────────────── export type BulletChartSize = "sm" | "md" | "lg" export interface BulletChartProps extends React.HTMLAttributes { /** Metric label */ label: string /** The current measured value */ value: number /** The target/goal value — rendered as a vertical tick */ target?: number /** * Qualitative range thresholds [poor, ok, good]. * Rendered as background bands from low to high risk. * If omitted, no range bands are shown. */ ranges?: [number, number, number] /** Axis maximum — defaults to max(value, target, ranges[-1]) * 1.1 */ max?: number size?: BulletChartSize valueFormatter?: (v: number) => string format?: FormatPreset decimals?: number currency?: string abbreviate?: boolean loading?: boolean locale?: UILocale } // ── Variants ─────────────────────────────────────────────────────────────── export const bulletChartContainerVariants = cva("w-full", { variants: { size: { sm: "gap-1", md: "gap-1.5", lg: "gap-2", }, }, defaultVariants: { size: "md" }, }) export const bulletChartLabelVariants = cva( "shrink-0 truncate font-medium text-muted-foreground", { variants: { size: { sm: "w-24 text-xs", md: "w-28 text-sm", lg: "w-32 text-base", }, }, defaultVariants: { size: "md" }, } ) export const bulletChartValueVariants = cva( "shrink-0 text-right font-semibold text-foreground tabular-nums", { variants: { size: { sm: "w-12 text-xs", md: "w-14 text-sm", lg: "w-16 text-base", }, }, defaultVariants: { size: "md" }, } ) export const bulletChartTrackVariants = cva( "relative flex-1 overflow-hidden rounded-sm bg-muted", { variants: { size: { sm: "h-2", md: "h-3", lg: "h-4", }, }, defaultVariants: { size: "md" }, } ) // ── Skeleton dims ───────────────────────────────────────────────────────── const skeletonDims: Record< BulletChartSize, { label: string; value: string; track: string } > = { sm: { label: "h-3 w-20", value: "h-3 w-10", track: "h-2" }, md: { label: "h-4 w-24", value: "h-4 w-12", track: "h-3" }, lg: { label: "h-5 w-28", value: "h-5 w-14", track: "h-4" }, } // ── Risk range colors (4 bands from worst to best) ──────────────────────── const RANGE_COLORS = [ "bg-risk-1", // lowest threshold → worst performance "bg-risk-2", "bg-risk-3", "bg-risk-4", // upper area → best performance ] // ── BulletChart ──────────────────────────────────────────────────────────── export function BulletChart({ label, value, target, ranges, max: maxProp, size = "md", valueFormatter, format, decimals = 0, currency = "USD", abbreviate = false, loading = false, locale = "en-US", className, ...props }: BulletChartProps) { const formatValue = React.useCallback( (v: number) => { if (valueFormatter) return valueFormatter(v) return formatChartValue(v, { format, decimals, locale, currency, abbreviate, }) }, [valueFormatter, format, decimals, locale, currency, abbreviate] ) // ── Loading ───────────────────────────────────────────────────────────── if (loading) { const d = skeletonDims[size] return ( ) } // ── Compute ────────────────────────────────────────────────────────────── const maxCandidate = Math.max( value, target ?? 0, ranges ? (ranges[2] ?? 0) : 0 ) const axisMax = (maxProp ?? maxCandidate * 1.15) || 1 const valuePct = Math.min(100, (value / axisMax) * 100) const targetPct = target !== undefined ? Math.min(100, (target / axisMax) * 100) : null // ── Range bands ────────────────────────────────────────────────────────── const rangeBands = ranges ? [ { from: 0, to: ranges[0]!, colorClass: RANGE_COLORS[0]! }, { from: ranges[0]!, to: ranges[1]!, colorClass: RANGE_COLORS[1]! }, { from: ranges[1]!, to: ranges[2]!, colorClass: RANGE_COLORS[2]! }, { from: ranges[2]!, to: axisMax, colorClass: RANGE_COLORS[3]! }, ] : [] const targetLabel = target !== undefined ? `${label}: ${formatValue(value)} / Target: ${formatValue(target)}` : `${label}: ${formatValue(value)}` return (

{/* Label */} {label} {/* Track */}

{/* Range bands */} {rangeBands.map((band, i) => { const leftPct = (band.from / axisMax) * 100 const widthPct = ((band.to - band.from) / axisMax) * 100 return (

) })} {/* Value bar */}

{/* Target marker */} {targetPct !== null && (

{label} {UI_I18N[locale].riskLevelBar?.value ?? "Value"}:{" "} {formatValue(value)} {target !== undefined && ( Target:{" "} {formatValue(target)} )}

{/* Value */} {formatValue(value)}

) } // ── BulletChartGroup ─────────────────────────────────────────────────────── export interface BulletChartGroupProps extends React.HTMLAttributes { items: BulletChartProps[] size?: BulletChartSize loading?: boolean } export function BulletChartGroup({ items, size = "md", loading = false, className, ...props }: BulletChartGroupProps) { return (

{items.map((item, i) => ( ))}

) } 4c:["$","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":[null,["$","$L4d",null,{"namespace":"@lema-ds","registryDependencies":["skeleton","tooltip","ui-i18n","format-utils"]}]]}],null]}],["$","$L4e",null,{"files":[{"path":"components/ds/bullet-chart.tsx","content":"$4f","type":"registry:ui","target":"components/ui/ds-bullet-chart.tsx"}],"className":"h-[70svh] min-h-80"}]]}]