Separate pitcher plot legend panel

src/baseball-charts.js

@@ -831,21 +831,39 @@ async function createPitcherLocationPlotPng(payload = {}) {
 
   const notesX = plotX + plotWidth + 28;
   const notesWidth = boardX + boardWidth - notesX - 28;
+  drawPanel(ctx, notesX, plotY, notesWidth, 148, 18);
+  ctx.fillStyle = TEXT.title;
+  ctx.font = 'bold 18px sans-serif';
+  ctx.fillText('Legend', notesX + 18, plotY + 30);
+
+  let legendY = plotY + 58;
+  for (const item of (payload.pitchBreakdown ?? []).slice(0, 6)) {
+    const color = pitchColors.get(item.pitchName) ?? '#ffffff';
+    ctx.fillStyle = color;
+    ctx.beginPath();
+    ctx.arc(notesX + 20, legendY, 6, 0, Math.PI * 2);
+    ctx.fill();
+    ctx.fillStyle = TEXT.subtitle;
+    ctx.font = '14px sans-serif';
+    ctx.fillText(`${item.pitchName} (${item.pct.toFixed(0)}%)`, notesX + 36, legendY + 4);
+    legendY += 22;
+  }
+
   drawMiniSummary(
     ctx,
     notesX,
-    plotY,
+    plotY + 170,
     notesWidth,
-    122,
+    110,
     'How To Read',
     'Each dot is one pitch at its plate location. Colors identify pitch types so you can see how the arsenal is spread in and around the zone.'
   );
   drawMiniSummary(
     ctx,
     notesX,
-    plotY + 144,
+    plotY + 302,
     notesWidth,
-    170,
+    150,
     'Pitch Mix',
     (payload.pitchBreakdown ?? []).length
       ? payload.pitchBreakdown.map((item) => `${item.pitchName}: ${item.count} pitches (${item.pct.toFixed(0)}%)`).join(' | ')
@@ -854,26 +872,13 @@ async function createPitcherLocationPlotPng(payload = {}) {
   drawMiniSummary(
     ctx,
     notesX,
-    plotY + 336,
+    plotY + 474,
     notesWidth,
-    122,
+    98,
     'Read',
     payload.read ?? 'This chart shows where each pitch type actually finishes at the plate.'
   );
 
-  let legendY = plotY + 16;
-  for (const item of (payload.pitchBreakdown ?? []).slice(0, 6)) {
-    const color = pitchColors.get(item.pitchName) ?? '#ffffff';
-    ctx.fillStyle = color;
-    ctx.beginPath();
-    ctx.arc(notesX + 18, legendY, 6, 0, Math.PI * 2);
-    ctx.fill();
-    ctx.fillStyle = TEXT.subtitle;
-    ctx.font = '14px sans-serif';
-    ctx.fillText(item.pitchName, notesX + 34, legendY + 4);
-    legendY += 24;
-  }
-
   return canvas.toBuffer('png');
 }