Chart Creation and Runtime

/**
 * Creates a new Chart instance
 * @param options - Chart configuration options
 */
class Chart {
  constructor(options?: ChartOptions): Chart;
}

interface ChartOptions {
  /** DOM container selector or element */
  container?: string | HTMLElement;
  /** Pre-configured canvas instance */
  canvas?: any;
  /** Chart width in pixels */
  width?: number;
  /** Chart height in pixels */
  height?: number;
  /** Chart depth for 3D visualizations */
  depth?: number;
  /** Whether to automatically fit container size */
  autoFit?: boolean;
  /** Renderer type: "canvas", "svg", or "webgl" */
  renderer?: string;
  /** Array of plugins to enable */
  plugins?: any[];
  /** Theme configuration */
  theme?: string | object;
  /** Component library to use */
  lib?: Library;
  /** Custom canvas creation function */
  createCanvas?: () => any;
}

import { Chart } from "@antv/g2";

// Basic chart
const chart = new Chart({
  container: "chart-container",
  width: 640,
  height: 480,
});

// Auto-fitting chart
const responsiveChart = new Chart({
  container: document.getElementById("chart"),
  autoFit: true,
});

// Chart with custom theme
const themedChart = new Chart({
  container: "chart",
  theme: "dark",
  width: 800,
  height: 600,
});

/**
 * Renders the chart to the configured container
 * @returns Promise that resolves when rendering is complete
 */
render(): Promise<Chart>;

/**
 * Destroys the chart and cleans up resources
 */
destroy(): void;

/**
 * Clears the chart content and optionally events
 * @param isClearEvents - Whether to clear event listeners (default: true)
 */
clear(isClearEvents?: boolean): void;

/**
 * Forces the chart to fit to its container size
 * @returns Promise that resolves when fitting is complete
 */
forceFit(): Promise<Chart>;

/**
 * Changes chart dimensions
 * @param width - New width in pixels
 * @param height - New height in pixels
 * @returns Promise that resolves when resize is complete
 */
changeSize(width: number, height: number): Promise<Chart>;

/**
 * Gets the chart container element
 * @returns The container HTML element
 */
getContainer(): HTMLElement;

/**
 * Gets the chart rendering context
 * @returns The G2 rendering context
 */
getContext(): G2Context;

/**
 * Gets data at specific coordinates
 * @param point - Screen coordinates
 * @param options - Query options
 * @returns Array of data items at the specified point
 */
getDataByXY(point: { x: number; y: number }, options?: object): any[];

/**
 * Core runtime class for chart rendering and lifecycle management
 */
class Runtime {
  constructor(options: RuntimeOptions): Runtime;
  
  /** Render a G2 specification */
  render(spec: G2Spec): Promise<any>;
  
  /** Update the rendered chart */
  update(spec: G2Spec): Promise<any>;
  
  /** Destroy the runtime instance */
  destroy(): void;
}

interface RuntimeOptions {
  container?: string | HTMLElement;
  canvas?: any;
  renderer?: string;
  plugins?: any[];
  theme?: string | object;
  lib?: Library;
}

/**
 * Renders a G2 specification to a container
 * @param spec - G2 visualization specification
 * @param options - Rendering options
 * @returns Rendered chart instance
 */
function render(spec: G2Spec, options?: RenderOptions): Promise<any>;

/**
 * Renders to an already mounted DOM element
 * @param spec - G2 visualization specification  
 * @param element - Target DOM element
 * @param options - Rendering options
 */
function renderToMountedElement(
  spec: G2Spec, 
  element: HTMLElement, 
  options?: RenderOptions
): Promise<any>;

interface RenderOptions {
  theme?: string | object;
  renderer?: string;
  plugins?: any[];
}

/**
 * Updates chart with new data or configuration
 * @param options - Update options
 */
update(options?: UpdateOptions): Promise<Chart>;

/**
 * Resize chart to new dimensions
 * @param width - New width
 * @param height - New height
 */
resize(width?: number, height?: number): Chart;

/**
 * Export chart as image
 * @param type - Image format: "png", "jpeg", "svg"
 * @param options - Export options
 */
toImage(type?: string, options?: ExportOptions): Promise<string>;

interface UpdateOptions {
  data?: any[];
  [key: string]: any;
}

interface ExportOptions {
  quality?: number;
  backgroundColor?: string;
  pixelRatio?: number;
}

/**
 * Adds event listener to chart
 * @param event - Event name
 * @param handler - Event handler function
 * @param once - Whether this is a one-time listener
 */
on(event: string, handler: EventHandler, once?: boolean): Chart;

/**
 * Adds one-time event listener to chart
 * @param event - Event name
 * @param handler - Event handler function
 */
once(event: string, handler: EventHandler): Chart;

/**
 * Removes event listener from chart
 * @param event - Event name
 * @param handler - Event handler function
 */
off(event?: string, handler?: EventHandler): Chart;

/**
 * Emits custom event
 * @param event - Event name
 * @param data - Event data
 */
emit(event: string, data?: any): Chart;

type EventHandler = (event: ChartEvent) => void;

interface ChartEvent {
  type: string;
  target: any;
  data?: any;
  x?: number;
  y?: number;
}

// Event handling
chart.on("click", (event) => {
  console.log("Clicked on:", event.data);
});

chart.on("mouseover", (event) => {
  console.log("Hovered over:", event.target);
});

// Chart lifecycle
chart.render().then(() => {
  console.log("Chart rendered successfully");
});

// Export chart
chart.toImage("png", { quality: 0.8 }).then((dataUrl) => {
  const img = new Image();
  img.src = dataUrl;
  document.body.appendChild(img);
});

/** Main chart layer CSS class */
const MAIN_LAYER_CLASS_NAME: string;

/** Label layer CSS class */
const LABEL_LAYER_CLASS_NAME: string;

/** Chart element CSS class */
const ELEMENT_CLASS_NAME: string;

/** View container CSS class */
const VIEW_CLASS_NAME: string;

/** Plot area CSS class */
const PLOT_CLASS_NAME: string;

/** Component CSS class */
const COMPONENT_CLASS_NAME: string;

/** Label CSS class */
const LABEL_CLASS_NAME: string;

/** Area CSS class */
const AREA_CLASS_NAME: string;

/** Mask CSS class */
const MASK_CLASS_NAME: string;

// Container targeting
const chart1 = new Chart({ container: "#chart" });          // ID selector
const chart2 = new Chart({ container: ".chart-container" }); // Class selector
const chart3 = new Chart({ container: document.getElementById("chart") }); // Element

// Responsive design
const responsiveChart = new Chart({
  container: "chart",
  autoFit: true, // Automatically resize with container
});

// Custom renderer
const canvasChart = new Chart({
  container: "chart",
  renderer: "canvas", // Use Canvas renderer
});

const svgChart = new Chart({
  container: "chart", 
  renderer: "svg", // Use SVG renderer
});