{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "gauge-chart",
  "type": "registry:ui",
  "title": "Gauge Chart",
  "description": "A radial gauge for a single value with thresholds, plus text and stacked variants.",
  "dependencies": [
    "recharts"
  ],
  "registryDependencies": [
    "chart"
  ],
  "files": [
    {
      "path": "registry/new-york/ui/gauge-chart.tsx",
      "content": "\"use client\";\n\nimport {\n\tLabel,\n\tPolarGrid,\n\tPolarRadiusAxis,\n\tRadialBar,\n\tRadialBarChart,\n} from \"recharts\";\nimport {\n\ttype ChartConfig,\n\tChartContainer,\n} from \"@/components/ui/chart\";\n\nconst CHART_COLORS = [\"#00bbff\", \"#34d399\", \"#60a5fa\", \"#f472b6\", \"#fb923c\"];\n\nexport type GaugeChartProps = {\n\tvalue: number;\n\ttitle?: string;\n\tmin?: number;\n\tmax?: number;\n\tunit?: string;\n\tthresholds?: { warning: number; danger: number };\n\tvariant?: \"gauge\" | \"text\" | \"stacked\";\n\tsecondValue?: number;\n\tsecondLabel?: string;\n};\n\nexport function GaugeChart(props: GaugeChartProps) {\n\tconst min = props.min ?? 0;\n\tconst max = props.max ?? 100;\n\tconst pct = Math.min(\n\t\t100,\n\t\tMath.max(0, ((props.value - min) / (max - min)) * 100),\n\t);\n\tconst warning = props.thresholds?.warning ?? 60;\n\tconst danger = props.thresholds?.danger ?? 80;\n\tconst color =\n\t\tpct >= danger ? \"#f87171\" : pct >= warning ? \"#fbbf24\" : \"#34d399\";\n\n\tconst variant = props.variant ?? \"gauge\";\n\n\tif (variant === \"text\") {\n\t\tconst textChartConfig: ChartConfig = {\n\t\t\tvalue: { label: props.title ?? \"Value\", color },\n\t\t};\n\t\tconst textData = [{ name: \"value\", value: pct, fill: color }];\n\t\treturn (\n\t\t\t<div className=\"rounded-2xl bg-card text-card-foreground border p-4 text-center\">\n\t\t\t\t<ChartContainer config={textChartConfig} className=\"mx-auto\">\n\t\t\t\t\t<RadialBarChart\n\t\t\t\t\t\tdata={textData}\n\t\t\t\t\t\tstartAngle={0}\n\t\t\t\t\t\tendAngle={250}\n\t\t\t\t\t\touterRadius={90}\n\t\t\t\t\t\tinnerRadius={70}\n\t\t\t\t\t\tclassName=\"mx-auto h-[160px] w-[160px]\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<PolarGrid\n\t\t\t\t\t\t\tgridType=\"circle\"\n\t\t\t\t\t\t\tradialLines={false}\n\t\t\t\t\t\t\tstroke=\"none\"\n\t\t\t\t\t\t\tclassName=\"first:fill-muted last:fill-background\"\n\t\t\t\t\t\t\tpolarRadius={[90, 70]}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<RadialBar dataKey=\"value\" background cornerRadius={10} />\n\t\t\t\t\t\t<PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>\n\t\t\t\t\t\t\t<Label\n\t\t\t\t\t\t\t\tcontent={({ viewBox }) => {\n\t\t\t\t\t\t\t\t\tif (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n\t\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t\t<text\n\t\t\t\t\t\t\t\t\t\t\t\tx={viewBox.cx}\n\t\t\t\t\t\t\t\t\t\t\t\ty={viewBox.cy}\n\t\t\t\t\t\t\t\t\t\t\t\ttextAnchor=\"middle\"\n\t\t\t\t\t\t\t\t\t\t\t\tdominantBaseline=\"middle\"\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t<tspan\n\t\t\t\t\t\t\t\t\t\t\t\t\tx={viewBox.cx}\n\t\t\t\t\t\t\t\t\t\t\t\t\ty={viewBox.cy}\n\t\t\t\t\t\t\t\t\t\t\t\t\tfontSize={28}\n\t\t\t\t\t\t\t\t\t\t\t\t\tfontWeight=\"bold\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tfill={color}\n\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t{props.value}\n\t\t\t\t\t\t\t\t\t\t\t\t\t{props.unit ?? \"\"}\n\t\t\t\t\t\t\t\t\t\t\t\t</tspan>\n\t\t\t\t\t\t\t\t\t\t\t\t{props.title && (\n\t\t\t\t\t\t\t\t\t\t\t\t\t<tspan\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tx={viewBox.cx}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\ty={(viewBox.cy ?? 0) + 22}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tfontSize={12}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tfill=\"#71717a\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t{props.title}\n\t\t\t\t\t\t\t\t\t\t\t\t\t</tspan>\n\t\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t\t</text>\n\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</PolarRadiusAxis>\n\t\t\t\t\t</RadialBarChart>\n\t\t\t\t</ChartContainer>\n\t\t\t</div>\n\t\t);\n\t}\n\n\tif (variant === \"stacked\") {\n\t\tconst total = props.value + (props.secondValue ?? 0);\n\t\tconst stackData = [\n\t\t\t{ primary: props.value, secondary: props.secondValue ?? 0 },\n\t\t];\n\t\tconst stackChartConfig: ChartConfig = {\n\t\t\tprimary: { label: props.title ?? \"Primary\", color },\n\t\t\tsecondary: {\n\t\t\t\tlabel: props.secondLabel ?? \"Secondary\",\n\t\t\t\tcolor: CHART_COLORS[1],\n\t\t\t},\n\t\t};\n\t\treturn (\n\t\t\t<div className=\"rounded-2xl bg-card text-card-foreground border p-4 text-center\">\n\t\t\t\t<ChartContainer config={stackChartConfig} className=\"mx-auto\">\n\t\t\t\t\t<RadialBarChart\n\t\t\t\t\t\tdata={stackData}\n\t\t\t\t\t\tendAngle={180}\n\t\t\t\t\t\tinnerRadius={80}\n\t\t\t\t\t\touterRadius={110}\n\t\t\t\t\t\tclassName=\"mx-auto h-[140px] w-[200px]\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<RadialBar\n\t\t\t\t\t\t\tdataKey=\"secondary\"\n\t\t\t\t\t\t\tfill={CHART_COLORS[1]}\n\t\t\t\t\t\t\tstackId=\"a\"\n\t\t\t\t\t\t\tcornerRadius={5}\n\t\t\t\t\t\t\tclassName=\"stroke-transparent stroke-2\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<RadialBar\n\t\t\t\t\t\t\tdataKey=\"primary\"\n\t\t\t\t\t\t\tfill={color}\n\t\t\t\t\t\t\tstackId=\"a\"\n\t\t\t\t\t\t\tcornerRadius={5}\n\t\t\t\t\t\t\tclassName=\"stroke-transparent stroke-2\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>\n\t\t\t\t\t\t\t<Label\n\t\t\t\t\t\t\t\tcontent={({ viewBox }) => {\n\t\t\t\t\t\t\t\t\tif (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n\t\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t\t<text x={viewBox.cx} y={viewBox.cy} textAnchor=\"middle\">\n\t\t\t\t\t\t\t\t\t\t\t\t<tspan\n\t\t\t\t\t\t\t\t\t\t\t\t\tx={viewBox.cx}\n\t\t\t\t\t\t\t\t\t\t\t\t\ty={(viewBox.cy ?? 0) - 12}\n\t\t\t\t\t\t\t\t\t\t\t\t\tfontSize={22}\n\t\t\t\t\t\t\t\t\t\t\t\t\tfontWeight=\"bold\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"fill-foreground\"\n\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t{total.toLocaleString()}\n\t\t\t\t\t\t\t\t\t\t\t\t</tspan>\n\t\t\t\t\t\t\t\t\t\t\t\t<tspan\n\t\t\t\t\t\t\t\t\t\t\t\t\tx={viewBox.cx}\n\t\t\t\t\t\t\t\t\t\t\t\t\ty={(viewBox.cy ?? 0) + 8}\n\t\t\t\t\t\t\t\t\t\t\t\t\tfontSize={12}\n\t\t\t\t\t\t\t\t\t\t\t\t\tfill=\"#71717a\"\n\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t{props.title ?? \"Total\"}\n\t\t\t\t\t\t\t\t\t\t\t\t</tspan>\n\t\t\t\t\t\t\t\t\t\t\t</text>\n\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</PolarRadiusAxis>\n\t\t\t\t\t</RadialBarChart>\n\t\t\t\t</ChartContainer>\n\t\t\t</div>\n\t\t);\n\t}\n\n\t// Default: \"gauge\" variant\n\tconst maxArc = 250;\n\tconst valueAngle = Math.max(1, (pct / 100) * maxArc);\n\tconst outerR = 65;\n\tconst innerR = 55;\n\n\tconst gaugeConfig: ChartConfig = {\n\t\tvalue: { label: props.title ?? \"Value\", color },\n\t};\n\tconst gaugeData = [{ name: \"value\", value: 1, fill: color }];\n\n\treturn (\n\t\t<div\n\t\t\tclassName=\"rounded-2xl bg-card text-card-foreground border p-4 text-center\"\n\t\t\tstyle={{ width: 200 }}\n\t\t>\n\t\t\t<ChartContainer\n\t\t\t\tconfig={gaugeConfig}\n\t\t\t\tclassName=\"mx-auto h-[160px] w-[160px]\"\n\t\t\t>\n\t\t\t\t<RadialBarChart\n\t\t\t\t\tdata={gaugeData}\n\t\t\t\t\tstartAngle={0}\n\t\t\t\t\tendAngle={valueAngle}\n\t\t\t\t\touterRadius={outerR}\n\t\t\t\t\tinnerRadius={innerR}\n\t\t\t\t>\n\t\t\t\t\t<PolarGrid\n\t\t\t\t\t\tgridType=\"circle\"\n\t\t\t\t\t\tradialLines={false}\n\t\t\t\t\t\tstroke=\"none\"\n\t\t\t\t\t\tclassName=\"first:fill-muted last:fill-background\"\n\t\t\t\t\t\tpolarRadius={[outerR, innerR]}\n\t\t\t\t\t/>\n\t\t\t\t\t<RadialBar dataKey=\"value\" cornerRadius={10} />\n\t\t\t\t\t<PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>\n\t\t\t\t\t\t<Label\n\t\t\t\t\t\t\tcontent={({ viewBox }) => {\n\t\t\t\t\t\t\t\tif (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t<text\n\t\t\t\t\t\t\t\t\t\t\tx={viewBox.cx}\n\t\t\t\t\t\t\t\t\t\t\ty={viewBox.cy}\n\t\t\t\t\t\t\t\t\t\t\ttextAnchor=\"middle\"\n\t\t\t\t\t\t\t\t\t\t\tdominantBaseline=\"middle\"\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t<tspan\n\t\t\t\t\t\t\t\t\t\t\t\tx={viewBox.cx}\n\t\t\t\t\t\t\t\t\t\t\t\ty={viewBox.cy}\n\t\t\t\t\t\t\t\t\t\t\t\tfontSize={28}\n\t\t\t\t\t\t\t\t\t\t\t\tfontWeight=\"bold\"\n\t\t\t\t\t\t\t\t\t\t\t\tfill={color}\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t{props.value}\n\t\t\t\t\t\t\t\t\t\t\t\t{props.unit ?? \"\"}\n\t\t\t\t\t\t\t\t\t\t\t</tspan>\n\t\t\t\t\t\t\t\t\t\t\t{props.title && (\n\t\t\t\t\t\t\t\t\t\t\t\t<tspan\n\t\t\t\t\t\t\t\t\t\t\t\t\tx={viewBox.cx}\n\t\t\t\t\t\t\t\t\t\t\t\t\ty={(viewBox.cy ?? 0) + 22}\n\t\t\t\t\t\t\t\t\t\t\t\t\tfontSize={12}\n\t\t\t\t\t\t\t\t\t\t\t\t\tfill=\"#71717a\"\n\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t{props.title}\n\t\t\t\t\t\t\t\t\t\t\t\t</tspan>\n\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t</text>\n\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</PolarRadiusAxis>\n\t\t\t\t</RadialBarChart>\n\t\t\t</ChartContainer>\n\t\t</div>\n\t);\n}\n",
      "type": "registry:ui"
    }
  ]
}