import { ChartPosition, ChartExtend, ArcPathItem, TextAnchorType } from '../../../types/vega-chart';
import { BaseRenderer } from './base-renderer';
import { Selection } from '../../../types/vega-chart';
export declare type SVGSelection = Selection<SVGElement, unknown, Element, unknown>;
export declare type SVGGSelection = Selection<SVGGElement, unknown, Element, unknown>;
/**  This class is used to render charts using SVG elements. */
export declare class SVGRenderer extends BaseRenderer<SVGElement> {
  /** This property is used to store a reference to the SVG element that will be used to render the chart*/
  protected context: SVGElement;
  /**
   * The function sets the layout of a chart using D3 and SVG.
   *
   * @param {number} width - chart width
   * @param {number} height - chart height
   * @param {number} top - chart margin top
   * @param {number} left - chart margin left
   */
  setLayout(width: number, height: number, top: number, left: number): void;
  /**
   * This function draws a line on a chart using D3.js library.
   *
   * @param {ChartPosition} from - The starting position of the line to be drawn on the chart. It is an
   * object with two properties: x and y, representing the x and y coordinates of the starting point respectively.
   * @param {ChartPosition} to - The "to" parameter is a ChartPosition object that represents the ending
   * point of the line to be drawn. It contains the x and y coordinates of the point on the chart where the line should end.
   * @param {string} color - The color of the line
   */
  drawLine(from: ChartPosition, to: ChartPosition, color: string): void;
  /**
   * This function draws an x-axis on a chart using D3 and a given scale and end point.
   *
   * @param {ChartExtend<unknown>} extend - which is an object that contains information about the chart's scale and end position on the y-axis. The `scale` property
   * is a D3 scale object that maps data values to pixel positions on the x-axis
   * @param {string} color - The stroke color of axis
   * @param {string} textStyle - The text style of the axis
   */
  drawXAxis(extend: ChartExtend<unknown>, color: string, textStyle: string): void;
  /**
   * This function draws the Y-axis of a chart using D3 and a given scale.
   *
   * @param {ChartExtend<unknown>} extend -  It likely contains additional information or settings related to the chart being drawn, but without more context it's
   * difficult to say exactly what it contains.
   * @param {string} color - The stroke color of the axis
   * @param {string} textStyle - The text style of the axis
   */
  drawYAxis(extend: ChartExtend<unknown>, color: string, textStyle: string): void;
  /**
   * This function draws a circle with a given center, radius, and color using D3.js.
   *
   * @param {ChartPosition} center - ChartPosition, which is an object containing the x and y coordinates of the center of the circle.
   * @param {number} radius - The radius parameter is a number that specifies the radius of the circle to be drawn.
   * @param {string} fillColor - The color parameter is a string that represents the color of the circle to be drawn
   * @param {number} strokeWidth - the border width
   * @param {string} strokeColor - the border color
   */
  drawCircle(center: ChartPosition, radius: number, fillColor: string, strokeWidth?: number, strokeColor?: string): void;
  /**
   * This function draws text on a chart at a specified position using D3.js.
   *
   * @param {ChartPosition} position - ChartPosition is an object that contains the x and y coordinates where the text will be positioned on the chart.
   * @param {string} text - The text parameter is a string that represents the text that will be
   * displayed on the chart. It is the content that will be added to the text element created by this function.
   * @param {string} textStyle - The text style of the axis
   * @param {TextAnchorType} textAnchor - text anchor
   * @param {number} rotate - rotate of the text
   */
  drawText(position: ChartPosition, text: string, textStyle: string, textAnchor?: TextAnchorType, rotate?: number): void;
  /**
   * This function draws a legend item with a colored circle and text at a specified position on a chart.
   *
   * @param {ChartPosition} position - The position parameter is an object that contains the x and y
   * coordinates where the legend should be placed on the chart.
   * @param {string} text - The text to be displayed in the legend.
   * @param {string} color - Background color token type, which is a type of color
   * used in the chart's background.
   * @param {string} textStyle - The text style of the axis
   * @returns {SVGGElement} svg g element
   */
  drawLegend(position: ChartPosition, text: string, color: string, textStyle: string): SVGGElement;
  /**
   * This function draws a rectangle with a specified position, width, height, and optional color using D3.js.
   *
   * @param {ChartPosition} position - The position parameter is an object that contains the x and y coordinates of the top-left corner of the rectangle.
   * @param {number} width - The width of the rectangle to be drawn.
   * @param {number} height - The height parameter is a number that represents the height of the rectangle to be drawn.
   * @param {string} [color] - The color parameter is an optional string that represents the color of the rectangle to be drawn. If it is not provided, the rectangle will have no fill color.
   */
  drawRect(position: ChartPosition, width: number, height: number, color: string): void;
  /**
   * This function draws a path on a chart using D3 and SVG based on the provided positions and color.
   *
   * @param {ChartPosition[]} positions - An array of ChartPosition objects that represent the
   * coordinates of the points on the path to be drawn. Each ChartPosition object contains an x and y
   * value that represent the position of the point on the chart.
   * @param {string} color - line color
   * represents a color value. It is likely used to specify the color of the path that will be drawn on 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 - the 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 {SVGPathElement} svg arc path element.
   */
  drawArcPath(center: ChartPosition, record: ArcPathItem, color: string, outerRadius: number, innerRadius: number): SVGPathElement;
  /**
   * This function clears all elements within two specific classes in a D3 selection.
   */
  clear(): void;
  /**
   * This TypeScript function creates and returns an SVG text element with the given position and text.
   *
   * @param {ChartPosition} position - The position parameter is an object that contains the x and y
   * coordinates where the text element will be placed on the SVG canvas.
   * @param {string} text - The text parameter is a string that represents the text content that will be
   * displayed in the SVGTextElement.
   * @param {string} textStyle - The text style of the axis
   * @param {TextAnchorType} textAnchor - text anchor
   * @param {number} rotate - rotate of the text
   * @returns {SVGTextElement} an SVGTextElement node.
   */
  private getTextNode;
  /**
   * This TypeScript function creates an SVG circle element with a specified center, radius, and color.
   *
   * @param {ChartPosition} center - The center position of the circle on the chart, specified as an
   * object with `x` and `y` properties.
   * @param {number} radius - The radius parameter is a number that represents the radius of the circle
   * to be created.
   * @param {string} fillColor - The color parameter
   * and is used to determine the fill color of the circle. It is likely an enum or string type that maps
   * to a specific color value.
   * @param {number} strokeWidth - the border width
   * @param {string} strokeColor - the border color
   * @returns {SVGCircleElement} an SVG circle element.
   */
  private getCircleNode;
}
