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

js/ui/drawing-tools.js

@@ -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';