waffle-charts-cli 0.1.4 → 0.1.6

package/README.md

@@ -29,6 +29,27 @@ npx waffle-charts-cli add bar-chart line-chart
 
 ## Available Charts
 
+- React 16+
+- Tailwind CSS configured in your project.
+
+## Prerequisites
+
+The components assume you have a `cn` utility for class merging (standard in shadcn/ui projects).
+
+**`lib/utils.ts`**
+```ts
+import { type ClassValue, clsx } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
+```
+
+If your utils are located elsewhere, you may need to update the imports in the added components.
+
+## Available Charts
+
 | Chart | Command | Description |
 | :--- | :--- | :--- |
 | **Bar Chart** | `bar-chart` | Standard vertical bar chart for categorical data. |
@@ -41,18 +62,10 @@ npx waffle-charts-cli add bar-chart line-chart
 | **Heatmap** | `heatmap-chart` | Grid-based density visualization. |
 | **Treemap** | `treemap-chart` | Hierarchical data visualization. |
 | **Sankey** | `sankey-chart` | Flow and process visualization. |
-| **Composite** | `composite-chart` | **New!** Dual-axis Bar + Line combination. |
-
-## What it does
-
-1.  **Checks dependencies**: Detects if you have the necessary `@visx` packages (`shape`, `scale`, `axis`, etc.) and installs them if missing.
-2.  **Copies code**: Downloads the component source code to `src/components/waffle/` (or your configured directory).
-3.  **Zero Lock-in**: Once added, the code is yours.
-
-## Requirements
-
-- React 16+
-- Tailwind CSS configured in your project.
+| **Composite** | `composite-chart` | Dual-axis Bar + Line combination. |
+| **Funnel Chart** | `funnel-chart` | **New!** Process flow stages and conversion. |
+| **Radial Bar** | `radial-bar-chart` | **New!** Circular gauge/progress visualization. |
+| **Legend** | `chart-legend` | **New!** Reusable chart legend component. |
 
 ## License
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "waffle-charts-cli",
-  "version": "0.1.4",
+  "version": "0.1.6",
   "description": "CLI to add WaffleCharts components to your project",
   "main": "bin/index.js",
   "bin": {
@@ -38,4 +38,4 @@
     "prompts": "^2.4.2"
   },
   "type": "module"
-}
+}

package/src/registry.js

@@ -58,5 +58,25 @@ export const registry = {
     file: "ChordChart.tsx",
     label: "Chord Diagram",
     dependencies: ["@visx/chord", "@visx/scale", "@visx/tooltip", "@visx/shape", "@visx/responsive", "@visx/group", "clsx", "tailwind-merge"],
+  },
+  "candlestick-chart": {
+    file: "CandlestickChart.tsx",
+    label: "Candlestick Chart",
+    dependencies: ["@visx/group", "@visx/scale", "@visx/shape", "@visx/axis", "@visx/grid", "@visx/responsive", "@visx/tooltip", "@visx/event", "d3-array", "clsx", "tailwind-merge"],
+  },
+  "chart-legend": {
+    file: "ChartLegend.tsx",
+    label: "Chart Legend",
+    dependencies: ["clsx", "tailwind-merge"],
+  },
+  "funnel-chart": {
+    file: "FunnelChart.tsx",
+    label: "Funnel Chart",
+    dependencies: ["@visx/group", "@visx/responsive", "@visx/scale", "@visx/tooltip", "clsx", "tailwind-merge"],
+  },
+  "radial-bar-chart": {
+    file: "RadialBarChart.tsx",
+    label: "Radial Bar Chart",
+    dependencies: ["@visx/group", "@visx/shape", "@visx/scale", "@visx/responsive", "@visx/tooltip", "clsx", "tailwind-merge"],
   }
 };

package/templates/CandlestickChart.tsx

@@ -0,0 +1,267 @@
+import React, { useMemo } from 'react';
+import { Group } from '@visx/group';
+import { scaleTime, scaleLinear } from '@visx/scale';
+import { Bar, Line } from '@visx/shape';
+import { AxisBottom, AxisLeft } from '@visx/axis';
+import { GridRows, GridColumns } from '@visx/grid';
+import { ParentSize } from '@visx/responsive';
+import { useTooltip, useTooltipInPortal, defaultStyles } from '@visx/tooltip';
+import { localPoint } from '@visx/event';
+import { bisector, extent } from 'd3-array';
+import { cn } from '../../lib/utils';
+
+export type CandlestickChartProps<T> = {
+  data: T[];
+  xKey: keyof T;
+  openKey: keyof T;
+  highKey: keyof T;
+  lowKey: keyof T;
+  closeKey: keyof T;
+  className?: string;
+  upColor?: string;
+  downColor?: string;
+  xAxisLabel?: string;
+  yAxisLabel?: string;
+  showXAxis?: boolean;
+  showYAxis?: boolean;
+  showGrid?: boolean;
+};
+
+function CandlestickChartContent<T>({
+  data,
+  width,
+  height,
+  xKey,
+  openKey,
+  highKey,
+  lowKey,
+  closeKey,
+  className,
+  upColor = "#22c55e", // green-500
+  downColor = "#ef4444", // red-500
+  xAxisLabel,
+  yAxisLabel,
+  showXAxis = true,
+  showYAxis = true,
+  showGrid = true,
+}: CandlestickChartProps<T> & { width: number; height: number }) {
+  const margin = { top: 20, right: 30, bottom: 50, left: 50 };
+  const innerWidth = width - margin.left - margin.right;
+  const innerHeight = height - margin.top - margin.bottom;
+
+  // Accessors
+  const getX = (d: T) => d[xKey] as Date;
+  const getOpen = (d: T) => Number(d[openKey]);
+  const getHigh = (d: T) => Number(d[highKey]);
+  const getLow = (d: T) => Number(d[lowKey]);
+  const getClose = (d: T) => Number(d[closeKey]);
+
+  // Scales
+  const xScale = useMemo(
+    () =>
+      scaleTime({
+        range: [0, innerWidth],
+        domain: extent(data, getX) as [Date, Date],
+      }),
+    [innerWidth, data, getX]
+  );
+
+  const yScale = useMemo(
+    () =>
+      scaleLinear({
+        range: [innerHeight, 0],
+        domain: [
+          Math.min(...data.map(getLow)),
+          Math.max(...data.map(getHigh)),
+        ],
+        nice: true,
+      }),
+    [innerHeight, data, getHigh, getLow]
+  );
+
+  // Tooltip
+  const {
+    tooltipOpen,
+    tooltipLeft,
+    tooltipTop,
+    tooltipData,
+    hideTooltip,
+    showTooltip,
+  } = useTooltip<T>();
+
+  const { containerRef, TooltipInPortal } = useTooltipInPortal({
+    scroll: true,
+  });
+
+  const bisectDate = bisector<T, Date>((d) => new Date(d[xKey] as any)).left;
+
+  const handlePointerMove = (event: React.PointerEvent<SVGRectElement>) => {
+    const { x } = localPoint(event) || { x: 0 };
+    const x0 = xScale.invert(x);
+    const index = bisectDate(data, x0, 1);
+    const d0 = data[index - 1];
+    const d1 = data[index];
+    let d = d0;
+    if (d1 && getX(d1)) {
+      d = x0.valueOf() - getX(d0).valueOf() > getX(d1).valueOf() - x0.valueOf() ? d1 : d0;
+    }
+    showTooltip({
+      tooltipData: d,
+      tooltipLeft: xScale(getX(d)),
+      tooltipTop: yScale(Math.max(getOpen(d), getClose(d))),
+    });
+  };
+
+  // Calculate candle width dynamically based on data length
+  // Use 80% of the available space per data point, capped at a max width
+  const candleWidth = Math.min((innerWidth / data.length) * 0.8, 20);
+
+  return (
+    <div className={cn("relative", className)}>
+      <svg ref={containerRef} width={width} height={height}>
+        <Group left={margin.left} top={margin.top}>
+          {showGrid && (
+            <>
+              <GridRows
+                scale={yScale}
+                width={innerWidth}
+                strokeDasharray="3,3"
+                stroke="hsl(var(--border, 214.3 31.8% 91.4%))"
+                strokeOpacity={0.5}
+              />
+              <GridColumns
+                scale={xScale}
+                height={innerHeight}
+                strokeDasharray="3,3"
+                stroke="hsl(var(--border, 214.3 31.8% 91.4%))"
+                strokeOpacity={0.5}
+              />
+            </>
+          )}
+
+          {data.map((d, i) => {
+            const open = getOpen(d);
+            const close = getClose(d);
+            const high = getHigh(d);
+            const low = getLow(d);
+            const x = xScale(getX(d));
+            const isUp = close > open;
+            const color = isUp ? upColor : downColor;
+            const barHeight = Math.abs(yScale(open) - yScale(close));
+            const barY = yScale(Math.max(open, close));
+
+            return (
+              <Group key={i} left={x}>
+                {/* Wick */}
+                <Line
+                  from={{ x: 0, y: yScale(low) }}
+                  to={{ x: 0, y: yScale(high) }}
+                  stroke={color}
+                  strokeWidth={1.5}
+                />
+                {/* Body */}
+                <Bar
+                  x={-candleWidth / 2}
+                  y={barY}
+                  width={candleWidth}
+                  height={Math.max(barHeight, 1)} // Ensure at least 1px height
+                  fill={color}
+                  className="cursor-pointer"
+                  onFocus={() => { }}
+                  onMouseOver={() => showTooltip({
+                    tooltipData: d,
+                    tooltipLeft: xScale(getX(d)) + margin.left,
+                    tooltipTop: barY + margin.top
+                  })}
+                  onMouseOut={hideTooltip}
+                />
+              </Group>
+            );
+          })}
+
+          {showXAxis && (
+            <AxisBottom
+              top={innerHeight}
+              scale={xScale}
+              stroke="hsl(var(--border, 214.3 31.8% 91.4%))"
+              tickStroke="hsl(var(--border, 214.3 31.8% 91.4%))"
+              label={xAxisLabel}
+              numTicks={width > 500 ? 10 : 5}
+              labelProps={{
+                fill: "hsl(var(--muted-foreground, 215.4 16.3% 46.9%))",
+                fontSize: 12,
+                textAnchor: 'middle',
+                dy: 0
+              }}
+              tickLabelProps={{
+                fill: "hsl(var(--muted-foreground, 215.4 16.3% 46.9%))",
+                fontSize: 11,
+                textAnchor: "middle",
+              }}
+            />
+          )}
+
+          {showYAxis && (
+            <AxisLeft
+              scale={yScale}
+              stroke="hsl(var(--border, 214.3 31.8% 91.4%))"
+              tickStroke="hsl(var(--border, 214.3 31.8% 91.4%))"
+              label={yAxisLabel}
+              labelProps={{
+                fill: "hsl(var(--muted-foreground, 215.4 16.3% 46.9%))",
+                fontSize: 12,
+                textAnchor: 'middle',
+                dx: -10
+              }}
+              tickLabelProps={{
+                fill: "hsl(var(--muted-foreground, 215.4 16.3% 46.9%))",
+                fontSize: 11,
+                textAnchor: "end",
+                dx: -4,
+                dy: 4 // Center vertically
+              }}
+            />
+          )}
+        </Group>
+      </svg>
+      {tooltipOpen && tooltipData && (
+        <TooltipInPortal
+          top={tooltipTop}
+          left={tooltipLeft}
+          style={{
+            ...defaultStyles,
+            backgroundColor: "hsl(var(--background))",
+            color: "hsl(var(--foreground))",
+            border: "1px solid hsl(var(--border))",
+            borderRadius: "0.5rem",
+            padding: "0.5rem",
+            boxShadow: "0 4px 6px -1px rgb(0 0 0 / 0.1)",
+            zIndex: 50,
+          }}
+        >
+          <div className="text-xs font-semibold mb-1">
+            {getX(tooltipData).toLocaleDateString()}
+          </div>
+          <div className="grid grid-cols-2 gap-x-3 text-xs">
+            <span className="text-muted-foreground">Open:</span>
+            <span className="font-mono">{getOpen(tooltipData).toFixed(2)}</span>
+            <span className="text-muted-foreground">High:</span>
+            <span className="font-mono">{getHigh(tooltipData).toFixed(2)}</span>
+            <span className="text-muted-foreground">Low:</span>
+            <span className="font-mono">{getLow(tooltipData).toFixed(2)}</span>
+            <span className="text-muted-foreground">Close:</span>
+            <span className="font-mono">{getClose(tooltipData).toFixed(2)}</span>
+          </div>
+        </TooltipInPortal>
+      )}
+    </div>
+  );
+}
+
+export function CandlestickChart<T>(props: CandlestickChartProps<T>) {
+  return (
+    <ParentSize>
+      {({ width, height }) => <CandlestickChartContent {...props} width={width} height={height} />}
+    </ParentSize>
+  );
+}

package/templates/ChartLegend.tsx

@@ -0,0 +1,38 @@
+import { cn } from "../../lib/utils";
+
+export type ChartLegendItem = {
+  label: string;
+  color: string;
+};
+
+export type ChartLegendProps = {
+  payload: ChartLegendItem[];
+  orientation?: "horizontal" | "vertical";
+  className?: string;
+};
+
+export function ChartLegend({
+  payload,
+  orientation = "horizontal",
+  className,
+}: ChartLegendProps) {
+  return (
+    <div
+      className={cn(
+        "flex flex-wrap gap-4 text-sm text-muted-foreground",
+        orientation === "vertical" ? "flex-col" : "items-center justify-center",
+        className
+      )}
+    >
+      {payload.map((item, i) => (
+        <div key={i} className="flex items-center gap-2">
+          <span
+            className="h-3 w-3 rounded-full"
+            style={{ backgroundColor: item.color }}
+          />
+          <span>{item.label}</span>
+        </div>
+      ))}
+    </div>
+  );
+}

package/templates/FunnelChart.tsx

@@ -0,0 +1,194 @@
+import { Group } from '@visx/group';
+import { ParentSize } from '@visx/responsive';
+import { scaleOrdinal } from '@visx/scale';
+import { useTooltip, useTooltipInPortal, defaultStyles } from '@visx/tooltip';
+import { cn } from '../../lib/utils'; // Assuming this exists based on other files
+
+export type FunnelChartProps<T> = {
+  data: T[];
+  stepKey: keyof T;
+  valueKey: keyof T;
+  width?: number;
+  height?: number;
+  className?: string;
+  colors?: string[];
+};
+
+type FunnelChartContentProps<T> = FunnelChartProps<T> & {
+  width: number;
+  height: number;
+};
+
+function FunnelChartContent<T>({
+  data,
+  width,
+  height,
+  stepKey,
+  valueKey,
+  className,
+  colors,
+}: FunnelChartContentProps<T>) {
+  const margin = { top: 20, right: 20, bottom: 20, left: 20 };
+  const innerWidth = width - margin.left - margin.right;
+  const innerHeight = height - margin.top - margin.bottom;
+
+  // Accessors
+  const getStep = (d: T) => String(d[stepKey]);
+  const getValue = (d: T) => Number(d[valueKey]);
+
+  // Scales
+  const defaultColors = ['#3b82f6', '#60a5fa', '#93c5fd', '#bfdbfe', '#dbeafe'];
+  const colorScale = scaleOrdinal({
+    domain: data.map((_, i) => i),
+    range: colors || defaultColors,
+  });
+
+  // Calculate geometry
+  // Calculate geometry
+  const maxValue = Math.max(...data.map(getValue));
+  const processData = data;
+
+  const stepHeight = innerHeight / processData.length;
+
+  const getPoints = (d: T, i: number) => {
+    const val = getValue(d);
+    // Center the bar/trapezoid
+    // Current width proportional to value
+    const w = (val / maxValue) * innerWidth;
+    const y = i * stepHeight;
+
+    // Next width (for trapezoid effect)
+    // If it's the last one, maybe it just goes down to a point or same width? 
+    // Let's do simple stacked rectangles first for "Bar Funnel" or proper Trapezoids.
+    // Proper Funnel: 
+    // Top Left: x, y
+    // Top Right: x + w, y
+    // Bottom Right: ? 
+    // Bottom Left: ?
+
+    // Actually, a nice funnel connects to the next one.
+    const nextD = processData[i + 1];
+    // Let's just make it a polygon.
+
+    // Coords for current "Row"
+    // We want the TOP of this shape to match the BOTTOM of the previous? 
+    // Simplified: visual trapezoids.
+    // Top width = current Value
+    // Bottom width = next Value (or current Value if we want blocks)
+    // But usually funnel means flow.
+
+    // Let's do: Top of shape = proportional to current value. Bottom of shape = proportional to next value.
+    // For the last item, bottom = proportional to its own value (rect) or 0 (point).
+    // Let's assume the last item maintains width to show "conversion".
+
+    const nextW = nextD ? (getValue(nextD) / maxValue) * innerWidth : w; // Rectangular ending or taper? let's keep rect for last step visibility.
+
+    const topX = (innerWidth - w) / 2;
+    const topY = y;
+
+    const bottomX = (innerWidth - nextW) / 2;
+    const bottomY = y + stepHeight; // minus a gap?
+
+    // Polygon points: TopL, TopR, BottomR, BottomL
+    return [
+      [topX, topY],
+      [topX + w, topY],
+      [bottomX + nextW, bottomY],
+      [bottomX, bottomY]
+    ].map(p => p.join(',')).join(' ');
+  };
+
+  // Tooltip
+  const {
+    tooltipOpen,
+    tooltipLeft,
+    tooltipTop,
+    tooltipData,
+    hideTooltip,
+    showTooltip,
+  } = useTooltip<T>();
+
+  const { containerRef, TooltipInPortal } = useTooltipInPortal({
+    scroll: true,
+    detectBounds: true
+  });
+
+  if (width < 50) return null;
+
+  return (
+    <div className={cn("relative", className)}>
+      <svg ref={containerRef} width={width} height={height} className="overflow-visible">
+        <Group left={margin.left} top={margin.top}>
+          {processData.map((d, i) => {
+            return (
+              <polygon
+                key={i}
+                points={getPoints(d, i)}
+                fill={colorScale(i)}
+                className="opacity-80 hover:opacity-100 transition-opacity cursor-pointer"
+                onMouseEnter={() => {
+                  const coords = getPoints(d, i).split(' ');
+                  // approximate center
+                  // Top Left is coords[0]
+                  const topL = coords[0].split(',');
+                  showTooltip({
+                    tooltipData: d,
+                    tooltipLeft: Number(topL[0]) + margin.left + ((getValue(d) / maxValue) * innerWidth) / 2,
+                    tooltipTop: Number(topL[1]) + margin.top + stepHeight / 2
+                  })
+                }}
+                onMouseLeave={hideTooltip}
+              />
+            );
+          })}
+
+          {/* Labels on top? */}
+          {processData.map((d, i) => {
+            const val = getValue(d);
+            const y = i * stepHeight + stepHeight / 2;
+
+            if (stepHeight < 20) return null; // Hide if too small
+
+            return (
+              <text
+                key={`label-${i}`}
+                x={innerWidth / 2}
+                y={y}
+                dy=".35em"
+                textAnchor="middle"
+                className="fill-white text-xs font-medium pointer-events-none"
+                style={{ textShadow: '0 1px 2px rgba(0,0,0,0.5)' }}
+              >
+                {getStep(d)} ({val})
+              </text>
+            )
+          })}
+        </Group>
+      </svg>
+
+      {tooltipOpen && tooltipData && (
+        <TooltipInPortal
+          top={tooltipTop}
+          left={tooltipLeft}
+          style={{ ...defaultStyles, padding: 0, borderRadius: 0, boxShadow: 'none', background: 'transparent', zIndex: 100 }}
+        >
+          <div className="rounded-md border bg-white dark:bg-slate-900 px-3 py-1.5 text-sm text-slate-900 dark:text-slate-100 shadow-xl">
+            <div className="font-semibold">{getStep(tooltipData)}</div>
+            <div>Value: {getValue(tooltipData)}</div>
+            {/* Calculation of conversion rate could go here if we had index access easily or passed standard props */}
+          </div>
+        </TooltipInPortal>
+      )}
+    </div>
+  );
+}
+
+export function FunnelChart<T>(props: FunnelChartProps<T>) {
+  return (
+    <div style={{ width: '100%', height: '100%', minHeight: 200 }}>
+      <ParentSize>
+        {({ width, height }) => <FunnelChartContent {...props} width={width} height={height} />}
+      </ParentSize>
+    </div>
+  );
+}

package/templates/RadialBarChart.tsx

@@ -0,0 +1,187 @@
+import { Group } from '@visx/group';
+import { Arc } from '@visx/shape';
+import { scaleLinear, scaleOrdinal } from '@visx/scale';
+import { ParentSize } from '@visx/responsive';
+import { useTooltip, useTooltipInPortal, defaultStyles } from '@visx/tooltip';
+import { cn } from '../../lib/utils';
+
+export type RadialBarChartProps<T> = {
+  data: T[];
+  valueKey: keyof T;
+  labelKey: keyof T; // Used for identifying the ring
+  maxValue?: number; // If not provided, calculated from max of data or 100?
+  width?: number;
+  height?: number;
+  className?: string;
+  colors?: string[];
+  startAngle?: number; // In degrees, 0 is 12 o'clock? D3 is 0 at 12? No, 0 is 12 if mapped correctly. 0 is up usually in Visx usage if we transform. Standard D3 0 is 3 o'clock.
+  // Let's use standard d3 angles: 0 is up (if we rotate) or 0 is right.
+  // Actually, easiest is: 0 = 12 oclock, 360 = 12 oclock.
+  endAngle?: number;
+  innerRadius?: number; // 0 to 1, relative to max radius? or absolute pixels?
+  // Let's use relative fraction 0-1 for flexibility or just let d3 handle pixels.
+};
+
+type RadialBarChartContentProps<T> = RadialBarChartProps<T> & {
+  width: number;
+  height: number;
+};
+
+// Helpers
+const degreesToRadians = (degrees: number) => (degrees * Math.PI) / 180;
+
+function RadialBarChartContent<T>({
+  data,
+  width,
+  height,
+  valueKey,
+  labelKey,
+  maxValue,
+  className,
+  colors,
+  startAngle = 0,
+  endAngle = 360,
+  innerRadius: customInnerRadius = 0.2, // 20% of radius empty in middle
+}: RadialBarChartContentProps<T>) {
+  const margin = { top: 20, right: 20, bottom: 20, left: 20 };
+  const innerWidth = width - margin.left - margin.right;
+  const innerHeight = height - margin.top - margin.bottom;
+  const radius = Math.min(innerWidth, innerHeight) / 2;
+  const centerX = innerWidth / 2;
+  const centerY = innerHeight / 2;
+
+  // Data helpers
+  const getValue = (d: T) => Number(d[valueKey]);
+  const getLabel = (d: T) => String(d[labelKey]);
+
+  const calculatedMax = maxValue ?? Math.max(...data.map(getValue));
+
+  // Angle Scale (Length of bar)
+  // Maps value to angle
+  const angleScale = scaleLinear({
+    range: [degreesToRadians(startAngle), degreesToRadians(endAngle)],
+    domain: [0, calculatedMax],
+  });
+
+  // Color Scale
+  const defaultColors = ['#10b981', '#3b82f6', '#f59e0b', '#ef4444', '#8b5cf6'];
+  const colorScale = scaleOrdinal({
+    domain: data.map((_, i) => i),
+    range: colors || defaultColors,
+  });
+
+  // Radius calculations
+  // We need to fit `data.length` rings between customInnerRadius*radius and radius.
+  // Gap between rings?
+  const gap = 4;
+  const totalRingWidth = radius - (radius * customInnerRadius);
+  const ringWidth = (totalRingWidth - (gap * (data.length - 1))) / data.length;
+
+  // Tooltip
+  const {
+    tooltipOpen,
+    tooltipLeft,
+    tooltipTop,
+    tooltipData,
+    hideTooltip,
+    showTooltip,
+  } = useTooltip<T>();
+
+  const { containerRef, TooltipInPortal } = useTooltipInPortal({
+    scroll: true,
+    detectBounds: true
+  });
+
+  if (width < 50) return null;
+
+  return (
+    <div className={cn("relative", className)}>
+      <svg ref={containerRef} width={width} height={height} className="overflow-visible">
+        <Group top={centerY + margin.top} left={centerX + margin.left}>
+          {/* Rotate so 0 is at top if desired? D3 arc 0 is at 12 o'clock? No, 0 is at 12 if using @visx/shape defaults? 
+            Visx Arc: startAngle 0 is usually 12 o'clock. 
+            Let's assume default mapping.
+            */}
+
+          {data.map((d, i) => {
+            // Outer to Inner? Or Inner to Outer?
+            // Usually Outer is the first item?
+            const outerR = radius - (i * (ringWidth + gap));
+            const innerR = outerR - ringWidth;
+            const value = getValue(d);
+            const barAngle = angleScale(value);
+            const backgroundStart = degreesToRadians(startAngle);
+            const backgroundEnd = degreesToRadians(endAngle);
+
+            return (
+              <Group key={`ring-${i}`}>
+                {/* Background Track */}
+                <Arc
+                  innerRadius={innerR}
+                  outerRadius={outerR}
+                  startAngle={backgroundStart}
+                  endAngle={backgroundEnd}
+                  fill="hsl(var(--muted))"
+                  opacity={0.2}
+                  cornerRadius={3}
+                />
+
+                {/* Value Bar */}
+                <Arc
+                  innerRadius={innerR}
+                  outerRadius={outerR}
+                  startAngle={backgroundStart}
+                  endAngle={barAngle}
+                  fill={colorScale(i)}
+                  cornerRadius={3}
+                  className="transition-all duration-500 hover:opacity-80 cursor-pointer"
+                  onMouseEnter={() => {
+                    // We need a specific point for tooltip.
+                    // Centroid is okay, but mapped to the bar.
+                    // Or just mouse coords?
+                    // Arc.centroid is complex.
+                    // Just use center + radius offset? 
+                    // Simple: center of the chart
+                    showTooltip({
+                      tooltipData: d,
+                      tooltipLeft: centerX + margin.left,
+                      tooltipTop: centerY + margin.top
+                    })
+                  }}
+                  onMouseLeave={hideTooltip}
+                />
+              </Group>
+            )
+          })}
+        </Group>
+      </svg>
+
+      {/* Center Text (if single value? Or generic legend?) 
+            Maybe leave center empty for now unless needed. 
+        */}
+
+      {tooltipOpen && tooltipData && (
+        <TooltipInPortal
+          top={tooltipTop}
+          left={tooltipLeft}
+          style={{ ...defaultStyles, padding: 0, borderRadius: 0, boxShadow: 'none', background: 'transparent', transform: 'translate(-50%, -50%)', zIndex: 100 }}
+        >
+          <div className="rounded-md border bg-white dark:bg-slate-900 px-3 py-1.5 text-sm text-slate-900 dark:text-slate-100 shadow-xl text-center">
+            <div className="font-semibold">{getLabel(tooltipData)}</div>
+            <div>{getValue(tooltipData)} / {calculatedMax}</div>
+          </div>
+        </TooltipInPortal>
+      )}
+    </div>
+  );
+}
+
+export function RadialBarChart<T>(props: RadialBarChartProps<T>) {
+  return (
+    <div style={{ width: '100%', height: '100%', minHeight: 200 }}>
+      <ParentSize>
+        {({ width, height }) => <RadialBarChartContent {...props} width={width} height={height} />}
+      </ParentSize>
+    </div>
+  );
+}