igniteui-react-charts/esm2015/lib/igr-financial-overlay.js

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

import { IgrFinancialSeries } from "./igr-financial-series";
/**
 * 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 class IgrFinancialOverlay extends IgrFinancialSeries {
    /**
                                 * @hidden
                                 */
    get i() {
        return this._implementation;
    }
    constructor(props) {
        super(props);
    }
    /**
     * Gets whether the series is financial overlay
    */
    get isFinancialOverlay() {
        return this.i.fa;
    }
    /**
     * 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() {
        return this.i.abd;
    }
    set ignoreFirst(v) {
        this.i.abd = +v;
    }
    /**
     * 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) {
        let iv = this.i.ge(item);
        return (iv);
    }
}