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

Updated bird profile view

Browse Source
This commit is contained in:
blaisadmin
2026-05-20 17:38:16 -04:00
parent 7514c7c306
commit f2c506ec16
2 changed files with 57 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/App.tsx
+46 -15
View File
@@ -1500,6 +1500,7 @@ function App() {
const hasSelectedBirdLine = selectedBirdChart.points.length >= 2 && selectedBirdChart.path.length > 0;
const hasSelectedBirdHistoricalLine = selectedBirdChart.historicalPoints.length >= 2 && selectedBirdChart.historicalPath.length > 0;
const selectedBirdLatestChartPoint = selectedBirdChart.points[selectedBirdChart.points.length - 1] ?? null;
const flockWeeklyTrendItems = useMemo(() => {
return birds
@@ -4281,18 +4282,6 @@ function App() {
<span>Species</span>
<strong>{selectedBird.species}</strong>
</article>
<article className="detail-card">
<span>Favorite snack</span>
<strong>{selectedBird.favoriteSnack || 'Not recorded'}</strong>
</article>
<article className="detail-card">
<span>Motivators</span>
<strong>{selectedBird.motivators || 'Not recorded'}</strong>
</article>
<article className="detail-card">
<span>Demotivates</span>
<strong>{selectedBird.demotivators || 'Not recorded'}</strong>
</article>
<article className="detail-card">
<span>Gender</span>
<strong className="detail-gender">
@@ -4303,8 +4292,16 @@ function App() {
</strong>
</article>
<article className="detail-card">
<span>Latest weight</span>
<strong>{formatWeight(selectedBird.latestWeightGrams)}</strong>
<span>Favorite snack</span>
<strong>{selectedBird.favoriteSnack || 'Not recorded'}</strong>
</article>
<article className="detail-card">
<span>Motivators</span>
<strong>{selectedBird.motivators || 'Not recorded'}</strong>
</article>
<article className="detail-card">
<span>Demotivators</span>
<strong>{selectedBird.demotivators || 'Not recorded'}</strong>
</article>
</div>
@@ -4315,7 +4312,10 @@ function App() {
<p className="eyebrow">Weight</p>
<h2>Trend and log</h2>
</div>
<p className="muted">Latest reading: {formatShortDate(selectedBird.latestRecordedOn)}</p>
<p className="muted">
Latest: {formatWeight(selectedBird.latestWeightGrams)}
{selectedBird.latestRecordedOn ? ` on ${formatShortDate(selectedBird.latestRecordedOn)}` : ''}
</p>
</div>
<div className="chart-card">
<svg
@@ -4417,6 +4417,37 @@ function App() {
<title>{point.label}</title>
</circle>
))}
{selectedBirdLatestChartPoint ? (
<g
className="latest-weight-callout"
transform={`translate(${
selectedBirdLatestChartPoint.x > MEMBER_CHART_WIDTH - MEMBER_CHART_PADDING.right - 115
? selectedBirdLatestChartPoint.x - 10
: selectedBirdLatestChartPoint.x + 10
} ${
selectedBirdLatestChartPoint.y < MEMBER_CHART_PADDING.top + 18
? selectedBirdLatestChartPoint.y + 26
: selectedBirdLatestChartPoint.y - 18
})`}
>
<rect
x={selectedBirdLatestChartPoint.x > MEMBER_CHART_WIDTH - MEMBER_CHART_PADDING.right - 115 ? -104 : 0}
y="-14"
width="104"
height="24"
rx="6"
/>
<text
x={selectedBirdLatestChartPoint.x > MEMBER_CHART_WIDTH - MEMBER_CHART_PADDING.right - 115 ? -10 : 10}
y="2"
textAnchor={
selectedBirdLatestChartPoint.x > MEMBER_CHART_WIDTH - MEMBER_CHART_PADDING.right - 115 ? 'end' : 'start'
}
>
Latest {formatWeight(selectedBird.latestWeightGrams)}
</text>
</g>
) : null}
</svg>
<div className="chart-footer">
<p>{selectedBirdTrendCopy}</p>
frontend/src/index.css
+11
View File
@@ -892,6 +892,17 @@ textarea {
font-size: 11px;
}
.latest-weight-callout rect {
fill: rgba(255, 253, 249, 0.94);
stroke: rgba(31, 42, 42, 0.16);
}
.latest-weight-callout text {
fill: var(--text);
font-size: 11px;
font-weight: 700;
}
.historical-weight-line,
.historical-weight-dot {
opacity: 0.48;