tradingview-devtrader-bbrtek
v1.0.3
Published
A library to embed TradingView widgets
Downloads
5
Readme
TradingView DevTrader BBRTEK
A library to embed TradingView widgets in web applications. Supports multiple symbols, custom studies, and saves the widget configuration.
Installation
Using npm/yarn
With npm
npm install tradingview-devtrader-bbrtek
With yarn
yarn add tradingview-devtrader-bbrtek
Using from CDN
You can include the library directly from a CDN like GitHub Pages or unpkg:
<script src="https://unpkg.com/[email protected]/dist/tradingview-devtrader-bbrtek.min.js"></script>Usage
JavaScript (Plain)
From CDN
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TradingView Widget</title>
<script src="https://unpkg.com/[email protected]/dist/tradingview-devtrader-bbrtek.min.js"></script>
</head>
<body>
<div id="tradingview-widget" style="width: 800px; height: 600px;"></div>
<script>
TradingViewEmbed.createTradingViewWidget('tradingview-widget', {
symbols: ['AAPL', 'GOOGL', 'TSLA'],
interval: '60',
width: 800,
height: 600,
studies: ['SMC Binary Sniper [@DEVTRADER/BBR TEK]', 'Volume@tv-basicstudies'],
user: { auth_token: 'YOUR_AUTH_TOKEN' } // Requires a token generated by TradingView
});
</script>
</body>
</html>React
Installation
yarn add tradingview-devtrader-bbrtekUsage
// src/components/TradingViewWidget.js
import React, { useEffect } from 'react';
import { createTradingViewWidget } from 'tradingview-devtrader-bbrtek';
const TradingViewWidget = ({ containerId = "tradingview-widget", options }) => {
useEffect(() => {
createTradingViewWidget(containerId, options);
}, [containerId, options]);
return <div id={containerId} style={{ width: options.width, height: options.height }} />;
};
export default TradingViewWidget;
// src/App.js
import React from 'react';
import TradingViewWidget from './components/TradingViewWidget';
function App() {
return (
<div className="App">
<header className="App-header">
<h1>TradingView Widget</h1>
<TradingViewWidget
containerId="tradingview-widget"
options={{
symbols: ["AAPL", "GOOGL", "TSLA"],
interval: "60",
width: 800,
height: 600,
studies: ["SMC Binary Sniper [@DEVTRADER/BBR TEK]", "Volume@tv-basicstudies"],
user: { auth_token: "YOUR_AUTH_TOKEN" } // Requires a token generated by TradingView
}}
/>
</header>
</div>
);
}
export default App;Angular
Installation
yarn add tradingview-devtrader-bbrtek
// src/app/components/trading-view-widget/trading-view-widget.component.ts
import { Component, AfterViewInit, Input } from '@angular/core';
import { createTradingViewWidget } from 'tradingview-devtrader-bbrtek';
@Component({
selector: 'app-trading-view-widget',
template: `<div [id]="containerId" [ngStyle]="{ width: options.width, height: options.height }"></div>`,
styleUrls: ['./trading-view-widget.component.css']
})
export class TradingViewWidgetComponent implements AfterViewInit {
@Input() containerId: string = 'tradingview-widget';
@Input() options: any = {};
ngAfterViewInit() {
createTradingViewWidget(this.containerId, this.options);
}
}HTML
<!-- src/app/app.component.html -->
<app-trading-view-widget
[containerId]="'tradingview-widget'"
[options]="{
symbols: ['AAPL', 'GOOGL', 'TSLA'],
interval: '60',
width: 800,
height: 600,
studies: ['SMC Binary Sniper [@DEVTRADER/BBR TEK]', 'Volume@tv-basicstudies'],
user: { auth_token: 'YOUR_AUTH_TOKEN' } // Requires a token generated by TradingView
}">
</app-trading-view-widget>Vue
Installation
yarn add tradingview-devtrader-bbrtekUsage
<!-- src/components/TradingViewWidget.vue -->
<template>
<div :id="containerId" :style="{ width: options.width + 'px', height: options.height + 'px' }"></div>
</template>
<script>
import { createTradingViewWidget } from 'tradingview-devtrader-bbrtek';
export default {
name: 'TradingViewWidget',
props: {
containerId: {
type: String,
default: 'tradingview-widget'
},
options: {
type: Object,
default: () => ({})
}
},
mounted() {
createTradingViewWidget(this.containerId, this.options);
}
}
</script>
<!-- src/App.vue -->
<template>
<div id="app">
<header class="App-header">
<h1>TradingView Widget</h1>
<TradingViewWidget
:containerId="'tradingview-widget'"
:options="{
symbols: ['AAPL', 'GOOGL', 'TSLA'],
interval: '60',
width: 800,
height: 600,
studies: ['SMC Binary Sniper [@DEVTRADER/BBR TEK]', 'Volume@tv-basicstudies'],
user: { auth_token: 'YOUR_AUTH_TOKEN' } // Requires a token generated by TradingView
}"
/>
</header>
</div>
</template>
<script>
import TradingViewWidget from './components/TradingViewWidget.vue';
export default {
name: 'App',
components: {
TradingViewWidget
}
}
</script>Svelte
Installation
yarn add tradingview-devtrader-bbrtekUsage
<!-- src/components/TradingViewWidget.svelte -->
<script>
import { onMount } from 'svelte';
import { createTradingViewWidget } from 'tradingview-devtrader-bbrtek';
export let containerId = 'tradingview-widget';
export let options = {};
onMount(() => {
createTradingViewWidget(containerId, options);
});
</script>
<div id={containerId} style="width: {options.width}px; height: {options.height}px;"></div>
<!-- src/App.svelte -->
<script>
import TradingViewWidget from './components/TradingViewWidget.svelte';
let options = {
symbols: ['AAPL', 'GOOGL', 'TSLA'],
interval: '60',
width: 800,
height: 600,
studies: ['SMC Binary Sniper [@DEVTRADER/BBR TEK]', 'Volume@tv-basicstudies'],
user: { auth_token: 'YOUR_AUTH_TOKEN' } // Requires a token generated by TradingView
};
</script>
<main>
<header class="App-header">
<h1>TradingView Widget</h1>
<TradingViewWidget containerId="tradingview-widget" {options} />
</header>
</main>
License
This project is licensed for [email protected]