Added graph photos

2026-07-21 21:36:51 -04:00
parent 18fd76dc1f
commit 737a84a8b8
1 changed files with 43 additions and 0 deletions
@@ -6339,6 +6339,49 @@ function App() {
                        <title>{`${bird.name}: ${point.label}`}</title>
                      </circle>
                    ))}
+                    {points.length > 0 ? (() => {
+                      const latestPoint = points[points.length - 1];
+                      const portraitSize = 24;
+                      const portraitGap = 8;
+                      const portraitX = latestPoint.x + portraitGap + portraitSize <= OVERVIEW_WIDTH - 2
+                        ? latestPoint.x + portraitGap
+                        : latestPoint.x - portraitGap - portraitSize;
+                      const portraitY = Math.min(
+                        Math.max(latestPoint.y - portraitSize / 2, 2),
+                        OVERVIEW_HEIGHT - OVERVIEW_PADDING.bottom - portraitSize - 2,
+                      );
+                      const clipPathId = `overview-bird-portrait-${bird.id}`;
+
+                      return (
+                        <g className="overview-latest-portrait">
+                          <defs>
+                            <clipPath id={clipPathId}>
+                              <circle cx={portraitX + portraitSize / 2} cy={portraitY + portraitSize / 2} r={portraitSize / 2} />
+                            </clipPath>
+                          </defs>
+                          <image
+                            href={bird.photoDataUrl || defaultBirdPhoto}
+                            x={portraitX}
+                            y={portraitY}
+                            width={portraitSize}
+                            height={portraitSize}
+                            preserveAspectRatio="xMidYMid slice"
+                            clipPath={`url(#${clipPathId})`}
+                          >
+                            <title>{`${bird.name}'s latest weight: ${latestPoint.label}`}</title>
+                          </image>
+                          <circle
+                            cx={portraitX + portraitSize / 2}
+                            cy={portraitY + portraitSize / 2}
+                            r={portraitSize / 2}
+                            fill="none"
+                            stroke={bird.chartColor}
+                            strokeWidth="2.5"
+                            aria-hidden="true"
+                          />
+                        </g>
+                      );
+                    })() : null}
                  </g>
                ))}
              </svg>