@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.
1,187 lines • 103 kB
JavaScript
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 (b.hasOwnProperty(p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
import { Property, ChildProperty, Complex, Collection, getValue, animationMode } from '@syncfusion/ej2-base';
import { isNullOrUndefined, extend } from '@syncfusion/ej2-base';
import { StackValues, RectOption, appendChildElement, appendClipElement, getElement } from '../../common/utils/helper';
import { firstToLowerCase, CircleOption, getColorByValue } from '../../common/utils/helper';
import { Rect, Size } from '@syncfusion/ej2-svg-base';
import { Border, Font, Margin, Animation, DragSettings, EmptyPointSettings, Connector, CornerRadius, Accessibility, SeriesAccessibility } from '../../common/model/base';
import { DataManager, DataUtil } from '@syncfusion/ej2-data';
import { Offset } from '../../common/model/base';
import { seriesRender } from '../../common/model/constants';
import { getVisiblePoints, setRange, findClipRect } from '../../common/utils/helper';
import { Browser } from '@syncfusion/ej2-base';
/**
* This class is used to introduce a grid line indicator to highlight the last value of each series.
*/
var LastValueLabelSettings = /** @class */ (function (_super) {
__extends(LastValueLabelSettings, _super);
function LastValueLabelSettings() {
return _super !== null && _super.apply(this, arguments) || this;
}
__decorate([
Property(false)
], LastValueLabelSettings.prototype, "enable", void 0);
__decorate([
Complex({ size: null, color: null, fontStyle: null, fontWeight: null, fontFamily: null }, Font)
], LastValueLabelSettings.prototype, "font", void 0);
__decorate([
Property(null)
], LastValueLabelSettings.prototype, "background", void 0);
__decorate([
Complex({}, Border)
], LastValueLabelSettings.prototype, "border", void 0);
__decorate([
Property('')
], LastValueLabelSettings.prototype, "lineColor", void 0);
__decorate([
Property(1)
], LastValueLabelSettings.prototype, "lineWidth", void 0);
__decorate([
Property('')
], LastValueLabelSettings.prototype, "dashArray", void 0);
__decorate([
Property(5)
], LastValueLabelSettings.prototype, "rx", void 0);
__decorate([
Property(5)
], LastValueLabelSettings.prototype, "ry", void 0);
return LastValueLabelSettings;
}(ChildProperty));
export { LastValueLabelSettings };
/**
* This class provides options to customize the appearance and behavior of data labels within a series.
*/
var DataLabelSettings = /** @class */ (function (_super) {
__extends(DataLabelSettings, _super);
function DataLabelSettings() {
return _super !== null && _super.apply(this, arguments) || this;
}
__decorate([
Property(false)
], DataLabelSettings.prototype, "visible", void 0);
__decorate([
Property(true)
], DataLabelSettings.prototype, "showZero", void 0);
__decorate([
Property(null)
], DataLabelSettings.prototype, "name", void 0);
__decorate([
Property('transparent')
], DataLabelSettings.prototype, "fill", void 0);
__decorate([
Property(null)
], DataLabelSettings.prototype, "format", void 0);
__decorate([
Property(1)
], DataLabelSettings.prototype, "opacity", void 0);
__decorate([
Property(0)
], DataLabelSettings.prototype, "angle", void 0);
__decorate([
Property(false)
], DataLabelSettings.prototype, "enableRotation", void 0);
__decorate([
Property('Auto')
], DataLabelSettings.prototype, "position", void 0);
__decorate([
Property(5)
], DataLabelSettings.prototype, "rx", void 0);
__decorate([
Property(5)
], DataLabelSettings.prototype, "ry", void 0);
__decorate([
Property('Center')
], DataLabelSettings.prototype, "alignment", void 0);
__decorate([
Complex({ width: null, color: null }, Border)
], DataLabelSettings.prototype, "border", void 0);
__decorate([
Complex({ left: 5, right: 5, top: 5, bottom: 5 }, Margin)
], DataLabelSettings.prototype, "margin", void 0);
__decorate([
Complex({ size: null, color: null, fontStyle: null, fontWeight: null, fontFamily: null }, Font)
], DataLabelSettings.prototype, "font", void 0);
__decorate([
Property(null)
], DataLabelSettings.prototype, "template", void 0);
__decorate([
Property('Hide')
], DataLabelSettings.prototype, "labelIntersectAction", void 0);
return DataLabelSettings;
}(ChildProperty));
export { DataLabelSettings };
/**
* This class is used to define the appearance and behavior of the series markers.
*/
var MarkerSettings = /** @class */ (function (_super) {
__extends(MarkerSettings, _super);
function MarkerSettings() {
return _super !== null && _super.apply(this, arguments) || this;
}
__decorate([
Property(false)
], MarkerSettings.prototype, "visible", void 0);
__decorate([
Property(null)
], MarkerSettings.prototype, "shape", void 0);
__decorate([
Property('')
], MarkerSettings.prototype, "imageUrl", void 0);
__decorate([
Property(5)
], MarkerSettings.prototype, "height", void 0);
__decorate([
Property(false)
], MarkerSettings.prototype, "isFilled", void 0);
__decorate([
Property(5)
], MarkerSettings.prototype, "width", void 0);
__decorate([
Complex({ width: 2, color: null }, Border)
], MarkerSettings.prototype, "border", void 0);
__decorate([
Complex({ x: 0, y: 0 }, Offset)
], MarkerSettings.prototype, "offset", void 0);
__decorate([
Property(null)
], MarkerSettings.prototype, "fill", void 0);
__decorate([
Property(true)
], MarkerSettings.prototype, "allowHighlight", void 0);
__decorate([
Property(1)
], MarkerSettings.prototype, "opacity", void 0);
__decorate([
Complex({}, DataLabelSettings)
], MarkerSettings.prototype, "dataLabel", void 0);
return MarkerSettings;
}(ChildProperty));
export { MarkerSettings };
/**
* The `ParetoOptions` class provides a set of properties for configuring the Pareto series.
*/
var ParetoOptions = /** @class */ (function (_super) {
__extends(ParetoOptions, _super);
function ParetoOptions() {
return _super !== null && _super.apply(this, arguments) || this;
}
__decorate([
Property(null)
], ParetoOptions.prototype, "fill", void 0);
__decorate([
Property(1)
], ParetoOptions.prototype, "width", void 0);
__decorate([
Property('0')
], ParetoOptions.prototype, "dashArray", void 0);
__decorate([
Complex(null, MarkerSettings)
], ParetoOptions.prototype, "marker", void 0);
__decorate([
Property(true)
], ParetoOptions.prototype, "showAxis", void 0);
return ParetoOptions;
}(ChildProperty));
export { ParetoOptions };
/**
* The model that represents how the points in a series are configured and displayed.
*
* @public
*/
var Points = /** @class */ (function () {
function Points() {
/** Specifies the locations of symbols associated with the point. */
this.symbolLocations = null;
/** Specifies the regions associated with the point. */
this.regions = null;
/** Specifies the percentage value of the point. */
this.percentage = null;
/** Specifies the region data of the point. */
this.regionData = null;
/** Indicates whether the point is selected. */
this.isSelect = false;
/** Specifies the marker settings for the point. */
this.marker = {
visible: false
};
/**
* Indicates whether the point is within the specified range.
*
* @private
*/
this.isPointInRange = true;
/** Specifies the vertical error value for the point. */
this.verticalError = null;
/** Specifies the vertical negative error value for the point. */
this.verticalNegativeError = null;
/** Specifies the horizontal error value for the point. */
this.horizontalError = null;
/** Specifies the horizontal negative error value for the point. */
this.horizontalNegativeError = null;
/** Specifies the vertical positive error value for the point. */
this.verticalPositiveError = null;
/** Specifies the horizontal positive error value for the point. */
this.horizontalPositiveError = null;
}
return Points;
}());
export { Points };
/**
* Configures the behavior and appearance of trendlines in a chart series.
* Trendlines indicate trends and the rate of price changes over a period.
*/
var Trendline = /** @class */ (function (_super) {
__extends(Trendline, _super);
function Trendline() {
var _this = _super !== null && _super.apply(this, arguments) || this;
/** @private */
_this.clipRect = new Rect(0, 0, 0, 0);
return _this;
}
/**
* Sets the data source for the specified series in the provided chart.
*
* @private
* @param {Series} series - The series for which the data source is set.
* @param {Chart} chart - The chart in which the data source is set.
* @returns {void}
*/
Trendline.prototype.setDataSource = function (series, chart) {
if (series) {
this.points = series.points;
}
chart.trendLineModule.initDataSource(this);
chart.visibleSeriesCount++;
};
__decorate([
Property('')
], Trendline.prototype, "name", void 0);
__decorate([
Property('')
], Trendline.prototype, "dashArray", void 0);
__decorate([
Property(true)
], Trendline.prototype, "visible", void 0);
__decorate([
Property('Linear')
], Trendline.prototype, "type", void 0);
__decorate([
Property(2)
], Trendline.prototype, "period", void 0);
__decorate([
Property(2)
], Trendline.prototype, "polynomialOrder", void 0);
__decorate([
Property(0)
], Trendline.prototype, "backwardForecast", void 0);
__decorate([
Property(0)
], Trendline.prototype, "forwardForecast", void 0);
__decorate([
Complex({}, Animation)
], Trendline.prototype, "animation", void 0);
__decorate([
Complex({}, MarkerSettings)
], Trendline.prototype, "marker", void 0);
__decorate([
Property(true)
], Trendline.prototype, "enableTooltip", void 0);
__decorate([
Property(null)
], Trendline.prototype, "intercept", void 0);
__decorate([
Property('')
], Trendline.prototype, "fill", void 0);
__decorate([
Property(1)
], Trendline.prototype, "width", void 0);
__decorate([
Property('SeriesType')
], Trendline.prototype, "legendShape", void 0);
__decorate([
Complex({}, Accessibility)
], Trendline.prototype, "accessibility", void 0);
return Trendline;
}(ChildProperty));
export { Trendline };
/**
* The `ErrorBarCapSettings` class provides options to customize the appearance and behavior of error bars in a series.
*/
var ErrorBarCapSettings = /** @class */ (function (_super) {
__extends(ErrorBarCapSettings, _super);
function ErrorBarCapSettings() {
return _super !== null && _super.apply(this, arguments) || this;
}
__decorate([
Property(1)
], ErrorBarCapSettings.prototype, "width", void 0);
__decorate([
Property(10)
], ErrorBarCapSettings.prototype, "length", void 0);
__decorate([
Property(null)
], ErrorBarCapSettings.prototype, "color", void 0);
__decorate([
Property(1)
], ErrorBarCapSettings.prototype, "opacity", void 0);
return ErrorBarCapSettings;
}(ChildProperty));
export { ErrorBarCapSettings };
var ChartSegment = /** @class */ (function (_super) {
__extends(ChartSegment, _super);
function ChartSegment() {
return _super !== null && _super.apply(this, arguments) || this;
}
__decorate([
Property(null)
], ChartSegment.prototype, "value", void 0);
__decorate([
Property(null)
], ChartSegment.prototype, "color", void 0);
__decorate([
Property('0')
], ChartSegment.prototype, "dashArray", void 0);
return ChartSegment;
}(ChildProperty));
export { ChartSegment };
/**
* The `ErrorBarSettings` class provides options to customize the appearance and behavior of error bars in a series.
*
* @public
*/
var ErrorBarSettings = /** @class */ (function (_super) {
__extends(ErrorBarSettings, _super);
function ErrorBarSettings() {
return _super !== null && _super.apply(this, arguments) || this;
}
__decorate([
Property(false)
], ErrorBarSettings.prototype, "visible", void 0);
__decorate([
Property('Fixed')
], ErrorBarSettings.prototype, "type", void 0);
__decorate([
Property('Both')
], ErrorBarSettings.prototype, "direction", void 0);
__decorate([
Property('Vertical')
], ErrorBarSettings.prototype, "mode", void 0);
__decorate([
Property(null)
], ErrorBarSettings.prototype, "color", void 0);
__decorate([
Property(1)
], ErrorBarSettings.prototype, "verticalError", void 0);
__decorate([
Property(1)
], ErrorBarSettings.prototype, "width", void 0);
__decorate([
Property(1)
], ErrorBarSettings.prototype, "horizontalError", void 0);
__decorate([
Property(3)
], ErrorBarSettings.prototype, "verticalPositiveError", void 0);
__decorate([
Property(3)
], ErrorBarSettings.prototype, "verticalNegativeError", void 0);
__decorate([
Property(1)
], ErrorBarSettings.prototype, "horizontalPositiveError", void 0);
__decorate([
Property(1)
], ErrorBarSettings.prototype, "horizontalNegativeError", void 0);
__decorate([
Complex(null, ErrorBarCapSettings)
], ErrorBarSettings.prototype, "errorBarCap", void 0);
__decorate([
Property('')
], ErrorBarSettings.prototype, "errorBarColorMapping", void 0);
return ErrorBarSettings;
}(ChildProperty));
export { ErrorBarSettings };
/**
* Defines the common behavior for series and technical indicators.
*/
var SeriesBase = /** @class */ (function (_super) {
__extends(SeriesBase, _super);
function SeriesBase() {
/**
* The data source field that contains the x value.
* It is applicable to both series and technical indicators.
*
* @default ''
*/
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.rangeColorPoints = [];
_this.isAdvancedColor = undefined;
/** @private */
_this.currentViewData = [];
/** @private */
_this.clipRect = new Rect(0, 0, 0, 0);
/** @private */
_this.seriesType = 'XY';
_this.isRectTypeSeries = false;
_this.removedPointIndex = null;
/** @private */
_this.isLegendClicked = false;
return _this;
}
/**
* Process data for the series.
*
* @hidden
* @returns {void}
*/
SeriesBase.prototype.processJsonData = function () {
var i = 0;
var point = new Points();
var xName = (this instanceof Series && this.type === 'Histogram') ? 'x' : this.xName;
var textMappingName = this instanceof Series && this.marker.dataLabel.name ?
this.marker.dataLabel.name : '';
if (this instanceof Series) {
if ((this.type === 'Waterfall' || this.type === 'Histogram')) {
this.currentViewData = this.chart[firstToLowerCase(this.type) + 'SeriesModule'].
processInternalData(extend([], this.currentViewData, null, true), this);
}
if (this.category === 'Pareto') {
this.currentViewData = extend([], this.currentViewData, null, true);
if (this.type === 'Line') {
this.currentViewData = this.chart.paretoSeriesModule.performCumulativeCalculation(this.currentViewData, this);
}
}
this.isRectTypeSeries = this.type.indexOf('Column') > -1 || this.type.indexOf('Bar') > -1
|| this.type.indexOf('Histogram') > -1;
}
var len = (this.currentViewData || []).length;
this.points = [];
this.xMin = Infinity;
this.xMax = -Infinity;
this.yMin = Infinity;
this.yMax = -Infinity;
this.sizeMax = -Infinity;
this.getSeriesType();
if (this.xAxis.valueType === 'Category') {
while (i < len) {
this.pushCategoryPoint(point, i, textMappingName, xName);
i++;
}
}
else if (this.xAxis.valueType.indexOf('DateTime') > -1) {
var option = {
skeleton: 'full',
type: 'dateTime'
};
var dateParser = this.chart.intl.getDateParser(option);
var dateFormatter = this.chart.intl.getDateFormat(option);
while (i < len) {
this.pushDateTimePoint(point, i, textMappingName, xName, dateParser, dateFormatter);
i++;
}
}
else {
while (i < len) {
this.pushDoublePoint(point, i, textMappingName, xName);
i++;
}
}
this.updateSplineValue();
this.updateYAxisForErrorBars();
if (this instanceof Series && this.type === 'Waterfall' && isNullOrUndefined(this.yAxis.minimum)) {
this.yMin = Math.min.apply(Math, this.chart.waterfallSeriesModule.cumulativeSums);
}
};
/**
* Calculates the errorbar and adds a range to axis if errorbar exeeds to the actual range.
*
* @returns {void}
* @private
*/
SeriesBase.prototype.updateYAxisForErrorBars = function () {
if (this instanceof Series) {
if (this.chart.errorBarModule) {
var maxVerticalError = void 0;
var minVerticalError = void 0;
if (this.errorBar.verticalError) {
for (var i = 0; i < this.points.length; i++) {
var verticalErrors = [];
var minVerticalErrorValue = [];
for (var i_1 = 0; i_1 < this.points.length; i_1++) {
var point = this.points[i_1];
if (point.verticalError) {
verticalErrors.push(point.verticalError);
minVerticalErrorValue.push(point.yValue - point.verticalError);
}
}
maxVerticalError = verticalErrors && verticalErrors.length > 0 ? Math.max.apply(Math, verticalErrors) : 0;
minVerticalError = verticalErrors && verticalErrors.length > 0 ? Math.min.apply(Math, minVerticalErrorValue) : 0;
}
}
this.yMax += !isNaN(maxVerticalError) && isNullOrUndefined(this.yAxis.maximum) ? maxVerticalError : 0;
this.yMin = !isNaN(minVerticalError) && minVerticalError < this.yMin && minVerticalError < 0 &&
isNullOrUndefined(this.yAxis.minimum) ? minVerticalError : this.yMin;
}
}
};
/**
* Pushes a category point to the data collection.
*
* @param {Points} point -The point to be pushed.
* @param {number} index -The index of the point.
* @param {string} textMappingName -The name of the text mapping.
* @param {string} xName -The name of the x-coordinate.
* @returns {void}
* @private
*/
SeriesBase.prototype.pushCategoryPoint = function (point, index, textMappingName, xName) {
point = this.dataPoint(index, textMappingName, xName);
this.pushCategoryData(point, index, point.x);
this.pushData(point, index);
this.setEmptyPoint(point, index);
this.rangeColorsInterior(point);
};
/**
* Pushes a double point to the data collection.
*
* @param {Points} point -The point to be pushed.
* @param {number} index -The index of the point.
* @param {string} textMappingName -The name of the text mapping.
* @param {string} xName -The name of the x-coordinate.
* @returns {void}
* @private
*/
SeriesBase.prototype.pushDoublePoint = function (point, index, textMappingName, xName) {
point = this.dataPoint(index, textMappingName, xName);
point.xValue = point.x;
this.pushData(point, index);
this.setEmptyPoint(point, index);
};
/**
* Pushes a DateTime point to the data collection.
*
* @param {Points} point -The point to be pushed.
* @param {number} index -The index of the point.
* @param {string} textMappingName -The name of the text mapping.
* @param {string} xName -The name of the x-coordinate.
* @param {Function} dateParser -The date parser function.
* @param {Function} dateFormatter -The date formatter function.
* @returns {void}
* @private
*/
SeriesBase.prototype.pushDateTimePoint = function (point, index, textMappingName, xName, dateParser, dateFormatter) {
point = this.dataPoint(index, textMappingName, xName);
if (!isNullOrUndefined(point.x) && point.x !== '') {
point.x = new Date(DataUtil.parse.parseJson({ val: point.x }).val);
if (this.xAxis.valueType === 'DateTime') {
point.xValue = Date.parse(point.x.toString());
}
else {
if (this.chart.isBlazor) {
this.pushCategoryData(point, index, Date.parse(point.x.toString()).toString());
}
else {
this.pushCategoryData(point, index, Date.parse(dateParser(dateFormatter(point.x))).toString());
}
}
this.pushData(point, index);
this.setEmptyPoint(point, index);
}
else {
point.visible = false;
}
};
SeriesBase.prototype.updateSplineValue = function () {
if (this instanceof Series && !(this.chart.stockChart && this.xAxis.valueType === 'DateTimeCategory')) {
if (this.type.indexOf('Spline') > -1 || (this.drawType.indexOf('Spline') > -1 && this.chart.chartAreaType === 'PolarRadar')) {
var isArea = (this.type.indexOf('Area') > -1 || this.drawType.indexOf('Area') > -1);
var isRange = this.type.indexOf('Range') > -1;
this.chart['spline' + (isArea ? isRange ? 'RangeArea' : 'Area' : '') + 'SeriesModule'].findSplinePoint(this);
}
else if (this.type.indexOf('Histogram') > -1 && (this.xAxis.maximum || this.xAxis.minimum)) {
this.chart['histogramSeriesModule'].calculateBinValues(this);
}
if (this.type.indexOf('Histogram') > -1 && this.points.length === 1) {
this.xMin = this.xMin - this.histogramValues.binWidth;
this.xMax = this.xMax + this.histogramValues.binWidth;
}
}
};
SeriesBase.prototype.rangeColorsInterior = function (point) {
if (this.chart.rangeColorSettings && this.chart.rangeColorSettings.length > 0 && this.chart.visibleSeries.length === 1 &&
(this.chart.series[0].type === 'Column' || this.chart.series[0].type === 'Bar' ||
this.chart.series[0].type === 'Scatter' || this.chart.series[0].type === 'Bubble')) {
if (!this.rangeColorPoints[point.interior]) {
this.rangeColorPoints[point.interior] = [];
}
else if (this.rangeColorPoints[point.interior] !== undefined) {
this.rangeColorPoints[point.interior].push(point);
}
}
};
/**
* Sets the empty point values.
*
* @param {Points} point - The point to be set.
* @param {number} i - The index of the point.
* @private
* @returns {void}
*/
SeriesBase.prototype.pushData = function (point, i) {
point.index = i;
point.yValue = point.y;
point.series = this;
// To find the min, max for the axis range.
this.xMin = Math.min(this.xMin, point.xValue);
this.xMax = Math.max(this.xMax, point.xValue);
this.xData.push(point.xValue);
};
/**
* Retrieves the data point at the specified index with the given text mapping name and x-name.
*
* @param {number} i - The index of the data point to retrieve.
* @param {string} textMappingName - The name used to map text data.
* @param {string} xName - The name used for the x-axis.
* @returns {Points} - The data point at the specified index.
* @private
*/
SeriesBase.prototype.dataPoint = function (i, textMappingName, xName) {
this.points[i] = new Points();
var point = this.points[i];
var currentViewData = this.currentViewData[i];
var getObjectValueByMappingString = this.enableComplexProperty ? getValue : this.getObjectValue;
point.x = getObjectValueByMappingString(xName, currentViewData);
point.high = getObjectValueByMappingString(this.high, currentViewData);
point.low = getObjectValueByMappingString(this.low, currentViewData);
point.open = getObjectValueByMappingString(this.open, currentViewData);
point.close = getObjectValueByMappingString(this.close, currentViewData);
point.volume = getObjectValueByMappingString(this.volume, currentViewData);
point.interior = getObjectValueByMappingString(this.pointColorMapping, currentViewData);
if (this instanceof Series) {
if (this.errorBar.visible) {
point.errorBarColor = getObjectValueByMappingString(this.errorBar.errorBarColorMapping, currentViewData);
point.verticalError = typeof this.errorBar.verticalError == 'string' ? getObjectValueByMappingString(this.errorBar.verticalError, currentViewData) : this.errorBar.verticalError;
point.horizontalError = typeof this.errorBar.horizontalError == 'string' ? getObjectValueByMappingString(this.errorBar.horizontalError, currentViewData) : this.errorBar.horizontalError;
point.verticalNegativeError = typeof this.errorBar.verticalNegativeError == 'string' ? getObjectValueByMappingString(this.errorBar.verticalNegativeError, currentViewData) : this.errorBar.verticalNegativeError;
point.verticalPositiveError = typeof this.errorBar.verticalPositiveError == 'string' ? getObjectValueByMappingString(this.errorBar.verticalPositiveError, currentViewData) : this.errorBar.verticalPositiveError;
point.horizontalNegativeError = typeof this.errorBar.horizontalNegativeError == 'string' ? getObjectValueByMappingString(this.errorBar.horizontalNegativeError, currentViewData) : this.errorBar.horizontalNegativeError;
point.horizontalPositiveError = typeof this.errorBar.horizontalPositiveError == 'string' ? getObjectValueByMappingString(this.errorBar.horizontalPositiveError, currentViewData) : this.errorBar.horizontalPositiveError;
}
point.y = getObjectValueByMappingString(this.yName, currentViewData);
point.size = getObjectValueByMappingString(this.size, currentViewData);
point.text = getObjectValueByMappingString(textMappingName, currentViewData);
point.tooltip = getObjectValueByMappingString(this.tooltipMappingName, currentViewData);
if (this.isAdvancedColorSupported()) {
this.rangeColorName = this.colorName.length > 0 ? this.colorName : this.yName;
point.colorValue = getObjectValueByMappingString(this.rangeColorName, currentViewData);
point.interior = this.getPointFillColor(point.interior, point.colorValue);
}
}
return point;
};
SeriesBase.prototype.isAdvancedColorSupported = function () {
if (isNullOrUndefined(this.isAdvancedColor)) {
if (this.chart.rangeColorSettings && this.chart.rangeColorSettings.length > 0 &&
(this.chart.series[0].type === 'Column' || this.chart.series[0].type === 'Bar' ||
this.chart.series[0].type === 'Scatter' || this.chart.series[0].type === 'Bubble')) {
this.isAdvancedColor = true;
}
else {
this.isAdvancedColor = false;
}
}
return this.isAdvancedColor;
};
SeriesBase.prototype.getPointFillColor = function (pointFill, value) {
var color = pointFill;
if (value && this.chart.rangeColorSettings && this.chart.rangeColorSettings.length > 0) {
for (var _i = 0, _a = this.chart.rangeColorSettings; _i < _a.length; _i++) {
var rangeMap = _a[_i];
if (value >= rangeMap.start && value <= rangeMap.end) {
if (rangeMap.colors.length > 1) {
color = getColorByValue(rangeMap, value);
}
else {
color = rangeMap.colors[0];
}
}
}
}
return color;
};
/**
* Pushes a category point to the data collection.
*
* @param {string} mappingName - The name of the mapping.
* @param {Object} data - The data to be pushed.
* @returns {Object} - The data point at the specified index.
* @private
*/
SeriesBase.prototype.getObjectValue = function (mappingName, data) {
return data[mappingName];
};
/**
* Sets the specified data point as an empty point at the given index.
*
* @private
* @param {Points} point - The data point to set as empty.
* @param {number} i - The index of the data point.
* @returns {void}
*/
SeriesBase.prototype.setEmptyPoint = function (point, i) {
if (!this.findVisibility(point)) {
point.visible = true;
return null;
}
point.isEmpty = true;
var mode = this instanceof Series && point.isPointInRange ? this.emptyPointSettings.mode : 'Drop';
switch (mode) {
case 'Zero':
point.visible = true;
if (this instanceof Series && this.seriesType.indexOf('HighLow') > -1) {
point.high = point.low = 0;
if (this.seriesType.indexOf('HighLowOpenClose') > -1) {
point.open = point.close = 0;
}
}
else {
point.y = point.yValue = this.yData[i] = 0;
}
break;
case 'Average':
if (this instanceof Series) {
if (this.seriesType.indexOf('HighLow') > -1) {
point.high = (isNullOrUndefined(point.high) || isNaN(+point.high)) ? this.getAverage(this.high, i) : point.high;
point.low = (isNullOrUndefined(point.low) || isNaN(+point.low)) ? this.getAverage(this.low, i) : point.low;
if (this.seriesType.indexOf('HighLowOpenClose') > -1) {
point.open = (isNullOrUndefined(point.open) || isNaN(+point.open)) ? this.getAverage(this.open, i) : point.open;
point.close = (isNullOrUndefined(point.close) || isNaN(+point.close)) ? this.getAverage(this.close, i) :
point.close;
}
}
else {
point.y = point.yValue = this.yData[i] = this.getAverage(this.yName, i);
}
}
point.visible = true;
break;
case 'Drop':
case 'Gap':
this.yData[i] = null;
point.visible = false;
break;
}
};
SeriesBase.prototype.findVisibility = function (point) {
var type = this instanceof Series ? this.seriesType : 'HighLowOpenClose';
var yValues;
var yAxisMin = this.yAxis.minimum;
var yAxisMax = this.yAxis.maximum;
switch (type) {
case 'XY':
if (this.chart.chartAreaType === 'PolarRadar' && ((!isNullOrUndefined(yAxisMin) && point.yValue < yAxisMin) ||
(!isNullOrUndefined(yAxisMax) && point.yValue > yAxisMax))) {
point.isPointInRange = false;
return true;
}
this.setXYMinMax(point.yValue);
this.yData.push(point.yValue);
if (this instanceof Series && this.type === 'Bubble') {
this.sizeMax = Math.max(this.sizeMax, (isNullOrUndefined(point.size) || isNaN(+point.size)) ? this.sizeMax
: point.size);
}
return isNullOrUndefined(point.x) || (isNullOrUndefined(point.y) || isNaN(+point.y));
case 'HighLow':
this.setHiloMinMax(point.high, point.low);
return isNullOrUndefined(point.x) || (isNullOrUndefined(point.low) || isNaN(+point.low)) ||
(isNullOrUndefined(point.high) || isNaN(+point.high));
case 'HighLowOpenClose':
this.setHiloMinMax(point.high, point.low);
return isNullOrUndefined(point.x) || (isNullOrUndefined(point.low) || isNaN(+point.low)) ||
(isNullOrUndefined(point.open) || isNaN(+point.open)) || (isNullOrUndefined(point.close) || isNaN(+point.close))
|| (isNullOrUndefined(point.high) || isNaN(+point.high));
case 'BoxPlot':
yValues = (point.y || [null]).filter(function (value) {
return !isNullOrUndefined(value) && !isNaN(value);
}).sort(function (a, b) {
return a - b;
});
point.y = yValues;
this.yMin = Math.min(this.yMin, Math.min.apply(Math, yValues));
this.yMax = Math.max(this.yMax, Math.max.apply(Math, yValues));
return !yValues.length;
}
};
/**
* To get Y min max for the provided point seriesType XY.
*
* @param {number} yValue - The y value used to determine the minimum and maximum values for the x and y coordinates.
* @returns {void}
*/
SeriesBase.prototype.setXYMinMax = function (yValue) {
var isLogAxis = (this.yAxis.valueType === 'Logarithmic' || this.xAxis.valueType === 'Logarithmic');
var isNegativeValue = yValue < 0 || this.yAxis.rangePadding === 'None';
var seriesMinY;
if (this.isRectTypeSeries && !setRange(this.yAxis)) {
seriesMinY = ((isLogAxis ? (yValue) : isNegativeValue ? yValue : 0));
}
else {
seriesMinY = yValue;
}
this.yMin = isLogAxis ?
Math.min(this.yMin, (isNullOrUndefined(seriesMinY) || isNaN(seriesMinY) || (seriesMinY === 0) ||
(seriesMinY.toString() === '0') || (seriesMinY.toString() === '')) ? this.yMin : seriesMinY) :
Math.min(this.yMin, (isNullOrUndefined(seriesMinY) || isNaN(seriesMinY)) ? this.yMin : seriesMinY);
this.yMax = Math.max(this.yMax, (isNullOrUndefined(yValue) || isNaN(yValue)) ? this.yMax : yValue);
};
/**
* Sets the minimum and maximum values for the high and low values.
*
* @private
* @param {number} high - The high value used to determine the maximum value.
* @param {number} low - The low value used to determine the minimum value.
* @returns {void}
*/
SeriesBase.prototype.setHiloMinMax = function (high, low) {
this.yMin = Math.min(this.yMin, Math.min((isNullOrUndefined(low) || isNaN(low)) ? this.yMin : low, (isNullOrUndefined(high) || isNaN(high)) ? this.yMin : high));
this.yMax = Math.max(this.yMax, Math.max((isNullOrUndefined(low) || isNaN(low)) ? this.yMax : low, (isNullOrUndefined(high) || isNaN(high)) ? this.yMax : high));
};
/**
* Finds the type of the series.
*
* @private
* @returns {void}
*/
SeriesBase.prototype.getSeriesType = function () {
var type;
if (this instanceof Series) {
var seriesType = this.chart.chartAreaType === 'PolarRadar' ? this.drawType : this.type;
if (seriesType) {
switch (seriesType) {
case 'RangeColumn':
case 'RangeArea':
case 'RangeStepArea':
case 'SplineRangeArea':
case 'Hilo':
type = 'HighLow';
break;
case 'HiloOpenClose':
case 'Candle':
type = 'HighLowOpenClose';
break;
case 'BoxAndWhisker':
type = 'BoxPlot';
break;
default:
type = 'XY';
}
}
}
this.seriesType = type;
};
/**
* Pushes category data into the series points.
*
* @param {Points} point - The point to which category data will be pushed.
* @param {number} index - The index of the data point.
* @param {string} pointX - The x-value of the point.
* @returns {void}
* @private
*/
SeriesBase.prototype.pushCategoryData = function (point, index, pointX) {
if (!this.chart.tooltip.shared) {
if (!this.visible) {
return null;
}
}
if (!this.xAxis.isIndexed) {
if (this.xAxis.indexLabels[pointX] === undefined) {
this.xAxis.indexLabels[pointX] = this.xAxis.labels.length;
this.xAxis.labels.push(pointX);
}
point.xValue = this.xAxis.indexLabels[pointX];
}
else {
if (this.xAxis.labels[index]) {
this.xAxis.labels[index] += ', ' + pointX;
}
else {
this.xAxis.labels.push(pointX);
}
// this.xAxis.labels[index as number] ? this.xAxis.labels[index as number] += ', ' + pointX :
// this.xAxis.labels.push(pointX);
point.xValue = index;
}
};
/**
* Gets the average value of a member in the specified data array or current view data.
*
* @param {string} member - The member whose average is to be calculated.
* @param {number} i - The index of the data point.
* @param {Object} data - The data array from which to calculate the average. Defaults to the current view data.
* @returns {number} - The average value of the specified member.
*/
SeriesBase.prototype.getAverage = function (member, i, data) {
if (data === void 0) { data = this.currentViewData; }
var previous = data[i - 1] ? (data[i - 1][member] || 0) : 0;
var next = data[i + 1] ? (data[i + 1][member] || 0) : 0;
return (previous + next) / 2;
};
/**
* Refreshes the data manager for the provided chart.
*
* @param {Chart} chart - The chart whose data manager is to be refreshed.
* @returns {void}
* @private
*/
SeriesBase.prototype.refreshDataManager = function (chart) {
var _this = this;
this.chart = chart;
var dataSource;
var isAngular = 'isAngular';
if (chart[isAngular]) {
dataSource = Object.keys(this.dataSource).length ? this.dataSource : chart.dataSource;
}
else {
dataSource = this.dataSource || chart.dataSource;
}
if (!(dataSource instanceof DataManager) && isNullOrUndefined(this.query)) {
this.dataManagerSuccess({ result: dataSource, count: dataSource.length }, false);
return;
}
var dataManager = this.dataModule.getData(this.dataModule.generateQuery().requiresCount());
dataManager.then(function (e) { return _this.dataManagerSuccess(e); });
};
SeriesBase.prototype.dataManagerSuccess = function (e, isRemoteData) {
if (isRemoteData === void 0) { isRemoteData = true; }
this.currentViewData = e.count ? e.result : [];
this.chart.allowServerDataBinding = false;
if (this instanceof Series) {
if (this.chart.stockChart) {
this.chart.stockChart.series[this.index].localData = this.currentViewData;
}
var argsData = {
name: seriesRender, series: this, data: this.currentViewData, fill: this.interior
};
this.chart.trigger(seriesRender, argsData);
this.interior = argsData.fill;
this.currentViewData = argsData.data;
}
if (this.chart.stockChart && !(this instanceof Series)) {
this.currentViewData = this.chart.stockChart.findCurrentData(this.chart.stockChart.series[0].localData, this.chart.stockChart.series[0].xName);
}
this.processJsonData();
this.recordsCount = e.count;
this.refreshChart(isRemoteData);
this.currentViewData = null;
};
SeriesBase.prototype.refreshChart = function (isRemoteData) {
var chart = this.chart;
if (this instanceof Series) {
chart.visibleSeriesCount += isRemoteData ? 1 : 0;
}
chart.refreshTechnicalIndicator(this);
if (this instanceof Series && this.category !== 'TrendLine') {
for (var _i = 0, _a = this.trendlines; _i < _a.length; _i++) {
var trendline = _a[_i];
trendline.setDataSource(this, chart);
}
}
//if (chart.visibleSeries.length === (chart.visibleSeriesCount - chart.indicators.length)) {
if (chart.visibleSeries.length === (chart.visibleSeriesCount)) {
chart.refreshBound();
chart.trigger('loaded', { chart: chart.isBlazor ? {} : chart });
if (this.chart.stockChart && this.chart.stockChart.initialRender) {
this.chart.stockChart.initialRender = false;
this.chart.stockChart.stockChartDataManagerSuccess();
}
}
if (this instanceof Series) {
chart.visibleSeriesCount += isRemoteData ? 0 : 1;
}
};
__decorate([
Property('')
], SeriesBase.prototype, "xName", void 0);
__decorate([
Property('')
], SeriesBase.prototype, "colorName", void 0);
__decorate([
Property('')
], SeriesBase.prototype, "high", void 0);
__decorate([
Property('')
], SeriesBase.prototype, "low", void 0);
__decorate([
Property('')
], SeriesBase.prototype, "open", void 0);
__decorate([
Property('')
], SeriesBase.prototype, "close", void 0);
__decorate([
Property('')
], SeriesBase.prototype, "volume", void 0);
__decorate([
Property('')
], SeriesBase.prototype, "pointColorMapping", void 0);
__decorate([
Property(true)
], SeriesBase.prototype, "visible", void 0);
__decorate([
Property(null)
], SeriesBase.prototype, "xAxisName", void 0);
__decorate([
Property(null)
], SeriesBase.prototype, "yAxisName", void 0);
__decorate([
Complex(null, Animation)
], SeriesBase.prototype, "animation", void 0);
__decorate([
Property(null)
], SeriesBase.prototype, "fill", void 0);
__decorate([
Property(1)
], SeriesBase.prototype, "width", void 0);
__decorate([
Property('')
], SeriesBase.prototype, "dashArray", void 0);
__decorate([
Property('')
], SeriesBase.prototype, "dataSource", void 0);
__decorate([
Property()
], SeriesBase.prototype, "query", void 0);
__decorate([
Collection([], ChartSegment)
], SeriesBase.prototype, "segments", void 0);
__decorate([
Property('X')
], SeriesBase.prototype, "segmentAxis", void 0);
__decorate([
Property(false)
], SeriesBase.prototype, "enableComplexProperty", void 0);
return SeriesBase;
}(ChildProperty));
export { SeriesBase };
/**
* The `Series` class is used to configure individual series in a chart.
*
* @public
*/
var Series = /** @class */ (function (_super) {
__extends(Series, _super);
function Series(parent, propName, defaultValue, isArray) {
var _this = _super.call(this, parent, propName, defaultValue, isArray) || this;
_this.visibleSeriesCount = 0;
/** @private */
_this.category = 'Series';
/** @private */
_this.isRectSeries = false;
/** @private */
_this.drawPoints = [];
/** @private */
_this.lowDrawPoints = [];
/** @private */
_this.delayedAnimation = false;
/** @private */
_this.rangeColorName = _this.colorName.length > 0 ? _this.colorName : _this.yName;
/** @private */
_this.currentData = [];
return _this;
}
/**
* Refresh the axis label.
*
* @returns {void}
* @private
*/
Series.prototype.refreshAxisLabel = function () {
if (this.xAxis.valueType.indexOf('Category') === -1) {
return null;
}
this.xAxis.labels = [];
this.xAxis.indexLabels = {};
var option = {
skeleton: 'full',
type: 'dateTime'
};
var dateParser = this.chart.intl.getDateParser(option);
var dateFormatter = this.chart.intl.getDateFormat(option);
for (var _i = 0, _a = this.xAxis.series; _i < _a.length; _i++) {
var item = _a[_i];
if (item.visible && item.category !== 'TrendLine') {
item.xMin = Infinity;
item.xMax = -Infinity;
for (var _b = 0, _c = item.points; _b < _c.length; _b++) {
var point = _c[_b];
item.pushCategoryData(point, point.index, this.xAxis.valueType === 'DateTimeCategory' ? Date.parse(dateParser(dateFormatter(point.x))).toString() : point.x);
item.xMin = Math.min(item.xMin, point.xValue);
item.xMax = Math.max(item.xMax, point.xValue);
}
}
}
};
/**
* To get the series collection.
*
* @returns {void}
* @private
*/
Series.prototype.findSeriesCollection = function (column, row, isStack) {
var seriesCollection = [];
for (var _i = 0, _a = row.axes; _i < _a.length; _i++) {
var rowAxis = _a[_i];
for (var _b = 0, _c = rowAxis.series; _b < _c.length; _b++) {
var rowSeries = _c[_b];
for (var _d = 0, _e = column.axes; _d < _e.length; _d++) {
var axis = _e[_d];
for (var _f = 0, _g = axis.series; _f < _g.length; _f++) {
var series = _g[_f];
if (series === rowSeries && series.visible && this.rectSeriesInChart(series, isStack)) {
seriesCollection.push(series);
}
}
}
}
}
return seriesCollection;
};
/**
* Checks if the series in the chart are rectangular.
*
* @param {Series} series - The series to be checked.
* @param {boolean} isStack - Specifies whether the series are stacked.
* @returns {boolean} - Returns true if the series in the chart are rectangular, otherwise false.
*/
Series.prototype.rectSeriesInChart = function (series, isStack) {
var type = (series.type).toLowerCase();
return (type.indexOf('column') !== -1 || type.indexOf('bar') !== -1 || type.indexOf('histogram') !== -1 ||
type.indexOf('hiloopenclose') !== -1 || type.indexOf('candle') !== -1 || type.indexOf('pareto') !== -1 ||
type.indexOf('hilo') !== -1 || series.drawType.indexOf('Column') !== -1 ||
type.indexOf('waterfall') !== -1 || type.indexOf('boxandwhisker') !== -1 || isStack);
};
/**
* Calculates the stacked value for the chart.
*
* @param {boolean} isStacking100 - Specifies whether the stacking is 100%.
* @param {Chart} chart - The chart for which the stacked value is calculated.
* @returns {void}
* @private
*/
S