UNPKG

igniteui-react-charts

Version:

Ignite UI React charting components for building rich data visualizations using TypeScript APIs.

1,554 lines 60.5 kB
/* 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 { __extends, __values } from "tslib"; import * as React from 'react'; import { Visibility_$type } from "igniteui-react-core"; import { HorizontalAlignment_$type } from "igniteui-react-core"; import { VerticalAlignment_$type } from "igniteui-react-core"; import { AxisLabelsLocation_$type } from './AxisLabelsLocation'; import { AxisLabelSettings } from './AxisLabelSettings'; import { TitleSettings } from './TitleSettings'; import { AxisTitlePosition_$type } from './AxisTitlePosition'; import { fromDoubleCollection, toDoubleCollection, ensureEnum, arrayFindByName, brushToString, stringToBrush, ensureBool, isValidProp, getModifiedProps, toSpinal, initializePropertiesFromCss, NamePatcher } from "igniteui-react-core"; import { delegateCombine, delegateRemove } from "igniteui-react-core"; import { IgrRenderRequestedEventArgs } from './igr-render-requested-event-args'; import { TypeRegistrar } from "igniteui-react-core"; import { IgrAxisRangeChangedEventArgs } from './igr-axis-range-changed-event-args'; import { IgrAxisAnnotationCollection } from './igr-axis-annotation-collection'; import { AxisAnnotationCollection as AxisAnnotationCollection_internal } from './AxisAnnotationCollection'; import { SyncableObservableCollection$1 } from "igniteui-react-core"; import { IAxisAnnotation_$type } from './IAxisAnnotation'; /** * Represents the base class from which all axis types are derived. * * The `Axis` is an array of axis objects. * * ```ts * <IgrDataChart * dataSource={this.state.dataSource} > * * <IgrCategoryXAxis name="xAxis" label="Date" /> * <IgrNumericYAxis name="yAxis" /> * </IgrDataChart> * ``` */ var IgrAxis = /** @class */ /*@__PURE__*/ (function (_super) { __extends(IgrAxis, _super); function IgrAxis(props) { var _this = _super.call(this, props) || this; _this._renderer = null; _this._crossingAxisName = null; _this._annotations = null; _this.__p = null; _this._hasUserValues = new Set(); _this._stylingContainer = null; _this._stylingParent = null; _this._inStyling = false; _this._rangeChanged = null; _this._rangeChanged_wrapped = null; _this._renderRequested = null; _this._renderRequested_wrapped = null; if (_this._styling) { NamePatcher.ensureStylablePatched(Object.getPrototypeOf(_this)); } _this._implementation = _this.createImplementation(); _this._implementation.externalObject = _this; _this.onImplementationCreated(); return _this; } Object.defineProperty(IgrAxis.prototype, "i", { get: function () { return this._implementation; }, enumerable: false, configurable: true }); IgrAxis.prototype.onImplementationCreated = function () { }; IgrAxis.prototype.componentDidMount = function () { var e_1, _a; { try { for (var _b = __values(Object.keys(this.props)), _c = _b.next(); !_c.done; _c = _b.next()) { var p = _c.value; { if (isValidProp(this, p)) { { this[p] = this.props[p]; } } } } } catch (e_1_1) { e_1 = { error: e_1_1 }; } finally { try { if (_c && !_c.done && (_a = _b.return)) _a.call(_b); } finally { if (e_1) throw e_1.error; } } } }; Object.defineProperty(IgrAxis.prototype, "axisInternal", { //private _crossingAxisName: string; //public set crossingAxisName(value: string) { // this._crossingAxisName = value; //} //public get crossingAxisName(): string { // return this._crossingAxisName; //} get: function () { return this.i; }, enumerable: false, configurable: true }); IgrAxis.prototype.createImplementation = function () { return null; }; IgrAxis.prototype.shouldComponentUpdate = function (nextProps, nextState) { var e_2, _a; var mod = getModifiedProps(this.props, nextProps); try { for (var _b = __values(Object.keys(mod)), _c = _b.next(); !_c.done; _c = _b.next()) { var p = _c.value; if (isValidProp(this, p)) { this[p] = mod[p]; } } } catch (e_2_1) { e_2 = { error: e_2_1 }; } finally { try { if (_c && !_c.done && (_a = _b.return)) _a.call(_b); } finally { if (e_2) throw e_2.error; } } return true; }; IgrAxis.prototype.render = function () { return null; }; Object.defineProperty(IgrAxis.prototype, "name", { get: function () { return this.i.name; }, set: function (value) { this.i.name = value; }, enumerable: false, configurable: true }); IgrAxis.prototype.provideData = function (data) { }; IgrAxis.prototype._provideRenderer = function (renderer) { this._renderer = renderer; }; IgrAxis._createFromInternal = function (internal) { if (!internal) { return null; } if (!internal.$type) { return null; } var name = internal.$type.name; var externalName = "Igr" + name; if (!TypeRegistrar.isRegistered(externalName)) { return null; } return TypeRegistrar.create(externalName); }; Object.defineProperty(IgrAxis.prototype, "isCategory", { /** * Gets or sets if the current axis is of category axis type */ get: function () { return this.i.cb; }, enumerable: false, configurable: true }); Object.defineProperty(IgrAxis.prototype, "isNumeric", { /** * Gets or sets if the current axis is of numeric axis type * * Gets or sets if the current axis is of numeric axis type */ get: function () { return this.i.cj; }, enumerable: false, configurable: true }); Object.defineProperty(IgrAxis.prototype, "isAngular", { /** * Gets if the current axis is of angular axis type */ get: function () { return this.i.b9; }, enumerable: false, configurable: true }); Object.defineProperty(IgrAxis.prototype, "isRadial", { /** * Gets or sets if the current axis is of radial axis type */ get: function () { return this.i.cm; }, enumerable: false, configurable: true }); Object.defineProperty(IgrAxis.prototype, "isVertical", { /** * Gets if the current axis is a vertical axis. */ get: function () { return this.i.cp; }, enumerable: false, configurable: true }); Object.defineProperty(IgrAxis.prototype, "isSorting", { /** * Gets or sets if the current axis is sorting data items */ get: function () { return this.i.cn; }, enumerable: false, configurable: true }); Object.defineProperty(IgrAxis.prototype, "isDateTime", { /** * Gets or sets if the current axis is of date time axis type */ get: function () { return this.i.ce; }, enumerable: false, configurable: true }); Object.defineProperty(IgrAxis.prototype, "isOrdinal", { /** * Gets or sets if the current axis is of ordinal axis type */ get: function () { return this.i.ck; }, enumerable: false, configurable: true }); Object.defineProperty(IgrAxis.prototype, "isPiecewise", { /** * Gets or sets if the axis is a piecewise scaling function. */ get: function () { return this.i.cl; }, enumerable: false, configurable: true }); Object.defineProperty(IgrAxis.prototype, "isCategoryDateTime", { /** * Gets if the current axis is of category date time axis type */ get: function () { return this.i.cc; }, enumerable: false, configurable: true }); Object.defineProperty(IgrAxis.prototype, "isContinuous", { /** * Gets if the current axis is a continuous rather than a discrete scale */ get: function () { return this.i.cd; }, enumerable: false, configurable: true }); Object.defineProperty(IgrAxis.prototype, "formatLabel", { /** * Sets or gets a function which takes an object that produces a formatted label for displaying in the chart. * * The `FormatLabel` function takes an object that produces a formatted label for displaying in the chart. * * ```ts * <IgrDataChart dataSource={this.data} > * <IgrCategoryXAxis * name="xAxis" * FormatLabel="xAxis_FormatLabel" /> * </IgrDataChart> * ``` */ get: function () { return this.i.au; }, set: function (v) { this.i.au = v; }, enumerable: false, configurable: true }); Object.defineProperty(IgrAxis.prototype, "title", { /** * Gets or sets the Title property. * * Use `Title` property to display the title of the component. * * ```ts * <IgrCategoryXAxis name="xAxis" * title="Country" * titleTextColor="gray" * titleTextStyle="12pt Verdana" * titleAngle={90} /> * ``` */ get: function () { return this.i.g8; }, set: function (v) { this.i.g8 = v; }, enumerable: false, configurable: true }); Object.defineProperty(IgrAxis.prototype, "stroke", { /** * Gets or sets the Stroke property. * Null is treated as auto. The axis stroke will be displayed or not based on the axis type and series used with it. * * Use `Stroke` property to set the stroke of the chart. * * ```ts * <IgrCategoryChart * ref={this.onChartRef} * width="100%" * height="100%" * dataSource={this.data} * titleTopMargin={5} * xAxisStroke="gray"/> * ``` */ get: function () { return brushToString(this.i.j2); }, set: function (v) { this.i.j2 = stringToBrush(v); }, enumerable: false, configurable: true }); Object.defineProperty(IgrAxis.prototype, "actualStroke", { /** * Gets or sets the effective stroke used for the axis. */ get: function () { return brushToString(this.i.jy); }, set: function (v) { this.i.jy = stringToBrush(v); }, enumerable: false, configurable: true }); Object.defineProperty(IgrAxis.prototype, "strokeThickness", { /** * Gets or sets the StrokeThickness property. * * Use `StrokeThickness` property for the thickness of the stroke. * * ```ts * <IgrCategoryChart * ref={this.onChartRef} * width="100%" * height="100%" * dataSource={this.data} * titleTopMargin={5} * xAxisStrokeThickness={2}> * ``` */ get: function () { return this.i.fi; }, set: function (v) { this.i.fi = +v; }, enumerable: false, configurable: true }); Object.defineProperty(IgrAxis.prototype, "strokeDashArray", { /** * Gets or sets the StrokeDashArray property. */ get: function () { return fromDoubleCollection(this.i.j6); }, set: function (v) { this.i.j6 = toDoubleCollection(v); }, enumerable: false, configurable: true }); Object.defineProperty(IgrAxis.prototype, "strip", { /** * Gets or sets the Strip property. * * Use `Strip` property to set the strip of the chart. * * ```ts * <IgrCategoryChart * ref={this.onChartRef} * width="100%" * height="100%" * dataSource={this.data} * titleTopMargin={5} * xAxisStrip="gray"/> * ``` */ get: function () { return brushToString(this.i.j1); }, set: function (v) { this.i.j1 = stringToBrush(v); }, enumerable: false, configurable: true }); Object.defineProperty(IgrAxis.prototype, "majorStroke", { /** * Gets or sets the MajorStroke property. * Null is treated as auto. Major lines will be displayed or not based on the axis type and series used with it. * * Gets or sets the `MajorStroke` using this property. * * ```ts * <IgrNumericYAxis name="yAxis" * interval={100} * majorStroke="black" * majorStrokeThickness={1} * minorInterval={25} * minorStroke="gray" * minorStrokeThickness={0.5} /> * ``` */ get: function () { return brushToString(this.i.jz); }, set: function (v) { this.i.jz = stringToBrush(v); }, enumerable: false, configurable: true }); Object.defineProperty(IgrAxis.prototype, "actualMajorStroke", { /** * Gets or sets the ActualMajorStroke property. * * The `ActualMajorStroke` property is used for ActualMajorStroke of the axis. */ get: function () { return brushToString(this.i.jw); }, set: function (v) { this.i.jw = stringToBrush(v); }, enumerable: false, configurable: true }); Object.defineProperty(IgrAxis.prototype, "majorStrokeThickness", { /** * Gets or sets the MajorStrokeThickness property. * * Gets or sets the `MajorStrokeThickness` using this property. * * ```ts * <IgrNumericYAxis name="yAxis" * interval={100} * majorStroke="black" * majorStrokeThickness={1} * minorInterval={25} * minorStroke="gray" * minorStrokeThickness={0.5} /> * ``` */ get: function () { return this.i.et; }, set: function (v) { this.i.et = +v; }, enumerable: false, configurable: true }); Object.defineProperty(IgrAxis.prototype, "majorStrokeDashArray", { /** * Gets or sets the MajorStrokeDashArray property. */ get: function () { return fromDoubleCollection(this.i.j4); }, set: function (v) { this.i.j4 = toDoubleCollection(v); }, enumerable: false, configurable: true }); Object.defineProperty(IgrAxis.prototype, "minorStroke", { /** * Gets or sets the MinorStroke property. * * Gets or sets the minorStroke thickness using `MinorStrokeThickness` property. * * ```ts * <IgrNumericYAxis name="yAxis" * interval={100} * majorStroke="black" * majorStrokeThickness={1} * minorInterval={25} * minorStroke="gray" * minorStrokeThickness={0.5} /> * ``` */ get: function () { return brushToString(this.i.j0); }, set: function (v) { this.i.j0 = stringToBrush(v); }, enumerable: false, configurable: true }); Object.defineProperty(IgrAxis.prototype, "actualMinorStroke", { /** * Gets or sets the ActualMinorStroke property. * * The `ActualMinorStroke` property is used for ActualMinorStroke of the axis. */ get: function () { return brushToString(this.i.jx); }, set: function (v) { this.i.jx = stringToBrush(v); }, enumerable: false, configurable: true }); Object.defineProperty(IgrAxis.prototype, "minorStrokeThickness", { /** * Gets or sets the MinorStrokeThickness property. */ get: function () { return this.i.ew; }, set: function (v) { this.i.ew = +v; }, enumerable: false, configurable: true }); Object.defineProperty(IgrAxis.prototype, "minorStrokeDashArray", { /** * Gets or sets the MinorStrokeDashArray property. */ get: function () { return fromDoubleCollection(this.i.j5); }, set: function (v) { this.i.j5 = toDoubleCollection(v); }, enumerable: false, configurable: true }); Object.defineProperty(IgrAxis.prototype, "tickStroke", { /** * Gets or sets the TickStroke property. * * Use `TickStroke` property for the color of the tickmarks. * * ```ts * <IgrCategoryXAxis name="xAxis" * tickLength={10} * tickStrokeThickness={0.5} * tickStroke="black" /> * ``` */ get: function () { return brushToString(this.i.j3); }, set: function (v) { this.i.j3 = stringToBrush(v); }, enumerable: false, configurable: true }); Object.defineProperty(IgrAxis.prototype, "tickStrokeThickness", { /** * Gets or sets the TickStrokeThickness property. * * Use `TickStrokeThickness` property for thickness of the stroke tickmarks. * * ```ts * <IgrCategoryXAxis name="xAxis" * tickLength={10} * tickStrokeThickness={0.5} * tickStroke="black" /> * ``` */ get: function () { return this.i.fk; }, set: function (v) { this.i.fk = +v; }, enumerable: false, configurable: true }); Object.defineProperty(IgrAxis.prototype, "tickStrokeDashArray", { /** * Gets or sets the TickStrokeDashArray property. */ get: function () { return fromDoubleCollection(this.i.j7); }, set: function (v) { this.i.j7 = toDoubleCollection(v); }, enumerable: false, configurable: true }); Object.defineProperty(IgrAxis.prototype, "tickLength", { /** * Gets or sets the TickLength property. * * Use `TickLength` property for The length of the tickmarks to display for this axis. * * ```ts * <IgrCategoryXAxis name="xAxis" * tickLength={10} * tickStrokeThickness={0.5} * tickStroke="black" /> * ``` */ get: function () { return this.i.fj; }, set: function (v) { this.i.fj = +v; }, enumerable: false, configurable: true }); Object.defineProperty(IgrAxis.prototype, "isDisabled", { /** * Gets or sets the IsDisabled property. If true, the axis will not be rendered. * * The `IsDisabled` property is used to decide if the axis will not be rendered. */ get: function () { return this.i.cf; }, set: function (v) { this.i.cf = ensureBool(v); }, enumerable: false, configurable: true }); Object.defineProperty(IgrAxis.prototype, "isInverted", { /** * Gets or sets the IsInverted property. * * Gets or sets the `IsInverted` property. */ get: function () { return this.i.ch; }, set: function (v) { this.i.ch = ensureBool(v); }, enumerable: false, configurable: true }); Object.defineProperty(IgrAxis.prototype, "shouldAvoidAnnotationCollisions", { /** * Gets or sets whether annotations should be shifted to avoid collision, even if this would result in them appearing where they shouldn't be along the scale. */ get: function () { return this.i.cu; }, set: function (v) { this.i.cu = ensureBool(v); }, enumerable: false, configurable: true }); Object.defineProperty(IgrAxis.prototype, "shouldKeepAnnotationsInView", { /** * ets or sets whether annotations should be kept in view, even if they aren't positioned where they should appear on the scale. */ get: function () { return this.i.cw; }, set: function (v) { this.i.cw = ensureBool(v); }, enumerable: false, configurable: true }); Object.defineProperty(IgrAxis.prototype, "usePerLabelHeightMeasurement", { /** * Gets or sets whether to use label height measurement when determining the initial number of labels to render, before resolving collisions, etc. */ get: function () { return this.i.c5; }, set: function (v) { this.i.c5 = ensureBool(v); }, enumerable: false, configurable: true }); Object.defineProperty(IgrAxis.prototype, "useEnhancedIntervalManagement", { /** * Gets or sets whether to use more advanced heuristics when determining the initial number of labels to render, before resolving collisions, etc. * * Use `UseEnhancedIntervalManagement` property to gets/sets whether to use more advanced heuristics when determining the initial number of labels to render, * before resolving collisions, etc. */ get: function () { return this.i.c4; }, set: function (v) { this.i.c4 = ensureBool(v); }, enumerable: false, configurable: true }); Object.defineProperty(IgrAxis.prototype, "enhancedIntervalMinimumCharacters", { /** * Gets or sets the minimum desired characters to be displayed for horizontal axes when using advanced label heuristics. -1 will attempt to adjust the interval to precisely fit the horizontal labels. * * The `EnhancedIntervalMinimumCharacters` property is used to set the mininum desired characters to be displayed for horizontal axes when using advanced label heuristics. */ get: function () { return this.i.fs; }, set: function (v) { this.i.fs = +v; }, enumerable: false, configurable: true }); Object.defineProperty(IgrAxis.prototype, "enhancedIntervalPreferMoreCategoryLabels", { /** * Gets or sets whether the enhanced interval management should prefer to show all the labels if possible without collisions for supported types of category axes. This is for use with EnhancedIntervalMinimumCharacters = -1 and axes that have an integral interval. */ get: function () { return this.i.b1; }, set: function (v) { this.i.b1 = ensureBool(v); }, enumerable: false, configurable: true }); Object.defineProperty(IgrAxis.prototype, "labelTextStyle", { /** * Gets or sets the text style to use for axis labels. * * The `labelTextStyle` property Overrides the style of the text used for the axis labels. * * ```ts * <IgrDataChart * dataSource={this.state.dataSource} * width="700px" * height="500px"> * * <IgrCategoryXAxis name="xAxis" * label="Year" * titleTextStyle="12pt Verdana" /> * <IgrNumericYAxis name="yAxis" /> * </IgrDataChart> * ``` * * ```ts * <IgrCategoryXAxis name="xAxis" * title="Country" * titleTextColor="gray" * titleTextStyle="12pt Verdana" * titleAngle={90} /> * ``` */ get: function () { return this.i.az ? this.i.az.textStyle : null; }, set: function (v) { this.ensureLabelSettings(); this.i.az.textStyle = v; }, enumerable: false, configurable: true }); Object.defineProperty(IgrAxis.prototype, "labelTextColor", { /** * The color of the {0}. * * The `labelTextColor` property Overrides the color of the text used for the axis labels. * * ```ts * <IgrDataChart * dataSource={this.state.dataSource} * width="700px" * height="500px"> * * <IgrCategoryXAxis name="xAxis" * label="Year" * labelTextColor="gray" /> * <IgrNumericYAxis name="yAxis" /> * </IgrDataChart> * ``` * * ```ts * <IgrCategoryXAxis name="xAxis" * title="Country" * titleTextColor="gray" * titleTextStyle="12pt Verdana" * titleAngle={90} /> * ``` */ get: function () { return brushToString(this.i.az ? this.i.az.textColor : null); }, set: function (v) { this.ensureLabelSettings(); this.i.az.textColor = stringToBrush(v); }, enumerable: false, configurable: true }); Object.defineProperty(IgrAxis.prototype, "labelLocation", { /** * Gets or sets the location of the {0}. * * The `Location` property is used for the location. */ get: function () { return this.i.az ? this.i.az.location : 0; }, set: function (v) { this.ensureLabelSettings(); this.i.az.location = ensureEnum(AxisLabelsLocation_$type, v); }, enumerable: false, configurable: true }); Object.defineProperty(IgrAxis.prototype, "labelVisibility", { /** * Gets or sets the visibility of the {0}. * * The `Visibility` property is used for the visibility of the axis. */ get: function () { return this.i.az ? this.i.az.visibility : 0; }, set: function (v) { this.ensureLabelSettings(); this.i.az.visibility = ensureEnum(Visibility_$type, v); }, enumerable: false, configurable: true }); Object.defineProperty(IgrAxis.prototype, "labelShowFirstLabel", { /** * Gets or sets whether the first label is displayed when the zoom level is set to 1. * * The `ShowFirstLabel` is used to check whether the first label is displayed when the zoom level is set to 1. */ get: function () { return this.i.az ? this.i.az.showFirstLabel : false; }, set: function (v) { this.ensureLabelSettings(); this.i.az.showFirstLabel = ensureBool(v); }, enumerable: false, configurable: true }); Object.defineProperty(IgrAxis.prototype, "labelAngle", { /** * Gets or sets the angle of the {0}. * * The `Angle` property is used to set the angle of the axis. * * ```ts * <IgrDataChart * dataSource={this.state.dataSource} * width="700px" * height="500px"> * * <IgrCategoryXAxis name="xAxis" * label="Year" * titleAngle={90} /> * <IgrNumericYAxis name="yAxis" /> * </IgrDataChart> * ``` * * ```ts * <IgrCategoryXAxis name="xAxis" * title="Country" * titleTextColor="gray" * titleTextStyle="12pt Verdana" * titleAngle={90} /> * ``` */ get: function () { return this.i.az ? this.i.az.angle : NaN; }, set: function (v) { this.ensureLabelSettings(); this.i.az.angle = +v; }, enumerable: false, configurable: true }); Object.defineProperty(IgrAxis.prototype, "labelExtent", { /** * Distance between the axis and the edge of the control. * * The `Extent` property is used for the extent. * * ```ts * <IgrDataChart * dataSource={this.state.dataSource} * width="700px" * height="500px"> * * <IgrCategoryXAxis name="xAxis" * label="Year"/> * <IgrNumericYAxis name="yAxis" /> * </IgrDataChart> * ``` */ get: function () { return this.i.az ? this.i.az.extent : NaN; }, set: function (v) { this.ensureLabelSettings(); this.i.az.extent = +v; }, enumerable: false, configurable: true }); Object.defineProperty(IgrAxis.prototype, "labelMaximumExtent", { /** * Maximum distance between the axis and the edge of the control. */ get: function () { return this.i.az ? this.i.az.maximumExtent : NaN; }, set: function (v) { this.ensureLabelSettings(); this.i.az.maximumExtent = +v; }, enumerable: false, configurable: true }); Object.defineProperty(IgrAxis.prototype, "labelMaximumExtentPercentage", { /** * Maximum distance between the axis and the edge of the control, relative to Chart size. */ get: function () { return this.i.az ? this.i.az.maximumExtentPercentage : NaN; }, set: function (v) { this.ensureLabelSettings(); this.i.az.maximumExtentPercentage = +v; }, enumerable: false, configurable: true }); Object.defineProperty(IgrAxis.prototype, "labelLeftMargin", { /** * Margin applied to the left of the {0}. * * The `labelLeftMargin` property is used for the left margin of the labels. */ get: function () { return this.i.az ? this.i.az.leftMargin : NaN; }, set: function (v) { this.ensureLabelSettings(); this.i.az.leftMargin = +v; }, enumerable: false, configurable: true }); Object.defineProperty(IgrAxis.prototype, "labelRightMargin", { /** * Margin applied to the right of the {0}. * * The `labelRightMargin` property is used for the right margin of the labels. */ get: function () { return this.i.az ? this.i.az.rightMargin : NaN; }, set: function (v) { this.ensureLabelSettings(); this.i.az.rightMargin = +v; }, enumerable: false, configurable: true }); Object.defineProperty(IgrAxis.prototype, "labelTopMargin", { /** * Margin applied above the {0}. * * The `labelTopMargin` property is used for the top margin of the labels. * * ```ts * <IgrCategoryXAxis name="xAxis" * label="Country" * labelTextStyle="9pt Verdana" * labelTopMargin={5} * labelTextColor="gray" /> * ``` */ get: function () { return this.i.az ? this.i.az.topMargin : NaN; }, set: function (v) { this.ensureLabelSettings(); this.i.az.topMargin = +v; }, enumerable: false, configurable: true }); Object.defineProperty(IgrAxis.prototype, "labelBottomMargin", { /** * Margin applied below the {0}. * * The `labelBottomMargin` is used to set the bottom margin of the labels. */ get: function () { return this.i.az ? this.i.az.bottomMargin : NaN; }, set: function (v) { this.ensureLabelSettings(); this.i.az.bottomMargin = +v; }, enumerable: false, configurable: true }); Object.defineProperty(IgrAxis.prototype, "labelHorizontalAlignment", { /** * Gets or sets the horizontal alignment of the {0}. * * The `HorizontalAlignment` property is used for the horizontal alignment. */ get: function () { return this.i.az ? this.i.az.horizontalAlignment : 0; }, set: function (v) { this.ensureLabelSettings(); this.i.az.horizontalAlignment = ensureEnum(HorizontalAlignment_$type, v); }, enumerable: false, configurable: true }); Object.defineProperty(IgrAxis.prototype, "labelVerticalAlignment", { /** * Gets or sets the vertical alignment of the {0}. * * The `VerticalAlignment` property is used for the vertical alignment of the axis. */ get: function () { return this.i.az ? this.i.az.verticalAlignment : 0; }, set: function (v) { this.ensureLabelSettings(); this.i.az.verticalAlignment = ensureEnum(VerticalAlignment_$type, v); }, enumerable: false, configurable: true }); IgrAxis.prototype.ensureLabelSettings = function () { if (this.i.az) { return; } this.i.az = new AxisLabelSettings(); this.i.az.location = this.i.a0(); this.i.az.angle = this.i.d7(); this.i.az.leftMargin = this.i.d9(); this.i.az.rightMargin = this.i.ea(); this.i.az.topMargin = this.i.eb(); this.i.az.bottomMargin = this.i.d8(); this.i.az.horizontalAlignment = this.i.ju(); this.i.az.verticalAlignment = this.i.ko(); }; Object.defineProperty(IgrAxis.prototype, "crossingAxis", { /** * Gets or sets the CrossingAxis property. * * The `CrossingAxis` property is used for CrossingAxis . * * ```ts * <IgrDataChart * dataSource={this.state.dataSource} > * * <IgrNumericXAxis name="xAxis" /> * <IgrNumericYAxis name="yAxis" * crossingAxisName= "xAxis" * crossingValue= {700}/> * </IgrDataChart> * ``` */ get: function () { var r = this.i.aj; if (r == null) { return null; } if (!r.externalObject) { var e = IgrAxis._createFromInternal(r); if (e) { e._implementation = r; } r.externalObject = e; } return r.externalObject; }, set: function (v) { if (v != null && this._stylingContainer && v._styling) v._styling(this._stylingContainer, this, this); v == null ? this.i.aj = null : this.i.aj = v.i; }, enumerable: false, configurable: true }); Object.defineProperty(IgrAxis.prototype, "crossingAxisName", { /** * Gets or sets the name to use to resolve crossingAxis from markup. */ get: function () { return this._crossingAxisName; }, set: function (v) { this._crossingAxisName = v; }, enumerable: false, configurable: true }); Object.defineProperty(IgrAxis.prototype, "crossingValue", { /** * Gets or sets the CrossingValue property. * * The `CrossingValue` property is used for CrossingValue of the axis. * * ```ts * <IgrDataChart * dataSource={this.state.dataSource} > * * <IgrNumericXAxis name="xAxis" /> * <IgrNumericYAxis name="yAxis" * crossingAxis= "xAxis" * crossingValue= {700}/> * </IgrDataChart> * ``` */ get: function () { return this.i.fx; }, set: function (v) { this.i.fx = v; }, enumerable: false, configurable: true }); Object.defineProperty(IgrAxis.prototype, "titlePosition", { /** * Gets or sets the title position relative to the axis labels. */ get: function () { return this.i.bf ? this.i.bf.position : 0; }, set: function (v) { this.ensureTitleSettings(); this.i.bf.position = ensureEnum(AxisTitlePosition_$type, v); }, enumerable: false, configurable: true }); Object.defineProperty(IgrAxis.prototype, "titleTextStyle", { /** * Gets or sets the text style to use for axis labels. * * The `labelTextStyle` property Overrides the style of the text used for the axis labels. * * ```ts * <IgrDataChart * dataSource={this.state.dataSource} * width="700px" * height="500px"> * * <IgrCategoryXAxis name="xAxis" * label="Year" * titleTextStyle="12pt Verdana" /> * <IgrNumericYAxis name="yAxis" /> * </IgrDataChart> * ``` * * ```ts * <IgrCategoryXAxis name="xAxis" * title="Country" * titleTextColor="gray" * titleTextStyle="12pt Verdana" * titleAngle={90} /> * ``` */ get: function () { return this.i.bf ? this.i.bf.textStyle : null; }, set: function (v) { this.ensureTitleSettings(); this.i.bf.textStyle = v; }, enumerable: false, configurable: true }); Object.defineProperty(IgrAxis.prototype, "titleTextColor", { /** * The color of the {0}. * * The `labelTextColor` property Overrides the color of the text used for the axis labels. * * ```ts * <IgrDataChart * dataSource={this.state.dataSource} * width="700px" * height="500px"> * * <IgrCategoryXAxis name="xAxis" * label="Year" * labelTextColor="gray" /> * <IgrNumericYAxis name="yAxis" /> * </IgrDataChart> * ``` * * ```ts * <IgrCategoryXAxis name="xAxis" * title="Country" * titleTextColor="gray" * titleTextStyle="12pt Verdana" * titleAngle={90} /> * ``` */ get: function () { return brushToString(this.i.bf ? this.i.bf.textColor : null); }, set: function (v) { this.ensureTitleSettings(); this.i.bf.textColor = stringToBrush(v); }, enumerable: false, configurable: true }); Object.defineProperty(IgrAxis.prototype, "titleLocation", { /** * Gets or sets the location of the {0}. * * The `Location` property is used for the location. */ get: function () { return this.i.bf ? this.i.bf.location : 0; }, set: function (v) { this.ensureTitleSettings(); this.i.bf.location = ensureEnum(AxisLabelsLocation_$type, v); }, enumerable: false, configurable: true }); Object.defineProperty(IgrAxis.prototype, "titleVisibility", { /** * Gets or sets the visibility of the {0}. * * The `Visibility` property is used for the visibility of the axis. */ get: function () { return this.i.bf ? this.i.bf.visibility : 0; }, set: function (v) { this.ensureTitleSettings(); this.i.bf.visibility = ensureEnum(Visibility_$type, v); }, enumerable: false, configurable: true }); Object.defineProperty(IgrAxis.prototype, "titleShowFirstLabel", { /** * Gets or sets whether the first label is displayed when the zoom level is set to 1. * * The `ShowFirstLabel` is used to check whether the first label is displayed when the zoom level is set to 1. */ get: function () { return this.i.bf ? this.i.bf.showFirstLabel : false; }, set: function (v) { this.ensureTitleSettings(); this.i.bf.showFirstLabel = ensureBool(v); }, enumerable: false, configurable: true }); Object.defineProperty(IgrAxis.prototype, "titleAngle", { /** * Gets or sets the angle of the {0}. * * The `Angle` property is used to set the angle of the axis. * * ```ts * <IgrDataChart * dataSource={this.state.dataSource} * width="700px" * height="500px"> * * <IgrCategoryXAxis name="xAxis" * label="Year" * titleAngle={90} /> * <IgrNumericYAxis name="yAxis" /> * </IgrDataChart> * ``` * * ```ts * <IgrCategoryXAxis name="xAxis" * title="Country" * titleTextColor="gray" * titleTextStyle="12pt Verdana" * titleAngle={90} /> * ``` */ get: function () { return this.i.bf ? this.i.bf.angle : NaN; }, set: function (v) { this.ensureTitleSettings(); this.i.bf.angle = +v; }, enumerable: false, configurable: true }); Object.defineProperty(IgrAxis.prototype, "titleExtent", { /** * Distance between the axis and the edge of the control. * * The `Extent` property is used for the extent. * * ```ts * <IgrDataChart * dataSource={this.state.dataSource} * width="700px" * height="500px"> * * <IgrCategoryXAxis name="xAxis" * label="Year"/> * <IgrNumericYAxis name="yAxis" /> * </IgrDataChart> * ``` */ get: function () { return this.i.bf ? this.i.bf.extent : NaN; }, set: function (v) { this.ensureTitleSettings(); this.i.bf.extent = +v; }, enumerable: false, configurable: true }); Object.defineProperty(IgrAxis.prototype, "titleMaximumExtent", { /** * Maximum distance between the axis and the edge of the control. */ get: function () { return this.i.bf ? this.i.bf.maximumExtent : NaN; }, set: function (v) { this.ensureTitleSettings(); this.i.bf.maximumExtent = +v; }, enumerable: false, configurable: true }); Object.defineProperty(IgrAxis.prototype, "titleMaximumExtentPercentage", { /** * Maximum distance between the axis and the edge of the control, relative to Chart size. */ get: function () { return this.i.bf ? this.i.bf.maximumExtentPercentage : NaN; }, set: function (v) { this.ensureTitleSettings(); this.i.bf.maximumExtentPercentage = +v; }, enumerable: false, configurable: true }); Object.defineProperty(IgrAxis.prototype, "titleLeftMargin", { /** * Margin applied to the left of the {0}. * * The `labelLeftMargin` property is used for the left margin of the labels. */ get: function () { return this.i.bf ? this.i.bf.leftMargin : NaN; }, set: function (v) { this.ensureTitleSettings(); this.i.bf.leftMargin = +v; }, enumerable: false, configurable: true }); Object.defineProperty(IgrAxis.prototype, "titleRightMargin", { /** * Margin applied to the right of the {0}. * * The `labelRightMargin` property is used for the right margin of the labels. */ get: function () { return this.i.bf ? this.i.bf.rightMargin : NaN; }, set: function (v) { this.ensureTitleSettings(); this.i.bf.rightMargin = +v; }, enumerable: false, configurable: true }); Object.defineProperty(IgrAxis.prototype, "titleTopMargin", { /** * Margin applied above the {0}. * * The `labelTopMargin` property is used for the top margin of the labels. * * ```ts * <IgrCategoryXAxis name="xAxis" * label="Country" * labelTextStyle="9pt Verdana" * labelTopMargin={5} * labelTextColor="gray" /> * ``` */ get: function () { return this.i.bf ? this.i.bf.topMargin : NaN; }, set: function (v) { this.ensureTitleSettings(); this.i.bf.topMargin = +v; }, enumerable: false, configurable: true }); Object.defineProperty(IgrAxis.prototype, "titleBottomMargin", { /** * Margin applied below the {0}. * * The `labelBottomMargin` is used to set the bottom margin of the labels. */ get: function () { return this.i.bf ? this.i.bf.bottomMargin : NaN; }, set: function (v) { this.ensureTitleSettings(); this.i.bf.bottomMargin = +v; }, enumerable: false, configurable: true }); Object.defineProperty(IgrAxis.prototype, "titleHorizontalAlignment", { /** * Gets or sets the horizontal alignment of the {0}. * * The `HorizontalAlignment` property is used for the horizontal alignment. */ get: function () { return this.i.bf ? this.i.bf.horizontalAlignment : 0; }, set: function (v) { this.ensureTitleSettings(); this.i.bf.horizontalAlignment = ensureEnum(HorizontalAlignment_$type, v); }, enumerable: false, configurable: true }); Object.defineProperty(IgrAxis.prototype, "titleVerticalAlignment", { /** * Gets or sets the vertical alignment of the {0}. * * The `VerticalAlignment` property is used for the vertical alignment of the axis. */ get: function () { return this.i.bf ? this.i.bf.verticalAlignment : 0; }, set: function (v) { this.ensureTitleSettings(); this.i.bf.verticalAlignment = ensureEnum(VerticalAlignment_$type, v); }, enumerable: false, configurable: true }); IgrAxis.prototype.ensureTitleSettings = function () { if (this.i.bf) { return; } this.i.bf = new TitleSettings(); this.i.bf.location = this.i.a1(); this.i.bf.angle = this.i.ec(); this.i.bf.leftMargin = this.i.ee(); this.i.bf.rightMargin = this.i.ef(); this.i.bf.topMargin = this.i.eg(); this.i.bf.bottomMargin = this.i.ed(); this.i.bf.horizontalAlignment = this.i.jv(); this.i.bf.verticalAlignment = this.i.kp(); }; Object.defineProperty(IgrAxis.prototype, "annotations", { /** * Gets the current annotations for the axis. */ get: function () { if (this._annotations === null) { var coll = new IgrAxisAnnotationCollection(); var innerColl = this.i.an; if (!innerColl) { innerColl = new AxisAnnotationCollection_internal(); } this._annotations = coll._fromInner(innerColl); } return this._annotations; }, set: function (v) { if (this._annotations !== null) { this._annotations._setSyncTarget(null); this._annotations = null; } var coll = new IgrAxisAnnotationCollection(); this._annotations = coll._fromOuter(v); var syncColl =