igniteui-react-charts
Version:
Ignite UI React charting components for building rich data visualizations using TypeScript APIs.
146 lines (144 loc) • 4.79 kB
JavaScript
import { __extends } from "tslib";
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";
* ```
*/
var IgrFinancialOverlay = /** @class */ /*@__PURE__*/ (function (_super) {
__extends(IgrFinancialOverlay, _super);
function IgrFinancialOverlay(props) {
return _super.call(this, props) || this;
}
Object.defineProperty(IgrFinancialOverlay.prototype, "i", {
/**
* @hidden
*/
get: function () {
return this._implementation;
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgrFinancialOverlay.prototype, "isFinancialOverlay", {
/**
* Gets whether the series is financial overlay
*/
get: function () {
return this.i.fa;
},
enumerable: false,
configurable: true
});
Object.defineProperty(IgrFinancialOverlay.prototype, "ignoreFirst", {
/**
* 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: function () {
return this.i.abd;
},
set: function (v) {
this.i.abd = +v;
},
enumerable: false,
configurable: true
});
/**
* 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.
*/
IgrFinancialOverlay.prototype.scrollIntoView = function (item) {
var iv = this.i.ge(item);
return (iv);
};
return IgrFinancialOverlay;
}(IgrFinancialSeries));
export { IgrFinancialOverlay };