@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,514 lines (1,508 loc) • 4.31 MB
JavaScript
import { ChildProperty, Property, Complex, Browser, Collection, isNullOrUndefined, extend, getValue, createElement, remove, Animation as Animation$1, merge, compile, SanitizeHtmlHelper, animationMode, print, Component, setValue, EventHandler, Touch, Internationalization, L10n, Event, NotifyPropertyChanges } from '@syncfusion/ej2-base';
import { Rect as Rect$1, Size as Size$1, measureText as measureText$2, SvgRenderer, TextOption as TextOption$2, CanvasRenderer, PathOption as PathOption$2, Tooltip as Tooltip$1, getElement as getElement$2, removeElement as removeElement$3, textElement as textElement$1 } from '@syncfusion/ej2-svg-base';
import { DataUtil, DataManager, Query, Deferred } from '@syncfusion/ej2-data';
import { PdfPageOrientation, PdfDocument, PdfStandardFont, PdfSolidBrush, PdfColor, PdfPageTemplateElement, SizeF, PdfBitmap } from '@syncfusion/ej2-pdf-export';
import { Workbook } from '@syncfusion/ej2-excel-export';
import { Toolbar } from '@syncfusion/ej2-navigations';
import { DateRangePicker } from '@syncfusion/ej2-calendars';
import { DropDownButton } from '@syncfusion/ej2-splitbuttons';
var __decorate = (undefined && undefined.__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;
};
/**
* The `Connector` class configures the appearance and properties of connectors in chart controls.
*/
class Connector extends ChildProperty {
}
__decorate([
Property('Line')
], Connector.prototype, "type", void 0);
__decorate([
Property(null)
], Connector.prototype, "color", void 0);
__decorate([
Property(1)
], Connector.prototype, "width", void 0);
__decorate([
Property(null)
], Connector.prototype, "length", void 0);
__decorate([
Property('')
], Connector.prototype, "dashArray", void 0);
/**
* Configures the location for the legend and tooltip in the chart.
*/
class Location extends ChildProperty {
}
__decorate([
Property(0)
], Location.prototype, "x", void 0);
__decorate([
Property(0)
], Location.prototype, "y", void 0);
/**
* The `Accessibility` class configures accessibility options for chart controls.
*/
class Accessibility extends ChildProperty {
}
__decorate([
Property(null)
], Accessibility.prototype, "accessibilityDescription", void 0);
__decorate([
Property(null)
], Accessibility.prototype, "accessibilityRole", void 0);
__decorate([
Property(true)
], Accessibility.prototype, "focusable", void 0);
__decorate([
Property(0)
], Accessibility.prototype, "tabIndex", void 0);
/**
* The `SeriesAccessibility` class configures accessibility options specifically for chart series elements.
*/
class SeriesAccessibility extends Accessibility {
}
__decorate([
Property(null)
], SeriesAccessibility.prototype, "accessibilityDescriptionFormat", void 0);
/**
* The `Font` class provides configuration options for customizing the fonts used in the charts.
*/
class Font extends ChildProperty {
}
__decorate([
Property('Normal')
], Font.prototype, "fontStyle", void 0);
__decorate([
Property('16px')
], Font.prototype, "size", void 0);
__decorate([
Property('Normal')
], Font.prototype, "fontWeight", void 0);
__decorate([
Property('')
], Font.prototype, "color", void 0);
__decorate([
Property('Center')
], Font.prototype, "textAlignment", void 0);
__decorate([
Property('Segoe UI')
], Font.prototype, "fontFamily", void 0);
__decorate([
Property(1)
], Font.prototype, "opacity", void 0);
__decorate([
Property('Wrap')
], Font.prototype, "textOverflow", void 0);
/**
* The `StackLabelsFont` class provides configuration options for customizing the font properties of stack labels in charts.
*/
class StackLabelsFont extends ChildProperty {
}
__decorate([
Property('Normal')
], StackLabelsFont.prototype, "fontStyle", void 0);
__decorate([
Property('16px')
], StackLabelsFont.prototype, "size", void 0);
__decorate([
Property('Normal')
], StackLabelsFont.prototype, "fontWeight", void 0);
__decorate([
Property('')
], StackLabelsFont.prototype, "color", void 0);
__decorate([
Property('Center')
], StackLabelsFont.prototype, "textAlignment", void 0);
__decorate([
Property('Segoe UI')
], StackLabelsFont.prototype, "fontFamily", void 0);
__decorate([
Property(1)
], StackLabelsFont.prototype, "opacity", void 0);
/**
* Options to customize the center label of the Pie and Donut charts.
*
* @default {}
*/
class CenterLabel extends ChildProperty {
}
__decorate([
Property(null)
], CenterLabel.prototype, "text", void 0);
__decorate([
Complex({ fontFamily: null, size: '16px', fontStyle: 'Normal', fontWeight: '600', color: null }, Font)
], CenterLabel.prototype, "textStyle", void 0);
__decorate([
Property(null)
], CenterLabel.prototype, "hoverTextFormat", void 0);
/**
* The `Border` class provides configuration options for setting the borders in a chart.
*/
class Border extends ChildProperty {
}
__decorate([
Property('')
], Border.prototype, "color", void 0);
__decorate([
Property(1)
], Border.prototype, "width", void 0);
__decorate([
Property('')
], Border.prototype, "dashArray", void 0);
/**
* The `Offset` class provides options to adjust the position of the marker relative to its default location.
*/
class Offset extends ChildProperty {
}
__decorate([
Property(0)
], Offset.prototype, "x", void 0);
__decorate([
Property(0)
], Offset.prototype, "y", void 0);
/**
* The `Margin` class enables configuration of the space around the chart's content.
*/
class Margin extends ChildProperty {
}
__decorate([
Property(Browser.isDevice ? 5 : 10)
], Margin.prototype, "left", void 0);
__decorate([
Property(Browser.isDevice ? 5 : 10)
], Margin.prototype, "right", void 0);
__decorate([
Property(Browser.isDevice ? 5 : 10)
], Margin.prototype, "top", void 0);
__decorate([
Property(Browser.isDevice ? 5 : 10)
], Margin.prototype, "bottom", void 0);
/**
* Configures the animation behavior for the chart series.
*/
class Animation extends ChildProperty {
}
__decorate([
Property(true)
], Animation.prototype, "enable", void 0);
__decorate([
Property(1000)
], Animation.prototype, "duration", void 0);
__decorate([
Property(0)
], Animation.prototype, "delay", void 0);
class TooltipSettings extends ChildProperty {
}
__decorate([
Property(false)
], TooltipSettings.prototype, "enable", void 0);
__decorate([
Property(true)
], TooltipSettings.prototype, "enableMarker", void 0);
__decorate([
Property(false)
], TooltipSettings.prototype, "shared", void 0);
__decorate([
Property(false)
], TooltipSettings.prototype, "split", void 0);
__decorate([
Property(false)
], TooltipSettings.prototype, "followPointer", void 0);
__decorate([
Property(null)
], TooltipSettings.prototype, "fill", void 0);
__decorate([
Property(null)
], TooltipSettings.prototype, "header", void 0);
__decorate([
Property(null)
], TooltipSettings.prototype, "opacity", void 0);
__decorate([
Complex({ fontFamily: null, size: null, fontStyle: 'Normal', fontWeight: null, color: null }, Font)
], TooltipSettings.prototype, "textStyle", void 0);
__decorate([
Property(null)
], TooltipSettings.prototype, "format", void 0);
__decorate([
Property(null)
], TooltipSettings.prototype, "template", void 0);
__decorate([
Property(true)
], TooltipSettings.prototype, "enableAnimation", void 0);
__decorate([
Property(300)
], TooltipSettings.prototype, "duration", void 0);
__decorate([
Property(1000)
], TooltipSettings.prototype, "fadeOutDuration", void 0);
__decorate([
Property('Move')
], TooltipSettings.prototype, "fadeOutMode", void 0);
__decorate([
Property(false)
], TooltipSettings.prototype, "enableTextWrap", void 0);
__decorate([
Property(true)
], TooltipSettings.prototype, "showNearestPoint", void 0);
__decorate([
Property(0)
], TooltipSettings.prototype, "distance", void 0);
__decorate([
Complex({ color: null, width: null }, Border)
], TooltipSettings.prototype, "border", void 0);
__decorate([
Complex({ x: null, y: null }, Location)
], TooltipSettings.prototype, "location", void 0);
__decorate([
Property(false)
], TooltipSettings.prototype, "enableHighlight", void 0);
__decorate([
Property(false)
], TooltipSettings.prototype, "showNearestTooltip", void 0);
__decorate([
Property(true)
], TooltipSettings.prototype, "showHeaderLine", void 0);
/**
* This class configures the appearance and behavior of points with empty data in the series.
*/
class EmptyPointSettings extends ChildProperty {
}
__decorate([
Property(null)
], EmptyPointSettings.prototype, "fill", void 0);
__decorate([
Complex({ color: '', width: 0 }, Border)
], EmptyPointSettings.prototype, "border", void 0);
__decorate([
Property('Gap')
], EmptyPointSettings.prototype, "mode", void 0);
/**
* Specifies the indexes for the series and data points.
*
* @public
*/
class Indexes extends ChildProperty {
}
__decorate([
Property(0)
], Indexes.prototype, "series", void 0);
__decorate([
Property(0)
], Indexes.prototype, "point", void 0);
/**
* The `CornerRadius` class provides options to customize the rounding of the corners for columns in the column series.
*/
class CornerRadius extends ChildProperty {
}
__decorate([
Property(0)
], CornerRadius.prototype, "topLeft", void 0);
__decorate([
Property(0)
], CornerRadius.prototype, "topRight", void 0);
__decorate([
Property(0)
], CornerRadius.prototype, "bottomLeft", void 0);
__decorate([
Property(0)
], CornerRadius.prototype, "bottomRight", void 0);
/**
* Configures the padding around the chart legend container.
*/
class ContainerPadding extends ChildProperty {
}
__decorate([
Property(0)
], ContainerPadding.prototype, "left", void 0);
__decorate([
Property(0)
], ContainerPadding.prototype, "right", void 0);
__decorate([
Property(0)
], ContainerPadding.prototype, "top", void 0);
__decorate([
Property(0)
], ContainerPadding.prototype, "bottom", void 0);
/**
* Configures the borders of the chart title and subtitle.
*/
class titleBorder extends ChildProperty {
}
__decorate([
Property('transparent')
], titleBorder.prototype, "color", void 0);
__decorate([
Property(0)
], titleBorder.prototype, "width", void 0);
__decorate([
Property(0.8)
], titleBorder.prototype, "cornerRadius", void 0);
/**
* The `titleSettings` class provides options to customize the title and subtitle displayed in the chart.
*/
class titleSettings extends ChildProperty {
}
__decorate([
Property('Normal')
], titleSettings.prototype, "fontStyle", void 0);
__decorate([
Property('15px')
], titleSettings.prototype, "size", void 0);
__decorate([
Property('500')
], titleSettings.prototype, "fontWeight", void 0);
__decorate([
Property('')
], titleSettings.prototype, "color", void 0);
__decorate([
Property('Center')
], titleSettings.prototype, "textAlignment", void 0);
__decorate([
Property('Segoe UI')
], titleSettings.prototype, "fontFamily", void 0);
__decorate([
Property(1)
], titleSettings.prototype, "opacity", void 0);
__decorate([
Property('Wrap')
], titleSettings.prototype, "textOverflow", void 0);
__decorate([
Property('Top')
], titleSettings.prototype, "position", void 0);
__decorate([
Property(0)
], titleSettings.prototype, "x", void 0);
__decorate([
Property(0)
], titleSettings.prototype, "y", void 0);
__decorate([
Property('transparent')
], titleSettings.prototype, "background", void 0);
__decorate([
Complex({}, titleBorder)
], titleSettings.prototype, "border", void 0);
__decorate([
Complex({}, Accessibility)
], titleSettings.prototype, "accessibility", void 0);
/**
* The `TitleStyleSettings` class provides options to customize the title and subtitle displayed in the accumulation chart.
*/
class TitleStyleSettings extends Font {
}
__decorate([
Property('Top')
], TitleStyleSettings.prototype, "position", void 0);
__decorate([
Property(0)
], TitleStyleSettings.prototype, "x", void 0);
__decorate([
Property(0)
], TitleStyleSettings.prototype, "y", void 0);
/**
* The `ChartArea` class provides properties to customize the appearance and layout of the chart's display area.
*/
class ChartArea extends ChildProperty {
}
__decorate([
Complex({}, Border)
], ChartArea.prototype, "border", void 0);
__decorate([
Property('transparent')
], ChartArea.prototype, "background", void 0);
__decorate([
Property(1)
], ChartArea.prototype, "opacity", void 0);
__decorate([
Property(null)
], ChartArea.prototype, "backgroundImage", void 0);
__decorate([
Property(null)
], ChartArea.prototype, "width", void 0);
__decorate([
Complex({ left: 0, right: 0, top: 0, bottom: 0 }, Margin)
], ChartArea.prototype, "margin", void 0);
/**
* Configures the drag settings for series in the chart.
*/
class DragSettings extends ChildProperty {
}
__decorate([
Property(false)
], DragSettings.prototype, "enable", void 0);
__decorate([
Property(null)
], DragSettings.prototype, "minY", void 0);
__decorate([
Property(null)
], DragSettings.prototype, "maxY", void 0);
__decorate([
Property(null)
], DragSettings.prototype, "fill", void 0);
/**
* Configures the button settings in period selector.
*/
class Periods extends ChildProperty {
}
__decorate([
Property('Years')
], Periods.prototype, "intervalType", void 0);
__decorate([
Property(1)
], Periods.prototype, "interval", void 0);
__decorate([
Property(null)
], Periods.prototype, "text", void 0);
__decorate([
Property(false)
], Periods.prototype, "selected", void 0);
/**
* Configures the period selector settings.
*/
class PeriodSelectorSettings extends ChildProperty {
}
__decorate([
Property(43)
], PeriodSelectorSettings.prototype, "height", void 0);
__decorate([
Property('Bottom')
], PeriodSelectorSettings.prototype, "position", void 0);
__decorate([
Collection([], Periods)
], PeriodSelectorSettings.prototype, "periods", void 0);
class StockTooltipSettings extends ChildProperty {
}
__decorate([
Property(false)
], StockTooltipSettings.prototype, "enable", void 0);
__decorate([
Property(true)
], StockTooltipSettings.prototype, "enableMarker", void 0);
__decorate([
Property(false)
], StockTooltipSettings.prototype, "shared", void 0);
__decorate([
Property(null)
], StockTooltipSettings.prototype, "fill", void 0);
__decorate([
Property(null)
], StockTooltipSettings.prototype, "header", void 0);
__decorate([
Property(0.75)
], StockTooltipSettings.prototype, "opacity", void 0);
__decorate([
Complex({ fontFamily: null, size: '12px', fontStyle: 'Normal', fontWeight: null, color: null }, Font)
], StockTooltipSettings.prototype, "textStyle", void 0);
__decorate([
Property(null)
], StockTooltipSettings.prototype, "format", void 0);
__decorate([
Property(null)
], StockTooltipSettings.prototype, "template", void 0);
__decorate([
Property(true)
], StockTooltipSettings.prototype, "enableAnimation", void 0);
__decorate([
Property(300)
], StockTooltipSettings.prototype, "duration", void 0);
__decorate([
Property(1000)
], StockTooltipSettings.prototype, "fadeOutDuration", void 0);
__decorate([
Property('Move')
], StockTooltipSettings.prototype, "fadeOutMode", void 0);
__decorate([
Property(false)
], StockTooltipSettings.prototype, "enableTextWrap", void 0);
__decorate([
Property(true)
], StockTooltipSettings.prototype, "showNearestPoint", void 0);
__decorate([
Complex({ color: null, width: null }, Border)
], StockTooltipSettings.prototype, "border", void 0);
__decorate([
Property('Fixed')
], StockTooltipSettings.prototype, "position", void 0);
__decorate([
Property(false)
], StockTooltipSettings.prototype, "showNearestTooltip", void 0);
__decorate([
Property(true)
], StockTooltipSettings.prototype, "showHeaderLine", void 0);
/**
* Represents a color stop in a gradient.
*/
class GradientColorStop extends ChildProperty {
}
__decorate([
Property(0)
], GradientColorStop.prototype, "offset", void 0);
__decorate([
Property('')
], GradientColorStop.prototype, "color", void 0);
__decorate([
Property(1)
], GradientColorStop.prototype, "opacity", void 0);
__decorate([
Property(0)
], GradientColorStop.prototype, "brighten", void 0);
__decorate([
Property(0)
], GradientColorStop.prototype, "lighten", void 0);
/**
* Represents a linear gradient configuration.
*/
class LinearGradient extends ChildProperty {
}
__decorate([
Property(0)
], LinearGradient.prototype, "x1", void 0);
__decorate([
Property(0)
], LinearGradient.prototype, "y1", void 0);
__decorate([
Property(1)
], LinearGradient.prototype, "x2", void 0);
__decorate([
Property(1)
], LinearGradient.prototype, "y2", void 0);
__decorate([
Collection([], GradientColorStop)
], LinearGradient.prototype, "gradientColorStop", void 0);
/**
* Represents a radial gradient configuration.
*/
class RadialGradient extends ChildProperty {
}
__decorate([
Property(0.5)
], RadialGradient.prototype, "cx", void 0);
__decorate([
Property(0.5)
], RadialGradient.prototype, "cy", void 0);
__decorate([
Property(0.5)
], RadialGradient.prototype, "r", void 0);
__decorate([
Property(null)
], RadialGradient.prototype, "fx", void 0);
__decorate([
Property(null)
], RadialGradient.prototype, "fy", void 0);
__decorate([
Collection([], GradientColorStop)
], RadialGradient.prototype, "gradientColorStop", void 0);
/**
* @private
*/
class Index {
constructor(seriesIndex, pointIndex) {
this.series = seriesIndex;
this.point = pointIndex;
}
}
/**
* The `DoubleRange` class represents a numeric range with minimum and maximum values.
*
* @private
*/
class DoubleRange {
//private mIsEmpty: boolean;
/**
* Gets the start value.
*
* @returns {number} - The start value.
* @private
*/
get start() {
return this.mStart;
}
/**
* Gets the end value.
*
* @returns {number} - The end value.
* @private
*/
get end() {
return this.mEnd;
}
/*
get isEmpty(): boolean {
return this.mIsEmpty;
}*/
/**
* Gets the delta value.
*
* @returns {number} - The delta value.
* @private
*/
get delta() {
return (this.mEnd - this.mStart);
}
/**
* Gets the median value.
*
* @returns {number} - The median value.
* @private
*/
get median() {
return this.mStart + (this.mEnd - this.mStart) / 2;
}
constructor(start, end) {
/*
if (!isNaN(start) && !isNaN(end)) {
this.mIsEmpty = true;
} else {
this.mIsEmpty = false;
}*/
if (start < end) {
this.mStart = start;
this.mEnd = end;
}
else {
this.mStart = end;
this.mEnd = start;
}
}
}
/**
* The `Double` module is used to render the numeric axis in charts.
*/
class Double {
/**
* Constructor for the dateTime module.
*
* @private
* @param {Chart} chart - Specifies the chart.
*/
constructor(chart) {
this.isColumn = 0;
this.isStacking = false;
// Padding added to extend the computed max range to avoid axis clamping issues
this.maxRangePadding = 0.15;
this.chart = chart;
}
/**
* Numeric Nice Interval for the axis.
*
* @private
* @param {Axis} axis - The axis.
* @param {number} delta - The delta value.
* @param {Size} size - The size.
* @returns {number} - The calculated nice interval.
*/
calculateNumericNiceInterval(axis, delta, size) {
const actualDesiredIntervalsCount = getActualDesiredIntervalsCount(size, axis);
let niceInterval = delta / actualDesiredIntervalsCount;
if (!isNullOrUndefined(axis.desiredIntervals)) {
if (this.isAutoIntervalOnBothAxis(axis)) {
return niceInterval;
}
}
const minInterval = Math.pow(10, Math.floor(logBase(niceInterval, 10)));
for (const interval of axis.intervalDivs) {
const currentInterval = minInterval * interval;
if (actualDesiredIntervalsCount < (delta / currentInterval)) {
break;
}
niceInterval = currentInterval;
}
return niceInterval;
}
/**
* Determines whether auto interval is enabled on both axes.
*
* @private
* @param {Axis} axis - The axis.
* @returns {boolean} - The boolean value indicating if auto interval is enabled on both axes.
*/
isAutoIntervalOnBothAxis(axis) {
if (((axis.zoomFactor < 1 || axis.zoomPosition > 0) && axis.enableAutoIntervalOnZooming)) {
return false;
}
else {
return true;
}
}
getActualRange(axis, size) {
this.initializeDoubleRange(axis);
if ((!axis.startFromZero) && (this.isColumn > 0)) {
axis.actualRange.interval = axis.interval || this.calculateNumericNiceInterval(axis, axis.doubleRange.delta, size);
axis.actualRange.max = axis.doubleRange.end + axis.actualRange.interval;
if ((axis.doubleRange.start - axis.actualRange.interval < 0 && axis.doubleRange.start > 0)) {
axis.actualRange.min = 0;
}
else {
axis.actualRange.min = axis.doubleRange.start - (this.isStacking ? 0 : axis.actualRange.interval);
}
}
else {
axis.actualRange.interval = axis.interval || this.calculateNumericNiceInterval(axis, axis.doubleRange.delta, size);
axis.actualRange.min = axis.doubleRange.start;
axis.actualRange.max = axis.doubleRange.end;
}
}
/**
* Range for the axis.
*
* @private
* @param {Axis} axis - The axis.
* @returns {void}
*/
initializeDoubleRange(axis) {
//Axis Min
if (axis.minimum !== null) {
this.min = axis.minimum;
}
else if (this.min === null || this.min === Number.POSITIVE_INFINITY) {
this.min = 0;
}
// Axis Max
if (axis.maximum !== null) {
this.max = axis.maximum;
}
else if (this.max === null || this.max === Number.NEGATIVE_INFINITY) {
this.max = 5;
}
if (this.min === this.max) {
this.max = axis.valueType.indexOf('Category') > -1 ? this.max : this.min + 1;
}
axis.doubleRange = new DoubleRange(this.min, this.max);
axis.actualRange = {};
}
/**
* The function to calculate the range and labels for the axis.
*
* @returns {void}
* @private
*/
calculateRangeAndInterval(size, axis) {
this.calculateRange(axis);
this.getActualRange(axis, size);
this.applyRangePadding(axis, size);
this.calculateVisibleLabels(axis, this.chart);
}
/**
* Calculate Range for the axis.
*
* @private
*/
calculateRange(axis) {
/** Generate axis range */
this.min = null;
this.max = null;
if (!setRange(axis)) {
for (const series of axis.series) {
if (!series.visible) {
continue;
}
this.paddingInterval = 0;
if (!isNullOrUndefined(series.points)) {
axis.maxPointLength = series.points.length;
}
axis.maxPointLength = series.points.length;
if (((series.type.indexOf('Column') > -1 || series.type.indexOf('Histogram') > -1) && axis.orientation === 'Horizontal')
|| (series.type.indexOf('Bar') > -1 && axis.orientation === 'Vertical')) {
if ((series.xAxis.valueType === 'Double' || series.xAxis.valueType === 'DateTime')
&& series.xAxis.rangePadding === 'Auto') {
this.paddingInterval = getMinPointsDelta(series.xAxis, axis.series) * 0.5;
}
}
//For xRange
if (axis.orientation === 'Horizontal') {
if (this.chart.requireInvertedAxis) {
this.yAxisRange(axis, series);
}
else {
this.findMinMax(series.xMin - this.paddingInterval, series.xMax + this.paddingInterval);
}
}
// For yRange
if (axis.orientation === 'Vertical') {
this.isColumn += (series.type.indexOf('Column') !== -1 || series.type.indexOf('Bar') !== -1 || series.drawType === 'Column') ? 1 : 0;
this.isStacking = series.type.indexOf('Stacking') !== -1;
if (this.chart.requireInvertedAxis) {
this.findMinMax(series.xMin - this.paddingInterval, series.xMax + this.paddingInterval);
}
else {
this.yAxisRange(axis, series);
}
}
}
}
}
yAxisRange(axis, series) {
if (series.dragSettings.enable && this.chart.dragY) {
if (this.chart.dragY >= axis.visibleRange.max) {
series.yMax = this.chart.dragY + axis.visibleRange.interval;
}
if (this.chart.dragY <= axis.visibleRange.min) {
series.yMin = this.chart.dragY - axis.visibleRange.interval;
}
}
if (series.type === 'Waterfall') {
let cumulativeMax = 0;
let cumulativeValue = 0;
for (let i = 0; i < series.yData.length; i++) {
if (!(series.intermediateSumIndexes && series.intermediateSumIndexes.indexOf(i) !== -1) &&
!(series.sumIndexes && series.sumIndexes.indexOf(i) !== -1)) {
cumulativeValue += series.yData[i];
}
if (cumulativeValue > cumulativeMax) {
cumulativeMax = cumulativeValue;
}
}
this.findMinMax(series.yMin, cumulativeMax);
}
else {
this.findMinMax(series.yMin, series.yMax);
}
}
findMinMax(min, max) {
if (this.min === null || this.min > min) {
this.min = min;
}
if (this.max === null || this.max < max) {
this.max = max;
}
if ((this.max === this.min) && this.max < 0 && this.min < 0) { // max == min
this.max = 0;
}
}
/**
* Apply padding for the range.
*
* @private
* @param {Axis} axis - The axis for which padding is applied.
* @param {Size} size - The size used for padding calculation.
* @returns {void}
*/
applyRangePadding(axis, size) {
const start = axis.actualRange.min;
const end = axis.actualRange.max;
if (!setRange(axis)) {
const interval = axis.actualRange.interval;
const padding = axis.getRangePadding(this.chart);
if (padding === 'Additional' || padding === 'Round') {
this.findAdditional(axis, start, end, interval, size);
}
else if (padding === 'Normal') {
this.findNormal(axis, start, end, interval, size);
}
else {
this.updateActualRange(axis, start, end, interval);
}
}
axis.actualRange.delta = axis.actualRange.max - axis.actualRange.min;
this.calculateVisibleRange(size, axis);
}
updateActualRange(axis, minimum, maximum, interval) {
axis.actualRange = {
min: axis.minimum != null ? axis.minimum : minimum,
max: axis.maximum != null ? axis.maximum : maximum,
interval: axis.interval != null ? axis.interval : interval,
delta: axis.actualRange.delta
};
}
findAdditional(axis, start, end, interval, size) {
let minimum;
let maximum;
minimum = Math.floor(start / interval) * interval;
maximum = Math.ceil(end / interval) * interval;
if (axis.rangePadding === 'Additional') {
minimum -= interval;
maximum += interval;
}
if (!isNullOrUndefined(axis.desiredIntervals)) {
const delta = maximum - minimum;
interval = this.calculateNumericNiceInterval(axis, delta, size);
}
this.updateActualRange(axis, minimum, maximum, interval);
}
findNormal(axis, start, end, interval, size) {
let remaining;
let minimum;
let maximum;
let startValue = start;
if (start < 0) {
startValue = 0;
minimum = start + (start * 0.05);
remaining = interval + (minimum % interval);
if ((0.365 * interval) >= remaining) {
minimum -= interval;
}
if (minimum % interval < 0) {
minimum = (minimum - interval) - (minimum % interval);
}
}
else {
minimum = start < ((5.0 / 6.0) * end) ? 0 : (start - (end - start) * 0.5);
if (minimum % interval > 0) {
minimum -= (minimum % interval);
}
}
maximum = (end > 0) ? (end + (end - startValue) * 0.05) : (end - (end - startValue) * 0.05);
remaining = interval - (maximum % interval);
if ((0.365 * interval) >= remaining) {
maximum += interval;
}
if (maximum % interval > 0) {
maximum = (maximum + interval) - (maximum % interval);
}
axis.doubleRange = new DoubleRange(minimum, maximum);
// Prevent excessive rounding that can jump max to a much larger "nice" value
const maxCap = end + Math.abs(end - startValue) * this.maxRangePadding;
if (minimum === 0 || (minimum < 0 && maximum < 0)) {
interval = this.calculateNumericNiceInterval(axis, axis.doubleRange.delta, size);
maximum = Math.ceil(maximum / interval) * interval;
}
// Clamp rounded maximum to cap (snap cap to interval)
if (maximum > maxCap) {
maximum = Math.ceil(maxCap / interval) * interval;
}
this.updateActualRange(axis, minimum, maximum, interval);
}
/**
* Calculate visible range for axis.
*
* @private
* @param {Size} size - The size used for calculation.
* @param {Axis} axis - The axis for which the visible range is calculated.
* @returns {void}
*/
calculateVisibleRange(size, axis) {
axis.visibleRange = {
max: axis.actualRange.max, min: axis.actualRange.min,
delta: axis.actualRange.delta, interval: axis.actualRange.interval
};
if (this.chart.chartAreaType === 'Cartesian') {
const isLazyLoad = isNullOrUndefined(axis.zoomingScrollBar) ? false : axis.zoomingScrollBar.isLazyLoad;
if ((axis.zoomFactor < 1 || axis.zoomPosition > 0) && !isLazyLoad) {
axis.calculateVisibleRangeOnZooming();
axis.visibleRange.interval = (axis.enableAutoIntervalOnZooming) ?
this.calculateNumericNiceInterval(axis, axis.doubleRange.delta, size)
: axis.visibleRange.interval;
}
}
const rangeDifference = (axis.visibleRange.max - axis.visibleRange.min) % axis.visibleRange.interval;
if (rangeDifference !== 0 && !isNaN(rangeDifference) && axis.valueType === 'Double' &&
axis.orientation === 'Vertical' && axis.rangePadding === 'Auto') {
let duplicateTempInterval;
let tempInterval = axis.visibleRange.min;
for (; (tempInterval <= axis.visibleRange.max) && (duplicateTempInterval !== tempInterval); tempInterval += axis.visibleRange.interval) {
duplicateTempInterval = tempInterval;
}
if (duplicateTempInterval < axis.visibleRange.max) {
axis.visibleRange.max = duplicateTempInterval + axis.visibleRange.interval;
}
}
axis.triggerRangeRender(this.chart, axis.visibleRange.min, axis.visibleRange.max, axis.visibleRange.interval);
}
/**
* Calculate label for the axis.
*
* @private
*/
calculateVisibleLabels(axis, chart) {
/** Generate axis labels */
axis.visibleLabels = [];
let tempInterval = axis.visibleRange.min;
let labelStyle;
const controlName = chart.getModuleName();
const isPolarRadar = controlName === 'chart' && chart.chartAreaType === 'PolarRadar';
if (!isPolarRadar && (axis.zoomFactor < 1 || axis.zoomPosition > 0 || this.paddingInterval)) {
tempInterval = axis.visibleRange.min - (axis.visibleRange.min % axis.visibleRange.interval);
}
const format = this.getFormat(axis);
const isCustom = format.match('{value}') !== null;
let intervalDigits = 0;
let formatDigits = 0;
if (axis.labelFormat && axis.labelFormat.indexOf('n') > -1) {
formatDigits = parseInt(axis.labelFormat.substring(1, axis.labelFormat.length), 10);
}
axis.format = chart.intl.getNumberFormat({
format: isCustom ? '' : format,
useGrouping: chart.useGroupingSeparator
});
axis.startLabel = axis.format(axis.visibleRange.min);
axis.endLabel = axis.format(axis.visibleRange.max);
if (axis.visibleRange.interval && (axis.visibleRange.interval + '').indexOf('.') >= 0) {
intervalDigits = (axis.visibleRange.interval + '').split('.')[1].length;
}
let duplicateTempInterval;
for (; (tempInterval <= axis.visibleRange.max) && (duplicateTempInterval !== tempInterval); tempInterval += axis.visibleRange.interval) {
duplicateTempInterval = tempInterval;
labelStyle = (extend({}, getValue('properties', axis.labelStyle), null, true));
if (withIn(tempInterval, axis.visibleRange)) {
triggerLabelRender(chart, tempInterval, this.formatValue(axis, isCustom, format, tempInterval), labelStyle, axis);
}
}
if (tempInterval && (tempInterval + '').indexOf('.') >= 0 && (tempInterval + '').split('.')[1].length > 10) {
tempInterval = (tempInterval + '').split('.')[1].length > (formatDigits || intervalDigits) ?
+tempInterval.toFixed(formatDigits || intervalDigits) : tempInterval;
if (tempInterval <= axis.visibleRange.max) {
triggerLabelRender(chart, tempInterval, this.formatValue(axis, isCustom, format, tempInterval), labelStyle, axis);
}
}
if (axis.getMaxLabelWidth) {
axis.getMaxLabelWidth(this.chart);
}
}
/**
* Format of the axis label.
*
* @private
*/
getFormat(axis) {
if (axis.labelFormat) {
if (axis.labelFormat.indexOf('p') === 0 && axis.labelFormat.indexOf('{value}') === -1 && axis.isStack100) {
return '{value}%';
}
return axis.labelFormat;
}
return axis.isStack100 ? '{value}%' : '';
}
/**
* Formatted the axis label.
*
* @private
*/
formatValue(axis, isCustom, format, tempInterval) {
/*The toLocaleString method is used to adjust the decimal points for this ticket, specifically for ticket numbers I481747 and I541484.*/
const labelValue = !(tempInterval % 1) ? tempInterval : Number(tempInterval.toLocaleString('en-US').split(',').join(''));
return isCustom ? format.replace('{value}', axis.format(labelValue))
: format ? axis.format(tempInterval) : axis.format(labelValue);
}
/**
* Get module name.
*
* @returns {string} - Returns the module name.
*/
getModuleName() {
/**
* Returns the module name
*/
return 'Double';
}
/**
* To destroy the double axis.
*
* @returns {void}
* @private
*/
destroy() {
/**
* Destroy method performed here.
*/
}
}
/**
* Specifies the chart constant value
*/
/** @private */
const loaded = 'loaded';
/** @private */
const legendClick = 'legendClick';
/** @private */
const load = 'load';
/** @private */
const animationComplete = 'animationComplete';
/** @private */
const legendRender = 'legendRender';
/** @private */
const textRender = 'textRender';
/** @private */
const pointRender = 'pointRender';
/** @private */
const sharedTooltipRender = 'sharedTooltipRender';
/** @private */
const seriesRender = 'seriesRender';
/** @private */
const axisLabelRender = 'axisLabelRender';
/** @private */
const axisLabelClick = 'axisLabelClick';
/** @private */
const axisRangeCalculated = 'axisRangeCalculated';
/** @private */
const axisMultiLabelRender = 'axisMultiLabelRender';
/** @private */
const tooltipRender = 'tooltipRender';
/** @private */
const chartMouseMove = 'chartMouseMove';
/** @private */
const chartMouseClick = 'chartMouseClick';
/** @private */
const chartDoubleClick = 'chartDoubleClick';
/** @private */
const pointClick = 'pointClick';
/** @private */
const pointDoubleClick = 'pointDoubleClick';
/** @private */
const pointMove = 'pointMove';
/** @private */
const chartMouseLeave = 'chartMouseLeave';
/** @private */
const chartMouseDown = 'chartMouseDown';
/** @private */
const chartMouseUp = 'chartMouseUp';
/** @private */
const zoomComplete = 'zoomComplete';
/** @private */
const dragComplete = 'dragComplete';
/** @private */
const selectionComplete = 'selectionComplete';
/** @private */
const resized = 'resized';
/** @private */
const beforeResize = 'beforeResize';
/** @private */
const beforePrint = 'beforePrint';
/** @private */
const annotationRender = 'annotationRender';
/** @private */
const scrollStart = 'scrollStart';
/** @private */
const scrollEnd = 'scrollEnd';
/** @private */
const scrollChanged = 'scrollChanged';
/** @private */
const stockEventRender = 'stockEventRender';
/** @private */
const multiLevelLabelClick = 'multiLevelLabelClick';
/** @private */
const dragStart = 'dragStart';
/** @private */
const drag = 'drag';
/** @private */
const dragEnd = 'dragEnd';
/*** @private*/
const regSub = /~\d+~/g;
/*** @private*/
const regSup = /\^\d+\^/g;
/** @private */
const beforeExport = 'beforeExport';
/** @private */
const afterExport = 'afterExport';
/** @private */
const bulletChartMouseClick = 'bulletChartMouseClick';
/** @private */
const onZooming = 'onZooming';
var __decorate$1 = (undefined && undefined.__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;
};
/**
* Configures the annotation settings for a chart to highlight or provide additional information about specific points or regions.
*/
class ChartAnnotationSettings extends ChildProperty {
}
__decorate$1([
Property('0')
], ChartAnnotationSettings.prototype, "x", void 0);
__decorate$1([
Property('0')
], ChartAnnotationSettings.prototype, "y", void 0);
__decorate$1([
Property(null)
], ChartAnnotationSettings.prototype, "content", void 0);
__decorate$1([
Property('Center')
], ChartAnnotationSettings.prototype, "horizontalAlignment", void 0);
__decorate$1([
Property('Pixel')
], ChartAnnotationSettings.prototype, "coordinateUnits", void 0);
__decorate$1([
Property('Chart')
], ChartAnnotationSettings.prototype, "region", void 0);
__decorate$1([
Property('Middle')
], ChartAnnotationSettings.prototype, "verticalAlignment", void 0);
__decorate$1([
Property(null)
], ChartAnnotationSettings.prototype, "xAxisName", void 0);
__decorate$1([
Property(null)
], ChartAnnotationSettings.prototype, "yAxisName", void 0);
__decorate$1([
Property(null)
], ChartAnnotationSettings.prototype, "description", void 0);
__decorate$1([
Complex({}, Accessibility)
], ChartAnnotationSettings.prototype, "accessibility", void 0);
/**
* The `LabelBorder` class provides options to customize the border settings for chart labels.
*/
class LabelBorder extends ChildProperty {
}
__decorate$1([
Property('')
], LabelBorder.prototype, "color", void 0);
__decorate$1([
Property(1)
], LabelBorder.prototype, "width", void 0);
__decorate$1([
Property('Rectangle')
], LabelBorder.prototype, "type", void 0);
/**
* The `MultiLevelCategories` class allows defining and customizing the categories used in multi-level labels.
* This is particularly useful when there is a need to display hierarchical or grouped data labels on the chart axis.
*/
class MultiLevelCategories extends ChildProperty {
}
__decorate$1([
Property(null)
], MultiLevelCategories.prototype, "start", void 0);
__decorate$1([
Property(null)
], MultiLevelCategories.prototype, "end", void 0);
__decorate$1([
Property('')
], MultiLevelCategories.prototype, "text", void 0);
__decorate$1([
Property(null)
], MultiLevelCategories.prototype, "maximumTextWidth", void 0);
__decorate$1([
Property(null)
], MultiLevelCategories.prototype, "customAttributes", void 0);
__decorate$1([
Property('')
], MultiLevelCategories.prototype, "type", void 0);
/**
* The `StripLineSettings` class provides configuration options for strip lines in a chart.
*/
class StripLineSettings extends ChildProperty {
}
__decorate$1([
Property(true)
], StripLineSettings.prototype, "visible", void 0);
__decorate$1([
Property(false)
], StripLineSettings.prototype, "startFromAxis", void 0);
__decorate$1([
Property(null)
], StripLineSettings.prototype, "start", void 0);
__decorate$1([
Property(null)
], StripLineSettings.prototype, "end", void 0);
__decorate$1([
Property(null)
], StripLineSettings.prototype, "size", void 0);
__decorate$1([
Property('#808080')
], StripLineSettings.prototype, "color", void 0);
__decorate$1([
Property(null)
], StripLineSettings.prototype, "dashArray", void 0);
__decorate$1([
Property('Auto')
], StripLineSettings.prototype, "sizeType", void 0);
__decorate$1([
Property(false)
], StripLineSettings.prototype, "isRepeat", void 0);
__decorate$1([
Property(null)
], StripLineSettings.prototype, "repeatEvery", void 0);
__decorate$1([
Property(null)
], StripLineSettings.prototype, "repeatUntil", void 0);
__decorate$1([
Property(false)
], StripLineSettings.prototype, "isSegmented", void 0);
__decorate$1([
Property(null)
], StripLineSettings.prototype, "segmentStart", void 0);
__decorate$1([
Property(null)
], StripLineSettings.prototype, "segmentEnd", void 0);
__decorate$1([
Property(null)
], StripLineSettings.prototype, "segmentAxisName", void 0);
__decorate$1([
Complex({ color: 'transparent', width: 1 }, Border)
], StripLineSettings.prototype, "border", void 0);
__decorate$1([
Property('')
], StripLineSettings.prototype, "text", void 0);
__decorate$1([
Property(null)
], StripLineSettings.prototype, "rotation", void 0);
__decorate$1([
Property('Middle')
], StripLineSettings.prototype, "horizontalAlignment", void 0);
__decorate$1([
Property('Middle')
], StripLineSettings.prototype, "verticalAlignment", void 0);
__decorate$1([
Complex({ size: '12px', color: null, fontStyle: 'Normal', fontWeight: '400', fontFamily: null }, Font)
], StripLineSettings.prototype, "textStyle", void 0);
__decorate$1([
Property('Behind')
], StripLineSettings.prototype, "zIndex", void 0);
__decorate$1([
Property(1)
], StripLineSettings.prototype, "opacity", void 0);
__decorate$1([
Property('')
], StripLineSettings.prototype, "imageUrl", void 0);
/**
* The `MultiLevelLabels` class is used to customize the appearance and behavior of multi-level labels in charts.
*/
class MultiLevelLabels extends ChildProperty {
}
__decorate$1([
Property('Center')
], MultiLevelLabels.prototype, "alignment", void 0);
__decorate$1([
Property('Wrap')
], MultiLevelLabels.prototype, "overflow", void 0);
__decorate$1([
Complex({ fontFamily: null, size: '12px', fontStyle: 'Normal', fontWeight: '400', color: null }, Font)
], MultiLevelLabels.prototype, "textStyle", void 0);
__decorate$1([
Complex({ color: null, width: 1, type: 'Rectangle' }, LabelBorder)
], MultiLevelLabels.prototype, "border", void 0);
__decorate$1([
Collection([], MultiLevelCategories)
], MultiLevelLabels.prototype, "categories", void 0);
/**
* The `ScrollbarSettingsRange` class allows defining the start and end values for the scrollbar range in a chart.
*
* @public
*/
class ScrollbarSettingsRange extends ChildProperty {
}
__decorate$1([
Property(null)
], ScrollbarSettingsRange.prototype, "minimum", void 0);
__decorate$1([
Property(null)
], ScrollbarSettingsRange.prototype, "maximum", void 0);
/**
* Specifies properties for customizing the scrollbar settings in lazy loading.
*/
class ScrollbarSettings extends ChildProperty {
}
__decorate$1([
Property(false)
], ScrollbarSettings.prototype, "enable", void 0);
__decorate$1([
Property(null)
], ScrollbarSettings.prototype, "pointsLength", void 0);
__decorate$1([
Complex({}, ScrollbarSettingsRange)
], ScrollbarSettings.prototype, "range", void 0);
__decorate$1([
Property(null)
], ScrollbarSettings.prototype, "trackColor", void 0);
__decorate$1([
Property(0)
], ScrollbarSettings.prototype, "scrollbarRadius", void 0);
__decorate$1([
Property(null)
], ScrollbarSettings.prototype, "scrollbarColor", void 0);
__decorate$1([
Property(0)
], ScrollbarSettings.prototype, "trackRadius", void 0);
__decorate$1([
Property(null)
], ScrollbarSettings.prototype, "gripColor", void 0);
__decorate$1([
Property(16)
], ScrollbarSettings.prototype, "height", void 0);
__decorate$1([
Property(true)
], ScrollbarSettings.prototype, "enableZoom", void 0);
__decorate$1([
Property('PlaceNextToAxisLine')
], ScrollbarSettings.prototype, "position", void 0);
/**
* Configures the ToolbarPosition for the chart.
*/
class ToolbarPosition extends ChildProperty {
}
__decorate$1([
Property('Far')
], ToolbarPosition.prototype, "horizontalAlignment", void 0);
__decorate$1([
Property('Top')
], ToolbarPosition.prototype, "verticalAlignment", void 0);
__decorate$1([
Property(0)
], ToolbarPosition.prototype, "x", void 0);
__decorate$1([
Property(0)
], ToolbarPosition.prototype, "y", void 0);
__decorate$1([
Property(false)
], ToolbarPosition.prototype, "draggable", void 0);
/**
* Represents the settings for configuring stack labels in a chart.
*/
class StackLabelSettings extends ChildProperty {
}
__decorate$1([
Property(false)
], StackLabelSettings.prototype, "visible", void 0);
__decorate$1([
Property('transparent')
], StackLabelSettings.prototype, "fill", void 0);
__decorate$1([
Property(null)
], StackLabelSettings.prototype, "format", void 0);
__decorate$1([
Property(0)
], StackLabelSettings.prototype, "angle", void 0);
__decorate$1([
Property(5)
], StackLabelSettings.prototype, "rx", void 0);
__decorate$1([
Property(5)
], StackLabelSettings.prototype, "ry", void 0);
__decorate$1([
Complex({ left: 5, right: 5, top: 5, bottom: 5 }, Margin)
], StackLabelSettings.prototype, "margin", void 0);
__decorate$1([
Complex({ width: null, color: null }, Border)
], StackLabelSettings.prototype, "border", void 0);
__decorate$1([
Complex({ size: null, color: null, fontStyle: null, fontWeight: 'Bold', fontFamily: null }, StackLabelsFont)
], StackLabelSettings.prototype, "font", void 0);
var __decorate$2 = (undefined && undefined.__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;
};
/**
* Configures the `rows` of the chart to create multiple vertical rows within the chart area.
*/
class Row extends ChildProperty {
constructor() {
/**
* The height of the row as a string accepts input both as '100px' and '100%'.
* If specified as '100%', the row renders to the full height of its chart.
*
* @default '100%'
*/
super(...arguments);
/** @private */
this.axes = [];
/** @private */
this.nearSizes = [];
/** @private */
this.farSizes = [];
/** @private */
this.insideFarSizes = [];
/** @private */
this.insideNearSizes = [];
}
/**
* Measure the row size.
*
* @param {Axis} axis - The axis for which to measure the row size.
* @param {number} scrollBarHeight