blaisadmin/FlockPal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

changed portrait shape
Deploy / deploy-dev (push) Successful in 2m23s
Details
Deploy / deploy-prod (push) Skipped
Details

Browse Source
This commit is contained in:
blaisadmin
2026-07-21 22:14:27 -04:00
parent 737a84a8b8
commit a6eac3009d
4 changed files with 49 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/App.tsx
+27 -20
View File
@@ -184,6 +184,7 @@ type AdminSummary = {
rescueBirds: number;
pendingRescues: number;
dailyUsers: number;
subscriptionsByPlan: Record<HouseholdBillingPlan, number>;
};
type AdminRescueWorkspace = {
@@ -1540,7 +1541,7 @@ const OVERVIEW_WINDOW_DAYS = 30;
const OVERVIEW_HISTORY_DAYS = 425;
const OVERVIEW_WIDTH = 520;
const OVERVIEW_HEIGHT = 220;
const OVERVIEW_PADDING = { top: 20, right: 18, bottom: 36, left: 52 };
const OVERVIEW_PADDING = { top: 48, right: 18, bottom: 36, left: 52 };
const PHOTO_MAX_BYTES = 900_000;
const PHOTO_EXPORT_SIZES = [720, 600, 480];
const PHOTO_EXPORT_QUALITIES = [0.9, 0.82, 0.74, 0.66];
@@ -6341,42 +6342,42 @@ function App() {
))}
{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 pointerRadius = 13;
const pointerCenterY = latestPoint.y - 21;
const pointerTop = pointerCenterY - pointerRadius;
const pointerPath = [
`M ${latestPoint.x} ${latestPoint.y}`,
`C ${latestPoint.x - 2.5} ${latestPoint.y - 5}, ${latestPoint.x - pointerRadius} ${latestPoint.y - 13}, ${latestPoint.x - pointerRadius} ${pointerCenterY}`,
`A ${pointerRadius} ${pointerRadius} 0 1 1 ${latestPoint.x + pointerRadius} ${pointerCenterY}`,
`C ${latestPoint.x + pointerRadius} ${latestPoint.y - 13}, ${latestPoint.x + 2.5} ${latestPoint.y - 5}, ${latestPoint.x} ${latestPoint.y}`,
'Z',
].join(' ');
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} />
<path d={pointerPath} />
</clipPath>
</defs>
<image
href={bird.photoDataUrl || defaultBirdPhoto}
x={portraitX}
y={portraitY}
width={portraitSize}
height={portraitSize}
x={latestPoint.x - pointerRadius}
y={pointerTop}
width={pointerRadius * 2}
height={latestPoint.y - pointerTop}
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}
<path
d={pointerPath}
fill="none"
stroke={bird.chartColor}
strokeWidth="2.5"
strokeWidth="2"
strokeLinejoin="round"
aria-hidden="true"
/>
</g>
@@ -6589,6 +6590,12 @@ function App() {
<span>Pending rescues</span>
<strong>{adminSummary?.pendingRescues ?? '-'}</strong>
</article>
{(['household_basic', 'household_plus', 'household_macaw', 'household_hyacinth_macaw'] as const).map((billingPlan) => (
<article className="summary-card" key={billingPlan}>
<span>{formatBillingPlanName(billingPlan)} subscriptions</span>
<strong>{adminSummary?.subscriptionsByPlan?.[billingPlan] ?? '-'}</strong>
</article>
))}
</div>
</article>