Position level / SL levels

[MrBjurhager]

Description

I would like an overlay similar to tv that's clickable. This could be used for many different things.

Suggested solution

.

Alternative

No response

Additional context

No response

Validations

• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

[MrBjurhager]

Iv'e started my own, It draws what i want, it's clickable "log".
I feel that this is hacky, must be a better way? suggestions?

// Navy ~ 0.1-lite

const e = require("cors")

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

prop('color', { type: 'color', def: 'red' })
prop('lineDash', { type: 'array', def: [5, 3] })
prop('lineWidth', { type: 'number', def: 1 })
prop('interactive', { type: 'boolean', def: false }) // Todo
prop('scaleSymbol', { type: 'string|boolean', def: false })
prop('priceLine', { type: 'boolean', def: true })
prop('showValueTracker', { type: 'boolean', def: true })

let mockData = [
    {
        "availPos": "1",
        "avgPx": "29300",
        "ccy": "ETH",
        "liqPx": "2352.8496681818233",
        "markPx": "2353.849",
        "margin": "0.0003896645377994",
        "mgnMode": "isolated",
        "mgnRatio": "11.731726509588816",
        "mmr": "0.0000311811092368",
        "notionalUsd": "2276.2546609009605",
        "optVal": "",
        "pTime": "1619507761462",
        "pos": "1",
        "posId": "307173036051017730",
        "posSide": "long",
        "upl": "-0.0000009932766034",
        "uplRatio": "-0.0025490556801078",
        "closeOrderAlgo": [
            {
                "algoId": "123",
                "slTriggerPx": "123",
                "slTriggerPxType": "mark",
                "tpTriggerPx": "123",
                "tpTriggerPxType": "mark",
                "closeFraction": "0.6"
            }
        ]
    }
]
const capitalize = (str) => {
    const lower = str.toLowerCase();
    return str.charAt(0).toUpperCase() + lower.slice(1);
}



draw(ctx) {
    const position = (input) => {
        const layout = $core.layout
        const data = $core.data
        let avgPx = parseFloat(input[0].avgPx).toFixed(2);
        let upl = parseFloat(input[0].upl).toFixed(4);
        let posSide = capitalize(input[0].posSide);

        let fontSize = 12;
        let fontFamily = 'arial';
        let lineHeight = fontSize;

        ctx.font = fontSize + 'px' + ' ' + fontFamily;
        ctx.textAlign = 'right';
        ctx.textBaseline = 'middle';

        let x = layout.width;
        let y = layout.value2y(input[0].avgPx);

        // Text
        ctx.fillStyle = '#FF0000';

        
        // Background
        ctx.strokeStyle = "#FF0000";
        ctx.fillStyle = "#FF0000";
        ctx.fillRect(x - 200, (y - lineHeight), 136, 22);
        ctx.fillStyle = '#FFFFFF'

        // Price line
        ctx.beginPath();
        ctx.moveTo(0, y);
        ctx.lineTo(x, y);
        ctx.stroke();
        
        // Position Side
        ctx.fillText(posSide, (x - 160), y);

        // upl
        ctx.fillText(upl, (x - 100), y);

        // close
        let csz = 3;
        ctx.strokeStyle = '#FFFFFF';
        ctx.beginPath();
        ctx.moveTo(x - csz - 80, y - csz);
        ctx.lineTo(x + csz - 80, y + csz);

        ctx.moveTo(x + csz - 80, y - csz);
        ctx.lineTo(x - csz - 80, y + csz);
        ctx.stroke();

    }

    position(mockData)
}

click(event) {
    let x = $core.layout.width;
    let y = $core.layout.value2y(mockData[0].avgPx);
    let mx = event.x;
    let my = event.y;

    if (mx > (x - 88) && mx < (x - 72) && my < (y + 10) && my > (y - 10)) {
        console.log('Close Position');
    }

}
valueTracker(x) => {
    show: $props.showValueTracker,
        symbol: $props.scaleSymbol,
            line: false,
                value: Number(mockData[0].avgPx),
                    color: '#ffffff',
                        back: "#00ff00"
}