UNPKG

@syncfusion/ej2-charts

Version:

Feature-rich chart control with built-in support for over 25 chart types, technical indictors, trendline, zooming, tooltip, selection, crosshair and trackball.

974 lines 56.2 kB
import { Effect } from '@syncfusion/ej2-base'; import { Index } from '../../common/model/base'; import { PathAttributes, RectAttributes, CircleAttributes, BaseAttibutes } from '@syncfusion/ej2-svg-base'; import { FontModel, BorderModel, MarginModel } from '../model/base-model'; import { Series, Points } from '../../chart/series/chart-series'; import { Axis } from '../../chart/axis/axis'; import { Chart } from '../../chart/chart'; import { AccumulationChart } from '../../accumulation-chart/accumulation'; import { RangeNavigator } from '../../range-navigator/range-navigator'; import { AccumulationSeries, AccPoints } from '../../accumulation-chart/model/acc-base'; import { IShapes } from '../model/interface'; import { StockChart } from '../../stock-chart/stock-chart'; import { Rect, TextOption, Size, PathOption, SvgRenderer, CanvasRenderer } from '@syncfusion/ej2-svg-base'; import { BulletChart } from '../../bullet-chart/bullet-chart'; import { RangeColorSettingModel } from '../../chart/chart-model'; import { AccumulationDataLabelSettingsModel, IAccTextRenderEventArgs } from '../../accumulation-chart'; import { Alignment } from './enum'; import { Chart3D } from '../../chart3d'; import { Chart3DAxis } from '../../chart3d/axis/axis'; import { Chart3DPoint, Chart3DSeries } from '../../chart3d/series/chart-series'; import { CircularChart3D } from '../../circularchart3d'; import { VisibleRangeModel } from '../model/interface'; import { ScrollBar } from '../scrollbar/scrollbar'; /** * Function to sort the dataSource, by default it sort the data in ascending order. * * @param {Object} data chart data * @param {string} fields date fields * @param {boolean} isDescending boolean values of descending * @returns {Object[]} It returns chart data which be sorted. */ export declare function sort(data: Object[], fields: string[], isDescending?: boolean): Object[]; /** * Checks if a label contains a line break. * * @param {string} label - The label to check. * @returns {boolean} - True if the label contains a line break, otherwise false. */ export declare function isBreakLabel(label: string): boolean; /** * Retrieves the visible data points from a series. * * @param {Series | Chart3DSeries} series - The series to retrieve the visible data points. * @returns {Points[]} - An array containing the visible data points. */ export declare function getVisiblePoints(series: Series | Chart3DSeries): Points[]; /** * Calculates the offset for positioning a scrollbar on a chart axis. * * @param {ScrollBar} scrollbar - The scrollbar object to position. * @param {boolean} isHorizontalAxis - Indicates whether the axis is horizontal. * @returns {number} An object containing the calculated top and left offsets for the scrollbar. */ export declare function calculateScrollbarOffset(scrollbar: ScrollBar, isHorizontalAxis: boolean): number; /** * Rotates the size of text based on the provided angle. * * @param {FontModel} font - The font style of the text. * @param {string} text - The text to be rotated. * @param {number} angle - The angle of rotation. * @param {Chart | Chart3D} chart - The chart instance. * @param {FontModel} themeFontStyle - The font style based on the theme. * @returns {Size} - The rotated size of the text. */ export declare function rotateTextSize(font: FontModel, text: string, angle: number, chart: Chart | Chart3D, themeFontStyle: FontModel): Size; /** * Removes the specified element. * * @param {string | Element} id - The id or reference of the element to be removed. * @returns {void} */ export declare function removeElement(id: string | Element): void; /** * Calculates the logarithm of a specified value with respect to a specified base. * * @param {number} value - The value for which to calculate the logarithm. * @param {number} base - The base of the logarithm. * @returns {number} - The logarithm of the value with respect to the specified base. */ export declare function logBase(value: number, base: number): number; /** * Displays a tooltip at the specified coordinates with the given text. * * @param {string} text - The text content of the tooltip. * @param {number} x - The x-coordinate where the tooltip should be displayed. * @param {number} y - The y-coordinate where the tooltip should be displayed. * @param {number} areaWidth - The width of the area where the tooltip is displayed. * @param {string} id - The id of the tooltip element. * @param {Element} element - The element to which the tooltip is appended. * @param {boolean} isTouch - Indicates whether the tooltip is displayed on a touch device. * @param {boolean} isTitleOrLegendEnabled - Indicates whether the tooltip is enabled for title or legend. * @param {Rect} bound - The bounding rectangle in which the tooltip should be confined. * @returns {void} * @private */ export declare function showTooltip(text: string, x: number, y: number, areaWidth: number, id: string, element: Element, isTouch?: boolean, isTitleOrLegendEnabled?: boolean, bound?: Rect): void; /** * Checks if a value is within the specified range. * * @param {number} value - The value to check. * @param {VisibleRangeModel} range - The range to check against. * @returns {boolean} - True if the value is inside the range, otherwise false. */ export declare function inside(value: number, range: VisibleRangeModel): boolean; /** * Checks if a value is within the specified range. * * @param {number} value - The value to check. * @param {VisibleRangeModel} range - The range to check against. * @returns {boolean} - True if the value is inside the range, otherwise false. */ export declare function withIn(value: number, range: VisibleRangeModel): boolean; /** * Adjusts the value based on the axis type. * * @param {number} value - The value to adjust. * @param {Axis} axis - The axis used for adjustment. * @returns {number} - The adjusted value. */ export declare function logWithIn(value: number, axis: Axis): number; /** * Checks if a point is within the range of the previous and next points in a series. * * @param {Points} previousPoint - The previous point in the series. * @param {Points} currentPoint - The current point to check. * @param {Points} nextPoint - The next point in the series. * @param {Series} series - The series to which the points belong. * @returns {boolean} - A boolean indicating if the point is within the range. * @private */ export declare function withInRange(previousPoint: Points, currentPoint: Points, nextPoint: Points, series: Series): boolean; /** * Calculates the sum of an array of numbers. * * @param {number[]} values - An array of numbers. * @returns {number} - The sum of the numbers in the array. */ export declare function sum(values: number[]): number; /** * Calculates the sum of elements in a subarray. * * @param {Object[]} values - The array containing elements. * @param {number} first - The index of the first element in the subarray. * @param {number} last - The index of the last element in the subarray. * @param {number[]} index - The array of indices. * @param {Series} series - The series object. * @returns {number} - The sum of elements in the subarray. * @private */ export declare function subArraySum(values: Object[], first: number, last: number, index: number[], series: Series): number; /** * Subtracts thickness from the given rectangle. * * @param {Rect} rect - The rectangle from which to subtract thickness. * @param {Thickness} thickness - The thickness to subtract. * @returns {Rect} - The resulting rectangle after subtracting thickness. */ export declare function subtractThickness(rect: Rect, thickness: Thickness): Rect; /** * Subtracts a rectangle representing thickness from the given rectangle. * * @param {Rect} rect - The rectangle from which to subtract the thickness rectangle. * @param {Thickness} thickness - The rectangle representing the thickness to subtract. * @returns {Rect} - The resulting rectangle after subtracting the thickness rectangle. */ export declare function subtractRect(rect: Rect, thickness: Rect): Rect; /** * Converts a degree value to a location on the chart based on the provided radius and center point. * * @param {number} degree - The degree value to convert. * @param {number} radius - The radius from the center point. * @param {ChartLocation} center - The center point of the chart. * @returns {ChartLocation} - The location on the chart corresponding to the degree value. */ export declare function degreeToLocation(degree: number, radius: number, center: ChartLocation): ChartLocation; /** * Converts a degree value to radians. * * @param {number} degree - The degree value to convert. * @returns {number} - The equivalent value in radians. */ export declare function degreeToRadian(degree: number): number; /** * Get the coordinates of a rotated rectangle. * * @param {ChartLocation[]} actualPoints - The coordinates of the original rectangle. * @param {number} centerX - The x-coordinate of the center of rotation. * @param {number} centerY - The y-coordinate of the center of rotation. * @param {number} angle - The angle of rotation in degrees. * @returns {ChartLocation[]} - The coordinates of the rotated rectangle. */ export declare function getRotatedRectangleCoordinates(actualPoints: ChartLocation[], centerX: number, centerY: number, angle: number): ChartLocation[]; /** * Helper function to determine whether there is an intersection between the two polygons described * by the lists of vertices. Uses the Separating Axis Theorem. * * @param {ChartLocation[]} a an array of connected points [{x:, y:}, {x:, y:},...] that form a closed polygon. * @param {ChartLocation[]} b an array of connected points [{x:, y:}, {x:, y:},...] that form a closed polygon. * @returns {boolean} if there is any intersection between the 2 polygons, false otherwise. */ export declare function isRotatedRectIntersect(a: ChartLocation[], b: ChartLocation[]): boolean; /** * Calculates the angle between two points. * * @param {ChartLocation} center - The center point. * @param {ChartLocation} point - The point to calculate the angle from the center. * @returns {number} - The angle in degrees. */ export declare function getAngle(center: ChartLocation, point: ChartLocation): number; /** * Returns a sub-array of values starting from the specified index. * * @param {number[]} values - The array of numbers. * @param {number} index - The index from which the sub-array starts. * @returns {number[]} - The sub-array of values. */ export declare function subArray(values: number[], index: number): number[]; /** * Converts a value to its corresponding coefficient based on the axis range. * * @param {number} value - The value to be converted. * @param {Axis} axis - The axis object containing range information. * @returns {number} - The coefficient value corresponding to the input value. */ export declare function valueToCoefficient(value: number, axis: Axis): number; /** * Transforms a point to its visible position based on the axes range and inversion. * * @param {number} x - The x-coordinate of the point. * @param {number} y - The y-coordinate of the point. * @param {Axis} xAxis - The x-axis object containing range information. * @param {Axis} yAxis - The y-axis object containing range information. * @param {boolean} [isInverted=false] - Specifies if the chart is inverted. * @param {Series} [series] - The series object for additional information (optional). * @returns {ChartLocation} - The transformed visible position of the point. */ export declare function TransformToVisible(x: number, y: number, xAxis: Axis, yAxis: Axis, isInverted?: boolean, series?: Series): ChartLocation; /** * Finds the index from the given id. * * @param {string} id - The id to search for. * @param {boolean} [isPoint=false] - Specifies if the id represents a data point (optional). * @returns {Index} - The index found from the id. */ export declare function indexFinder(id: string, isPoint?: boolean): Index; /** * Converts a coefficient value to a vector representing a point on the circumference of a circle. * * @param {number} coefficient - The coefficient value to convert. * @param {number} startAngle - The starting angle of the circle. * @returns {ChartLocation} - The vector representing the point on the circle. */ export declare function CoefficientToVector(coefficient: number, startAngle: number): ChartLocation; /** * Converts a value to a polar coefficient value based on the axis. * * @param {number} value - The value to convert. * @param {Axis} axis - The axis object. * @returns {number} - The polar coefficient value. */ export declare function valueToPolarCoefficient(value: number, axis: Axis): number; /** @private */ export declare class Mean { verticalStandardMean: number; horizontalStandardMean: number; verticalSquareRoot: number; horizontalSquareRoot: number; verticalMean: number; horizontalMean: number; constructor(verticalStandardMean: number, verticalSquareRoot: number, horizontalStandardMean: number, horizontalSquareRoot: number, verticalMean: number, horizontalMean: number); } /** @private */ export declare class PolarArc { startAngle: number; endAngle: number; innerRadius: number; radius: number; currentXPosition: number; constructor(startAngle?: number, endAngle?: number, innerRadius?: number, radius?: number, currentXPosition?: number); } /** * Creates a tooltip element with the specified id, text, position, and font size. * * @param {string} id - The id of the tooltip element. * @param {string} text - The text content of the tooltip. * @param {number} top - The top position of the tooltip. * @param {number} left - The left position of the tooltip. * @param {string} fontSize - The font size of the tooltip text. * @returns {void} */ export declare function createTooltip(id: string, text: string, top: number, left: number, fontSize: string): void; /** * Creates zooming labels for the specified axis and adds them to the parent element. * * @param {Chart} chart - The chart instance. * @param {Axis} axis - The axis for which to create zooming labels. * @param {Element} parent - The parent element to which the labels will be appended. * @param {number} index - The index of the label. * @param {boolean} isVertical - Indicates whether the axis is vertical. * @param {Rect} rect - The bounding rectangle of the label. * @returns {Element} - The created zooming label element. */ export declare function createZoomingLabels(chart: Chart, axis: Axis, parent: Element, index: number, isVertical: boolean, rect: Rect): Element; /** * Finds the direction of the crosshair based on the provided parameters. * * @param {number} rX - The x-coordinate of the crosshair line. * @param {number} rY - The y-coordinate of the crosshair line. * @param {Rect} rect - The bounding rectangle of the crosshair. * @param {ChartLocation} arrowLocation - The location of the arrow in the crosshair. * @param {number} arrowPadding - The padding for the arrow. * @param {boolean} top - Indicates whether the crosshair is positioned at the top. * @param {boolean} bottom - Indicates whether the crosshair is positioned at the bottom. * @param {boolean} left - Indicates whether the crosshair is positioned at the left. * @param {number} tipX - The x-coordinate of the crosshair tip. * @param {number} tipY - The y-coordinate of the crosshair tip. * @returns {string} - The direction of the crosshair ('Top', 'Bottom', 'Left', 'Right', 'Center'). */ export declare function findCrosshairDirection(rX: number, rY: number, rect: Rect, arrowLocation: ChartLocation, arrowPadding: number, top: boolean, bottom: boolean, left: boolean, tipX: number, tipY: number): string; /** * Checks if the provided coordinates are within the bounds of the rectangle. * * @param {number} x - The x-coordinate to check. * @param {number} y - The y-coordinate to check. * @param {Rect} bounds - The bounding rectangle. * @param {number} width - The width of the area to include in the bounds check. * @param {number} height - The height of the area to include in the bounds check. * @returns {boolean} - Returns true if the coordinates are within the bounds; otherwise, false. */ export declare function withInBounds(x: number, y: number, bounds: Rect, width?: number, height?: number): boolean; /** * Gets the x-coordinate value for a given point value on the axis. * * @param {number} value - The point value. * @param {number} size - The size of the axis. * @param {Axis} axis - The axis. * @returns {number} - Returns the x-coordinate value. */ export declare function getValueXByPoint(value: number, size: number, axis: Axis): number; /** * Gets the y-coordinate value for a given point value on the axis. * * @param {number} value - The point value. * @param {number} size - The size of the axis. * @param {Axis} axis - The axis. * @returns {number} - Returns the y-coordinate value. */ export declare function getValueYByPoint(value: number, size: number, axis: Axis): number; /** * Finds the clip rectangle for a series. * * @param {Series} series - The series for which to find the clip rectangle. * @param {boolean} isCanvas - Indicates whether the rendering is on a canvas. * @returns {void} */ export declare function findClipRect(series: Series, isCanvas?: boolean): void; /** * Converts the first character of a string to lowercase. * * @param {string} str - The string to convert. * @returns {string} The converted string. */ export declare function firstToLowerCase(str: string): string; /** * Gets the transformation of the chart area based on the provided axes and inverted axis state. * * @param {Axis} xAxis - The X-axis of the chart. * @param {Axis} yAxis - The Y-axis of the chart. * @param {boolean} invertedAxis - Indicates whether the chart axis is inverted. * @returns {Rect} The transformed chart area. */ export declare function getTransform(xAxis: Axis, yAxis: Axis, invertedAxis: boolean): Rect; /** * Calculates the minimum points delta between data points on the provided axis. * * @param {Axis | Chart3DAxis} axis - The axis for which to calculate the minimum points delta. * @param {Series[]} seriesCollection - The collection of series in the chart. * @returns {number} The minimum points delta. */ export declare function getMinPointsDelta(axis: Axis | Chart3DAxis, seriesCollection: Series[]): number; /** * Retrieves the animation function based on the specified effect. * * @param {string} effect - The name of the animation effect. * @returns {Function} The animation function corresponding to the effect. */ export declare function getAnimationFunction(effect: string): Function; /** * Linear animation function. * * @param {number} currentTime - The current time of the animation. * @param {number} startValue - The starting value of the animation. * @param {number} endValue - The ending value of the animation. * @param {number} duration - The duration of the animation. * @returns {number} The interpolated value at the current time. * @private */ export declare function linear(currentTime: number, startValue: number, endValue: number, duration: number): number; /** * Animates the marker element. * * @param {Element} element - The marker element to animate. * @param {number} delay - The delay before starting the animation. * @param {number} duration - The duration of the animation. * @param {Series | AccumulationSeries} series - The series associated with the marker. * @param {number} pointIndex - The index of the point in the series. * @param {ChartLocation} point - The location of the point. * @param {boolean} isLabel - Specifies whether the marker is a data label. * @returns {void} */ export declare function markerAnimate(element: Element, delay: number, duration: number, series: Series | AccumulationSeries, pointIndex: number, point: ChartLocation, isLabel: boolean): void; /** * Animates the rectangle element. * * @param {Element} element - The rectangle element to animate. * @param {number} delay - The delay before starting the animation. * @param {number} duration - The duration of the animation. * @param {Rect} currentRect - The current rectangle dimensions. * @param {Rect} previousRect - The previous rectangle dimensions. * @returns {void} */ export declare function animateRectElement(element: Element, delay: number, duration: number, currentRect: Rect, previousRect: Rect): void; /** * Animation after legend click a path. * * @param {Element} element - element to be animated * @param {string} direction - current direction of the path * @param {boolean} redraw - chart redraw * @param {string} previousDirection - previous direction of the path * @param {number} animateDuration - animateDuration of the path * @returns {void} */ export declare function pathAnimation(element: Element, direction: string, redraw: boolean, previousDirection?: string, animateDuration?: number): void; /** * Point based animation in chart series. * * @param {Element} element element to be animated. * @param {string} direction current direction of the path. * @param {boolean} redraw chart redraw. * @param {string} previousDirection previous direction of the path. * @param {number} animateDuration animateDuration of the path. * @param {string} removeDirection removeDirection of the path. * @param {boolean} isSpline gets true for splline series. * @returns {void} */ export declare function animateAddPoints(element: Element, direction: string, redraw: boolean, previousDirection?: string, animateDuration?: number, removeDirection?: string, isSpline?: boolean): void; /** * To append the clip rect element. * * @param {boolean} redraw - chart redraw value. * @param {BaseAttibutes} options - element options. * @param {SvgRenderer} renderer - svg renderer values. * @param {string} clipPath - clipPath of the element. * @returns {Element} - Returns clip rect element. */ export declare function appendClipElement(redraw: boolean, options: BaseAttibutes, renderer: SvgRenderer, clipPath?: string): Element; /** * Triggers the label render event. * * @param {Chart | RangeNavigator | Chart3D} chart - The chart or range navigator instance. * @param {number} tempInterval - The temporary interval value. * @param {string} text - The label text. * @param {FontModel} labelStyle - The style of the label. * @param {Axis | Chart3DAxis} axis - The axis associated with the label. * @returns {void} */ export declare function triggerLabelRender(chart: Chart | RangeNavigator | Chart3D, tempInterval: number, text: string, labelStyle: FontModel, axis: Axis | Chart3DAxis): void; /** * The function used to find whether the range is set. * * @param {Axis | Chart3DAxis} axis - The axis to check. * @returns {boolean} - It returns true if the axis range is set otherwise false. * @private */ export declare function setRange(axis: Axis | Chart3DAxis): boolean; /** * Checks if zooming is enabled for the axis. * * @param {Axis} axis - The axis to check for zooming. * @returns {boolean} - Returns true if zooming is enabled for the axis, otherwise false. */ export declare function isZoomSet(axis: Axis): boolean; /** * Calculates the actual desired intervals count based on the available size and axis. * * @param {Size} availableSize - The available size for rendering. * @param {Axis | Chart3DAxis} axis - The axis for which to calculate the intervals count. * @returns {number} - The actual desired intervals count. */ export declare function getActualDesiredIntervalsCount(availableSize: Size, axis: Axis | Chart3DAxis): number; /** * Animates the template element. * * @param {Element} element - The element to animate. * @param {number} delay - The delay before starting the animation. * @param {number} duration - The duration of the animation. * @param {Effect} name - The name of the animation effect. * @param {boolean} [isRemove] - Indicates whether to remove the element after animation completion. * @returns {void} */ export declare function templateAnimate(element: Element, delay: number, duration: number, name: Effect, isRemove?: boolean): void; /** * Draws a symbol at the specified location. * * @param {ChartLocation} location - The location to draw the symbol. * @param {string} shape - The shape of the symbol. * @param {Size} size - The size of the symbol. * @param {string} url - The URL of the image symbol. * @param {PathOption} options - The options for drawing the symbol. * @param {string} label - The label for the symbol. * @param {SvgRenderer | CanvasRenderer} [renderer] - The renderer for drawing the symbol. * @param {Rect} [clipRect] - The clipping rectangle. * @param {boolean} [isChartControl] - Indicates whether it is a chart control. * @param {BulletChart} [control] - The bullet chart control. * @returns {Element} - The element representing the drawn symbol. */ export declare function drawSymbol(location: ChartLocation, shape: string, size: Size, url: string, options: PathOption, label: string, renderer?: SvgRenderer | CanvasRenderer, clipRect?: Rect, isChartControl?: boolean, control?: BulletChart): Element; /** * Calculates the shapes based on the specified parameters. * * @param {ChartLocation} location - The location for the shapes. * @param {Size} size - The size of the shapes. * @param {string} shape - The shape of the symbols. * @param {PathOption} options - The options for drawing the shapes. * @param {string} url - The URL of the image symbols. * @param {boolean} [isChart] - Indicates whether it is a chart. * @param {BulletChart} [control] - The bullet chart control. * @returns {IShapes} - The calculated shapes. */ export declare function calculateShapes(location: ChartLocation, size: Size, shape: string, options: PathOption, url: string, isChart?: boolean, control?: BulletChart): IShapes; /** * Gets the location of the rectangle based on the specified start and end locations and the outer rectangle. * * @param {ChartLocation} startLocation - The start location. * @param {ChartLocation} endLocation - The end location. * @param {Rect} outerRect - The outer rectangle. * @returns {Rect} - The location of the rectangle. */ export declare function getRectLocation(startLocation: ChartLocation, endLocation: ChartLocation, outerRect: Rect): Rect; /** * Returns the value constrained within the specified minimum and maximum limits. * * @param {number} value - The input value. * @param {number} min - The minimum limit. * @param {number} max - The maximum limit. * @returns {number} - The constrained value. */ export declare function minMax(value: number, min: number, max: number): number; /** * Retrieves the DOM element with the specified ID. * * @param {string} id - The ID of the element to retrieve. * @returns {Element} - The DOM element. */ export declare function getElement(id: string): Element; /** * Gets the template function from the provided template string or function. * * @param {string | Function} template - The template string or function. * @returns {Function} - The template function. */ export declare function getTemplateFunction(template: string | Function): Function; /** * Renders the accumulation chart data labels using template. * * @param {HTMLElement} childElement - The child element. * @param {AccumulationChart} chart - The accumulation chart instance. * @param {boolean} isTemplate - Defines whether the template is applied or not. * @param {AccPoints[]} points - The accumulation chart points. * @param {IAccTextRenderEventArgs} argsData - The accumulation chart text render event arguments. * @param {AccPoints} [point] - The accumulation chart point. * @param {Element} [datalabelGroup] - The data label group element. * @param {string} [id] - The id of the element. * @param {AccumulationDataLabelSettingsModel} [dataLabel] - The accumulation chart data label settings. * @param {boolean} [redraw] - Defines whether to redraw the chart or not. * @returns {void} */ export declare function accReactTemplate(childElement: HTMLElement, chart: AccumulationChart, isTemplate: boolean, points: AccPoints[], argsData: IAccTextRenderEventArgs, point?: AccPoints, datalabelGroup?: Element, id?: string, dataLabel?: AccumulationDataLabelSettingsModel, redraw?: boolean): void; /** * Renders the chart data labels using template. * * @param {HTMLElement} childElement - The child element. * @param {Chart} chart - The chart instance. * @param {Points} point - The chart point. * @param {Series} series - The chart series. * @param {number} labelIndex - The index of the label. * @param {boolean} [redraw] - Defines whether to redraw the chart or not. * @returns {void} */ export declare function chartReactTemplate(childElement: HTMLElement, chart: Chart, point: Points, series: Series, labelIndex: number, redraw?: boolean): void; /** * Creates a template. * * @param {HTMLElement} childElement - The child element of the template. * @param {number} pointIndex - The index of the point. * @param {string | Function} content - The content of the template. * @param {Chart | AccumulationChart | RangeNavigator} chart - The chart instance. * @param {Points | AccPoints} point - The chart or accumulation point. * @param {Series | AccumulationSeries} series - The chart or accumulation series. * @param {string} dataLabelId - The id of the data label. * @param {number} labelIndex - The index of the label. * @param {IAccTextRenderEventArgs} argsData - The event arguments for text rendering. * @param {boolean} isTemplate - Indicates whether it is a template. * @param {AccPoints[]} points - The accumulation points. * @param {Element} datalabelGroup - The group element of the data label. * @param {string} id - The id of the element. * @param {AccumulationDataLabelSettingsModel} dataLabel - The data label settings. * @param {boolean} redraw - Indicates whether to redraw. * @returns {HTMLElement} - The created template element. * @private */ export declare function createTemplate(childElement: HTMLElement, pointIndex: number, content: string | Function, chart: Chart | AccumulationChart | RangeNavigator, point?: Points | AccPoints, series?: Series | AccumulationSeries, dataLabelId?: string, labelIndex?: number, argsData?: IAccTextRenderEventArgs, isTemplate?: boolean, points?: AccPoints[], datalabelGroup?: Element, id?: string, dataLabel?: AccumulationDataLabelSettingsModel, redraw?: boolean): HTMLElement; /** * Gets the font style. * * @param {FontModel} font - The font settings. * @param {FontModel} themeFontStyle - The theme font settings. * @returns {string} - The font style. * @private */ export declare function getFontStyle(font: FontModel, themeFontStyle: FontModel): string; /** * Measures the bounding rectangle of an HTML element. * * @param {HTMLElement} element - The HTML element to measure. * @param {boolean} redraw - Indicates whether to redraw. * @param {boolean} isReactCallback - Indicates whether it's a React callback. * @returns {ClientRect} - The bounding rectangle of the element. * @private */ export declare function measureElementRect(element: HTMLElement, redraw?: boolean, isReactCallback?: boolean): ClientRect; /** * Finds an element in a NodeList based on its id. * * @param {NodeList} elements - The NodeList to search. * @param {string} id - The id of the element to find. * @returns {Element} - The found element. * @private */ export declare function findlElement(elements: NodeList, id: string): Element; /** * Gets the point on the chart based on the provided coordinates and axes. * * @param {number} x - The x-coordinate of the point. * @param {number} y - The y-coordinate of the point. * @param {Axis} xAxis - The x-axis of the chart. * @param {Axis} yAxis - The y-axis of the chart. * @param {boolean} isInverted - Indicates whether the chart is inverted. * @returns {ChartLocation} - The calculated point. * @private */ export declare function getPoint(x: number, y: number, xAxis: Axis, yAxis: Axis, isInverted?: boolean): ChartLocation; /** * Appends an element to a parent element. * * @param {Element} child - The child element to be appended. * @param {Element} parent - The parent element to which the child element will be appended. * @param {boolean} [redraw=false] - A boolean value indicating whether to redraw. Default is false. * @param {boolean} [animate=false] - A boolean value indicating whether to animate the appending operation. Default is false. * @param {string} [x='x'] - The x-coordinate for the position of the child element. Default is 'x'. * @param {string} [y='y'] - The y-coordinate for the position of the child element. Default is 'y'. * @param {number} duration - duration of the animation * @returns {void} */ export declare function appendElement(child: Element, parent: Element, redraw?: boolean, animate?: boolean, x?: string, y?: string, duration?: number): void; /** * Method to append child element. * * @param {boolean} isCanvas - canvas mode value * @param {Element | HTMLElement} parent - parent element * @param {Element | HTMLElement} childElement - childElement element * @param {boolean} redraw - chart redraw value * @param {boolean} isAnimate - animation value * @param {string} x - x position * @param {string} y - y position * @param {ChartLocation} start - start location value * @param {string} direction - direction of the element * @param {boolean} forceAnimate - forceAnimate * @param {boolean} isRect - isRect * @param {Rect} previousRect - previousRect * @param {number} animateDuration - duration of the animation * @param {boolean} scatterElement - The scatter element. * @param {number} angle - The angle of the element. * @param {ChartLocation} currentTransform - The current transform of the element. * @param {string} previousTranslate - The previous translate of the element. * @returns {void} * @private */ export declare function appendChildElement(isCanvas: boolean, parent: Element | HTMLElement, childElement: Element | HTMLElement, redraw?: boolean, isAnimate?: boolean, x?: string, y?: string, start?: ChartLocation, direction?: string, forceAnimate?: boolean, isRect?: boolean, previousRect?: Rect, animateDuration?: number, scatterElement?: boolean, angle?: number, currentTransform?: ChartLocation, previousTranslate?: string): void; /** * Calculates the location of the dragged rectangle. * * @param {number} x1 - The x-coordinate of the starting point. * @param {number} y1 - The y-coordinate of the starting point. * @param {number} x2 - The x-coordinate of the ending point. * @param {number} y2 - The y-coordinate of the ending point. * @param {Rect} outerRect - The outer rectangle containing the dragged rectangle. * @returns {Rect} - The location of the dragged rectangle. * @private */ export declare function getDraggedRectLocation(x1: number, y1: number, x2: number, y2: number, outerRect: Rect): Rect; /** * Checks if a value is within bounds defined by minimum and maximum values. * * @param {number} start - The start value. * @param {number} size - The size of the value. * @param {number} min - The minimum value of the bound. * @param {number} max - The maximum value of the bound. * @returns {number} - The adjusted value within the bounds. * @private */ export declare function checkBounds(start: number, size: number, min: number, max: number): number; /** * Retrieves label text for a data point. * * @param {Points} currentPoint - The current data point. * @param {Series} series - The series to which the data point belongs. * @param {Chart} chart - The chart instance. * @returns {string[]} - The label text. * @private */ export declare function getLabelText(currentPoint: Points, series: Series, chart: Chart): string[]; /** * Stops the specified timer. * * @param {number} timer - The timer to stop. * @returns {void} */ export declare function stopTimer(timer: number): void; /** * Checks if the specified rect collides with any of the rect in the collection within the given clip rect. * * @param {Rect} rect - The rect to check for collision. * @param {Rect[]} collections - The collection of rect to check against. * @param {Rect} clipRect - The clip rect. * @returns {boolean} - Returns true if collision occurs; otherwise, false. */ export declare function isCollide(rect: Rect, collections: Rect[], clipRect: Rect): boolean; /** * Checks if the specified rect overlap each other. * * @param {Rect} currentRect - The first rect. * @param {Rect} rect - The second rect. * @returns {boolean} - Returns true if the rect overlap; otherwise, false. */ export declare function isOverlap(currentRect: Rect, rect: Rect): boolean; /** * Checks if the specified rect is completely contained within another rect. * * @param {Rect} currentRect - The rect to check if it's contained. * @param {Rect} rect - The containing rect. * @returns {boolean} - Returns true if the specified rect is completely contained within the containing rect; otherwise, false. */ export declare function containsRect(currentRect: Rect, rect: Rect): boolean; /** * Calculates the rect based on the specified location, text size, and margin. * * @param {ChartLocation} location - The location of the rect. * @param {Size} textSize - The size of the text. * @param {MarginModel} margin - The margin to be applied around the text. * @returns {Rect} - Returns the calculated rect. */ export declare function calculateRect(location: ChartLocation, textSize: Size, margin: MarginModel): Rect; /** * Converts the color value to hexadecimal code. * * @param {ColorValue} value - The color value to convert. * @returns {string} - Returns the hexadecimal representation of the color. */ export declare function convertToHexCode(value: ColorValue): string; /** * Converts a component value to its hexadecimal representation. * * @param {number} value - The component value to convert. * @returns {string} - Returns the hexadecimal representation of the component. */ export declare function componentToHex(value: number): string; /** * Converts a hexadecimal color code to its RedGreenBlue representation. * * @param {string} hex - The hexadecimal color code to convert. * @returns {ColorValue} - Returns the RedGreenBlue representation of the hexadecimal color code. */ export declare function convertHexToColor(hex: string): ColorValue; /** * Converts a color name to its corresponding hexadecimal color code. * * @param {string} color - The color name to convert. * @returns {string} - Returns the hexadecimal color code. */ export declare function colorNameToHex(color: string): string; /** * Checks if the provided color string is in a valid format. * * @param {string} color - The color string to check. * @returns {boolean} - Returns true if the color string is in a valid format, otherwise returns false. */ export declare function checkColorFormat(color: string): boolean; /** * Gets the color with adjusted saturation. * * @param {string} color - The input color string. * @param {number} factor - The factor by which to adjust the saturation. * @returns {string} - The modified color string. */ export declare function getSaturationColor(color: string, factor: number): string; /** * Applies a lightness adjustment to the given color. * * @param {string} color - The input color string. * @param {number} value - The value by which to adjust the lightness. * @returns {string} - The modified color string. */ export declare function applyZLight(color: string, value: number): string; /** * Calculates the median value of an array of numbers. * * @param {number[]} values - The array of numbers. * @returns {number} - The median value. */ export declare function getMedian(values: number[]): number; /** * Calculates the legend shapes based on the provided parameters. * * @param {ChartLocation} location - The location to position the legend shape. * @param {Size} size - The size of the legend shape. * @param {string} shape - The shape of the legend. * @param {PathOption} options - The options for drawing the legend shape. * @returns {IShapes} - The calculated legend shape. */ export declare function calculateLegendShapes(location: ChartLocation, size: Size, shape: string, options: PathOption): IShapes; /** * Trims the text to fit within the specified maximum width. * * @param {number} maxWidth - The maximum width for the text. * @param {string} text - The text to be trimmed. * @param {FontModel} font - The font settings for the text. * @param {boolean} isRtlEnabled - Indicates whether right-to-left text rendering is enabled. * @param {FontModel} [themeFontStyle] - The font style to be used for theme-specific settings. * @returns {string} - The trimmed text. */ export declare function textTrim(maxWidth: number, text: string, font: FontModel, isRtlEnabled: boolean, themeFontStyle?: FontModel): string; /** * Trims the text and performs line breaks based on the maximum width and font settings. * * @param {number} maxWidth - The maximum width allowed for the text. * @param {string} text - The text to be trimmed. * @param {FontModel} font - The font settings for the text. * @param {FontModel} [themeFontStyle] - Optional. The font style based on the theme. * @returns {string[]} - An array of trimmed text lines with line breaks. */ export declare function lineBreakLabelTrim(maxWidth: number, text: string, font: FontModel, themeFontStyle?: FontModel): string[]; /** * Converts a string value to a number, considering the container size for percentage values. * * @param {string} value - The string value to convert to a number. * @param {number} containerSize - The size of the container, used for percentage values. * @returns {number} - The converted numeric value. */ export declare function stringToNumber(value: string, containerSize: number): number; /** * Redraws the SVG or canvas element based on the provided options. * * @param {boolean} redraw - Specifies whether to redraw the element. * @param {string} id - The id of the element to redraw. * @param {PathAttributes | RectAttributes | CircleAttributes} [options] - The attributes of the element to redraw. * @param {SvgRenderer | CanvasRenderer} [renderer] - The renderer to use for redrawing. * @returns {Element} - The redrawn element. */ export declare function redrawElement(redraw: boolean, id: string, options?: PathAttributes | RectAttributes | CircleAttributes, renderer?: SvgRenderer | CanvasRenderer): Element; /** * Animates the redrawn element from its start to end location over a specified duration. * * @param {Element | HTMLElement} element - The element to animate. * @param {number} duration - The duration of the animation in milliseconds. * @param {ChartLocation} start - The start location of the element. * @param {ChartLocation} end - The end location of the element. * @param {string} [x='x'] - The attribute representing the horizontal position of the element. * @param {string} [y='y'] - The attribute representing the vertical position of the element. * @param {number} [angle=0] - The angle of rotation for the element. * @param {ChartLocation} [newTransform=new ChartLocation(0, 0)] - The new transform location of the element. * @param {ChartLocation} [previousTransform=new ChartLocation(0, 0)] - The previous transform location of the element. * @param {boolean} [pointAnimation] - Specifies the animation based on points. * @returns {void} */ export declare function animateRedrawElement(element: Element | HTMLElement, duration: number, start: ChartLocation, end: ChartLocation, x?: string, y?: string, angle?: number, newTransform?: ChartLocation, previousTransform?: ChartLocation, pointAnimation?: boolean): void; /** * Animates the text content of an HTML element from a start value to an end value over a specified duration. * * @param {HTMLElement} element - The HTML element whose text content will be animated. * @param {number} duration - The duration of the animation in milliseconds. * @param {number} start - The starting value of the animation. * @param {number} end - The ending value of the animation. * @param {string} customLabelFormat - A custom format string that includes a placeholder for the value. * @returns {void} */ export declare function animateTextElement(element: HTMLElement, duration: number, start: number, end: number, customLabelFormat: string): void; /** * Renders a text element using the specified renderer and options. * * @param {SvgRenderer | CanvasRenderer} renderer - The renderer used for rendering. * @param {TextOption} option - The options for the text element. * @param {FontModel} font - The font settings for the text. * @param {string} color - The color of the text. * @param {HTMLElement | Element} parent - The parent element to which the text element is appended. * @param {boolean} [isMinus=false] - Indicates whether the text represents a negative value. * @param {boolean} [redraw] - Indicates whether to redraw the element. * @param {boolean} [isAnimate] - Indicates whether to animate the element. * @param {boolean} [forceAnimate=false] - Indicates whether to force animation. * @param {number} [animateDuration] - The duration of the animation in milliseconds. * @param {Rect} [seriesClipRect] - The clipping rectangle for the series. * @param {Size} [labelSize] - The size of the label. * @param {boolean} [isRotatedLabelIntersect] - Indicates whether rotated labels intersect. * @param {boolean} [isCanvas] - Indicates whether the rendering is done on a canvas. * @param {boolean} [isDataLabelWrap] - Indicates whether data labels are wrapped. * @param {FontModel} [themeFontStyle] - The font settings based on the theme. * @param {ChartLocation} [transform] - The location to transform the text element. * @param {string} [previousTransform] - The previous transform of the text element. * @returns {Element} - The rendered text element. */ export declare function textElement(renderer: SvgRenderer | CanvasRenderer, option: TextOption, font: FontModel, color: string, parent: HTMLElement | Element, isMinus?: boolean, redraw?: boolean, isAnimate?: boolean, forceAnimate?: boolean, animateDuration?: number, seriesClipRect?: Rect, labelSize?: Size, isRotatedLabelIntersect?: boolean, isCanvas?: boolean, isDataLabelWrap?: boolean, themeFontStyle?: FontModel, transform?: ChartLocation, previousTransform?: string): Element; /** * Calculates the size of the chart. * * @param {Chart | AccumulationChart | RangeNavigator | StockChart | Chart3D | CircularChart3D} chart - The chart for which to calculate the size. * @returns {void} */ export declare function calculateSize(chart: Chart | AccumulationChart | RangeNavigator | StockChart | Chart3D | CircularChart3D): void; /** * Creates an SVG element for the specified chart or chart element. * * @param {Chart | AccumulationChart | RangeNavigator | Chart3D | CircularChart3D} chart - The chart or chart element for which to create the SVG element. * @returns {void} */ export declare function createSvg(chart: Chart | AccumulationChart | RangeNavigator | Chart3D | CircularChart3D): void; /** * Gets the title text with specified style and width, and supports right-to-left rendering. * * @param {string} title - The title text. * @param {FontModel} style - The font style for the title. * @param {number} width - The width available for rendering the title. * @param {boolean} isRtlEnabled - Specifies whether right-to-left rendering is enabled. * @param {FontModel} [themeFontStyle] - The font style used for theme rendering. * @returns {string[]} An array of strings containing the title text with line breaks if needed. */ export declare function getTitle(title: string, style: FontModel, width: number, isRtlEnabled: boolean, themeFontStyle?: FontModel): string[]; /** * Calculates the x-coordinate position for rendering the title text within the specified rect. * * @param {Rect} rect - The rect within which the title text is to be rendered. * @param {FontModel} titleStyle - The font style used for rendering the title text. * @returns {number} The x-coordinate position for rendering the title text. */ export declare function titlePositionX(rect: Rect, titleStyle: FontModel): number; /** * Wraps the input text into multiple lines based on the specified maximum width and font style. * * @param {string} currentLabel - The text to be wrapped. * @param {number} maximumWidth - The maximum width allowed for each line of text. * @param {FontModel} font - The font style used for rendering the text. * @param {boolean} isRtlEnabled - Specifies whether right-to-left text direction is enabled. * @param {boolean} [wrapAnyWhere=false] - Indicates whether the text can be wrapped at any position. * @param {boolean} [clip=false] - Specifies whether text exceeding the maximum width should be clipped. * @param {FontModel} [themeFontStyle] - The font style used as the base for the text wrapping operation. * @param {number} [maximumLabelHeight] - The total height available for the wrapped text. * @returns {string[]} An array of strings representing the wrapped lines of text. */ export declare function textWrap(currentLabel: string, maximumWidth: number, font: FontModel, isRtlEnabled: boolean, wrapAnyWhere?: boolean, clip?: boolean, themeFontStyle?: FontModel, maximumLabelHeight?: number): string[]; /** * Wraps the input text into multiple lines, allowing wrapping at any position. * * @param {string} currentLabel - The text to be wrapped. * @param {number} maximumWidth - The maximum width allowed for each line of text. * @param {FontMode