import { ChartPosition, ChartExtend, ArcPathItem } from '../../../types/vega-chart';
import { BaseRenderer } from './base-renderer';
/**
 * The CanvasRenderer class is a TypeScript class that extends the BaseRenderer class and provides
 * methods for drawing various shapes and elements on a canvas.
 */
export declare class CanvasRenderer extends BaseRenderer<HTMLCanvasElement> {
  /**
   *  This property will hold the rendering context of the canvas element on which the shapes and elements will be drawn
   */
  protected context: HTMLCanvasElement;
  /**
   * declaring a private instance variable `canvasContext2d` of type `CanvasRenderingContext2D`.
   */
  private canvasContext2d;
  /**
   * The function sets the layout of a chart.
   *
   * @param {number} width - chart width
   * @param {number} height - chart height
   */
  setLayout(width: number, height: number): void;
  /**
   * The function `drawLine` takes two `ChartPosition` parameters and draws a line between them.
   *
   * @param {ChartPosition} from - The starting position of the line on the chart. It is of type ChartPosition.
   * @param {ChartPosition} to - The "to" parameter in the "drawLine" function is a ChartPosition object
   * that represents the end point of the line to be drawn. It contains information about the x and y
   * coordinates of the point on the chart where the line should end.
   */
  drawLine(from: ChartPosition, to: ChartPosition): void;
  /**
   * This function draws the X-axis on a chart and takes in a parameter of type ChartExtend.
   *
   * @param {ChartExtend<unknown>} extend - The parameter "extend" is of type "ChartExtend" which is a generic type that can
   * take any data type as an argument. It is likely used to extend or modify the properties of the chart's X-axis
   */
  drawXAxis(extend: ChartExtend<unknown>): void;
  /**
   * This function draws the Y-axis on a chart.
   *
   * @param {ChartExtend<unknown>} extend - The parameter "extend" is of type ChartExtend, which is a generic type that
   * represents the range of values for a chart axis. It contains information such as the minimum and
   * maximum values for the axis
   */
  drawYAxis(extend: ChartExtend<unknown>): void;
  /**
   * The function `drawCircle` takes in a center position, radius, and color and draws a circle.
   *
   * @param {ChartPosition} center - The center of the circle, represented by a ChartPosition object
   * that contains the x and y coordinates of the center point.
   * @param {number} radius - The _radius parameter is a number that represents the radius of the
   * circle to be drawn. The radius is the distance from the center of the circle to any point on its circumference.
   * @param {string} fillColor - The _color,
   * which is a type that represents a color value that can be used as a background color for a chart element
   * @param {number} strokeWidth - the border width
   * @param {string} strokeColor - the border color
   */
  drawCircle(center: ChartPosition, radius: number, fillColor: string, strokeWidth?: number, strokeColor?: string): void;
  /**
   * The function draws a legend on a chart with a circle and text at a specified position and color.
   *
   * @param {ChartPosition} position - ChartPosition is a type that represents the position of an
   * element on a chart. It could be an object with properties like x and y coordinates or a string that
   * represents a predefined position.
   * @param {string} text - The text parameter is a string that represents the label or name of the
   * legend that will be displayed on the chart.
   * @param {string} color - color string
   * represents a color for the legend. It could be a string or a number that corresponds to a specific
   * color value.
   * @returns {HTMLCanvasElement} chart canvas element
   */
  drawLegend(position: ChartPosition, text: string, color: string): HTMLCanvasElement;
  /**
   * The function `drawText` takes a position and a string of text as parameters and does not return anything.
   *
   * @param {ChartPosition} position - ChartPosition is a data type that represents the position of the
   * text on a chart. It could be an object with properties such as x and y coordinates, or it could be
   * a string that represents a pre-defined position on the chart (e.g. "top-left", "bottom-right",
   * etc.).
   * @param {string} text - The text parameter is a string that represents the text that needs to be drawn on the chart.
   */
  drawText(position: ChartPosition, text: string): void;
  /**
   * The function `drawRect` takes in a position, width, height, and optional color parameter to draw a rectangle.
   *
   * @param {ChartPosition} position - The position parameter is of type ChartPosition and represents
   * the position of the rectangle on the chart. It could be an object with x and y properties
   * representing the coordinates of the top-left corner of the rectangle.
   * @param {number} width - The width parameter is a number that represents the width of the rectangle
   * to be drawn. It determines how wide the rectangle will be on the chart.
   * @param {number} height - The `height` parameter in the `drawRect` function specifies the height of
   * the rectangle to be drawn. It is a required parameter and must be a number value.
   * @param {string} [color] - The color parameter is an optional parameter that
   * specifies the background color of the rectangle. It is of type string, which is
   * a custom type that represents a color token
   */
  drawRect(position: ChartPosition, width: number, height: number, color: string): void;
  /**
   * The function `drawLinePath` takes in an array of `ChartPosition` objects and a `string` color and draws a path.
   *
   * @param {ChartPosition[]} positions - An array of ChartPosition objects that represent the
   * coordinates of points on a chart. Each ChartPosition object has an x and y property that represent
   * the horizontal and vertical position of the point on the chart.
   * @param {string} color - The `color` parameter is of type
   * `string` and represents the color of the path to be drawn. This parameter is
   * used to set the background color of the chart.
   */
  drawLinePath(positions: ChartPosition[], color: string): void;
  /**
   * This function draws an arc path using D3 library and applies color and radius based on input parameters.
   *
   * @param {ChartPosition} center - arc center position
   * @param {ArcPathItem} record - an object containing data for the arc path to be drawn
   * @param {string} color - The color parameter
   * and is used to set the fill color of the arc path.
   * @param {number} outerRadius - The outer radius parameter is a number that determines the outer
   * radius of the arc path being drawn.
   * @param {number} innerRadius - The inner radius of the arc path, specified as a number.
   * @returns {HTMLCanvasElement} chart canvas element.
   */
  drawArcPath(center: ChartPosition, record: ArcPathItem, color: string, outerRadius: number, innerRadius: number): HTMLCanvasElement;
  /**
   * The function "clear"
   */
  clear(): void;
  /**
   * This function initializes a 2D canvas context.
   */
  private initCanvasContext2d;
  /**
   * This function returns the canvas 2D rendering context and initializes it if it doesn't exist.
   *
   * @returns {CanvasRenderingContext2D} The function `getContext2d()` returns the `CanvasRenderingContext2D` object.
   */
  private getContext2d;
}
