Grin

Grin.vue

<script>
// Grin

// Adds all necessary stuff for you.
import { Overlay } from 'trading-vue-js'

export default {
    name: 'Grin',
    mixins: [Overlay],
    methods: {
        meta_info() {
            return {
                author: 'C451',
                version: '2.0.0'
            }
        },
        // Here goes your code. You are provided with:
        // { All stuff is reactive }
        // $props.layout -> positions of all chart elements +
        //  some helper functions (see layout_fn.js)
        // $props.interval -> candlestick time interval
        // $props.sub -> current subset of candlestick data
        // $props.data -> your indicator's data subset.
        //  Comes "as is", should have the following format:
        //  [[<timestamp>, ... ], ... ]
        // $props.colors -> colors (see TradingVue.vue)
        // $props.cursor -> current position of crosshair
        // $props.settings -> indicator custom settings
        //  E.g. colors, line thickness, etc. You define it.
        // ~
        // Finally, let's make the canvas dirty!
        draw(ctx) {
            const l = this.$props.layout
            const c = {
                x: l.width / 2,
                y: l.height / 2
            }
            ctx.lineWidth = 2
            ctx.strokeStyle = 'black'
            ctx.fillStyle = '#ffea03'
            // Strong Head
            ctx.beginPath()
            ctx.arc(c.x, c.y, 50, 0, Math.PI * 2, true)
            ctx.fill()
            ctx.stroke()
            ctx.fillStyle = 'white'
            ctx.strokeStyle = 'black'
            // Wild Grin
            ctx.lineWidth = 1
            ctx.beginPath()
            ctx.strokeStyle = 'black'
            if (this.woo) ctx.arc(c.x, c.y, 42, -Math.PI * 0.1, Math.PI * 1.1)
            let d = this.woo ? 0 : 0.15
            let w = this.woo ? 2 : 0
            ctx.arc(c.x, c.y - (27 - w), 42, Math.PI * 0.9 - d, +Math.PI * .1 + d, true)
            if (this.woo) ctx.fill()
            ctx.stroke()
            ctx.beginPath()
            ctx.lineWidth = 0.25
            if (!this.woo) ctx.arc(c.x, c.y + 15, 25, Math.PI * 0.45, Math.PI * .6)
            ctx.stroke()
            ctx.lineWidth = 0.15
            ctx.beginPath()
            ctx.strokeStyle = 'black'
            var s1 = Math.PI * .1
            var s2 = Math.PI * 0.15

            if (this.woo)
                for (var k = 0; k < 0.85; k += 0.1) {
                    ctx.arc(c.x, c.y - 25, 43,
                        s1 + k * Math.PI,
                        s1 + (k + 0.01) * Math.PI, false)
                    ctx.arc(c.x, c.y, 42,
                        s2 + k * Math.PI,
                        s2 + (k + 0.01) * Math.PI, false)
                }

            ctx.stroke()
            // Eagle eyes 
            ctx.beginPath()
            ctx.fillStyle = 'black'
            ctx.strokeStyle = 'black'
            ctx.lineWidth = 1
            ctx.moveTo(c.x - 17, c.y - 5)
            ctx.arc(c.x - 17, c.y - 5, 3, 0, Math.PI * 2, true)
            ctx.fill()
            ctx.moveTo(c.x + 17, c.y - 5)
            ctx.arc(c.x + 17, c.y - 5, 3, 0, Math.PI * 2, true)
            ctx.fill()
            ctx.stroke()
            ctx.lineCap = "round"
            ctx.beginPath()
            ctx.lineWidth = 5
            if (this.woo) {
                ctx.moveTo(c.x - 25, c.y - 15 + 2)
                ctx.lineTo(c.x - 10, c.y - 7 + 2)
                ctx.moveTo(c.x + 25, c.y - 20 + 2)
                ctx.lineTo(c.x + 10, c.y - 7 + 2)
            }
            ctx.stroke()
        },

        // For all data with these types overlay will be
        // added to the renderer list. And '$props.data'
        // will have the corresponding values. If you want to
        // redefine the default behviour for a prticular
        // indicator (let's say EMA),
        // just create a new overlay with the same type:
        // e.g. use_for() { return ['EMA'] }.
        use_for() {
            return ['GRIN']
        },
        data_colors() {
            return ['yellow']
        },
        mousemove(e) {
            const l = this.$props.layout
            const c = {
                x: l.width / 2,
                y: l.height / 2
            }
            if (
                (c.x - e.clientX) * (c.x - e.clientX) +
                (c.y - e.clientY) * (c.y - e.clientY) <
                42 * 42
            ) {
                this.woo = true
            } else {
                this.woo = false
            }
        },
    },
    data() {
        // Define internal setting & constants here
        return {
            woo: false
        }
    }

}
</script>