igniteui-react-charts
Version:
Ignite UI React charting components for building rich data visualizations using TypeScript APIs.
1,683 lines (1,679 loc) • 50.7 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 { 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>
* ```
*/
export class IgrAxis extends React.Component {
get i() {
return this._implementation;
}
onImplementationCreated() {
}
constructor(props) {
super(props);
this._renderer = null;
this._crossingAxisName = null;
this._annotations = null;
this._companionAxisCrossingAxisName = 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();
}
componentDidMount() {
{
for (const p of Object.keys(this.props)) {
{
if (isValidProp(this, p)) {
{
this[p] = this.props[p];
}
}
}
}
}
}
// // manually added because auto-gen doesn't create this function which is required by igr-data-chart-r-template.ts
//bindAxes(axes: IgrAxis[]) {
//}
//private _crossingAxisName: string;
//public set crossingAxisName(value: string) {
// this._crossingAxisName = value;
//}
//public get crossingAxisName(): string {
// return this._crossingAxisName;
//}
get axisInternal() {
return this.i;
}
createImplementation() {
return null;
}
shouldComponentUpdate(nextProps, nextState) {
const mod = getModifiedProps(this.props, nextProps);
for (const p of Object.keys(mod)) {
if (isValidProp(this, p)) {
this[p] = mod[p];
}
}
return true;
}
render() {
return null;
}
set name(value) {
this.i.name = value;
}
get name() {
return this.i.name;
}
provideData(data) {
}
_provideRenderer(renderer) {
this._renderer = renderer;
}
static _createFromInternal(internal) {
if (!internal) {
return null;
}
if (!internal.$type) {
return null;
}
let name = internal.$type.name;
let externalName = "Igr" + name;
if (!TypeRegistrar.isRegistered(externalName)) {
return null;
}
return TypeRegistrar.create(externalName);
}
/**
* Gets or sets if the current axis is of category axis type
*/
get isCategory() {
return this.i.c8;
}
/**
* 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 isNumeric() {
return this.i.dh;
}
/**
* Gets if the current axis is of angular axis type
*/
get isAngular() {
return this.i.c5;
}
/**
* Gets or sets if the current axis is of radial axis type
*/
get isRadial() {
return this.i.dl;
}
/**
* Gets if the current axis is a vertical axis.
*/
get isVertical() {
return this.i.dq;
}
/**
* Gets or sets if the current axis is sorting data items
*/
get isSorting() {
return this.i.dm;
}
/**
* Gets or sets if the current axis is of date time axis type
*/
get isDateTime() {
return this.i.dc;
}
/**
* Gets or sets if the current axis is of ordinal axis type
*/
get isOrdinal() {
return this.i.di;
}
/**
* Gets or sets if the axis is a piecewise scaling function.
*/
get isPiecewise() {
return this.i.dj;
}
/**
* Gets if the current axis is of category date time axis type
*/
get isCategoryDateTime() {
return this.i.c9;
}
/**
* Gets if the current axis is a continuous rather than a discrete scale
*/
get isContinuous() {
return this.i.db;
}
/**
* 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 formatLabel() {
return this.i.ay;
}
set formatLabel(v) {
this.i.ay = v;
}
/**
* 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 title() {
return this.i.jb;
}
set title(v) {
this.i.jb = v;
}
/**
* 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 stroke() {
return brushToString(this.i.nm);
}
set stroke(v) {
this.i.nm = stringToBrush(v);
}
/**
* Gets or sets the effective stroke used for the axis.
*/
get actualStroke() {
return brushToString(this.i.nc);
}
set actualStroke(v) {
this.i.nc = stringToBrush(v);
}
/**
* 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 strokeThickness() {
return this.i.gs;
}
set strokeThickness(v) {
this.i.gs = +v;
}
/**
* Gets or sets the StrokeDashArray property.
*/
get strokeDashArray() {
return fromDoubleCollection(this.i.nq);
}
set strokeDashArray(v) {
this.i.nq = toDoubleCollection(v);
}
/**
* 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 strip() {
return brushToString(this.i.nl);
}
set strip(v) {
this.i.nl = stringToBrush(v);
}
/**
* 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 majorStroke() {
return brushToString(this.i.ni);
}
set majorStroke(v) {
this.i.ni = stringToBrush(v);
}
/**
* Gets or sets the ActualMajorStroke property.
*
* The `ActualMajorStroke` property is used for ActualMajorStroke of the axis.
*/
get actualMajorStroke() {
return brushToString(this.i.na);
}
set actualMajorStroke(v) {
this.i.na = stringToBrush(v);
}
/**
* 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 majorStrokeThickness() {
return this.i.f1;
}
set majorStrokeThickness(v) {
this.i.f1 = +v;
}
/**
* Gets or sets the MajorStrokeDashArray property.
*/
get majorStrokeDashArray() {
return fromDoubleCollection(this.i.no);
}
set majorStrokeDashArray(v) {
this.i.no = toDoubleCollection(v);
}
/**
* 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 minorStroke() {
return brushToString(this.i.nj);
}
set minorStroke(v) {
this.i.nj = stringToBrush(v);
}
/**
* Gets or sets the ActualMinorStroke property.
*
* The `ActualMinorStroke` property is used for ActualMinorStroke of the axis.
*/
get actualMinorStroke() {
return brushToString(this.i.nb);
}
set actualMinorStroke(v) {
this.i.nb = stringToBrush(v);
}
/**
* Gets or sets the MinorStrokeThickness property.
*/
get minorStrokeThickness() {
return this.i.f4;
}
set minorStrokeThickness(v) {
this.i.f4 = +v;
}
/**
* Gets or sets the MinorStrokeDashArray property.
*/
get minorStrokeDashArray() {
return fromDoubleCollection(this.i.np);
}
set minorStrokeDashArray(v) {
this.i.np = toDoubleCollection(v);
}
/**
* 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 tickStroke() {
return brushToString(this.i.nn);
}
set tickStroke(v) {
this.i.nn = stringToBrush(v);
}
/**
* 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 tickStrokeThickness() {
return this.i.gu;
}
set tickStrokeThickness(v) {
this.i.gu = +v;
}
/**
* Gets or sets the TickStrokeDashArray property.
*/
get tickStrokeDashArray() {
return fromDoubleCollection(this.i.nr);
}
set tickStrokeDashArray(v) {
this.i.nr = toDoubleCollection(v);
}
/**
* 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 tickLength() {
return this.i.gt;
}
set tickLength(v) {
this.i.gt = +v;
}
/**
* 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 isDisabled() {
return this.i.dd;
}
set isDisabled(v) {
this.i.dd = ensureBool(v);
}
/**
* Gets or sets the IsInverted property.
*
* Gets or sets the `IsInverted` property.
*/
get isInverted() {
return this.i.df;
}
set isInverted(v) {
this.i.df = ensureBool(v);
}
/**
* 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 shouldAvoidAnnotationCollisions() {
return this.i.dv;
}
set shouldAvoidAnnotationCollisions(v) {
this.i.dv = ensureBool(v);
}
/**
* ets or sets whether annotations should be kept in view, even if they aren't positioned where they should appear on the scale.
*/
get shouldKeepAnnotationsInView() {
return this.i.dx;
}
set shouldKeepAnnotationsInView(v) {
this.i.dx = ensureBool(v);
}
/**
* Gets or sets whether to use label height measurement when determining the initial number of labels to render, before resolving collisions, etc.
*/
get usePerLabelHeightMeasurement() {
return this.i.d6;
}
set usePerLabelHeightMeasurement(v) {
this.i.d6 = ensureBool(v);
}
/**
* 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 useEnhancedIntervalManagement() {
return this.i.d5;
}
set useEnhancedIntervalManagement(v) {
this.i.d5 = ensureBool(v);
}
/**
* 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 enhancedIntervalMinimumCharacters() {
return this.i.g2;
}
set enhancedIntervalMinimumCharacters(v) {
this.i.g2 = +v;
}
/**
* 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 enhancedIntervalPreferMoreCategoryLabels() {
return this.i.cr;
}
set enhancedIntervalPreferMoreCategoryLabels(v) {
this.i.cr = ensureBool(v);
}
/**
* 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 labelTextStyle() {
return this.i.a3 ? this.i.a3.textStyle : null;
}
set labelTextStyle(v) {
this.ensureLabelSettings();
this.i.a3.textStyle = v;
}
/**
* 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 labelTextColor() {
return brushToString(this.i.a3 ? this.i.a3.textColor : null);
}
set labelTextColor(v) {
this.ensureLabelSettings();
this.i.a3.textColor = stringToBrush(v);
}
/**
* Gets or sets the location of the {0}.
*
* The `Location` property is used for the location.
*/
get labelLocation() {
return this.i.a3 ? this.i.a3.location : 0;
}
set labelLocation(v) {
this.ensureLabelSettings();
this.i.a3.location = ensureEnum(AxisLabelsLocation_$type, v);
}
/**
* Gets or sets the visibility of the {0}.
*
* The `Visibility` property is used for the visibility of the axis.
*/
get labelVisibility() {
return this.i.a3 ? this.i.a3.visibility : 0;
}
set labelVisibility(v) {
this.ensureLabelSettings();
this.i.a3.visibility = ensureEnum(Visibility_$type, v);
}
/**
* 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 labelShowFirstLabel() {
return this.i.a3 ? this.i.a3.showFirstLabel : false;
}
set labelShowFirstLabel(v) {
this.ensureLabelSettings();
this.i.a3.showFirstLabel = ensureBool(v);
}
/**
* 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 labelAngle() {
return this.i.a3 ? this.i.a3.angle : NaN;
}
set labelAngle(v) {
this.ensureLabelSettings();
this.i.a3.angle = +v;
}
/**
* 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 labelExtent() {
return this.i.a3 ? this.i.a3.extent : NaN;
}
set labelExtent(v) {
this.ensureLabelSettings();
this.i.a3.extent = +v;
}
/**
* Maximum distance between the axis and the edge of the control.
*/
get labelMaximumExtent() {
return this.i.a3 ? this.i.a3.maximumExtent : NaN;
}
set labelMaximumExtent(v) {
this.ensureLabelSettings();
this.i.a3.maximumExtent = +v;
}
/**
* Maximum distance between the axis and the edge of the control, relative to Chart size.
*/
get labelMaximumExtentPercentage() {
return this.i.a3 ? this.i.a3.maximumExtentPercentage : NaN;
}
set labelMaximumExtentPercentage(v) {
this.ensureLabelSettings();
this.i.a3.maximumExtentPercentage = +v;
}
/**
* Margin applied to the left of the {0}.
*
* The `labelLeftMargin` property is used for the left margin of the labels.
*/
get labelLeftMargin() {
return this.i.a3 ? this.i.a3.leftMargin : NaN;
}
set labelLeftMargin(v) {
this.ensureLabelSettings();
this.i.a3.leftMargin = +v;
}
/**
* Margin applied to the right of the {0}.
*
* The `labelRightMargin` property is used for the right margin of the labels.
*/
get labelRightMargin() {
return this.i.a3 ? this.i.a3.rightMargin : NaN;
}
set labelRightMargin(v) {
this.ensureLabelSettings();
this.i.a3.rightMargin = +v;
}
/**
* 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 labelTopMargin() {
return this.i.a3 ? this.i.a3.topMargin : NaN;
}
set labelTopMargin(v) {
this.ensureLabelSettings();
this.i.a3.topMargin = +v;
}
/**
* Margin applied below the {0}.
*
* The `labelBottomMargin` is used to set the bottom margin of the labels.
*/
get labelBottomMargin() {
return this.i.a3 ? this.i.a3.bottomMargin : NaN;
}
set labelBottomMargin(v) {
this.ensureLabelSettings();
this.i.a3.bottomMargin = +v;
}
/**
* Gets or sets the horizontal alignment of the {0}.
*
* The `HorizontalAlignment` property is used for the horizontal alignment.
*/
get labelHorizontalAlignment() {
return this.i.a3 ? this.i.a3.horizontalAlignment : 0;
}
set labelHorizontalAlignment(v) {
this.ensureLabelSettings();
this.i.a3.horizontalAlignment = ensureEnum(HorizontalAlignment_$type, v);
}
/**
* Gets or sets the vertical alignment of the {0}.
*
* The `VerticalAlignment` property is used for the vertical alignment of the axis.
*/
get labelVerticalAlignment() {
return this.i.a3 ? this.i.a3.verticalAlignment : 0;
}
set labelVerticalAlignment(v) {
this.ensureLabelSettings();
this.i.a3.verticalAlignment = ensureEnum(VerticalAlignment_$type, v);
}
ensureLabelSettings() {
if (this.i.a3) {
return;
}
this.i.a3 = new AxisLabelSettings();
this.i.a3.location = this.i.a5();
this.i.a3.angle = this.i.ff();
this.i.a3.leftMargin = this.i.fh();
this.i.a3.rightMargin = this.i.fi();
this.i.a3.topMargin = this.i.fj();
this.i.a3.bottomMargin = this.i.fg();
this.i.a3.horizontalAlignment = this.i.m7();
this.i.a3.verticalAlignment = this.i.n9();
}
/**
* 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 crossingAxis() {
const r = this.i.am;
if (r == null) {
return null;
}
if (!r.externalObject) {
let e = IgrAxis._createFromInternal(r);
if (e) {
e._implementation = r;
}
r.externalObject = e;
}
return r.externalObject;
}
set crossingAxis(v) {
if (v != null && this._stylingContainer && v._styling)
v._styling(this._stylingContainer, this, this);
v == null ? this.i.am = null : this.i.am = v.i;
}
/**
* Gets or sets the name to use to resolve crossingAxis from markup.
*/
get crossingAxisName() {
return this._crossingAxisName;
}
set crossingAxisName(v) {
this._crossingAxisName = v;
}
/**
* 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 crossingValue() {
return this.i.ha;
}
set crossingValue(v) {
this.i.ha = v;
}
/**
* Gets or sets the title position relative to the axis labels.
*/
get titlePosition() {
return this.i.bx ? this.i.bx.position : 0;
}
set titlePosition(v) {
this.ensureTitleSettings();
this.i.bx.position = ensureEnum(AxisTitlePosition_$type, v);
}
/**
* 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 titleTextStyle() {
return this.i.bx ? this.i.bx.textStyle : null;
}
set titleTextStyle(v) {
this.ensureTitleSettings();
this.i.bx.textStyle = v;
}
/**
* 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 titleTextColor() {
return brushToString(this.i.bx ? this.i.bx.textColor : null);
}
set titleTextColor(v) {
this.ensureTitleSettings();
this.i.bx.textColor = stringToBrush(v);
}
/**
* Gets or sets the location of the {0}.
*
* The `Location` property is used for the location.
*/
get titleLocation() {
return this.i.bx ? this.i.bx.location : 0;
}
set titleLocation(v) {
this.ensureTitleSettings();
this.i.bx.location = ensureEnum(AxisLabelsLocation_$type, v);
}
/**
* Gets or sets the visibility of the {0}.
*
* The `Visibility` property is used for the visibility of the axis.
*/
get titleVisibility() {
return this.i.bx ? this.i.bx.visibility : 0;
}
set titleVisibility(v) {
this.ensureTitleSettings();
this.i.bx.visibility = ensureEnum(Visibility_$type, v);
}
/**
* 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 titleShowFirstLabel() {
return this.i.bx ? this.i.bx.showFirstLabel : false;
}
set titleShowFirstLabel(v) {
this.ensureTitleSettings();
this.i.bx.showFirstLabel = ensureBool(v);
}
/**
* 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 titleAngle() {
return this.i.bx ? this.i.bx.angle : NaN;
}
set titleAngle(v) {
this.ensureTitleSettings();
this.i.bx.angle = +v;
}
/**
* 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 titleExtent() {
return this.i.bx ? this.i.bx.extent : NaN;
}
set titleExtent(v) {
this.ensureTitleSettings();
this.i.bx.extent = +v;
}
/**
* Maximum distance between the axis and the edge of the control.
*/
get titleMaximumExtent() {
return this.i.bx ? this.i.bx.maximumExtent : NaN;
}
set titleMaximumExtent(v) {
this.ensureTitleSettings();
this.i.bx.maximumExtent = +v;
}
/**
* Maximum distance between the axis and the edge of the control, relative to Chart size.
*/
get titleMaximumExtentPercentage() {
return this.i.bx ? this.i.bx.maximumExtentPercentage : NaN;
}
set titleMaximumExtentPercentage(v) {
this.ensureTitleSettings();
this.i.bx.maximumExtentPercentage = +v;
}
/**
* Margin applied to the left of the {0}.
*
* The `labelLeftMargin` property is used for the left margin of the labels.
*/
get titleLeftMargin() {
return this.i.bx ? this.i.bx.leftMargin : NaN;
}
set titleLeftMargin(v) {
this.ensureTitleSettings();
this.i.bx.leftMargin = +v;
}
/**
* Margin applied to the right of the {0}.
*
* The `labelRightMargin` property is used for the right margin of the labels.
*/
get titleRightMargin() {
return this.i.bx ? this.i.bx.rightMargin : NaN;
}
set titleRightMargin(v) {
this.ensureTitleSettings();
this.i.bx.rightMargin = +v;
}
/**
* 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 titleTopMargin() {
return this.i.bx ? this.i.bx.topMargin : NaN;
}
set titleTopMargin(v) {
this.ensureTitleSettings();
this.i.bx.topMargin = +v;
}
/**
* Margin applied below the {0}.
*
* The `labelBottomMargin` is used to set the bottom margin of the labels.
*/
get titleBottomMargin() {
return this.i.bx ? this.i.bx.bottomMargin : NaN;
}
set titleBottomMargin(v) {
this.ensureTitleSettings();
this.i.bx.bottomMargin = +v;
}
/**
* Gets or sets the horizontal alignment of the {0}.
*
* The `HorizontalAlignment` property is used for the horizontal alignment.
*/
get titleHorizontalAlignment() {
return this.i.bx ? this.i.bx.horizontalAlignment : 0;
}
set titleHorizontalAlignment(v) {
this.ensureTitleSettings();
this.i.bx.horizontalAlignment = ensureEnum(HorizontalAlignment_$type, v);
}
/**
* Gets or sets the vertical alignment of the {0}.
*
* The `VerticalAlignment` property is used for the vertical alignment of the axis.
*/
get titleVerticalAlignment() {
return this.i.bx ? this.i.bx.verticalAlignment : 0;
}
set titleVerticalAlignment(v) {
this.ensureTitleSettings();
this.i.bx.verticalAlignment = ensureEnum(VerticalAlignment_$type, v);
}
ensureTitleSettings() {
if (this.i.bx) {
return;
}
this.i.bx = new TitleSettings();
this.i.bx.location = this.i.a6();
this.i.bx.angle = this.i.fk();
this.i.bx.leftMargin = this.i.fm();
this.i.bx.rightMargin = this.i.fn();
this.i.bx.topMargin = this.i.fo();
this.i.bx.bottomMargin = this.i.fl();
this.i.bx.horizontalAlignment = this.i.m8();
this.i.bx.verticalAlignment = this.i.oa();
}
/**
* Gets the current annotations for the axis.
*/
get annotations() {
if (this._annotations === null) {
let coll = new IgrAxisAnnotationCollection();
let innerColl = this.i.ar;
if (!innerColl) {
innerColl = new AxisAnnotationCollection_internal();
}
this._annotations = coll._fromInner(innerColl);
}
return this._annotations;
}
set annotations(v) {
if (this._annotations !== null) {
this._annotations._setSyncTarget(null);
this._annotations = null;
}
let coll = new IgrAxisAnnotationCollection();
this._annotations = coll._fromOuter(v);
let syncColl = new SyncableObservableCollection$1(IAxisAnnotation_$type);
let innerColl = this.i.ar;
if (!innerColl) {
innerColl = new AxisAnnotationCollection_internal();
}
syncColl._inner = innerColl;
syncColl.clear();
this._annotations._setSyncTarget(syncColl);
}
/**
* Gets or sets the coercion methods to use when loading data from data sources.
* Should be specified before setting any member paths, if being used. Setting it later
* will not cause data to be re-imported into the chart.
*
* The `coercionMethods` methods is to use when loading data from data sources. Should be specified before setting any member paths, if being used.
* Setting it later will not cause data to be reimported into the chart.
*/
get coercionMethods() {
return this.i.coercionMethods;
}
set coercionMethods(v) {
this.i.coercionMethods = v;
}
/**
* Gets or sets whether the series should expect that properties in its items source may be functions that need to be
* evaluated to yield their value. This defaults to false, as there will be a subtle performance impact to using this feature.
* This value must be set before assigning an item's source to take effect.
*/
get expectFunctions() {
return this.i.expectFunctions;
}
set expectFunctions(v) {
this.i.expectFunctions = ensureBool(v);
}
/**
* Gets or sets the axis label format string.
*
* The `Label` property is used for label mapping of the axis labels.
*
* ```ts
* <IgrCategoryXAxis name="xAxis"
* label="Country"
* labelTextStyle="9pt Verdana"
* labelTopMargin={5}
* labelTextColor="gray" />
* ```
*/
get label() {
return this.i.hg;
}
set label(v) {
this.i.hg = v;
}
/**
* Gets or sets the label format string to use for the label.
*/
get labelFormat() {
return this.i.ik;
}
set labelFormat(v) {
this.i.ik = v;
}
/**
* Gets or sets the format specifiers to use with the LabelFormat string.
*/
get labelFormatSpecifiers() {
return this.i.ah;
}
set labelFormatSpecifiers(v) {
if (v && !Array.isArray(v) && typeof (v) == "string") {
const re = /\s*(?:,|\s|$)\s*/gm;
v = v.split(re);
}
this.i.ah = v;
}
/**
* Gets or sets whether or not the secondary axis enabled for this axis.
*/
get companionAxisEnabled() {
return this.i.ck;
}
set companionAxisEnabled(v) {
this.i.ck = ensureBool(v);
}
/**
* Gets or sets whether or not the secondary axis has opposite location of this axis.
*/
get companionAxisLabelOpposite() {
return this.i.cn;
}
set companionAxisLabelOpposite(v) {
this.i.cn = ensureBool(v);
}
/**
* Gets or sets whether or not the secondary axis is inverted.
*/
get companionAxisIsInverted() {
return this.i.cm;
}
set companionAxisIsInverted(v) {
this.i.cm = ensureBool(v);
}
/**
* Gets or sets crossing axis for the secondary axis.
*/
get companionAxisCrossingAxis() {
const r = this.i.al;
if (r == null) {
return null;
}
if (!r.externalObject) {
let e = IgrAxis._createFromInternal(r);
if (e) {
e._implementation = r;
}
r.externalObject = e;
}
return r.externalObject;
}
set companionAxisCrossingAxis(v) {
if (v != null && this._stylingContainer && v._styling)
v._styling(this._stylingContainer, this, this);
v == null ? this.i.al = null : this.i.al = v.i;
}
/**
* Gets or sets the name to use to resolve companionAxisCrossingAxis from markup.
*/
get companionAxisCrossingAxisName() {
return this._companionAxisCrossingAxisName;
}
set companionAxisCrossingAxisName(v) {
this._companionAxisCrossingAxisName = v;
}
/**
* Gets or sets crossing value for the secondary axis.
*/
get companionAxisCrossingValue() {
return this.i.e4;
}
set companionAxisCrossingValue(v) {
this.i.e4 = +v;
}
/**
* Gets or sets whether or not the secondary axis has visible labels.
*/
get companionAxisLabelVisible() {
return this.i.co;
}
set companionAxisLabelVisible(v) {
this.i.co = ensureBool(v);
}
/**
* Gets or sets label angle on the secondary axis.
*/
get companionAxisLabelAngle() {
return this.i.e5;
}
set companionAxisLabelAngle(v) {
this.i.e5 = +v;
}
/**
* Gets or sets extent of labels on the secondary axis.
*/
get companionAxisLabelExtent() {
return this.i.e6;
}
set companionAxisLabelExtent(v) {
this.i.e6 = +v;
}
/**
* Gets or sets location of labels on the secondary axis.
*/
get companionAxisLabelLocation() {
return this.i.a4;
}
set companionAxisLabelLocation(v) {
this.i.a4 = ensureEnum(AxisLabelsLocation_$type, v);
}
/**
* Gets or sets vertical alignment of the secondary axis.
*/
get companionAxisLabelVerticalAlignment() {
return this.i.n8;
}
set companionAxisLabelVerticalAlignment(v) {
this.i.n8 = ensureEnum(VerticalAlignment_$type, v);
}
/**
* Gets or sets horizontal alignment of labels on the secondary axis.
*/
get companionAxisLabelHorizontalAlignment() {
return this.i.m6;
}
set companionAxisLabelHorizontalAlignment(v) {
this.i.m6 = ensureEnum(HorizontalAlignment_$type, v);
}
/**
* Gets or sets color of labels on the secondary axis.
*/
get companionAxisLabelColor() {
return brushToString(this.i.nd);
}
set companionAxisLabelColor(v) {
this.i.nd = stringToBrush(v);
}
/**
* Gets or sets whether or not the secondary axis is syncronized with properties of primary axis unless CompanionAxis* properties are set
* In other words, secondary axis' LabelExtent will syncronize with primary axis' LabelExtent unless CompanionAxisLabelExtent is set
*/
get companionAxisSyncronizedWithPrimaryAxis() {
return this.i.cp;
}
set companionAxisSyncronizedWithPrimaryAxis(v) {
this.i.cp = ensureBool(v);
}
/**
* Gets or sets color of strips on the secondary axis.
*/
get companionAxisStrip() {
return brushToString(this.i.ng);
}
set companionAxisStrip(v) {
this.i.ng = stringToBrush(v);
}
/**
* Gets or sets stroke of major gridlines on the secondary axis.
*/
get companionAxisMajorStroke() {
return brushToString(this.i.ne);
}
set companionAxisMajorStroke(v) {
this.i.ne = stringToBrush(v);
}
/**
* Gets or sets thickness of major gridlines on the secondary axis.
*/
get companionAxisMajorStrokeThickness() {
return this.i.e7;
}
set companionAxisMajorStrokeThickness(v) {
this.i.e7 = +v;
}
/**
* Gets or sets stroke of minior gridlines on the secondary axis.
*/
get companionAxisMinorStroke() {
return brushToString(this.i.nf);
}
set companionAxisMinorStroke(v) {
this.i.nf = stringToBrush(v);
}
/**
* Gets or sets thickness of minior gridlines on the secondary axis.
*/
get companionAxisMinorStrokeThickness() {
return this.i.e8;
}
set companionAxisMinorStrokeThickness(v) {
this.i.e8 = +v;
}
/**
* Gets or sets color of ticks on the secondary axis.
*/
get companionAxisTickStroke() {
return brushToString(this.i.nh);
}
set companionAxisTickStroke(v) {
this.i.nh = stringToBrush(v);
}
/**
* Gets or sets length of ticks on the secondary axis.
*/
get companionAxisTickLength() {
return this.i.e9;
}
set companionAxisTickLength(v) {
this.i.e9 = +v;
}
/**
* Gets or sets label angle on the secondary axis.
*/
get companionAxisTickStrokeThickness() {
return this.i.fa;
}
set companionAxisTickStrokeThickness(v) {
this.i.fa = +v;
}
/**
* Gets or sets title on the secondary axis.
*/
get companionAxisTitle() {
return this.i.h8;
}
set companionAxisTitle(v) {
this.i.h8 = v;
}
bindAxes(axes) {
for (let i = 0; i < axes.length; i++) {
if (this.crossingAxisName && this.crossingAxisName.length > 0 &&
axes[i].name == this.crossingAxisName) {
this.crossingAxis = axes[i];
}
}
for (let i = 0; i < axes.length; i++) {
if (this.companionAxisCrossingAxisName && this.companionAxisCrossingAxisName.length > 0 &&
axes[i].name == this.companionAxisCrossingAxisName) {
this.companionAxisCrossingAxis = axes[i];
}
}
}
findByName(name) {
if (this.findEphemera) {
if (name && name.indexOf("@@e:") == 0) {
return this.findEphemera(name);
}
}
if (this.crossingAxis && this.crossingAxis.name && this.crossingAxis.name == name) {
return this.crossingAxis;
}
if (this.annotations != null && this.annotations.findByName && this.annotations.findByName(name)) {
return this.annotations.findByName(name);
}
if (this.labelFormatSpecifiers != null && arrayFindByName(this.labelFormatSpecifiers, name)) {
return arrayFindByName(this.labelFormatSpecifiers, name);
}
if (this.companionAxisCrossingAxis && this.companionAxisCrossingAxis.name && this.companionAxisCrossingAxis.name == name) {
return this.companionAxisCrossingAxis;
}
return null;
}
get hasUserValues() {
return this._hasUserValues;
}
__m(propertyName) {
if (!this._inStyling) {
this._hasUserValues.add(propertyName);
}
}
_styling(container, component, parent) {
if (this._inStyling) {
return;
}
this._inStyling = true;
this._stylingContainer = container;
this._stylingParent = component;
let genericPrefix = "";
let typeName = this.i.$type.name;
if (typeName.indexOf("Xam") === 0) {
typeName = typeName.substring(3);
}
genericPrefix = toSpinal("Axis");
let additionalPrefixes = [];
let prefix = toSpinal(typeName);
additionalPrefixes.push(prefix + "-");
let b = this.i.$type.baseType;
while (b && b.name != "Object" &&
b.name != "Base" &&
b.name != "Control" &&
b.Name != "DependencyObject" &&
b.Name != "FrameworkElement") {
typeName = b.name;
if (typeName.indexOf("Xam") === 0) {
typeName = typeName.substring(3);
}
let basePrefix = toSpinal(typeName);
additionalPrefixes.push(basePrefix + "-");
b = b.baseType;
}
if (parent) {
let parentTypeName = parent.i.$type.name;
if (parentTypeName.indexOf("Xam") === 0) {
parentTypeName = parentTypeName.substring(3);
}
let parentPrefix = toSpinal(parentTypeName);
additionalPrefixes.push(parentPrefix + "-" + genericPrefix + "-");
additionalPrefixes.push(parentPrefix + "-" + prefix + "-");
}
initializePropertiesFromCss(container, this, genericPrefix + "-", this.hasUserValues, false, additionalPrefixes);
if (this.crossingAxis && this.crossingAxis._styling) {
this.crossingAxis._styling(container, component, this);
}
if (this.companionAxisCrossingAxis && this.companionAxisCrossingAxis._styling) {
this.companionAxisCrossingAxis._styling(container, component, this);
}
if (this._otherStyling) {
this._otherStyling(container, component, parent);
}
this._inStyling = false;
}
getFullRange() {
let iv = this.i.ag();
return (iv);
}
/**
* Renders the axis with no animation.
*/
renderAxis() {
this.i.k2();
}
/**
* If using enhanced interval management and precise interval fitting, this will reset the cached maximum label width, and recalculate using the current labels.
*/
resetCachedEnhancedInterval() {
this.i.k6();
}
getItemValue(item, memberPathName) {
let iv = this.i.hd(item, memberPathName);
return (iv);
}
/**
* Gets the label for a data item.
* @param value * The unscaled value to get a label for.
*/
getValueLabel(value) {
let iv = this.i.ih(value);
return (iv);
}
/**
* Scales a value from axis space into screen space.
* @param unscaledValue * The unscaled axis value to scale.
*/
scaleValue(unscaledValue) {
let iv = this.i.gg(unscaledValue);
return (iv);
}
/**
* Occurs when the axis range changes.
*/
get rangeChanged() {
return this._rangeChanged;
}
set rangeChanged(ev) {
if (this._rangeChanged_wrapped !== null) {
this.i.rangeChanged = delegateRemove(this.i.rangeChanged, this._rangeChanged_wrapped);
this._rangeChanged_wrapped = null;
this._rangeChanged = null;
}
this._rangeChanged = ev;
this._rangeChanged_wrapped = (o, e) => {
let outerArgs = new IgrAxisRangeChangedEventArgs();
outerArgs._provideImplementation(e);
if (this.beforeRangeChanged) {
this.beforeRangeChanged(this, outerArgs);
}
if (this._rangeChanged) {
this._rangeChanged(this, outerArgs);
}
};
this.i.rangeChanged = delegateCombine(this.i.rangeChanged, this._rangeChanged_wrapped);
;
}
/**
* This event is raised every time a render has been requested from a series.
*/
get renderRequested() {
return this._renderRequested;
}
set renderRequested(ev) {
if (this._renderRequested_wrapped !== null) {
this.i.renderRe