igniteui-react-charts
Version:
Ignite UI React charting components for building rich data visualizations using TypeScript APIs.
197 lines (196 loc) • 6.92 kB
TypeScript
import { TimeAxisDisplayType } from "./TimeAxisDisplayType";
import { IgrTimeAxisBase, IIgrTimeAxisBaseProps } from "./igr-time-axis-base";
import { CategoryDateTimeXAxis } from "./CategoryDateTimeXAxis";
/**
* 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 declare class IgrCategoryDateTimeXAxis extends IgrTimeAxisBase<IIgrCategoryDateTimeXAxisProps> {
protected createImplementation(): CategoryDateTimeXAxis;
/**
* @hidden
*/
get i(): CategoryDateTimeXAxis;
constructor(props: IIgrCategoryDateTimeXAxisProps);
/**
* Gets if the current axis is a continuous rather than a discrete scale
*/
get isContinuous(): boolean;
/**
* Gets or sets whether the axis labels can be unevenly spaced
*/
get unevenlySpacedLabels(): boolean;
set unevenlySpacedLabels(v: boolean);
/**
* 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(): TimeAxisDisplayType;
set displayType(v: TimeAxisDisplayType);
/**
* 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(): number;
set interval(v: number);
/**
* Gets the effective value for the current Interval.
*/
get actualInterval(): number;
set actualInterval(v: number);
/**
* 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(): number;
set minorInterval(v: number);
/**
* Gets the effective value for the current MinorInterval.
*/
get actualMinorInterval(): number;
set actualMinorInterval(v: number);
/**
* Gets if the current axis is of category date time axis type
*/
get isCategoryDateTime(): boolean;
scrollIntoView(minimum: Date, maximum: Date): void;
private _actualIntervalChange;
private _actualIntervalChange_wrapped;
get actualIntervalChange(): (s: IgrCategoryDateTimeXAxis, e: number) => void;
set actualIntervalChange(ev: (s: IgrCategoryDateTimeXAxis, e: number) => void);
private _actualMinorIntervalChange;
private _actualMinorIntervalChange_wrapped;
get actualMinorIntervalChange(): (s: IgrCategoryDateTimeXAxis, e: number) => void;
set actualMinorIntervalChange(ev: (s: IgrCategoryDateTimeXAxis, e: number) => void);
}
export interface IIgrCategoryDateTimeXAxisProps extends IIgrTimeAxisBaseProps {
/**
* Gets or sets whether the axis labels can be unevenly spaced
*/
unevenlySpacedLabels?: boolean | string;
/**
* 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"
* ```
*/
displayType?: TimeAxisDisplayType | string;
/**
* 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 ;
* ```
*/
interval?: number | string;
/**
* Gets the effective value for the current Interval.
*/
actualInterval?: number | string;
/**
* Gets or sets the frequency of displayed minor lines.
* The set value is a factor that determines how the minor lines will be displayed.
*/
minorInterval?: number | string;
/**
* Gets the effective value for the current MinorInterval.
*/
actualMinorInterval?: number | string;
}