UNPKG

igniteui-react-charts

Version:

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

90 lines (89 loc) 2.59 kB
import { IgrStrategyBasedIndicator } from "./igr-strategy-based-indicator"; import { CommodityChannelIndexIndicator } from "./CommodityChannelIndexIndicator"; /** * Represents a IgxDataChartComponent Commodity Channel Index indicator series. * Default required members: High, Low, Close * * `CommodityChannelIndexIndicator` class specify the series as Commodity Channel Index Indicator series. * * ```ts * <IgrDataChart * dataSource={this.state.dataSource} > * * <IgrCategoryXAxis name="xAxis" label="Date" /> * <IgrNumericYAxis name="yAxis" /> * <IgrCommodityChannelIndexIndicator * name="series1" * xAxisName="xAxis" * yAxisName="yAxis" * displayType="Line" * lowMemberPath="Low" * highMemberPath="High" * openMemberPath="Open" * closeMemberPath="Close" * volumeMemberPath="Volume" /> * </IgrDataChart> * ``` * * ```ts * series1 = new IgrCommodityChannelIndexIndicator({ name: "colSeries1" }); * series1.dataSource = this.categoryData; * series1.xAxis = this.categoryXAxis; * series1.yAxis = this.numericYAxis; * series1.xAxisName = "categoryXAxis"; * series1.yAxisName = "numericYAxis"; * series1.valueMemberPath = "Volume"; * series1.openMemberPath = "open"; * series1.highMemberPath = "high"; * series1.lowMemberPath = "low"; * series1.closeMemberPath = "close"; * ``` */ export class IgrCommodityChannelIndexIndicator extends IgrStrategyBasedIndicator { createImplementation() { return new CommodityChannelIndexIndicator(); } /** * @hidden */ get i() { return this._implementation; } constructor(props) { super(props); } /** * Gets or sets the moving average period for the current CCISeries object. * The typical, and initial, value for CCI periods is 20. * * ```ts * this.series.period = 30; * ``` * * ```ts * <IgrDataChart * dataSource={this.state.dataSource} > * * <IgrCategoryXAxis name="xAxis" label="Date" /> * <IgrNumericYAxis name="yAxis" /> * <IgrCommodityChannelIndexIndicator * name="series3" * xAxisName="xAxis" * yAxisName="yAxis" * displayType="Line" * lowMemberPath="Low" * highMemberPath="High" * openMemberPath="Open" * closeMemberPath="Close" * volumeMemberPath="Volume" * period= {30}/> * </IgrDataChart> * ``` */ get period() { return this.i.acr; } set period(v) { this.i.acr = +v; } }