gauge

1"use client";
2 
3import { Slot as SlotPrimitive } from "radix-ui";
4import * as React from "react";
5import { cn } from "@/lib/utils";
6 
7const GAUGE_NAME = "Gauge";
8const INDICATOR_NAME = "GaugeIndicator";
9const TRACK_NAME = "GaugeTrack";
10const RANGE_NAME = "GaugeRange";
11const VALUE_TEXT_NAME = "GaugeValueText";
12const LABEL_NAME = "GaugeLabel";
13 
14const DEFAULT_MAX = 100;
15const DEFAULT_START_ANGLE = 0;
16const DEFAULT_END_ANGLE = 360;
17 
18type GaugeState = "indeterminate" | "complete" | "loading";
19 
20interface DivProps extends React.ComponentProps<"div"> {
21  asChild?: boolean;
22}
23 
24interface PathProps extends React.ComponentProps<"path"> {}
25 
26function getGaugeState(
27  value: number | undefined | null,
28  maxValue: number,
29): GaugeState {
30  return value == null
31    ? "indeterminate"
32    : value === maxValue
33      ? "complete"
34      : "loading";
35}
36 
37function getIsValidNumber(value: unknown): value is number {
38  return typeof value === "number" && Number.isFinite(value);
39}
40 
41function getIsValidMaxNumber(max: unknown): max is number {
42  return getIsValidNumber(max) && max > 0;
43}
44 
45function getIsValidValueNumber(
46  value: unknown,
47  min: number,
48  max: number,
49): value is number {
50  return getIsValidNumber(value) && value <= max && value >= min;
51}
52 
53function getDefaultValueText(value: number, min: number, max: number): string {
54  const percentage = max === min ? 100 : ((value - min) / (max - min)) * 100;
55  return Math.round(percentage).toString();
56}
57 
58function getInvalidValueError(
59  propValue: string,
60  componentName: string,
61): string {
62  return `Invalid prop \`value\` of value \`${propValue}\` supplied to \`${componentName}\`. The \`value\` prop must be a number between \`min\` and \`max\` (inclusive), or \`null\`/\`undefined\` for indeterminate state. The value will be clamped to the valid range.`;
63}
64 
65function getInvalidMaxError(propValue: string, componentName: string): string {
66  return `Invalid prop \`max\` of value \`${propValue}\` supplied to \`${componentName}\`. Only numbers greater than 0 are valid. Defaulting to ${DEFAULT_MAX}.`;
67}
68 
69function getNormalizedAngle(angle: number) {
70  return ((angle % 360) + 360) % 360;
71}
72 
73function polarToCartesian(
74  centerX: number,
75  centerY: number,
76  radius: number,
77  angleInDegrees: number,
78) {
79  const angleInRadians = ((angleInDegrees - 90) * Math.PI) / 180.0;
80  return {
81    x: centerX + radius * Math.cos(angleInRadians),
82    y: centerY + radius * Math.sin(angleInRadians),
83  };
84}
85 
86function describeArc(
87  x: number,
88  y: number,
89// … truncated