@turtleclub/ui 0.7.0-beta.33 → 0.7.0-beta.35

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

@@ -1,362 +0,0 @@
-"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

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

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

@@ -1,277 +0,0 @@
-"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>
-  );
-}