UNPKG

igniteui-react-charts

Version:

Ignite UI React charting components for building rich data visualizations using TypeScript APIs.

165 lines (163 loc) 5.33 kB
import { IgrFinancialSeries, IIgrFinancialSeriesProps } from "./igr-financial-series"; import { FinancialOverlay } from "./FinancialOverlay"; /** * Represents the base functionality for a IgxDataChartComponent financial overlay series. * The difference between a FinancialIndicator and a FinancialOverlay is small. * Overlays are usually drawn against the same axes as the price, but they don't * have to be. Overlays mostly display multiple values, but not all of them, and so * so some indicators. * * The `FinancialOverlay` class represents the base functionality for a IgxDataChartComponent financial overlay series. * * ```ts * <IgrDataChart * dataSource={this.state.dataSource} * ref={this.onChartRef} * width="700px" * height="500px"> * * * <IgrCategoryXAxis name="xAxis" label="Date" /> * <IgrNumericYAxis name="yAxis" /> * * * <IgrFinancialPriceSeries * name="series2" * xAxisName="xAxis" * yAxisName="yAxis" * displayType="Candlestick" * lowMemberPath="Low" * highMemberPath="High" * openMemberPath="Open" * closeMemberPath="Close" * volumeMemberPath="Volume" /> * </IgrDataChart> * ``` * * ```ts * this.financialSeries = new IgrFinancialPriceSeries({name: "financialSeries"}); * this.financialSeries.dataSource = this.financialData; * this.financialSeries.xAxis = this.timeXAxis; * this.financialSeries.yAxis = this.numericYAxis; * this.financialSeries.xAxisName = "timeXAxis"; * this.financialSeries.yAxisName = "numericYAxis"; * this.financialSeries.highMemberPath="High" ; * this.financialSeries.lowMemberPath="Low"; * this.financialSeries.closeMemberPath="Close"; * this.financialSeries.openMemberPath="Open"; * this.financialSeries.volumeMemberPath="Volume"; * ``` */ export declare abstract class IgrFinancialOverlay<P extends IIgrFinancialOverlayProps = IIgrFinancialOverlayProps> extends IgrFinancialSeries<P> { /** * @hidden */ get i(): FinancialOverlay; constructor(props: P); /** * Gets whether the series is financial overlay */ get isFinancialOverlay(): boolean; /** * Gets or sets the number of values to hide at the beginning of the indicator. * * Use the `IgnoreFirst` property to sets the number of values to hide at the beginning of the indicator. * * ```ts * <IgrDataChart * dataSource={this.state.dataSource} * width="700px" * height="500px"> * * * <IgrCategoryXAxis name="xAxis" label="Date" /> * <IgrNumericYAxis name="yAxis" /> * * * <IgrFinancialPriceSeries * name="series2" * xAxisName="xAxis" * yAxisName="yAxis" * displayType="Candlestick" * lowMemberPath="Low" * highMemberPath="High" * openMemberPath="Open" * closeMemberPath="Close" * volumeMemberPath="Volume" /> * * <IgrBollingerBandsOverlay * name="series1" * xAxisName="xAxis" * yAxisName="yAxis" * lowMemberPath="Low" * highMemberPath="High" * openMemberPath="Open" * closeMemberPath="Close" * volumeMemberPath="Volume" * IgnoreFirst={2} /> * </IgrDataChart> * ``` * * ```ts * series.ignoreFirst=2; * ``` */ get ignoreFirst(): number; set ignoreFirst(v: number); /** * Scrolls the series to display the item for the specified data item. * The series is scrolled by the minimum amount required to place the specified data item within * the central 80% of the visible axis. * @param item * The data item (item) to scroll to. * * Use the `ScrollIntoView` method to scrolls the series to display the item for the specified data item. */ scrollIntoView(item: any): boolean; } export interface IIgrFinancialOverlayProps extends IIgrFinancialSeriesProps { /** * Gets or sets the number of values to hide at the beginning of the indicator. * * Use the `IgnoreFirst` property to sets the number of values to hide at the beginning of the indicator. * * ```ts * <IgrDataChart * dataSource={this.state.dataSource} * width="700px" * height="500px"> * * * <IgrCategoryXAxis name="xAxis" label="Date" /> * <IgrNumericYAxis name="yAxis" /> * * * <IgrFinancialPriceSeries * name="series2" * xAxisName="xAxis" * yAxisName="yAxis" * displayType="Candlestick" * lowMemberPath="Low" * highMemberPath="High" * openMemberPath="Open" * closeMemberPath="Close" * volumeMemberPath="Volume" /> * * <IgrBollingerBandsOverlay * name="series1" * xAxisName="xAxis" * yAxisName="yAxis" * lowMemberPath="Low" * highMemberPath="High" * openMemberPath="Open" * closeMemberPath="Close" * volumeMemberPath="Volume" * IgnoreFirst={2} /> * </IgrDataChart> * ``` * * ```ts * series.ignoreFirst=2; * ``` */ ignoreFirst?: number | string; }