p1otek/winterfail
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: apply dynamic green/red colors to measurement tool and axis labels

Browse Source
This commit is contained in:
DiTus
2026-03-21 13:35:11 +01:00
parent 3575d37764
commit 338b1ee895
1 changed files with 59 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
js/ui/drawing-tools.js
View File

@ -53,12 +53,67 @@ export class DrawingManager {
renderer: () => ({
draw: (target) => this.render(target)
})
}]
}],
priceAxisViews: () => this.getPriceAxisViews(),
timeAxisViews: () => this.getTimeAxisViews()
};
this.series.attachPrimitive(this.drawingPrimitive);
}
getPriceAxisViews() {
const views = [];
const drawingsToShow = [];
if (this.currentDrawing && this.currentDrawing.type === 'measure') drawingsToShow.push(this.currentDrawing);
if (this.selectedDrawing && this.selectedDrawing.type === 'measure') drawingsToShow.push(this.selectedDrawing);
drawingsToShow.forEach(d => {
const isUp = d.p2.price >= d.p1.price;
const color = isUp ? '#26a69a' : '#ef5350';
[d.p1.price, d.p2.price].forEach(price => {
views.push({
coordinate: () => this.series.priceToCoordinate(price),
text: () => price.toFixed(2),
textColor: () => '#ffffff',
backColor: () => color,
visible: () => true,
});
});
});
return views;
}
getTimeAxisViews() {
const views = [];
const drawingsToShow = [];
if (this.currentDrawing && this.currentDrawing.type === 'measure') drawingsToShow.push(this.currentDrawing);
if (this.selectedDrawing && this.selectedDrawing.type === 'measure') drawingsToShow.push(this.selectedDrawing);
drawingsToShow.forEach(d => {
const isUp = d.p2.price >= d.p1.price;
const color = isUp ? '#26a69a' : '#ef5350';
[d.p1.time, d.p2.time].forEach(time => {
views.push({
coordinate: () => this.chart.timeScale().timeToCoordinate(time),
text: () => {
const date = new Date(time * 1000);
const day = date.getDate().toString().padStart(2, '0');
const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
const month = months[date.getMonth()];
const year = date.getFullYear().toString().slice(-2);
const hours = date.getHours().toString().padStart(2, '0');
const mins = date.getMinutes().toString().padStart(2, '0');
return `${day} ${month} '${year} ${hours}:${mins}`;
},
textColor: () => '#ffffff',
backColor: () => color,
visible: () => true,
});
});
});
return views;
}
updateChartInteractions() {
const isInteracting = this.activeTool !== null || this.currentDrawing !== null || (this.selectedDrawing !== null && this.isMouseDown);
@ -118,7 +173,7 @@ export class DrawingManager {
type: 'measure',
p1: { time: pos.time, price: pos.price },
p2: { time: pos.time, price: pos.price },
color: '#2962ff'
color: '#26a69a'
};
this.update();
return;
@ -140,7 +195,7 @@ export class DrawingManager {
type: 'measure',
p1: { time: pos.time, price: pos.price },
p2: { time: pos.time, price: pos.price },
color: '#2962ff'
color: '#26a69a'
};
this.update();
return;
@ -450,7 +505,7 @@ export class DrawingManager {
const priceDiff = d.p2.price - d.p1.price;
const percentChange = (priceDiff / d.p1.price) * 100;
const isUp = priceDiff >= 0;
const color = isUp ? '#2962ff' : '#ef5350';
const color = isUp ? '#26a69a' : '#ef5350';
// 1. Draw Measurement Area
ctx.fillStyle = color + '33';