igniteui-angular-charts
Version:
Ignite UI Angular charting components for building rich data visualizations for modern web apps.
1,163 lines • 75.6 kB
JavaScript
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>
* ```
*/
export let IgxFinancialChartComponent = /*@__PURE__*/ (() => {
class IgxFinancialChartComponent extends IgxXYChartComponent {
constructor(renderer, _elRef, ngZone, injector, componentFactoryResolver) {
super();
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 = (act) => 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(() => {
this._checkToolbarSize();
this._chart.notifyResized();
});
// supports angular themes or custom properties set in CSS
this._styling(_elRef.element.nativeElement, this);
}
set height(value) {
this._height = value;
this.renderer.setStyle(this._elRef.element.nativeElement, "height", value);
this._chart.notifyResized();
}
get height() {
return this._height;
}
set width(value) {
this._width = value;
this.renderer.setStyle(this._elRef.element.nativeElement, "width", value);
this._chart.notifyResized();
}
get width() {
return this._width;
}
_checkToolbarSize() {
if (this._toolbarElement) {
let start = this._toolbarElement.nativeElement;
if (start.children.length == 1) {
start = start.children[0];
}
let toolbarRoot = start.querySelector(".financialChartToolbar");
let rootRect = toolbarRoot.getBoundingClientRect();
let hideRemaining = false;
for (let i = 0; i < toolbarRoot.children.length; i++) {
let child = toolbarRoot.children[i];
if (child.nodeType == Node.ELEMENT_NODE) {
if (!hideRemaining) {
child.style.display = "";
}
let childRect = child.getBoundingClientRect();
if (hideRemaining ||
childRect.left + childRect.width >
rootRect.left + rootRect.width) {
child.style.display = "none";
hideRemaining = true;
}
else {
child.style.display = "";
}
}
}
}
}
ngOnDestroy() {
this._chart.destroy();
this._wrapper.destroy();
}
onDocumentClick(ev) {
this._chart.onDocumentClick(ev);
}
rewrapAxis(axis) {
let axisName = axis.$type.name;
let componentName = "Igx" + axisName + "Component";
if (TypeRegistrar.isRegistered(componentName)) {
let x = TypeRegistrar.create(componentName);
x._implementation = axis;
axis.externalObject = x;
}
else {
throw new Error("Axis type not loaded: " + componentName);
}
}
createImplementation() {
return new FinancialChart();
}
get i() {
return this._implementation;
}
createSeriesComponent(type) {
if (TypeRegistrar.isRegistered(type)) {
let s = TypeRegistrar.create(type);
s.owner = this;
return s;
}
else {
//we shouldn't get here, hopefully.
throw Error("series type not loaded: " + type);
}
}
createIndicator(typeName) {
return this.createSeriesComponent("Igx" + typeName + "Component");
}
createOverlay(typeName) {
return this.createSeriesComponent("Igx" + typeName + "Component");
}
createSeries(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');
}
}
createXAxis(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");
}
}
}
createYAxis(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");
}
}
}
createTimeAxisBreakCollection() {
return TypeRegistrar.isRegistered("IgxTimeAxisBreakCollection") ? TypeRegistrar.create("IgxTimeAxisBreakCollection") : null;
}
set dataSource(value) {
this._dataSource = value;
this.bindData();
}
get dataSource() {
return this._dataSource;
}
bindData() {
if (this._chart != null && this._chart !== undefined) {
this._chart.itemsSource = this._dataSource;
}
}
ngAfterViewInit() {
if (TypeRegistrar.isRegistered("IgxDataChartDefaultTooltipsComponent")) {
let c = TypeRegistrar.get("IgxDataChartDefaultTooltipsComponent");
let cf = this.componentFactoryResolver.resolveComponentFactory(c);
//let cr = cf.create(this.injector);
let cr = this._dynamicContent.createComponent(cf);
this._defaultTooltips = cr;
cr.instance.onContentReady.subscribe(() => {
this._onDefaultTooltipsReady(cr);
});
this.container.appendChild(cr.location.nativeElement);
}
let context = this._chart.getContext();
let toolbarContext = context.vm.toolbar;
toolbarContext.vm.financialChartIndicatorMenu.template = this.indicatorMenuTemplate ? this.indicatorMenuTemplate : this._defaultTemplates.financialChartIndicatorMenuTemplate;
toolbarContext.vm.financialChartIndicatorMenu.vm.notifyChanged = () => { toolbarArea.context = toolbarContext; };
toolbarContext.vm.financialChartTypePicker.template = this.chartTypePickerTemplate ? this.chartTypePickerTemplate : this._defaultTemplates.financialChartTypePickerTemplate;
toolbarContext.vm.financialChartTypePicker.vm.notifyChanged = () => { toolbarArea.context = toolbarContext; };
toolbarContext.vm.financialChartRangeSelector.template = this.rangeSelectorTemplate ? this.rangeSelectorTemplate : this._defaultTemplates.financialChartRangeSelectorTemplate;
toolbarContext.vm.financialChartRangeSelector.vm.notifyChanged = () => { toolbarArea.context = toolbarContext; };
toolbarContext.template = this.toolbarTemplate ? this.toolbarTemplate : this._defaultTemplates.financialChartToolbarTemplate;
let toolContainer = toolbarContext.container.rootWrapper.getNativeElement();
let toolbarArea = this._templates.toArray()[0];
let mainArea = this._templates.toArray()[1];
toolbarArea.context = toolbarContext;
toolbarArea.template = toolbarContext.template;
let 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", "");
let legendContainer = context.legendContainer.rootWrapper.getNativeElement();
let mainContainer = context.container.rootWrapper.getNativeElement();
let indicatorContainer = context.indicatorsContainer.rootWrapper.getNativeElement();
let volumeContainer = context.volumeContainer.rootWrapper.getNativeElement();
let zoomSliderContainer = context.zoomContainer.rootWrapper.getNativeElement();
var main = mainArea.viewContainer.element.nativeElement;
let templateMain = main.querySelector(".financialChartPrice");
let templateToolbar = main.querySelector(".financialChartToolbar");
let templateLegend = main.querySelector(".financialChartLegend");
let templateIndicator = main.querySelector(".financialChartIndicators");
let templateVolume = main.querySelector(".financialChartVolume");
let templateZoomSlider = main.querySelector(".financialChartZoomSlider");
let grid = main.querySelector(".financialChartMainGrid");
let 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();
}
_createZoomSlider(hostEle, onReady) {
if (!TypeRegistrar.isRegistered("IgxZoomSliderComponent")) {
//shouldn't happen.
throw new Error("zoom slider component isn't loaded");
}
let t = TypeRegistrar.get("IgxZoomSliderComponent");
let cf = this.componentFactoryResolver.resolveComponentFactory(t);
let cr = this._dynamicContent.createComponent(cf);
let 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);
}
createTooltip() {
if (!TypeRegistrar.isRegistered("IgxTooltipContainerComponent")) {
return null;
}
let t = TypeRegistrar.get("IgxTooltipContainerComponent");
let cf = this.componentFactoryResolver.resolveComponentFactory(t);
//let cr = cf.create(this.injector);
let cr = this._dynamicContent.createComponent(cf);
let ele = cr.location.nativeElement;
let self = this;
ele.updateToolTip = function (c, isSubContent) {
if (c.externalObject) {
c = c.externalObject;
}
else {
let 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;
}
_ensureTooltipCreated(series) {
series._ensureTooltipCreated(() => this.createTooltip(), (ele) => {
let 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;
// }
_ensureDefaultTooltip(series) {
if (this._defaultTooltips == null) {
return;
}
this._defaultTooltips.instance["ensureDefaultTooltip"](series);
}
_onDefaultTooltipsReady(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);
}
}
}
}
onImplementationCreated() {
super.onImplementationCreated();
}
/**
* TimeAxisBreaks to apply to this chart when in time axis mode, representing spans of time to omit, such as weekends.
*/
get xAxisBreaks() {
if (this._xAxisBreaks === null) {
if (!TypeRegistrar.isRegistered("IgxTimeAxisBreakCollection")) {
return null;
}
let coll = TypeRegistrar.create("IgxTimeAxisBreakCollection");
let innerColl = this.i.xAxisBreaks;
if (!innerColl) {
innerColl = TypeRegistrar.create("TimeAxisBreakCollection");
}
this._xAxisBreaks = coll._fromInner(innerColl);
}
return this._xAxisBreaks;
}
set xAxisBreaks(v) {
if (this._xAxisBreaks !== null) {
this._xAxisBreaks._setSyncTarget(null);
this._xAxisBreaks = null;
}
if (!TypeRegistrar.isRegistered("IgxTimeAxisBreakCollection")) {
return;
}
let coll = TypeRegistrar.create("IgxTimeAxisBreakCollection");
let t = TypeRegistrar.get("TimeAxisBreak");
this._xAxisBreaks = coll._fromOuter(v);
let syncColl = new SyncableObservableCollection$1(t.$type);
let innerColl = this.i.xAxisBreaks;
if (!innerColl) {
innerColl = TypeRegistrar.create("TimeAxisBreakCollection");
}
syncColl._inner = innerColl;
syncColl.clear();
this._xAxisBreaks._setSyncTarget(syncColl);
}
get leftMargin() {
return this.i.kg;
}
set leftMargin(v) {
this.i.kg = +v;
}
get isHorizontalZoomEnabled() {
return this.i.hg;
}
set isHorizontalZoomEnabled(v) {
this.i.hg = ensureBool(v);
}
get toolbarHeight() {
return this.i.amz;
}
set toolbarHeight(v) {
this.i.amz = +v;
}
/**
* Gets domain type of this chart
*/
get domainType() {
return this.i.cd;
}
/**
* 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 yAxisIsLogarithmic() {
return this.i.aly;
}
set yAxisIsLogarithmic(v) {
this.i.aly = ensureBool(v);
}
/**
* 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 yAxisLogarithmBase() {
return this.i.anw;
}
set yAxisLogarithmBase(v) {
this.i.anw = +v;
}
/**
* 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 yAxisInterval() {
return this.i.am8;
}
set yAxisInterval(v) {
this.i.am8 = +v;
}
/**
* 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 yAxisMinimumValue() {
return this.i.ana;
}
set yAxisMinimumValue(v) {
this.i.ana = +v;
}
/**
* 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 yAxisMaximumValue() {
return this.i.am9;
}
set yAxisMaximumValue(v) {
this.i.am9 = +v;
}
/**
* 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 yAxisMinorInterval() {
return this.i.anb;
}
set yAxisMinorInterval(v) {
this.i.anb = +v;
}
/**
* Gets the current minimum value for the Y-axis.
*/
get yAxisActualMinimum() {
return this.i.am7;
}
/**
* Gets the current maximum value for the Y-axis.
*/
get yAxisActualMaximum() {
return this.i.am6;
}
/**
* 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 volumeType() {
return this.i.ajy;
}
set volumeType(v) {
this.i.ajy = ensureEnum(FinancialChartVolumeType_$type, v);
}
/**
* 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 xAxisMode() {
return this.i.aj0;
}
set xAxisMode(v) {
this.i.aj0 = ensureEnum(FinancialChartXAxisMode_$type, v);
}
/**
* 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 xAxisZoomMaximumCategoryRange() {
return this.i.am1;
}
set xAxisZoomMaximumCategoryRange(v) {
this.i.am1 = +v;
}
/**
* 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 xAxisZoomToCategoryStart() {
return this.i.am4;
}
set xAxisZoomToCategoryStart(v) {
this.i.am4 = +v;
}
/**
* 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 xAxisZoomMaximumItemSpan() {
return this.i.am2;
}
set xAxisZoomMaximumItemSpan(v) {
this.i.am2 = +v;
}
/**
* 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 xAxisZoomToCategoryRange() {
return this.i.am3;
}
set xAxisZoomToCategoryRange(v) {
this.i.am3 = +v;
}
/**
* 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 xAxisZoomToItemSpan() {
return this.i.am5;
}
set xAxisZoomToItemSpan(v) {
this.i.am5 = +v;
}
/**
* 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 yAxisMode() {
return this.i.aj2;
}
set yAxisMode(v) {
this.i.aj2 = ensureEnum(FinancialChartYAxisMode_$type, v);
}
/**
* A boolean property controlling the visibility of the toolbar.
*/
get isToolbarVisible() {
return this.i.alr;
}
set isToolbarVisible(v) {
this.i.alr = ensureBool(v);
}
/**
* 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 chartType() {
return this.i.ajt;
}
set chartType(v) {
this.i.ajt = ensureEnum(FinancialChartType_$type, v);
}
/**
* Gets or sets Horizontal alignment of Y-axis labels.
*/
get yAxisLabelHorizontalAlignment() {
return this.i.ahl;
}
set yAxisLabelHorizontalAlignment(v) {
this.i.ahl = ensureEnum(HorizontalAlignment_$type, v);
}
/**
* 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 isWindowSyncedToVisibleRange() {
return this.i.als;
}
set isWindowSyncedToVisibleRange(v) {
this.i.als = ensureBool(v);
}
/**
* 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 indicatorTypes() {
if (this._indicatorTypes === null) {
let coll = new IgxFinancialIndicatorTypeCollection();
let innerColl = this.i.aj7;
if (!innerColl) {
innerColl = new FinancialIndicatorTypeCollection_internal(0);
}
this._indicatorTypes = coll._fromInner(innerColl);
this.i.aj7 = innerColl;
}
return this._indicatorTypes;
}
set indicatorTypes(v) {
if (this._indicatorTypes !== null) {
this._indicatorTypes._setSyncTarget(null);
this._indicatorTypes = null;
}
let coll = new IgxFinancialIndicatorTypeCollection();
this._indicatorTypes = coll._fromOuter(v);
let syncColl = new SyncableObservableCollection$1(FinancialIndicatorType_$type);
let innerColl = this.i.aj7;
if (!innerColl) {
innerColl = new FinancialIndicatorTypeCollection_internal(0);
}
syncColl._inner = innerColl;
syncColl.clear();
this._indicatorTypes._setSyncTarget(syncColl);
this.i.aj7 = innerColl;
}
/**
* 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 overlayTypes() {
if (this._overlayTypes === null) {
let coll = new IgxFinancialOverlayTypeCollection();
let innerColl = this.i.aj9;
if (!innerColl) {
innerColl = new FinancialOverlayTypeCollection_internal(0);
}
this._overlayTypes = coll._fromInner(innerColl);
this.i.aj9 = innerColl;
}
return this._overlayTypes;
}
set overlayTypes(v) {
if (this._overlayTypes !== null) {
this._overlayTypes._setSyncTarget(null);
this._overlayTypes = null;
}
let coll = new IgxFinancialOverlayTypeCollection();
this._overlayTypes = coll._fromOuter(v);
let syncColl = new SyncableObservableCollection$1(FinancialOverlayType_$type);
let innerColl = this.i.aj9;
if (!innerColl) {
innerColl = new FinancialOverlayTypeCollection_internal(0);
}
syncColl._inner = innerColl;
syncColl.clear();
this._overlayTypes._setSyncTarget(syncColl);
this.i.aj9 = innerColl;
}
/**
* Gets or sets whether the large numbers on the Y-axis labels are abbreviated.
*/
get yAxisAbbreviateLargeNumbers() {
return this.i.alw;
}
set yAxisAbbreviateLargeNumbers(v) {
this.i.alw = ensureBool(v);
}
/**
* 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 resolution() {
return this.i.ko;
}
set resolution(v) {
this.i.ko = +v;
}
/**
* 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 xAxisEnhancedIntervalPreferMoreCategoryLabels() {
return this.i.alv;
}
set xAxisEnhancedIntervalPreferMoreCategoryLabels(v) {
this.i.alv = ensureBool(v);
}
/**
* 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 yAxisEnhancedIntervalPreferMoreCategoryLabels() {
return this.i.alx;
}
set yAxisEnhancedIntervalPreferMoreCategoryLabels(v) {
this.i.alx = ensureBool(v);
}
/**
* 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 zoomSliderType() {
return this.i.aj5;
}
set zoomSliderType(v) {
this.i.aj5 = ensureEnum(FinancialChartZoomSliderType_$type, v);
}
/**
* 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 negativeBrushes() {
return fromBrushCollection(this.i.ai2);
}
set negativeBrushes(v) {
this.i.ai2 = toBrushCollection(v);
}
/**
* 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 negativeOutlines() {
return fromBrushCollection(this.i.ai3);
}
set negativeOutlines(v) {
this.i.ai3 = toBrushCollection(v);
}
/**
* 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 overlayBrushes() {
return fromBrushCollection(this.i.ai4);
}
set overlayBrushes(v) {
this.i.ai4 = toBrushCollection(v);
}
/**
* 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 overlayOutlines() {
return fromBrushCollection(this.i.ai5);
}
set overlayOutlines(v) {
this.i.ai5 = toBrushCollection(v);
}
/**
* 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 volumeOutlines() {
return fromBrushCollection(this.i.ai7);
}
set volumeOutlines(v) {
this.i.ai7 = toBrushCollection(v);
}
/**
* 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 volumeBrushes() {
return fromBrushCollection(this.i.ai6);
}
set volumeBrushes(v) {
this.i.ai6 = toBrushCollection(v);
}
/**
* 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 indicators in the Financial Chart control, e.g.
*
* ```html
* <igx-financial-chart
* [dataSource]="data"
* indicatorTypes="MoneyFlowIndex, AverageTrueRange"
* indicatorNegativeBrushes="Red, Orange">
* </igx-financial-chart>
* ```
*/
get indicatorNegativeBrushes() {
return fromBrushCollection(this.i.ai1);
}
set indicatorNegativeBrushes(v) {
this.i.ai1 = toBrushCollection(v);
}
/**
* Brushes to use for financial indicators.
*
* Use the `IndicatorBrushes` property to set a collection of brushes that will be used to render positive elements of indicators in the Financial Chart control, e.g.
*
* ```html
* <igx-financial-chart
* [dataSource]="data"
* indicatorTypes="MoneyFlowIndex, AverageTrueRange"
* indicatorBrushes="Green, Blue">
* </igx-financial-chart>
* ```
*/
get indicatorBrushes() {
return fromBrushCollection(this.i.ai0);
}
set indicatorBrushes(v) {
this.i.ai0 = toBrushCollection(v);
}
/**
* The outline thickness of volume series in the volume pane.
*
* Use the `VolumeThickness` property to set a number that will be used to render outline thickness of all series in the volume pane, e.g.
*
* ```html
* <igx-financial-chart
* [dataSource]="data"
* volumeThickness="2.5">
* </igx-financial-chart>
* ```
*/
get volumeThickness() {
return this.i.am0;
}
set volumeThickness(v) {
this.i.am0 = +v;
}
/**
* The outline thickness of financial overlays.
*
* Use the `OverlayThickness` property to set a number that will be used to render outline thickness of all overlays in the Financial Chart control, e.g.
*
* ```html
* <igx-financial-chart
* [dataSource]="data"
* overlayTypes="BollingerBands"
* overlayThickness="2.5">
* </igx-financial-chart>
* ```
*/
get overlayThickness() {
return this.i.amy;
}
set overlayThickness(v) {
this.i.amy = +v;
}
/**
* The multiplier of financial overlay, e.g. BollingerBands overlay.
*/
get overlayMultiplier() {
return this.i.amx;
}
set overlayMultiplier(v) {
this.i.amx = +v;
}
/**
* The outline or stroke thickness of financial indicators.
*
* Use the `IndicatorThickness` property to set a number that will be used to render outline thickness of all indicators in the Financial Chart control, e.g.
*
* ```html
* <igx-financial-chart
* [dataSource]="data"
* indicatorTypes="MoneyFlowIndex, AverageTrueRange"
* indicatorThickness="2.5">
* </igx-financial-chart>
* ```
*/
get indicatorThickness() {
return this.i.amw;
}
set indicatorThickness(v) {
this.i.amw = +v;
}
/**
* The display types of financial indicators.
*
* Use the `IndicatorDisplayTypes` property to set display types that will determine whether render all indicators as area, lines, or columns in the Financial Chart control, e.g.
*
* ```html
* <igx-financial-chart
* [dataSource]="data"
* indicatorTypes="MoneyFlowIndex, AverageTrueRange"
* indicatorDisplayTypes="Line, Line">
* </igx-financial-chart>
* ```
*/
get indicatorDisplayTypes() {
if (this._indicatorDisplayTypes === null) {
let coll = new IgxIndicatorDisplayTypeCollection();
let innerColl = this.i.akj;
if (!innerColl) {
innerColl = new IndicatorDisplayTypeCollection_internal();
}
this._indicatorDisplayTypes = coll._fromInner(innerColl);
this.i.akj = innerColl;
}
return this._indicatorDisplayTypes;
}
set indicatorDisplayTypes(v) {
if (this._indicatorDisplayTypes !== null) {
this._indicatorDisplayTypes._setSyncTarget(null);
this._indicatorDisplayTypes = null;
}
let coll = new IgxIndicatorDisplayTypeCollection();
this._indicatorDisplayTypes = coll._fromOuter(v);
let syncColl = new SyncableObservableCollection$1(IndicatorDisplayType_$type);
let innerColl = this.i.akj;
if (!innerColl) {
innerColl = new IndicatorDisplayTypeCollection_internal();
}
syncColl._inner = innerColl;
syncColl.clear();
this._indicatorDisplayTypes._setSyncTarget(syncColl);
this.i.akj = innerColl;
}
/**
* The period of financial indicators, where applicable.
*
* The `indicatorPeriod` property applies to only the `BollingerBands` overlay as well as to these indicators types: `AverageDirectionalIndex`, `AverageTrueRange`, `BollingerBandWidth`, `ChaikinVolatility`, `CommodityChannelIndex`, `DetrendedPriceOscillator`, `FastStochasticOscillator`, `ForceIndex`, `FullStochasticOscillator`, `MoneyFlowIndex`, `PriceChannelOverlay`, `RateOfChangeAndMomentum`, `RelativeStrengthIndex`, `SlowStochasticOsc