TemplateStandards
Impact Stats pattern
Publish lifetime rescue impact numbers as big-number tiles, with an optional bar chart once a site has two or more reporting periods to compare.
Lifetime totals
The always-on section — a flexible list of stat tiles. Each site supplies whichever categories actually apply to it (adopted, fostered, spayed/neutered, transferred, strays fed, or anything else); nothing is hard-coded.
Here's the impact our community has made so far.
Period-by-period trend
Optional. Supply 2+ periods (monthly, quarterly, every 6 months, or yearly — the period label is freeform) and a bar chart renders automatically.
Dogs adopted vs. fostered by year
A single period
With only one period, a bar chart couldn't show a trend, so the component falls back to a plain value list instead.
2026
- 480Adopted
- 140Fostered
Standard
- The metric list is flexible, not fixed — lifetimeStats is just an array of {id, value, label, icon?}. Pick whichever categories your rescue actually tracks.
- Lifetime tiles render whenever the lifetime stats list is non-empty. This is deliberate: research on real, reputable foster-based rescues shows they report simple lifetime totals far more often than period dashboards.
- Only display this section once you have at least one or two meaningful lifetime numbers you can stand behind — a very new rescue shouldn't feel pressure to publish zeros or incomplete data just to have the section present. The component already renders nothing at all until lifetimeStats (or periods) has real content, so there's no placeholder state to accidentally ship.
- The bar chart only renders with 2+ periods — a single period renders as a plain value list instead, since one bar can't show a trend.
- Never fabricate or estimate a number for this component. If a real count isn't available yet, omit that stat entirely rather than showing a placeholder zero.
- For consistency across the fleet, prefer plain, concrete labels over abstract ones — e.g. "Dogs Adopted" rather than "Adoptions," "Dogs Fostered" rather than "Fosters." Recommended starting vocabulary: Dogs Adopted, Dogs Fostered, Animals Helped, Spay/Neuter Surgeries, Transferred to Partner Rescues, Strays Fed, Volunteers, Donations Received, Grants Received. Sites aren't required to use these exact strings, but reusing them where they fit keeps the network's public pages feeling like one cohesive program.
- An optional timeframeNote line (e.g. "Since 2024" or "As of July 2026") renders next to granularityLabel — small, plain text, not used for any date math. Useful for newer organizations to add context and credibility to their numbers.
- An optional one-sentence description above the tiles (e.g. "Here's the impact our community has made so far.") softens the raw numbers with a little emotional framing — this is exactly what the existing description prop is for, not a separate slot.
- The tile grid is 2-across on mobile, stepping up to 3-across at the sm breakpoint and 6-across at lg — stacks cleanly regardless of how many stats a site supplies, including the example above.
- Chart implementation reuses the fleet's existing recharts dependency via the shared ui/chart.tsx wrapper — no new dependency was added.
- Component: template/src/components/patterns/ImpactStatsSection.tsx