xertica-ui 2.1.2 → 2.1.4

package/components/ui/chart/chart.tsx

@@ -71,6 +71,16 @@ export type ChartPeriod = {
 
 export type ChartBarSize = "sm" | "md" | "lg" | "xl" | number;
 
+/** Curve interpolation type for line and area charts */
+export type ChartCurveType =
+  | "monotone"
+  | "linear"
+  | "step"
+  | "stepBefore"
+  | "stepAfter"
+  | "natural"
+  | "basis";
+
 type ChartValueFormatter = (value: number | string) => string;
 
 export type ChartErrorState = boolean | string | Error | React.ReactNode;
@@ -100,6 +110,9 @@ const defaultChartColors = [
   "var(--chart-3)",
   "var(--chart-4)",
   "var(--chart-5)",
+  "var(--chart-6)",
+  "var(--chart-7)",
+  "var(--chart-8)",
 ];
 
 const chartBarSizes: Record<Exclude<ChartBarSize, number>, number> = {
@@ -188,13 +201,13 @@ const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
             ([theme, prefix]) => `
 ${prefix} [data-chart=${id}] {
 ${colorConfig
-  .map(([key, itemConfig]) => {
-    const color =
-      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||
-      itemConfig.color;
-    return color ? `  --color-${key}: ${color};` : null;
-  })
-  .join("\n")}
+                .map(([key, itemConfig]) => {
+                  const color =
+                    itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||
+                    itemConfig.color;
+                  return color ? `  --color-${key}: ${color};` : null;
+                })
+                .join("\n")}
 }
 `,
           )
@@ -275,7 +288,7 @@ function ChartTooltipContent({
   return (
     <div
       className={cn(
-        "border-border/50 bg-background grid min-w-[8rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl",
+        "border-border/50 bg-background/95 backdrop-blur-sm grid min-w-[8rem] items-start gap-1.5 rounded-xl border px-3 py-2 text-xs shadow-xl",
         className,
       )}
     >
@@ -335,7 +348,7 @@ function ChartTooltipContent({
                       </span>
                     </div>
                     {item.value && (
-                      <span className="text-foreground font-mono font-medium tabular-nums">
+                      <span className="text-foreground font-mono font-semibold tabular-nums">
                         {item.value.toLocaleString()}
                       </span>
                     )}
@@ -392,13 +405,13 @@ function ChartLegendContent({
               <itemConfig.icon />
             ) : (
               <div
-                className="h-2 w-2 shrink-0 rounded-[2px] bg-(--color-bg)"
+                className="h-2 w-2 shrink-0 rounded-full bg-(--color-bg)"
                 style={{
                   "--color-bg": item.color || `var(--color-${key})`,
                 } as React.CSSProperties}
               />
             )}
-            <span>{itemConfig?.label || item.value}</span>
+            <span className="text-muted-foreground text-xs">{itemConfig?.label || item.value}</span>
           </div>
         );
       })}
@@ -418,8 +431,8 @@ function getPayloadConfigFromPayload(
 
   const payloadPayload =
     "payload" in payload &&
-    typeof payload.payload === "object" &&
-    payload.payload !== null
+      typeof payload.payload === "object" &&
+      payload.payload !== null
       ? payload.payload
       : undefined;
 
@@ -494,6 +507,20 @@ function getChartConfigWithColors(
   }, {});
 }
 
+/** Build a ChartConfig from a list of keys (no pre-existing config needed). */
+function buildChartConfig(
+  keys: string[],
+  colors?: DashboardChartColors,
+): ChartConfig {
+  return keys.reduce<ChartConfig>((cfg, key, index) => {
+    cfg[key] = {
+      label: key,
+      color: getSeriesColor(key, index, colors),
+    };
+    return cfg;
+  }, {});
+}
+
 function formatTick(value: number | string) {
   if (typeof value !== "number") {
     return value;
@@ -700,9 +727,51 @@ function ChartCard({
   );
 }
 
+// ─── Gradient defs helper ────────────────────────────────────────────────────
+
+/**
+ * Renders SVG `<defs>` with linear gradients for each series key.
+ * Used internally by area charts when `gradientFill` is enabled.
+ */
+function AreaGradientDefs({
+  seriesKeys,
+  opacity = 0.3,
+}: {
+  seriesKeys: string[];
+  opacity?: number;
+}) {
+  return (
+    <defs>
+      {seriesKeys.map((key) => (
+        <linearGradient
+          key={key}
+          id={`gradient-${key}`}
+          x1="0"
+          y1="0"
+          x2="0"
+          y2="1"
+        >
+          <stop
+            offset="5%"
+            stopColor={`var(--color-${key})`}
+            stopOpacity={opacity}
+          />
+          <stop
+            offset="95%"
+            stopColor={`var(--color-${key})`}
+            stopOpacity={0}
+          />
+        </linearGradient>
+      ))}
+    </defs>
+  );
+}
+
+// ─── DashboardBarChart ────────────────────────────────────────────────────────
+
 export interface DashboardBarChartProps
   extends Omit<React.ComponentProps<typeof ChartContainer>, "children">,
-    ChartStateProps {
+  ChartStateProps {
   data: DashboardChartDatum[];
   indexKey?: string;
   series?: DashboardChartSeries[];
@@ -770,9 +839,14 @@ function DashboardBarChart({
       className={cn("h-[320px] w-full", className)}
       {...props}
     >
-      <RechartsPrimitive.BarChart data={data} accessibilityLayer>
+      <RechartsPrimitive.BarChart data={data} accessibilityLayer barGap={4}>
         {showGrid ? (
-          <RechartsPrimitive.CartesianGrid vertical={false} />
+          <RechartsPrimitive.CartesianGrid
+            vertical={false}
+            strokeDasharray="3 3"
+            stroke="var(--border)"
+            strokeOpacity={0.5}
+          />
         ) : null}
         <RechartsPrimitive.XAxis
           dataKey={indexKey}
@@ -786,7 +860,10 @@ function DashboardBarChart({
           tickMargin={8}
           tickFormatter={valueFormatter}
         />
-        <ChartTooltip content={<ChartTooltipContent />} />
+        <ChartTooltip
+          cursor={{ fill: "var(--muted)", opacity: 0.4, radius: 4 }}
+          content={<ChartTooltipContent />}
+        />
         {showLegend ? (
           <ChartLegend content={<ChartLegendContent />} />
         ) : null}
@@ -808,6 +885,9 @@ function DashboardBarChart({
                 radius={isTop ? [4, 4, 0, 0] : [0, 0, 0, 0]}
                 barSize={getBarSize(barSize)}
                 stackId={stacked ? item.stackId || "total" : item.stackId}
+                isAnimationActive
+                animationDuration={600}
+                animationEasing="ease-out"
               />
             );
           });
@@ -817,9 +897,11 @@ function DashboardBarChart({
   );
 }
 
+// ─── DashboardLineChart ───────────────────────────────────────────────────────
+
 export interface DashboardLineChartProps
   extends Omit<React.ComponentProps<typeof ChartContainer>, "children">,
-    ChartStateProps {
+  ChartStateProps {
   data: DashboardChartDatum[];
   indexKey?: string;
   series?: DashboardChartSeries[];
@@ -827,6 +909,8 @@ export interface DashboardLineChartProps
   showDots?: boolean;
   showGrid?: boolean;
   showLegend?: boolean;
+  curveType?: ChartCurveType;
+  strokeWidth?: number;
   valueFormatter?: ChartValueFormatter;
 }
 
@@ -839,6 +923,8 @@ function DashboardLineChart({
   showDots = false,
   showGrid = true,
   showLegend = true,
+  curveType = "monotone",
+  strokeWidth = 2,
   valueFormatter = formatTick,
   isLoading,
   error,
@@ -887,7 +973,12 @@ function DashboardLineChart({
     >
       <RechartsPrimitive.LineChart data={data} accessibilityLayer>
         {showGrid ? (
-          <RechartsPrimitive.CartesianGrid vertical={false} />
+          <RechartsPrimitive.CartesianGrid
+            vertical={false}
+            strokeDasharray="3 3"
+            stroke="var(--border)"
+            strokeOpacity={0.5}
+          />
         ) : null}
         <RechartsPrimitive.XAxis
           dataKey={indexKey}
@@ -908,13 +999,16 @@ function DashboardLineChart({
         {chartSeries.map((item) => (
           <RechartsPrimitive.Line
             key={item.key}
-            type="monotone"
+            type={curveType}
             dataKey={item.key}
             stroke={`var(--color-${item.key})`}
-            strokeWidth={2}
-            dot={showDots ? { r: 3, fill: `var(--color-${item.key})` } : false}
-            activeDot={{ r: 5 }}
+            strokeWidth={strokeWidth}
+            dot={showDots ? { r: 3, fill: `var(--color-${item.key})`, strokeWidth: 0 } : false}
+            activeDot={{ r: 5, strokeWidth: 0 }}
             yAxisId={item.yAxisId}
+            isAnimationActive
+            animationDuration={600}
+            animationEasing="ease-out"
           />
         ))}
       </RechartsPrimitive.LineChart>
@@ -922,9 +1016,11 @@ function DashboardLineChart({
   );
 }
 
+// ─── HorizontalBarChart ───────────────────────────────────────────────────────
+
 export interface HorizontalBarChartProps
   extends Omit<React.ComponentProps<typeof ChartContainer>, "children">,
-    ChartStateProps {
+  ChartStateProps {
   data: DashboardChartDatum[];
   indexKey?: string;
   series?: DashboardChartSeries[];
@@ -1001,7 +1097,12 @@ function HorizontalBarChart({
         margin={{ left: 8, right: 16 }}
       >
         {showGrid ? (
-          <RechartsPrimitive.CartesianGrid horizontal={false} />
+          <RechartsPrimitive.CartesianGrid
+            horizontal={false}
+            strokeDasharray="3 3"
+            stroke="var(--border)"
+            strokeOpacity={0.5}
+          />
         ) : null}
         <RechartsPrimitive.XAxis
           type="number"
@@ -1030,6 +1131,9 @@ function HorizontalBarChart({
             radius={[0, 4, 4, 0]}
             barSize={getBarSize(barSize)}
             stackId={stacked ? item.stackId || "total" : item.stackId}
+            isAnimationActive
+            animationDuration={600}
+            animationEasing="ease-out"
           />
         ))}
       </RechartsPrimitive.BarChart>
@@ -1037,9 +1141,11 @@ function HorizontalBarChart({
   );
 }
 
+// ─── InteractiveTimeSeriesChart ───────────────────────────────────────────────
+
 export interface InteractiveTimeSeriesChartProps
   extends Omit<React.ComponentProps<typeof ChartContainer>, "children">,
-    ChartStateProps {
+  ChartStateProps {
   data: DashboardChartDatum[];
   indexKey?: string;
   series?: DashboardChartSeries[];
@@ -1053,6 +1159,10 @@ export interface InteractiveTimeSeriesChartProps
   ) => DashboardChartDatum[];
   showGrid?: boolean;
   showLegend?: boolean;
+  showDots?: boolean;
+  gradientFill?: boolean;
+  curveType?: ChartCurveType;
+  strokeWidth?: number;
   valueFormatter?: ChartValueFormatter;
 }
 
@@ -1068,6 +1178,10 @@ function InteractiveTimeSeriesChart({
   filterData = defaultFilterData,
   showGrid = true,
   showLegend = false,
+  showDots = false,
+  gradientFill = true,
+  curveType = "monotone",
+  strokeWidth = 2,
   valueFormatter = formatTick,
   isLoading,
   error,
@@ -1121,7 +1235,7 @@ function InteractiveTimeSeriesChart({
       <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
         {chartSeries.length > 1 ? (
           <div
-            className="inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground"
+            className="inline-flex h-10 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground"
             role="group"
             aria-label="Selecionar metrica do grafico"
           >
@@ -1137,7 +1251,7 @@ function InteractiveTimeSeriesChart({
                   aria-pressed={activeSeries === item.key}
                   onClick={() => setActiveSeries(item.key)}
                   className={cn(
-                    "h-8 px-3 text-sm font-medium",
+                    "h-8 px-3 text-sm font-medium transition-all",
                     activeSeries === item.key
                       ? "bg-background text-foreground shadow-sm"
                       : "text-muted-foreground hover:text-foreground",
@@ -1171,8 +1285,19 @@ function InteractiveTimeSeriesChart({
           {...props}
         >
           <RechartsPrimitive.AreaChart data={filteredData} accessibilityLayer>
+            {gradientFill && (
+              <AreaGradientDefs
+                seriesKeys={visibleSeries.map((s) => s.key)}
+                opacity={0.4}
+              />
+            )}
             {showGrid ? (
-              <RechartsPrimitive.CartesianGrid vertical={false} />
+              <RechartsPrimitive.CartesianGrid
+                vertical={false}
+                strokeDasharray="3 3"
+                stroke="var(--border)"
+                strokeOpacity={0.5}
+              />
             ) : null}
             <RechartsPrimitive.XAxis
               dataKey={indexKey}
@@ -1193,13 +1318,21 @@ function InteractiveTimeSeriesChart({
             {visibleSeries.map((item) => (
               <RechartsPrimitive.Area
                 key={item.key}
-                type="monotone"
+                type={curveType}
                 dataKey={item.key}
                 stroke={`var(--color-${item.key})`}
-                fill={`var(--color-${item.key})`}
-                fillOpacity={0.16}
-                strokeWidth={2}
-                dot={false}
+                fill={
+                  gradientFill
+                    ? `url(#gradient-${item.key})`
+                    : `var(--color-${item.key})`
+                }
+                fillOpacity={gradientFill ? 1 : 0.16}
+                strokeWidth={strokeWidth}
+                dot={showDots ? { r: 3, fill: `var(--color-${item.key})`, strokeWidth: 0 } : false}
+                activeDot={{ r: 5, strokeWidth: 0 }}
+                isAnimationActive
+                animationDuration={600}
+                animationEasing="ease-out"
               />
             ))}
           </RechartsPrimitive.AreaChart>
@@ -1209,9 +1342,11 @@ function InteractiveTimeSeriesChart({
   );
 }
 
+// ─── ComboMetricChart ─────────────────────────────────────────────────────────
+
 export interface ComboMetricChartProps
   extends Omit<React.ComponentProps<typeof ChartContainer>, "children">,
-    ChartStateProps {
+  ChartStateProps {
   data: DashboardChartDatum[];
   indexKey?: string;
   series?: DashboardChartSeries[];
@@ -1219,6 +1354,8 @@ export interface ComboMetricChartProps
   barSize?: ChartBarSize;
   showGrid?: boolean;
   showLegend?: boolean;
+  gradientFill?: boolean;
+  curveType?: ChartCurveType;
   valueFormatter?: ChartValueFormatter;
 }
 
@@ -1231,6 +1368,8 @@ function ComboMetricChart({
   barSize = "md",
   showGrid = true,
   showLegend = true,
+  gradientFill = false,
+  curveType = "monotone",
   valueFormatter = formatTick,
   isLoading,
   error,
@@ -1271,6 +1410,10 @@ function ComboMetricChart({
     return chartState;
   }
 
+  const areaSeries = gradientFill
+    ? chartSeries.filter((s) => s.type === "area").map((s) => s.key)
+    : [];
+
   return (
     <ChartContainer
       config={chartConfig}
@@ -1278,8 +1421,16 @@ function ComboMetricChart({
       {...props}
     >
       <RechartsPrimitive.ComposedChart data={data} accessibilityLayer>
+        {gradientFill && areaSeries.length > 0 && (
+          <AreaGradientDefs seriesKeys={areaSeries} opacity={0.35} />
+        )}
         {showGrid ? (
-          <RechartsPrimitive.CartesianGrid vertical={false} />
+          <RechartsPrimitive.CartesianGrid
+            vertical={false}
+            strokeDasharray="3 3"
+            stroke="var(--border)"
+            strokeOpacity={0.5}
+          />
         ) : null}
         <RechartsPrimitive.XAxis
           dataKey={indexKey}
@@ -1301,24 +1452,36 @@ function ComboMetricChart({
           item.type === "line" ? (
             <RechartsPrimitive.Line
               key={item.key}
-              type="monotone"
+              type={curveType}
               dataKey={item.key}
               stroke={`var(--color-${item.key})`}
               strokeWidth={2}
               dot={false}
+              activeDot={{ r: 5, strokeWidth: 0 }}
               yAxisId={item.yAxisId}
+              isAnimationActive
+              animationDuration={600}
+              animationEasing="ease-out"
             />
           ) : item.type === "area" ? (
             <RechartsPrimitive.Area
               key={item.key}
-              type="monotone"
+              type={curveType}
               dataKey={item.key}
               stroke={`var(--color-${item.key})`}
-              fill={`var(--color-${item.key})`}
-              fillOpacity={0.12}
+              fill={
+                gradientFill
+                  ? `url(#gradient-${item.key})`
+                  : `var(--color-${item.key})`
+              }
+              fillOpacity={gradientFill ? 1 : 0.12}
               strokeWidth={2}
               dot={false}
+              activeDot={{ r: 5, strokeWidth: 0 }}
               yAxisId={item.yAxisId}
+              isAnimationActive
+              animationDuration={600}
+              animationEasing="ease-out"
             />
           ) : (
             <RechartsPrimitive.Bar
@@ -1328,6 +1491,9 @@ function ComboMetricChart({
               radius={[4, 4, 0, 0]}
               barSize={getBarSize(barSize)}
               yAxisId={item.yAxisId}
+              isAnimationActive
+              animationDuration={600}
+              animationEasing="ease-out"
             />
           ),
         )}
@@ -1336,9 +1502,11 @@ function ComboMetricChart({
   );
 }
 
+// ─── DonutBreakdownChart ──────────────────────────────────────────────────────
+
 export interface DonutBreakdownChartProps
   extends Omit<React.ComponentProps<typeof ChartContainer>, "children">,
-    ChartStateProps {
+  ChartStateProps {
   data: DashboardChartDatum[];
   nameKey?: string;
   valueKey?: string;
@@ -1346,6 +1514,10 @@ export interface DonutBreakdownChartProps
   centerLabel?: React.ReactNode;
   centerValue?: React.ReactNode;
   showLegend?: boolean;
+  /** Inner radius as percentage string (e.g. "58%") or number */
+  innerRadius?: string | number;
+  /** Outer radius as percentage string (e.g. "82%") or number */
+  outerRadius?: string | number;
 }
 
 function DonutBreakdownChart({
@@ -1357,6 +1529,8 @@ function DonutBreakdownChart({
   centerLabel,
   centerValue,
   showLegend = true,
+  innerRadius = "58%",
+  outerRadius = "82%",
   isLoading,
   error,
   onRetry,
@@ -1416,11 +1590,14 @@ function DonutBreakdownChart({
           data={data}
           dataKey={valueKey}
           nameKey={nameKey}
-          innerRadius="58%"
-          outerRadius="82%"
-          paddingAngle={2}
+          innerRadius={innerRadius}
+          outerRadius={outerRadius}
+          paddingAngle={3}
           activeIndex={activeIndex}
           onMouseEnter={(_, index) => setActiveIndex(index)}
+          isAnimationActive
+          animationDuration={600}
+          animationEasing="ease-out"
         >
           {data.map((entry, index) => {
             const key = String(entry[nameKey] || `segment-${index}`);
@@ -1429,7 +1606,8 @@ function DonutBreakdownChart({
               <RechartsPrimitive.Cell
                 key={key}
                 fill={`var(--color-${key})`}
-                opacity={index === activeIndex ? 1 : 0.72}
+                opacity={index === activeIndex ? 1 : 0.7}
+                stroke="transparent"
               />
             );
           })}
@@ -1477,6 +1655,696 @@ function DonutBreakdownChart({
   );
 }
 
+// ─── SparklineChart ───────────────────────────────────────────────────────────
+
+export interface SparklineChartProps {
+  /** Data array — each item must have the `dataKey` field */
+  data: DashboardChartDatum[];
+  /** Key to plot on the Y axis */
+  dataKey: string;
+  /** Color for the line/area — defaults to `var(--chart-1)` */
+  color?: string;
+  /** Show filled area under the line */
+  filled?: boolean;
+  /** Show the last data point as a dot */
+  showEndDot?: boolean;
+  /** Curve interpolation type */
+  curveType?: ChartCurveType;
+  /** Stroke width */
+  strokeWidth?: number;
+  className?: string;
+}
+
+/**
+ * Minimal inline sparkline chart — no axes, no grid, no tooltip.
+ * Ideal for embedding inside stat cards or table cells.
+ *
+ * @ai-rules
+ * - Use `filled` for area-style sparklines.
+ * - Keep `className` height small (e.g. `h-12` or `h-16`).
+ * - Do NOT wrap in `ChartCard` — it is designed to be inline.
+ */
+function SparklineChart({
+  data,
+  dataKey,
+  color = "var(--chart-1)",
+  filled = true,
+  showEndDot = true,
+  curveType = "monotone",
+  strokeWidth = 2,
+  className,
+}: SparklineChartProps) {
+  const sparkId = React.useId().replace(/:/g, "");
+  const lastPoint = data[data.length - 1];
+  const lastValue = lastPoint ? lastPoint[dataKey] : undefined;
+
+  return (
+    <div className={cn("relative h-12 w-full min-w-0", className)}>
+      <RechartsPrimitive.ResponsiveContainer width="100%" height="100%">
+        <RechartsPrimitive.AreaChart
+          data={data}
+          margin={{ top: 4, right: showEndDot ? 8 : 0, bottom: 0, left: 0 }}
+        >
+          {filled && (
+            <defs>
+              <linearGradient
+                id={`spark-gradient-${sparkId}`}
+                x1="0"
+                y1="0"
+                x2="0"
+                y2="1"
+              >
+                <stop offset="5%" stopColor={color} stopOpacity={0.3} />
+                <stop offset="95%" stopColor={color} stopOpacity={0} />
+              </linearGradient>
+            </defs>
+          )}
+          <RechartsPrimitive.Area
+            type={curveType}
+            dataKey={dataKey}
+            stroke={color}
+            strokeWidth={strokeWidth}
+            fill={filled ? `url(#spark-gradient-${sparkId})` : "none"}
+            fillOpacity={1}
+            dot={false}
+            activeDot={false}
+            isAnimationActive
+            animationDuration={600}
+            animationEasing="ease-out"
+          />
+        </RechartsPrimitive.AreaChart>
+      </RechartsPrimitive.ResponsiveContainer>
+      {showEndDot && lastValue !== undefined && lastValue !== null && (
+        <div
+          className="pointer-events-none absolute right-0 top-1/2 h-2.5 w-2.5 -translate-y-1/2 rounded-full ring-2 ring-background"
+          style={{ backgroundColor: color }}
+        />
+      )}
+    </div>
+  );
+}
+
+// ─── RadarChart ───────────────────────────────────────────────────────────────
+
+export interface RadarMetricChartProps extends ChartStateProps {
+  /** Data array — each item is one axis point on the radar */
+  data: DashboardChartDatum[];
+  /** Key in each datum used as the axis label */
+  labelKey: string;
+  /**
+   * Series to render. Each entry maps to one `<Radar>` element.
+   * Use a single entry for a simple radar, multiple for comparison.
+   */
+  series: DashboardChartSeries[];
+  /** Override colors per series key or as an ordered array */
+  colors?: DashboardChartColors;
+  /** Fill the radar polygon (default: true) */
+  filled?: boolean;
+  /** Fill opacity when `filled` is true (default: 0.25) */
+  fillOpacity?: number;
+  /** Show dots on each axis point (default: false) */
+  showDots?: boolean;
+  /** Show the polar grid lines (default: true) */
+  showGrid?: boolean;
+  /** Show the legend (default: true when multiple series) */
+  showLegend?: boolean;
+  /** Format axis tick values */
+  valueFormatter?: ChartValueFormatter;
+  className?: string;
+}
+
+function RadarMetricChart({
+  data,
+  labelKey,
+  series,
+  colors,
+  filled = true,
+  fillOpacity = 0.25,
+  showDots = false,
+  showGrid = true,
+  showLegend,
+  valueFormatter,
+  isLoading,
+  error,
+  onRetry,
+  retryLabel,
+  emptyTitle,
+  emptyDescription,
+  errorTitle,
+  errorDescription,
+  loadingLabel,
+  stateClassName,
+  className,
+}: RadarMetricChartProps) {
+  const chartConfig = React.useMemo(
+    () => buildChartConfig(series.map((s) => s.key), colors),
+    [series, colors],
+  );
+
+  const hasData = data.length > 0 && series.length > 0;
+  const chartState = getChartState(
+    { isLoading, error, emptyTitle, emptyDescription, errorTitle, errorDescription, loadingLabel, stateClassName, onRetry, retryLabel },
+    hasData,
+    stateClassName,
+  );
+
+  const displayLegend = showLegend ?? series.length > 1;
+
+  return (
+    <ChartContainer config={chartConfig} className={cn("h-[300px] w-full", className)}>
+      {chartState ?? (
+        <RechartsPrimitive.RadarChart data={data} accessibilityLayer>
+          {showGrid && (
+            <RechartsPrimitive.PolarGrid
+              stroke="var(--border)"
+              strokeOpacity={0.6}
+            />
+          )}
+          <RechartsPrimitive.PolarAngleAxis
+            dataKey={labelKey}
+            tick={{ fill: "var(--muted-foreground)", fontSize: 12 }}
+          />
+          <RechartsPrimitive.PolarRadiusAxis
+            tick={false}
+            axisLine={false}
+            tickFormatter={valueFormatter}
+          />
+          <ChartTooltip
+            content={
+              <ChartTooltipContent
+                formatter={valueFormatter ? (v) => valueFormatter(v as number) : undefined}
+              />
+            }
+          />
+          {displayLegend && (
+            <ChartLegend content={<ChartLegendContent />} />
+          )}
+          {series.map((s) => (
+            <RechartsPrimitive.Radar
+              key={s.key}
+              name={s.label as string ?? s.key}
+              dataKey={s.key}
+              stroke={`var(--color-${s.key})`}
+              fill={filled ? `var(--color-${s.key})` : "none"}
+              fillOpacity={filled ? fillOpacity : 0}
+              dot={showDots ? { r: 3, fill: `var(--color-${s.key})` } : false}
+              isAnimationActive
+              animationDuration={600}
+              animationEasing="ease-out"
+            />
+          ))}
+        </RechartsPrimitive.RadarChart>
+      )}
+    </ChartContainer>
+  );
+}
+
+// ─── PieMetricChart ───────────────────────────────────────────────────────────
+
+export interface PieMetricChartProps extends ChartStateProps {
+  /** Data array — each item is one slice */
+  data: DashboardChartDatum[];
+  /** Key in each datum used as the slice name/label */
+  nameKey: string;
+  /** Key in each datum used as the slice value */
+  valueKey: string;
+  /** Override colors as an ordered array or per-name map */
+  colors?: DashboardChartColors;
+  /** Outer radius of the pie (default: "80%") */
+  outerRadius?: number | string;
+  /** Inner radius — set > 0 to make a donut (default: 0) */
+  innerRadius?: number | string;
+  /** Show percentage labels inside/outside each slice (default: false) */
+  showLabels?: boolean;
+  /** Show the legend (default: true) */
+  showLegend?: boolean;
+  /**
+   * Index of the slice to "explode" (offset outward).
+   * Pass -1 or undefined to disable.
+   */
+  explodeIndex?: number;
+  /** Offset distance for the exploded slice in px (default: 12) */
+  explodeOffset?: number;
+  /** Format tooltip values */
+  valueFormatter?: ChartValueFormatter;
+  className?: string;
+}
+
+function PieMetricChart({
+  data,
+  nameKey,
+  valueKey,
+  colors,
+  outerRadius = "80%",
+  innerRadius = 0,
+  showLabels = false,
+  showLegend = true,
+  explodeIndex,
+  explodeOffset = 12,
+  valueFormatter,
+  isLoading,
+  error,
+  onRetry,
+  retryLabel,
+  emptyTitle,
+  emptyDescription,
+  errorTitle,
+  errorDescription,
+  loadingLabel,
+  stateClassName,
+  className,
+}: PieMetricChartProps) {
+  // Build config from unique name values
+  const names = React.useMemo(
+    () => data.map((d) => String(d[nameKey] ?? "")),
+    [data, nameKey],
+  );
+
+  const chartConfig = React.useMemo(
+    () => buildChartConfig(names, colors),
+    [names, colors],
+  );
+
+  const hasData = hasPieData(data, nameKey, valueKey);
+  const chartState = getChartState(
+    { isLoading, error, emptyTitle, emptyDescription, errorTitle, errorDescription, loadingLabel, stateClassName, onRetry, retryLabel },
+    hasData,
+    stateClassName,
+  );
+
+  return (
+    <ChartContainer config={chartConfig} className={cn("h-[300px] w-full", className)}>
+      {chartState ?? (
+        <RechartsPrimitive.PieChart accessibilityLayer>
+          <ChartTooltip
+            content={
+              <ChartTooltipContent
+                nameKey={nameKey}
+                formatter={valueFormatter ? (v) => valueFormatter(v as number) : undefined}
+              />
+            }
+          />
+          {showLegend && <ChartLegend content={<ChartLegendContent nameKey={nameKey} />} />}
+          <RechartsPrimitive.Pie
+            data={data}
+            dataKey={valueKey}
+            nameKey={nameKey}
+            outerRadius={outerRadius}
+            innerRadius={innerRadius}
+            paddingAngle={2}
+            label={
+              showLabels
+                ? ({ cx, cy, midAngle, innerRadius: ir, outerRadius: or, percent }) => {
+                  const RADIAN = Math.PI / 180;
+                  const radius = Number(ir) + (Number(or) - Number(ir)) * 1.35;
+                  const x = Number(cx) + radius * Math.cos(-midAngle * RADIAN);
+                  const y = Number(cy) + radius * Math.sin(-midAngle * RADIAN);
+                  return percent > 0.04 ? (
+                    <text
+                      x={x}
+                      y={y}
+                      fill="var(--foreground)"
+                      textAnchor={x > Number(cx) ? "start" : "end"}
+                      dominantBaseline="central"
+                      fontSize={12}
+                      fontWeight={500}
+                    >
+                      {`${(percent * 100).toFixed(0)}%`}
+                    </text>
+                  ) : null;
+                }
+                : false
+            }
+            labelLine={false}
+            isAnimationActive
+            animationDuration={600}
+            animationEasing="ease-out"
+          >
+            {data.map((entry, index) => {
+              const name = String(entry[nameKey] ?? "");
+              const isExploded = index === explodeIndex;
+              return (
+                <RechartsPrimitive.Cell
+                  key={`cell-${index}`}
+                  fill={chartConfig[name]?.color ?? `var(--chart-${(index % 8) + 1})`}
+                  stroke="var(--background)"
+                  strokeWidth={2}
+                  style={
+                    isExploded
+                      ? { filter: `drop-shadow(0 4px 8px color-mix(in srgb, ${chartConfig[name]?.color ?? "var(--chart-1)"} 40%, transparent))` }
+                      : undefined
+                  }
+                />
+              );
+            })}
+          </RechartsPrimitive.Pie>
+        </RechartsPrimitive.PieChart>
+      )}
+    </ChartContainer>
+  );
+}
+
+// ─── RadialBarMetricChart ─────────────────────────────────────────────────────
+
+export interface RadialBarMetricChartProps extends ChartStateProps {
+  /**
+   * Data array. Each item should have a `name` field (for labels) and
+   * the `dataKey` field (for values, 0–100 for percentage-based display).
+   */
+  data: DashboardChartDatum[];
+  /** Key in each datum used as the bar value (default: "value") */
+  dataKey?: string;
+  /** Key in each datum used as the bar label (default: "name") */
+  nameKey?: string;
+  /** Override colors as an ordered array or per-name map */
+  colors?: DashboardChartColors;
+  /** Inner radius of the radial bar (default: "30%") */
+  innerRadius?: number | string;
+  /** Outer radius of the radial bar (default: "100%") */
+  outerRadius?: number | string;
+  /** Start angle in degrees (default: 90 — top) */
+  startAngle?: number;
+  /** End angle in degrees (default: -270 — full circle) */
+  endAngle?: number;
+  /** Show background track behind each bar (default: true) */
+  showBackground?: boolean;
+  /** Show the legend (default: true) */
+  showLegend?: boolean;
+  /** Format tooltip values */
+  valueFormatter?: ChartValueFormatter;
+  className?: string;
+}
+
+function RadialBarMetricChart({
+  data,
+  dataKey = "value",
+  nameKey = "name",
+  colors,
+  innerRadius = "30%",
+  outerRadius = "100%",
+  startAngle = 90,
+  endAngle = -270,
+  showBackground = true,
+  showLegend = true,
+  valueFormatter,
+  isLoading,
+  error,
+  onRetry,
+  retryLabel,
+  emptyTitle,
+  emptyDescription,
+  errorTitle,
+  errorDescription,
+  loadingLabel,
+  stateClassName,
+  className,
+}: RadialBarMetricChartProps) {
+  const names = React.useMemo(
+    () => data.map((d) => String(d[nameKey] ?? "")),
+    [data, nameKey],
+  );
+
+  const chartConfig = React.useMemo(
+    () => buildChartConfig(names, colors),
+    [names, colors],
+  );
+
+  const hasData = data.length > 0;
+  const chartState = getChartState(
+    { isLoading, error, emptyTitle, emptyDescription, errorTitle, errorDescription, loadingLabel, stateClassName, onRetry, retryLabel },
+    hasData,
+    stateClassName,
+  );
+
+  // Inject per-item fill color
+  const coloredData = React.useMemo(
+    () =>
+      data.map((item, index) => {
+        const name = String(item[nameKey] ?? "");
+        return {
+          ...item,
+          fill: chartConfig[name]?.color ?? `var(--chart-${(index % 8) + 1})`,
+        };
+      }),
+    [data, nameKey, chartConfig],
+  );
+
+  return (
+    <div className={cn("flex w-full flex-col gap-3", className)}>
+      <ChartContainer config={chartConfig} className="h-[260px] w-full">
+        {chartState ?? (
+          <RechartsPrimitive.RadialBarChart
+            data={coloredData}
+            innerRadius={innerRadius}
+            outerRadius={outerRadius}
+            startAngle={startAngle}
+            endAngle={endAngle}
+            accessibilityLayer
+          >
+            <ChartTooltip
+              cursor={false}
+              content={
+                <ChartTooltipContent
+                  nameKey={nameKey}
+                  formatter={valueFormatter ? (v) => valueFormatter(v as number) : undefined}
+                />
+              }
+            />
+            <RechartsPrimitive.RadialBar
+              dataKey={dataKey}
+              background={showBackground ? { fill: "var(--muted)" } : false}
+              cornerRadius={6}
+              isAnimationActive
+              animationDuration={700}
+              animationEasing="ease-out"
+            />
+          </RechartsPrimitive.RadialBarChart>
+        )}
+      </ChartContainer>
+      {showLegend && !chartState && (
+        <div className="flex flex-wrap justify-center gap-x-4 gap-y-1.5 px-2">
+          {coloredData.map((item, index) => {
+            const d = item as DashboardChartDatum & { fill: string };
+            const name = String(d[nameKey] ?? "");
+            const fillColor = d.fill ?? `var(--chart-${(index % 8) + 1})`;
+            const val = d[dataKey];
+            return (
+              <div key={name} className="flex items-center gap-1.5">
+                <span
+                  className="inline-block h-2.5 w-2.5 shrink-0 rounded-full"
+                  style={{ backgroundColor: fillColor }}
+                />
+                <span className="text-xs text-muted-foreground">
+                  {name}
+                  {val !== undefined && val !== null && (
+                    <span className="ml-1 font-medium text-foreground">
+                      {valueFormatter ? valueFormatter(val as number) : String(val)}
+                    </span>
+                  )}
+                </span>
+              </div>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ─── GaugeChart ───────────────────────────────────────────────────────────────
+
+export interface GaugeChartThreshold {
+  /** Upper bound of this zone (0–100) */
+  value: number;
+  /** Color for this zone */
+  color: string;
+  /** Optional label for this zone */
+  label?: string;
+}
+
+export interface GaugeChartProps {
+  /** Current value (must be within [min, max]) */
+  value: number;
+  /** Minimum value (default: 0) */
+  min?: number;
+  /** Maximum value (default: 100) */
+  max?: number;
+  /**
+   * Color zones. Each threshold defines the upper bound of a zone.
+   * Zones are evaluated in order; the first zone whose `value >= current %`
+   * determines the active color.
+   * If omitted, uses `--chart-1`.
+   */
+  thresholds?: GaugeChartThreshold[];
+  /** Label shown below the value (e.g. "CPU Usage") */
+  label?: React.ReactNode;
+  /** Format the center value text (default: shows percentage) */
+  valueFormatter?: (value: number, percent: number) => string;
+  /** Show the needle indicator (default: true) */
+  showNeedle?: boolean;
+  className?: string;
+}
+
+function GaugeChart({
+  value,
+  min = 0,
+  max = 100,
+  thresholds,
+  label,
+  valueFormatter,
+  showNeedle = true,
+  className,
+}: GaugeChartProps) {
+  const percent = Math.min(1, Math.max(0, (value - min) / (max - min)));
+  const percentInt = Math.round(percent * 100);
+
+  // Determine active color from thresholds
+  const activeColor = React.useMemo(() => {
+    if (!thresholds || thresholds.length === 0) return "var(--chart-1)";
+    for (const t of thresholds) {
+      if (percentInt <= t.value) return t.color;
+    }
+    return thresholds[thresholds.length - 1].color;
+  }, [thresholds, percentInt]);
+
+  const displayText = valueFormatter
+    ? valueFormatter(value, percentInt)
+    : `${percentInt}%`;
+
+  // SVG gauge constants — viewBox is 200×110, arc center at (100, 100)
+  const cx = 100;
+  const cy = 100;
+  const R = 80;   // outer radius
+  const r = 54;   // inner radius (track width = 26)
+
+  // Helper: polar → cartesian (angle in degrees, 0° = right, CCW)
+  const polar = (angleDeg: number, radius: number) => {
+    const rad = (angleDeg * Math.PI) / 180;
+    return {
+      x: cx + radius * Math.cos(rad),
+      y: cy - radius * Math.sin(rad),
+    };
+  };
+
+  // Semicircle: from 180° (left) to 0° (right)
+  // Track background arc path
+  const trackStart = polar(180, R);
+  const trackEnd = polar(0, R);
+  const trackStartI = polar(180, r);
+  const trackEndI = polar(0, r);
+  const trackPath = [
+    `M ${trackStart.x} ${trackStart.y}`,
+    `A ${R} ${R} 0 0 1 ${trackEnd.x} ${trackEnd.y}`,
+    `L ${trackEndI.x} ${trackEndI.y}`,
+    `A ${r} ${r} 0 0 0 ${trackStartI.x} ${trackStartI.y}`,
+    "Z",
+  ].join(" ");
+
+  // Value arc: from 180° (left) clockwise to valueAngle
+  // The gauge is a semicircle (max 180°), so largeArc is always 0.
+  // largeArc=1 would sweep the reflex arc (>180°) which creates the filled-blob bug.
+  const valueAngle = 180 - percent * 180;
+  const valueEnd = polar(valueAngle, R);
+  const valueEndI = polar(valueAngle, r);
+  const valuePath =
+    percent <= 0
+      ? ""
+      : percent >= 1
+        ? trackPath // full arc = same as track
+        : [
+          `M ${trackStart.x} ${trackStart.y}`,
+          `A ${R} ${R} 0 0 1 ${valueEnd.x} ${valueEnd.y}`,
+          `L ${valueEndI.x} ${valueEndI.y}`,
+          `A ${r} ${r} 0 0 0 ${trackStartI.x} ${trackStartI.y}`,
+          "Z",
+        ].join(" ");
+
+  // Needle: rotates from -90° (left, 0%) to +90° (right, 100%)
+  // In our coordinate system: 180° at 0%, 0° at 100%
+  const needleAngle = 180 - percent * 180;
+  const needleTip = polar(needleAngle, r - 6);
+  const needleBase1 = polar(needleAngle + 90, 5);
+  const needleBase2 = polar(needleAngle - 90, 5);
+
+  return (
+    <div className={cn("flex flex-col items-center gap-2", className)}>
+      <div className="relative w-full max-w-[260px]">
+        <svg
+          viewBox="0 0 200 130"
+          className="w-full"
+          aria-label={`Gauge: ${displayText}`}
+        >
+          {/* Background track */}
+          <path d={trackPath} fill="var(--muted)" />
+
+          {/* Value arc */}
+          {valuePath && (
+            <path d={valuePath} fill={activeColor} />
+          )}
+
+          {/* Needle */}
+          {showNeedle && (
+            <g>
+              <polygon
+                points={`${needleTip.x},${needleTip.y} ${needleBase1.x},${needleBase1.y} ${needleBase2.x},${needleBase2.y}`}
+                fill="var(--foreground)"
+                opacity={0.85}
+              />
+              <circle cx={cx} cy={cy} r={5} fill="var(--foreground)" />
+            </g>
+          )}
+
+          {/* Value text — placed below the arc baseline (cy=100) to avoid needle overlap */}
+          <text
+            x={cx}
+            y={cy + 18}
+            textAnchor="middle"
+            dominantBaseline="middle"
+            fontSize={22}
+            fontWeight={700}
+            fill="currentColor"
+            className="fill-foreground"
+          >
+            {displayText}
+          </text>
+
+          {/* Label below value */}
+          {label && (
+            <text
+              x={cx}
+              y={cy + 36}
+              textAnchor="middle"
+              dominantBaseline="middle"
+              fontSize={10}
+              fill="currentColor"
+              className="fill-muted-foreground"
+            >
+              {label}
+            </text>
+          )}
+        </svg>
+      </div>
+
+      {/* Threshold legend */}
+      {thresholds && thresholds.length > 0 && (
+        <div className="flex flex-wrap justify-center gap-x-3 gap-y-1">
+          {thresholds.map((t, i) => (
+            <div key={i} className="flex items-center gap-1.5">
+              <span
+                className="inline-block h-2 w-2 shrink-0 rounded-full"
+                style={{ backgroundColor: t.color }}
+              />
+              <span className="text-xs text-muted-foreground">{t.label}</span>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ─── Exports ──────────────────────────────────────────────────────────────────
+
 export {
   ChartContainer,
   ChartTooltip,
@@ -1491,4 +2359,9 @@ export {
   InteractiveTimeSeriesChart,
   ComboMetricChart,
   DonutBreakdownChart,
+  SparklineChart,
+  RadarMetricChart,
+  PieMetricChart,
+  RadialBarMetricChart,
+  GaugeChart,
 };