igniteui-react-charts
Version:
Ignite UI React charting components for building rich data visualizations using TypeScript APIs.
271 lines (268 loc) • 7.88 kB
JavaScript
import { delegateCombine, delegateRemove } from "igniteui-react-core";
import { IgrCategoryAxisBase } from "./igr-category-axis-base";
import { ensureBool } from "igniteui-react-core";
/**
* Represents an category-based horizontal X axis that uses a DateTime scale.
*
* Represents horizontal axis that uses a DateTime scale.
*
* ```ts
* <IgrDataChart
* dataSource={this.state.dataSource}
* width="700px"
* height="500px">
* <IgrTimeXAxis name="xAxis"
* label="Date"
* dateTimeMemberPath="Date" />
* </IgrDataChart>
* ```
*
* ```ts
* timeXAxis = new IgrTimeXAxis({name: "timeXAxis"});
* timeXAxis.title = "Time X Axis";
* timeXAxis.dataSource = data;
* timeXAxis.dateTimeMemberPath = "date";
* timeXAxis.label = "Date";
* this.chart.axes.add(xAxis);
* ```
*/
export class IgrTimeAxisBase extends IgrCategoryAxisBase {
/**
* @hidden
*/
get i() {
return this._implementation;
}
constructor(props) {
super(props);
this._actualMinimumValueChange = null;
this._actualMinimumValueChange_wrapped = null;
this._actualMaximumValueChange = null;
this._actualMaximumValueChange_wrapped = null;
}
/**
* Gets or sets the DateTime mapping property for the axis.
*
* Use `DateTimeMemberPath` property for DateTime mapping with the axis.
*
* ```ts
* <IgrDataChart
* dataSource={this.state.dataSource}
* width="700px"
* height="500px">
* <IgrTimeXAxis name="xAxis"
* label="Date"
* dateTimeMemberPath="Date" />
* </IgrDataChart>
* ```
*
* ```ts
* timeXAxis = new IgrTimeXAxis({name: "timeXAxis"});
* timeXAxis.title = "Time X Axis";
* timeXAxis.dataSource = data;
* timeXAxis.dateTimeMemberPath = "date";
* timeXAxis.label = "Date";
* this.chart.axes.add(xAxis);
* ```
*/
get dateTimeMemberPath() {
return this.i.dateTimeMemberPath;
}
set dateTimeMemberPath(v) {
this.i.dateTimeMemberPath = v;
}
/**
* Gets or sets whether the data assigned to the date time axis should be considered pre-sorted by date/time.
*
* Use `IsDataPreSorted` property to decide if the data assigned to the date time axis should be considered pre-sorted by date/time.
*
* ```ts
* <IgrDataChart
* dataSource={this.state.dataSource}
* width="700px"
* height="500px">
* <IgrTimeXAxis name="xAxis"
* label="Date"
* isDataPreSorted={true}
* dateTimeMemberPath="Date" />
* </IgrDataChart>
* ```
*
* ```ts
* timeXAxis = new IgrTimeXAxis({name: "timeXAxis"});
* timeXAxis.title = "Time X Axis";
* timeXAxis.dataSource = data;
* timeXAxis.dateTimeMemberPath = "date";
* timeXAxis.isDataPreSorted= true ;
* ```
*/
get isDataPreSorted() {
return this.i.qd;
}
set isDataPreSorted(v) {
this.i.qd = ensureBool(v);
}
/**
* Gets the coerced minimum value.
*
* Use `ActualMinimumValue` to get the coerced maximum value.
*/
get actualMinimumValue() {
return this.i.actualMinimumValue;
}
set actualMinimumValue(v) {
this.i.actualMinimumValue = v;
}
/**
* Gets the coerced maximum value.
*
* Use `ActualMaximumValue` to get the coerced maximum value
*/
get actualMaximumValue() {
return this.i.actualMaximumValue;
}
set actualMaximumValue(v) {
this.i.actualMaximumValue = v;
}
/**
* Gets or sets the axis MinimumValue.
*
* Use `MinimumValue` property for axis minimum value.
*
* ```ts
* <IgrDataChart
* dataSource={this.state.dataSource}
* width="700px"
* height="500px">
* <IgrTimeXAxis name="xAxis"
* label="Date"
* maximumValue="2019-12-26"/>
* </IgrDataChart>
* ```
*
* ```ts
* this.timeXAxis.maximumValue="2019-12-26";
* ```
*/
get minimumValue() {
return this.i.minimumValue;
}
set minimumValue(v) {
this.i.minimumValue = v;
}
/**
* Gets or sets the axis MaximumValue.
*
* Use `MaximumValue` property for axis maximum value.
*
* ```ts
* <IgrDataChart
* dataSource={this.state.dataSource}
* width="700px"
* height="500px">
* <IgrTimeXAxis name="xAxis"
* label="Date"
* dateTimeMemberPath="Date"
* maximumValue ="2019-12-26"
* />
* ```
*
* ```ts
* this.timeXAxis.maximumValue="2019-12-26";
* ```
*/
get maximumValue() {
return this.i.maximumValue;
}
set maximumValue(v) {
this.i.maximumValue = v;
}
/**
* Checks if the axis is of date time axis type
*
* Use `IsDateTime` property to Checks if the axis is of date time axis type.
*
* ```ts
* const isDT = this.timeXAxis.isDateTime;
* ```
*/
get isDateTime() {
return this.i.dc;
}
/**
* Checks if axis requires sorting of items
*
* Use `IsSorting` property to Checks if axis requires sorting of items.
*
* ```ts
* const isDT = this.timeXAxis.isDateTime;
* ```
*/
get isSorting() {
return this.i.dm;
}
getFullRange() {
let iv = this.i.ag();
return (iv);
}
getItemValue(item, memberPathName) {
let iv = this.i.hd(item, memberPathName);
return (iv);
}
/**
* Gets the index of the data item with the value nearest the given value.
* @param unscaledValue * The value to find a value close to.
*/
getIndexClosestToUnscaledValue(unscaledValue) {
let iv = this.i.i$f(unscaledValue);
return (iv);
}
/**
* Updates the axis when the data has been changed.
*/
notifyDataChanged() {
this.i.i$i();
}
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);
}
}