Shape Generators

/**
 * Create line generator for Cartesian coordinates
 * @returns Line generator function
 */
function line<Datum = [number, number]>(): Line<Datum>;

interface Line<Datum> {
  /**
   * Generate SVG path string for given data
   * @param data - Array of data points
   * @returns SVG path string or null
   */
  (data: Iterable<Datum>): string | null;
  
  /**
   * Get or set x-coordinate accessor
   * @param x - x-coordinate accessor function or constant
   * @returns Line generator for chaining or current accessor
   */
  x(): (d: Datum, index: number, data: Datum[]) => number;
  x(x: number | ((d: Datum, index: number, data: Datum[]) => number)): Line<Datum>;
  
  /**
   * Get or set y-coordinate accessor
   * @param y - y-coordinate accessor function or constant
   * @returns Line generator for chaining or current accessor
   */
  y(): (d: Datum, index: number, data: Datum[]) => number;
  y(y: number | ((d: Datum, index: number, data: Datum[]) => number)): Line<Datum>;
  
  /**
   * Get or set defined accessor (controls gaps in line)
   * @param defined - Function returning true if point should be included
   * @returns Line generator for chaining or current accessor
   */
  defined(): (d: Datum, index: number, data: Datum[]) => boolean;
  defined(defined: boolean | ((d: Datum, index: number, data: Datum[]) => boolean)): Line<Datum>;
  
  /**
   * Get or set curve interpolation method
   * @param curve - Curve factory function
   * @returns Line generator for chaining or current curve
   */
  curve(): CurveFactory | CurveFactoryLineOnly;
  curve(curve: CurveFactory | CurveFactoryLineOnly): Line<Datum>;
  
  /**
   * Get or set rendering context (for Canvas rendering)
   * @param context - Canvas 2D context or null for SVG
   * @returns Line generator for chaining or current context
   */
  context(): CanvasRenderingContext2D | null;
  context(context: CanvasRenderingContext2D | null): Line<Datum>;
  
  /**
   * Get or set output precision for coordinates
   * @param digits - Number of decimal places
   * @returns Line generator for chaining or current precision
   */
  digits(): number;
  digits(digits: number): Line<Datum>;
}

/**
 * Create radial line generator for polar coordinates
 * @returns Radial line generator function
 */
function lineRadial<Datum = [number, number]>(): LineRadial<Datum>;

interface LineRadial<Datum> {
  (data: Iterable<Datum>): string | null;
  
  /**
   * Get or set angle accessor (in radians)
   * @param angle - Angle accessor function or constant
   * @returns Line generator for chaining or current accessor
   */
  angle(): (d: Datum, index: number, data: Datum[]) => number;
  angle(angle: number | ((d: Datum, index: number, data: Datum[]) => number)): LineRadial<Datum>;
  
  /**
   * Get or set radius accessor
   * @param radius - Radius accessor function or constant
   * @returns Line generator for chaining or current accessor
   */
  radius(): (d: Datum, index: number, data: Datum[]) => number;
  radius(radius: number | ((d: Datum, index: number, data: Datum[]) => number)): LineRadial<Datum>;
  
  defined(): (d: Datum, index: number, data: Datum[]) => boolean;
  defined(defined: boolean | ((d: Datum, index: number, data: Datum[]) => boolean)): LineRadial<Datum>;
  curve(): CurveFactory | CurveFactoryLineOnly;
  curve(curve: CurveFactory | CurveFactoryLineOnly): LineRadial<Datum>;
  context(): CanvasRenderingContext2D | null;
  context(context: CanvasRenderingContext2D | null): LineRadial<Datum>;
}

import { line, curveCardinal } from "d3";

// Basic line generator
const lineGenerator = line()
  .x(d => d.x)
  .y(d => d.y);

const data = [
  { x: 0, y: 10 },
  { x: 50, y: 30 },
  { x: 100, y: 20 }
];

const pathString = lineGenerator(data);
// "M0,10L50,30L100,20"

// Line with curve interpolation
const smoothLine = line()
  .x(d => d.x)
  .y(d => d.y)
  .curve(curveCardinal);

// Line with gaps for missing data
const gappedLine = line()
  .x(d => d.x)
  .y(d => d.y)
  .defined(d => d.y !== null);

/**
 * Create area generator for Cartesian coordinates
 * @returns Area generator function
 */
function area<Datum = [number, number]>(): Area<Datum>;

interface Area<Datum> {
  /**
   * Generate SVG path string for given data
   * @param data - Array of data points
   * @returns SVG path string or null
   */
  (data: Iterable<Datum>): string | null;
  
  /**
   * Set both x0 and x1 accessors to same function
   * @param x - x-coordinate accessor function or constant
   * @returns Area generator for chaining
   */
  x(x: number | ((d: Datum, index: number, data: Datum[]) => number)): Area<Datum>;
  
  /**
   * Get or set baseline x-coordinate accessor
   * @param x0 - x0-coordinate accessor function or constant
   * @returns Area generator for chaining or current accessor
   */
  x0(): (d: Datum, index: number, data: Datum[]) => number;
  x0(x0: number | ((d: Datum, index: number, data: Datum[]) => number) | null): Area<Datum>;
  
  /**
   * Get or set topline x-coordinate accessor
   * @param x1 - x1-coordinate accessor function or constant
   * @returns Area generator for chaining or current accessor
   */
  x1(): (d: Datum, index: number, data: Datum[]) => number | null;
  x1(x1: number | ((d: Datum, index: number, data: Datum[]) => number) | null): Area<Datum>;
  
  /**
   * Set both y0 and y1 accessors to same function
   * @param y - y-coordinate accessor function or constant
   * @returns Area generator for chaining
   */
  y(y: number | ((d: Datum, index: number, data: Datum[]) => number)): Area<Datum>;
  
  /**
   * Get or set baseline y-coordinate accessor
   * @param y0 - y0-coordinate accessor function or constant
   * @returns Area generator for chaining or current accessor
   */
  y0(): (d: Datum, index: number, data: Datum[]) => number;
  y0(y0: number | ((d: Datum, index: number, data: Datum[]) => number) | null): Area<Datum>;
  
  /**
   * Get or set topline y-coordinate accessor
   * @param y1 - y1-coordinate accessor function or constant
   * @returns Area generator for chaining or current accessor
   */
  y1(): (d: Datum, index: number, data: Datum[]) => number | null;
  y1(y1: number | ((d: Datum, index: number, data: Datum[]) => number) | null): Area<Datum>;
  
  defined(): (d: Datum, index: number, data: Datum[]) => boolean;
  defined(defined: boolean | ((d: Datum, index: number, data: Datum[]) => boolean)): Area<Datum>;
  curve(): CurveFactory;
  curve(curve: CurveFactory): Area<Datum>;
  context(): CanvasRenderingContext2D | null;
  context(context: CanvasRenderingContext2D | null): Area<Datum>;
  
  /**
   * Derive line generator for left edge of area (x0, y)
   * @returns Line generator for left edge
   */
  lineX0(): Line<Datum>;
  
  /**
   * Derive line generator for right edge of area (x1, y)
   * @returns Line generator for right edge
   */
  lineX1(): Line<Datum>;
  
  /**
   * Derive line generator for top edge of area (x, y1)
   * @returns Line generator for top edge
   */
  lineY0(): Line<Datum>;
  
  /**
   * Derive line generator for bottom edge of area (x, y0)
   * @returns Line generator for bottom edge
   */
  lineY1(): Line<Datum>;
}

/**
 * Create radial area generator for polar coordinates
 * @returns Radial area generator function
 */
function areaRadial<Datum = [number, number]>(): AreaRadial<Datum>;

interface AreaRadial<Datum> {
  (data: Iterable<Datum>): string | null;
  
  angle(angle: number | ((d: Datum, index: number, data: Datum[]) => number)): AreaRadial<Datum>;
  startAngle(): (d: Datum, index: number, data: Datum[]) => number;
  startAngle(angle: number | ((d: Datum, index: number, data: Datum[]) => number) | null): AreaRadial<Datum>;
  endAngle(): (d: Datum, index: number, data: Datum[]) => number | null;
  endAngle(angle: number | ((d: Datum, index: number, data: Datum[]) => number) | null): AreaRadial<Datum>;
  
  radius(radius: number | ((d: Datum, index: number, data: Datum[]) => number)): AreaRadial<Datum>;
  innerRadius(): (d: Datum, index: number, data: Datum[]) => number;
  innerRadius(radius: number | ((d: Datum, index: number, data: Datum[]) => number) | null): AreaRadial<Datum>;
  outerRadius(): (d: Datum, index: number, data: Datum[]) => number | null;
  outerRadius(radius: number | ((d: Datum, index: number, data: Datum[]) => number) | null): AreaRadial<Datum>;
  
  defined(): (d: Datum, index: number, data: Datum[]) => boolean;
  defined(defined: boolean | ((d: Datum, index: number, data: Datum[]) => boolean)): AreaRadial<Datum>;
  curve(): CurveFactory;
  curve(curve: CurveFactory): AreaRadial<Datum>;
  context(): CanvasRenderingContext2D | null;
  context(context: CanvasRenderingContext2D | null): AreaRadial<Datum>;
}

/**
 * Create arc generator
 * @returns Arc generator function
 */
function arc<Datum = DefaultArcObject>(): Arc<any, Datum>;

interface Arc<This, Datum> {
  /**
   * Generate SVG path string for given datum
   * @param d - Arc datum with angle and radius properties
   * @param args - Additional arguments
   * @returns SVG path string or null
   */
  (this: This, d: Datum, ...args: any[]): string | null;
  
  /**
   * Compute centroid position for given datum
   * @param d - Arc datum
   * @param args - Additional arguments
   * @returns [x, y] centroid coordinates
   */
  centroid(d: Datum, ...args: any[]): [number, number];
  
  /**
   * Get or set inner radius accessor
   * @param radius - Inner radius accessor function or constant
   * @returns Arc generator for chaining or current accessor
   */
  innerRadius(): (d: Datum, ...args: any[]) => number;
  innerRadius(radius: number | ((this: This, d: Datum, ...args: any[]) => number)): Arc<This, Datum>;
  
  /**
   * Get or set outer radius accessor
   * @param radius - Outer radius accessor function or constant
   * @returns Arc generator for chaining or current accessor
   */
  outerRadius(): (d: Datum, ...args: any[]) => number;
  outerRadius(radius: number | ((this: This, d: Datum, ...args: any[]) => number)): Arc<This, Datum>;
  
  /**
   * Get or set corner radius accessor (for rounded corners)
   * @param radius - Corner radius accessor function or constant
   * @returns Arc generator for chaining or current accessor
   */
  cornerRadius(): (d: Datum, ...args: any[]) => number;
  cornerRadius(radius: number | ((this: This, d: Datum, ...args: any[]) => number)): Arc<This, Datum>;
  
  /**
   * Get or set start angle accessor (in radians)
   * @param angle - Start angle accessor function or constant
   * @returns Arc generator for chaining or current accessor
   */
  startAngle(): (d: Datum, ...args: any[]) => number;
  startAngle(angle: number | ((this: This, d: Datum, ...args: any[]) => number)): Arc<This, Datum>;
  
  /**
   * Get or set end angle accessor (in radians)
   * @param angle - End angle accessor function or constant
   * @returns Arc generator for chaining or current accessor
   */
  endAngle(): (d: Datum, ...args: any[]) => number;
  endAngle(angle: number | ((this: This, d: Datum, ...args: any[]) => number)): Arc<This, Datum>;
  
  /**
   * Get or set pad angle accessor (angular padding between arcs)
   * @param angle - Pad angle accessor function or constant
   * @returns Arc generator for chaining or current accessor
   */
  padAngle(): (d: Datum, ...args: any[]) => number;
  padAngle(angle: number | ((this: This, d: Datum, ...args: any[]) => number)): Arc<This, Datum>;
  
  /**
   * Get or set pad radius accessor (radius at which to linearize padding)
   * @param radius - Pad radius accessor function or constant or null for auto
   * @returns Arc generator for chaining or current accessor
   */
  padRadius(): ((d: Datum, ...args: any[]) => number) | null;
  padRadius(radius: number | ((this: This, d: Datum, ...args: any[]) => number) | null): Arc<This, Datum>;
  
  context(): CanvasRenderingContext2D | null;
  context(context: CanvasRenderingContext2D | null): Arc<This, Datum>;
  digits(): number;
  digits(digits: number): Arc<This, Datum>;
}

/**
 * Create pie layout generator for converting data to arc angles
 * @returns Pie generator function
 */
function pie<Datum = any>(): Pie<any, Datum>;

interface Pie<This, Datum> {
  /**
   * Compute arc angles for given dataset
   * @param data - Array of data items
   * @param args - Additional arguments
   * @returns Array of PieArcDatum objects
   */
  (this: This, data: Datum[], ...args: any[]): PieArcDatum<Datum>[];
  
  /**
   * Get or set value accessor function
   * @param value - Value accessor function or constant
   * @returns Pie generator for chaining or current accessor
   */
  value(): (d: Datum, i: number, data: Datum[]) => number;
  value(value: number | ((this: This, d: Datum, i: number, data: Datum[]) => number)): Pie<This, Datum>;
  
  /**
   * Get or set sort comparator for data elements
   * @param comparator - Comparison function or null for no sorting
   * @returns Pie generator for chaining or current comparator
   */
  sort(): ((a: Datum, b: Datum) => number) | null;
  sort(comparator: ((a: Datum, b: Datum) => number) | null): Pie<This, Datum>;
  
  /**
   * Get or set sort comparator for computed values
   * @param comparator - Comparison function or null for no sorting
   * @returns Pie generator for chaining or current comparator
   */
  sortValues(): ((a: number, b: number) => number) | null;
  sortValues(comparator: ((a: number, b: number) => number) | null): Pie<This, Datum>;
  
  /**
   * Get or set overall start angle
   * @param angle - Start angle in radians
   * @returns Pie generator for chaining or current start angle
   */
  startAngle(): number;
  startAngle(angle: number): Pie<This, Datum>;
  
  /**
   * Get or set overall end angle
   * @param angle - End angle in radians
   * @returns Pie generator for chaining or current end angle
   */
  endAngle(): number;
  endAngle(angle: number): Pie<This, Datum>;
  
  /**
   * Get or set pad angle between adjacent arcs
   * @param angle - Pad angle in radians
   * @returns Pie generator for chaining or current pad angle
   */
  padAngle(): number;
  padAngle(angle: number): Pie<This, Datum>;
}

import { arc, pie } from "d3";

// Pie chart data
const data = [
  { label: "A", value: 30 },
  { label: "B", value: 50 },
  { label: "C", value: 20 }
];

// Create pie layout
const pieGenerator = pie()
  .value(d => d.value)
  .sort(null); // Don't sort

// Create arc generator
const arcGenerator = arc()
  .innerRadius(0)      // Full pie (not donut)
  .outerRadius(100);

// Generate arcs
const arcs = pieGenerator(data);

// Generate path strings
arcs.forEach(d => {
  const pathString = arcGenerator(d);
  console.log(pathString); // SVG path for each slice
});

// Donut chart
const donutArc = arc()
  .innerRadius(50)     // Inner radius > 0 for donut
  .outerRadius(100)
  .cornerRadius(5);    // Rounded corners

/**
 * Create symbol generator
 * @returns Symbol generator function
 */
function symbol<Datum = any>(): Symbol<any, Datum>;

interface Symbol<This, Datum> {
  /**
   * Generate SVG path string for symbol
   * @param d - Symbol datum
   * @param args - Additional arguments
   * @returns SVG path string
   */
  (this: This, d: Datum, ...args: any[]): string;
  
  /**
   * Get or set symbol type
   * @param type - Symbol type or accessor function
   * @returns Symbol generator for chaining or current type
   */
  type(): SymbolType | ((this: This, d: Datum, ...args: any[]) => SymbolType);
  type(type: SymbolType | ((this: This, d: Datum, ...args: any[]) => SymbolType)): Symbol<This, Datum>;
  
  /**
   * Get or set symbol size in square pixels
   * @param size - Size value or accessor function
   * @returns Symbol generator for chaining or current size
   */
  size(): number | ((this: This, d: Datum, ...args: any[]) => number);
  size(size: number | ((this: This, d: Datum, ...args: any[]) => number)): Symbol<This, Datum>;
  
  context(): CanvasRenderingContext2D | null;
  context(context: CanvasRenderingContext2D | null): Symbol<This, Datum>;
  digits(): number;
  digits(digits: number): Symbol<This, Datum>;
}

// Built-in symbol types for filling
const symbolsFill: SymbolType[];

// Built-in symbol types for stroking  
const symbolsStroke: SymbolType[];

// Individual symbol types
const symbolCircle: SymbolType;
const symbolCross: SymbolType;
const symbolDiamond: SymbolType;
const symbolSquare: SymbolType;
const symbolStar: SymbolType;
const symbolTriangle: SymbolType;
const symbolWye: SymbolType;
const symbolAsterisk: SymbolType;
const symbolDiamond2: SymbolType;
const symbolPlus: SymbolType;
const symbolSquare2: SymbolType;
const symbolTriangle2: SymbolType;

interface SymbolType {
  /**
   * Draw symbol to given context
   * @param context - Canvas context or path object
   * @param size - Symbol size in square pixels
   */
  draw(context: CanvasRenderingContext2D | Path, size: number): void;
}

/**
 * Convert polar coordinates to Cartesian
 * @param angle - Angle in radians
 * @param radius - Radius
 * @returns [x, y] Cartesian coordinates
 */
function pointRadial(angle: number, radius: number): [number, number];

// Linear interpolation (straight lines)
const curveLinear: CurveFactory;
const curveLinearClosed: CurveFactory;

// Step functions (horizontal then vertical lines)
const curveStep: CurveFactory;
const curveStepBefore: CurveFactory;
const curveStepAfter: CurveFactory;

// Smooth curves
const curveBasis: CurveFactory;           // B-spline
const curveBasisClosed: CurveFactory;     // Closed B-spline
const curveBasisOpen: CurveFactory;       // Open B-spline
const curveBundle: CurveBundleFactory;    // Straightened B-spline
const curveCardinal: CurveCardinalFactory; // Cardinal spline
const curveCardinalClosed: CurveCardinalFactory;
const curveCardinalOpen: CurveCardinalFactory;
const curveCatmullRom: CurveCatmullRomFactory; // Catmull-Rom spline
const curveCatmullRomClosed: CurveCatmullRomFactory;
const curveCatmullRomOpen: CurveCatmullRomFactory;

// Monotonic curves (preserve monotonicity)
const curveMonotoneX: CurveFactory;
const curveMonotoneY: CurveFactory;
const curveNatural: CurveFactory;

// Bump curves (vertical/horizontal tangents)
const curveBumpX: CurveFactory;
const curveBumpY: CurveFactory;

// Curve factories with parameters
interface CurveBundleFactory extends CurveFactory {
  /**
   * Set bundle tension parameter
   * @param beta - Tension parameter (0 = straight lines, 1 = normal B-spline)
   * @returns Curve factory with specified tension
   */
  beta(beta: number): CurveFactory;
}

interface CurveCardinalFactory extends CurveFactory {
  /**
   * Set cardinal spline tension
   * @param tension - Tension parameter (0 = straight lines, 1 = very curved)
   * @returns Curve factory with specified tension
   */
  tension(tension: number): CurveFactory;
}

interface CurveCatmullRomFactory extends CurveFactory {
  /**
   * Set Catmull-Rom alpha parameter
   * @param alpha - Alpha parameter (0 = uniform, 0.5 = centripetal, 1 = chordal)
   * @returns Curve factory with specified alpha
   */
  alpha(alpha: number): CurveFactory;
}

interface CurveFactory {
  (context: CanvasRenderingContext2D | Path): Curve;
  lineStart?(): void;
  lineEnd?(): void;
}

interface Curve {
  areaStart(): void;
  areaEnd(): void;
  lineStart(): void;
  lineEnd(): void;
  point(x: number, y: number): void;
}

import { line, curveCardinal, curveMonotoneX, curveStep } from "d3";

const data = [
  { x: 0, y: 10 },
  { x: 1, y: 30 },
  { x: 2, y: 20 },
  { x: 3, y: 40 }
];

// Smooth cardinal spline
const smoothLine = line()
  .x(d => d.x)
  .y(d => d.y)
  .curve(curveCardinal.tension(0.5));

// Monotonic curve (preserves monotonicity)
const monotonicLine = line()
  .x(d => d.x)
  .y(d => d.y)
  .curve(curveMonotoneX);

// Step function
const stepLine = line()
  .x(d => d.x)
  .y(d => d.y)
  .curve(curveStep);

// Default arc object structure
interface DefaultArcObject {
  innerRadius?: number;
  outerRadius?: number;
  startAngle?: number;
  endAngle?: number;
  padAngle?: number;
}

// Pie arc datum generated by pie layout
interface PieArcDatum<T> {
  data: T;                    // Original data element
  value: number;              // Computed numeric value
  index: number;              // Zero-based sorted index
  startAngle: number;         // Start angle in radians
  endAngle: number;           // End angle in radians
  padAngle: number;           // Pad angle in radians
}

// Path-like interface for Canvas-style commands
interface Path {
  moveTo(x: number, y: number): void;
  closePath(): void;
  lineTo(x: number, y: number): void;
  quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void;
  bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, y: number): void;
  arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void;
  arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, counterclockwise?: boolean): void;
  rect(x: number, y: number, w: number, h: number): void;
}

// Curve factory interface
interface CurveFactory {
  (context: CanvasRenderingContext2D | Path): Curve;
}

// Curve factory for line-only interpolation
interface CurveFactoryLineOnly {
  (context: CanvasRenderingContext2D | Path): CurveLineOnly;
}

interface CurveLineOnly {
  lineStart(): void;
  lineEnd(): void;
  point(x: number, y: number): void;
}