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(xxS.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(xxS.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();
}
});