gauge

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