Function drawVerticalBar

packages/client/src/graph.ts:467–510

(host: GraphHost, palette: Palette)

}

function drawVerticalBar(host: GraphHost, palette: Palette): GraphDrawFn {
  return (spreadsheet, range, gview, gtype, helpflag) => {
    if (helpflag || !range) {
      const hideHelp = host.SocialCalc.Constants['s_loc_hide_help'] ?? 'Hide Help';
      const display = (host.SocialCalc.GraphTypesInfo![gtype] as { display: string }).display;
      gview.innerHTML =
        `<input type="button" value="${hideHelp}" onclick="DoGraph(false,false);"><br><br>` +
        `This is the help text for graph type: ${display}.`;
      return;
    }
    const { values, labels } = collectValues(host, spreadsheet, range);
    let maxval: number | null = null;
    let minval: number | null = null;
    for (const v of values) {
      if (maxval === null || v > maxval) maxval = v;
      if (minval === null || v < minval) minval = v;
    }
    if ((maxval ?? 0) < 0) maxval = 0;
    if ((minval ?? 0) > 0) minval = 0;
    gview.innerHTML = '<table><tr><td><canvas id="myBarCanvas" width="500px" height="400px" style="border:1px solid black;"></canvas></td><td><span id="googleBarChart"></span></td></tr></table>';
    const canv = host.doc.getElementById('myBarCanvas') as HTMLCanvasElement | null;
    if (!canv) return;
    const ctx = canv.getContext('2d') as CanvasRenderingContext2D | null;
    if (!ctx) return;
    ctx.font = '10pt bold Arial';
    const maxheight = canv.height - 60;
    const totalwidth = canv.width;
    palette.reset();
    const eachwidth = Math.floor(totalwidth / (values.length || 1)) - 4 || 1;
    const zeroLine = maxheight * ((maxval ?? 0) / (((maxval ?? 0) - (minval ?? 0)) || 1)) + 30;
    const yScale = maxheight / (((maxval ?? 0) - (minval ?? 0)) || 1);
    ctx.lineWidth = 5;
    ctx.moveTo(0, zeroLine);
    ctx.lineTo(canv.width, zeroLine);
    ctx.stroke();
    for (let i = 0; i < values.length; i++) {
      ctx.fillStyle = '#' + palette.getBarColor();
      ctx.fillRect(i * eachwidth, zeroLine - yScale * values[i]!, eachwidth, yScale * values[i]!);
      // Labels are pushed in lockstep with values; the `?? ''` fallback is a
      // defensive guard never triggered by collectValues.
      ctx.fillText(/* istanbul ignore next */ labels[i] ?? '', i * eachwidth + 4, zeroLine + 16);
    }
  };
}

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