UNPKG

igniteui-react-charts

Version:

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

94 lines (93 loc) 2.79 kB
import { IgrStrategyBasedIndicator } from "./igr-strategy-based-indicator"; import { WilliamsPercentRIndicator } from "./WilliamsPercentRIndicator"; /** * Represents a IgxDataChartComponent Williams %R indicator series. * Default required members: High, Low, Close * * The `WilliamsPercentRIndicator` scale ranges from 0 to -100. It is useful for identifying overbought and oversold securities. * The `WilliamsPercentRIndicator` is calculated by dividing the difference between the highest high for the period and the current close by the highest high minus the lowest low for the period. * * ```ts * <IgrDataChart * dataSource={this.state.dataSource} * width="700px" * height="500px"> * * <IgrCategoryXAxis name="xAxis" label="Year" /> * <IgrNumericYAxis name="yAxis" /> * * <IgrWilliamsPercentRIndicator * name="series1" * xAxisName="xAxis" * yAxisName="yAxis" * openMemberPath="Open" * closeMemberPath="close" * highMemberPath="High" * lowMemberPath="Low" /> * </IgrDataChart> * ``` * * ```ts * let series = new IgrWilliamsPercentRIndicator({name: "series"}); * series.xAxis = this.xAxis; * series.yAxis = this.yAxis; * series.openMemberPath = "open"; * series.highMemberPath = "high"; * series.lowMemberPath = "low"; * series.closeMemberPath = "close"; * this.chart.series.add(series); * ``` */ export class IgrWilliamsPercentRIndicator extends IgrStrategyBasedIndicator { createImplementation() { return new WilliamsPercentRIndicator(); } /** * @hidden */ get i() { return this._implementation; } constructor(props) { super(props); } /** * Gets or sets the moving average period for the current StandardDeviationIndicator object. * The typical, and initial, value for Williams %R periods is 14. * * Gets or sets the `Period` for the moving average period. * * The typical, and initial, value for Williams %R periods is 14. * * ```ts * this.series.period = 30; * ``` * * ```ts * <IgrDataChart * dataSource={this.state.dataSource} * width="700px" * height="500px"> * * <IgrCategoryXAxis name="xAxis" label="Year" /> * <IgrNumericYAxis name="yAxis" /> * * <IgrWilliamsPercentRIndicator * name="series1" * xAxisName="xAxis" * yAxisName="yAxis" * openMemberPath="Open" * closeMemberPath="close" * highMemberPath="High" * lowMemberPath="Low" * period={30} /> * </IgrDataChart> * ``` */ get period() { return this.i.acr; } set period(v) { this.i.acr = +v; } }