igniteui-react-charts
Version:
Ignite UI React charting components for building rich data visualizations using TypeScript APIs.
614 lines (612 loc) • 18.8 kB
JavaScript
import { delegateCombine, delegateRemove } from "igniteui-react-core";
import { AxisRangeBufferMode_$type } from "./AxisRangeBufferMode";
import { IgrAxis } from "./igr-axis";
import { ensureBool, ensureEnum, arrayFindByName } from "igniteui-react-core";
/**
* Represents the base class for all IgxDataChartComponent numeric axes.
*/
export class IgrNumericAxisBase extends IgrAxis {
/**
* @hidden
*/
get i() {
return this._implementation;
}
constructor(props) {
super(props);
this._actualMinimumValueChange = null;
this._actualMinimumValueChange_wrapped = null;
this._actualMaximumValueChange = null;
this._actualMaximumValueChange_wrapped = null;
this._actualIntervalChange = null;
this._actualIntervalChange_wrapped = null;
this._actualMinorIntervalChange = null;
this._actualMinorIntervalChange_wrapped = null;
}
/**
* Gets or sets if the current axis is of numeric axis type
*/
get isNumeric() {
return this.i.cj;
}
/**
* Gets or sets how the numeric axis will adjust its range buffer to less closely fix the data from the series.
*/
get autoRangeBufferMode() {
return this.i.ky;
}
set autoRangeBufferMode(v) {
this.i.ky = ensureEnum(AxisRangeBufferMode_$type, v);
}
/**
* Gets or sets the MinimumValue property.
*
* Used to set the minimum value of a numeric axis. To get the minimum value in effect on a numeric axis use `ActualMinimumValue`.
*
* ```ts
* this.yAxis.minimumValue = 0;
* ```
*
* ```ts
* <IgrDataChart >
*
*
* <IgrCategoryXAxis name="xAxisYears"
* interval={12} labelLocation="OutsideBottom"
* label="Year" overlap={1} gap={0.4} />
*
* <IgrNumericYAxis name="yAxisLeft"
* title="Expanse | Revenue"
* minimumValue={-900}
* labelLocation="OutsideLeft"
* maximumValue={900}
* interval={300} />
*
*
* <IgrLineSeries name="series1"
* valueMemberPath="Revenue"
* xAxisName="xAxisMonths"
* yAxisName="yAxisLeft" />
* </IgrDataChart>
* ```
*/
get minimumValue() {
return this.i.mc;
}
set minimumValue(v) {
this.i.mc = +v;
}
/**
* Gets the effective minimum value for the current numeric axis object.
*
* ```ts
* let effectiveMinValue: number = yAxis.actualMinimumValue;
* ```
*/
get actualMinimumValue() {
return this.i.l4;
}
set actualMinimumValue(v) {
this.i.l4 = +v;
}
/**
* Gets the effective minimum value for the current numeric axis object.
*
* The `actualVisibleMinimumValue` is used to get the current visible maximum value for the a numeric axis. Note, at times the `actualVisibleMinimumValue` may differ from the `actualMinimumValue`, for example when the chart is zoomed.
*
* ```ts
* let effectiveVisibleMinValue: number = yAxis.actualVisibleMinimumValue;
* ```
*/
get actualVisibleMinimumValue() {
return this.i.l7;
}
set actualVisibleMinimumValue(v) {
this.i.l7 = +v;
}
/**
* Gets or sets the MaximumValue property.
*
* Used to set the maximum value of a numeric axis. To get the maximum value in effect on a numeric axis use `ActualMaximumValue`.
*
* ```ts
* this.yAxis.maximumValue = 80;
* ```
*
* ```ts
* <IgrDataChart >
*
*
* <IgrCategoryXAxis name="xAxisYears"
* interval={12} labelLocation="OutsideBottom"
* label="Year" overlap={1} gap={0.4} />
*
* <IgrNumericYAxis name="yAxisLeft"
* title="Expanse | Revenue"
* minimumValue={-900}
* labelLocation="OutsideLeft"
* interval={300} />
*
*
* <IgrLineSeries name="series1"
* valueMemberPath="Revenue"
* xAxisName="xAxisMonths"
* yAxisName="yAxisLeft" />
* </IgrDataChart>
* ```
*/
get maximumValue() {
return this.i.mb;
}
set maximumValue(v) {
this.i.mb = +v;
}
/**
* Gets the effective maximum value for the current numeric axis object.
*
* ```ts
* let effectiveMaxValue: number = yAxis.actualMaximumValue;
* ```
*/
get actualMaximumValue() {
return this.i.l3;
}
set actualMaximumValue(v) {
this.i.l3 = +v;
}
/**
* Gets the effective visible maximum value for the current numeric axis object.
*
* The `ActualVisibleMaximumValue` is used to get the current visible maximum value for the a numeric axis. Note, at times the `ActualVisibleMaximumValue` may differ from the `ActualMaximumValue`, for example when the chart is zoomed.
*
* ```ts
* let effectiveVisibleMaxValue: number = yAxis.actualVisibleMaximumValue;
* ```
*/
get actualVisibleMaximumValue() {
return this.i.l6;
}
set actualVisibleMaximumValue(v) {
this.i.l6 = +v;
}
/**
* Gets or sets the Interval property.
*
* The `Interval` is used to get or set the numeric axis major interval which specifies how frequent major gridlines and axis labels are rendered on an axis.
*
* ```ts
* this.yAxis.interval = 20;
* ```
*
* ```ts
* <IgrDataChart >
*
*
* <IgrCategoryXAxis name="xAxisYears"
* interval={12} labelLocation="OutsideBottom"
* label="Year" overlap={1} gap={0.4} />
*
* <IgrNumericYAxis name="yAxisLeft"
* title="Expanse | Revenue"
* minimumValue={-900}
* labelLocation="OutsideLeft"
* maximumValue={900}
* interval={300} />
*
*
* <IgrLineSeries name="series1"
* valueMemberPath="Revenue"
* xAxisName="xAxisMonths"
* yAxisName="yAxisLeft" />
* </IgrDataChart>
* ```
*/
get interval() {
return this.i.l8;
}
set interval(v) {
this.i.l8 = +v;
}
/**
* Gets the effective value for the current Interval.
*
* ```ts
* let effectiveInterval: number = yAxis.actualInterval;
* ```
*/
get actualInterval() {
return this.i.l2;
}
set actualInterval(v) {
this.i.l2 = +v;
}
/**
* Gets the effective value for the current max precision.
*/
get actualMaxPrecision() {
return this.i.mj;
}
set actualMaxPrecision(v) {
this.i.mj = +v;
}
/**
* Gets or sets the the maximum precision to use for the auto interval.
*/
get maxPrecision() {
return this.i.mo;
}
set maxPrecision(v) {
this.i.mo = +v;
}
/**
* Gets or sets the the maximum precision to use for the auto interval.
*/
get shouldApplyMaxPrecisionWhenZoomed() {
return this.i.ls;
}
set shouldApplyMaxPrecisionWhenZoomed(v) {
this.i.ls = ensureBool(v);
}
/**
* Gets or sets the MinorInterval property.
*
* The `MinorInterval` is used to get or set the numeric axis minor interval which specifies how frequent minor gridlines are rendered on an axis. Please note, in order for minor gridlines to be displayed the following may also need to be set: `MinorStroke`, `MinorStrokeThickness`.
*
* ```ts
* this.yAxis.minorInterval = 2.5;
* this.yAxis.minorStroke = 'blue';
* this.yAxis.minorStrokeThickness = 1;
* ```
*
* ```ts
* <IgrDataChart >
*
* <IgrCategoryXAxis name="xAxisYears"
* interval={12} labelLocation="OutsideBottom"
* label="Year" overlap={1} gap={0.4} />
*
* <IgrNumericYAxis name="yAxisLeft"
* title="Expanse | Revenue"
* minimumValue={-900}
* minorInterval= 2.5
* minorStroke="blue" />
*
*
* <IgrLineSeries name="series1"
* valueMemberPath="Revenue"
* xAxisName="xAxisMonths"
* yAxisName="yAxisLeft" />
* </IgrDataChart>
* ```
*/
get minorInterval() {
return this.i.md;
}
set minorInterval(v) {
this.i.md = +v;
}
/**
* Gets the effective value for the current MinorInterval.
*
* ```ts
* let effectiveMinorInterval: number = yAxis.actualMinorInterval;
* ```
*/
get actualMinorInterval() {
return this.i.l5;
}
set actualMinorInterval(v) {
this.i.l5 = +v;
}
/**
* Gets or sets the ReferenceValue property.
*
* Used to get or set a reference value on a numeric axis which when used with an area, bar, or column series will result in the series shapes being drawn above or below the specified value.
*
* ```ts
* this.yAxis.referenceValue = 30;
* ```
*
* ```ts
* <IgrDataChart >
*
* <IgrCategoryXAxis name="xAxisYears"
* interval={12} labelLocation="OutsideBottom"
* label="Year" overlap={1} gap={0.4} />
*
* <IgrNumericYAxis name="yAxisLeft"
* title="Expanse | Revenue"
* referenceValue= {30} />
*
*
* <IgrLineSeries name="series1"
* valueMemberPath="Revenue"
* xAxisName="xAxisMonths"
* yAxisName="yAxisLeft" />
* </IgrDataChart>
* ```
*/
get referenceValue() {
return this.i.me;
}
set referenceValue(v) {
this.i.me = +v;
}
/**
* Gets or sets the IsLogarithmic property.
*
* `IsLogarithmic` is used to get or set whether the numeric axis scaler is in linear or logarithmic mode. For logarithmic scaling, this can be used in conjunction with `LogarithmBase` to further define the logarithmic scale.
*
* ```ts
* this.yAxis.isLogarithmic= true;
* this.yAxis.logarithmBase = 2;
* ```
*
* ```ts
* <IgrDataChart >
*
*
* <IgrCategoryXAxis name="xAxisYears"
* interval={12} labelLocation="OutsideBottom"
* label="Year" overlap={1} gap={0.4} />
*
* <IgrNumericYAxis name="yAxisLeft"
* title="Expanse | Revenue"
* IsLogarithmic="True"
* LogarithmBase={2}/>
*
*
* <IgrLineSeries name="series1"
* valueMemberPath="Revenue"
* xAxisName="xAxisMonths"
* yAxisName="yAxisLeft" />
* </IgrDataChart>
* ```
*/
get isLogarithmic() {
return this.i.lo;
}
set isLogarithmic(v) {
this.i.lo = ensureBool(v);
}
/**
* Determines if the axis has a valid logarithmic scale.
*
* ```ts
* let effectiveLogarithmic: boolean = this.yAxis.actualIsLogarithmic
* ```
*/
get actualIsLogarithmic() {
return this.i.lg;
}
set actualIsLogarithmic(v) {
this.i.lg = ensureBool(v);
}
/**
* Gets or sets whether the axis should favor emitting a label at the end of the scale.
*/
get favorLabellingScaleEnd() {
return this.i.lj;
}
set favorLabellingScaleEnd(v) {
this.i.lj = ensureBool(v);
}
/**
* Gets or sets the LogarithmBase property.
*
* `LogarithmBase` is used to get or set logarithm base when a numeric axis is in Logarithmic scale mode. For logarithmic scaling, this is used in conjunction with `IsLogarithmic` or `ScaleMode` to set logarithmic scaling.
*
* ```ts
* this.yAxis.scaleMode = NumericScaleMode.Logarithmic;
* this.yAxis.logarithmBase = 2;
* ```
*
* ```ts
* <IgrDataChart >
*
*
* <IgrCategoryXAxis name="xAxisYears"
* interval={12} labelLocation="OutsideBottom"
* label="Year" overlap={1} gap={0.4} />
*
* <IgrNumericYAxis name="yAxisLeft"
* title="Expanse | Revenue"
* ScaleMode="Logarithmic"
* LogarithmBase={2}/>
*
* <IgrLineSeries name="series1"
* valueMemberPath="Revenue"
* xAxisName="xAxisMonths"
* yAxisName="yAxisLeft" />
* </IgrDataChart>
* ```
*/
get logarithmBase() {
return this.i.mm;
}
set logarithmBase(v) {
this.i.mm = +v;
}
/**
* Sets or gets a function which takes an object that produces a formatted label for displaying in the chart.
*/
get formatAbbreviatedLabel() {
return this.i.kt;
}
set formatAbbreviatedLabel(v) {
this.i.kt = v;
}
/**
* Gets or sets the label format string to use for the label.
*/
get abbreviatedLabelFormat() {
return this.i.mq;
}
set abbreviatedLabelFormat(v) {
this.i.mq = v;
}
/**
* Gets or sets the format specifiers to use with the AbbreviatedLabelFormat string.
*/
get abbreviatedLabelFormatSpecifiers() {
return this.i.kr;
}
set abbreviatedLabelFormatSpecifiers(v) {
if (v && !Array.isArray(v) && typeof (v) == "string") {
const re = /\s*(?:,|\s|$)\s*/gm;
v = v.split(re);
}
this.i.kr = v;
}
get isFormattingAbbreviatedLargeNumber() {
return this.i.ln;
}
set isFormattingAbbreviatedLargeNumber(v) {
this.i.ln = ensureBool(v);
}
/**
* Determines if the axis has a user-defined minimum.
*
* `HasUserMaximum` is used to determine if a numeric axis has a user definied maximum value.
*
* ```ts
* let hasSetMaximum: boolean = this.yAxis.hasUserMaximum;
* ```
*/
get hasUserMinimum() {
return this.i.lm;
}
/**
* Determines if the axis has a user-defined maximum.
*
* `HasUserMinimum` is used to determine if a numeric axis has a user definied minium value.
*
* ```ts
* let hasSetMinimum: boolean = this.yAxis.hasUserMinimum;
* ```
*/
get hasUserMaximum() {
return this.i.ll;
}
/**
* A boolean indicating whether or not to abbreviate large numbers.
*/
get abbreviateLargeNumbers() {
return this.i.lf;
}
set abbreviateLargeNumbers(v) {
this.i.lf = ensureBool(v);
}
findByName(name) {
var baseResult = super.findByName(name);
if (baseResult) {
return baseResult;
}
if (this.abbreviatedLabelFormatSpecifiers != null && arrayFindByName(this.abbreviatedLabelFormatSpecifiers, name)) {
return arrayFindByName(this.abbreviatedLabelFormatSpecifiers, name);
}
return null;
}
getFullRange() {
let iv = this.i.ag();
return (iv);
}
/**
* Unscales a value from screen space into axis space.
* @param unscaledValue * The scaled value in screen coordinates to unscale into axis space.
*
* Unscales a value from screen space into axis space.
*
* ```ts
* let dataValue: number = this.yAxis.unscaleValue(pixel);
* ```
*/
unscaleValue(unscaledValue) {
let iv = this.i.mf(unscaledValue);
return (iv);
}
get actualMinimumValueChange() {
return this._actualMinimumValueChange;
}
set actualMinimumValueChange(ev) {
if (this._actualMinimumValueChange_wrapped !== null) {
this.i.propertyChanged = delegateRemove(this.i.propertyChanged, this._actualMinimumValueChange_wrapped);
this._actualMinimumValueChange_wrapped = null;
this._actualMinimumValueChange = null;
}
this._actualMinimumValueChange = ev;
this._actualMinimumValueChange_wrapped = (o, e) => {
let ext = this.actualMinimumValue;
if (this.beforeActualMinimumValueChange) {
this.beforeActualMinimumValueChange(this, ext);
}
if (this._actualMinimumValueChange) {
this._actualMinimumValueChange(this, ext);
}
};
this.i.propertyChanged = delegateCombine(this.i.propertyChanged, this._actualMinimumValueChange_wrapped);
}
get actualMaximumValueChange() {
return this._actualMaximumValueChange;
}
set actualMaximumValueChange(ev) {
if (this._actualMaximumValueChange_wrapped !== null) {
this.i.propertyChanged = delegateRemove(this.i.propertyChanged, this._actualMaximumValueChange_wrapped);
this._actualMaximumValueChange_wrapped = null;
this._actualMaximumValueChange = null;
}
this._actualMaximumValueChange = ev;
this._actualMaximumValueChange_wrapped = (o, e) => {
let ext = this.actualMaximumValue;
if (this.beforeActualMaximumValueChange) {
this.beforeActualMaximumValueChange(this, ext);
}
if (this._actualMaximumValueChange) {
this._actualMaximumValueChange(this, ext);
}
};
this.i.propertyChanged = delegateCombine(this.i.propertyChanged, this._actualMaximumValueChange_wrapped);
}
get actualIntervalChange() {
return this._actualIntervalChange;
}
set actualIntervalChange(ev) {
if (this._actualIntervalChange_wrapped !== null) {
this.i.propertyChanged = delegateRemove(this.i.propertyChanged, this._actualIntervalChange_wrapped);
this._actualIntervalChange_wrapped = null;
this._actualIntervalChange = null;
}
this._actualIntervalChange = ev;
this._actualIntervalChange_wrapped = (o, e) => {
let ext = this.actualInterval;
if (this.beforeActualIntervalChange) {
this.beforeActualIntervalChange(this, ext);
}
if (this._actualIntervalChange) {
this._actualIntervalChange(this, ext);
}
};
this.i.propertyChanged = delegateCombine(this.i.propertyChanged, this._actualIntervalChange_wrapped);
}
get actualMinorIntervalChange() {
return this._actualMinorIntervalChange;
}
set actualMinorIntervalChange(ev) {
if (this._actualMinorIntervalChange_wrapped !== null) {
this.i.propertyChanged = delegateRemove(this.i.propertyChanged, this._actualMinorIntervalChange_wrapped);
this._actualMinorIntervalChange_wrapped = null;
this._actualMinorIntervalChange = null;
}
this._actualMinorIntervalChange = ev;
this._actualMinorIntervalChange_wrapped = (o, e) => {
let ext = this.actualMinorInterval;
if (this.beforeActualMinorIntervalChange) {
this.beforeActualMinorIntervalChange(this, ext);
}
if (this._actualMinorIntervalChange) {
this._actualMinorIntervalChange(this, ext);
}
};
this.i.propertyChanged = delegateCombine(this.i.propertyChanged, this._actualMinorIntervalChange_wrapped);
}
}