igniteui-react-charts
Version:
Ignite UI React charting components for building rich data visualizations using TypeScript APIs.
298 lines (295 loc) • 8.72 kB
TypeScript
import { IgrCategoryAxisBase, IIgrCategoryAxisBaseProps } from "./igr-category-axis-base";
import { TimeAxisBase } from "./TimeAxisBase";
/**
* 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 declare abstract class IgrTimeAxisBase<P extends IIgrTimeAxisBaseProps = IIgrTimeAxisBaseProps> extends IgrCategoryAxisBase<P> {
/**
* @hidden
*/
get i(): TimeAxisBase;
constructor(props: P);
/**
* 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(): string;
set dateTimeMemberPath(v: string);
/**
* 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(): boolean;
set isDataPreSorted(v: boolean);
/**
* Gets the coerced minimum value.
*
* Use `ActualMinimumValue` to get the coerced maximum value.
*/
get actualMinimumValue(): Date;
set actualMinimumValue(v: Date);
/**
* Gets the coerced maximum value.
*
* Use `ActualMaximumValue` to get the coerced maximum value
*/
get actualMaximumValue(): Date;
set actualMaximumValue(v: Date);
/**
* 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(): Date;
set minimumValue(v: Date);
/**
* 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(): Date;
set maximumValue(v: Date);
/**
* 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(): boolean;
/**
* 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(): boolean;
getFullRange(): number[];
getItemValue(item: any, memberPathName: string): any;
/**
* 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: number): number;
/**
* Updates the axis when the data has been changed.
*/
notifyDataChanged(): void;
private _actualMinimumValueChange;
private _actualMinimumValueChange_wrapped;
get actualMinimumValueChange(): (s: IgrTimeAxisBase, e: Date) => void;
set actualMinimumValueChange(ev: (s: IgrTimeAxisBase, e: Date) => void);
private _actualMaximumValueChange;
private _actualMaximumValueChange_wrapped;
get actualMaximumValueChange(): (s: IgrTimeAxisBase, e: Date) => void;
set actualMaximumValueChange(ev: (s: IgrTimeAxisBase, e: Date) => void);
}
export interface IIgrTimeAxisBaseProps extends IIgrCategoryAxisBaseProps {
/**
* 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);
* ```
*/
dateTimeMemberPath?: string;
/**
* 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 ;
* ```
*/
isDataPreSorted?: boolean | string;
/**
* Gets the coerced minimum value.
*
* Use `ActualMinimumValue` to get the coerced maximum value.
*/
actualMinimumValue?: Date;
/**
* Gets the coerced maximum value.
*
* Use `ActualMaximumValue` to get the coerced maximum value
*/
actualMaximumValue?: Date;
/**
* 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";
* ```
*/
minimumValue?: Date;
/**
* 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";
* ```
*/
maximumValue?: Date;
}