├── .DS_Store
├── .gitignore
├── README.md
├── components
    └── SetupIndicator.js
├── nuxt.config.js
├── package-lock.json
├── package.json
├── pages
    └── index.vue
├── plugins
    └── trading-vue.client.js
└── yarn.lock


/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tvjsx/trading-vue-nuxt/b7097bd4e81c38e642319d6e2a538ba55bbc4e91/.DS_Store


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 | .nuxt
3 | .idea
4 | yarn-error.log
5 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # trading-vue-nuxt
 2 | 
 3 | Demo repository to showcase trading-vue-js with Nuxt
 4 | 
 5 | To run the repository:
 6 | 
 7 | ```bash
 8 | yarn install
 9 | yarn dev
10 | ```
11 | 
12 | ```bash
13 | npm i
14 | npm run dev
15 | ```
16 | 
17 | Thanks to @Bearfinn for making the initial boilerplate. 
18 | 


--------------------------------------------------------------------------------
/components/SetupIndicator.js:
--------------------------------------------------------------------------------
 1 | import { Overlay } from 'trading-vue-js'
 2 | 
 3 | export default {
 4 |     mixins: [Overlay],
 5 |     methods: {
 6 |         draw(ctx) {
 7 |             const layout = this.$props.layout
 8 |             ctx.fillStyle = '#FF0000'
 9 |             ctx.lineWidth = 1.5
10 |             ctx.strokeStyle = 'black'
11 |             for (const p of this.$props.data) {
12 |                 ctx.fillStyle = 'gray'
13 |                 ctx.beginPath()
14 |                 const x = layout.t2screen(p[0]) // x - Mapping
15 |                 const y = layout.$2screen(p[2]) // y - Mapping
16 |                 ctx.arc(x, y, 30, 0, Math.PI * 2, true) // Trade point
17 |                 ctx.fill()
18 |                 ctx.stroke()
19 |             }
20 |         },
21 |         use_for() {
22 |             return ['Setups']
23 |         },
24 |     }
25 | }
26 | 


--------------------------------------------------------------------------------
/nuxt.config.js:
--------------------------------------------------------------------------------
1 | export default {
2 |   target: 'static',
3 |   plugins: [
4 |     { src: '~/plugins/trading-vue.client.js', mode: 'client' }
5 |   ],
6 |   // Using @nuxt/components module to auto-import components
7 |   components: true,
8 | }
9 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "name": "trading-vue-nuxt",
 3 |     "scripts": {
 4 |         "dev": "nuxt"
 5 |     },
 6 |     "dependencies": {
 7 |         "nuxt": "^2.14.7",
 8 |         "trading-vue-js": "^0.8.0",
 9 |         "tvjs-overlays": "^0.2.1",
10 |         "tvjs-xp": "^0.2.1"
11 |     }
12 | }
13 | 


--------------------------------------------------------------------------------
/pages/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | <client-only>
 3 |     <trading-vue :data="tradingVue"
 4 |         :overlays="overlays"
 5 |         :extensions="ext"
 6 |         :legend-buttons="['display']">
 7 |     </trading-vue>
 8 | </client-only>
 9 | </template>
10 | 
11 | <script>
12 | import Vue from 'vue'
13 | 
14 | // import SetupIndicator from '~/components/SetupIndicator';
15 | // Importing manually will also throw `windows is not defined error`
16 | // Using `components: true` in nuxt.config.js
17 | // import TradingVue from 'trading-vue-js'
18 | export default {
19 |     name: 'app',
20 |     // Importing manually will also throw `windows is not defined error`
21 |     // Using `components: true` in nuxt.config.js
22 |     // components: { TradingVue }
23 |     computed: {
24 |         ext() {
25 |             // TODO: For some reason the injections are initially
26 |             // 'undefined'
27 |             return Object.values(this.$ChartExtensions || {})
28 |         }
29 |     },
30 |     data() {
31 |         return {
32 |             // TODO: For some reason the injections are initially
33 |             // 'undefined'
34 |             tradingVue: this.$DataCube ? new this.$DataCube({
35 |                 chart: {
36 |                     type: 'Candles',
37 |                     data: [
38 |                         [1551128400000, 33, 37.1, 14, 14, 196],
39 |                         [1551132000000, 13.7, 30, 6.6, 30, 206],
40 |                         [1551135600000, 29.9, 33, 21.3, 21.8, 74],
41 |                         [1551139200000, 21.7, 25.9, 18, 24, 140],
42 |                         [1551142800000, 24.1, 24.1, 24, 24.1, 29],
43 |                     ]
44 |                 },
45 |                 onchart: [{
46 |                     name: 'Setups',
47 |                     type: 'Setups',
48 |                     data: [
49 |                         [1551128400000, 1, 35]
50 |                     ],
51 |                     settings: {},
52 |                 }, ],
53 |             }) : {},
54 |             overlays: [this.$SetupIndicator]
55 |         }
56 |     }
57 | }
58 | </script>
59 | 


--------------------------------------------------------------------------------
/plugins/trading-vue.client.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import TradingVue from 'trading-vue-js'
 3 | import SetupIndicator from '~/components/SetupIndicator';
 4 | import ChartOverlays from 'tvjs-overlays'
 5 | import ChartExtensions from 'tvjs-xp'
 6 | import { DataCube } from 'trading-vue-js'
 7 | 
 8 | 
 9 | Vue.use(TradingVue)
10 | 
11 | export default ({ app }, inject) => {
12 |     inject('SetupIndicator', SetupIndicator)
13 |     inject('ChartExtensions', ChartExtensions)
14 |     inject('ChartOverlays', ChartOverlays)
15 |     inject('DataCube', DataCube)
16 | }
17 | 


--------------------------------------------------------------------------------