Open MrBjurhager opened 1 year ago
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"
}
Description
I would like an overlay similar to tv that's clickable. This could be used for many different things.![Screenshot 2023-04-26 083539](https://user-images.githubusercontent.com/131713377/234489708-dc33c33d-0038-4f75-92a6-7d8350e13788.jpg)
Suggested solution
.
Alternative
No response
Additional context
No response
Validations