UNPKG

igniteui-react-charts

Version:

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

211 lines (210 loc) 6.6 kB
import { __extends } from "tslib"; import { IgrStrategyBasedIndicator } from "./igr-strategy-based-indicator"; import { BollingerBandWidthIndicator } from "./BollingerBandWidthIndicator"; /** * Represents a IgxDataChartComponent Bollinger Bandwidth indicator series. * Represents the normalized width of the Bollinger bands for each provided value. * For more info see: * BollingerBandsOverlay * Default required members: High, Low, Close * * You can use the `BollingerBandWidthIndicator` to represents a IgxDataChartComponent Bollinger Bandwidth indicator 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" /> * * <IgrBollingerBandWidthIndicator * name="series3" * xAxisName="xAxis" * yAxisName="yAxis" * displayType="Line" * lowMemberPath="Low" * highMemberPath="High" * openMemberPath="Open" * closeMemberPath="Close" * volumeMemberPath="Volume" /> * </IgrDataChart> * ``` */ var IgrBollingerBandWidthIndicator = /** @class */ /*@__PURE__*/ (function (_super) { __extends(IgrBollingerBandWidthIndicator, _super); function IgrBollingerBandWidthIndicator(props) { return _super.call(this, props) || this; } IgrBollingerBandWidthIndicator.prototype.createImplementation = function () { return new BollingerBandWidthIndicator(); }; Object.defineProperty(IgrBollingerBandWidthIndicator.prototype, "i", { /** * @hidden */ get: function () { return this._implementation; }, enumerable: false, configurable: true }); Object.defineProperty(IgrBollingerBandWidthIndicator.prototype, "period", { /** * Gets or sets the moving average period for the Bollinger Band Width Indicator. * The typical, and initial, value for CCI periods is 20. * * You can use the `Period` to set the moving average. * * ```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" /> * * <IgrBollingerBandWidthIndicator * name="series3" * xAxisName="xAxis" * yAxisName="yAxis" * displayType="Line" * lowMemberPath="Low" * highMemberPath="High" * openMemberPath="Open" * closeMemberPath="Close" * volumeMemberPath="Volume" * period= {14} /> * </IgrDataChart> * ``` * * ```ts * this.series.period = 14; * ``` */ get: function () { return this.i.acm; }, set: function (v) { this.i.acm = +v; }, enumerable: false, configurable: true }); Object.defineProperty(IgrBollingerBandWidthIndicator.prototype, "multiplier", { /** * Gets or sets the multiplier for the Bollinger Band width. * The typical, and initial, value for Bollinger Band width multiplier is 2. * * Use the `Multiplier` property for the Bollinger Band width. The typical, and initial, value for Bollinger Band width multiplier is 2. * * ```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" /> * * <IgrBollingerBandWidthIndicator * name="series3" * xAxisName="xAxis" * yAxisName="yAxis" * displayType="Line" * lowMemberPath="Low" * highMemberPath="High" * openMemberPath="Open" * closeMemberPath="Close" * volumeMemberPath="Volume" * Multiplier= {2} /> * </IgrDataChart> * ``` * * ```ts * this.series.multiplier = 14; * ``` */ get: function () { return this.i.acl; }, set: function (v) { this.i.acl = +v; }, enumerable: false, configurable: true }); return IgrBollingerBandWidthIndicator; }(IgrStrategyBasedIndicator)); export { IgrBollingerBandWidthIndicator };