project-nv / night-vision

Highly customizable charting library, created for professional traders
https://nightvision.dev
MIT License
252 stars 58 forks source link

Request overlays #20

Open frbju opened 2 years ago

frbju commented 2 years ago

I would like to request interactive horizontal and vertical lines. example:

{
    type: 'hline',
    interactive: true,
    data: <value>,
    settings: {},
    props: {
        "color": rgba()
    }
},
{
    type: 'vline',
    interactive: true,
    data: <timestamp>,
    settings: {},
    props: {
        "color": rgba()
    }
}

Then handles to get data

hline.on('start', { })
hline.on('drag', { })
hline.on('end', { })

Reason for this is that i want to have lines for my entry / takeprofit / stoploss. And be able to drag ex stoploss to a new value then send a trigger back to backend.

Best / F

frbju commented 1 year ago

Hi, Could i get permissions to push? I would like to help with what i can :)

Iv'e made the base for vline & hline.

example:

// Navy ~ 0.1-lite
// ^^^ First comment should provide a NavyJS version

// Meta tag
[OVERLAY name = vLine, ctx = Canvas, author = ChartMaster, version = 1.0.0]

prop('color', { type: 'color', def: 'pink' })
prop('lineDash', { type: 'array', def: [2, 5] })
prop('lineWidth', { type: 'number', def: 1 })
prop('interactive', { type: 'boolean', def: false }) // Todo

draw(ctx) {
    const layout = $core.layout
    const data = $core.data
    let x = layout.time2x(data)

    ctx.strokeStyle = $props.color
    ctx.lineWidth = $props.lineWidth
    ctx.setLineDash($props.lineDash);

    ctx.beginPath()
    ctx.moveTo(x, 0)
    ctx.lineTo(x, layout.height)
    ctx.stroke()
}