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

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

@@ -0,0 +1,362 @@
+"use client";
+
+import {
+  Bar,
+  BarChart as RechartsBarChart,
+  CartesianGrid,
+  XAxis,
+  YAxis,
+  Cell,
+} from "recharts";
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartLegend,
+  ChartLegendContent,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "../ui/chart";
+import { cn } from "@/lib/utils";
+
+export interface BarChartData {
+  [key: string]: string | number;
+}
+
+export interface BarChartProps {
+  /**
+   * Array of data objects to be displayed in the chart
+   */
+  data: BarChartData[];
+  /**
+   * Configuration for chart styling and labels
+   */
+  config: ChartConfig;
+  /**
+   * Key from data objects to use for X-axis categories
+   */
+  categoryKey: string;
+  /**
+   * Array of keys from data objects to display as bars
+   */
+  dataKeys: string[];
+  /**
+   * Chart layout orientation
+   * @default "horizontal"
+   */
+  layout?: "horizontal" | "vertical";
+  /**
+   * Show grid lines. Can be boolean for both axes or object for granular control
+   * @default true
+   */
+  showGrid?: boolean | { horizontal?: boolean; vertical?: boolean };
+  /**
+   * Show legend
+   * @default false
+   */
+  showLegend?: boolean;
+  /**
+   * Show tooltip on hover
+   * @default true
+   */
+  showTooltip?: boolean;
+  /**
+   * Stack bars on top of each other
+   * @default false
+   */
+  stacked?: boolean;
+  /**
+   * Border radius for bars
+   * @default 2
+   */
+  barRadius?: number;
+  /**
+   * Enable gradient fill for bars with directional support based on value
+   * Vertical bars: positive (bottom-to-top), negative (top-to-bottom)
+   * Horizontal bars: positive (left-to-right), negative (right-to-left)
+   * @default false
+   */
+  gradient?: boolean;
+  /**
+   * Function to conditionally determine bar color based on data entry
+   * Receives the data entry and index, returns a color string or undefined to use default
+   * Can return gradient URLs when used with gradient definitions
+   * @example (entry) => entry.value > 100 ? 'hsl(var(--destructive))' : undefined
+   */
+  getBarColor?: (
+    entry: BarChartData,
+    index: number,
+    dataKey: string,
+  ) => string | undefined;
+  /**
+   * Custom className for the container
+   */
+  className?: string;
+  /**
+   * Chart height aspect ratio
+   * @default "aspect-video"
+   */
+  aspectRatio?: string;
+  /**
+   * Make chart grow to fill parent container (ignores aspectRatio if true)
+   * @default false
+   */
+  grow?: boolean;
+  /**
+   * Custom formatter function for Y-axis tick labels
+   * @example (value) => `$${value.toLocaleString()}`
+   * @example (value) => formatCompactNumber(value)
+   */
+  yAxisFormatter?: (value: number) => string;
+  /**
+   * Custom formatter function for X-axis tick labels
+   * @example (value) => new Date(value).toLocaleDateString()
+   * @example (value) => formatCompactNumber(value)
+   */
+  xAxisFormatter?: (value: any) => string;
+  /** X-axis tick interval strategy / step (passed to Recharts XAxis `interval`)
+   * Useful when you need predictable tick density instead of Recharts auto-skip.
+   */
+  xAxisInterval?:
+    | number
+    | "preserveStart"
+    | "preserveEnd"
+    | "preserveStartEnd"
+    | "equidistantPreserveStart";
+  /**
+   * Minimum gap between X-axis ticks in px (passed to Recharts XAxis `minTickGap`)
+   */
+  xAxisMinTickGap?: number;
+  /**
+   * 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 BarChart({
+  data,
+  config,
+  categoryKey,
+  dataKeys,
+  layout = "horizontal",
+  showGrid = true,
+  showLegend = false,
+  showTooltip = true,
+  stacked = false,
+  barRadius = 5,
+  gradient = false,
+  getBarColor,
+  className,
+  aspectRatio = "aspect-video",
+  grow = false,
+  yAxisFormatter,
+  xAxisFormatter,
+  xAxisInterval,
+  xAxisMinTickGap,
+  tooltipFormatter,
+}: BarChartProps) {
+  const isVertical = layout === "vertical";
+  const stackId = stacked ? "stack" : undefined;
+
+  // Parse grid configuration
+  const gridConfig =
+    typeof showGrid === "boolean"
+      ? { horizontal: showGrid, vertical: showGrid }
+      : {
+          horizontal: showGrid?.horizontal ?? false,
+          vertical: showGrid?.vertical ?? false,
+        };
+
+  // Internal gradient color function that handles directional gradients
+  const internalGetBarColor = gradient
+    ? (entry: BarChartData, index: number, dataKey: string) => {
+        const value = entry[dataKey] as number;
+        const isNegative = value < 0;
+        const gradientId = `gradient-bar-${dataKey}-${isNegative ? "neg" : "pos"}`;
+
+        // If user provided custom color function, use it
+        if (getBarColor) {
+          const customColor = getBarColor(entry, index, dataKey);
+          if (customColor) return customColor;
+        }
+
+        return `url(#${gradientId})`;
+      }
+    : getBarColor;
+
+  return (
+    <ChartContainer
+      config={config}
+      className={cn(grow ? "h-full w-full" : aspectRatio, className)}
+    >
+      <RechartsBarChart
+        accessibilityLayer
+        data={data}
+        layout={layout}
+        margin={{
+          top: 10,
+          right: 10,
+          bottom: 10,
+          left: 10,
+        }}
+      >
+        {(gridConfig.horizontal || gridConfig.vertical) && (
+          <CartesianGrid
+            strokeDasharray="3 3"
+            horizontal={gridConfig.horizontal}
+            vertical={gridConfig.vertical}
+          />
+        )}
+
+        {isVertical ? (
+          <>
+            <YAxis
+              dataKey={categoryKey}
+              type="category"
+              tickLine={false}
+              tickMargin={10}
+              axisLine={false}
+              tickFormatter={(value) => {
+                if (yAxisFormatter) {
+                  return yAxisFormatter(value);
+                }
+                return (
+                  config[value as keyof typeof config]?.label?.toString() ||
+                  value
+                );
+              }}
+              width={yAxisFormatter ? 50 : undefined}
+            />
+            <XAxis
+              type="number"
+              tickLine={false}
+              axisLine={false}
+              interval={xAxisInterval}
+              minTickGap={xAxisMinTickGap}
+              tickFormatter={(value) =>
+                xAxisFormatter ? xAxisFormatter(value) : value
+              }
+            />
+          </>
+        ) : (
+          <>
+            <XAxis
+              dataKey={categoryKey}
+              tickLine={false}
+              tickMargin={10}
+              axisLine={false}
+              interval={xAxisInterval}
+              minTickGap={xAxisMinTickGap}
+              tickFormatter={(value) => {
+                if (xAxisFormatter) {
+                  return xAxisFormatter(value);
+                }
+                return (
+                  config[value as keyof typeof config]?.label?.toString() ||
+                  value
+                );
+              }}
+            />
+            <YAxis
+              tickLine={false}
+              axisLine={false}
+              tickFormatter={(value) =>
+                yAxisFormatter ? yAxisFormatter(value) : value
+              }
+              width={yAxisFormatter ? 50 : undefined}
+            />
+          </>
+        )}
+
+        {showTooltip && (
+          <ChartTooltip
+            cursor={false}
+            content={
+              <ChartTooltipContent
+                indicator={stacked ? "line" : "dot"}
+                formatter={tooltipFormatter}
+              />
+            }
+          />
+        )}
+
+        {showLegend && <ChartLegend content={<ChartLegendContent />} />}
+
+        <defs>
+          {gradient &&
+            dataKeys.flatMap((key) => [
+              // Positive gradient
+              <linearGradient
+                key={`${key}-pos`}
+                id={`gradient-bar-${key}-pos`}
+                x1={isVertical ? "0" : "0"}
+                y1={isVertical ? "0" : "1"}
+                x2={isVertical ? "1" : "0"}
+                y2={isVertical ? "0" : "0"}
+              >
+                <stop
+                  offset="0%"
+                  stopColor={`var(--color-${key})`}
+                  stopOpacity={0.1}
+                />
+                <stop
+                  offset="100%"
+                  stopColor={`var(--color-${key})`}
+                  stopOpacity={1}
+                />
+              </linearGradient>,
+              // Negative gradient (reversed direction)
+              <linearGradient
+                key={`${key}-neg`}
+                id={`gradient-bar-${key}-neg`}
+                x1={isVertical ? "1" : "0"}
+                y1={isVertical ? "0" : "0"}
+                x2={isVertical ? "0" : "0"}
+                y2={isVertical ? "0" : "1"}
+              >
+                <stop
+                  offset="0%"
+                  stopColor={`var(--color-${key})`}
+                  stopOpacity={0.1}
+                />
+                <stop
+                  offset="100%"
+                  stopColor={`var(--color-${key})`}
+                  stopOpacity={1}
+                />
+              </linearGradient>,
+            ])}
+        </defs>
+
+        {dataKeys.map((key) => (
+          <Bar
+            key={key}
+            dataKey={key}
+            fill={`var(--color-${key})`}
+            radius={barRadius}
+            stackId={stackId}
+          >
+            {(gradient || getBarColor) &&
+              data.map((entry, index) => {
+                const fillColor = internalGetBarColor
+                  ? internalGetBarColor(entry, index, key)
+                  : `var(--color-${key})`;
+                return (
+                  <Cell
+                    key={`cell-${key}-${index}`}
+                    fill={fillColor || `var(--color-${key})`}
+                  />
+                );
+              })}
+          </Bar>
+        ))}
+      </RechartsBarChart>
+    </ChartContainer>
+  );
+}

package/src/components/charts/index.ts

@@ -0,0 +1,4 @@
+export * from "./bar-chart";
+export * from "./area-chart";
+export * from "./pie-chart";
+export * from "./radial-chart";

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

@@ -0,0 +1,277 @@
+"use client";
+
+import { Pie, PieChart as RechartsPieChart, Cell, Sector, PolarAngleAxis } from "recharts";
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartLegend,
+  ChartLegendContent,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "../ui/chart";
+
+export interface PieChartData {
+  [key: string]: string | number;
+}
+
+export interface PieChartProps {
+  /**
+   * Array of data objects to be displayed in the chart
+   */
+  data: PieChartData[];
+  /**
+   * 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 segment values
+   */
+  dataKey: string;
+  /**
+   * Show legend
+   * @default true
+   */
+  showLegend?: boolean;
+  /**
+   * Show tooltip on hover
+   * @default true
+   */
+  showTooltip?: boolean;
+  /**
+   * Show labels on segments
+   * @default false
+   */
+  showLabels?: boolean;
+  /**
+   * Inner radius for donut chart (0-100)
+   * Set to 0 for full pie chart
+   * @default 0
+   */
+  innerRadius?: number;
+  /**
+   * Outer radius (0-100)
+   * @default 80
+   */
+  outerRadius?: number;
+  /**
+   * Padding angle between segments in degrees
+   * @default 0
+   */
+  paddingAngle?: number;
+  /**
+   * Custom className for the container
+   */
+  className?: string;
+  /**
+   * Chart height aspect ratio
+   * @default "aspect-square"
+   */
+  aspectRatio?: string;
+  /**
+   * Custom label formatter function
+   */
+  labelFormatter?: (value: number, entry: PieChartData) => string;
+  /**
+   * 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;
+  /**
+   * Scale outer radius based on value percentage (larger values = larger radius)
+   * Creates a "bursting" effect where segments extend outward based on their size
+   * @default false
+   */
+  scaledRadius?: boolean;
+  /**
+   * Enable gradient fill for segments (radial gradient from center outward)
+   * @default false
+   */
+  gradient?: boolean;
+  /**
+   * Show radial grid lines in the background
+   * @default false
+   */
+  showRadialGrid?: boolean;
+  /**
+   * Number of radial lines to display (evenly spaced around the circle)
+   * @default 8
+   */
+  radialGridLines?: number;
+}
+
+export function PieChart({
+  data,
+  config,
+  nameKey,
+  dataKey,
+  showLegend = true,
+  showTooltip = true,
+  showLabels = false,
+  innerRadius = 0,
+  outerRadius = 80,
+  paddingAngle = 0,
+  className,
+  aspectRatio = "aspect-square",
+  labelFormatter,
+  scaledRadius = false,
+  gradient = false,
+  showRadialGrid = false,
+  radialGridLines = 8,
+  tooltipFormatter,
+}: PieChartProps) {
+  // Calculate total and max value for scaling
+  const maxValue = Math.max(...data.map((entry) => Number(entry[dataKey]) || 0));
+
+  const renderLabel = showLabels
+    ? (entry: any) => {
+        if (labelFormatter) {
+          return labelFormatter(entry[dataKey], entry);
+        }
+        return `${entry[dataKey]}`;
+      }
+    : undefined;
+
+  // Custom active shape renderer for scaled radius
+  const renderActiveShape = (props: any) => {
+    const { cx, cy, innerRadius, outerRadius, startAngle, endAngle, fill } = props;
+
+    return (
+      <g>
+        <Sector
+          cx={cx}
+          cy={cy}
+          innerRadius={innerRadius}
+          outerRadius={outerRadius}
+          startAngle={startAngle}
+          endAngle={endAngle}
+          fill={fill}
+        />
+      </g>
+    );
+  };
+
+  // Custom shape renderer for scaled radius and gradient
+  const renderCustomShape = (props: any) => {
+    const { cx, cy, innerRadius, outerRadius, startAngle, endAngle, fill, value, index } = props;
+
+    // Calculate scaled radius if enabled
+    let scaledOuterRadius = outerRadius;
+    if (scaledRadius && maxValue > 0) {
+      const valueNum = Number(value) || 0;
+      const percentage = valueNum / maxValue;
+      // Scale between 40% and 100% of the max outer radius
+      const minScale = 0.4;
+      scaledOuterRadius = outerRadius * (minScale + percentage * (1 - minScale));
+    }
+
+    if (gradient) {
+      return (
+        <>
+          <defs>
+            <radialGradient
+              id={`fillGradient${index}`}
+              cx={cx}
+              cy={cy}
+              r={scaledOuterRadius}
+              gradientUnits="userSpaceOnUse"
+            >
+              <stop offset="0%" stopColor={fill} stopOpacity={0} />
+              <stop offset="100%" stopColor={fill} stopOpacity={1} />
+            </radialGradient>
+            <clipPath id={`clipPath${index}`}>
+              <Sector
+                cx={cx}
+                cy={cy}
+                innerRadius={innerRadius}
+                outerRadius={scaledOuterRadius}
+                startAngle={startAngle}
+                endAngle={endAngle}
+              />
+            </clipPath>
+          </defs>
+          <Sector
+            cx={cx}
+            cy={cy}
+            innerRadius={innerRadius}
+            outerRadius={scaledOuterRadius}
+            startAngle={startAngle}
+            endAngle={endAngle}
+            clipPath={`url(#clipPath${index})`}
+            fill={`url(#fillGradient${index})`}
+          />
+        </>
+      );
+    }
+
+    return (
+      <Sector
+        cx={cx}
+        cy={cy}
+        innerRadius={innerRadius}
+        outerRadius={scaledOuterRadius}
+        startAngle={startAngle}
+        endAngle={endAngle}
+        fill={fill}
+      />
+    );
+  };
+
+  return (
+    <ChartContainer config={config} className={className || aspectRatio}>
+      <RechartsPieChart>
+        {showRadialGrid && (
+          <PolarAngleAxis
+            dataKey="gridLines"
+            tick={false}
+            axisLine={{
+              stroke: "hsl(var(--border))",
+              strokeOpacity: 0.5,
+              strokeWidth: 0.5,
+            }}
+            domain={[0, radialGridLines]}
+            tickCount={radialGridLines}
+          />
+        )}
+
+        {showTooltip && (
+          <ChartTooltip
+            cursor={false}
+            content={
+              <ChartTooltipContent hideLabel nameKey={nameKey} formatter={tooltipFormatter} />
+            }
+          />
+        )}
+
+        {showLegend && <ChartLegend content={<ChartLegendContent nameKey={nameKey} />} />}
+
+        <Pie
+          data={data}
+          dataKey={dataKey}
+          nameKey={nameKey}
+          innerRadius={`${innerRadius}%`}
+          outerRadius={`${outerRadius}%`}
+          paddingAngle={paddingAngle}
+          label={renderLabel}
+          activeShape={scaledRadius || gradient ? renderActiveShape : undefined}
+          shape={scaledRadius || gradient ? renderCustomShape : undefined}
+        >
+          {data.map((entry, index) => {
+            const name = entry[nameKey] as string;
+            const color = `var(--color-${name})`;
+            return <Cell key={`cell-${index}`} fill={color} />;
+          })}
+        </Pie>
+      </RechartsPieChart>
+    </ChartContainer>
+  );
+}