Chart Component

/**
 * Main chart component that serves as a container for visualization elements
 * @param props - Chart configuration and child components
 */
class Chart<TRecord extends DataRecord = DataRecord> extends Component<ChartProps<TRecord>> {
  constructor(props: ChartProps<TRecord>);
}

interface ChartProps<TRecord extends DataRecord = DataRecord> {
  /** Chart data as array of records */
  data: Data<TRecord>;
  /** Scale configuration for data fields */
  scale?: DataRecordScale<TRecord>;
  /** Coordinate system configuration */
  coord?: CoordType | CoordProps;
  /** Visual styling properties */
  style?: GroupStyleProps;
  /** Theme configuration object */
  theme?: Record<string, any>;
  /** Child components (geometries, axes, legends, etc.) */
  children?: any;
}

interface ChartChildProps<TRecord extends DataRecord = DataRecord> {
  /** Data passed down from parent chart */
  data?: Data<TRecord>;
  /** Reference to parent chart instance */
  chart?: Chart<TRecord>;
  /** Coordinate system instance */
  coord?: Coord;
  /** Layout properties */
  layout?: LayoutProps;
}

import { Chart, Canvas, Axis, Interval } from "@antv/f2";

// Basic chart setup
const data = [
  { category: 'A', value: 100 },
  { category: 'B', value: 200 },
  { category: 'C', value: 150 },
];

const chartProps = {
  data,
  scale: {
    value: { tickCount: 5 }
  },
  coord: { type: 'cartesian' as CoordType },
  theme: { colors: ['#1890ff', '#52c41a', '#fa8c16'] }
};

// Using with Canvas
const context = document.getElementById('chart').getContext('2d');
const { props } = (
  <Canvas context={context}>
    <Chart {...chartProps}>
      <Axis field="category" />
      <Axis field="value" />
      <Interval x="category" y="value" color="category" />
    </Chart>
  </Canvas>
);

const canvas = new Canvas(props);
await canvas.render();

/**
 * Chart data type - array of data records
 */
type Data<TRecord extends DataRecord = DataRecord> = TRecord[];

/**
 * Scale configuration for data fields
 */
type DataRecordScale<TRecord> = {
  [K in keyof TRecord]?: ScaleConfig;
};

/**
 * Base data record type
 */
type DataRecord = Record<string, any>;

// Simple data
const simpleData = [
  { x: 1, y: 10 },
  { x: 2, y: 20 },
  { x: 3, y: 15 }
];

// Complex data with scale configuration
const complexData = [
  { date: '2023-01-01', sales: 1000, region: 'North' },
  { date: '2023-01-02', sales: 1200, region: 'South' },
  { date: '2023-01-03', sales: 800, region: 'East' }
];

const scaleConfig = {
  date: { 
    type: 'time',
    tickCount: 5,
    formatter: (val) => new Date(val).toLocaleDateString()
  },
  sales: {
    type: 'linear', 
    tickCount: 6,
    formatter: (val) => `$${val}`
  }
};

/**
 * Coordinate system types
 */
type CoordType = 'cartesian' | 'polar' | 'helix' | 'rect';

/**
 * Coordinate system configuration
 */
interface CoordProps {
  /** Coordinate system type */
  type: CoordType;
  /** Whether to transpose x and y axes */
  transposed?: boolean;
  /** Start angle for polar coordinates (in radians) */
  startAngle?: number;
  /** End angle for polar coordinates (in radians) */
  endAngle?: number;
  /** Inner radius for polar coordinates (0-1) */
  innerRadius?: number;
  /** Outer radius for polar coordinates (0-1) */
  radius?: number;
}

// Cartesian (default) coordinate system
const cartesianCoord = { type: 'cartesian' as CoordType };

// Transposed cartesian (horizontal bar chart)
const transposedCoord = { 
  type: 'cartesian' as CoordType, 
  transposed: true 
};

// Polar coordinate system (pie chart)
const polarCoord = {
  type: 'polar' as CoordType,
  startAngle: -Math.PI / 2,
  endAngle: Math.PI * 3 / 2,
  innerRadius: 0,
  radius: 0.8
};

// Semi-circle gauge
const gaugeCoord = {
  type: 'polar' as CoordType,
  startAngle: -Math.PI,
  endAngle: 0,
  innerRadius: 0.6,
  radius: 0.9
};

/**
 * Position layout configuration
 */
interface PositionLayout {
  position: 'top' | 'right' | 'bottom' | 'left';
  width: number;
  height: number;
}

/**
 * Component position information
 */
interface ComponentPosition {
  component: Component;
  layout: PositionLayout | PositionLayout[];
}

/**
 * Theme configuration object with styling options
 */
interface ThemeConfig {
  /** Global colors palette */
  colors?: string[];
  /** Font family */
  fontFamily?: string;
  /** Global font size */
  fontSize?: number;
  /** Axis styling */
  axis?: {
    labelOffset?: string;
    line?: { stroke?: string; lineWidth?: string };
    label?: { fill?: string; fontSize?: string };
    grid?: { stroke?: string; lineWidth?: string; lineDash?: string[] };
  };
  /** Legend styling */
  legend?: {
    fontSize?: string;
    fill?: string;
    spacing?: number;
  };
  /** Guide styling */
  guide?: {
    line?: { style?: { stroke?: string; lineWidth?: number } };
    text?: { style?: { fill?: string; fontSize?: string } };
  };
}

// Custom theme
const customTheme = {
  colors: ['#1890ff', '#52c41a', '#fa8c16', '#eb2f96'],
  fontFamily: 'Arial, sans-serif',
  fontSize: 12,
  axis: {
    labelOffset: '10px',
    line: { stroke: '#d9d9d9', lineWidth: '1px' },
    label: { fill: '#666', fontSize: '11px' },
    grid: { stroke: '#f0f0f0', lineWidth: '1px' }
  },
  legend: {
    fontSize: '12px',
    fill: '#333',
    spacing: 8
  }
};

// Using theme in chart
<Chart data={data} theme={customTheme}>
  {/* chart children */}
</Chart>