Black-Scholes Greeks Lab

const K = 100, r = 0.03, sigma = 0.25;
const tenors = [
  { label: '1d', T: 1/365 },
  { label: '1w', T: 7/365 },
  { label: '1m', T: 30/365 },
  { label: '3m', T: 0.25 },
  { label: '6m', T: 0.5 },
  { label: '1y', T: 1.0 },
];
let tenorIdx = 4;
const S_MIN = 40, S_MAX = 160, N_SAMPLES = 240;
let series = [];

function erf(x) {
  const sign = x < 0 ? -1 : 1;
  x = Math.abs(x);
  const a1=0.254829592,a2=-0.284496736,a3=1.421413741,a4=-1.453152027,a5=1.061405429,p=0.3275911;
  const t = 1/(1+p*x);
  const y = 1 - (((((a5*t+a4)*t)+a3)*t+a2)*t+a1)*t*Math.exp(-x*x);
  return sign*y;
}
function ncdf(x){ return 0.5*(1+erf(x/Math.SQRT2)); }
function npdf(x){ return Math.exp(-0.5*x*x)/Math.sqrt(2*Math.PI); }

function greeks(S, T) {
  if (T <= 0 || S <= 0) {
    const intrinsic = Math.max(S-K, 0);
    return { C: intrinsic, delta: S>K?1:0, gamma: 0, vega: 0, d1: 0 };
  }
  const d1 = (Math.log(S/K) + (r + sigma*sigma/2)*T) / (sigma*Math.sqrt(T));
  const d2 = d1 - sigma*Math.sqrt(T);
  const C = S*ncdf(d1) - K*Math.exp(-r*T)*ncdf(d2);
  const delta = ncdf(d1);
  const gamma = npdf(d1)/(S*sigma*Math.sqrt(T));
  const vega  = S*npdf(d1)*Math.sqrt(T);
  return { C, delta, gamma, vega, d1 };
}

function recompute() {
  const T = tenors[tenorIdx].T;
  series = [];
  for (let i=0;i<N_SAMPLES;i++) {
    const S = S_MIN + (S_MAX-S_MIN)*i/(N_SAMPLES-1);
    series.push({ S, ...greeks(S, T) });
  }
}

function init({ canvas, ctx, width, height }) {
  recompute();
}

function drawPanel(ctx, x, y, w, h, title, color, getY, S_hl, valHl) {
  ctx.fillStyle = '#0a0d14';
  ctx.fillRect(x, y, w, h);
  ctx.strokeStyle = '#1a2030';
  ctx.lineWidth = 1;
  ctx.strokeRect(x+0.5, y+0.5, w-1, h-1);
  let yMin = Infinity, yMax = -Infinity;
  for (const p of series) { const v = getY(p); if (v<yMin) yMin=v; if (v>yMax) yMax=v; }
  if (yMax - yMin < 1e-9) { yMax = yMin + 1; }
  const pad = (yMax-yMin)*0.08;
  yMin -= pad; yMax += pad;
  const padL = 44, padR = 8, padT = 22, padB = 18;
  const px = x + padL, py = y + padT, pw = w - padL - padR, ph = h - padT - padB;
  ctx.strokeStyle = '#15202e'; ctx.lineWidth = 1;
  for (let i=0;i<=4;i++) {
    const gy = py + ph*i/4;
    ctx.beginPath(); ctx.moveTo(px, gy); ctx.lineTo(px+pw, gy); ctx.stroke();
  }
  const kx = px + pw*(K-S_MIN)/(S_MAX-S_MIN);
  ctx.strokeStyle = '#553311'; ctx.setLineDash([3,3]);
  ctx.beginPath(); ctx.moveTo(kx, py); ctx.lineTo(kx, py+ph); ctx.stroke();
  ctx.setLineDash([]);
  ctx.strokeStyle = color; ctx.lineWidth = 1.8;
  ctx.beginPath();
  for (let i=0;i<series.length;i++) {
    const p = series[i];
    const cx = px + pw*(p.S-S_MIN)/(S_MAX-S_MIN);
    const cy = py + ph - ph*(getY(p)-yMin)/(yMax-yMin);
    if (i===0) ctx.moveTo(cx, cy); else ctx.lineTo(cx, cy);
  }
  ctx.stroke();
  const hx = px + pw*(S_hl-S_MIN)/(S_MAX-S_MIN);
  if (hx >= px && hx <= px+pw) {
    ctx.strokeStyle = '#ffcf66'; ctx.lineWidth = 1;
    ctx.beginPath(); ctx.moveTo(hx, py); ctx.lineTo(hx, py+ph); ctx.stroke();
    const hy = py + ph - ph*(valHl-yMin)/(yMax-yMin);
    if (hy >= py && hy <= py+ph) {
      ctx.fillStyle = '#ffcf66';
      ctx.beginPath(); ctx.arc(hx, hy, 3, 0, Math.PI*2); ctx.fill();
    }
  }
  ctx.fillStyle = '#5a6478';
  ctx.font = '10px monospace';
  ctx.textAlign = 'right';
  ctx.fillText(yMax.toFixed(2), x+padL-4, y+padT+4);
  ctx.fillText(yMin.toFixed(2), x+padL-4, y+padT+ph);
  ctx.textAlign = 'center';
  ctx.fillText(S_MIN.toFixed(0), px, y+h-4);
  ctx.fillText(S_MAX.toFixed(0), px+pw, y+h-4);
  ctx.fillText('K='+K, kx, y+h-4);
  ctx.textAlign = 'left';
  ctx.fillStyle = color;
  ctx.font = 'bold 12px monospace';
  ctx.fillText(title, x+8, y+15);
  ctx.fillStyle = '#e8ecf4';
  ctx.font = '11px monospace';
  ctx.textAlign = 'right';
  ctx.fillText(valHl.toFixed(4), x+w-8, y+15);
}

function tick({ ctx, width, height, input }) {
  const clicks = input.consumeClicks();
  if (clicks.length) {
    tenorIdx = (tenorIdx + 1) % tenors.length;
    recompute();
  }
  ctx.fillStyle = '#05070b';
  ctx.fillRect(0, 0, width, height);
  ctx.fillStyle = '#e8ecf4';
  ctx.font = 'bold 13px monospace';
  ctx.textAlign = 'left';
  ctx.fillText('Black-Scholes  K='+K+'  r='+r+'  sigma='+sigma+'  T='+tenors[tenorIdx].label+'  (click to cycle T)', 10, 18);
  const mx = Math.max(0, Math.min(width, input.mouseX || width/2));
  const S_hl = S_MIN + (S_MAX-S_MIN)*(mx/width);
  const g = greeks(S_hl, tenors[tenorIdx].T);
  ctx.fillStyle = '#ffcf66';
  ctx.font = '11px monospace';
  ctx.textAlign = 'right';
  ctx.fillText('S='+S_hl.toFixed(2), width-10, 18);
  const top = 28;
  const gw = (width - 12) / 2;
  const gh = (height - top - 8) / 2;
  drawPanel(ctx, 4,        top,        gw, gh, 'Call Value C', '#5fd3ff', p=>p.C,     S_hl, g.C);
  drawPanel(ctx, 8+gw,     top,        gw, gh, 'Delta',         '#7cf08a', p=>p.delta, S_hl, g.delta);
  drawPanel(ctx, 4,        top+gh+4,   gw, gh, 'Gamma',         '#ff7ad1', p=>p.gamma, S_hl, g.gamma);
  drawPanel(ctx, 8+gw,     top+gh+4,   gw, gh, 'Vega',          '#c896ff', p=>p.vega,  S_hl, g.vega);
}