Revenue Chart Component

Component File: src/features/dashboard/components/RevenueChart.tsx Usage: Display donation trends on dashboard Access Level: All authenticated users Last Updated: February 14, 2026

---

Recent Updates (February 14, 2026)

Dynamic Goal Line for All Periods - Goal line now uses prior year seasonal weighting for ALL time periods (day/week/month/YTD/quarters/last-year), not just long periods. Period-specific smoothing factors dampen noise for short periods while preserving seasonal shape for longer ones.
Period-Specific Smoothing - Day (0.8), Week (0.7), Month (0.5), YTD/Quarters/Last Year (0.3). Higher = flatter/smoother, lower = tracks prior year shape more closely.
Weight Normalization Fix - Blended weights are now explicitly normalized to sum to 1.0, preventing floating-point drift.
Dead Code Cleanup - Removed unused smoothedWeight variable and misleading useSeasonalWeighting gate.

Previous Updates (January 13, 2026)

Period-Scaled Goals - Goal line scales to the current time period (quarterly = 25% of annual, monthly = 1/12, etc.)
Period-Specific Pace Status - "On Pace" / "Behind Pace" badge calculates progress relative to the current period, not the full year
Quarterly View Support - Q1-Q4 views correctly show 25% of annual goal distributed across 13 weeks
Chart Type Selector - Toggle between Line, Bar, and Area chart visualizations (persisted to localStorage)

---

Overview

The Revenue Chart component displays a line chart showing donation trends over time. It uses Recharts library to visualize donation data based on the selected time period (day, week, month, YTD, quarters). The chart updates dynamically when the user changes the organization or time period.

UI Features

Chart Display

Line, Bar, or Area chart (user-selectable, persisted to localStorage)
X-axis: Time labels (hours, days, weeks, months)
Y-axis: Donation amounts (formatted as currency)
Tooltip on hover showing exact values
Responsive sizing with crossfade animation between chart types
Goal line - Dashed green line showing period-scaled goal with prior year seasonal weighting
YoY comparison toggle - Overlay prior period data as dashed line

Time Period Options

Day - Hourly breakdown (24 hours)
Week - Daily breakdown (7 days)
Month - Daily breakdown (30 days)
YTD - Monthly breakdown (Jan to current month)
Last Year - Monthly breakdown (full previous year)
Q1/Q2/Q3/Q4 - Weekly breakdown (13 weeks per quarter)

Data Requirements

Chart Data Point

interface DonationTrendData {
  label: string;            // Time period label (hour, day, week, month)
  donations: number;        // Current period donation amount
  lastYearDonations: number; // Prior period donation amount (for YoY + goal weighting)
  cumulativeTotal: number;  // Running total for current period
  lastYearCumulative: number; // Running total for prior period
}

State Management

Global State (AppContext)

selectedEntity - Current organization
timePeriod - Selected time period
Mock data from getDonationsData(entityId, timePeriod)

Runtime

> Runtime: Use Supabase clients, database RPC, and edge functions (and Stripe for payments where applicable).

Goal Scaling Logic

Period Fractions

The annual goal is scaled to each time period:

| Period | Fraction of Annual Goal |

|--------|------------------------|

| Day | 1/365 |

| Week | 1/52 |

| Month | 1/12 |

| YTD | Days elapsed / 365 |

| Last Year | 100% |

| Q1-Q4 | 25% |

Pace Calculation

The "On Pace" / "Behind Pace" badge compares:

Current total (cumulative donations in the period)
Expected at this point (period goal × progress through period)

Example for Q1 (Jan 13, 2026):

Annual goal: $1,500,000
Q1 goal: $375,000 (25%)
Q1 progress: ~14% (13 days into 90-day quarter)
Expected: $52,500
If current total ≥ $52,500 → "On Pace"

Seasonality Weighting

The goal line uses prior year data to create a seasonally-weighted distribution:

If prior year had 40% of donations in December, December's goal is weighted higher
Period-specific smoothing prevents noise in short periods while preserving seasonal shape in longer ones
Falls back to even distribution if no prior year data exists

Smoothing Factors by Period

| Period | Smoothing | Effect |

|--------|-----------|--------|

| Day | 0.8 | 80% flat baseline + 20% seasonal shape (hourly patterns are very noisy) |

| Week | 0.7 | 70% flat baseline + 30% seasonal shape |

| Month | 0.5 | 50/50 blend of baseline and seasonal shape |

| YTD | 0.3 | 30% flat baseline + 70% seasonal shape (monthly patterns are meaningful) |

| Last Year | 0.3 | Same as YTD |

| Q1-Q4 | 0.3 | Same as YTD |

Weights are normalized after blending to ensure they sum to exactly 1.0, preventing the total goal amount from drifting due to floating-point arithmetic.

Dependencies

External Libraries

recharts - Chart rendering library
lucide-react - Icons

Ready to Get Started?

See how Alignmint can simplify your nonprofit's operations. Schedule a free demo with our team and we'll walk you through everything.

Schedule Your Free Demo Log In to Alignmint

Questions? Email us at steven@getalignmint.org