igniteui-angular-charts
Version:
Ignite UI Angular charting components for building rich data visualizations for modern web apps.
935 lines (932 loc) • 39.4 kB
JavaScript
/*
THIS INFRAGISTICS ULTIMATE SOFTWARE LICENSE AGREEMENT ("AGREEMENT") LOCATED HERE:
https://www.infragistics.com/legal/license/igultimate-la
https://www.infragistics.com/legal/license/igultimate-eula
GOVERNS THE LICENSING, INSTALLATION AND USE OF INFRAGISTICS SOFTWARE. BY DOWNLOADING AND/OR INSTALLING AND USING INFRAGISTICS SOFTWARE: you are indicating that you have read and understand this Agreement, and agree to be legally bound by it on behalf of the yourself and your company.
*/
import { Component, ViewChild, ContentChildren, Input, forwardRef, ChangeDetectionStrategy, ViewContainerRef } from '@angular/core';
import { IgxAxisComponent } from './igx-axis-component';
import { IgxSeriesComponent } from './igx-series-component';
import { GridMode_$type } from './GridMode';
import { IgxSeriesViewerComponent } from './igx-series-viewer-component';
import { AngularRenderer, AngularWrapper } from "igniteui-angular-core";
import { TypeRegistrar } from "igniteui-angular-core";
import { XamDataChart } from './XamDataChart';
import { CollectionAdapter, brushToString, stringToBrush, ensureBool, ensureEnum } from "igniteui-angular-core";
import { DataChartStylingDefaults } from './DataChartStylingDefaults';
import { IgxDataContext } from "igniteui-angular-core";
import { IgxSeriesCollection } from './igx-series-collection';
import { NotifyCollectionChangedAction } from "igniteui-angular-core";
import { IgxAxisCollection } from './igx-axis-collection';
import { SyncLinkManager } from './SyncLinkManager';
import { SyncLink } from './SyncLink';
import { ComputedPlotAreaMarginMode_$type } from './ComputedPlotAreaMarginMode';
import { AutoMarginsAndAngleUpdateMode_$type } from './AutoMarginsAndAngleUpdateMode';
import { SeriesPlotAreaMarginHorizontalMode_$type } from './SeriesPlotAreaMarginHorizontalMode';
import { SeriesPlotAreaMarginVerticalMode_$type } from './SeriesPlotAreaMarginVerticalMode';
import * as i0 from "@angular/core";
/**
* Represents a chart area containing axes, series, an optional legend and other hosted content.
*/
export let IgxDataChartComponent = /*@__PURE__*/ (() => {
class IgxDataChartComponent extends IgxSeriesViewerComponent {
constructor(_renderer, _elRef, _ngZone, _componentFactoryResolver, _injector) {
super();
this._renderer = _renderer;
this._elRef = _elRef;
this._ngZone = _ngZone;
this._componentFactoryResolver = _componentFactoryResolver;
this._injector = _injector;
/**
* The series actually present in the chart. Do not directly modify this array.
* This array's contents can be modified by causing Angular to reproject the child content.
* Or adding and removing series from the manual series collection on the series property.
*/
this.actualSeries = [];
/**
* The axes actually present in the chart. Do not directly modify this array.
* This array's contents can be modified by causing Angular to reproject the child content.
* Or adding and removing axes from the manual axes collection on the axes property.
*/
this.actualAxes = [];
this._series = null;
this._axes = null;
this._root = null;
this._dataSource = null;
this._highlightedDataSource = null;
this._axesAdapter = null;
this._seriesAdapter = null;
this._defaultTooltips = null;
this._zoneRunner = (act) => this._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.nativeElement != null) {
root = this._container.nativeElement;
}
this._root = root;
var ren = new AngularRenderer(root, this._renderer, window.document, this._ngZone, true, DataChartStylingDefaults);
this._wrapper = ren;
var chart = this.i;
this._chart = chart;
this._axesAdapter = new CollectionAdapter([], this.i.axes, this.actualAxes, (c) => c.i, (i) => {
i._provideRenderer(this._wrapper);
i.provideData(this._dataSource);
if (this._container && this._container.parentElement) {
i._styling(this._root, this, this);
}
}, (i) => { i._provideRenderer(null); i.provideData(null); });
this._seriesAdapter = new CollectionAdapter([], this.i.series, this.actualSeries, (c) => c.i, (i) => {
i.owner = this;
i._provideRenderer(this._dataSource);
i.provideData(this._dataSource);
i.provideHighlightedData(this._highlightedDataSource);
if (this._container && this._container.parentElement) {
i._styling(this._root, this, this);
}
i.bindAxes(this.actualAxes);
this._ensureDefaultTooltip(i);
this._ensureTooltipCreated(i);
}, (i) => { i._provideRenderer(null); i.provideData(null); });
chart.provideContainer(ren);
ren.addSizeWatcher(() => {
this._chart.notifyContainerResized();
});
}
set height(value) {
this._height = value;
this._renderer.setStyle(this._elRef.element.nativeElement, "height", value);
this._chart.notifyContainerResized();
}
get height() {
return this._height;
}
set width(value) {
this._width = value;
this._renderer.setStyle(this._elRef.element.nativeElement, "width", value);
this._chart.notifyContainerResized();
}
get width() {
return this._width;
}
/**
* Gets or sets the legend used for the current chart.
*/
get legend() {
if (this.i.legend != null)
return this.i.legend.externalObject;
}
set legend(v) {
if (v != undefined && v != null)
this.i.legend = v.i;
}
/**
* A collection or manually added series for the chart.
*/
get series() {
if (this._series === null) {
let coll = new IgxSeriesCollection();
let inner = coll._innerColl;
inner.addListener((sender, e) => {
switch (e.action) {
case NotifyCollectionChangedAction.Add:
this._seriesAdapter.insertManualItem(e.newStartingIndex, e.newItems.item(0));
break;
case NotifyCollectionChangedAction.Remove:
this._seriesAdapter.removeManualItemAt(e.oldStartingIndex);
break;
case NotifyCollectionChangedAction.Replace:
this._seriesAdapter.removeManualItemAt(e.oldStartingIndex);
this._seriesAdapter.insertManualItem(e.newStartingIndex, e.newItems.item(0));
break;
case NotifyCollectionChangedAction.Reset:
this._seriesAdapter.clearManualItems();
break;
}
});
this._series = coll;
}
return this._series;
}
/**
* A collection or manually added axes for the chart.
*/
get axes() {
if (this._axes === null) {
let coll = new IgxAxisCollection();
let inner = coll._innerColl;
inner.addListener((sender, e) => {
switch (e.action) {
case NotifyCollectionChangedAction.Add:
this._axesAdapter.insertManualItem(e.newStartingIndex, e.newItems.item(0));
break;
case NotifyCollectionChangedAction.Remove:
this._axesAdapter.removeManualItemAt(e.oldStartingIndex);
break;
case NotifyCollectionChangedAction.Replace:
this._axesAdapter.removeManualItemAt(e.oldStartingIndex);
this._axesAdapter.insertManualItem(e.newStartingIndex, e.newItems.item(0));
break;
case NotifyCollectionChangedAction.Reset:
this._axesAdapter.clearManualItems();
break;
}
});
this._axes = coll;
}
return this._axes;
}
ngOnDestroy() {
this._chart.destroy();
this._wrapper.destroy();
}
createImplementation() {
return new XamDataChart();
}
set dataSource(value) {
this._dataSource = value;
this.bindData();
}
get dataSource() {
return this._dataSource;
}
set highlightedDataSource(value) {
this._highlightedDataSource = value;
this.bindHighlightedData();
}
get highlightedDataSource() {
return this._highlightedDataSource;
}
bindData() {
//console.log("binding data: " + this._dataSource);
if (this.actualAxes && this.actualAxes.length > 0) {
var currAxes = this.actualAxes;
for (var i = 0; i < currAxes.length; i++) {
currAxes[i].provideData(this._dataSource);
}
}
if (this.actualSeries && this.actualSeries.length > 0) {
var currSeries = this.actualSeries;
for (var i = 0; i < currSeries.length; i++) {
currSeries[i].provideData(this._dataSource);
}
}
}
bindHighlightedData() {
if (this.actualSeries && this.actualSeries.length > 0) {
var currSeries = this.actualSeries;
for (var i = 0; i < currSeries.length; i++) {
currSeries[i].provideHighlightedData(this._highlightedDataSource);
}
}
}
ngAfterContentInit() {
if (TypeRegistrar.isRegistered("IgxDataChartDefaultTooltipsComponent")) {
let c = TypeRegistrar.get("IgxDataChartDefaultTooltipsComponent");
let cf = this._componentFactoryResolver.resolveComponentFactory(c);
let cr = this._dynamicContent.createComponent(cf);
//let cr = cf.create(this._injector);
this._defaultTooltips = cr;
cr.instance.onContentReady.subscribe(() => {
this._onDefaultTooltipsReady(cr);
});
//this._container.appendChild(cr.location.nativeElement);
}
this._axesAdapter.updateQuery(this.contentAxes);
this._seriesAdapter.updateQuery(this.contentSeries);
if (this.actualAxes && this.actualAxes.length > 0) {
var currAxes = this.actualAxes;
for (var i = 0; i < currAxes.length; i++) {
currAxes[i].provideData(this._dataSource);
}
}
if (this.actualSeries && this.actualSeries.length > 0) {
var currSeries = this.actualSeries;
for (var i = 0; i < currSeries.length; i++) {
currSeries[i].provideData(this._dataSource);
}
}
}
ngAfterViewInit() {
this.updateStyle();
this.i.notifyContainerResized();
}
updateStyle() {
this._styling(this._root, this);
}
_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;
});
}
_ensureDefaultTooltip(series) {
if (this._defaultTooltips == null) {
return;
}
this._defaultTooltips.instance["ensureDefaultTooltip"](series);
}
_onDefaultTooltipsReady(cr) {
if (this.actualSeries && this.actualSeries.length > 0) {
var currSeries = this.actualSeries;
for (var i = 0; i < currSeries.length; i++) {
if (currSeries[i].showDefaultTooltip) {
this._ensureDefaultTooltip(currSeries[i]);
}
}
}
}
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;
}
/**
* Gets or sets the channel with which to synchronize.
*
* Synchronization is the coordination of zooming, panning and crosshairs events between multiple charts. Multiple chart controls can be synchronized horizontally (along X-Axis), vertically (along Y-Axis), or both. If you want to synchronize a set of charts, assign them the same name to the `syncChannel` and then specify whether or not synchronize chart horizontally and/or vertically.
*/
get syncChannel() {
return this.i.syncChannel;
}
set syncChannel(v) {
let newLink = null;
if (v && v.length > 0) {
newLink = SyncLinkManager.instance().getLink(v);
}
let oldLink = this.i.actualSyncLink;
if (oldLink) {
SyncLinkManager.instance().releaseLink(oldLink);
}
if (newLink) {
this.i.actualSyncLink = newLink;
}
else {
this.i.actualSyncLink = new SyncLink();
}
this.i.syncChannel = v;
}
/**
* Gets or sets the bool used to display the window preview shadow.
*
* Synchronization is the coordination of zooming, panning and crosshairs events between multiple charts. Multiple chart controls can be synchronized horizontally (along X-Axis), vertically (along Y-Axis), or both. If you want to synchronize a set of charts, assign them the same name to the `syncChannel` and then specify whether or not synchronize chart horizontally and/or vertically.
*/
get synchronizeVertically() {
return this.i.syncSettings ? this.i.syncSettings.synchronizeVertically : false;
}
set synchronizeVertically(v) {
this.i.syncSettings.synchronizeVertically = ensureBool(v);
}
/**
* Gets or sets the bool used to display the window preview shadow.
*
* Synchronization is the coordination of zooming, panning and crosshairs events between multiple charts. Multiple chart controls can be synchronized horizontally (along X-Axis), vertically (along Y-Axis), or both. If you want to synchronize a set of charts, assign them the same name to the `syncChannel` and then specify whether or not synchronize chart horizontally and/or vertically.
*/
get synchronizeHorizontally() {
return this.i.syncSettings ? this.i.syncSettings.synchronizeHorizontally : false;
}
set synchronizeHorizontally(v) {
this.i.syncSettings.synchronizeHorizontally = ensureBool(v);
}
/**
* @hidden
*/
get i() {
return this._implementation;
}
/**
* Gets or sets whether to use a square aspect ratio for the chart. This is locked to true for polar and radial charts.
*
* Set `IsSquare` to true to constrain the chart to a square, using the minimum of its height and width.
*
* ```html
* <igx-data-chart [dataSource]="data"
* isSquare="true"
* width="800px"
* height="400px">
* <igx-category-x-axis #xAxis
* label="label">
* </igx-category-x-axis>
* <igx-numeric-y-axis #yAxis
* majorStroke="green">
* </igx-numeric-y-axis>
*
* <igx-column-series
* [xAxis]="xAxis"
* [yAxis]="yAxis"
* valueMemberPath="value">
* </igx-column-series>
* </igx-data-chart>
* ```
*
* ```ts
* this.chart.isSquare="True";
* ```
*/
get isSquare() {
return this.i.xi;
}
set isSquare(v) {
this.i.xi = ensureBool(v);
}
/**
* A number between 0 and 1 determining the scale of the horizontal zoom.
* This property is effectively a shortcut to the Width of the WindowRect property.
*
* To programmatically change the horizontal zoom level, set `WindowScaleHorizontal` to a value between 0 and 1.
*
* ```html
* <igx-data-chart [dataSource]="data"
* windowScaleHorizontal="0.75">
* <igx-category-x-axis #xAxis
* label="label">
* </igx-category-x-axis>
* <igx-numeric-y-axis #yAxis>
* </igx-numeric-y-axis>
*
* <igx-column-series
* [xAxis]="xAxis"
* [yAxis]="yAxis"
* valueMemberPath="value">
* </igx-column-series>
* </igx-data-chart>
* ```
*
* ```ts
* this.chart.windowScaleHorizontal="0.75";
* ```
*/
get windowScaleHorizontal() {
return this.i.yp;
}
set windowScaleHorizontal(v) {
this.i.yp = +v;
}
/**
* A number between 0 and 1 determining the scale of the vertical zoom.
* This property is effectively a shortcut to the Height of the WindowRect property.
*
* To programmatically change the vertical zoom level, set `WindowScaleVertical` to a value between 0 and 1.
*
* ```html
* <igx-data-chart [dataSource]="data"
* windowScaleVertical="0.75">
* <igx-category-x-axis #xAxis
* label="label">
* </igx-category-x-axis>
* <igx-numeric-y-axis #yAxis>
* </igx-numeric-y-axis>
*
* <igx-column-series
* [xAxis]="xAxis"
* [yAxis]="yAxis"
* valueMemberPath="value">
* </igx-column-series>
* </igx-data-chart>
* ```
*
* ```ts
* this.chart.windowScaleVertical="0.75";
* ```
*/
get windowScaleVertical() {
return this.i.yq;
}
set windowScaleVertical(v) {
this.i.yq = +v;
}
/**
* A number between 0 and 1 determining the scale of the horizontal zoom.
* This property is effectively a shortcut to the Width of the ActualWindowRect property.
*/
get actualWindowScaleHorizontal() {
return this.i.ya;
}
set actualWindowScaleHorizontal(v) {
this.i.ya = +v;
}
/**
* A number between 0 and 1 determining the scale of the vertical zoom.
* This property is effectively a shortcut to the Height of the ActualWindowRect property.
*/
get actualWindowScaleVertical() {
return this.i.yb;
}
set actualWindowScaleVertical(v) {
this.i.yb = +v;
}
/**
* Gets or sets horizontal zoomability of the current control
*
* Set `IsHorizontalZoomEnabled` to enable or disable horizontal zooming.
*
* ```html
* <igx-data-chart [dataSource]="data"
* isHorizontalZoomEnabled="true">
* <igx-category-x-axis #xAxis
* label="label">
* </igx-category-x-axis>
* <igx-numeric-y-axis #yAxis>
* </igx-numeric-y-axis>
*
* <igx-column-series
* [xAxis]="xAxis"
* [yAxis]="yAxis"
* valueMemberPath="value">
* </igx-column-series>
* </igx-data-chart>
* ```
*
* ```ts
* this.chart.IsHorizontalZoomEnabled= true;
* ```
*/
get isHorizontalZoomEnabled() {
return this.i.xg;
}
set isHorizontalZoomEnabled(v) {
this.i.xg = ensureBool(v);
}
/**
* Gets or sets vertical zoomability of the current control
*
* Set `IsVerticalZoomEnabled` to enable or disable vertical zooming.
*
* ```html
* <igx-data-chart [dataSource]="data"
* isVerticalZoomEnabled="true">
* <igx-category-x-axis #xAxis
* label="label">
* </igx-category-x-axis>
* <igx-numeric-y-axis #yAxis>
* </igx-numeric-y-axis>
*
* <igx-column-series
* [xAxis]="xAxis"
* [yAxis]="yAxis"
* valueMemberPath="value">
* </igx-column-series>
* </igx-data-chart>
* ```
*
* ```ts
* this.chart.isVerticalZoomEnabled="True";
* ```
*/
get isVerticalZoomEnabled() {
return this.i.xj;
}
set isVerticalZoomEnabled(v) {
this.i.xj = ensureBool(v);
}
/**
* Gets or sets how grid lines are rendered in relation to series.
*
* Try setting the `GridMode` property to bring your grid lines in front of the data series.
*
* ```html
* <igx-data-chart [dataSource]="data"
* gridMode="beforeSeries">
* <igx-category-x-axis #xAxis
* label="label">
* </igx-category-x-axis>
* <igx-numeric-y-axis #yAxis
* majorStroke="green">
* </igx-numeric-y-axis>
*
* <igx-column-series
* [xAxis]="xAxis"
* [yAxis]="yAxis"
* valueMemberPath="value">
* </igx-column-series>
* </igx-data-chart>
* ```
*/
get gridMode() {
return this.i.ww;
}
set gridMode(v) {
this.i.ww = ensureEnum(GridMode_$type, v);
}
/**
* Gets or sets a value indicating whether grid and tick lines are aligned to device pixels.
*/
get alignsGridLinesToPixels() {
return this.i.xc;
}
set alignsGridLinesToPixels(v) {
this.i.xc = ensureBool(v);
}
/**
* Gets or sets the maximum amount the series viewer should auto expand margins to accomodate the initial horizontal axis labels.
*/
get autoExpandMarginMaximumValue() {
return this.i.yd;
}
set autoExpandMarginMaximumValue(v) {
this.i.yd = +v;
}
/**
* Gets or sets the extra amount the series viewer should auto expand margins to accomodate the initial horizontal axis labels.
*/
get autoExpandMarginExtraPadding() {
return this.i.yc;
}
set autoExpandMarginExtraPadding(v) {
this.i.yc = +v;
}
/**
* Gets or sets a whether the series viewer should suppress truncation of axis labels.
*/
get shouldSuppressAxisLabelTruncation() {
return this.i.xq;
}
set shouldSuppressAxisLabelTruncation(v) {
this.i.xq = ensureBool(v);
}
/**
* Gets or sets a whether the series viewer should auto expand margins to accomodate the initial horizontal axis labels.
*/
get shouldAutoExpandMarginForInitialLabels() {
return this.i.xm;
}
set shouldAutoExpandMarginForInitialLabels(v) {
this.i.xm = ensureBool(v);
}
/**
* Gets or sets a whether the series viewer should consider auto rotating labels to fit them in the initial view. This implies that ShouldAutoExpandMarginForInitialLabels is true.
*/
get shouldConsiderAutoRotationForInitialLabels() {
return this.i.xp;
}
set shouldConsiderAutoRotationForInitialLabels(v) {
this.i.xp = ensureBool(v);
}
/**
* Gets or sets a whether the series viewer should suppress auto recalculating margin and axis label angles.
*/
get suppressAutoMarginAndAngleRecalculation() {
return this.i.xr;
}
set suppressAutoMarginAndAngleRecalculation(v) {
this.i.xr = ensureBool(v);
}
/**
* Gets or sets a whether the series viewer should consider auto rotating labels to fit them in the initial view. This implies that ShouldAutoExpandMarginForInitialLabels is true.
*/
get autoMarginAndAngleUpdateMode() {
return this.i.wr;
}
set autoMarginAndAngleUpdateMode(v) {
this.i.wr = ensureEnum(AutoMarginsAndAngleUpdateMode_$type, v);
}
/**
* Gets or sets the DefaultAxisStroke property.
* The DefaultAxisStroke property defines the brush which is used by the axes when no
* Axis.Stroke is set.
*/
get defaultAxisStroke() {
return brushToString(this.i.aas);
}
set defaultAxisStroke(v) {
this.i.aas = stringToBrush(v);
}
/**
* Gets or sets the DefaultAxisMajorStroke property.
* The DefaultAxisMajorStroke property defines the brush which is used by the axes when no
* Axis.MajorStroke is set.
*/
get defaultAxisMajorStroke() {
return brushToString(this.i.aaq);
}
set defaultAxisMajorStroke(v) {
this.i.aaq = stringToBrush(v);
}
/**
* Gets or sets the DefaultAxisMinorStroke property.
* The DefaultAxisMinorStroke property defines the brush which is used by the axes when no
* Axis.MinorStroke is set.
*/
get defaultAxisMinorStroke() {
return brushToString(this.i.aar);
}
set defaultAxisMinorStroke(v) {
this.i.aar = stringToBrush(v);
}
/**
* Gets the actual resolved left plot area margin;
*/
get actualPlotAreaMarginLeft() {
return this.i.x7;
}
set actualPlotAreaMarginLeft(v) {
this.i.x7 = +v;
}
/**
* Gets the actual resolved top plot area margin;
*/
get actualPlotAreaMarginTop() {
return this.i.x9;
}
set actualPlotAreaMarginTop(v) {
this.i.x9 = +v;
}
/**
* Gets the actual resolved right plot area margin;
*/
get actualPlotAreaMarginRight() {
return this.i.x8;
}
set actualPlotAreaMarginRight(v) {
this.i.x8 = +v;
}
/**
* Gets the actual resolved bottom plot area margin;
*/
get actualPlotAreaMarginBottom() {
return this.i.x6;
}
set actualPlotAreaMarginBottom(v) {
this.i.x6 = +v;
}
/**
* Gets or sets mode to use for automatically calculating the plot area margin.
*/
get computedPlotAreaMarginMode() {
return this.i.wu;
}
set computedPlotAreaMarginMode(v) {
this.i.wu = ensureEnum(ComputedPlotAreaMarginMode_$type, v);
}
/**
* Gets or sets horizontal mode to use for automatically calculating the plot area margin based ont the series.
*/
get seriesPlotAreaMarginHorizontalMode() {
return this.i.w1;
}
set seriesPlotAreaMarginHorizontalMode(v) {
this.i.w1 = ensureEnum(SeriesPlotAreaMarginHorizontalMode_$type, v);
}
/**
* Gets or sets vertical mode to use for automatically calculating the plot area margin based ont the series.
*/
get seriesPlotAreaMarginVerticalMode() {
return this.i.w4;
}
set seriesPlotAreaMarginVerticalMode(v) {
this.i.w4 = ensureEnum(SeriesPlotAreaMarginVerticalMode_$type, v);
}
/**
* Margin applied to the left of the plot area.
*/
get plotAreaMarginLeft() {
return this.i.yl;
}
set plotAreaMarginLeft(v) {
this.i.yl = +v;
}
/**
* Margin applied above the plot area.
*/
get plotAreaMarginTop() {
return this.i.yn;
}
set plotAreaMarginTop(v) {
this.i.yn = +v;
}
/**
* Margin applied to the right of the plot area.
*/
get plotAreaMarginRight() {
return this.i.ym;
}
set plotAreaMarginRight(v) {
this.i.ym = +v;
}
/**
* Margin applied below the plot area.
*/
get plotAreaMarginBottom() {
return this.i.yk;
}
set plotAreaMarginBottom(v) {
this.i.yk = +v;
}
findByName(name) {
var baseResult = super.findByName(name);
if (baseResult) {
return baseResult;
}
if (this.axes != null && this.axes.findByName && this.axes.findByName(name)) {
return this.axes.findByName(name);
}
return null;
}
refreshComputedPlotAreaMargin() {
this.i.zy();
}
recalculateMarginAutoExpansion() {
this.i.zx();
}
recalculateAutoLabelsAngle() {
this.i.zw();
}
/**
* Notifies the chart that the CSS styles in effect have been updated.
*/
styleUpdated() {
this.i.zz();
}
/**
* Export serialized visual data.
*/
exportSerializedVisualData() {
let iv = this.i.y7();
return (iv);
}
}
IgxDataChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: IgxDataChartComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ViewContainerRef }, { token: i0.NgZone }, { token: i0.ComponentFactoryResolver }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
IgxDataChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: IgxDataChartComponent, selector: "igx-data-chart", inputs: { height: "height", width: "width", legend: "legend", dataSource: "dataSource", highlightedDataSource: "highlightedDataSource", syncChannel: "syncChannel", synchronizeVertically: "synchronizeVertically", synchronizeHorizontally: "synchronizeHorizontally", isSquare: "isSquare", windowScaleHorizontal: "windowScaleHorizontal", windowScaleVertical: "windowScaleVertical", actualWindowScaleHorizontal: "actualWindowScaleHorizontal", actualWindowScaleVertical: "actualWindowScaleVertical", isHorizontalZoomEnabled: "isHorizontalZoomEnabled", isVerticalZoomEnabled: "isVerticalZoomEnabled", gridMode: "gridMode", alignsGridLinesToPixels: "alignsGridLinesToPixels", autoExpandMarginMaximumValue: "autoExpandMarginMaximumValue", autoExpandMarginExtraPadding: "autoExpandMarginExtraPadding", shouldSuppressAxisLabelTruncation: "shouldSuppressAxisLabelTruncation", shouldAutoExpandMarginForInitialLabels: "shouldAutoExpandMarginForInitialLabels", shouldConsiderAutoRotationForInitialLabels: "shouldConsiderAutoRotationForInitialLabels", suppressAutoMarginAndAngleRecalculation: "suppressAutoMarginAndAngleRecalculation", autoMarginAndAngleUpdateMode: "autoMarginAndAngleUpdateMode", defaultAxisStroke: "defaultAxisStroke", defaultAxisMajorStroke: "defaultAxisMajorStroke", defaultAxisMinorStroke: "defaultAxisMinorStroke", actualPlotAreaMarginLeft: "actualPlotAreaMarginLeft", actualPlotAreaMarginTop: "actualPlotAreaMarginTop", actualPlotAreaMarginRight: "actualPlotAreaMarginRight", actualPlotAreaMarginBottom: "actualPlotAreaMarginBottom", computedPlotAreaMarginMode: "computedPlotAreaMarginMode", seriesPlotAreaMarginHorizontalMode: "seriesPlotAreaMarginHorizontalMode", seriesPlotAreaMarginVerticalMode: "seriesPlotAreaMarginVerticalMode", plotAreaMarginLeft: "plotAreaMarginLeft", plotAreaMarginTop: "plotAreaMarginTop", plotAreaMarginRight: "plotAreaMarginRight", plotAreaMarginBottom: "plotAreaMarginBottom" }, host: { classAttribute: "igx-data-chart ig-data-chart" }, providers: [{ provide: IgxSeriesViewerComponent, useExisting: forwardRef(() => IgxDataChartComponent) }], queries: [{ propertyName: "contentAxes", predicate: IgxAxisComponent }, { propertyName: "contentSeries", predicate: IgxSeriesComponent }], viewQueries: [{ propertyName: "_dynamicContent", first: true, predicate: ["dynamicContent"], descendants: true, read: ViewContainerRef, static: true }], usesInheritance: true, ngImport: i0, template: `<ng-container #dynamicContent></ng-container>`, isInline: true, styles: ["\n\t\t:host {\n\t\t\tdisplay: block;\n\t\t}\n\t"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
return IgxDataChartComponent;
})();
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: IgxDataChartComponent, decorators: [{
type: Component,
args: [{
selector: 'igx-data-chart',
template: `<ng-container #dynamicContent></ng-container>`,
changeDetection: ChangeDetectionStrategy.OnPush,
providers: [{ provide: IgxSeriesViewerComponent, useExisting: forwardRef(() => IgxDataChartComponent) }],
host: { 'class': 'igx-data-chart ig-data-chart' },
styles: [`
:host {
display: block;
}
`]
}]
}], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ViewContainerRef }, { type: i0.NgZone }, { type: i0.ComponentFactoryResolver }, { type: i0.Injector }]; }, propDecorators: { contentAxes: [{
type: ContentChildren,
args: [IgxAxisComponent]
}], contentSeries: [{
type: ContentChildren,
args: [IgxSeriesComponent]
}], _dynamicContent: [{
type: ViewChild,
args: ["dynamicContent", { read: ViewContainerRef, static: true }]
}], height: [{
type: Input
}], width: [{
type: Input
}], legend: [{
type: Input
}], dataSource: [{
type: Input
}], highlightedDataSource: [{
type: Input
}], syncChannel: [{
type: Input
}], synchronizeVertically: [{
type: Input
}], synchronizeHorizontally: [{
type: Input
}], isSquare: [{
type: Input
}], windowScaleHorizontal: [{
type: Input
}], windowScaleVertical: [{
type: Input
}], actualWindowScaleHorizontal: [{
type: Input
}], actualWindowScaleVertical: [{
type: Input
}], isHorizontalZoomEnabled: [{
type: Input
}], isVerticalZoomEnabled: [{
type: Input
}], gridMode: [{
type: Input
}], alignsGridLinesToPixels: [{
type: Input
}], autoExpandMarginMaximumValue: [{
type: Input
}], autoExpandMarginExtraPadding: [{
type: Input
}], shouldSuppressAxisLabelTruncation: [{
type: Input
}], shouldAutoExpandMarginForInitialLabels: [{
type: Input
}], shouldConsiderAutoRotationForInitialLabels: [{
type: Input
}], suppressAutoMarginAndAngleRecalculation: [{
type: Input
}], autoMarginAndAngleUpdateMode: [{
type: Input
}], defaultAxisStroke: [{
type: Input
}], defaultAxisMajorStroke: [{
type: Input
}], defaultAxisMinorStroke: [{
type: Input
}], actualPlotAreaMarginLeft: [{
type: Input
}], actualPlotAreaMarginTop: [{
type: Input
}], actualPlotAreaMarginRight: [{
type: Input
}], actualPlotAreaMarginBottom: [{
type: Input
}], computedPlotAreaMarginMode: [{
type: Input
}], seriesPlotAreaMarginHorizontalMode: [{
type: Input
}], seriesPlotAreaMarginVerticalMode: [{
type: Input
}], plotAreaMarginLeft: [{
type: Input
}], plotAreaMarginTop: [{
type: Input
}], plotAreaMarginRight: [{
type: Input
}], plotAreaMarginBottom: [{
type: Input
}] } });