UI Components

/**
 * Tooltip component for displaying interactive data information
 * @param props - Tooltip configuration and behavior options
 * @returns React component rendering tooltip overlay
 */
function Tooltip<TValue = any, TName = any>(props: TooltipProps<TValue, TName>): JSX.Element;

interface TooltipProps<TValue, TName> {
  /** Whether tooltip is currently active/visible */
  active?: boolean;
  /** Custom content component or element */
  content?: React.ComponentType<any> | React.ReactElement;
  /** Cursor style configuration */
  cursor?: boolean | React.SVGProps<SVGElement>;
  /** Animation duration in milliseconds */
  animationDuration?: number;
  /** Animation easing function */
  animationEasing?: 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'linear';
  /** Allow tooltip to escape chart viewBox */
  allowEscapeViewBox?: { x?: boolean; y?: boolean };
  /** Include hidden data series in tooltip */
  includeHidden?: boolean;
  /** Filter null/undefined values from tooltip */
  filterNull?: boolean;
  /** Render tooltip in a portal */
  portal?: boolean;
}

import { LineChart, Line, Tooltip } from 'recharts';

<LineChart data={data}>
  <Line dataKey="value" />
  <Tooltip 
    animationDuration={200}
    cursor={{ stroke: '#8884d8', strokeWidth: 2 }}
  />
</LineChart>

/**
 * Default tooltip content component with standard formatting
 * @param props - Content rendering configuration
 * @returns React component rendering formatted tooltip content
 */
function DefaultTooltipContent(props: DefaultTooltipContentProps): JSX.Element;

interface DefaultTooltipContentProps {
  /** Tooltip payload data */
  payload?: Array<{ value: any; name: any; color?: string; dataKey?: string }>;
  /** Current label for the tooltip */
  label?: any;
  /** Label formatter function */
  labelFormatter?: (label: any) => React.ReactNode;
  /** Value formatter function */
  formatter?: (value: any, name: any) => [React.ReactNode, React.ReactNode];
  /** Separator between label and value */
  separator?: string;
  /** Content wrapper style */
  wrapperStyle?: React.CSSProperties;
  /** Content style */
  contentStyle?: React.CSSProperties;
  /** Label style */
  labelStyle?: React.CSSProperties;
  /** Item style */
  itemStyle?: React.CSSProperties;
}

/**
 * Legend component for data series labeling and interaction
 * @param props - Legend configuration and display options
 * @returns React component rendering chart legend
 */
function Legend(props: LegendProps): JSX.Element;

interface LegendProps {
  /** Custom legend content component */
  content?: React.ComponentType<any> | React.ReactElement;
  /** Legend wrapper styling */
  wrapperStyle?: React.CSSProperties;
  /** Legend width */
  width?: number;
  /** Legend height */
  height?: number;
  /** Legend layout direction */
  layout?: 'horizontal' | 'vertical';
  /** Horizontal alignment */
  align?: 'left' | 'center' | 'right';
  /** Vertical alignment */
  verticalAlign?: 'top' | 'middle' | 'bottom';
  /** Icon type for legend items */
  iconType?: LegendType;
  /** Legend data payload */
  payload?: LegendPayload[];
  /** Unique key function for payload items */
  payloadUniqBy?: (entry: LegendPayload) => string;
  /** Render legend in portal */
  portal?: boolean;
}

interface LegendPayload {
  value: any;
  id?: string;
  type?: LegendType;
  color?: string;
  payload?: any;
}

/**
 * Default legend content component with standard formatting
 * @param props - Legend content configuration
 * @returns React component rendering formatted legend items
 */
function DefaultLegendContent(props: DefaultLegendContentProps): JSX.Element;

interface DefaultLegendContentProps {
  /** Legend payload data */
  payload?: LegendPayload[];
  /** Icon type */
  iconType?: LegendType;
  /** Layout direction */
  layout?: 'horizontal' | 'vertical';
  /** Horizontal alignment */
  align?: 'left' | 'center' | 'right';
  /** Vertical alignment */
  verticalAlign?: 'top' | 'middle' | 'bottom';
  /** Icon size */
  iconSize?: number;
  /** Formatter function */
  formatter?: (value: any) => React.ReactNode;
  /** Wrapper styling */
  wrapperStyle?: React.CSSProperties;
}

/**
 * Responsive container for automatic chart sizing
 * @param props - Container configuration and sizing options
 * @returns React component providing responsive chart wrapper
 */
function ResponsiveContainer(props: ResponsiveContainerProps): JSX.Element;

interface ResponsiveContainerProps {
  /** Aspect ratio (width/height) */
  aspect?: number;
  /** Container width */
  width?: number | string;
  /** Container height */
  height?: number | string;
  /** Minimum width constraint */
  minWidth?: number;
  /** Minimum height constraint */
  minHeight?: number;
  /** Maximum height constraint */
  maxHeight?: number;
  /** Resize debounce delay in milliseconds */
  debounce?: number;
  /** Resize event handler */
  onResize?: (width: number, height: number) => void;
  /** Initial dimensions before measurement */
  initialDimension?: { width: number; height: number };
  /** Chart component children */
  children: React.ReactElement;
}

import { ResponsiveContainer, LineChart, Line } from 'recharts';

<ResponsiveContainer width="100%" height={400}>
  <LineChart data={data}>
    <Line dataKey="value" />
  </LineChart>
</ResponsiveContainer>

/**
 * Advanced text component with wrapping and scaling
 * @param props - Text configuration and styling options
 * @returns React component rendering SVG text with advanced features
 */
function Text(props: TextProps): JSX.Element;

interface TextProps extends React.SVGProps<SVGTextElement> {
  /** Scale text to fit available width */
  scaleToFit?: boolean;
  /** Text rotation angle in degrees */
  angle?: number;
  /** Text anchor alignment */
  textAnchor?: 'start' | 'middle' | 'end';
  /** Vertical text alignment */
  verticalAnchor?: 'start' | 'middle' | 'end';
  /** Available width for text */
  width?: number;
  /** Available height for text */
  height?: number;
  /** Break text at any character */
  breakAll?: boolean;
  /** Maximum number of lines */
  maxLines?: number;
  /** Text content */
  children?: React.ReactNode;
}

/**
 * Label component for chart annotations and data labeling
 * @param props - Label configuration and positioning options
 * @returns React component rendering positioned labels
 */
function Label(props: LabelProps): JSX.Element;

interface LabelProps {
  /** View box for positioning calculations */
  viewBox?: { x?: number; y?: number; width?: number; height?: number };
  /** Label value to display */
  value?: string | number | React.ReactElement;
  /** Label position relative to target */
  position?: 'top' | 'left' | 'right' | 'bottom' | 'inside' | 'outside' | 'insideLeft' | 'insideRight' | 'insideTop' | 'insideBottom' | 'insideTopLeft' | 'insideTopRight' | 'insideBottomLeft' | 'insideBottomRight' | 'center';
  /** Position offset */
  offset?: number;
  /** Custom content component */
  content?: React.ComponentType<any> | React.ReactElement;
  /** Value formatter function */
  formatter?: (value: any) => string | number;
  /** CSS class name */
  className?: string;
}

/**
 * Label list component for batch labeling of data points
 * @param props - Label list configuration and data options
 * @returns React component rendering multiple labels
 */
function LabelList<T extends Record<string, any>>(props: LabelListProps<T>): JSX.Element;

interface LabelListProps<T> {
  /** Data array for label generation */
  data?: T[];
  /** Data key for label values */
  dataKey?: string | number | ((dataObject: T) => any);
  /** Value accessor function */
  valueAccessor?: (entry: T, index: number) => any;
  /** Custom label content */
  content?: React.ComponentType<any> | React.ReactElement;
  /** Label position */
  position?: 'top' | 'left' | 'right' | 'bottom' | 'inside' | 'outside' | 'insideLeft' | 'insideRight' | 'insideTop' | 'insideBottom' | 'center';
  /** Label angle */
  angle?: number;
  /** Value formatter */
  formatter?: (value: any) => string | number;
  /** Clock-wise positioning */
  clockWise?: boolean;
}

/**
 * Cell component for customizing individual data points
 * @param props - Cell styling and configuration
 * @returns null (component used for prop passing only)
 */
function Cell(props: CellProps): null;

interface CellProps extends React.SVGProps<SVGElement> {
  /** Any additional properties for styling individual cells */
  [key: string]: any;
}

import { PieChart, Pie, Cell } from 'recharts';

const COLORS = ['#0088FE', '#00C49F', '#FFBB28'];

<PieChart>
  <Pie data={data} dataKey="value">
    {data.map((entry, index) => (
      <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
    ))}
  </Pie>
</PieChart>

/**
 * Customized component wrapper for custom SVG elements
 * @param props - Custom component configuration
 * @returns React component rendering custom SVG content
 */
function Customized<P = {}, C = React.ComponentType<P>>(props: CustomizedProps<P, C>): JSX.Element;

interface CustomizedProps<P, C> {
  /** Custom component to render */
  component: React.ReactElement<P> | React.FunctionComponent<P> | React.ComponentClass<P>;
}

/**
 * Surface component providing root SVG container
 * @param props - SVG container configuration
 * @returns React component rendering SVG root element
 */
function Surface(props: SurfaceProps): JSX.Element;

interface SurfaceProps extends React.SVGProps<SVGSVGElement> {
  /** SVG width */
  width?: number;
  /** SVG height */
  height?: number;
  /** SVG viewBox */
  viewBox?: string;
  /** SVG content */
  children?: React.ReactNode;
}

/**
 * Layer component providing SVG group container
 * @param props - SVG group configuration
 * @returns React component rendering SVG group element
 */
function Layer(props: LayerProps): JSX.Element;

interface LayerProps extends React.SVGAttributes<SVGGElement> {
  /** Group content */
  children?: React.ReactNode;
}