angular-tradingview-widget
Version:
Angular component for rendering the TradingView Advanced Real-Time Chart Widget
206 lines (199 loc) • 7.31 kB
JavaScript
import * as i0 from '@angular/core';
import { Component, Input, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
var BarStyles;
(function (BarStyles) {
BarStyles["BARS"] = "0";
BarStyles["CANDLES"] = "1";
BarStyles["HOLLOW_CANDLES"] = "9";
BarStyles["HEIKIN_ASHI"] = "8";
BarStyles["LINE"] = "2";
BarStyles["AREA"] = "3";
BarStyles["RENKO"] = "4";
BarStyles["LINE_BREAK"] = "7";
BarStyles["KAGI"] = "5";
BarStyles["POINT_AND_FIGURE"] = "6";
})(BarStyles || (BarStyles = {}));
var IntervalTypes;
(function (IntervalTypes) {
IntervalTypes["D"] = "D";
IntervalTypes["W"] = "W";
})(IntervalTypes || (IntervalTypes = {}));
;
var RangeTypes;
(function (RangeTypes) {
RangeTypes["YTD"] = "ytd";
RangeTypes["ALL"] = "all";
})(RangeTypes || (RangeTypes = {}));
;
var Themes;
(function (Themes) {
Themes["LIGHT"] = "Light";
Themes["DARK"] = "Dark";
})(Themes || (Themes = {}));
;
const SCRIPT_ID = 'tradingview-widget-script';
const CONTAINER_ID = `tradingview-widget-${Math.random()}`;
class TradingviewWidgetComponent {
constructor() {
this._defaultConfig = {
symbol: 'NASDAQ:AAPL',
allow_symbol_change: true,
autosize: false,
enable_publishing: false,
height: 610,
hideideas: true,
hide_legend: false,
hide_side_toolbar: true,
hide_top_toolbar: false,
interval: IntervalTypes.D,
locale: 'en',
save_image: true,
show_popup_button: false,
style: BarStyles.CANDLES,
theme: Themes.LIGHT,
timezone: 'Etc/UTC',
toolbar_bg: '#F1F3F6',
widgetType: 'widget',
width: 980,
withdateranges: false
};
this.style = {};
this.containerId = CONTAINER_ID;
}
set widgetConfig(value) {
this._widgetConfig = value;
this.cleanWidget();
this.initWidget();
}
get widgetConfig() {
return this._widgetConfig || this._defaultConfig;
}
ngOnInit() {
this.appendScript(this.initWidget.bind(this));
}
initWidget() {
/* global TradingView */
if (typeof TradingView === 'undefined' || !this.getContainer())
return;
const { widgetType, ...widgetConfig } = this.widgetConfig;
const config = { ...widgetConfig, container_id: this.containerId };
if (config.autosize) {
delete config.width;
delete config.height;
}
if (config.popup_width && typeof config.popup_width === 'number') {
config.popup_width = config.popup_width.toString();
}
if (config.popup_height && typeof config.popup_height === 'number') {
config.popup_height = config.popup_height.toString();
}
if (config.autosize) {
this.style = {
width: '100%',
height: '100%'
};
}
/* global TradingView */
if (!!widgetType)
new TradingView[widgetType](config);
else
console.error(`Can not create "TradingView", because "widgetType" is missing`);
}
;
appendScript(onload) {
if (!this.canUseDOM()) {
onload();
return;
}
if (this.scriptExists()) {
/* global TradingView */
if (typeof TradingView === 'undefined') {
this.updateOnloadListener(onload);
return;
}
onload();
return;
}
const script = document.createElement('script');
script.id = SCRIPT_ID;
script.type = 'text/javascript';
script.async = true;
script.src = 'https://s3.tradingview.com/tv.js';
script.onload = onload;
document.getElementsByTagName('head')[0].appendChild(script);
}
;
canUseDOM() {
return typeof window !== 'undefined' &&
window.document &&
window.document.createElement;
}
scriptExists() {
return this.getScriptElement() !== null;
}
updateOnloadListener(onload) {
const script = this.getScriptElement() || {};
const oldOnload = script.onload.bind(this);
return script.onload = () => {
oldOnload();
onload();
};
}
;
getScriptElement() {
return document.getElementById(SCRIPT_ID);
}
cleanWidget() {
if (!this.canUseDOM())
return;
const container = this.getContainer();
if (container) {
container.innerHTML = '';
}
}
;
getContainer() {
return document.getElementById(this.containerId);
}
}
TradingviewWidgetComponent.ɵfac = function TradingviewWidgetComponent_Factory(t) { return new (t || TradingviewWidgetComponent)(); };
TradingviewWidgetComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TradingviewWidgetComponent, selectors: [["tradingview-widget"]], inputs: { widgetConfig: "widgetConfig" }, decls: 1, vars: 1, consts: [[3, "id"]], template: function TradingviewWidgetComponent_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelement(0, "section", 0);
} if (rf & 2) {
i0.ɵɵproperty("id", ctx.containerId);
} }, encapsulation: 2 });
(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TradingviewWidgetComponent, [{
type: Component,
args: [{ selector: 'tradingview-widget', template: `
<section [id]="containerId"> </section>
` }]
}], function () { return []; }, { widgetConfig: [{
type: Input,
args: ['widgetConfig']
}] }); })();
class TradingviewWidgetModule {
}
TradingviewWidgetModule.ɵfac = function TradingviewWidgetModule_Factory(t) { return new (t || TradingviewWidgetModule)(); };
TradingviewWidgetModule.ɵmod = /*@__PURE__*/ i0.ɵɵdefineNgModule({ type: TradingviewWidgetModule });
TradingviewWidgetModule.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [CommonModule] });
(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TradingviewWidgetModule, [{
type: NgModule,
args: [{
declarations: [TradingviewWidgetComponent],
imports: [
CommonModule
],
exports: [TradingviewWidgetComponent],
providers: []
}]
}], null, null); })();
(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(TradingviewWidgetModule, { declarations: [TradingviewWidgetComponent], imports: [CommonModule], exports: [TradingviewWidgetComponent] }); })();
/*
* Public API Surface of angular-tradingview-widget
*/
/**
* Generated bundle index. Do not edit.
*/
export { BarStyles, CONTAINER_ID, IntervalTypes, RangeTypes, SCRIPT_ID, Themes, TradingviewWidgetComponent, TradingviewWidgetModule };
//# sourceMappingURL=angular-tradingview-widget.mjs.map