igniteui-react-charts
Version:
Ignite UI React charting components for building rich data visualizations using TypeScript APIs.
962 lines (959 loc) • 34.2 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 * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GridMode_$type } from './GridMode';
import { IgrSeriesViewer } from './igr-series-viewer';
import { ReactRenderer, ReactWrapper } from "igniteui-react-core";
import { TypeRegistrar } from "igniteui-react-core";
import { XamDataChart } from './XamDataChart';
import { CollectionAdapter, brushToString, stringToBrush, ensureBool, ensureEnum, NamePatcher } from "igniteui-react-core";
import { Axis } from './Axis';
import { DataChartStylingDefaults } from './DataChartStylingDefaults';
import { IgrDataContext } from "igniteui-react-core";
import { IgrSeriesCollection } from './igr-series-collection';
import { NotifyCollectionChangedAction } from "igniteui-react-core";
import { IgrAxisCollection } from './igr-axis-collection';
import { ContentChildrenManager } from "igniteui-react-core";
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';
/**
* Represents a chart area containing axes, series, an optional legend and other hosted content.
*/
export class IgrDataChart extends IgrSeriesViewer {
set height(value) {
this._height = value;
if (this._elRef) {
this._elRef.style.height = value;
this._chart.notifyContainerResized();
}
}
get height() {
return this._height;
}
/**
* 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;
}
_updateContentChildren() {
this.contentAxes.length = 0;
this.contentSeries.length = 0;
let contentChildrenActual = this._contentChildrenManager.contentChildrenActual;
for (let i = 0; i < contentChildrenActual.length; i++) {
if ((Axis.$type).isAssignableFrom(contentChildrenActual[i].i.$type)) {
this.contentAxes.push(contentChildrenActual[i]);
}
else {
this.contentSeries.push(contentChildrenActual[i]);
}
}
if (this._axesAdapter !== null) {
this._axesAdapter.notifyContentChanged();
}
if (this._seriesAdapter !== null) {
this._seriesAdapter.notifyContentChanged();
}
}
//private _contentChildrenManager: ContentChildrenManager;
// private _childrenDiffer(children: any): boolean {
// if (this._contentChildren === null) {
// return true;
// }
// if (React.Children.count(children) != this._contentChildren.length) {
// return true;
// }
// let arr = React.Children.toArray(children);
// for (let i = 0; i < arr.length; i++) {
// if ((arr[i] as any).props.name !== this._contentChildren[i].props.name) {
// return true;
// }
// }
// return false;
// }
_getMainRef(ref) {
this._elRef = ref;
}
render() {
// if (!this._childrenDiffer(this.props.children)) {
// let div = React.createElement("div", {
// ref: (ref) => {
// this._elRef = ref;
// },
// children: this.props.children
// });
// return div;
// } else {
let children = this._contentChildrenManager.getChildren(this.props.children);
//this._contentChildrenUnresolved = this._contentChildrenMap.size;
if (this._currentTooltips && this._currentTooltips.length > 0) {
//children = React.Children.toArray(this.props.children);
for (let i = 0; i < this._currentTooltips.length; i++) {
let t = this._currentTooltips[i];
if (this._activeTooltipElements.has(t)) {
children.push(this._activeTooltipElements.get(t));
}
else {
if (!TypeRegistrar.isRegistered("IgrTooltipContainer")) {
continue;
}
let Tooltip = TypeRegistrar.get("IgrTooltipContainer");
let tEle = React.createElement(Tooltip, {
ref: this._tooltipRef,
key: this._currentTooltips[i].key,
owner: this._currentTooltips[i]
});
let portal = ReactDOM.createPortal(tEle, t, this._currentTooltips[i].key);
this._activeTooltipElements.set(t, portal);
children.push(portal);
}
}
}
let div = React.createElement("div", {
className: "ig-data-chart igr-data-chart",
ref: this._getMainRef,
children: children
});
return div;
//}
}
_tooltipRef(t) {
//console.log(t);
if (t === null) {
return;
}
if (t.currentOwner &&
t.currentOwner.tooltipTemplate) {
t.template = t.currentOwner.tooltipTemplate;
}
this._activeTooltips.set(t.currentOwner, t);
}
componentDidMount() {
super.componentDidMount();
this._elRef.style.width = this._width ? this._width : "";
this._elRef.style.height = this._height ? this._height : "";
this._elRef.appendChild(this._container);
this._chart.notifyContainerResized();
this.initializeContent();
}
set width(value) {
this._width = value;
if (this._elRef) {
this._elRef.style.width = value;
this._chart.notifyContainerResized();
}
}
get width() {
return this._width;
}
/**
* A collection or manually added series for the chart.
*/
get series() {
if (this._series === null) {
let coll = new IgrSeriesCollection();
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 IgrAxisCollection();
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;
}
constructor(props) {
super(props);
this.contentAxes = [];
this.contentSeries = [];
/**
* The series actually present in the chart. Do not directly modify this array.
* This array's contents can be modified by causing React 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 React 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._initialized = false;
this._dataSource = null;
this._highlightedDataSource = null;
this._axesAdapter = null;
this._seriesAdapter = null;
this._defaultTooltips = null;
this._uniqueTooltipId = 0;
if (this._styling) {
NamePatcher.ensureStylablePatched(Object.getPrototypeOf(this));
}
this._getMainRef = this._getMainRef.bind(this);
this._tooltipRef = this._tooltipRef.bind(this);
this._activeTooltipElements = new Map();
this._activeTooltips = new Map();
this._currentTooltips = [];
this._contentChildrenManager = new ContentChildrenManager((ch) => ch.key || ch.props.name, (ch) => ch.key || ch.props.name, () => this._updateContentChildren());
if (document) {
this._container = document.createElement("div");
this._container.style.display = "block";
this._container.style.width = "100%";
this._container.style.height = "100%";
}
var root;
root = this._container;
var ren = new ReactRenderer(root, document, true, DataChartStylingDefaults);
this._wrapper = ren;
var chart = this.i;
this._chart = chart;
this._axesAdapter = new CollectionAdapter(this.contentAxes, this.i.axes, this.actualAxes, (c) => c.i, (i) => {
i._provideRenderer(this._wrapper);
i.provideData(this._dataSource);
for (let j = 0; j < this.actualSeries.length; j++) {
this.actualSeries[j].bindAxes(this.actualAxes);
}
for (let j = 0; j < this.actualAxes.length; j++) {
this.actualAxes[j].bindAxes(this.actualAxes);
}
if (this._container && this._container.parentElement) {
i._styling(this._container, this, this);
}
//this._checkCrossing();
}, (i) => { i._provideRenderer(null); i.provideData(null); });
this._seriesAdapter = new CollectionAdapter(this.contentSeries, this.i.series, this.actualSeries, (c) => c.i, (i) => {
i.owner = this;
i._provideRenderer(this._wrapper);
i.provideData(this._dataSource);
i.provideHighlightedData(this._highlightedDataSource);
if (this._container && this._container.parentElement) {
i._styling(this._container, this, this);
}
i.bindAxes(this.actualAxes);
for (let j = 0; j < this.actualSeries.length; j++) {
this.actualSeries[j].bindSeries(this.actualSeries);
}
this._ensureDefaultTooltip(i);
this._ensureTooltipCreated(i);
}, (i) => { i._provideRenderer(null); i.provideData(null); });
chart.provideContainer(ren);
ren.addSizeWatcher(() => {
this._chart.notifyContainerResized();
});
this._initialized = true;
}
destroy() {
this._chart.destroy();
this._wrapper.destroy();
}
componentWillUnmount() {
}
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);
}
}
}
initializeContent() {
if (TypeRegistrar.isRegistered("IgrDataChartDefaultTooltips")) {
let d = TypeRegistrar.create("IgrDataChartDefaultTooltips");
this._defaultTooltips = d;
this._onDefaultTooltipsReady(d);
//this._container.appendChild(cr.location.nativeElement);
}
this._styling(this._container, this);
if (this.actualAxes && this.actualAxes.length > 0) {
var currAxes = this.actualAxes;
for (var i = 0; i < currAxes.length; i++) {
currAxes[i]._styling(this._container, this, this);
}
}
if (this.actualSeries && this.actualSeries.length > 0) {
var currSeries = this.actualSeries;
for (var i = 0; i < currSeries.length; i++) {
currSeries[i]._styling(this._container, this, this);
}
}
this.i.notifyContainerResized();
}
//private _checkCrossing() {
// let toBind: IgrAxis[] = [];
// let byName = new Map<string, IgrAxis>();
// for (let i = 0; i < this.actualAxes.length; i++) {
// byName.set(this.actualAxes[i].name, this.actualAxes[i]);
// if (this.actualAxes[i].crossingAxisName) {
// toBind.push(this.actualAxes[i]);
// }
// }
// for (let i = 0; i < toBind.length; i++) {
// if (byName.has(toBind[i].crossingAxisName)) {
// if (toBind[i].crossingAxis !== byName.get(toBind[i].crossingAxisName)) {
// toBind[i].crossingAxis = byName.get(toBind[i].crossingAxisName);
// }
// }
// }
//}
_ensureTooltipCreated(series) {
series._ensureTooltipCreated(() => this.createTooltip(), (ele) => {
let wrapper = new ReactWrapper(ele, this._wrapper);
wrapper.updateToolTip = ele.updateToolTip;
wrapper.hideToolTip = ele.hideToolTip;
if (this._activeTooltips.has(ele)) {
let tCont = this._activeTooltips.get(ele);
tCont.template = ele.tooltipTemplate;
}
return wrapper;
});
}
_ensureDefaultTooltip(series) {
if (this._defaultTooltips == null) {
return;
}
this._defaultTooltips["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("IgrTooltipContainer")) {
// return null;
// }
// let Tooltip = TypeRegistrar.get("IgrTooltipContainer");
let wrapper = this._wrapper.createElement("div");
let ele = wrapper.getNativeElement();
ele.key = "__tooltip_" + this._uniqueTooltipId;
this._uniqueTooltipId++;
this._currentTooltips = this._currentTooltips.slice(0);
this._currentTooltips.push(ele);
//let element = React.createElement(Tooltip, );
//let portal = ReactDOM.createPortal(element, ele);
let self = this;
ele.updateToolTip = function (c, isSubContent) {
if (c.externalObject) {
c = c.externalObject;
}
else {
let ext = new IgrDataContext();
ext._implementation = c;
c = ext;
}
if (!isSubContent) {
ele.removeAttribute("popover");
//attach tooltip to chart container
if (c.series != null && !c.series.attachTooltipToRoot) {
if (ele.parentElement != self._container) {
if (ele.parentElement != null) {
ele.parentElement.removeChild(ele);
}
self._container.appendChild(ele);
}
}
//attach tooltip to body
else {
this.remove();
this.renderer.appendToBody(this);
var supportsPopover = HTMLElement.prototype.hasOwnProperty("popover");
if (supportsPopover) {
ele.setAttribute("popover", "manual");
ele.showPopover();
}
}
}
else {
c.isSubContent = true;
}
if (self._activeTooltips.has(ele)) {
let t = self._activeTooltips.get(ele);
t.dataContext = c;
}
ele.style.display = "block";
return true;
};
ele.hideToolTip = function () {
if (ele.hasAttribute("popover"))
ele.hidePopover();
ele.style.display = "none";
};
ele.style.display = "none";
this._updateTooltipState();
return ele;
}
_updateTooltipState() {
if (this._initialized) {
this.setState({ tooltips: this._currentTooltips });
}
}
/**
* 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.
*
* ```ts
* this.chart.isSquare="True";
* ```
*
* ```ts
* <IgrDataChart
* IsHorizontalZoomEnabled="True"
* dataSource={this.state.dataSource} >
*
* <IgrCategoryXAxis name="xAxis" />
* <IgrNumericYAxis name="yAxis" />
*
* <IgrColumnSeries
* name="series1"
* xAxisName="xAxis"
* yAxisName="yAxis"
* valueMemberPath="Value" />
* </IgrDataChart>
* ```
*/
get isSquare() {
return this.i.y5;
}
set isSquare(v) {
this.i.y5 = 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.
*
* ```ts
* this.chart.windowScaleHorizontal="0.75";
* ```
*
* ```ts
* <IgrDataChart
* windowScaleHorizontal="0.75"
* dataSource={this.state.dataSource} >
*
* <IgrCategoryXAxis name="xAxis" />
* <IgrNumericYAxis name="yAxis" />
*
* <IgrColumnSeries
* name="series1"
* xAxisName="xAxis"
* yAxisName="yAxis"
* valueMemberPath="Value" />
* </IgrDataChart>
* ```
*/
get windowScaleHorizontal() {
return this.i.aac;
}
set windowScaleHorizontal(v) {
this.i.aac = +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.
*
* ```ts
* this.chart.windowScaleVertical="0.75";
* ```
*
* ```ts
* <IgrDataChart
* windowScaleVertical="0.75"
* dataSource={this.state.dataSource} >
*
* <IgrCategoryXAxis name="xAxis" />
* <IgrNumericYAxis name="yAxis" />
*
* <IgrColumnSeries
* name="series1"
* xAxisName="xAxis"
* yAxisName="yAxis"
* valueMemberPath="Value" />
* </IgrDataChart>
* ```
*/
get windowScaleVertical() {
return this.i.aad;
}
set windowScaleVertical(v) {
this.i.aad = +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.zx;
}
set actualWindowScaleHorizontal(v) {
this.i.zx = +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.zy;
}
set actualWindowScaleVertical(v) {
this.i.zy = +v;
}
/**
* Gets or sets horizontal zoomability of the current control
*
* Set `IsHorizontalZoomEnabled` to enable or disable horizontal zooming.
*
* ```ts
* this.chart.IsHorizontalZoomEnabled= true;
* ```
*
* ```ts
* <IgrDataChart
* IsHorizontalZoomEnabled="True"
* dataSource={this.state.dataSource} >
*
* <IgrCategoryXAxis name="xAxis" />
* <IgrNumericYAxis name="yAxis" />
*
* <IgrColumnSeries
* name="series1"
* xAxisName="xAxis"
* yAxisName="yAxis"
* valueMemberPath="Value" />
* </IgrDataChart>
* ```
*/
get isHorizontalZoomEnabled() {
return this.i.y3;
}
set isHorizontalZoomEnabled(v) {
this.i.y3 = ensureBool(v);
}
/**
* Gets or sets vertical zoomability of the current control
*
* Set `IsVerticalZoomEnabled` to enable or disable vertical zooming.
*
* ```ts
* this.chart.isVerticalZoomEnabled="True";
* ```
*
* ```ts
* <IgrDataChart
* IsVerticalZoomEnabled="True"
* dataSource={this.state.dataSource} >
*
* <IgrCategoryXAxis name="xAxis" />
* <IgrNumericYAxis name="yAxis" />
*
* <IgrColumnSeries
* name="series1"
* xAxisName="xAxis"
* yAxisName="yAxis"
* valueMemberPath="Value" />
* </IgrDataChart>
* ```
*/
get isVerticalZoomEnabled() {
return this.i.y6;
}
set isVerticalZoomEnabled(v) {
this.i.y6 = 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.
*/
get gridMode() {
return this.i.yj;
}
set gridMode(v) {
this.i.yj = 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.yz;
}
set alignsGridLinesToPixels(v) {
this.i.yz = 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.z0;
}
set autoExpandMarginMaximumValue(v) {
this.i.z0 = +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.zz;
}
set autoExpandMarginExtraPadding(v) {
this.i.zz = +v;
}
/**
* Gets or sets a whether the series viewer should suppress truncation of axis labels.
*/
get shouldSuppressAxisLabelTruncation() {
return this.i.zd;
}
set shouldSuppressAxisLabelTruncation(v) {
this.i.zd = 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.y9;
}
set shouldAutoExpandMarginForInitialLabels(v) {
this.i.y9 = 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.zc;
}
set shouldConsiderAutoRotationForInitialLabels(v) {
this.i.zc = ensureBool(v);
}
/**
* Gets or sets a whether the series viewer should suppress auto recalculating margin and axis label angles.
*/
get suppressAutoMarginAndAngleRecalculation() {
return this.i.ze;
}
set suppressAutoMarginAndAngleRecalculation(v) {
this.i.ze = 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.yc;
}
set autoMarginAndAngleUpdateMode(v) {
this.i.yc = 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.acf);
}
set defaultAxisStroke(v) {
this.i.acf = 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.acd);
}
set defaultAxisMajorStroke(v) {
this.i.acd = 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.ace);
}
set defaultAxisMinorStroke(v) {
this.i.ace = stringToBrush(v);
}
/**
* Gets the actual resolved left plot area margin;
*/
get actualPlotAreaMarginLeft() {
return this.i.zu;
}
set actualPlotAreaMarginLeft(v) {
this.i.zu = +v;
}
/**
* Gets the actual resolved top plot area margin;
*/
get actualPlotAreaMarginTop() {
return this.i.zw;
}
set actualPlotAreaMarginTop(v) {
this.i.zw = +v;
}
/**
* Gets the actual resolved right plot area margin;
*/
get actualPlotAreaMarginRight() {
return this.i.zv;
}
set actualPlotAreaMarginRight(v) {
this.i.zv = +v;
}
/**
* Gets the actual resolved bottom plot area margin;
*/
get actualPlotAreaMarginBottom() {
return this.i.zt;
}
set actualPlotAreaMarginBottom(v) {
this.i.zt = +v;
}
/**
* Gets or sets mode to use for automatically calculating the plot area margin.
*/
get computedPlotAreaMarginMode() {
return this.i.yh;
}
set computedPlotAreaMarginMode(v) {
this.i.yh = 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.yo;
}
set seriesPlotAreaMarginHorizontalMode(v) {
this.i.yo = 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.yr;
}
set seriesPlotAreaMarginVerticalMode(v) {
this.i.yr = ensureEnum(SeriesPlotAreaMarginVerticalMode_$type, v);
}
/**
* Margin applied to the left of the plot area.
*/
get plotAreaMarginLeft() {
return this.i.z8;
}
set plotAreaMarginLeft(v) {
this.i.z8 = +v;
}
/**
* Margin applied above the plot area.
*/
get plotAreaMarginTop() {
return this.i.aaa;
}
set plotAreaMarginTop(v) {
this.i.aaa = +v;
}
/**
* Margin applied to the right of the plot area.
*/
get plotAreaMarginRight() {
return this.i.z9;
}
set plotAreaMarginRight(v) {
this.i.z9 = +v;
}
/**
* Margin applied below the plot area.
*/
get plotAreaMarginBottom() {
return this.i.z7;
}
set plotAreaMarginBottom(v) {
this.i.z7 = +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.abl();
}
recalculateMarginAutoExpansion() {
this.i.abk();
}
recalculateAutoLabelsAngle() {
this.i.abj();
}
/**
* Notifies the chart that the CSS styles in effect have been updated.
*/
styleUpdated() {
this.i.abm();
}
/**
* Export serialized visual data.
*/
exportSerializedVisualData() {
let iv = this.i.aau();
return (iv);
}
}