UNPKG

igniteui-react-charts

Version:

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

172 lines (171 loc) 4.7 kB
import { IgrFinancialOverlay } from "./igr-financial-overlay"; import { BollingerBandsOverlay } from "./BollingerBandsOverlay"; import { toPoint } from "igniteui-react-core"; /** * Represents a IgxDataChartComponent Bollinger Bands financial overlay series. * Default required members: High, Low, Close * * You can use the `BollingerBandsOverlay` class represents a IgxDataChartComponent Bollinger Bands financial overlay series. * * ```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" /> * </IgrDataChart> * ``` * * ```ts * const s = new IgrBollingerBandsOverlay({ name: "", xAxisName: "" }); * ``` */ export class IgrBollingerBandsOverlay extends IgrFinancialOverlay { createImplementation() { return new BollingerBandsOverlay(); } /** * @hidden */ get i() { return this._implementation; } constructor(props) { super(props); } /** * Gets or sets the moving average period for the current BollingerBandOverlay object. * The typical, and initial, value for Bollinger band periods is 14. * * You can use the `period` property for moving average of the current BollingerBandOverlay object. * * ```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" * period={7} /> * </IgrDataChart> * ``` * * ```ts * this.series.period = 7; * ``` */ get period() { return this.i.abm; } set period(v) { this.i.abm = +v; } /** * Gets or sets the moving average period for the current BollingerBandOverlay object. * The typical, and initial, value for Bollinger band multipliers is 2. * * You can use the `BollingerBandsOverlay` * * ```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" * multiplier= {2} /> * </IgrDataChart> * ``` */ get multiplier() { return this.i.abl; } set multiplier(v) { this.i.abl = +v; } getSeriesValue(world, useInterpolation, skipUnknowns) { let iv = this.i.i8(toPoint(world), useInterpolation, skipUnknowns); return (iv); } getPreviousOrExactIndex(world, skipUnknowns) { let iv = this.i.ke(toPoint(world), skipUnknowns); return (iv); } getNextOrExactIndex(world, skipUnknowns) { let iv = this.i.kc(toPoint(world), skipUnknowns); return (iv); } }