@turtleclub/ui 0.7.0-beta.3 → 0.7.0-beta.30

package/src/components/charts/radial-chart.tsx

@@ -0,0 +1,312 @@
+"use client";
+
+import {
+  Cell,
+  PolarAngleAxis,
+  PolarGrid,
+  Radar,
+  RadarChart as RechartsRadarChart,
+  RadialBar,
+  RadialBarChart as RechartsRadialBarChart,
+} from "recharts";
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartLegend,
+  ChartLegendContent,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "../ui/chart";
+import { cn } from "@/lib/utils";
+
+export interface RadialChartData {
+  [key: string]: string | number;
+}
+
+export interface RadialBarChartProps {
+  /**
+   * Array of data objects to be displayed in the chart
+   */
+  data: RadialChartData[];
+  /**
+   * Configuration for chart styling and labels
+   */
+  config: ChartConfig;
+  /**
+   * Key from data objects to use for segment names
+   */
+  nameKey: string;
+  /**
+   * Key from data objects to use for values
+   */
+  dataKey: string;
+  /**
+   * Show legend
+   * @default false
+   */
+  showLegend?: boolean;
+  /**
+   * Show tooltip on hover
+   * @default true
+   */
+  showTooltip?: boolean;
+  /**
+   * Inner radius (0-100)
+   * @default 30
+   */
+  innerRadius?: number;
+  /**
+   * Outer radius (0-100)
+   * @default 100
+   */
+  outerRadius?: number;
+  /**
+   * Start angle in degrees
+   * @default 90
+   */
+  startAngle?: number;
+  /**
+   * End angle in degrees
+   * @default -270
+   */
+  endAngle?: number;
+  /**
+   * Custom className for the container
+   */
+  className?: string;
+  /**
+   * Chart height aspect ratio
+   * @default "aspect-square"
+   */
+  aspectRatio?: string;
+  /**
+   * Show labels on bars
+   * @default false
+   */
+  showLabels?: boolean;
+  /**
+   * Corner radius for bars
+   * @default 2
+   */
+  cornerRadius?: number;
+  /**
+   * Enable gradient fill for bars (uses Recharts native gradient support via Cell component)
+   * @default true
+   */
+  gradient?: boolean;
+  /**
+   * Make chart grow to fill parent container (ignores aspectRatio if true)
+   * @default false
+   */
+  grow?: boolean;
+  /**
+   * Custom formatter function for tooltip values
+   * @example (value, name, item, index, payload) => `$${value.toLocaleString()}`
+   */
+  tooltipFormatter?: (
+    value: any,
+    name: any,
+    item: any,
+    index: number,
+    payload: any
+  ) => React.ReactNode;
+}
+
+export function RadialBarChart({
+  data,
+  config,
+  nameKey,
+  dataKey,
+  showLegend = false,
+  showTooltip = true,
+  innerRadius = 30,
+  outerRadius = 100,
+  startAngle = 90,
+  endAngle = -270,
+  className,
+  aspectRatio = "aspect-square",
+  showLabels = false,
+  cornerRadius = 2,
+  gradient = true,
+  grow = false,
+  tooltipFormatter,
+}: RadialBarChartProps) {
+  return (
+    <ChartContainer config={config} className={cn(grow ? "h-full w-full" : aspectRatio, className)}>
+      <RechartsRadialBarChart
+        data={data}
+        startAngle={startAngle}
+        endAngle={endAngle}
+        innerRadius={`${innerRadius}%`}
+        outerRadius={`${outerRadius}%`}
+      >
+        <PolarGrid gridType="circle" />
+
+        {showTooltip && (
+          <ChartTooltip
+            cursor={false}
+            content={
+              <ChartTooltipContent hideLabel nameKey={nameKey} formatter={tooltipFormatter} />
+            }
+          />
+        )}
+
+        {showLegend && <ChartLegend content={<ChartLegendContent nameKey={nameKey} />} />}
+
+        <defs>
+          {gradient &&
+            data.map((entry, index) => {
+              const name = entry[nameKey] as string;
+              return (
+                <linearGradient
+                  key={name}
+                  id={`gradient-radial-${name}`}
+                  x1="1"
+                  y1="0"
+                  x2="0"
+                  y2="0"
+                >
+                  <stop offset="0%" stopColor={`var(--color-${name})`} stopOpacity={0.1} />
+                  <stop offset="100%" stopColor={`var(--color-${name})`} stopOpacity={1} />
+                </linearGradient>
+              );
+            })}
+        </defs>
+
+        <RadialBar
+          dataKey={dataKey}
+          cornerRadius={cornerRadius}
+          label={showLabels ? { position: "insideStart", fill: "#fff" } : false}
+          background={{ fill: "transparent" }}
+        >
+          {/* Using Recharts native Cell component for per-bar styling and gradients */}
+          {data.map((entry, index) => {
+            const name = entry[nameKey] as string;
+            const fill = gradient ? `url(#gradient-radial-${name})` : `var(--color-${name})`;
+            return <Cell key={`cell-${index}`} fill={fill} />;
+          })}
+        </RadialBar>
+      </RechartsRadialBarChart>
+    </ChartContainer>
+  );
+}
+
+export interface RadarChartProps {
+  /**
+   * Array of data objects to be displayed in the chart
+   */
+  data: RadialChartData[];
+  /**
+   * Configuration for chart styling and labels
+   */
+  config: ChartConfig;
+  /**
+   * Key from data objects to use for categories
+   */
+  categoryKey: string;
+  /**
+   * Array of keys from data objects to display as radar areas
+   */
+  dataKeys: string[];
+  /**
+   * Show legend
+   * @default false
+   */
+  showLegend?: boolean;
+  /**
+   * Show tooltip on hover
+   * @default true
+   */
+  showTooltip?: boolean;
+  /**
+   * Show dots on data points
+   * @default true
+   */
+  showDots?: boolean;
+  /**
+   * Fill opacity for radar areas
+   * @default 0.6
+   */
+  fillOpacity?: number;
+  /**
+   * Stroke width for radar lines
+   * @default 2
+   */
+  strokeWidth?: number;
+  /**
+   * Custom className for the container
+   */
+  className?: string;
+  /**
+   * Chart height aspect ratio
+   * @default "aspect-square"
+   */
+  aspectRatio?: string;
+  /**
+   * Make chart grow to fill parent container (ignores aspectRatio if true)
+   * @default false
+   */
+  grow?: boolean;
+  /**
+   * Custom formatter function for tooltip values
+   * @example (value, name, item, index, payload) => `$${value.toLocaleString()}`
+   */
+  tooltipFormatter?: (
+    value: any,
+    name: any,
+    item: any,
+    index: number,
+    payload: any
+  ) => React.ReactNode;
+}
+
+export function RadarChart({
+  data,
+  config,
+  categoryKey,
+  dataKeys,
+  showLegend = false,
+  showTooltip = true,
+  showDots = true,
+  fillOpacity = 0.6,
+  strokeWidth = 2,
+  className,
+  aspectRatio = "aspect-square",
+  grow = false,
+  tooltipFormatter,
+}: RadarChartProps) {
+  return (
+    <ChartContainer config={config} className={cn(grow ? "h-full w-full" : aspectRatio, className)}>
+      <RechartsRadarChart data={data}>
+        <PolarGrid />
+        <PolarAngleAxis
+          dataKey={categoryKey}
+          tickFormatter={(value) =>
+            config[value as keyof typeof config]?.label?.toString() || value
+          }
+        />
+
+        {showTooltip && (
+          <ChartTooltip
+            cursor={false}
+            content={<ChartTooltipContent indicator="line" formatter={tooltipFormatter} />}
+          />
+        )}
+
+        {showLegend && <ChartLegend content={<ChartLegendContent />} />}
+
+        {dataKeys.map((key) => (
+          <Radar
+            key={key}
+            dataKey={key}
+            fill={`var(--color-${key})`}
+            stroke={`var(--color-${key})`}
+            fillOpacity={fillOpacity}
+            strokeWidth={strokeWidth}
+            dot={showDots}
+          />
+        ))}
+      </RechartsRadarChart>
+    </ChartContainer>
+  );
+}