Function drawPieChart

packages/client/src/graph.ts:540–570

(host: GraphHost, palette: Palette)

}

function drawPieChart(host: GraphHost, palette: Palette): GraphDrawFn {
  return (spreadsheet, range, gview) => {
    if (!range) return;
    const { values, labels } = collectValues(host, spreadsheet, range);
    const total = values.reduce((a, b) => a + b, 0);
    gview.innerHTML = '<canvas id="myCanvas" width="500px" height="400px"></canvas>';
    const canv = host.doc.getElementById('myCanvas') as HTMLCanvasElement | null;
    if (!canv) return;
    const ctx = canv.getContext('2d') as CanvasRenderingContext2D | null;
    if (!ctx) return;
    ctx.font = '10pt Arial';
    const centerX = canv.width / 2;
    const centerY = canv.height / 2;
    const rad = centerY - 50;
    let last = 0;
    for (let i = 0; i < values.length; i++) {
      if (!Number(values[i])) continue;
      ctx.beginPath();
      ctx.moveTo(centerX, centerY);
      ctx.fillStyle = palette.getDrawColor();
      const arc = 2 * Math.PI * (values[i]! / (total || 1));
      ctx.arc(centerX, centerY, rad, last, last + arc, false);
      ctx.closePath();
      ctx.fill();
      ctx.fillStyle = '#000';
      // Labels pushed 1:1 with values — `?? ''` is defensive-only.
      ctx.fillText(/* istanbul ignore next */ labels[i] ?? '', centerX + Math.cos(last + arc / 2) * rad, centerY + Math.sin(last + arc / 2) * rad);
      last += arc;
    }
  };
}

function drawLineChart(host: GraphHost, palette: Palette): GraphDrawFn {
  return (spreadsheet, range, gview) => {