igniteui-react-charts
Version:
Ignite UI React charting components for building rich data visualizations using TypeScript APIs.
203 lines (202 loc) • 6.61 kB
JavaScript
import { delegateCombine, delegateRemove } from "igniteui-react-core";
import { TimeAxisDisplayType_$type } from "./TimeAxisDisplayType";
import { IgrTimeAxisBase } from "./igr-time-axis-base";
import { CategoryDateTimeXAxis } from "./CategoryDateTimeXAxis";
import { ensureBool, ensureEnum } from "igniteui-react-core";
/**
* Represents a category-based horizontal X axis that uses a DateTime scale.
*
* `CategoryDateTimeXAxis` class represents a category-based horizontal X axis that uses a DateTime scale.
*
* ```ts
* <IgrDataChart
* dataSource={this.state.dataSource}
* width="700px"
* height="500px">
* <IgrTimeXAxis name="xAxis"
* label="Time"
* dateTimeMemberPath="time" />
* </IgrDataChart>
* ```
*
* ```ts
* this.timeXAxis = new IgrTimeXAxis({name: "timeXAxis"});
* this.timeXAxis.title = "Time X Axis";
* this.timeXAxis.dataSource = this.financialData;
* this.timeXAxis.dateTimeMemberPath = "Time";
* this.timeXAxis.label = "Date";
* ```
*/
export class IgrCategoryDateTimeXAxis extends IgrTimeAxisBase {
createImplementation() {
return new CategoryDateTimeXAxis();
}
/**
* @hidden
*/
get i() {
return this._implementation;
}
constructor(props) {
super(props);
this._actualIntervalChange = null;
this._actualIntervalChange_wrapped = null;
this._actualMinorIntervalChange = null;
this._actualMinorIntervalChange_wrapped = null;
}
/**
* Gets if the current axis is a continuous rather than a discrete scale
*/
get isContinuous() {
return this.i.db;
}
/**
* Gets or sets whether the axis labels can be unevenly spaced
*/
get unevenlySpacedLabels() {
return this.i.ri;
}
set unevenlySpacedLabels(v) {
this.i.ri = ensureBool(v);
}
/**
* Gets or sets the axis display type.
* Continuous display type divides the axis into even intervals, where labels will not necessarily be aligned with data points.
* Discrete display type will not use a constant interval, but will align each label with its data point.
*
* `displayType` property is used for axis display type.
*
* Continuous display type divides the axis into even intervals, where labels will not necessarily be aligned with data points. Discrete display type will not use a constant interval, but will align each label with its data point.
*
* ```ts
* <IgrDataChart
* dataSource={this.state.dataSource}
* width="700px"
* height="500px">
* <IgrTimeXAxis name="xAxis" label="Date"
* dateTimeMemberPath="Date"
* displayType ="continuous" />
* </IgrDataChart>
* ```
*
* ```ts
* this.timeXAxis = new IgrTimeXAxis({name: "timeXAxis"});
* this.xAxis.dataTimeMemberPath="date";
* this.xAxis.displayType ="continuous"
* ```
*/
get displayType() {
return this.i.rf;
}
set displayType(v) {
this.i.rf = ensureEnum(TimeAxisDisplayType_$type, v);
}
/**
* Gets or sets the X axis time interval.
*
* `Interval` property is used to get/sets the frequency of displayed labels.
*
* ```ts
* <IgrDataChart
* dataSource={this.state.dataSource}
* width="700px"
* height="500px">
* <IgrTimeXAxis name="xAxis"
* label="Date"
* interval={2}
* dateTimeMemberPath="Date" />
* </IgrDataChart>
* ```
*
* ```ts
* this.timeXAxis = new IgrTimeXAxis({name: "timeXAxis"});
* This.xAxis.dataTimeMemberPath="date";
* this.xAxis.interval=2 ;
* ```
*/
get interval() {
return this.i.rr;
}
set interval(v) {
this.i.rr = +v;
}
/**
* Gets the effective value for the current Interval.
*/
get actualInterval() {
return this.i.ro;
}
set actualInterval(v) {
this.i.ro = +v;
}
/**
* Gets or sets the frequency of displayed minor lines.
* The set value is a factor that determines how the minor lines will be displayed.
*/
get minorInterval() {
return this.i.rs;
}
set minorInterval(v) {
this.i.rs = +v;
}
/**
* Gets the effective value for the current MinorInterval.
*/
get actualMinorInterval() {
return this.i.rp;
}
set actualMinorInterval(v) {
this.i.rp = +v;
}
/**
* Gets if the current axis is of category date time axis type
*/
get isCategoryDateTime() {
return this.i.c9;
}
scrollIntoView(minimum, maximum) {
this.i.rz(minimum, maximum);
}
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);
}
}