scichart
Version:
Fast WebGL JavaScript Charting Library and Framework
321 lines (320 loc) • 14.1 kB
TypeScript
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;
}