scichart
Version:
Fast WebGL JavaScript Charting Library and Framework
779 lines (778 loc) • 40.1 kB
JavaScript
"use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
if (typeof b !== "function" && b !== null)
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
exports.PolarCursorModifier = void 0;
var classFactory_1 = require("../../../Builder/classFactory");
var Thickness_1 = require("../../../Core/Thickness");
var AnchorPoint_1 = require("../../../types/AnchorPoint");
var BaseType_1 = require("../../../types/BaseType");
var ChartModifierType_1 = require("../../../types/ChartModifierType");
var LabelPlacement_1 = require("../../../types/LabelPlacement");
var ModifierType_1 = require("../../../types/ModifierType");
var MousePosition_1 = require("../../../types/MousePosition");
var translate_1 = require("../../../utils/translate");
var AnnotationBase_1 = require("../../Visuals/Annotations/AnnotationBase");
var AnnotationClippingMode_1 = require("../../../types/AnnotationClippingMode");
var CursorTooltipSvgAnnotation_1 = require("../../Visuals/Annotations/CursorTooltipSvgAnnotation");
var IAnnotation_1 = require("../../Visuals/Annotations/IAnnotation");
var LineAnnotation_1 = require("../../Visuals/Annotations/LineAnnotation");
var NativeTextAnnotation_1 = require("../../Visuals/Annotations/NativeTextAnnotation");
var PolarArcAnnotation_1 = require("../../Visuals/Annotations/PolarArcAnnotation");
var labelHelper_1 = require("../../Visuals/Helpers/labelHelper");
var SciChartSurfaceBase_1 = require("../../Visuals/SciChartSurfaceBase");
var DpiHelper_1 = require("../../Visuals/TextureManager/DpiHelper");
var ChartModifierBase2D_1 = require("../ChartModifierBase2D");
var constants_1 = require("../constants");
var CursorModifier_1 = require("../CursorModifier");
/**
* 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/}
*/
var PolarCursorModifier = /** @class */ (function (_super) {
__extends(PolarCursorModifier, _super);
/**
* 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/}
*/
function PolarCursorModifier(options) {
var _this = this;
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0;
_this = _super.call(this, options) || this;
_this.type = ChartModifierType_1.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);
* ```
*/
_this.tooltipSvgTemplate = CursorModifier_1.defaultCursorTooltipSvgTemplate;
/**
* Gets or sets the crosshair line stroke thickness
*/
_this.lineThickness = 2;
/**
* Gets or sets the crosshair line dash array
*/
_this.lineDashArray = [];
/**
* Gets or sets the tooltip container background color as an HTML Color code
*/
_this.tooltipContainerBackground = "#228B22";
/**
* Gets or sets the tooltip text color as an HTML Color code
*/
_this.tooltipTextStroke = "#fff";
/**
* Gets or sets whether we should display the tooltip. Default is false
*/
_this.showTooltip = false;
/**
* Gets or sets both axis label text color as an HTML Color code
*/
_this.axisLabelStroke = "#fff";
/**
* Gets or sets both axis label fill as an HTML Color code.
*/
_this.axisLabelFill = "#228B22";
/**
* Gets or sets the xAxis label text color as an HTML Color code
*/
_this.xAxisLabelStroke = undefined;
/**
* Gets or sets the xAxis label fill as an HTML Color code.
*/
_this.xAxisLabelFill = undefined;
/**
* Gets or sets the xAxis label text color as an HTML Color code
*/
_this.yAxisLabelStroke = undefined;
/**
* Gets or sets the yAxis label fill as an HTML Color code.
*/
_this.yAxisLabelFill = undefined;
/**
* Gets or sets the legend X offset
*/
_this.tooltipLegendOffsetX = 0;
/**
* Gets or sets the legend Y offset
*/
_this.tooltipLegendOffsetY = 0;
/**
* 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
*/
_this.hitTestRadius = 0;
_this.mousePosition = MousePosition_1.EMousePosition.OutOfCanvas;
_this.lineColorProperty = SciChartSurfaceBase_1.SciChartSurfaceBase.DEFAULT_THEME.cursorLineBrush;
_this.tooltipShadowProperty = SciChartSurfaceBase_1.SciChartSurfaceBase.DEFAULT_THEME.shadowEffectColor;
_this.showRadialLineProperty = true;
_this.showCircularLineProperty = true;
_this.showAxisLabelsProperty = true;
_this.angularAxisLabelPlacementProperty = LabelPlacement_1.EAngularAxisLabelPlacement.Outer;
_this.radialAxisLabelPlacementProperty = LabelPlacement_1.ERadialAxisLabelPlacement.Bottom;
if (options === null || options === void 0 ? void 0 : options.tooltipSvgTemplate) {
if (typeof options.tooltipSvgTemplate === "string") {
_this.typeMap.set("tooltipSvgTemplate", options.tooltipSvgTemplate);
// @ts-ignore
options.tooltipSvgTemplate = (0, classFactory_1.getFunction)(BaseType_1.EBaseType.OptionFunction, options.tooltipSvgTemplate);
}
}
_this.tooltipSvgTemplate = (_a = options === null || options === void 0 ? void 0 : options.tooltipSvgTemplate) !== null && _a !== void 0 ? _a : _this.tooltipSvgTemplate;
_this.lineThickness = (_b = options === null || options === void 0 ? void 0 : options.lineThickness) !== null && _b !== void 0 ? _b : _this.lineThickness;
_this.lineDashArray = (_c = options === null || options === void 0 ? void 0 : options.lineDashArray) !== null && _c !== void 0 ? _c : _this.lineDashArray;
_this.lineColor = (_d = options === null || options === void 0 ? void 0 : options.lineColor) !== null && _d !== void 0 ? _d : _this.lineColor;
_this.tooltipContainerBackground = (_e = options === null || options === void 0 ? void 0 : options.tooltipContainerBackground) !== null && _e !== void 0 ? _e : _this.tooltipContainerBackground;
_this.tooltipTextStroke = (_f = options === null || options === void 0 ? void 0 : options.tooltipTextStroke) !== null && _f !== void 0 ? _f : _this.tooltipTextStroke;
_this.tooltipShadow = (_g = options === null || options === void 0 ? void 0 : options.tooltipShadow) !== null && _g !== void 0 ? _g : _this.tooltipShadowProperty;
_this.showTooltip = (_h = options === null || options === void 0 ? void 0 : options.showTooltip) !== null && _h !== void 0 ? _h : _this.showTooltip;
_this.showAxisLabels = (_j = options === null || options === void 0 ? void 0 : options.showAxisLabels) !== null && _j !== void 0 ? _j : _this.showAxisLabels;
_this.axisLabelFill = (_k = options === null || options === void 0 ? void 0 : options.axisLabelFill) !== null && _k !== void 0 ? _k : _this.axisLabelFill;
_this.axisLabelStroke = (_l = options === null || options === void 0 ? void 0 : options.axisLabelStroke) !== null && _l !== void 0 ? _l : _this.axisLabelStroke;
_this.angularAxisLabelPlacement = (_m = options === null || options === void 0 ? void 0 : options.angularAxisLabelPlacement) !== null && _m !== void 0 ? _m : _this.angularAxisLabelPlacementProperty;
_this.radialAxisLabelPlacement = (_o = options === null || options === void 0 ? void 0 : options.radialAxisLabelPlacement) !== null && _o !== void 0 ? _o : _this.radialAxisLabelPlacementProperty;
_this.xAxisLabelStroke = (_p = options === null || options === void 0 ? void 0 : options.xAxisLabelStroke) !== null && _p !== void 0 ? _p : _this.xAxisLabelStroke;
_this.xAxisLabelFill = (_q = options === null || options === void 0 ? void 0 : options.xAxisLabelFill) !== null && _q !== void 0 ? _q : _this.xAxisLabelFill;
_this.yAxisLabelStroke = (_r = options === null || options === void 0 ? void 0 : options.yAxisLabelStroke) !== null && _r !== void 0 ? _r : _this.yAxisLabelStroke;
_this.yAxisLabelFill = (_s = options === null || options === void 0 ? void 0 : options.yAxisLabelFill) !== null && _s !== void 0 ? _s : _this.yAxisLabelFill;
_this.placementDivIdProperty = (_t = options === null || options === void 0 ? void 0 : options.placementDivId) !== null && _t !== void 0 ? _t : _this.placementDivIdProperty;
if (options === null || options === void 0 ? void 0 : options.tooltipLegendTemplate) {
if (typeof options.tooltipLegendTemplate === "string") {
_this.typeMap.set("tooltipLegendTemplate", options.tooltipLegendTemplate);
// @ts-ignore
options.tooltipLegendTemplate = (0, classFactory_1.getFunction)(BaseType_1.EBaseType.OptionFunction, options.tooltipLegendTemplate);
}
}
_this.tooltipLegendTemplate =
(_u = options === null || options === void 0 ? void 0 : options.tooltipLegendTemplate) !== null && _u !== void 0 ? _u : _this.tooltipLegendTemplate;
_this.tooltipLegendOffsetX = (_v = options === null || options === void 0 ? void 0 : options.tooltipLegendOffsetX) !== null && _v !== void 0 ? _v : _this.tooltipLegendOffsetX;
_this.tooltipLegendOffsetY = (_w = options === null || options === void 0 ? void 0 : options.tooltipLegendOffsetY) !== null && _w !== void 0 ? _w : _this.tooltipLegendOffsetY;
if (options === null || options === void 0 ? void 0 : options.tooltipDataTemplate) {
if (typeof options.tooltipDataTemplate === "string") {
_this.typeMap.set("tooltipDataTemplate", options.tooltipDataTemplate);
// @ts-ignore
options.tooltipDataTemplate = (0, classFactory_1.getFunction)(BaseType_1.EBaseType.OptionFunction, options.tooltipDataTemplate);
}
}
_this.tooltipDataTemplateProperty =
(_x = options === null || options === void 0 ? void 0 : options.tooltipDataTemplate) !== null && _x !== void 0 ? _x : _this.tooltipDataTemplateProperty;
_this.showRadialLine = (_y = options === null || options === void 0 ? void 0 : options.showRadialLine) !== null && _y !== void 0 ? _y : _this.showRadialLine;
_this.showCircularLine = (_z = options === null || options === void 0 ? void 0 : options.showCircularLine) !== null && _z !== void 0 ? _z : _this.showCircularLine;
_this.hitTestRadius = (_0 = options === null || options === void 0 ? void 0 : options.hitTestRadius) !== null && _0 !== void 0 ? _0 : _this.hitTestRadius;
return _this;
}
Object.defineProperty(PolarCursorModifier.prototype, "modifierType", {
/** @inheritDoc */
get: function () {
return ModifierType_1.EModifierType.Chart2DPolarModifier;
},
enumerable: false,
configurable: true
});
/** @inheritDoc */
PolarCursorModifier.prototype.applyTheme = function (themeProvider) {
if (!this.testPropertyChanged(constants_1.PROPERTY.CROSSHAIR_STROKE)) {
this.lineColor = themeProvider.cursorLineBrush;
}
if (!this.testPropertyChanged(constants_1.PROPERTY.TOOLTIP_SHADOW)) {
this.tooltipShadow = themeProvider.shadowEffectColor;
}
};
/** @inheritDoc */
PolarCursorModifier.prototype.onAttach = function () {
var _a;
_super.prototype.onAttach.call(this);
if (this.showRadialLine) {
this.handleAddRadialLine();
}
if (this.showCircularLine) {
this.handleAddCircularLine();
}
// repeating logic needed for correct layering of annotations
if (this.showRadialLine) {
this.handleAddRadialLabel();
}
if (this.showCircularLine) {
this.handleAddCircularLabel();
}
this.tooltipAnnotation = new CursorTooltipSvgAnnotation_1.CursorTooltipSvgAnnotation({
cursorModifier: this,
xCoordinateMode: AnnotationBase_1.ECoordinateMode.Pixel,
yCoordinateMode: AnnotationBase_1.ECoordinateMode.Pixel,
tooltipSvgTemplate: (_a = this.tooltipSvgTemplate) !== null && _a !== void 0 ? _a : CursorModifier_1.defaultCursorTooltipSvgTemplate,
containerBackground: this.tooltipContainerBackground,
textStroke: this.tooltipTextStroke,
tooltipLegendTemplate: this.tooltipLegendTemplate,
tooltipLegendOffsetX: this.tooltipLegendOffsetX,
tooltipLegendOffsetY: this.tooltipLegendOffsetY,
xAxisId: this.xAxisId,
yAxisId: this.yAxisId,
placementDivId: this.placementDivId
});
this.parentSurface.modifierAnnotations.add(this.tooltipAnnotation);
};
/** @inheritDoc */
PolarCursorModifier.prototype.onDetach = function () {
_super.prototype.onDetach.call(this);
if (this.radialAnnotation) {
this.handleRemoveRadialLine();
this.handleRemoveRadialLabel();
}
if (this.circularAnnotation) {
this.handleRemoveCircularLine();
this.handleRemoveCircularLabel();
}
this.parentSurface.modifierAnnotations.remove(this.tooltipAnnotation, true);
};
/** @inheritDoc */
PolarCursorModifier.prototype.onAttachSeries = function (rs) {
this.tooltipAnnotation.seriesInfos = this.getSeriesInfos();
};
/** @inheritDoc */
PolarCursorModifier.prototype.onDetachSeries = function (rs) {
this.tooltipAnnotation.seriesInfos = this.getSeriesInfos();
};
/** @inheritDoc */
PolarCursorModifier.prototype.modifierMouseMove = function (args) {
// If this is on a subchart, only respond to events from the active subchart
if (this.parentSurface.isSubSurface && !args.isActiveSubChartEvent)
return;
this.activePointerEvents.set(args.pointerId, args);
_super.prototype.modifierMouseMove.call(this, args);
var translatedMousePoint;
if (!this.mousePoint) {
this.mousePosition = MousePosition_1.EMousePosition.OutOfCanvas;
}
else {
translatedMousePoint = (0, translate_1.translateFromCanvasToSeriesViewRect)(this.mousePoint, this.parentSurface.seriesViewRect);
if (!translatedMousePoint) {
this.mousePosition = MousePosition_1.EMousePosition.AxisArea;
}
else {
this.mousePosition = MousePosition_1.EMousePosition.SeriesArea;
}
}
var isActionAllowed = this.getIsActionAllowed(args);
if (isActionAllowed) {
this.update();
}
};
/** @inheritDoc */
PolarCursorModifier.prototype.modifierMouseLeave = function (args) {
_super.prototype.modifierMouseLeave.call(this, args);
this.mousePosition = MousePosition_1.EMousePosition.OutOfCanvas;
this.update();
};
/** @inheritDoc */
PolarCursorModifier.prototype.onParentSurfaceRendered = function () {
this.update();
};
Object.defineProperty(PolarCursorModifier.prototype, "lineColor", {
/**
* Gets or sets the crosshair line Stroke color as an HTML Color code
*/
get: function () {
return this.lineColorProperty;
},
/**
* Gets or sets the crosshair line Stroke color as an HTML Color code
*/
set: function (value) {
if (this.lineColorProperty !== value) {
this.lineColorProperty = value;
this.notifyPropertyChanged(constants_1.PROPERTY.CROSSHAIR_STROKE);
}
},
enumerable: false,
configurable: true
});
Object.defineProperty(PolarCursorModifier.prototype, "tooltipShadow", {
/**
* Gets or sets the tooltip shadow color as an HTML Color code
*/
get: function () {
return this.tooltipShadowProperty;
},
/**
* Gets or sets the tooltip shadow color as an HTML Color code
*/
set: function (value) {
if (this.tooltipShadowProperty !== value) {
this.tooltipShadowProperty = value;
this.notifyPropertyChanged(constants_1.PROPERTY.TOOLTIP_SHADOW);
}
},
enumerable: false,
configurable: true
});
Object.defineProperty(PolarCursorModifier.prototype, "showRadialLine", {
/**
* Gets or sets whether we should display the X Line. Default is true
*/
get: function () {
return this.showRadialLineProperty;
},
/**
* Gets or sets whether we should display the X Line. Default is true
*/
set: function (value) {
if (this.showRadialLineProperty !== value) {
this.showRadialLineProperty = value;
if (this.showRadialLineProperty && !this.radialAnnotation) {
this.handleAddRadialLine();
this.handleRemoveCircularLabel();
this.handleAddCircularLabel(); // re-add other tooltip on top
this.handleAddRadialLabel();
}
else if (!this.showRadialLineProperty && this.radialAnnotation) {
this.handleRemoveRadialLine();
this.handleRemoveRadialLabel();
}
this.notifyPropertyChanged(constants_1.PROPERTY.X_LINE);
}
},
enumerable: false,
configurable: true
});
Object.defineProperty(PolarCursorModifier.prototype, "showCircularLine", {
/**
* Gets or sets whether we should display the Y Line. Default is true
*/
get: function () {
return this.showCircularLineProperty;
},
/**
* Gets or sets whether we should display the Y Line. Default is true
*/
set: function (value) {
if (this.showCircularLineProperty !== value) {
this.showCircularLineProperty = value;
if (this.showCircularLineProperty && !this.circularAnnotation) {
this.handleAddCircularLine();
this.handleRemoveRadialLabel();
this.handleAddRadialLabel(); // re-add other tooltip on top
this.handleAddCircularLabel();
}
else if (!this.showCircularLineProperty && this.circularAnnotation) {
this.handleRemoveCircularLine();
this.handleRemoveCircularLabel();
}
this.notifyPropertyChanged(constants_1.PROPERTY.Y_LINE);
}
},
enumerable: false,
configurable: true
});
Object.defineProperty(PolarCursorModifier.prototype, "showAxisLabels", {
/**
* Gets or sets whether we should display the Axis Labels. Default is true
*/
get: function () {
return this.showAxisLabelsProperty;
},
/**
* Gets or sets whether we should display the Axis Labels. Default is true
*/
set: function (value) {
if (this.showAxisLabelsProperty !== value) {
this.showAxisLabelsProperty = value;
this.notifyPropertyChanged(constants_1.PROPERTY.AXIS_LABELS);
}
},
enumerable: false,
configurable: true
});
Object.defineProperty(PolarCursorModifier.prototype, "angularAxisLabelPlacement", {
/**
* Gets or sets angular axis label placement
*/
get: function () {
return this.angularAxisLabelPlacementProperty;
},
/**
* Gets or sets angular axis label placement
*/
set: function (value) {
if (this.angularAxisLabelPlacementProperty !== value) {
this.angularAxisLabelPlacementProperty = value;
this.notifyPropertyChanged(constants_1.PROPERTY.ANGULAR_AXIS_LABELS_PLACEMENT);
}
},
enumerable: false,
configurable: true
});
Object.defineProperty(PolarCursorModifier.prototype, "radialAxisLabelPlacement", {
/**
* Gets or sets radial axis label placement
*/
get: function () {
return this.radialAxisLabelPlacementProperty;
},
/**
* Gets or sets radial axis label placement
*/
set: function (value) {
if (this.radialAxisLabelPlacementProperty !== value) {
this.radialAxisLabelPlacementProperty = value;
this.notifyPropertyChanged(constants_1.PROPERTY.RADIAL_AXIS_LABELS_PLACEMENT);
}
},
enumerable: false,
configurable: true
});
Object.defineProperty(PolarCursorModifier.prototype, "placementDivId", {
/**
* Gets or sets the parent div element reference or id for the Tooltip
*/
get: function () {
return this.placementDivIdProperty;
},
/**
* Gets or sets the parent div element reference or id for the Tooltip
*/
set: function (value) {
if (this.placementDivIdProperty !== value) {
this.placementDivIdProperty = value;
this.notifyPropertyChanged(constants_1.PROPERTY.PLACEMENT_DIV_ID);
}
},
enumerable: false,
configurable: true
});
/** @inheritDoc */
PolarCursorModifier.prototype.includeSeries = function (series, isIncluded) {
if (_super.prototype.includeSeries.call(this, series, isIncluded)) {
this.tooltipAnnotation.seriesInfos = this.getSeriesInfos();
return true;
}
return false;
};
Object.defineProperty(PolarCursorModifier.prototype, "tooltipDataTemplate", {
/**
* Gets or sets the tooltipDataTemplate, which allows to customize content for the tooltip
*/
get: function () {
return this.tooltipDataTemplateProperty;
},
set: function (value) {
this.tooltipDataTemplateProperty = value;
this.notifyPropertyChanged(constants_1.PROPERTY.TOOLTIP_DATA_TEMPLATE);
},
enumerable: false,
configurable: true
});
/**
* Override hitTestRenderableSeries and add a custom logic here
* @param rs
* @param mousePoint
*/
PolarCursorModifier.prototype.hitTestRenderableSeries = function (rs, mousePoint) {
if (!mousePoint) {
return undefined;
}
if (this.hitTestRadius <= 0) {
return rs.hitTestProvider.hitTestXSlice(mousePoint.x, mousePoint.y);
}
else {
return rs.hitTestProvider.hitTestDataPoint(mousePoint.x, mousePoint.y, this.hitTestRadius);
}
};
/**
* Returns current mouse position
*/
PolarCursorModifier.prototype.getMousePosition = function () {
return this.mousePosition;
};
/** @inheritDoc */
PolarCursorModifier.prototype.toJSON = function () {
var json = _super.prototype.toJSON.call(this);
var options = {
axisLabelFill: this.axisLabelFill,
axisLabelStroke: this.axisLabelStroke,
angularAxisLabelPlacement: this.angularAxisLabelPlacement,
radialAxisLabelPlacement: this.radialAxisLabelPlacement,
xAxisLabelFill: this.xAxisLabelFill,
xAxisLabelStroke: this.xAxisLabelStroke,
yAxisLabelFill: this.yAxisLabelFill,
yAxisLabelStroke: this.yAxisLabelStroke,
lineColor: this.lineColor,
lineDashArray: this.lineDashArray,
lineThickness: this.lineThickness,
hitTestRadius: this.hitTestRadius,
placementDivId: this.placementDivId,
showAxisLabels: this.showAxisLabels,
showTooltip: this.showTooltip,
showRadialLine: this.showRadialLine,
showCircularLine: this.showCircularLine,
tooltipContainerBackground: this.tooltipContainerBackground,
tooltipDataTemplate: this.typeMap.get("tooltipDataTemplate"),
tooltipLegendOffsetX: this.tooltipLegendOffsetX,
tooltipLegendOffsetY: this.tooltipLegendOffsetY,
tooltipLegendTemplate: this.typeMap.get("tooltipLegendTemplate"),
tooltipSvgTemplate: this.typeMap.get("tooltipSvgTemplate"),
tooltipTextStroke: this.tooltipTextStroke,
tooltipShadow: this.tooltipShadow
};
Object.assign(json.options, options);
return json;
};
PolarCursorModifier.prototype.notifyPropertyChanged = function (propertyName) {
_super.prototype.notifyPropertyChanged.call(this, propertyName);
if (propertyName === constants_1.PROPERTY.X_AXIS_ID) {
if (this.tooltipAnnotation) {
this.tooltipAnnotation.xAxisId = this.xAxisId;
}
if (this.radialAnnotation) {
this.radialAnnotation.xAxisId = this.xAxisId;
this.angularAxisLabelAnnotation.xAxisId = this.xAxisId;
}
if (this.circularAnnotation) {
this.circularAnnotation.xAxisId = this.xAxisId;
this.radialAxisLabelAnnotation.xAxisId = this.xAxisId;
}
}
if (propertyName === constants_1.PROPERTY.Y_AXIS_ID) {
if (this.tooltipAnnotation) {
this.tooltipAnnotation.yAxisId = this.yAxisId;
}
if (this.radialAnnotation) {
this.radialAnnotation.yAxisId = this.yAxisId;
this.angularAxisLabelAnnotation.yAxisId = this.yAxisId;
}
if (this.circularAnnotation) {
this.circularAnnotation.yAxisId = this.yAxisId;
this.radialAxisLabelAnnotation.yAxisId = this.yAxisId;
}
}
};
PolarCursorModifier.prototype.getSeriesInfos = function () {
var _this = this;
return this.getIncludedRenderableSeries()
.map(function (rs) {
var hitTestInfo = _this.hitTestRenderableSeries(rs, _this.mousePoint);
if (!hitTestInfo) {
return undefined;
}
return rs.getSeriesInfo(hitTestInfo);
})
.filter(function (rs) { return rs !== undefined; });
};
PolarCursorModifier.prototype.update = function () {
if (this.mousePosition !== MousePosition_1.EMousePosition.SeriesArea) {
if (this.radialAnnotation) {
this.radialAnnotation.isHidden = true;
this.angularAxisLabelAnnotation.isHidden = true;
}
if (this.circularAnnotation) {
this.circularAnnotation.isHidden = true;
this.radialAxisLabelAnnotation.isHidden = true;
}
if (this.tooltipAnnotation) {
this.tooltipAnnotation.isHidden = true;
this.tooltipAnnotation.seriesInfos = [];
if (this.placementDivId) {
this.tooltipAnnotation.delete();
}
}
return;
}
var translatedMousePoint = (0, translate_1.translateFromCanvasToSeriesViewRect)(this.mousePoint, this.parentSurface.seriesViewRect);
if (translatedMousePoint) {
var x = translatedMousePoint.x;
var y = translatedMousePoint.y;
var xAxis = this.xAxis;
var yAxis = this.yAxis;
var tp = xAxis.reverseTransform(x, y);
// out of the visible range for partial polar chart
if (tp.x > xAxis.totalAngle) {
this.radialAnnotation.isHidden = true;
this.angularAxisLabelAnnotation.isHidden = true;
this.circularAnnotation.isHidden = true;
this.radialAxisLabelAnnotation.isHidden = true;
this.tooltipAnnotation.isHidden = true;
return;
}
if (this.radialAnnotation) {
this.radialAnnotation.isHidden = false;
this.angularAxisLabelAnnotation.isHidden = !this.showAxisLabels;
}
if (this.circularAnnotation) {
this.circularAnnotation.isHidden = false;
this.radialAxisLabelAnnotation.isHidden = !this.showAxisLabels;
}
this.tooltipAnnotation.isHidden = false;
this.tooltipAnnotation.showTooltip = this.showTooltip;
var yAxisSize = yAxis.getAxisSize();
var xCoordCalc = xAxis.getCurrentCoordinateCalculator();
var yCoordCalc = yAxis.getCurrentCoordinateCalculator();
if (this.radialAnnotation) {
var xValue = xCoordCalc.getDataValue(tp.x);
this.radialAnnotation.x1 = 0;
this.radialAnnotation.y1 = 0;
this.radialAnnotation.x2 = tp.x;
this.radialAnnotation.y2 = yAxisSize / DpiHelper_1.DpiHelper.PIXEL_RATIO;
this.angularAxisLabelAnnotation.x1 = tp.x;
this.angularAxisLabelAnnotation.y1 = yAxisSize / DpiHelper_1.DpiHelper.PIXEL_RATIO;
this.angularAxisLabelAnnotation.text = xValue.toFixed(3);
var _a = labelHelper_1.labelHelper.getLabelRotationAndPlacementForAngularAxis(tp.x + xAxis.startAngle, xAxis.polarLabelMode, this.angularAxisLabelPlacement), resultAngle = _a.resultAngle, horizontalAnchorPoint = _a.horizontalAnchorPoint, verticalAnchorPoint = _a.verticalAnchorPoint;
this.angularAxisLabelAnnotation.verticalAnchorPoint = verticalAnchorPoint;
this.angularAxisLabelAnnotation.horizontalAnchorPoint = horizontalAnchorPoint;
this.angularAxisLabelAnnotation.rotation = resultAngle;
}
if (this.circularAnnotation) {
var yCoord = Math.min(tp.y, yAxisSize);
var yValue = yCoordCalc.getDataValue(yCoord);
var arcAnnotation = this.circularAnnotation;
var isFlipped = xCoordCalc.isFlipped;
arcAnnotation.y1 = yCoordCalc.getDataValue(yCoord);
arcAnnotation.x1 = isFlipped
? xCoordCalc.getDataValue(xAxis.totalAngle - 0.001)
: xCoordCalc.getDataValue(0);
arcAnnotation.x2 = isFlipped
? xCoordCalc.getDataValue(0)
: xCoordCalc.getDataValue(xAxis.totalAngle - 0.001);
this.radialAxisLabelAnnotation.x1 = yAxis.startAngle - xAxis.startAngle;
this.radialAxisLabelAnnotation.y1 = yCoord / DpiHelper_1.DpiHelper.PIXEL_RATIO;
this.radialAxisLabelAnnotation.text = yValue.toFixed(3);
this.radialAxisLabelAnnotation.verticalAnchorPoint = labelHelper_1.labelHelper.getLabelPlacementForRadialAxis(this.radialAxisLabelPlacement);
this.radialAxisLabelAnnotation.horizontalAnchorPoint = AnchorPoint_1.EHorizontalAnchorPoint.Center;
this.radialAxisLabelAnnotation.rotation = 0;
}
if (this.showTooltip) {
this.tooltipAnnotation.x1 = (0, translate_1.translateToNotScaled)(translatedMousePoint.x);
this.tooltipAnnotation.y1 = (0, translate_1.translateToNotScaled)(translatedMousePoint.y);
}
if (this.showTooltip || this.tooltipLegendTemplate) {
this.tooltipAnnotation.seriesInfos = this.getSeriesInfos();
}
}
};
PolarCursorModifier.prototype.newLineAnnotation = function (axisLabelFill, axisLabelStroke) {
return new LineAnnotation_1.LineAnnotation({
xCoordinateMode: AnnotationBase_1.ECoordinateMode.Pixel,
yCoordinateMode: AnnotationBase_1.ECoordinateMode.Pixel,
strokeThickness: this.lineThickness,
strokeDashArray: this.lineDashArray,
stroke: this.lineColor,
isHidden: true,
showLabel: this.showAxisLabels,
axisLabelFill: axisLabelFill,
axisLabelStroke: axisLabelStroke,
xAxisId: this.xAxisId,
yAxisId: this.yAxisId
});
};
PolarCursorModifier.prototype.newNativeTextAnnotation = function (axisLabelFill, axisLabelStroke) {
return new NativeTextAnnotation_1.NativeTextAnnotation({
isHidden: true,
xCoordinateMode: AnnotationBase_1.ECoordinateMode.Pixel,
yCoordinateMode: AnnotationBase_1.ECoordinateMode.Pixel,
fontSize: 18,
textColor: axisLabelStroke,
background: axisLabelFill,
padding: Thickness_1.Thickness.fromNumber(4),
isEditable: false,
annotationLayer: IAnnotation_1.EAnnotationLayer.AboveChart,
clipping: AnnotationClippingMode_1.EAnnotationClippingMode.Chart
});
};
PolarCursorModifier.prototype.newArcAnnotation = function (axisLabelFill, axisLabelStroke) {
return new PolarArcAnnotation_1.PolarArcAnnotation({
isHidden: true,
// y1: 5,
y2: 0,
// x1: 0,
// x2: 8,
stroke: this.lineColor,
strokeThickness: this.lineThickness,
xAxisId: this.xAxisId,
yAxisId: this.yAxisId,
isLineMode: true
});
};
PolarCursorModifier.prototype.isVerticalChart = function () {
var _a, _b;
return (_b = (_a = this.xAxis) === null || _a === void 0 ? void 0 : _a.isVerticalChart) !== null && _b !== void 0 ? _b : false;
};
PolarCursorModifier.prototype.handleAddRadialLine = function () {
var _a, _b;
var xAxisLabelFill = (_a = this.xAxisLabelFill) !== null && _a !== void 0 ? _a : this.axisLabelFill;
var xAxisLabelStroke = (_b = this.xAxisLabelStroke) !== null && _b !== void 0 ? _b : this.axisLabelStroke;
this.radialAnnotation = this.newLineAnnotation(xAxisLabelFill, xAxisLabelStroke);
this.parentSurface.modifierAnnotations.add(this.radialAnnotation);
};
PolarCursorModifier.prototype.handleRemoveRadialLine = function () {
this.parentSurface.modifierAnnotations.remove(this.radialAnnotation, true);
this.radialAnnotation = undefined;
};
PolarCursorModifier.prototype.handleAddRadialLabel = function () {
var _a, _b;
var xAxisLabelFill = (_a = this.xAxisLabelFill) !== null && _a !== void 0 ? _a : this.axisLabelFill;
var xAxisLabelStroke = (_b = this.xAxisLabelStroke) !== null && _b !== void 0 ? _b : this.axisLabelStroke;
this.angularAxisLabelAnnotation = this.newNativeTextAnnotation(xAxisLabelFill, xAxisLabelStroke);
this.parentSurface.modifierAnnotations.add(this.angularAxisLabelAnnotation);
};
PolarCursorModifier.prototype.handleRemoveRadialLabel = function () {
this.parentSurface.modifierAnnotations.remove(this.angularAxisLabelAnnotation, true);
this.angularAxisLabelAnnotation = undefined;
};
PolarCursorModifier.prototype.handleAddCircularLine = function () {
var _a, _b;
var yAxisLabelFill = (_a = this.yAxisLabelFill) !== null && _a !== void 0 ? _a : this.axisLabelFill;
var yAxisLabelStroke = (_b = this.yAxisLabelStroke) !== null && _b !== void 0 ? _b : this.axisLabelStroke;
this.circularAnnotation = this.newArcAnnotation(yAxisLabelFill, yAxisLabelStroke);
this.parentSurface.modifierAnnotations.add(this.circularAnnotation);
};
PolarCursorModifier.prototype.handleRemoveCircularLine = function () {
this.parentSurface.modifierAnnotations.remove(this.circularAnnotation, true);
this.circularAnnotation = undefined;
};
PolarCursorModifier.prototype.handleAddCircularLabel = function () {
var _a, _b;
var yAxisLabelFill = (_a = this.yAxisLabelFill) !== null && _a !== void 0 ? _a : this.axisLabelFill;
var yAxisLabelStroke = (_b = this.yAxisLabelStroke) !== null && _b !== void 0 ? _b : this.axisLabelStroke;
this.radialAxisLabelAnnotation = this.newNativeTextAnnotation(yAxisLabelFill, yAxisLabelStroke);
this.parentSurface.modifierAnnotations.add(this.radialAxisLabelAnnotation);
};
PolarCursorModifier.prototype.handleRemoveCircularLabel = function () {
this.parentSurface.modifierAnnotations.remove(this.radialAxisLabelAnnotation, true);
this.radialAxisLabelAnnotation = undefined;
};
return PolarCursorModifier;
}(ChartModifierBase2D_1.ChartModifierBase2D));
exports.PolarCursorModifier = PolarCursorModifier;