Chart Elements

class HTMLPerspectiveViewerD3FCPluginElement extends HTMLElement implements IPerspectiveViewerPlugin {
  // Internal properties
  _chart: Chart;
  static _chart: Chart;
  _settings: Settings | null;
  render_warning: boolean;
  _initialized: boolean;
  _container: HTMLElement;
  _staged_view: any;
  config: any;

  constructor();
  
  // Web component lifecycle
  connectedCallback(): void;
}

class HTMLPerspectiveViewerD3FCPluginElement {
  /** Maximum number of data cells this chart type can render efficiently */
  static get max_cells(): number;
  static set max_cells(value: number);
  
  /** Maximum number of columns this chart type can handle */
  static get max_columns(): number;
  static set max_columns(value: number);
}

class HTMLPerspectiveViewerD3FCPluginElement {
  /** Display name of the chart plugin */
  get name(): string;
  
  /** Category for grouping charts in UI (e.g., "Y Chart", "XY Chart") */
  get category(): string;
  
  /** Selection interaction mode for the chart */
  get select_mode(): string;
  
  /** Minimum number of columns required for this chart type */
  get min_config_columns(): number;
  
  /** Default or suggested column names for configuration */
  get config_column_names(): string[];
  
  /** Instance-level maximum cells setting */
  get max_cells(): number;
  set max_cells(value: number);
  
  /** Instance-level maximum columns setting */
  get max_columns(): number;
  set max_columns(value: number);
  
  /** Load priority of the plugin (higher number = higher priority) */
  get priority(): number | undefined;
}

class HTMLPerspectiveViewerD3FCPluginElement {
  /**
   * Renders the chart to a PNG blob for export or thumbnails
   * @returns Promise resolving to PNG image blob
   */
  render(): Promise<Blob>;
  
  /**
   * Initial draw of the chart with new data
   * @param view - Perspective view containing the data
   * @param end_col - Optional column limit for data fetching
   * @param end_row - Optional row limit for data fetching
   */
  draw(view: any, end_col?: number, end_row?: number): Promise<void>;
  
  /**
   * Updates the chart with new or modified data
   * @param view - Perspective view containing the data
   * @param end_col - Optional column limit for data fetching
   * @param end_row - Optional row limit for data fetching
   * @param clear - Whether to clear existing chart content before updating
   */
  update(view: any, end_col?: number, end_row?: number, clear?: boolean): Promise<void>;
  
  /**
   * Clears all chart content from the container
   */
  clear(): Promise<void>;
}

// Get a chart element
const chartElement = document.querySelector('perspective-viewer-d3fc-yline');

// Draw initial chart
await chartElement.draw(perspectiveView);

// Update with new data, clearing previous content
await chartElement.update(perspectiveView, undefined, undefined, true);

// Clear the chart
await chartElement.clear();

// Export chart as image
const imageBlob = await chartElement.render();

class HTMLPerspectiveViewerD3FCPluginElement {
  /**
   * Handles chart resizing when container dimensions change
   * @param view - Perspective view for redrawing if needed
   */
  resize(view: any): Promise<void>;
  
  /**
   * Applies style changes to the chart without full re-render
   * @param view - Perspective view containing the data
   * @param end_col - Optional column limit
   * @param end_row - Optional row limit  
   */
  restyle(view: any, end_col?: number, end_row?: number): Promise<void>;
  
  /**
   * Cleanup method called when chart is being destroyed
   */
  delete(): Promise<void>;
}

class HTMLPerspectiveViewerD3FCPluginElement {
  /**
   * Returns the chart's container HTML element
   * @returns The chart container element
   */
  getContainer(): HTMLElement;
  
  /**
   * Saves the current chart settings and configuration
   * @returns Settings object containing chart state
   */
  save(): Settings;
  
  /**
   * Restores chart settings and configuration from saved state
   * @param settings - Settings object to restore
   * @param columns_config - Column-specific configuration values
   */
  restore(settings: Settings, columns_config: ColumnConfigValues): void;
}

// Save current chart configuration
const savedSettings = chartElement.save();

// Later, restore the configuration
chartElement.restore(savedSettings, columnConfig);

// Access the chart container for custom operations
const container = chartElement.getContainer();
const boundingBox = container.getBoundingClientRect();

class HTMLPerspectiveViewerD3FCPluginElement {
  /**
   * Determines if the chart can render custom styles for a specific column type
   * @param type - The data type of the column
   * @param group - Optional grouping context
   * @returns True if column styling is supported for this type
   */
  can_render_column_styles(type: Type, group?: string): boolean;
  
  /**
   * Returns the styling controls available for a specific column type
   * @param type - The data type of the column
   * @param group - Optional grouping context
   * @returns Configuration object for column styling controls
   */
  column_style_controls(type: Type, group?: string): unknown;
  
  /**
   * Determines which column configuration controls are populated in the viewer
   * @param view_type - The data type of the column
   * @param group - Optional grouping context
   * @returns Configuration object for column configuration controls
   */
  column_style_config?(view_type: string, group: string): any;
}

class HTMLPerspectiveViewerD3FCPluginElement {
  /**
   * Internal method that performs the actual chart drawing
   * Called by draw(), update(), and resize() methods
   * @private
   */
  _draw(): void;
}

interface ProcessedSettings extends Settings {
  /** Memoized axis domains for performance */
  axisMemo: Axis[];
  /** Processed data ready for chart rendering */
  data: any[];
  /** Color styling configuration */
  colorStyles?: ColorStyles;
  /** Text styling configuration */  
  textStyles: TextStyles;
  /** Chart container dimensions */
  size: DOMRect;
}