jh-componentj 0.2.0

package/src/extensions/chart-link/main.js

@@ -0,0 +1,299 @@
+
+/* Example:
+
+rules: {
+    '* -> *': {},     // From each to each
+    '*': {            // The same as ^
+        cursor: true, // bool, 'X', 'Y', 'XY'
+        position: 'X', // bool, 'X', 'Y', 'XY'
+        tools: true
+    },
+    'trading-vue-1 -> trading-vue-2': {
+        data: [
+            'onchart.SMA',
+            'RSI4H',
+            {
+                from: 'chart.data',
+                to: 'datasets',
+                obj: {
+                    id: 'small-tf-data',
+                    type: 'SourceData'
+                }
+            }
+        ]
+    },
+    'none': {
+        range: 'X', // bool, 'X', 'Y', 'XY'
+    }
+}
+*/
+
+import Shared from './shared.js'
+import Utils from './utils.js'
+
+export default class Main {
+
+    constructor(tv, dc, sett) {
+
+        if (sett.use_window) {
+            if (!window.xchartlink$) {
+                window.xchartlink$ = {}
+            }
+            this.shared = window.xchartlink$
+        } else {
+            this.shared = Shared
+        }
+
+        this.tv = tv
+        this.dc = dc
+        this.sett = sett
+        this.targets = {}
+
+        this.onsettings({'chart-link': sett})
+    }
+
+    onsettings(all) {
+        clearTimeout(this.reset_id)
+        this.sett = all['chart-link']
+        if (!this.shared.rules) {
+            this.shared.rules = {}
+            this.shared.refs = {}
+            this.shared.meta = {}
+        }
+
+        let el = document.getElementById(this.tv.id)
+
+        if (this.sett.rules && el) {
+            this.shared.rules[this.tv.id] = this.sett.rules
+        }
+
+        this.shared.refs[this.tv.id] = this.tv
+
+        this.combine()
+        this.reset_id = setTimeout(() => this.reset())
+    }
+
+    //  Combine rules from different instances
+    combine() {
+        this.shared.combined = {}
+        for (var id in this.shared.rules) {
+            for (var r in this.shared.rules[id]) {
+                this.shared.combined[r] =
+                    this.shared.rules[id][r]
+            }
+        }
+    }
+
+    // Compile rules for this instance
+    compile() {
+
+        let gebcn = 'getElementsByClassName'
+        let els = [...document[gebcn]('trading-vue')]
+        this.targets = {}
+
+        for (let el of els) {
+            if (el.id === this.tv.id) continue
+            this.targets[el.id] = {}
+        }
+
+        let rules = this.rank(this.shared.combined)
+
+        for (var r of rules) {
+            let dst = r.pair[1]
+            if (dst === '*') {
+                dst = Object.keys(this.targets)
+            }
+            if (Array.isArray(dst)) {
+                for (var d of dst) {
+                    if (!(d in this.targets)) continue
+                    Object.assign(this.targets[d], r.r)
+                }
+            } else {
+                if (!(dst in this.targets)) continue
+                Object.assign(this.targets[dst], r.r)
+            }
+        }
+    }
+
+    // Select, rank & sort the rules
+    rank(rules) {
+        let out = []
+        for (var r in rules) {
+            let pair = this.splitr(r)
+            if (!this.matches(pair[0])) continue
+            if (pair[0] === '*') {
+                var rank = 20
+            } else if (Array.isArray(pair[0]) ) {
+                rank = 10
+            } else {
+                rank = 0
+            }
+            if (pair[1] === '*') {
+                rank += 2
+            } else if (Array.isArray(pair[1]) ) {
+                rank += 1
+            } else {
+                rank += 0
+            }
+            out.push({pair, rank, r: rules[r]})
+        }
+        return out.sort((a, b) => b.rank - a.rank)
+    }
+
+    // Check if the source of a rule matches tv.id
+    matches(src) {
+        return src === '*' || src === this.tv.id ||
+            (Array.isArray(src) && src.includes(this.tv.id))
+    }
+
+    splitr(rule) {
+        if (rule.trim() === '*') return ['*', '*']
+        return rule.split('->').map(x => {
+            let tup = x.split(',')
+            if (tup.length > 1) {
+                return tup.map(y => y.trim())
+            }
+            return x.trim()
+        })
+
+    }
+
+    // Apply all rules for this instance
+    reset() {
+        this.compile()
+
+        // Enable some chart hook events
+        this.tv.$refs.chart.hooks('xchanged')
+
+
+        this.tv.$watch(x => this.dc.get('.')
+            .filter(x => x.settings.$state),
+            this.ontools.bind(this))
+
+    }
+
+    // Listening to the Chart.vue hooks &
+    // other events
+    update(e) {
+        switch (e.event) {
+            case '?x-changed':
+                let cursor = e.args[0]
+                if (cursor.preventDefault) return
+                let main = this.tv.$refs.chart._layout.grids[cursor.grid_id]
+                let mc = this.tv.$refs.chart.cursor
+                cursor.t = mc.t
+                cursor.$ = mc.y$
+                for (var id in this.targets) {
+                    let r = this.targets[id].cursor
+                    if (r) {
+                        let tv = this.shared.refs[id]
+                        let g = tv.$refs.chart._layout.grids[0]
+                        let xx = this.isX(r)
+                        let yy = g.id === main.id && this.isY(r)
+                        let upd = {
+                            preventDefault: true,
+                            x: xx ? g.t2screen(cursor.t) : -10,
+                            y: yy ? g.$2screen(cursor.$) : -10,
+                            grid_id: 0
+                        }
+                        tv.$refs.chart.cursor_changed(upd)
+                        tv.$refs.chart.cursor.t = xx ? cursor.t : -10
+                        tv.$refs.chart.cursor.y$ = yy ? cursor.$ : -10
+                    }
+                }
+                break
+            case 'range-changed':
+                let now = new Date().getTime()
+                let meta = this.shared.meta[this.tv.id]
+                if (meta && meta.position) {
+                    if (meta.position.lock > now) return
+                }
+                let range = e.args[0]
+                for (var id in this.targets) {
+                    let r = this.targets[id].position
+                    let tv = this.shared.refs[id]
+                    let xx = this.isX(r)
+                    let yy = this.isY(r)
+                    if (!this.shared.meta[id]) {
+                        this.shared.meta[id] = {}
+                    }
+                    // Prevents an infinite loop
+                    this.shared.meta[id].position = {
+                        lock: now + 100
+                    }
+                    if (xx) tv.goto(range[1])
+                }
+                break
+        }
+    }
+
+    ontools(n, p) {
+        let rem = Utils.removed(
+            n.map(x => x.settings.$uuid),
+            p.map(x => x.settings.$uuid)
+        )
+        let now = new Date().getTime()
+        let meta = this.shared.meta[this.tv.id]
+        if (meta && meta.tools) {
+            if (meta.tools.lock > now) return
+        }
+        for (var id in this.targets) {
+            let r = this.targets[id].tools
+            let tv = this.shared.refs[id]
+            if (r) {
+                if (!this.shared.meta[id]) {
+                    this.shared.meta[id] = {}
+                }
+                // Prevents an infinite loop
+                this.shared.meta[id].tools = {
+                    lock: now + 100
+                }
+                this.copy_tools(n, tv)
+                rem.forEach(r => tv.data.del(`${r}`))
+            }
+        }
+    }
+
+    copy_tools(n, tv) {
+        for (var tool of n) {
+            if (tool.id.includes('offchart')) continue
+            let uuid = tool.settings.$uuid
+            let exi = tv.data.get_one(`${uuid}`)
+            if (exi) {
+                tv.$set(exi, 'settings', Utils.copy(
+                    tool.settings,
+                    {
+                        $selected: false,
+                        $state: 'finished'
+                    })
+                )
+                // TODO: maybe add a proper method
+                // of accessing overlays
+                let ovs = tv.$refs.chart.$refs.sec[0]
+                    .$refs.grid
+                    .$children.filter(x => x.tool)
+
+                for (var ov of ovs) {
+                    ov.pins.forEach(x => x.re_init())
+                }
+
+            } else {
+                let copy = Utils.copy(tool)
+                copy.settings.$selected = false
+                copy.settings.$state = 'finished'
+                tv.data.add('onchart', copy)
+            }
+        }
+    }
+
+    isX(rule) {
+        return rule === true ||
+            (typeof rule === 'string' && rule.includes('X'))
+    }
+
+    isY(rule) {
+        return rule === true ||
+            (typeof rule === 'string' && rule.includes('Y'))
+    }
+
+}

package/src/extensions/chart-link/shared.js

@@ -0,0 +1,10 @@
+
+//  Object shared beetween tvjs instances
+
+class Shared {
+    constructor() {
+        this.__id__ = Math.random()
+    }
+}
+
+export default new Shared()

package/src/extensions/chart-link/utils.js

@@ -0,0 +1,17 @@
+export default {
+
+    copy(obj, mod) {
+        let copy = JSON.parse(JSON.stringify(obj))
+        return Object.assign(copy, mod)
+    },
+
+    removed(ids, prev) {
+        let list = []
+        for (var id of prev) {
+            if (!ids.includes(id)) {
+                list.push(id)
+            }
+        }
+        return list
+    }
+}

package/src/extensions/chart-link/x.json

@@ -0,0 +1,11 @@
+{
+    "name": "chart-link",
+    "author": "StdSquad",
+    "version": "1.0.0",
+    "components": [],
+    "widgets": [],
+    "overlays": [],
+    "skins": [],
+    "colorpacks": [],
+    "deps": {}
+}

package/src/extensions/grid-resize/Splitter.vue

@@ -0,0 +1,80 @@
+<template>
+    <span class="h-splitter"
+        @mousedown="hs_mousedown" :style="hs_style">
+    </span>
+</template>
+<script>
+
+import Utils from './utils.js'
+
+export default {
+    name: 'Splitter',
+    props: ['id', 'main', 'dc', 'tv', 'data'],
+    mounted() {
+        this.MIN_HEIGHT = this.data.sett.min_height || 20
+    },
+    methods: {
+        hs_mousedown(e) {
+            this.drag = {
+                type: 'hs',
+                y: e.clientY,
+                h1: this.data.grid1.height,
+                h2: this.data.grid2.height
+            }
+            Utils.add_style('disable-user-select', `body * {
+                user-select: none;
+            }
+            .trading-vue-chart {
+                pointer-events: none;
+            }`)
+        },
+        hs_mouseup(e) {
+            this.drag = null
+            Utils.rem_style('disable-user-select')
+        },
+        hs_mousemove(e) {
+            if (this.drag) {
+                let off = e.clientY - this.drag.y
+                let new_h1 = this.drag.h1 + off
+                let new_h2 = this.drag.h2 - off
+                if (new_h1 > this.MIN_HEIGHT &&
+                    new_h2 > this.MIN_HEIGHT) {
+                    this.data.grid1.height = new_h1
+                    this.data.grid2.height = new_h2
+                }
+                this.main.calc_heights()
+            }
+        },
+        hs_mouseleave(e) {
+            this.drag = null
+            Utils.rem_style('disable-user-select')
+        }
+    },
+    computed: {
+        hs_style() {
+            return {
+                drag: null,
+                top: this.data.grid2.offset + 'px',
+                //backgroundColor: this.colors.splitter
+            }
+        },
+    }
+}
+</script>
+<style scoped>
+.h-splitter {
+    position: absolute;
+    left: 0;
+    height: 5px;
+    margin-top: -2px;
+    width: 100%;
+    z-index: 1;
+    background-color: #3ee4afb5;
+    opacity: 0;
+    pointer-events: all;
+}
+.h-splitter:hover {
+    cursor: row-resize;
+    opacity: 1;
+}
+</style>

package/src/extensions/grid-resize/main.js

@@ -0,0 +1,152 @@
+
+// Extension's controller
+
+import { Utils } from 'trading-vue-js'
+import Vue from 'vue'
+import Splitter from './Splitter.vue'
+
+export default class Main {
+
+    constructor(tv, dc, sett) {
+
+        this.widgets = {}
+        this.tv = tv
+        this.dc = dc
+        this.sett = sett
+
+        setTimeout(() => {
+
+            this.tv.$el.addEventListener(
+                'mousemove', this.onmousemove.bind(this)
+            )
+
+            this.tv.$el.addEventListener(
+                'mouseup', this.onmouseup.bind(this)
+            )
+
+            this.tv.$el.addEventListener(
+                'mouseleave', this.onmouseleave.bind(this)
+            )
+
+            this.place_splitters()
+            this.calc_heights()
+
+            // Track changes of grids count
+            this.tv.$watch(x =>
+                this.dc.get('.').map(x => x.id),
+                this.ongrids.bind(this))
+
+        })
+
+    }
+
+    // Listens to all tvjs events, creates new widgets
+    update(e) {
+        switch(e.event) {
+
+        }
+    }
+
+    // Extension settings has changed
+    onsettings(sett) {}
+
+    ongrids() {
+        setTimeout(() => {
+            this.remove_widgets()
+            this.place_splitters()
+        })
+    }
+
+    onmousemove(e) {
+        // List of widgets created by this controller
+        let list = this.tv.$refs.widgets.$children
+            .filter(x => x.main === this)
+
+        for (var s of list) {
+            s.hs_mousemove(e)
+        }
+    }
+
+    onmouseup(e) {
+        // List of widgets created by this controller
+        let list = this.tv.$refs.widgets.$children
+            .filter(x => x.main === this)
+
+        for (var s of list) {
+            s.hs_mouseup(e)
+        }
+    }
+
+    onmouseleave(e) {
+        // List of widgets created by this controller
+        let list = this.tv.$refs.widgets.$children
+            .filter(x => x.main === this)
+
+        for (var s of list) {
+            s.hs_mouseleave(e)
+        }
+    }
+
+    place_splitters() {
+        let grids = this.tv.$refs.chart._layout.grids
+        for (var i = 1; i < grids.length; i++) {
+            let g1 = grids[i-1]
+            let g2 = grids[i]
+            let id = `Splitter-${g1.id}-${g2.id}-${Utils.uuid2()}`
+            Vue.set(this.widgets, id, {
+                id: id,
+                cls: Splitter,
+                data: {
+                    grid1: g1,
+                    grid2: g2,
+                    sett: this.sett
+                }
+            })
+        }
+    }
+
+    calc_heights() {
+        let hs = []
+        for (var g of this.tv.$refs.chart._layout.grids) {
+            hs.push(g.height)
+        }
+        let sum = hs.reduce((a, b) => a + b, 0)
+        hs = hs.map(h => h / sum)
+        this.grid_ovs().forEach((ov, i) => {
+            if (!ov.grid) {
+                Vue.set(ov, 'grid', {})
+            }
+            Vue.set(ov.grid, 'height', hs[i] || 1)
+        })
+    }
+
+    // Grid defining overlays
+    grid_ovs() {
+        let list = [this.dc.data.chart]
+        for (var ov of this.dc.data.offchart) {
+            if (!ov.grid || ov.grid.id === undefined) {
+                list.push(ov)
+            }
+        }
+        return list
+    }
+
+    remove_widgets() {
+        for (var id in this.widgets) {
+            this.tv.$delete(this.widgets, id)
+        }
+    }
+
+    destroy() {
+        this.tv.$el.removeEventListener(
+            'mousemove', this.onmousemove
+        )
+        this.tv.$el.removeEventListener(
+            'mouseup', this.mouseup
+        )
+        this.tv.$el.removeEventListener(
+            'mouseleave', this.mouseleave
+        )
+    }
+
+}

package/src/extensions/grid-resize/utils.js

@@ -0,0 +1,25 @@
+export default {
+
+    add_style(id, style) {
+
+        var stbr = document.getElementById(id)
+        if (stbr) {
+            var sheetParent = stbr.parentNode
+            sheetParent.removeChild(stbr)
+        }
+
+        var sheet = document.createElement('style')
+        sheet.setAttribute("id", id)
+        sheet.innerHTML = style
+        document.body.appendChild(sheet)
+    },
+
+    rem_style(id, style) {
+        var stbr = document.getElementById(id)
+        if (stbr) {
+            var sheetParent = stbr.parentNode
+            sheetParent.removeChild(stbr)
+        }
+    }
+
+}

package/src/extensions/grid-resize/x.json

@@ -0,0 +1,11 @@
+{
+    "name": "grid-resize",
+    "author": "StdSquad",
+    "version": "1.0.0",
+    "components": [],
+    "widgets": [],
+    "overlays": [],
+    "skins": [],
+    "colorpacks": [],
+    "deps": {}
+}

package/src/extensions/legend-buttons/AddWin.vue

@@ -0,0 +1,91 @@
+<template>
+    <window title="Add Overlay" class="add-win"
+        @close="on_close" :tv='tv'>
+        <div class="add-win-list">
+            <div v-for="ov of ovs" class="add-win-item"
+                @click="on_click(ov.name)">
+                <span>{{ov.name}}</span>
+                <span class="add-win-item-desc">
+                    {{ov.methods.meta_info().desc}}
+                </span>
+            </div>
+        </div>
+    </window>
+</template>
+<script>
+
+import Window from '../../components/Window.vue'
+
+export default {
+    name: 'AddWin',
+    props: ['id', 'main', 'dc', 'tv', 'data'],
+    components: { Window },
+    mounted() {
+    },
+    methods: {
+        on_close() {
+            this.$props.main.remove_widget(this.$props.id)
+        },
+        on_click(name) {
+            this.on_close()
+            this.main.add_overlay({
+                side: this.data.type,
+                index: this.data.index,
+                type: name
+            })
+        }
+    },
+    computed: {
+        sett() {
+            return this.$props.data.ov.settings
+        }
+    },
+    data() {
+        return {
+            ovs: this.tv.overlays.filter(x => x.methods.calc)
+        }
+    }
+}
+</script>
+<style scoped>
+.tvjs-x-window.add-win {
+    padding-bottom: 30px;
+    border: 1px solid #80808011;
+}
+.add-win-list {
+    height: 300px;
+    overflow-x: hidden;
+    overflow-y: auto;
+    user-select: none;
+}
+/* Hide scrollbar for Chrome, Safari and Opera */
+.add-win-list::-webkit-scrollbar {
+  display: none;
+}
+
+/* Hide scrollbar for IE, Edge and Firefox */
+.add-win-list {
+  -ms-overflow-style: none;  /* IE and Edge */
+  scrollbar-width: none;  /* Firefox */
+}
+.add-win-item {
+    color: #ffffff88;
+    width: 100%;
+    padding: 5px;
+    cursor: pointer;
+}
+.add-win-item:hover {
+    background: #88888822;
+    color: #ffffffff;
+}
+.add-win-item-desc {
+    color: #ffffff33;
+    margin-left: 3px;
+}
+.add-win-item:hover .add-win-item-desc {
+    color: #ffffff44;
+}
+.add-win-empty {
+    opacity: 0.5;
+}
+</style>