chartRadialText#

// shadcn/ui "chart-radial-text" recipe — clean-room reimplementation.
//
// A single-value gauge in the same family as chartRadialShape, but with a
// much thinner ring that sweeps most of the circle (leaving only a small
// gap) and ends in distinctly rounded, pill-like caps instead of flat ones.
// Same centered value/caption text treatment as chartRadialShape, but no
// extra decorative framing circles — its background track's radius already
// matches the ring's own band exactly, so no separate inset circles render —
// treat the two as parameter presets of one underlying single-value gauge
// (see renderRadialGauge in ./chart-radial-shared.ts).
//
// Implemented purely from the block's public functional/visual spec — no
// upstream shadcn/ui source was viewed or copied.

import type { DomphyElement } from "@domphy/core";
import {
  type ChartTrendDirection,
  chartTrendFooter,
} from "./chart-area-shared.js";
import { radialCardShell, renderRadialGauge } from "./chart-radial-shared.js";

export interface ChartRadialTextProps {
  value?: number;
  /** Ramp tone of the gauge arc, within the primary family (upstream var(--chart-2) ≈ shift-6). */
  tone?: string;
  captionText?: string;
  title?: string;
  description?: string;
  trendText?: string;
  trendDirection?: ChartTrendDirection;
  footerCaptionText?: string;
  sweepDegrees?: number;
  innerRadiusRatio?: number;
  showDecorativeCircles?: boolean;
  showBackgroundTrack?: boolean;
}

/**
 * shadcn/ui "chart-radial-text" recipe — a compact single-value gauge card
 * with a thin, near-full-circle rounded-cap arc and a large centered number.
 * Call with no arguments for a working demo.
 */
function chartRadialText(
  props: ChartRadialTextProps = {},
): DomphyElement<"div"> {
  const {
    value = 1125,
    tone = "shift-6",
    captionText = "Visitors",
    title = "Radial Chart - Text",
    description = "January - June 2026",
    trendText = "Trending up by 5.2% this month",
    trendDirection = "up",
    footerCaptionText = "Showing total visitors for the last 6 months",
    sweepDegrees = 250,
    // Upstream innerRadius=80 / outerRadius=90 -> a 10-unit band (ratio 80/90).
    innerRadiusRatio = 80 / 90,
    showDecorativeCircles = false,
    showBackgroundTrack = true,
  } = props;

  return radialCardShell({
    title,
    description,
    content: {
      div: [
        renderRadialGauge({
          tone,
          sweepDegrees,
          innerRadiusRatio,
          capStyle: "round",
          showDecorativeCircles,
          showBackgroundTrack,
          valueText: value.toLocaleString("en-US"),
          captionText,
        }),
      ],
    },
    footer: chartTrendFooter({
      trendText,
      direction: trendDirection,
      captionText: footerCaptionText,
    }),
  });
}

export { chartRadialText };