UNPKG

scichart

Version:

Fast WebGL JavaScript Charting Library and Framework

321 lines (320 loc) 14.1 kB
import { Point } from "../../../Core/Point"; import { EChart2DModifierType } from "../../../types/ChartModifierType"; import { EAngularAxisLabelPlacement, ERadialAxisLabelPlacement } from "../../../types/LabelPlacement"; import { EModifierType } from "../../../types/ModifierType"; import { EMousePosition } from "../../../types/MousePosition"; import { SeriesInfo } from "../../Model/ChartData/SeriesInfo"; import { IThemeProvider } from "../../Themes/IThemeProvider"; import { CursorTooltipSvgAnnotation } from "../../Visuals/Annotations/CursorTooltipSvgAnnotation"; import { ITooltipable } from "../../Visuals/Annotations/ITooltipable"; import { LineAnnotation } from "../../Visuals/Annotations/LineAnnotation"; import { NativeTextAnnotation } from "../../Visuals/Annotations/NativeTextAnnotation"; import { PolarArcAnnotation } from "../../Visuals/Annotations/PolarArcAnnotation"; import { HitTestInfo } from "../../Visuals/RenderableSeries/HitTest/HitTestInfo"; import { IRenderableSeries } from "../../Visuals/RenderableSeries/IRenderableSeries"; import { ChartModifierBase2D, IChartModifierBaseOptions } from "../ChartModifierBase2D"; import { TCursorTooltipDataTemplate, TCursorTooltipSvgTemplate } from "../CursorModifier"; import { ModifierMouseArgs } from "../ModifierMouseArgs"; /** * Optional parameters used to configure a {@link PolarCursorModifier} at construct time */ export interface IPolarCursorModifierOptions extends IChartModifierBaseOptions { /** * Set a function which generates the svg for the entire tooltip. Note that the repositioning of the tooltip to keep it within the chart is normally done in this function. * To retain this functionality in your own template function, include the following: * ```ts * // valuesWithLabels is the result of the tooltipDataTemplate function, which is the text content of the tooltip as an array of strings * const { width, height } = calcTooltipSize(valuesWithLabels); * // this calculates and sets svgAnnotation.xCoordShift and svgAnnotation.yCoordShift. Do not set x1 or y1 at this point. * adjustTooltipPosition(width, height, svgAnnotation); * ``` */ tooltipSvgTemplate?: TCursorTooltipSvgTemplate | string; /** Sets the crosshair stroke color as an HTML Color code */ lineColor?: string; /** * Sets the crosshair line stroke thickness */ lineThickness?: number; /** Sets the crosshair line dash array */ lineDashArray?: number[]; /** Sets the tooltip container background color as an HTML Color code */ tooltipContainerBackground?: string; /** Sets the tooltip text color as an HTML Color code */ tooltipTextStroke?: string; /** Sets the tooltip shadow color as an HTML Color code */ tooltipShadow?: string; /** Sets whether we should display the tooltip. Default is false */ showTooltip?: boolean; /** Sets whether we should display axis labels. Default is true */ showAxisLabels?: boolean; /** Sets both axes label text color as an HTML Color code */ axisLabelStroke?: string; /** Sets both axes label fill as an HTML Color code. */ axisLabelFill?: string; /** Sets angular axis label placement */ angularAxisLabelPlacement?: EAngularAxisLabelPlacement; /** Sets radial axis label placement */ radialAxisLabelPlacement?: ERadialAxisLabelPlacement; /** Sets the xAxis label text color as an HTML Color code */ xAxisLabelStroke?: string; /** Sets the xAxis label fill as an HTML Color code. */ xAxisLabelFill?: string; /** Sets the yAxis label text color as an HTML Color code */ yAxisLabelStroke?: string; /** Sets the yAxis label fill as an HTML Color code. */ yAxisLabelFill?: string; /** Sets the template for the legend */ tooltipLegendTemplate?: TCursorTooltipSvgTemplate | string; /** Sets the legend X offset */ tooltipLegendOffsetX?: number; /** Sets the legend Y offset */ tooltipLegendOffsetY?: number; /** Sets the tooltipDataTemplate, which allows to customize content for the tooltip */ tooltipDataTemplate?: TCursorTooltipDataTemplate | string; /** Sets the parent div element reference or id for the Tooltip */ placementDivId?: string; /** Sets whether we should display the X Line. Default is true */ showRadialLine?: boolean; /** Sets whether we should display the Y Line. Default is true */ showCircularLine?: boolean; /** * If this is set greater than the default of zero, the tooltip will only show values for points in this radius, rather than all points on the vertical line */ hitTestRadius?: number; } /** * The PolarCursorModifier provides tooltip and cursor behavior on a 2D {@link SciChartPolarSurface} * within SciChart - High Performance {@link https://www.scichart.com/javascript-chart-features | JavaScript Charts} * @remarks * * To apply the PolarCursorModifier to a {@link SciChartPolarSurface} and add tooltip behavior, * use the following code: * * ```ts * const sciChartSurface: SciChartPolarSurface; * sciChartSurface.chartModifiers.add(new PolarCursorModifier()); * ``` * * --- * 📚 Docs: {@link https://www.scichart.com/documentation/js/v4/2d-charts/chart-modifier-api/polar-modifiers/polar-cursor-modifier/} */ export declare class PolarCursorModifier extends ChartModifierBase2D implements ITooltipable { readonly type = EChart2DModifierType.PolarCursor; /** * Get or set a function which generates the svg for the entire tooltip. Note that the repositioning of the tooltip to keep it within the chart is normally done in this function. * To retain this functionality in your own template function, include the following: * ```ts * // valuesWithLabels is the result of the tooltipDataTemplate function, which is the text content of the tooltip as an array of strings * const { width, height } = calcTooltipSize(valuesWithLabels); * // this calculates and sets svgAnnotation.xCoordShift and svgAnnotation.yCoordShift. Do not set x1 or y1 at this point. * adjustTooltipPosition(width, height, svgAnnotation); * ``` */ tooltipSvgTemplate?: TCursorTooltipSvgTemplate; /** * Gets or sets the crosshair line stroke thickness */ lineThickness: number; /** * Gets or sets the crosshair line dash array */ lineDashArray: number[]; /** * Gets or sets the tooltip container background color as an HTML Color code */ tooltipContainerBackground: string; /** * Gets or sets the tooltip text color as an HTML Color code */ tooltipTextStroke: string; /** * Gets or sets whether we should display the tooltip. Default is false */ showTooltip: boolean; /** * Gets or sets both axis label text color as an HTML Color code */ axisLabelStroke: string; /** * Gets or sets both axis label fill as an HTML Color code. */ axisLabelFill: string; /** * Gets or sets the xAxis label text color as an HTML Color code */ xAxisLabelStroke: string | undefined; /** * Gets or sets the xAxis label fill as an HTML Color code. */ xAxisLabelFill: string | undefined; /** * Gets or sets the xAxis label text color as an HTML Color code */ yAxisLabelStroke: string | undefined; /** * Gets or sets the yAxis label fill as an HTML Color code. */ yAxisLabelFill: string | undefined; /** * Gets or sets the template for the legend */ tooltipLegendTemplate?: TCursorTooltipSvgTemplate; /** * Gets or sets the legend X offset */ tooltipLegendOffsetX: number; /** * Gets or sets the legend Y offset */ tooltipLegendOffsetY: number; /** * If this is set greater than the default of zero, the tooltip will only show values for points in this radius, rather than all points on the vertical line */ hitTestRadius: number; protected radialAnnotation: LineAnnotation | undefined; protected radialAxisLabelAnnotation: NativeTextAnnotation | undefined; protected circularAnnotation: PolarArcAnnotation | undefined; protected angularAxisLabelAnnotation: NativeTextAnnotation | undefined; protected tooltipAnnotation: CursorTooltipSvgAnnotation | undefined; protected mousePosition: EMousePosition; protected lineColorProperty: string; protected tooltipShadowProperty: string; protected tooltipDataTemplateProperty?: TCursorTooltipDataTemplate | undefined; protected placementDivIdProperty: string | undefined; protected showRadialLineProperty: boolean; protected showCircularLineProperty: boolean; protected showAxisLabelsProperty: boolean; protected angularAxisLabelPlacementProperty: EAngularAxisLabelPlacement; protected radialAxisLabelPlacementProperty: ERadialAxisLabelPlacement; /** * Creates an instance of the PolarCursorModifier * * If number of renderable series is more then 10 and showTooltip enabled consider passing {@link TCursorTooltipDataTemplate} or {@link TPolarCursorTooltipSvgTemplate} to reduce the output for the tooltip * * @param options Optional parameters {@link IPolarCursorModifierOptions} used to configure the modifier * * --- * 📚 Docs: {@link https://www.scichart.com/documentation/js/v4/2d-charts/chart-modifier-api/polar-modifiers/polar-cursor-modifier/} */ constructor(options?: IPolarCursorModifierOptions); /** @inheritDoc */ get modifierType(): EModifierType; /** @inheritDoc */ applyTheme(themeProvider: IThemeProvider): void; /** @inheritDoc */ onAttach(): void; /** @inheritDoc */ onDetach(): void; /** @inheritDoc */ onAttachSeries(rs: IRenderableSeries): void; /** @inheritDoc */ onDetachSeries(rs: IRenderableSeries): void; /** @inheritDoc */ modifierMouseMove(args: ModifierMouseArgs): void; /** @inheritDoc */ modifierMouseLeave(args: ModifierMouseArgs): void; /** @inheritDoc */ onParentSurfaceRendered(): void; /** * Gets or sets the crosshair line Stroke color as an HTML Color code */ get lineColor(): string; /** * Gets or sets the crosshair line Stroke color as an HTML Color code */ set lineColor(value: string); /** * Gets or sets the tooltip shadow color as an HTML Color code */ get tooltipShadow(): string; /** * Gets or sets the tooltip shadow color as an HTML Color code */ set tooltipShadow(value: string); /** * Gets or sets whether we should display the X Line. Default is true */ get showRadialLine(): boolean; /** * Gets or sets whether we should display the X Line. Default is true */ set showRadialLine(value: boolean); /** * Gets or sets whether we should display the Y Line. Default is true */ get showCircularLine(): boolean; /** * Gets or sets whether we should display the Y Line. Default is true */ set showCircularLine(value: boolean); /** * Gets or sets whether we should display the Axis Labels. Default is true */ get showAxisLabels(): boolean; /** * Gets or sets whether we should display the Axis Labels. Default is true */ set showAxisLabels(value: boolean); /** * Gets or sets angular axis label placement */ get angularAxisLabelPlacement(): EAngularAxisLabelPlacement; /** * Gets or sets angular axis label placement */ set angularAxisLabelPlacement(value: EAngularAxisLabelPlacement); /** * Gets or sets radial axis label placement */ get radialAxisLabelPlacement(): ERadialAxisLabelPlacement; /** * Gets or sets radial axis label placement */ set radialAxisLabelPlacement(value: ERadialAxisLabelPlacement); /** * Gets or sets the parent div element reference or id for the Tooltip */ get placementDivId(): string; /** * Gets or sets the parent div element reference or id for the Tooltip */ set placementDivId(value: string); /** @inheritDoc */ includeSeries(series: IRenderableSeries, isIncluded: boolean): boolean; /** * Gets or sets the tooltipDataTemplate, which allows to customize content for the tooltip */ get tooltipDataTemplate(): TCursorTooltipDataTemplate; set tooltipDataTemplate(value: TCursorTooltipDataTemplate); /** * Override hitTestRenderableSeries and add a custom logic here * @param rs * @param mousePoint */ hitTestRenderableSeries(rs: IRenderableSeries, mousePoint: Point): HitTestInfo; /** * Returns current mouse position */ getMousePosition(): EMousePosition; /** @inheritDoc */ toJSON(): { type: string; options: Required<Omit<IChartModifierBaseOptions, never>>; }; protected notifyPropertyChanged(propertyName: string): void; protected getSeriesInfos(): SeriesInfo[]; protected update(): void; protected newLineAnnotation(axisLabelFill: string, axisLabelStroke: string): LineAnnotation; protected newNativeTextAnnotation(axisLabelFill: string, axisLabelStroke: string): NativeTextAnnotation; protected newArcAnnotation(axisLabelFill: string, axisLabelStroke: string): PolarArcAnnotation; protected isVerticalChart(): boolean; private handleAddRadialLine; private handleRemoveRadialLine; private handleAddRadialLabel; private handleRemoveRadialLabel; private handleAddCircularLine; private handleRemoveCircularLine; private handleAddCircularLabel; private handleRemoveCircularLabel; }