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:T3340,/* eslint-disable react-refresh/only-export-components */ import * as React from 'react' import { cva, type VariantProps } from 'class-variance-authority' import { cn } from '@/lib/utils' const gaugeChartVariants = cva( 'relative flex items-center justify-center', { variants: { size: { sm: '', md: '', lg: '', }, variant: { semicircle: '', full: '', meter: '', }, }, defaultVariants: { size: 'md', variant: 'semicircle', }, } ) export interface GaugeChartZone { /** Lower bound, in the same units as `value` (i.e. between `min` and `max`). */ from: number /** Upper bound, in the same units as `value`. */ to: number color: string label?: string } export interface GaugeChartProps extends Omit, 'color'>, VariantProps { value: number min?: number max?: number zones?: GaugeChartZone[] label?: string valueFormatter?: (value: number) => string showTicks?: boolean animated?: boolean } const DEFAULT_ZONES: GaugeChartZone[] = [ { from: 0, to: 33, color: 'hsl(var(--destructive))', label: 'Low' }, { from: 33, to: 66, color: 'hsl(var(--warning))', label: 'Medium' }, { from: 66, to: 100, color: 'hsl(var(--success))', label: 'High' }, ] /** * Variant arc configs (angles in SVG space: 0°=east, increasing = clockwise, y points down): * semicircle — 180° sweep, arc from left (180°) over the top (270°) to right (360°), open at bottom * full — 360° sweep (full ring) starting at the top * meter — same top semicircle as semicircle but with denser tick marks (every 10%) */ const VARIANT_ARC_CONFIG = { semicircle: { arcStartDeg: 180, sweepDeg: 180 }, full: { arcStartDeg: -90, sweepDeg: 360 }, // full 360° sweep meter: { arcStartDeg: 180, sweepDeg: 180 }, } as const type Variant = 'semicircle' | 'full' | 'meter' const GaugeChart = React.forwardRef( ( { value, min = 0, max = 100, zones = DEFAULT_ZONES, label, valueFormatter = (v) => `${v}`, showTicks = true, animated = true, size, variant, className, ...props }, ref ) => { const resolvedVariant: Variant = (variant as Variant) || 'semicircle' const arcConfig = VARIANT_ARC_CONFIG[resolvedVariant] const normalizedValue = Math.max(min, Math.min(max, value)) const toPercent = (v: number) => (max === min ? 0 : ((v - min) / (max - min)) * 100) const percentage = toPercent(normalizedValue) // Zone bounds are in data units, so they need the same mapping as `value`. // They used to be fed to a 0–100 dial scale raw, so with min=0 max=200 a // zone of {from: 0, to: 100} painted the first *half of the dial* instead // of the first half of the range, and picked the wrong current colour. const zonesPct = zones.map((z) => ({ ...z, fromPct: toPercent(z.from), toPct: toPercent(z.to), })) // SVG dimensions — full variant needs a taller canvas to show the bottom arc const sizeConfig = { sm: { width: 140, height: resolvedVariant === 'full' ? 140 : 90, radius: 45, strokeWidth: 10, fontSize: 14, labelSize: 9, }, md: { width: 180, height: resolvedVariant === 'full' ? 180 : 115, radius: 58, strokeWidth: 12, fontSize: 18, labelSize: 11, }, lg: { width: 240, height: resolvedVariant === 'full' ? 240 : 150, radius: 76, strokeWidth: 14, fontSize: 22, labelSize: 13, }, } const currentSize = size || 'md' const config = sizeConfig[currentSize] // For full variant, center is the geometric center of the SVG // For semicircle/meter, center is pushed up so the arc+needle fits in the half-height canvas const centerX = config.width / 2 const centerY = resolvedVariant === 'full' ? config.height / 2 : config.radius + config.strokeWidth + 5 const isMeter = resolvedVariant === 'meter' const needleLength = config.radius - 8 // Convert a percentage (0–100) along the arc to an SVG angle in radians const percentToAngleRad = (pct: number) => { const deg = arcConfig.arcStartDeg + (pct * arcConfig.sweepDeg) / 100 return deg * (Math.PI / 180) } // Create an SVG arc path segment between two percentages on the gauge track const createArcPath = (startPercent: number, endPercent: number, radius: number) => { const startAngle = percentToAngleRad(startPercent) const endAngle = percentToAngleRad(endPercent) const startX = centerX + radius * Math.cos(startAngle) const startY = centerY + radius * Math.sin(startAngle) // A full 360° arc is degenerate in SVG (start === end point); split into two half-arcs if (resolvedVariant === 'full' && Math.abs(endPercent - startPercent) >= 100) { const midAngle = startAngle + Math.PI const midX = centerX + radius * Math.cos(midAngle) const midY = centerY + radius * Math.sin(midAngle) return `M ${startX} ${startY} A ${radius} ${radius} 0 1 1 ${midX} ${midY} A ${radius} ${radius} 0 1 1 ${startX} ${startY}` } const endX = centerX + radius * Math.cos(endAngle) const endY = centerY + radius * Math.sin(endAngle) const sweepDelta = endPercent - startPercent const sweepAngle = (sweepDelta / 100) * arcConfig.sweepDeg const largeArcFlag = sweepAngle > 180 ? 1 : 0 return `M ${startX} ${startY} A ${radius} ${radius} 0 ${largeArcFlag} 1 ${endX} ${endY}` } // Needle angle: percentage along the sweep, converted to an absolute SVG rotation // The needle points upward (the line is drawn rightward then rotated) const needleAngle = arcConfig.arcStartDeg + (percentage * arcConfig.sweepDeg) / 100 const currentZoneColor = zonesPct.find((z) => percentage >= z.fromPct && percentage <= z.toPct)?.color || 'hsl(var(--primary))' // Tick marks: semicircle/full use 5 ticks at 0/25/50/75/100 % // meter variant gets denser ticks at every 10% const tickPercentages = resolvedVariant === 'meter' ? [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100] : [0, 25, 50, 75, 100] return (

) } ) GaugeChart.displayName = 'GaugeChart' export { GaugeChart, gaugeChartVariants } 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","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"}]]}]}]]}],["$","$L50",null,{"namespace":"@boldkit","registryDependencies":["@boldkit/utils"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/default/ui/gauge-chart.tsx","content":"$52","type":"registry:ui","target":"components/ui/gauge-chart.tsx"}],"className":"h-[70svh] min-h-80"}]]}]