igniteui-react-charts
Version:
Ignite UI React charting components for building rich data visualizations using TypeScript APIs.
969 lines (967 loc) • 33.9 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 { ReactRenderer, ReactWrapper } from "igniteui-react-core";
import { TypeRegistrar } from "igniteui-react-core";
import { CategoryChart } from './CategoryChart';
import { CategoryChartType_$type } from './CategoryChartType';
import { CategorySeriesMarkerCollisionAvoidance_$type } from './CategorySeriesMarkerCollisionAvoidance';
import { CategoryTransitionInMode_$type } from './CategoryTransitionInMode';
import { TransitionInSpeedType_$type } from './TransitionInSpeedType';
import { fromBrushCollection, toBrushCollection, ensureEnum, ensureBool, NamePatcher } from "igniteui-react-core";
import { IgrXYChart } from './igr-xy-chart';
import { DataChartStylingDefaults } from './DataChartStylingDefaults';
import { DataSeriesType } from "igniteui-react-core";
import { IgrDataContext } from "igniteui-react-core";
import { IgrCategoryXAxis } from './igr-category-x-axis';
import { IgrNumericYAxis } from './igr-numeric-y-axis';
import { AxisRangeBufferMode_$type } from './AxisRangeBufferMode';
import { AutoMarginsAndAngleUpdateMode_$type } from './AutoMarginsAndAngleUpdateMode';
/**
* Represents a chart with an ordinal X-axis and a numeric Y-axis.
*
* **Ignite UI for React Category Chart** - [Documentation](https://www.infragistics.com/products/ignite-ui-react/react/components/CategoryChart.html)
*
* The Ignite UI Category Chart is a lightweight, highly performant chart. It can be easily configured to display category data using an extremely simple and intuitive API. All you need to do is provide your data to the chart and it will take care of everything else.
*
* Example:
*
* ```ts
* <IgrCategoryChart
* dataSource={this.state.data} />
* ```
*/
export class IgrCategoryChart extends IgrXYChart {
set height(value) {
this._height = value;
if (this._elRef) {
this._elRef.style.height = value;
this._chart.notifyResized();
}
}
get height() {
return this._height;
}
set width(value) {
this._width = value;
if (this._elRef) {
this._elRef.style.width = value;
this._chart.notifyResized();
}
}
get width() {
return this._width;
}
_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);
}
_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 = [];
if (this._currentTooltips && this._currentTooltips.length > 0) {
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-category-chart igr-category-chart",
ref: this._getMainRef,
children: children
});
return div;
//}
}
constructor(props) {
super(props);
this._dataSource = 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 = [];
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;
if (this._container != null) {
root = this._container;
}
var ren = new ReactRenderer(root, document, true, DataChartStylingDefaults);
this._wrapper = ren;
var chart = this.i;
this._chart = chart;
if (chart.xAxis) {
let x = new IgrCategoryXAxis(null);
x._provideRenderer(ren);
x._implementation = chart.xAxis;
chart.xAxis.externalObject = x;
}
if (chart.yAxis) {
let y = new IgrNumericYAxis(null);
y._provideRenderer(ren);
y._implementation = chart.yAxis;
chart.yAxis.externalObject = y;
}
chart.provideContainer(ren);
this.bindData();
chart.notifyResized();
ren.addSizeWatcher(() => {
this._chart.notifyResized();
});
this._initialized = true;
}
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.notifyResized();
this.initializeContent();
}
componentWillUnmount() {
}
destroy() {
this._chart.destroy();
this._wrapper.destroy();
}
createImplementation() {
return new CategoryChart();
}
get i() {
return this._implementation;
}
createSeriesComponent(type) {
if (TypeRegistrar.isRegistered(type)) {
let s = TypeRegistrar.create(type);
s.owner = this;
s._provideRenderer(this._wrapper);
return s;
}
else {
//we shouldn't get here, hopefully.
throw Error("series type not loaded: " + type);
}
}
createSeries(type) {
switch (type) {
case DataSeriesType.Area:
return this.createSeriesComponent('IgrAreaSeries');
case DataSeriesType.Column:
return this.createSeriesComponent('IgrColumnSeries');
case DataSeriesType.Line:
return this.createSeriesComponent('IgrLineSeries');
case DataSeriesType.Point:
return this.createSeriesComponent('IgrPointSeries');
case DataSeriesType.Spline:
return this.createSeriesComponent('IgrSplineSeries');
case DataSeriesType.SplineArea:
return this.createSeriesComponent('IgrSplineAreaSeries');
case DataSeriesType.StepArea:
return this.createSeriesComponent('IgrStepAreaSeries');
case DataSeriesType.StepLine:
return this.createSeriesComponent('IgrStepLineSeries');
case DataSeriesType.Waterfall:
return this.createSeriesComponent('IgrWaterfallSeries');
case DataSeriesType.ItemToolTipLayer:
return this.createSeriesComponent('IgrItemToolTipLayer');
case DataSeriesType.CategoryToolTipLayer:
return this.createSeriesComponent('IgrCategoryToolTipLayer');
case DataSeriesType.CrosshairLayer:
return this.createSeriesComponent('IgrCrosshairLayer');
case DataSeriesType.FinalValueLayer:
return this.createSeriesComponent('IgrFinalValueLayer');
case DataSeriesType.CalloutLayer:
return this.createSeriesComponent('IgrCalloutLayer');
case DataSeriesType.CategoryHighlightLayer:
return this.createSeriesComponent('IgrCategoryHighlightLayer');
case DataSeriesType.CategoryItemHighlightLayer:
return this.createSeriesComponent('IgrCategoryItemHighlightLayer');
case DataSeriesType.DataToolTipLayer:
return this.createSeriesComponent('IgrDataToolTipLayer');
case DataSeriesType.ValueLayer:
return this.createSeriesComponent('IgrValueLayer');
case DataSeriesType.TrendLineLayer:
return this.createSeriesComponent('IgrTrendLineLayer');
default:
return this.createSeriesComponent('IgrColumnSeries');
}
}
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;
}
}
initializeContent() {
if (TypeRegistrar.isRegistered("IgrDataChartDefaultTooltips")) {
let d = TypeRegistrar.create("IgrDataChartDefaultTooltips");
this._defaultTooltips = d;
this._onDefaultTooltipsReady(d);
//this._container.appendChild(cr.location.nativeElement);
}
// supports angular themes or custom properties set in CSS
this._styling(this._elRef, this);
this._chart.notifyResized();
}
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) {
if (ele.parentElement != self._container) {
if (ele.parentElement != null) {
ele.parentElement.removeChild(ele);
}
self._container.appendChild(ele);
}
}
else {
c.isSubContent = true;
}
if (self._activeTooltips.has(ele)) {
let t = self._activeTooltips.get(ele);
if (t.template === null &&
ele.tooltipTemplate !== null) {
t.template = ele.tooltipTemplate;
}
t.dataContext = c;
}
ele.style.display = "block";
return true;
};
ele.hideToolTip = function () {
ele.style.display = "none";
};
ele.style.display = "none";
this._updateTooltipState();
return ele;
}
_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;
});
}
_createXAxis() {
let x = new IgrCategoryXAxis(null);
x._provideRenderer(this._wrapper);
return x.i;
}
_createYAxis() {
let y = new IgrNumericYAxis(null);
y.provideRenderer(this._wrapper);
return y.i;
}
_ensureDefaultTooltip(series) {
if (this._defaultTooltips == null) {
return;
}
this._defaultTooltips["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);
}
}
}
}
_updateTooltipState() {
if (this._initialized) {
this.setState({ tooltips: this._currentTooltips });
}
}
/**
* Gets or sets the duration used for animating series plots when the chart is loading into view
*
* `TransitionInDuration` controls the length of time taken by the transition-in animation. Try setting it to 2 seconds:
*
* ```ts
* <IgrCategoryChart
* dataSource={this.state.data}
* transitionInDuration={2000} />
* ```
*/
get transitionInDuration() {
return this.i.akw;
}
set transitionInDuration(v) {
this.i.akw = +v;
}
/**
* Gets or sets the duration used for animating series plots when the series is leaving view
*/
get transitionOutDuration() {
return this.i.akx;
}
set transitionOutDuration(v) {
this.i.akx = +v;
}
/**
* Gets or sets the easing function used for animating series plots when the chart is loading into view
* This can be set to one of the known values "linear" or "cubic," or it can be set to an easing function which takes a single numeric parameter and returns a number.
*/
get transitionInEasingFunction() {
return this.i.aiy;
}
set transitionInEasingFunction(v) {
this.i.aiy = v;
}
/**
* Gets or sets the easing function used for animating series plots when the chart is loading into view
* This can be set to one of the known values "linear" or "cubic," or it can be set to an easing function which takes a single numeric parameter and returns a number.
*/
get transitionOutEasingFunction() {
return this.i.aiz;
}
set transitionOutEasingFunction(v) {
this.i.aiz = v;
}
/**
* Gets domain type of this chart
*/
get domainType() {
return this.i.cc;
}
/**
* Gets or sets the type of chart series to generate from the data.
*
* The `ChartType` property determines the type of data series to display.
*
* ```ts
* <IgrCategoryChart
* dataSource={this.state.data}
* chartType="stepArea" />
* ```
*/
get chartType() {
return this.i.aih;
}
set chartType(v) {
this.i.aih = ensureEnum(CategoryChartType_$type, v);
}
/**
* Gets or sets the behavior for markers in each series which are placed too close together for the current view, resulting in a collision.
*
* `MarkerCollisionAvoidance` controls the technique the chart uses to avoid overlapping markers.
*
* ```ts
* <IgrCategoryChart
* dataSource={this.state.data}
* markerCollisionAvoidance="none" />
* ```
*/
get markerCollisionAvoidance() {
return this.i.aij;
}
set markerCollisionAvoidance(v) {
this.i.aij = ensureEnum(CategorySeriesMarkerCollisionAvoidance_$type, v);
}
/**
* Gets or sets whether to include the spline shape in the axis range requested of the axis for spline type series.
*/
get isSplineShapePartOfRange() {
return this.i.ajd;
}
set isSplineShapePartOfRange(v) {
this.i.ajd = ensureBool(v);
}
/**
* Gets or sets whether animation of series plots is enabled when the chart is loading into view
*
* Set `IsTransitionInEnabled` to true if you want your chart series to animate into position when the chart is loading into view.
*
* ```ts
* <IgrCategoryChart
* dataSource={this.state.data}
* isTransitionInEnabled ="true" />
* ```
*/
get isTransitionInEnabled() {
return this.i.aje;
}
set isTransitionInEnabled(v) {
this.i.aje = ensureBool(v);
}
/**
* Gets or sets the method that determines how to animate series plots when the chart is loading into view
*
* `TransitionInMode` controls the direction of the transition-in animation.
*
* ```ts
* <IgrCategoryChart
* dataSource={this.state.data}
* CategoryTransitionInMode="accordionfromRight" />
* ```
*/
get transitionInMode() {
return this.i.ail;
}
set transitionInMode(v) {
this.i.ail = ensureEnum(CategoryTransitionInMode_$type, v);
}
/**
* Gets or sets the arrival speed used for animating series plots when the chart is loading into view
*
* `TransitionInSpeedType` controls the speed of the transition-in animation.
*
* ```ts
* <IgrCategoryChart
* dataSource={this.state.data}
* transitionInSpeedType="indexScaled" >
* </IgrCategoryChart>
* ```
*/
get transitionInSpeedType() {
return this.i.aiv;
}
set transitionInSpeedType(v) {
this.i.aiv = ensureEnum(TransitionInSpeedType_$type, v);
}
/**
* Gets or sets the frequency of displayed labels along the X-axis.
* Gets or sets the set value is a factor that determines which labels will be hidden. For example, an interval of 2 will display every other label.
*
* `XAxisInterval` determines how often to show a label, tickmark, and/or gridline along the x-axis. Set this property to _n_ to display a label every _nth_ item.
*
* ```ts
* <IgrCategoryChart
* dataSource={this.state.data}
* xAxisInterval={3} />
* ```
*/
get xAxisInterval() {
return this.i.akd;
}
set xAxisInterval(v) {
this.i.akd = +v;
}
/**
* Gets or sets the frequency of displayed minor lines along the X-axis.
* Gets or sets the set value is a factor that determines how the minor lines will be displayed.
*
* `XAxisMinorInterval` determines how often to show a minor gridline along the x-axis. This property is relevant only when the displayed series is a type with grouping, like column series.
*
* `XAxisMinorInterval` is expressed as a number between 0 and 1, representing the frequency of the interval. To display minor gridlines representing 10ths of an item width, set `XAxisMinorInterval` to 0.1.
*
* ```ts
* <IgrCategoryChart
* dataSource={this.state.data}
* xAxisMinorInterval={0.1}
* xAxisMinorStroke="green"
* xAxisMinorStrokeThickness={1} />
* ```
*/
get xAxisMinorInterval() {
return this.i.akg;
}
set xAxisMinorInterval(v) {
this.i.akg = +v;
}
/**
* Gets or sets the amount of space between adjacent categories for the X-axis.
* The gap is silently clamped to the range [0, 1] when used.
*
* Use the `XAxisGap` property to configure the spacing between items on the x-axis. This property is relevant only when the displayed series is a type with item spacing, like column series.
*
* An `XAxisGap` of 0 allocates no space between items. An `XAxisGap` of 1 allocates a space between items equal to the width of one item.
*
* To set the item spacing to 75% the width of one item, set the `XAxisGap` to 0.75, as in this code:
*
* ```ts
* <IgrCategoryChart
* dataSource={this.state.data}
* xAxisGap={0.75} />
* ```
*/
get xAxisGap() {
return this.i.akc;
}
set xAxisGap(v) {
this.i.akc = +v;
}
/**
* Gets or sets the minimum amount of pixels to use for the gap between categories, if possible.
*/
get xAxisMinimumGapSize() {
return this.i.akf;
}
set xAxisMinimumGapSize(v) {
this.i.akf = +v;
}
/**
* Gets or sets the maximum gap value to allow. This defaults to 1.0.
*/
get xAxisMaximumGap() {
return this.i.ake;
}
set xAxisMaximumGap(v) {
this.i.ake = +v;
}
/**
* Gets or sets the amount of overlap between adjacent categories for the X-axis.
* Gets or sets the overlap is silently clamped to the range [-1, 1] when used.
*
* Use the `XAxisOverlap` property to configure the spacing between items on the x-axis. This property is relevant only when the displayed series is a type with item spacing, like column series.
*
* An `XAxisOverlap` of 0 places grouped items adjacent to each other. An `XAxisOverlap` of 1 places grouped items in the same axis space, completely overlapping. An `XAxisOverlap` of -1 places a space between grouped items equal to the width of one item.
*
* To place grouped items with 75% overlap, set the `XAxisOverlap` to 0.75, as in this code:
*
* ```ts
* <IgrCategoryChart
* dataSource={this.state.data}
* xAxisOverlap={0} />
* ```
*/
get xAxisOverlap() {
return this.i.akh;
}
set xAxisOverlap(v) {
this.i.akh = +v;
}
/**
* Gets or sets the distance between each label and grid line along the Y-axis.
*
* `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.
*
* ```ts
* <IgrCategoryChart
* dataSource={this.state.data}
* yAxisInterval={10} />
* ```
*/
get yAxisInterval() {
return this.i.akp;
}
set yAxisInterval(v) {
this.i.akp = +v;
}
/**
* Gets or sets a whether the series viewer should auto expand margins to accommodate the initial horizontal axis labels.
*/
get autoMarginAndAngleUpdateMode() {
return this.i.aid;
}
set autoMarginAndAngleUpdateMode(v) {
this.i.aid = ensureEnum(AutoMarginsAndAngleUpdateMode_$type, v);
}
/**
* Gets or sets a whether the series viewer should auto expand margins to accommodate the initial horizontal axis labels.
*/
get shouldAutoExpandMarginForInitialLabels() {
return this.i.ajf;
}
set shouldAutoExpandMarginForInitialLabels(v) {
this.i.ajf = 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.ajg;
}
set shouldConsiderAutoRotationForInitialLabels(v) {
this.i.ajg = ensureBool(v);
}
/**
* Gets or sets the extra amount the series viewer should auto expand margins to accommodate the initial horizontal axis labels.
*/
get autoExpandMarginExtraPadding() {
return this.i.aj4;
}
set autoExpandMarginExtraPadding(v) {
this.i.aj4 = +v;
}
/**
* Gets or sets the maximum amount the series viewer should auto expand margins to accommodate the initial horizontal axis labels.
*/
get autoExpandMarginMaximumValue() {
return this.i.aj5;
}
set autoExpandMarginMaximumValue(v) {
this.i.aj5 = +v;
}
/**
* Gets or sets whether the axis should favor emitting a label at the end of the scale.
*/
get yAxisFavorLabellingScaleEnd() {
return this.i.ajk;
}
set yAxisFavorLabellingScaleEnd(v) {
this.i.ajk = ensureBool(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.ajh;
}
set xAxisEnhancedIntervalPreferMoreCategoryLabels(v) {
this.i.ajh = 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.ajj;
}
set yAxisEnhancedIntervalPreferMoreCategoryLabels(v) {
this.i.ajj = ensureBool(v);
}
/**
* Gets or sets how the numeric axis will adjust its range buffer to less closely fix the data from the series.
*/
get yAxisAutoRangeBufferMode() {
return this.i.aif;
}
set yAxisAutoRangeBufferMode(v) {
this.i.aif = ensureEnum(AxisRangeBufferMode_$type, v);
}
/**
* 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.
*
* Set `YAxisIsLogarithmic` to true if you want the y-axis to be a logarithmic scale.
*
* ```ts
* <IgrCategoryChart
* dataSource={this.state.data}
* yAxisIsLogarithmic="true" />
* ```
*/
get yAxisIsLogarithmic() {
return this.i.ajl;
}
set yAxisIsLogarithmic(v) {
this.i.ajl = 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.
*
* When `YAxisIsLogarithmic` is true, `YAxisLogarithmBase` sets the logarithm base of the y-axis scale.
*
* ```ts
* <IgrCategoryChart
* dataSource={this.state.data}
* yAxisIsLogarithmic="true"
* yAxisLogarithmBase={2} />
* ```
*/
get yAxisLogarithmBase() {
return this.i.aky;
}
set yAxisLogarithmBase(v) {
this.i.aky = +v;
}
/**
* Gets or sets the data value corresponding to the minimum value of the Y-axis.
*
* `YAxisMaximumValue` determines the minimum of the y-axis.
*
* ```ts
* <IgrCategoryChart
* dataSource={this.state.data}
* yAxisMinimumValue={42} />
* ```
*/
get yAxisMinimumValue() {
return this.i.akr;
}
set yAxisMinimumValue(v) {
this.i.akr = +v;
}
/**
* Gets or sets the data value corresponding to the maximum value of the Y-axis.
*
* `YAxisMaximumValue` determines the maximum of the y-axis.
*
* ```ts
* <IgrCategoryChart
* dataSource={this.state.data}
* yAxisMaximumValue={150} />
* ```
*/
get yAxisMaximumValue() {
return this.i.akq;
}
set yAxisMaximumValue(v) {
this.i.akq = +v;
}
/**
* Gets or sets the frequency of displayed minor lines along the Y-axis.
*
* `YAxisMinorInterval` determines how often to show a minor gridline along the y-axis. Set this property to a number less than the y-axis interval.
*
* ```ts
* <IgrCategoryChart
* dataSource={this.state.data}
* yAxisMinorInterval={2}
* yAxisMinorStroke="green"
* yAxisMinorStrokeThickness={1} >
* </IgrCategoryChart>
* ```
*/
get yAxisMinorInterval() {
return this.i.aks;
}
set yAxisMinorInterval(v) {
this.i.aks = +v;
}
/**
* Gets the current minimum value for the X-axis.
*/
get xAxisActualMinimum() {
return this.i.akb;
}
/**
* Gets the current maximum value for the X-axis.
*/
get xAxisActualMaximum() {
return this.i.aka;
}
/**
* Gets the current minimum value for the Y-axis.
*/
get yAxisActualMinimum() {
return this.i.ako;
}
/**
* Gets the current maximum value for the Y-axis.
*/
get yAxisActualMaximum() {
return this.i.akn;
}
/**
* Gets or sets the palette used for coloring negative items of Waterfall chart type.
*
* `NegativeBrushes` controls the brushes used by the chart for negative data, when the `ChartType` is one that supports negative brushes.
*
* ```ts
* <IgrCategoryChart
* dataSource={this.state.data}
* negativeBrushes="#ff0000, #cc0000, #aa0000" />
* ```
*/
get negativeBrushes() {
return fromBrushCollection(this.i.aia);
}
set negativeBrushes(v) {
this.i.aia = toBrushCollection(v);
}
/**
* Brushes to use for drawing negative elements, when using a chart type with contextual coloring, such as Waterfall.
*
* `NegativeOutlines` controls the outlines used by the chart for negative data, when the `ChartType` is one that supports negative brushes.
*
* ```ts
* <IgrCategoryChart
* dataSource={this.state.data}
* negativeOutlines="#0000ff, #0000cc, #0000aa" />
* ```
*/
get negativeOutlines() {
return fromBrushCollection(this.i.aib);
}
set negativeOutlines(v) {
this.i.aib = toBrushCollection(v);
}
/**
* Gets or sets whether the large numbers on the Y-axis labels are abbreviated.
*
* To abbreviate on the y-axis using formats like "1K" or "1M," set `YAxisAbbreviateLargeNumbers` to true.
*
* ```ts
* <IgrCategoryChart
* dataSource={this.state.data}
* yAxisAbbreviateLargeNumbers="true" >
* </IgrCategoryChart>
* ```
*/
get yAxisAbbreviateLargeNumbers() {
return this.i.aji;
}
set yAxisAbbreviateLargeNumbers(v) {
this.i.aji = ensureBool(v);
}
/**
* Gets or sets number of visible categories at maximum zooming level
* This property is overridden by chart's WindowRectMinWidth property
*/
get xAxisZoomMaximumCategoryRange() {
return this.i.aki;
}
set xAxisZoomMaximumCategoryRange(v) {
this.i.aki = +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 is overridden by chart's WindowRectMinWidth property
*/
get xAxisZoomMaximumItemSpan() {
return this.i.akj;
}
set xAxisZoomMaximumItemSpan(v) {
this.i.akj = +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.akk;
}
set xAxisZoomToCategoryRange(v) {
this.i.akk = +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 is overridden by chart's WindowRect or WindowScaleHorizontal properties
*/
get xAxisZoomToCategoryStart() {
return this.i.akl;
}
set xAxisZoomToCategoryStart(v) {
this.i.akl = +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 is overridden by chart's WindowRect or WindowScaleHorizontal properties
*/
get xAxisZoomToItemSpan() {
return this.i.akm;
}
set xAxisZoomToItemSpan(v) {
this.i.akm = +v;
}
/**
* Gets or sets whether the category should be highlighted when hovered
*/
get isCategoryHighlightingEnabled() {
return this.i.ajb;
}
set isCategoryHighlightingEnabled(v) {
this.i.ajb = ensureBool(v);
}
/**
* Gets or sets whether the item should be highlighted when hovered
*/
get isItemHighlightingEnabled() {
return this.i.ajc;
}
set isItemHighlightingEnabled(v) {
this.i.ajc = ensureBool(v);
}
/**
* Export serialized visual data.
*/
exportSerializedVisualData() {
let iv = this.i.ak3();
return (iv);
}
recalculateMarginAutoExpansion() {
this.i.al9();
}
getCurrentXAxisActualMinimum() {
let iv = this.i.aj7();
return (iv);
}
getCurrentYAxisActualMinimum() {
let iv = this.i.aj9();
return (iv);
}
getCurrentXAxisActualMaximum() {
let iv = this.i.aj6();
return (iv);
}
getCurrentYAxisActualMaximum() {
let iv = this.i.aj8();
return (iv);
}
}