├── .gitignore ├── src ├── index.js └── vue-trading-view.vue ├── LICENSE ├── package.json ├── README.MD └── dist ├── vue-trading-view.min.js ├── vue-trading-view.esm.js └── vue-trading-view.umd.js /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | npm-debug.log* 4 | yarn-debug.log* 5 | yarn-error.log* 6 | /test/unit/coverage/ 7 | 8 | # Editor directories and files 9 | .idea 10 | .vscode 11 | *.suo 12 | *.ntvs* 13 | *.njsproj 14 | *.sln -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | // Import vue component 2 | import component from './vue-trading-view.vue'; 3 | 4 | // install function executed by Vue.use() 5 | export function install(Vue) { 6 | if (install.installed) return; 7 | install.installed = true; 8 | Vue.component('VueTradingView', component); 9 | } 10 | 11 | // Create module definition for Vue.use() 12 | const plugin = { 13 | install, 14 | }; 15 | 16 | // To auto-install when vue is found 17 | let GlobalVue = null; 18 | if (typeof window !== 'undefined') { 19 | GlobalVue = window.Vue; 20 | } else if (typeof global !== 'undefined') { 21 | GlobalVue = global.Vue; 22 | } 23 | if (GlobalVue) { 24 | GlobalVue.use(plugin); 25 | } 26 | 27 | // To allow use as module (npm/webpack/etc.) export component 28 | export default component; 29 | 30 | // It's possible to expose named exports when writing components that can 31 | // also be used as directives, etc. - eg. import { RollupDemoDirective } from 'rollup-demo'; 32 | // export const RollupDemoDirective = component; -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 marv 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-trading-view", 3 | "version": "1.0.1", 4 | "description": "Vue trading view charts", 5 | "author": "Eugen Guriev 19 |
20 | 21 |
22 | 23 | 24 | 37 | ``` 38 | 39 | All given props are passed on to the widget config. See [this page](https://www.tradingview.com/widget/advanced-chart/) for the TradingView Advanced Real-Time Chart API. 40 | 41 | ### Advanced example 42 | ```javascript 43 | 51 | 52 | 65 | ``` -------------------------------------------------------------------------------- /dist/vue-trading-view.min.js: -------------------------------------------------------------------------------- 1 | var VueTradingView=function(e){"use strict";function t(e){t.installed||(t.installed=!0,e.component("VueTradingView",n))}!function(){if("undefined"!=typeof document){var e=document.head||document.getElementsByTagName("head")[0],t=document.createElement("style");t.type="text/css",t.styleSheet?t.styleSheet.cssText="":t.appendChild(document.createTextNode("")),e.appendChild(t)}}();var n={render:function(){var e=this,t=e.$createElement;return(e._self._c||t)("div",{attrs:{id:e.container_id}})},staticRenderFns:[],name:"VueTradingView",data:function(){return{container_id:"vue-trading-view"}},props:{options:String},methods:{canUseDOM:function(){return"undefined"!=typeof window&&window.document&&window.document.createElement},getScriptElement:function(){return document.getElementById("tradingview-widget-script")},updateOnloadListener:function(e){var t=this.getScriptElement(),n=t.onload;return t.onload=function(){n(),e()}},scriptExists:function(){return null!==this.getScriptElement()},appendScript:function(e){if(!this.canUseDOM())return void e();if(this.scriptExists())return"undefined"==typeof TradingView?void this.updateOnloadListener(e):void e();var t=document.createElement("script");t.id="tradingview-widget-script",t.type="text/javascript",t.async=!0,t.src="https://s3.tradingview.com/tv.js",t.onload=e,document.getElementsByTagName("head")[0].appendChild(t)},initWidget:function(){"undefined"!=typeof TradingView&&new window.TradingView.widget(Object.assign({container_id:this.container_id},this.options))}},mounted:function(){this.appendScript(this.initWidget)}},i={install:t},d=null;return"undefined"!=typeof window?d=window.Vue:"undefined"!=typeof global&&(d=global.Vue),d&&d.use(i),e.install=t,e.default=n,e}({}); 2 | -------------------------------------------------------------------------------- /src/vue-trading-view.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 74 | -------------------------------------------------------------------------------- /dist/vue-trading-view.esm.js: -------------------------------------------------------------------------------- 1 | (function(){ if(typeof document !== 'undefined'){ var head=document.head||document.getElementsByTagName('head')[0], style=document.createElement('style'), css=""; style.type='text/css'; if (style.styleSheet){ style.styleSheet.cssText = css; } else { style.appendChild(document.createTextNode(css)); } head.appendChild(style); } })(); 2 | 3 | 4 | 5 | 6 | var SCRIPT_ID = 'tradingview-widget-script'; 7 | var CONTAINER_ID = 'vue-trading-view'; 8 | 9 | var component = {render: function(){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{attrs:{"id":_vm.container_id}})},staticRenderFns: [], 10 | name: 'VueTradingView', 11 | data: function data() { 12 | return { 13 | container_id: CONTAINER_ID 14 | }; 15 | }, 16 | props: { 17 | options: String 18 | }, 19 | methods: { 20 | canUseDOM: function canUseDOM() { 21 | return typeof window !== 'undefined' && window.document && window.document.createElement; 22 | }, 23 | getScriptElement: function getScriptElement() { 24 | return document.getElementById(SCRIPT_ID); 25 | }, 26 | updateOnloadListener: function updateOnloadListener(onload) { 27 | var script = this.getScriptElement(); 28 | var oldOnload = script.onload; 29 | return script.onload = function () { 30 | oldOnload(); 31 | onload(); 32 | }; 33 | }, 34 | scriptExists: function scriptExists() { 35 | return this.getScriptElement() !== null; 36 | }, 37 | appendScript: function appendScript(onload) { 38 | if (!this.canUseDOM()) { 39 | onload(); 40 | return; 41 | } 42 | 43 | if (this.scriptExists()) { 44 | if (typeof TradingView === 'undefined') { 45 | this.updateOnloadListener(onload); 46 | return; 47 | } 48 | onload(); 49 | return; 50 | } 51 | var script = document.createElement('script'); 52 | script.id = SCRIPT_ID; 53 | script.type = 'text/javascript'; 54 | script.async = true; 55 | script.src = 'https://s3.tradingview.com/tv.js'; 56 | script.onload = onload; 57 | document.getElementsByTagName('head')[0].appendChild(script); 58 | }, 59 | initWidget: function initWidget() { 60 | if (typeof TradingView === 'undefined') { 61 | return; 62 | } 63 | 64 | new window.TradingView.widget( 65 | Object.assign({ container_id: this.container_id }, this.options) 66 | ); 67 | }, 68 | }, 69 | mounted: function mounted() { 70 | this.appendScript(this.initWidget); 71 | }, 72 | } 73 | 74 | // Import vue component 75 | 76 | // install function executed by Vue.use() 77 | function install(Vue) { 78 | if (install.installed) { return; } 79 | install.installed = true; 80 | Vue.component('VueTradingView', component); 81 | } 82 | 83 | // Create module definition for Vue.use() 84 | var plugin = { 85 | install: install, 86 | }; 87 | 88 | // To auto-install when vue is found 89 | var GlobalVue = null; 90 | if (typeof window !== 'undefined') { 91 | GlobalVue = window.Vue; 92 | } else if (typeof global !== 'undefined') { 93 | GlobalVue = global.Vue; 94 | } 95 | if (GlobalVue) { 96 | GlobalVue.use(plugin); 97 | } 98 | 99 | // It's possible to expose named exports when writing components that can 100 | // also be used as directives, etc. - eg. import { RollupDemoDirective } from 'rollup-demo'; 101 | // export const RollupDemoDirective = component; 102 | 103 | export default component; 104 | export { install }; 105 | -------------------------------------------------------------------------------- /dist/vue-trading-view.umd.js: -------------------------------------------------------------------------------- 1 | (function (global, factory) { 2 | typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) : 3 | typeof define === 'function' && define.amd ? define(['exports'], factory) : 4 | (factory((global.VueTradingView = {}))); 5 | }(this, (function (exports) { 'use strict'; 6 | 7 | (function(){ if(typeof document !== 'undefined'){ var head=document.head||document.getElementsByTagName('head')[0], style=document.createElement('style'), css=""; style.type='text/css'; if (style.styleSheet){ style.styleSheet.cssText = css; } else { style.appendChild(document.createTextNode(css)); } head.appendChild(style); } })(); 8 | 9 | 10 | 11 | 12 | var SCRIPT_ID = 'tradingview-widget-script'; 13 | var CONTAINER_ID = 'vue-trading-view'; 14 | 15 | var component = {render: function(){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{attrs:{"id":_vm.container_id}})},staticRenderFns: [], 16 | name: 'VueTradingView', 17 | data: function data() { 18 | return { 19 | container_id: CONTAINER_ID 20 | }; 21 | }, 22 | props: { 23 | options: Object 24 | }, 25 | methods: { 26 | canUseDOM: function canUseDOM() { 27 | return typeof window !== 'undefined' && window.document && window.document.createElement; 28 | }, 29 | getScriptElement: function getScriptElement() { 30 | return document.getElementById(SCRIPT_ID); 31 | }, 32 | updateOnloadListener: function updateOnloadListener(onload) { 33 | var script = this.getScriptElement(); 34 | var oldOnload = script.onload; 35 | return script.onload = function () { 36 | oldOnload(); 37 | onload(); 38 | }; 39 | }, 40 | scriptExists: function scriptExists() { 41 | return this.getScriptElement() !== null; 42 | }, 43 | appendScript: function appendScript(onload) { 44 | if (!this.canUseDOM()) { 45 | onload(); 46 | return; 47 | } 48 | 49 | if (this.scriptExists()) { 50 | if (typeof TradingView === 'undefined') { 51 | this.updateOnloadListener(onload); 52 | return; 53 | } 54 | onload(); 55 | return; 56 | } 57 | var script = document.createElement('script'); 58 | script.id = SCRIPT_ID; 59 | script.type = 'text/javascript'; 60 | script.async = true; 61 | script.src = 'https://s3.tradingview.com/tv.js'; 62 | script.onload = onload; 63 | document.getElementsByTagName('head')[0].appendChild(script); 64 | }, 65 | initWidget: function initWidget() { 66 | if (typeof TradingView === 'undefined') { 67 | return; 68 | } 69 | 70 | new window.TradingView.widget( 71 | Object.assign({ container_id: this.container_id }, this.options) 72 | ); 73 | }, 74 | }, 75 | mounted: function mounted() { 76 | this.appendScript(this.initWidget); 77 | }, 78 | } 79 | 80 | // Import vue component 81 | 82 | // install function executed by Vue.use() 83 | function install(Vue) { 84 | if (install.installed) { return; } 85 | install.installed = true; 86 | Vue.component('VueTradingView', component); 87 | } 88 | 89 | // Create module definition for Vue.use() 90 | var plugin = { 91 | install: install, 92 | }; 93 | 94 | // To auto-install when vue is found 95 | var GlobalVue = null; 96 | if (typeof window !== 'undefined') { 97 | GlobalVue = window.Vue; 98 | } else if (typeof global !== 'undefined') { 99 | GlobalVue = global.Vue; 100 | } 101 | if (GlobalVue) { 102 | GlobalVue.use(plugin); 103 | } 104 | 105 | // It's possible to expose named exports when writing components that can 106 | // also be used as directives, etc. - eg. import { RollupDemoDirective } from 'rollup-demo'; 107 | // export const RollupDemoDirective = component; 108 | 109 | exports.install = install; 110 | exports.default = component; 111 | 112 | Object.defineProperty(exports, '__esModule', { value: true }); 113 | 114 | }))); 115 | --------------------------------------------------------------------------------