From 805f25eb7589a85b7a89e73082c3c9b6384c3bb1 Mon Sep 17 00:00:00 2001
From: Manohar <manohar@manohargupta.com>
Date: Fri, 15 May 2026 10:38:16 +0530
Subject: [PATCH] fix: afterDraw with 1SD/2SD lines, breakeven%, spot line; all
 3 table fixes

---
 public/index.html | 70 +++++++++++++++++++++++++----------------------
 1 file changed, 37 insertions(+), 33 deletions(-)

diff --git a/public/index.html b/public/index.html
index 597f145..6bfce3d 100644
--- a/public/index.html
+++ b/public/index.html
@@ -424,41 +424,45 @@ var payoffChartInst = null;
 Chart.register({
   id: 'payoffLines',
   afterDraw: function(chart) {
-    if (!chart.canvas._beLines) return;
-    var ctx = chart.ctx;
-    var xs = chart.canvas._chartXs || [];
-    if (!xs.length) return;
-    var xScale = chart.scales.x, yScale = chart.scales.y;
-    var lo = xs[0], hi = xs[xs.length-1], rng = hi - lo;
-    if (!rng) return;
-    function xPx(v) { return xScale.left + (v-lo)/rng*(xScale.right-xScale.left); }
+    if(!chart.canvas._beLines)return;
+    var ctx=chart.ctx,xs=chart.canvas._chartXs||[];
+    if(!xs.length)return;
+    var xS=chart.scales.x,yS=chart.scales.y,lo=xs[0],hi=xs[xs.length-1],rng=hi-lo;
+    if(!rng)return;
+    function xP(v){return xS.left+(v-lo)/rng*(xS.right-xS.left);}
+    var sp=chart.canvas._spotLine||0;
     ctx.save();
-    // Breakeven lines — amber dashed
-    (chart.canvas._beLines || []).forEach(function(be) {
-      var x = xPx(be);
-      if (x < xScale.left || x > xScale.right) return;
-      ctx.beginPath(); ctx.setLineDash([5,4]);
-      ctx.strokeStyle = 'rgba(245,166,35,0.85)'; ctx.lineWidth = 1.5;
-      ctx.moveTo(x, yScale.top); ctx.lineTo(x, yScale.bottom); ctx.stroke();
-      ctx.setLineDash([]);
-      ctx.fillStyle = '#F5A623'; ctx.font = '9px monospace';
-      ctx.textAlign = 'center';
-      ctx.fillText(Number(be).toLocaleString('en-IN'), x, yScale.top + 10);
-    });
-    // Spot line — coral dashed
-    var sp = chart.canvas._spotLine;
-    if (sp) {
-      var x = xPx(sp);
-      if (x >= xScale.left && x <= xScale.right) {
-        ctx.beginPath(); ctx.setLineDash([6,3]);
-        ctx.strokeStyle = 'rgba(255,107,74,0.9)'; ctx.lineWidth = 2;
-        ctx.moveTo(x, yScale.top); ctx.lineTo(x, yScale.bottom); ctx.stroke();
-        ctx.setLineDash([]);
-        ctx.fillStyle = '#FF6B4A'; ctx.font = 'bold 9px monospace';
-        ctx.textAlign = 'center';
-        ctx.fillText('Spot ' + Number(sp).toLocaleString('en-IN'), x, yScale.bottom - 4);
-      }
+    // 1SD and 2SD dotted lines
+    var sd=chart.canvas._sdInfo;
+    if(sd&&sp){
+      [{dist:sd.sd1,lbl:'1SD',col:'rgba(155,89,182,0.7)',dash:[3,4]},
+       {dist:sd.sd2,lbl:'2SD',col:'rgba(52,152,219,0.6)',dash:[2,5]}
+      ].forEach(function(s){
+        [sp-s.dist,sp+s.dist].forEach(function(v){
+          var x=xP(v);if(x<xS.left||x>xS.right)return;
+          ctx.beginPath();ctx.setLineDash(s.dash);ctx.strokeStyle=s.col;ctx.lineWidth=1.2;
+          ctx.moveTo(x,yS.top);ctx.lineTo(x,yS.bottom);ctx.stroke();
+          ctx.setLineDash([]);ctx.fillStyle=s.col;ctx.font='8px monospace';ctx.textAlign='center';
+          ctx.fillText(s.lbl,x,yS.top+8);
+        });
+      });
     }
+    // Breakeven lines + % from spot
+    (chart.canvas._beLines||[]).forEach(function(be){
+      var x=xP(be);if(x<xS.left||x>xS.right)return;
+      ctx.beginPath();ctx.setLineDash([5,4]);ctx.strokeStyle='rgba(245,166,35,0.9)';ctx.lineWidth=1.5;
+      ctx.moveTo(x,yS.top);ctx.lineTo(x,yS.bottom);ctx.stroke();
+      ctx.setLineDash([]);ctx.fillStyle='#F5A623';ctx.font='bold 9px monospace';ctx.textAlign='center';
+      var pct=sp>0?((be-sp)/sp*100).toFixed(1):'';
+      ctx.fillText(be.toLocaleString('en-IN')+(pct?' ('+(pct>0?'+':'')+pct+'%)':''),x,yS.top+10);
+    });
+    // Spot line
+    if(sp){var x=xP(sp);if(x>=xS.left&&x<=xS.right){
+      ctx.beginPath();ctx.setLineDash([6,3]);ctx.strokeStyle='rgba(255,107,74,0.95)';ctx.lineWidth=2.5;
+      ctx.moveTo(x,yS.top);ctx.lineTo(x,yS.bottom);ctx.stroke();
+      ctx.setLineDash([]);ctx.fillStyle='#FF6B4A';ctx.font='bold 10px monospace';ctx.textAlign='center';
+      ctx.fillText('Spot '+Number(sp).toLocaleString('en-IN'),x,yS.bottom-4);
+    }}
     ctx.restore();
   }
 });