igniteui-angular-charts
Version:
Ignite UI Angular charting components for building rich data visualizations for modern web apps.
1,191 lines • 84.5 kB
JavaScript
import { __extends } from "tslib";
import { EventEmitter, Output, Component, ViewContainerRef, ViewChild, ElementRef, Input, ChangeDetectionStrategy, ViewChildren } from '@angular/core';
import { AngularRenderer, AngularWrapper } from "igniteui-angular-core";
import { TypeRegistrar } from "igniteui-angular-core";
import { FinancialChart } from './FinancialChart';
import { FinancialChartType_$type } from './FinancialChartType';
import { fromBrushCollection, toBrushCollection, brushToString, stringToBrush, ensureEnum, ensureBool } from "igniteui-angular-core";
import { IgxXYChartComponent } from './igx-xy-chart-component';
import { DataChartStylingDefaults } from './DataChartStylingDefaults';
import { DataSeriesType } from "igniteui-angular-core";
import { IgxDataContext } from "igniteui-angular-core";
import { FinancialChartVolumeType_$type } from './FinancialChartVolumeType';
import { FinancialChartXAxisMode, FinancialChartXAxisMode_$type } from './FinancialChartXAxisMode';
import { FinancialChartYAxisMode, FinancialChartYAxisMode_$type } from './FinancialChartYAxisMode';
import { HorizontalAlignment_$type } from "igniteui-angular-core";
import { FinancialChartZoomSliderType_$type } from './FinancialChartZoomSliderType';
import { IgxFinancialChartDefaultTemplatesComponent } from './igx-financial-chart-default-templates-component';
import { IgxTemplateContentComponent } from "igniteui-angular-core";
import { delegateCombine } from "igniteui-angular-core";
import { IgxFinancialIndicatorTypeCollection } from './igx-financial-indicator-type-collection';
import { FinancialIndicatorTypeCollection as FinancialIndicatorTypeCollection_internal } from './FinancialIndicatorTypeCollection';
import { SyncableObservableCollection$1 } from "igniteui-angular-core";
import { FinancialIndicatorType_$type } from './FinancialIndicatorType';
import { IgxFinancialOverlayTypeCollection } from './igx-financial-overlay-type-collection';
import { FinancialOverlayTypeCollection as FinancialOverlayTypeCollection_internal } from './FinancialOverlayTypeCollection';
import { FinancialOverlayType_$type } from './FinancialOverlayType';
import { IgxIndicatorDisplayTypeCollection } from './igx-indicator-display-type-collection';
import { IndicatorDisplayTypeCollection as IndicatorDisplayTypeCollection_internal } from './IndicatorDisplayTypeCollection';
import { IndicatorDisplayType_$type } from './IndicatorDisplayType';
import { IgxFinancialChartRangeSelectorOptionCollection } from './igx-financial-chart-range-selector-option-collection';
import { FinancialChartRangeSelectorOptionCollection as FinancialChartRangeSelectorOptionCollection_internal } from './FinancialChartRangeSelectorOptionCollection';
import { FinancialChartRangeSelectorOption_$type } from './FinancialChartRangeSelectorOption';
import { IgxFinancialChartCustomIndicatorArgs } from './igx-financial-chart-custom-indicator-args';
import { CustomIndicatorNameCollection as CustomIndicatorNameCollection_internal } from './CustomIndicatorNameCollection';
import { IgxCustomIndicatorNameCollection } from './igx-custom-indicator-name-collection';
import { String_$type } from "igniteui-angular-core";
import * as i0 from "@angular/core";
import * as i1 from "./igx-financial-chart-default-templates-component";
import * as i2 from "igniteui-angular-core";
/**
* Represents a chart with an ordinal X-axis and a numeric Y-axis.
*
* **Ignite UI for Angular Financial Chart** - [Documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/FinancialChart.html)
*
* The Ignite UI Financial Chart is a lightweight, highly performant chart. It can be easily configured to display category data using an extremely simple and intuitive API. It offers multiple ways for the user to visualize data, including several display modes for price and volume, and many financial indicators.
*
* ```html
* <igx-financial-chart [dataSource]="data"
* width="850px" height="600px">
* </igx-financial-chart>
* ```
*/
var IgxFinancialChartComponent = /** @class */ /*@__PURE__*/ (function (_super) {
__extends(IgxFinancialChartComponent, _super);
function IgxFinancialChartComponent(renderer, _elRef, ngZone, injector, componentFactoryResolver) {
var _this = _super.call(this) || this;
_this.renderer = renderer;
_this._elRef = _elRef;
_this.ngZone = ngZone;
_this.injector = injector;
_this.componentFactoryResolver = componentFactoryResolver;
_this._wrapper = null;
_this._dataSource = null;
_this._defaultTooltips = null;
_this._xAxisBreaks = null;
_this._indicatorTypes = null;
_this._overlayTypes = null;
_this._indicatorDisplayTypes = null;
_this._rangeSelectorOptions = null;
_this._customIndicatorNames = null;
_this._applyCustomIndicators = null;
_this._zoneRunner = function (act) { return ngZone.run(act); };
_this.container = renderer.createElement("div");
renderer.appendChild(_elRef.element.nativeElement, _this.container);
renderer.setStyle(_this.container, "display", "block");
renderer.setStyle(_this.container, "width", "100%");
renderer.setStyle(_this.container, "height", "100%");
var root;
root = _this.container;
if (_this.container != null) {
root = _this.container;
}
var ren = new AngularRenderer(root, _this.renderer, window.document, _this.ngZone, true, DataChartStylingDefaults);
_this._wrapper = ren;
var chart = _this.i;
_this._chart = chart;
if (chart.xAxis) {
_this.rewrapAxis(chart.xAxis);
}
if (chart.yAxis) {
_this.rewrapAxis(chart.yAxis);
}
if (chart.volumeAxis) {
_this.rewrapAxis(chart.volumeAxis);
}
if (chart.volumeXAxis) {
_this.rewrapAxis(chart.volumeXAxis);
}
if (chart.indicatorAxis) {
_this.rewrapAxis(chart.indicatorAxis);
}
if (chart.indicatorXAxis) {
_this.rewrapAxis(chart.indicatorXAxis);
}
if (chart.zoomSliderAxis) {
_this.rewrapAxis(chart.zoomSliderAxis);
}
if (chart.zoomSliderXAxis) {
_this.rewrapAxis(chart.zoomSliderXAxis);
}
chart.provideContainer(ren);
_this.bindData();
chart.notifyResized();
ren.addSizeWatcher(function () {
_this._checkToolbarSize();
_this._chart.notifyResized();
});
// supports angular themes or custom properties set in CSS
_this._styling(_elRef.element.nativeElement, _this);
return _this;
}
Object.defineProperty(IgxFinancialChartComponent.prototype, "height", {
get: function () {
return this._height;
},
set: function (value) {
this._height = value;
this.renderer.setStyle(this._elRef.element.nativeElement, "height", value);
this._chart.notifyResized();
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgxFinancialChartComponent.prototype, "width", {
get: function () {
return this._width;
},
set: function (value) {
this._width = value;
this.renderer.setStyle(this._elRef.element.nativeElement, "width", value);
this._chart.notifyResized();
},
enumerable: false,
configurable: true
});
IgxFinancialChartComponent.prototype._checkToolbarSize = function () {
if (this._toolbarElement) {
var start = this._toolbarElement.nativeElement;
if (start.children.length == 1) {
start = start.children[0];
}
var toolbarRoot = start.querySelector(".financialChartToolbar");
var rootRect = toolbarRoot.getBoundingClientRect();
var hideRemaining = false;
for (var i = 0; i < toolbarRoot.children.length; i++) {
var child = toolbarRoot.children[i];
if (child.nodeType == Node.ELEMENT_NODE) {
if (!hideRemaining) {
child.style.display = "";
}
var childRect = child.getBoundingClientRect();
if (hideRemaining ||
childRect.left + childRect.width >
rootRect.left + rootRect.width) {
child.style.display = "none";
hideRemaining = true;
}
else {
child.style.display = "";
}
}
}
}
};
IgxFinancialChartComponent.prototype.ngOnDestroy = function () {
this._chart.destroy();
this._wrapper.destroy();
};
IgxFinancialChartComponent.prototype.onDocumentClick = function (ev) {
this._chart.onDocumentClick(ev);
};
IgxFinancialChartComponent.prototype.rewrapAxis = function (axis) {
var axisName = axis.$type.name;
var componentName = "Igx" + axisName + "Component";
if (TypeRegistrar.isRegistered(componentName)) {
var x = TypeRegistrar.create(componentName);
x._implementation = axis;
axis.externalObject = x;
}
else {
throw new Error("Axis type not loaded: " + componentName);
}
};
IgxFinancialChartComponent.prototype.createImplementation = function () {
return new FinancialChart();
};
Object.defineProperty(IgxFinancialChartComponent.prototype, "i", {
get: function () {
return this._implementation;
},
enumerable: false,
configurable: true
});
IgxFinancialChartComponent.prototype.createSeriesComponent = function (type) {
if (TypeRegistrar.isRegistered(type)) {
var s = TypeRegistrar.create(type);
s.owner = this;
return s;
}
else {
//we shouldn't get here, hopefully.
throw Error("series type not loaded: " + type);
}
};
IgxFinancialChartComponent.prototype.createIndicator = function (typeName) {
return this.createSeriesComponent("Igx" + typeName + "Component");
};
IgxFinancialChartComponent.prototype.createOverlay = function (typeName) {
return this.createSeriesComponent("Igx" + typeName + "Component");
};
IgxFinancialChartComponent.prototype.createSeries = function (type) {
switch (type) {
case DataSeriesType.Area:
return this.createSeriesComponent('IgxAreaSeriesComponent');
case DataSeriesType.Column:
return this.createSeriesComponent('IgxColumnSeriesComponent');
case DataSeriesType.Line:
return this.createSeriesComponent('IgxLineSeriesComponent');
case DataSeriesType.FinancialPrice:
return this.createSeriesComponent('IgxFinancialPriceSeriesComponent');
case DataSeriesType.ItemToolTipLayer:
return this.createSeriesComponent('IgxItemToolTipLayerComponent');
case DataSeriesType.CategoryToolTipLayer:
return this.createSeriesComponent('IgxCategoryToolTipLayerComponent');
case DataSeriesType.CrosshairLayer:
return this.createSeriesComponent('IgxCrosshairLayerComponent');
case DataSeriesType.FinalValueLayer:
return this.createSeriesComponent('IgxFinalValueLayerComponent');
case DataSeriesType.CalloutLayer:
return this.createSeriesComponent('IgxCalloutLayerComponent');
case DataSeriesType.DataToolTipLayer:
return this.createSeriesComponent('IgxDataToolTipLayerComponent');
case DataSeriesType.TrendLineLayer:
return this.createSeriesComponent('IgxTrendLineLayerComponent');
default:
return this.createSeriesComponent('IgxColumnSeriesComponent');
}
};
IgxFinancialChartComponent.prototype.createXAxis = function (type) {
switch (type) {
case FinancialChartXAxisMode.Ordinal:
if (TypeRegistrar.isRegistered("IgxOrdinalTimeXAxisComponent")) {
return TypeRegistrar.create("IgxOrdinalTimeXAxisComponent");
}
else if (TypeRegistrar.isRegistered("IgxTimeXAxisComponent")) {
return TypeRegistrar.create("IgxTimeXAxisComponent");
}
else {
throw new Error("not valid axes components loaded");
}
case FinancialChartXAxisMode.Time:
if (TypeRegistrar.isRegistered("IgxTimeXAxisComponent")) {
return TypeRegistrar.create("IgxTimeXAxisComponent");
}
else if (TypeRegistrar.isRegistered("IgxOrdinalTimeXAxisComponent")) {
return TypeRegistrar.create("IgxOrdinalTimeXAxisComponent");
}
else {
throw new Error("not valid axes components loaded");
}
}
};
IgxFinancialChartComponent.prototype.createYAxis = function (type) {
switch (type) {
case FinancialChartYAxisMode.Numeric:
if (TypeRegistrar.isRegistered("IgxNumericYAxisComponent")) {
return TypeRegistrar.create("IgxNumericYAxisComponent");
}
else if (TypeRegistrar.isRegistered("IgxPercentChangeYAxisComponent")) {
return TypeRegistrar.create("IgxPercentChangeYAxisComponent");
}
else {
throw new Error("not valid axes components loaded");
}
case FinancialChartYAxisMode.PercentChange:
if (TypeRegistrar.isRegistered("IgxPercentChangeYAxisComponent")) {
return TypeRegistrar.create("IgxPercentChangeYAxisComponent");
}
else if (TypeRegistrar.isRegistered("IgxNumericYAxisComponent")) {
return TypeRegistrar.create("IgxNumericYAxisComponent");
}
else {
throw new Error("not valid axes components loaded");
}
}
};
IgxFinancialChartComponent.prototype.createTimeAxisBreakCollection = function () {
return TypeRegistrar.isRegistered("IgxTimeAxisBreakCollection") ? TypeRegistrar.create("IgxTimeAxisBreakCollection") : null;
};
Object.defineProperty(IgxFinancialChartComponent.prototype, "dataSource", {
get: function () {
return this._dataSource;
},
set: function (value) {
this._dataSource = value;
this.bindData();
},
enumerable: false,
configurable: true
});
IgxFinancialChartComponent.prototype.bindData = function () {
if (this._chart != null && this._chart !== undefined) {
this._chart.itemsSource = this._dataSource;
}
};
IgxFinancialChartComponent.prototype.ngAfterViewInit = function () {
var _this = this;
if (TypeRegistrar.isRegistered("IgxDataChartDefaultTooltipsComponent")) {
var c = TypeRegistrar.get("IgxDataChartDefaultTooltipsComponent");
var cf = this.componentFactoryResolver.resolveComponentFactory(c);
//let cr = cf.create(this.injector);
var cr_1 = this._dynamicContent.createComponent(cf);
this._defaultTooltips = cr_1;
cr_1.instance.onContentReady.subscribe(function () {
_this._onDefaultTooltipsReady(cr_1);
});
this.container.appendChild(cr_1.location.nativeElement);
}
var context = this._chart.getContext();
var toolbarContext = context.vm.toolbar;
toolbarContext.vm.financialChartIndicatorMenu.template = this.indicatorMenuTemplate ? this.indicatorMenuTemplate : this._defaultTemplates.financialChartIndicatorMenuTemplate;
toolbarContext.vm.financialChartIndicatorMenu.vm.notifyChanged = function () { toolbarArea.context = toolbarContext; };
toolbarContext.vm.financialChartTypePicker.template = this.chartTypePickerTemplate ? this.chartTypePickerTemplate : this._defaultTemplates.financialChartTypePickerTemplate;
toolbarContext.vm.financialChartTypePicker.vm.notifyChanged = function () { toolbarArea.context = toolbarContext; };
toolbarContext.vm.financialChartRangeSelector.template = this.rangeSelectorTemplate ? this.rangeSelectorTemplate : this._defaultTemplates.financialChartRangeSelectorTemplate;
toolbarContext.vm.financialChartRangeSelector.vm.notifyChanged = function () { toolbarArea.context = toolbarContext; };
toolbarContext.template = this.toolbarTemplate ? this.toolbarTemplate : this._defaultTemplates.financialChartToolbarTemplate;
var toolContainer = toolbarContext.container.rootWrapper.getNativeElement();
var toolbarArea = this._templates.toArray()[0];
var mainArea = this._templates.toArray()[1];
toolbarArea.context = toolbarContext;
toolbarArea.template = toolbarContext.template;
var ele = this._toolbarElement.nativeElement;
ele.style.width = "100%";
ele.style.height = "100%";
if (ele.parentElement != null) {
ele.parentElement.removeChild(ele);
}
toolContainer.appendChild(ele);
this.renderer.setStyle(ele, "display", "");
var legendContainer = context.legendContainer.rootWrapper.getNativeElement();
var mainContainer = context.container.rootWrapper.getNativeElement();
var indicatorContainer = context.indicatorsContainer.rootWrapper.getNativeElement();
var volumeContainer = context.volumeContainer.rootWrapper.getNativeElement();
var zoomSliderContainer = context.zoomContainer.rootWrapper.getNativeElement();
var main = mainArea.viewContainer.element.nativeElement;
var templateMain = main.querySelector(".financialChartPrice");
var templateToolbar = main.querySelector(".financialChartToolbar");
var templateLegend = main.querySelector(".financialChartLegend");
var templateIndicator = main.querySelector(".financialChartIndicators");
var templateVolume = main.querySelector(".financialChartVolume");
var templateZoomSlider = main.querySelector(".financialChartZoomSlider");
var grid = main.querySelector(".financialChartMainGrid");
var gridWrapper = new AngularWrapper(grid, this.renderer, this.ngZone);
templateMain.appendChild(mainContainer);
templateToolbar.appendChild(toolContainer);
templateLegend.appendChild(legendContainer);
templateIndicator.appendChild(indicatorContainer);
templateVolume.appendChild(volumeContainer);
templateZoomSlider.appendChild(zoomSliderContainer);
this._mainElement.nativeElement.parentElement.removeChild(this._mainElement.nativeElement);
this.container.appendChild(this._mainElement.nativeElement);
this._chart.provideGrid(gridWrapper);
this._checkToolbarSize();
};
IgxFinancialChartComponent.prototype._createZoomSlider = function (hostEle, onReady) {
if (!TypeRegistrar.isRegistered("IgxZoomSliderComponent")) {
//shouldn't happen.
throw new Error("zoom slider component isn't loaded");
}
var t = TypeRegistrar.get("IgxZoomSliderComponent");
var cf = this.componentFactoryResolver.resolveComponentFactory(t);
var cr = this._dynamicContent.createComponent(cf);
var ele = cr.location.nativeElement;
ele.style.width = "100%";
ele.style.height = "100%";
cr.instance.width = "100%";
cr.instance.height = "100%";
if (ele.parentElement !== null) {
ele.parentElement.removeChild(ele);
}
hostEle.appendChild(ele);
onReady(cr.instance);
};
IgxFinancialChartComponent.prototype.createTooltip = function () {
if (!TypeRegistrar.isRegistered("IgxTooltipContainerComponent")) {
return null;
}
var t = TypeRegistrar.get("IgxTooltipContainerComponent");
var cf = this.componentFactoryResolver.resolveComponentFactory(t);
//let cr = cf.create(this.injector);
var cr = this._dynamicContent.createComponent(cf);
var ele = cr.location.nativeElement;
var self = this;
ele.updateToolTip = function (c, isSubContent) {
if (c.externalObject) {
c = c.externalObject;
}
else {
var ext = new IgxDataContext();
ext._implementation = c;
c = ext;
}
if (!isSubContent) {
if (ele.parentElement != self.container) {
if (ele.parentElement != null) {
ele.parentElement.removeChild(ele);
}
self.container.appendChild(ele);
}
}
else {
c.isSubContent = true;
}
cr.instance.context = c;
ele.style.display = "block";
return true;
};
ele.hideToolTip = function () {
ele.style.display = "none";
};
ele.style.display = "none";
return cr;
};
IgxFinancialChartComponent.prototype._ensureTooltipCreated = function (series) {
var _this = this;
series._ensureTooltipCreated(function () { return _this.createTooltip(); }, function (ele) {
var wrapper = new AngularWrapper(ele, _this.renderer, _this.ngZone);
wrapper.updateToolTip = ele.updateToolTip;
wrapper.hideToolTip = ele.hideToolTip;
return wrapper;
});
};
// private _createXAxis(): any {
// let x = new IgxCategoryXAxisComponent();
// return x.i;
// }
// private _createYAxis(): any {
// let y = new IgxNumericYAxisComponent();
// return y.i;
// }
IgxFinancialChartComponent.prototype._ensureDefaultTooltip = function (series) {
if (this._defaultTooltips == null) {
return;
}
this._defaultTooltips.instance["ensureDefaultTooltip"](series);
};
IgxFinancialChartComponent.prototype._onDefaultTooltipsReady = function (cr) {
if (this.i.dataChart) {
var currSeries = this.i.dataChart.series;
for (var i = 0; i < currSeries.count; i++) {
if (currSeries.item(i).externalObject.showDefaultTooltip) {
this._ensureDefaultTooltip(currSeries.item(i).externalObject);
}
}
}
};
IgxFinancialChartComponent.prototype.onImplementationCreated = function () {
_super.prototype.onImplementationCreated.call(this);
};
Object.defineProperty(IgxFinancialChartComponent.prototype, "xAxisBreaks", {
/**
* TimeAxisBreaks to apply to this chart when in time axis mode, representing spans of time to omit, such as weekends.
*/
get: function () {
if (this._xAxisBreaks === null) {
if (!TypeRegistrar.isRegistered("IgxTimeAxisBreakCollection")) {
return null;
}
var coll = TypeRegistrar.create("IgxTimeAxisBreakCollection");
var innerColl = this.i.xAxisBreaks;
if (!innerColl) {
innerColl = TypeRegistrar.create("TimeAxisBreakCollection");
}
this._xAxisBreaks = coll._fromInner(innerColl);
}
return this._xAxisBreaks;
},
set: function (v) {
if (this._xAxisBreaks !== null) {
this._xAxisBreaks._setSyncTarget(null);
this._xAxisBreaks = null;
}
if (!TypeRegistrar.isRegistered("IgxTimeAxisBreakCollection")) {
return;
}
var coll = TypeRegistrar.create("IgxTimeAxisBreakCollection");
var t = TypeRegistrar.get("TimeAxisBreak");
this._xAxisBreaks = coll._fromOuter(v);
var syncColl = new SyncableObservableCollection$1(t.$type);
var innerColl = this.i.xAxisBreaks;
if (!innerColl) {
innerColl = TypeRegistrar.create("TimeAxisBreakCollection");
}
syncColl._inner = innerColl;
syncColl.clear();
this._xAxisBreaks._setSyncTarget(syncColl);
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgxFinancialChartComponent.prototype, "leftMargin", {
get: function () {
return this.i.kg;
},
set: function (v) {
this.i.kg = +v;
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgxFinancialChartComponent.prototype, "isHorizontalZoomEnabled", {
get: function () {
return this.i.hg;
},
set: function (v) {
this.i.hg = ensureBool(v);
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgxFinancialChartComponent.prototype, "toolbarHeight", {
get: function () {
return this.i.amz;
},
set: function (v) {
this.i.amz = +v;
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgxFinancialChartComponent.prototype, "domainType", {
/**
* Gets domain type of this chart
*/
get: function () {
return this.i.cd;
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgxFinancialChartComponent.prototype, "yAxisIsLogarithmic", {
/**
* Gets or sets whether the Y-axis should use a logarithmic scale instead of a linear one.
* Since log(-1) is imaginary and log(0) is undefined, it is recommended to enable this property only when the Y-axis minimum is greater than zero.
*/
get: function () {
return this.i.aly;
},
set: function (v) {
this.i.aly = ensureBool(v);
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgxFinancialChartComponent.prototype, "yAxisLogarithmBase", {
/**
* Gets or sets the base value to use in the log function when mapping the position of data items along the Y-axis.
* This property is effective only when YAxisIsLogarithmic is true.
*/
get: function () {
return this.i.anw;
},
set: function (v) {
this.i.anw = +v;
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgxFinancialChartComponent.prototype, "yAxisInterval", {
/**
* Gets or sets the distance between each label and grid line along the Y-axis.
*
* The `YAxisInterval` determines how often to show a label, tickmark, and/or gridline along the y-axis. Set this property to a number less than the numeric range of the y-axis.
*
* ```html
* <igx-financial-chart
* [dataSource]="data"
* yAxisInterval="10">
* </igx-financial-chart>
* ```
*/
get: function () {
return this.i.am8;
},
set: function (v) {
this.i.am8 = +v;
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgxFinancialChartComponent.prototype, "yAxisMinimumValue", {
/**
* Gets or sets the data value corresponding to the minimum value of the Y-axis.
*
* The `YAxisMinimumValue` determines starting value of labels, tickmarks, and gridlines on the y-axis.
*
* ```html
* <igx-financial-chart
* [dataSource]="data"
* yAxisMinimumValue="10">
* </igx-financial-chart>
* ```
*/
get: function () {
return this.i.ana;
},
set: function (v) {
this.i.ana = +v;
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgxFinancialChartComponent.prototype, "yAxisMaximumValue", {
/**
* Gets or sets the data value corresponding to the maximum value of the Y-axis.
*
* The `YAxisMaximumValue` determines ending value of labels, tickmarks, and gridlines on the y-axis.
*
* ```html
* <igx-financial-chart
* [dataSource]="data"
* yAxisMaximumValue="100">
* </igx-financial-chart>
* ```
*/
get: function () {
return this.i.am9;
},
set: function (v) {
this.i.am9 = +v;
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgxFinancialChartComponent.prototype, "yAxisMinorInterval", {
/**
* Gets or sets the frequency of displayed minor lines along the Y-axis.
*
* The `YAxisMinorInterval` determines how often to show minor gridline along the y-axis. Set this property to a number less than the `YAxisInterval` and the numeric range of the y-axis.
*
* ```html
* <igx-financial-chart
* [dataSource]="data"
* yAxisMinorInterval="5">
* </igx-financial-chart>
* ```
*/
get: function () {
return this.i.anb;
},
set: function (v) {
this.i.anb = +v;
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgxFinancialChartComponent.prototype, "yAxisActualMinimum", {
/**
* Gets the current minimum value for the Y-axis.
*/
get: function () {
return this.i.am7;
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgxFinancialChartComponent.prototype, "yAxisActualMaximum", {
/**
* Gets the current maximum value for the Y-axis.
*/
get: function () {
return this.i.am6;
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgxFinancialChartComponent.prototype, "volumeType", {
/**
* The type of series to display in the volume pane.
*
* Use the `VolumeType` property to set a type of all series that will be rendered in the volume pane, e.g.
*
* ```html
* <igx-financial-chart
* [dataSource]="data"
* volumeType="Column">
* </igx-financial-chart>
* ```
*/
get: function () {
return this.i.ajy;
},
set: function (v) {
this.i.ajy = ensureEnum(FinancialChartVolumeType_$type, v);
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgxFinancialChartComponent.prototype, "xAxisMode", {
/**
* The scaling mode of the X-axis.
*
* Use the `XAxisMode` property to plot data items without any breaks in data range (Ordinal mode) or with breaks in data range (Time mode) such as weekends/holidays. Note that the Ordinal axis mode is less expensive to use in the financial chart than the Time axis mode.
*
* ```html
* <igx-financial-chart
* [dataSource]="data"
* xAxisMode="Time">
* </igx-financial-chart>
* ```
*/
get: function () {
return this.i.aj0;
},
set: function (v) {
this.i.aj0 = ensureEnum(FinancialChartXAxisMode_$type, v);
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgxFinancialChartComponent.prototype, "xAxisZoomMaximumCategoryRange", {
/**
* Gets or sets number of visible categories at maximum zooming level
* This property works only with ordinal XAxisMode and it is overridden by chart's WindowRectMinWidth property
*/
get: function () {
return this.i.am1;
},
set: function (v) {
this.i.am1 = +v;
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgxFinancialChartComponent.prototype, "xAxisZoomToCategoryStart", {
/**
* Gets or sets starting category that chart will move its zoom window. Acceptable value is between 0 and number of data items
* This property works only with ordinal XAxisMode and it is overridden by chart's WindowRect or WindowScaleHorizontal properties
*/
get: function () {
return this.i.am4;
},
set: function (v) {
this.i.am4 = +v;
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgxFinancialChartComponent.prototype, "xAxisZoomMaximumItemSpan", {
/**
* Gets or sets maximum pixel span of series item that will be visible at maximum zooming level
* This property ensures that series item does not get stretch above specified value.
* This property works only with ordinal XAxisMode and it is overridden by chart's WindowRectMinWidth property
*/
get: function () {
return this.i.am2;
},
set: function (v) {
this.i.am2 = +v;
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgxFinancialChartComponent.prototype, "xAxisZoomToCategoryRange", {
/**
* Gets or sets number of categories that the chart will zoom in and fill plot area
* This property is overridden by chart's WindowRect or WindowScaleHorizontal properties
*/
get: function () {
return this.i.am3;
},
set: function (v) {
this.i.am3 = +v;
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgxFinancialChartComponent.prototype, "xAxisZoomToItemSpan", {
/**
* Gets or sets pixel span of series item that will be used to zoom chart such that the item has desired span
* Chart will automatically zoom in until series item has specified pixel span.
* This property works only with ordinal XAxisMode and it is overridden by chart's WindowRect or WindowScaleHorizontal properties
*/
get: function () {
return this.i.am5;
},
set: function (v) {
this.i.am5 = +v;
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgxFinancialChartComponent.prototype, "yAxisMode", {
/**
* The scaling mode of the Y-axis.
*
* Use the `YAxisMode` property to plot data items using their actual values (Numeric) or using percent changes from the first data point (PercentChange), e.g.
*
* ```html
* <igx-financial-chart
* [dataSource]="data"
* yAxisMode="PercentChange">
* </igx-financial-chart>
* ```
*/
get: function () {
return this.i.aj2;
},
set: function (v) {
this.i.aj2 = ensureEnum(FinancialChartYAxisMode_$type, v);
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgxFinancialChartComponent.prototype, "isToolbarVisible", {
/**
* A boolean property controlling the visibility of the toolbar.
*/
get: function () {
return this.i.alr;
},
set: function (v) {
this.i.alr = ensureBool(v);
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgxFinancialChartComponent.prototype, "chartType", {
/**
* The type of price series to display in the main chart.
*
* Use the `ChartType` property to set a type of series that will be used to render prices in the Financial Chart control, e.g.
*
* ```html
* <igx-financial-chart
* [dataSource]="data"
* chartType="Candle">
* </igx-financial-chart>
* ```
*/
get: function () {
return this.i.ajt;
},
set: function (v) {
this.i.ajt = ensureEnum(FinancialChartType_$type, v);
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgxFinancialChartComponent.prototype, "yAxisLabelHorizontalAlignment", {
/**
* Gets or sets Horizontal alignment of Y-axis labels.
*/
get: function () {
return this.i.ahl;
},
set: function (v) {
this.i.ahl = ensureEnum(HorizontalAlignment_$type, v);
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgxFinancialChartComponent.prototype, "isWindowSyncedToVisibleRange", {
/**
* A boolean indicating whether the chart should automatically zoom in vertically on the currently visible range of data.
* When this property is set to true, panning and zooming along the X-axis will result in a corresponding zoom on the Y-axis, so that the visible range of data fills the zoom window as fully as possible.
*/
get: function () {
return this.i.als;
},
set: function (v) {
this.i.als = ensureBool(v);
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgxFinancialChartComponent.prototype, "indicatorTypes", {
/**
* A collection indicating what financial indicator types to display on the Financial Chart.
*
* Use the `IndicatorTypes` property to set types of indicators that will be rendered below the price pane in the Financial Chart control, e.g.
*
* ```html
* <igx-financial-chart
* [dataSource]="data"
* indicatorTypes="MoneyFlowIndex, AverageTrueRange">
* </igx-financial-chart>
* ```
*/
get: function () {
if (this._indicatorTypes === null) {
var coll = new IgxFinancialIndicatorTypeCollection();
var innerColl = this.i.aj7;
if (!innerColl) {
innerColl = new FinancialIndicatorTypeCollection_internal(0);
}
this._indicatorTypes = coll._fromInner(innerColl);
this.i.aj7 = innerColl;
}
return this._indicatorTypes;
},
set: function (v) {
if (this._indicatorTypes !== null) {
this._indicatorTypes._setSyncTarget(null);
this._indicatorTypes = null;
}
var coll = new IgxFinancialIndicatorTypeCollection();
this._indicatorTypes = coll._fromOuter(v);
var syncColl = new SyncableObservableCollection$1(FinancialIndicatorType_$type);
var innerColl = this.i.aj7;
if (!innerColl) {
innerColl = new FinancialIndicatorTypeCollection_internal(0);
}
syncColl._inner = innerColl;
syncColl.clear();
this._indicatorTypes._setSyncTarget(syncColl);
this.i.aj7 = innerColl;
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgxFinancialChartComponent.prototype, "overlayTypes", {
/**
* A collection indicating what financial overlay types to display on the Financial Chart.
*
* Use the `OverlayTypes` property to set types of overlays that will be rendered behind price series in the Financial Chart control, e.g.
*
* ```html
* <igx-financial-chart
* [dataSource]="data"
* overlayTypes="BollingerBands">
* </igx-financial-chart>
* ```
*/
get: function () {
if (this._overlayTypes === null) {
var coll = new IgxFinancialOverlayTypeCollection();
var innerColl = this.i.aj9;
if (!innerColl) {
innerColl = new FinancialOverlayTypeCollection_internal(0);
}
this._overlayTypes = coll._fromInner(innerColl);
this.i.aj9 = innerColl;
}
return this._overlayTypes;
},
set: function (v) {
if (this._overlayTypes !== null) {
this._overlayTypes._setSyncTarget(null);
this._overlayTypes = null;
}
var coll = new IgxFinancialOverlayTypeCollection();
this._overlayTypes = coll._fromOuter(v);
var syncColl = new SyncableObservableCollection$1(FinancialOverlayType_$type);
var innerColl = this.i.aj9;
if (!innerColl) {
innerColl = new FinancialOverlayTypeCollection_internal(0);
}
syncColl._inner = innerColl;
syncColl.clear();
this._overlayTypes._setSyncTarget(syncColl);
this.i.aj9 = innerColl;
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgxFinancialChartComponent.prototype, "yAxisAbbreviateLargeNumbers", {
/**
* Gets or sets whether the large numbers on the Y-axis labels are abbreviated.
*/
get: function () {
return this.i.alw;
},
set: function (v) {
this.i.alw = ensureBool(v);
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgxFinancialChartComponent.prototype, "resolution", {
/**
* Gets or sets the rendering resolution for all series in this chart.
* Where n = Resolution, for every n horizontal pixels, combine all items into a single datapoint. When Resolution = 0, all datapoints will be rendered as graphical objects. Charts with a higher resolution will have faster performance.
*/
get: function () {
return this.i.ko;
},
set: function (v) {
this.i.ko = +v;
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgxFinancialChartComponent.prototype, "xAxisEnhancedIntervalPreferMoreCategoryLabels", {
/**
* Gets or sets whether the x axis enhanced interval management should prefer to show all the labels if possible without collisions for supported types of category axes. This is for use with EnhancedIntervalMinimumCharacters = -1 and axes that have an integral interval.
*/
get: function () {
return this.i.alv;
},
set: function (v) {
this.i.alv = ensureBool(v);
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgxFinancialChartComponent.prototype, "yAxisEnhancedIntervalPreferMoreCategoryLabels", {
/**
* Gets or sets whether the y axis enhanced interval management should prefer to show all the labels if possible without collisions for supported types of category axes. This is for use with EnhancedIntervalMinimumCharacters = -1 and axes that have an integral interval.
*/
get: function () {
return this.i.alx;
},
set: function (v) {
this.i.alx = ensureBool(v);
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgxFinancialChartComponent.prototype, "zoomSliderType", {
/**
* Gets or sets type of series to display in the zoom slider pane.
*
* Use the `ZoomSliderType` property to set a type of all series that will be rendered in the zoom pane, e.g.
*
* ```html
* <igx-financial-chart
* [dataSource]="data"
* zoomSliderType="Candle">
* </igx-financial-chart>
* ```
*/
get: function () {
return this.i.aj5;
},
set: function (v) {
this.i.aj5 = ensureEnum(FinancialChartZoomSliderType_$type, v);
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgxFinancialChartComponent.prototype, "negativeBrushes", {
/**
* Gets or sets the palette used for coloring negative items of Waterfall chart type.
*
* Use the `NegativeBrushes` property to set a collection of brushes that will be used to render fill area of negative elements in the price pane, e.g.
*
* ```html
* <igx-financial-chart
* [dataSource]="data"
* negativeBrushes="Red, Orange">
* </igx-financial-chart>
* ```
*/
get: function () {
return fromBrushCollection(this.i.ai2);
},
set: function (v) {
this.i.ai2 = toBrushCollection(v);
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgxFinancialChartComponent.prototype, "negativeOutlines", {
/**
* Brushes to use for drawing negative elements, when using a chart type with contextual coloring, such as Waterfall.
*
* Use the `NegativeOutlines` property to set a collection of brushes that will be used to render outline of negative elements in the price pane, e.g.
*
* ```html
* <igx-financial-chart
* [dataSource]="data"
* negativeOutlines="Red, Orange">
* </igx-financial-chart>
* ```
*/
get: function () {
return fromBrushCollection(this.i.ai3);
},
set: function (v) {
this.i.ai3 = toBrushCollection(v);
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgxFinancialChartComponent.prototype, "overlayBrushes", {
/**
* Brushes to use for filling financial overlays.
*
* Use the `OverlayBrushes` property to set a collection of brushes that will be used to render fill area of overlays in the Financial Chart control, e.g.
*
* ```html
* <igx-financial-chart
* [dataSource]="data"
* overlayTypes="BollingerBands"
* overlayBrushes="Green">
* </igx-financial-chart>
* ```
*/
get: function () {
return fromBrushCollection(this.i.ai4);
},
set: function (v) {
this.i.ai4 = toBrushCollection(v);
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgxFinancialChartComponent.prototype, "overlayOutlines", {
/**
* Brushes to use for outlining financial overlays.
*
* Use the `OverlayOutlines` property to set a collection of brushes that will be used to render outlines of overlays in the Financial Chart control, e.g.
*
* ```html
* <igx-financial-chart
* [dataSource]="data"
* overlayTypes="BollingerBands"
* overlayOutlines="Green">
* </igx-financial-chart>
* ```
*/
get: function () {
return fromBrushCollection(this.i.ai5);
},
set: function (v) {
this.i.ai5 = toBrushCollection(v);
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgxFinancialChartComponent.prototype, "volumeOutlines", {
/**
* Brushes to use for outlining volume series in the volume pane.
*
* Use the `VolumeOutlines` property to set a collection of brushes that will be used to render outline of multiple series in the volume pane of the Financial Chart control, e.g.
*
* ```html
* <igx-financial-chart
* [dataSource]="data"
* volumeOutlines="Green, Blue">
* </igx-financial-chart>
* ```
*/
get: function () {
return fromBrushCollection(this.i.ai7);
},
set: function (v) {
this.i.ai7 = toBrushCollection(v);
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgxFinancialChartComponent.prototype, "volumeBrushes", {
/**
* Brushes to use for filling volume series in the volume pane.
*
* Use the `VolumeBrushes` property to set a collection of brushes that will be used to render fill area of multiple series in the volume pane of the Financial Chart control, e.g.
*
* ```html
* <igx-financial-chart
* [dataSource]="data"
* volumeBrushes="Green, Blue">
* </igx-financial-chart>
* ```
*/
get: function () {
return fromBrushCollection(this.i.ai6);
},
set: function (v) {
this.i.ai6 = toBrushCollection(v);
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgxFinancialChartComponent.prototype, "indicatorNegativeBrushes", {
/**
* Brushes to use for negative elements in financial indicators.
*
* Use the `IndicatorNegativeBrushes` property to set a collection of brushes that will be used to render negative elements of