@lotics/xlsx 0.1.0

package/src/canvas_chart.ts

@@ -0,0 +1,687 @@
+// =============================================================================
+// Canvas Chart Renderer
+// =============================================================================
+//
+// Draws parsed charts on the canvas at their anchor positions.
+// Supports: bar, column, line, pie, doughnut, area, scatter, radar.
+// Unsupported types render as labeled placeholders.
+// =============================================================================
+
+import type { ParsedChart, ChartSeries } from "./ooxml_chart_types";
+import type { LayoutEngine } from "./canvas_layout";
+import { emuToPixels } from "./canvas_images";
+
+// =============================================================================
+// Default colors for series
+// =============================================================================
+
+const SERIES_COLORS = [
+  "#4472C4", "#ED7D31", "#A5A5A5", "#FFC000", "#5B9BD5",
+  "#70AD47", "#264478", "#9B57A0", "#636363", "#EB6F3A",
+];
+
+// =============================================================================
+// Main entry
+// =============================================================================
+
+export function drawChart(
+  ctx: CanvasRenderingContext2D,
+  chart: ParsedChart,
+  layout: LayoutEngine,
+  scrollX: number,
+  scrollY: number,
+): void {
+  const { anchor } = chart;
+  const x = (layout.colX[anchor.from.col] ?? 0) + emuToPixels(anchor.from.colOffset ?? 0) - scrollX;
+  const y = (layout.rowY[anchor.from.row] ?? 0) + emuToPixels(anchor.from.rowOffset ?? 0) - scrollY;
+  const x2 = (layout.colX[anchor.to.col] ?? 0) + emuToPixels(anchor.to.colOffset ?? 0) - scrollX;
+  const y2 = (layout.rowY[anchor.to.row] ?? 0) + emuToPixels(anchor.to.rowOffset ?? 0) - scrollY;
+  const w = x2 - x;
+  const h = y2 - y;
+
+  if (w <= 0 || h <= 0) return;
+
+  // Background
+  ctx.save();
+  ctx.fillStyle = "#FFFFFF";
+  ctx.strokeStyle = "#D1D5DB";
+  ctx.lineWidth = 1;
+  ctx.fillRect(x, y, w, h);
+  ctx.strokeRect(x, y, w, h);
+
+  // Title
+  const titleH = chart.title ? 24 : 4;
+  if (chart.title) {
+    ctx.fillStyle = "#1F2937";
+    ctx.font = "bold 13px -apple-system, sans-serif";
+    ctx.textAlign = "center";
+    ctx.textBaseline = "middle";
+    ctx.fillText(chart.title, x + w / 2, y + titleH / 2 + 2, w - 20);
+  }
+
+  // Legend
+  const legendH = chart.series.length > 0 ? 20 : 0;
+
+  // Plot area — adjust for axis labels
+  const leftMargin = 60;
+  const bottomMargin = 28;
+  const plotX = x + leftMargin;
+  const plotY = y + titleH + 4;
+  const plotW = w - leftMargin - 20;
+  const plotH = h - titleH - legendH - bottomMargin;
+
+  if (plotW <= 0 || plotH <= 0) {
+    ctx.restore();
+    return;
+  }
+
+  // Render chart type
+  switch (chart.chartType) {
+    case "col":
+    case "bar":
+      drawBarChart(ctx, chart, plotX, plotY, plotW, plotH, chart.chartType === "bar");
+      break;
+    case "line":
+      drawLineChart(ctx, chart, plotX, plotY, plotW, plotH);
+      break;
+    case "pie":
+    case "doughnut":
+      drawPieChart(ctx, chart, plotX, plotY, plotW, plotH, chart.chartType === "doughnut");
+      break;
+    case "area":
+      drawAreaChart(ctx, chart, plotX, plotY, plotW, plotH);
+      break;
+    case "scatter":
+    case "bubble":
+      drawScatterChart(ctx, chart, plotX, plotY, plotW, plotH);
+      break;
+    case "radar":
+      drawRadarChart(ctx, chart, plotX, plotY, plotW, plotH);
+      break;
+    case "stock":
+      drawStockChart(ctx, chart, plotX, plotY, plotW, plotH);
+      break;
+    case "combo":
+      drawComboChart(ctx, chart, plotX, plotY, plotW, plotH);
+      break;
+    default:
+      drawPlaceholder(ctx, chart, plotX, plotY, plotW, plotH);
+  }
+
+  // Legend
+  if (legendH > 0 && chart.series.length > 0) {
+    drawLegend(ctx, chart.series, x + 10, y + h - legendH, w - 20);
+  }
+
+  ctx.restore();
+}
+
+// =============================================================================
+// Bar/Column chart
+// =============================================================================
+
+function drawBarChart(
+  ctx: CanvasRenderingContext2D,
+  chart: ParsedChart,
+  x: number, y: number, w: number, h: number,
+  horizontal: boolean,
+): void {
+  const { series } = chart;
+  if (series.length === 0) return;
+
+  const maxLen = arrayMax(series.map((s) => s.values.length));
+  if (maxLen === 0) return;
+
+  const allValues = series.flatMap((s) => s.values);
+  const maxVal = arrayMax([...allValues, 0]);
+  const minVal = arrayMin([...allValues, 0]);
+  const range = maxVal - minVal || 1;
+
+  drawAxisLines(ctx, x, y, w, h);
+
+  const groupCount = maxLen;
+  const seriesCount = series.length;
+
+  if (horizontal) {
+    const groupH = h / groupCount;
+    const barH = (groupH * 0.7) / seriesCount;
+
+    for (let si = 0; si < seriesCount; si++) {
+      ctx.fillStyle = series[si].color ?? SERIES_COLORS[si % SERIES_COLORS.length];
+      for (let i = 0; i < series[si].values.length; i++) {
+        const val = series[si].values[i];
+        const barW = ((val - minVal) / range) * w;
+        const barY = y + i * groupH + (groupH * 0.15) + si * barH;
+        ctx.fillRect(x, barY, barW, barH);
+      }
+    }
+  } else {
+    const groupW = w / groupCount;
+    const barW = (groupW * 0.7) / seriesCount;
+
+    for (let si = 0; si < seriesCount; si++) {
+      ctx.fillStyle = series[si].color ?? SERIES_COLORS[si % SERIES_COLORS.length];
+      for (let i = 0; i < series[si].values.length; i++) {
+        const val = series[si].values[i];
+        const barH = ((val - minVal) / range) * h;
+        const barX = x + i * groupW + (groupW * 0.15) + si * barW;
+        ctx.fillRect(barX, y + h - barH, barW, barH);
+      }
+    }
+  }
+}
+
+// =============================================================================
+// Line chart
+// =============================================================================
+
+function drawLineChart(
+  ctx: CanvasRenderingContext2D,
+  chart: ParsedChart,
+  x: number, y: number, w: number, h: number,
+): void {
+  drawAxisLines(ctx, x, y, w, h);
+
+  const allValues = chart.series.flatMap((s) => s.values);
+  const maxVal = arrayMax([...allValues, 0]);
+  const minVal = arrayMin([...allValues, 0]);
+  const range = maxVal - minVal || 1;
+
+  for (let si = 0; si < chart.series.length; si++) {
+    const s = chart.series[si];
+    const color = s.color ?? SERIES_COLORS[si % SERIES_COLORS.length];
+    ctx.strokeStyle = color;
+    ctx.lineWidth = 2;
+    ctx.beginPath();
+
+    for (let i = 0; i < s.values.length; i++) {
+      const px = x + (i / Math.max(s.values.length - 1, 1)) * w;
+      const py = y + h - ((s.values[i] - minVal) / range) * h;
+      if (i === 0) ctx.moveTo(px, py);
+      else ctx.lineTo(px, py);
+    }
+    ctx.stroke();
+
+    // Draw markers
+    ctx.fillStyle = color;
+    for (let i = 0; i < s.values.length; i++) {
+      const px = x + (i / Math.max(s.values.length - 1, 1)) * w;
+      const py = y + h - ((s.values[i] - minVal) / range) * h;
+      ctx.beginPath();
+      ctx.arc(px, py, 3, 0, Math.PI * 2);
+      ctx.fill();
+    }
+  }
+}
+
+// =============================================================================
+// Pie / Doughnut chart
+// =============================================================================
+
+function drawPieChart(
+  ctx: CanvasRenderingContext2D,
+  chart: ParsedChart,
+  x: number, y: number, w: number, h: number,
+  isDoughnut: boolean,
+): void {
+  const values = chart.series[0]?.values ?? [];
+  if (values.length === 0) return;
+
+  const total = values.reduce((a, b) => a + Math.abs(b), 0);
+  if (total === 0) return;
+
+  const cx = x + w / 2;
+  const cy = y + h / 2;
+  const r = Math.min(w, h) / 2 - 10;
+  const innerR = isDoughnut ? r * 0.5 : 0;
+
+  let startAngle = -Math.PI / 2;
+  for (let i = 0; i < values.length; i++) {
+    const sliceAngle = (Math.abs(values[i]) / total) * Math.PI * 2;
+    ctx.fillStyle = SERIES_COLORS[i % SERIES_COLORS.length];
+    ctx.beginPath();
+    ctx.arc(cx, cy, r, startAngle, startAngle + sliceAngle);
+    if (innerR > 0) {
+      ctx.arc(cx, cy, innerR, startAngle + sliceAngle, startAngle, true);
+    } else {
+      ctx.lineTo(cx, cy);
+    }
+    ctx.fill();
+
+    // Slice border
+    ctx.strokeStyle = "#FFFFFF";
+    ctx.lineWidth = 1;
+    ctx.beginPath();
+    ctx.arc(cx, cy, r, startAngle, startAngle + sliceAngle);
+    if (innerR > 0) {
+      ctx.arc(cx, cy, innerR, startAngle + sliceAngle, startAngle, true);
+    } else {
+      ctx.lineTo(cx, cy);
+    }
+    ctx.stroke();
+
+    startAngle += sliceAngle;
+  }
+}
+
+// =============================================================================
+// Area chart
+// =============================================================================
+
+function drawAreaChart(
+  ctx: CanvasRenderingContext2D,
+  chart: ParsedChart,
+  x: number, y: number, w: number, h: number,
+): void {
+  drawAxisLines(ctx, x, y, w, h);
+
+  const allValues = chart.series.flatMap((s) => s.values);
+  const maxVal = arrayMax([...allValues, 0]);
+  const minVal = arrayMin([...allValues, 0]);
+  const range = maxVal - minVal || 1;
+
+  for (let si = chart.series.length - 1; si >= 0; si--) {
+    const s = chart.series[si];
+    const color = s.color ?? SERIES_COLORS[si % SERIES_COLORS.length];
+
+    ctx.fillStyle = adjustAlpha(color, 0.3);
+    ctx.strokeStyle = color;
+    ctx.lineWidth = 1.5;
+
+    ctx.beginPath();
+    ctx.moveTo(x, y + h);
+    for (let i = 0; i < s.values.length; i++) {
+      const px = x + (i / Math.max(s.values.length - 1, 1)) * w;
+      const py = y + h - ((s.values[i] - minVal) / range) * h;
+      ctx.lineTo(px, py);
+    }
+    ctx.lineTo(x + w, y + h);
+    ctx.closePath();
+    ctx.fill();
+    ctx.stroke();
+  }
+}
+
+// =============================================================================
+// Scatter chart
+// =============================================================================
+
+function drawScatterChart(
+  ctx: CanvasRenderingContext2D,
+  chart: ParsedChart,
+  x: number, y: number, w: number, h: number,
+): void {
+  drawAxisLabels(ctx, chart, x, y, w, h);
+
+  const allValues = chart.series.flatMap((s) => s.values);
+  const maxVal = arrayMax([...allValues, 1]);
+  const isBubble = chart.chartType === "bubble";
+
+  // Find max bubble size for normalization
+  let maxBubble = 1;
+  if (isBubble) {
+    for (const s of chart.series) {
+      if (s.bubbleSizes) {
+        maxBubble = Math.max(maxBubble, arrayMax(s.bubbleSizes));
+      }
+    }
+  }
+
+  for (let si = 0; si < chart.series.length; si++) {
+    const s = chart.series[si];
+    const color = s.color ?? SERIES_COLORS[si % SERIES_COLORS.length];
+    ctx.fillStyle = color;
+
+    for (let i = 0; i < s.values.length; i++) {
+      const px = x + (i / Math.max(s.values.length - 1, 1)) * w;
+      const py = y + h - (s.values[i] / maxVal) * h;
+
+      let radius = 4;
+      if (isBubble && s.bubbleSizes && i < s.bubbleSizes.length) {
+        radius = 4 + (s.bubbleSizes[i] / maxBubble) * 16;
+      }
+
+      ctx.globalAlpha = isBubble ? 0.6 : 1;
+      ctx.beginPath();
+      ctx.arc(px, py, radius, 0, Math.PI * 2);
+      ctx.fill();
+      ctx.globalAlpha = 1;
+    }
+  }
+}
+
+// =============================================================================
+// Radar chart
+// =============================================================================
+
+function drawRadarChart(
+  ctx: CanvasRenderingContext2D,
+  chart: ParsedChart,
+  x: number, y: number, w: number, h: number,
+): void {
+  const maxLen = arrayMax([...chart.series.map((s) => s.values.length), 3]);
+  const allValues = chart.series.flatMap((s) => s.values);
+  const maxVal = arrayMax([...allValues, 1]);
+  const cx = x + w / 2;
+  const cy = y + h / 2;
+  const r = Math.min(w, h) / 2 - 10;
+
+  // Draw grid
+  ctx.strokeStyle = "#E5E7EB";
+  ctx.lineWidth = 0.5;
+  for (let ring = 1; ring <= 4; ring++) {
+    const ringR = (ring / 4) * r;
+    ctx.beginPath();
+    for (let i = 0; i <= maxLen; i++) {
+      const angle = (i / maxLen) * Math.PI * 2 - Math.PI / 2;
+      const px = cx + ringR * Math.cos(angle);
+      const py = cy + ringR * Math.sin(angle);
+      if (i === 0) ctx.moveTo(px, py);
+      else ctx.lineTo(px, py);
+    }
+    ctx.stroke();
+  }
+
+  // Draw series
+  for (let si = 0; si < chart.series.length; si++) {
+    const s = chart.series[si];
+    const color = s.color ?? SERIES_COLORS[si % SERIES_COLORS.length];
+    ctx.fillStyle = adjustAlpha(color, 0.15);
+    ctx.strokeStyle = color;
+    ctx.lineWidth = 2;
+
+    ctx.beginPath();
+    for (let i = 0; i < s.values.length; i++) {
+      const angle = (i / maxLen) * Math.PI * 2 - Math.PI / 2;
+      const val = (s.values[i] / maxVal) * r;
+      const px = cx + val * Math.cos(angle);
+      const py = cy + val * Math.sin(angle);
+      if (i === 0) ctx.moveTo(px, py);
+      else ctx.lineTo(px, py);
+    }
+    ctx.closePath();
+    ctx.fill();
+    ctx.stroke();
+  }
+}
+
+// =============================================================================
+// Stock chart (Open-High-Low-Close)
+// =============================================================================
+
+function drawStockChart(
+  ctx: CanvasRenderingContext2D,
+  chart: ParsedChart,
+  x: number, y: number, w: number, h: number,
+): void {
+  drawAxisLabels(ctx, chart, x, y, w, h);
+
+  // Need at least 4 series: Open, High, Low, Close
+  const { series } = chart;
+  if (series.length < 4) {
+    drawPlaceholder(ctx, chart, x, y, w, h);
+    return;
+  }
+
+  const openVals = series[0].values;
+  const highVals = series[1].values;
+  const lowVals = series[2].values;
+  const closeVals = series[3].values;
+  const count = Math.min(openVals.length, highVals.length, lowVals.length, closeVals.length);
+  if (count === 0) return;
+
+  const allVals = [...highVals, ...lowVals];
+  const maxVal = arrayMax(allVals);
+  const minVal = arrayMin(allVals);
+  const range = maxVal - minVal || 1;
+
+  const barW = Math.max(1, (w / count) * 0.6);
+
+  for (let i = 0; i < count; i++) {
+    const cx = x + (i + 0.5) / count * w;
+    const highY = y + h - ((highVals[i] - minVal) / range) * h;
+    const lowY = y + h - ((lowVals[i] - minVal) / range) * h;
+    const openY = y + h - ((openVals[i] - minVal) / range) * h;
+    const closeY = y + h - ((closeVals[i] - minVal) / range) * h;
+
+    const isUp = closeVals[i] >= openVals[i];
+    ctx.strokeStyle = isUp ? "#22C55E" : "#EF4444";
+    ctx.lineWidth = 1;
+
+    // Vertical line: High to Low
+    ctx.beginPath();
+    ctx.moveTo(cx, highY);
+    ctx.lineTo(cx, lowY);
+    ctx.stroke();
+
+    // Open tick (left)
+    ctx.beginPath();
+    ctx.moveTo(cx - barW / 2, openY);
+    ctx.lineTo(cx, openY);
+    ctx.stroke();
+
+    // Close tick (right)
+    ctx.beginPath();
+    ctx.moveTo(cx, closeY);
+    ctx.lineTo(cx + barW / 2, closeY);
+    ctx.stroke();
+  }
+}
+
+// =============================================================================
+// Combo chart
+// =============================================================================
+
+function drawComboChart(
+  ctx: CanvasRenderingContext2D,
+  chart: ParsedChart,
+  x: number, y: number, w: number, h: number,
+): void {
+  drawAxisLabels(ctx, chart, x, y, w, h);
+
+  const allValues = chart.series.flatMap((s) => s.values);
+  const maxVal = arrayMax([...allValues, 0]);
+  const minVal = arrayMin([...allValues, 0]);
+  const range = maxVal - minVal || 1;
+  const maxLen = arrayMax(chart.series.map((s) => s.values.length));
+
+  // Separate bar and line series
+  const barSeries = chart.series.filter((s) => s.seriesChartType === "col" || s.seriesChartType === "bar");
+  const lineSeries = chart.series.filter((s) => s.seriesChartType === "line");
+
+  // Draw bars
+  if (barSeries.length > 0) {
+    const groupW = w / maxLen;
+    const barW = (groupW * 0.7) / barSeries.length;
+    for (let si = 0; si < barSeries.length; si++) {
+      ctx.fillStyle = barSeries[si].color ?? SERIES_COLORS[si % SERIES_COLORS.length];
+      for (let i = 0; i < barSeries[si].values.length; i++) {
+        const val = barSeries[si].values[i];
+        const barH = ((val - minVal) / range) * h;
+        const barX = x + i * groupW + (groupW * 0.15) + si * barW;
+        ctx.fillRect(barX, y + h - barH, barW, barH);
+      }
+    }
+  }
+
+  // Draw lines
+  for (let si = 0; si < lineSeries.length; si++) {
+    const s = lineSeries[si];
+    const color = s.color ?? SERIES_COLORS[(barSeries.length + si) % SERIES_COLORS.length];
+    ctx.strokeStyle = color;
+    ctx.lineWidth = 2;
+    ctx.beginPath();
+    for (let i = 0; i < s.values.length; i++) {
+      const px = x + (i + 0.5) / maxLen * w;
+      const py = y + h - ((s.values[i] - minVal) / range) * h;
+      if (i === 0) ctx.moveTo(px, py);
+      else ctx.lineTo(px, py);
+    }
+    ctx.stroke();
+
+    ctx.fillStyle = color;
+    for (let i = 0; i < s.values.length; i++) {
+      const px = x + (i + 0.5) / maxLen * w;
+      const py = y + h - ((s.values[i] - minVal) / range) * h;
+      ctx.beginPath();
+      ctx.arc(px, py, 3, 0, Math.PI * 2);
+      ctx.fill();
+    }
+  }
+}
+
+// =============================================================================
+// Placeholder (unsupported chart types)
+// =============================================================================
+
+function drawPlaceholder(
+  ctx: CanvasRenderingContext2D,
+  chart: ParsedChart,
+  x: number, y: number, w: number, h: number,
+): void {
+  ctx.fillStyle = "#F3F4F6";
+  ctx.fillRect(x, y, w, h);
+  ctx.fillStyle = "#9CA3AF";
+  ctx.font = "12px -apple-system, sans-serif";
+  ctx.textAlign = "center";
+  ctx.textBaseline = "middle";
+  ctx.fillText(`[${chart.chartType} chart]`, x + w / 2, y + h / 2);
+}
+
+// =============================================================================
+// Legend
+// =============================================================================
+
+function drawLegend(
+  ctx: CanvasRenderingContext2D,
+  series: ChartSeries[],
+  x: number,
+  y: number,
+  maxW: number,
+): void {
+  ctx.font = "11px -apple-system, sans-serif";
+  ctx.textBaseline = "middle";
+
+  let cx = x;
+  for (let i = 0; i < series.length; i++) {
+    const color = series[i].color ?? SERIES_COLORS[i % SERIES_COLORS.length];
+    const name = series[i].name ?? `Series ${i + 1}`;
+
+    // Color box
+    ctx.fillStyle = color;
+    ctx.fillRect(cx, y + 4, 10, 10);
+    cx += 14;
+
+    // Name
+    ctx.fillStyle = "#374151";
+    ctx.textAlign = "left";
+    ctx.fillText(name, cx, y + 10, maxW - (cx - x) - 10);
+    cx += ctx.measureText(name).width + 16;
+
+    if (cx > x + maxW) break;
+  }
+}
+
+// =============================================================================
+// Helpers
+// =============================================================================
+
+function drawAxisLines(
+  ctx: CanvasRenderingContext2D,
+  x: number, y: number, w: number, h: number,
+): void {
+  ctx.strokeStyle = "#D1D5DB";
+  ctx.lineWidth = 1;
+  ctx.beginPath();
+  ctx.moveTo(x, y);
+  ctx.lineTo(x, y + h);
+  ctx.lineTo(x + w, y + h);
+  ctx.stroke();
+}
+
+function drawAxisLabels(
+  ctx: CanvasRenderingContext2D,
+  chart: ParsedChart,
+  x: number, y: number, w: number, h: number,
+): void {
+  drawAxisLines(ctx, x, y, w, h);
+
+  ctx.font = "9px -apple-system, sans-serif";
+  ctx.fillStyle = "#6B7280";
+
+  // Value axis: 5 evenly-spaced numeric labels along Y-axis
+  const allValues = chart.series.flatMap((s) => s.values);
+  if (allValues.length > 0) {
+    const maxVal = arrayMax([...allValues, 0]);
+    const minVal = arrayMin([...allValues, 0]);
+    const range = maxVal - minVal || 1;
+
+    ctx.textAlign = "right";
+    ctx.textBaseline = "middle";
+    for (let i = 0; i <= 4; i++) {
+      const ratio = i / 4;
+      const value = minVal + ratio * range;
+      const py = y + h - ratio * h;
+      const label = Math.abs(value) >= 1000 ? `${(value / 1000).toFixed(0)}k` : value.toFixed(0);
+      ctx.fillText(label, x - 4, py);
+    }
+  }
+
+  // Category axis: category names along X-axis
+  if (chart.categories && chart.categories.length > 0) {
+    ctx.textAlign = "center";
+    ctx.textBaseline = "top";
+    const count = chart.categories.length;
+    for (let i = 0; i < count; i++) {
+      const px = x + (i + 0.5) / count * w;
+      ctx.fillText(chart.categories[i], px, y + h + 3, w / count - 2);
+    }
+  }
+
+  // Axis titles
+  if (chart.axes) {
+    const valueAxis = chart.axes.find((a) => a.type === "value");
+    const catAxis = chart.axes.find((a) => a.type === "category" || a.type === "date");
+
+    if (catAxis?.title) {
+      ctx.font = "10px -apple-system, sans-serif";
+      ctx.textAlign = "center";
+      ctx.textBaseline = "top";
+      ctx.fillText(catAxis.title, x + w / 2, y + h + 14, w);
+    }
+
+    if (valueAxis?.title) {
+      ctx.save();
+      ctx.font = "10px -apple-system, sans-serif";
+      ctx.textAlign = "center";
+      ctx.textBaseline = "bottom";
+      ctx.translate(x - 40, y + h / 2);
+      ctx.rotate(-Math.PI / 2);
+      ctx.fillText(valueAxis.title, 0, 0);
+      ctx.restore();
+    }
+  }
+}
+
+function adjustAlpha(color: string, alpha: number): string {
+  const match = color.match(/^#([0-9a-fA-F]{6})/);
+  if (match) {
+    const r = parseInt(match[1].slice(0, 2), 16);
+    const g = parseInt(match[1].slice(2, 4), 16);
+    const b = parseInt(match[1].slice(4, 6), 16);
+    return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+  }
+  return color;
+}
+
+function arrayMin(arr: number[]): number {
+  let min = arr[0] ?? 0;
+  for (let i = 1; i < arr.length; i++) if (arr[i] < min) min = arr[i];
+  return min;
+}
+
+function arrayMax(arr: number[]): number {
+  let max = arr[0] ?? 0;
+  for (let i = 1; i < arr.length; i++) if (arr[i] > max) max = arr[i];
+  return max;
+}