fix(leaderboard): fix counter animation and number formatting
- AnimatedNumber: add ScrollTrigger so counters animate on scroll-into-view instead of firing immediately on mount (fixes table rows animating before the user scrolls to them) - AnimatedNumber: lock locale to 'en-US' for consistent comma formatting - LeaderboardPage: lock formatValue locale to 'en-US' - mockStore: update MOCK_SALES_HISTORY dates from Jan/Feb to March 2026 so the default "This Month" filter returns data; previous dates caused all agents to show $0 revenue, making the animation appear broken - mockStore: replace unrealistic amounts ($250K–$520K) with realistic residential roofing job values ($12K–$42K per deal)
This commit is contained in:
Satyam
@@ -1,5 +1,8 @@
|
||||
import React, { useEffect, useRef } from 'react';
|
||||
import { gsap } from 'gsap';
|
||||
import { ScrollTrigger } from 'gsap/ScrollTrigger';
|
||||
|
||||
gsap.registerPlugin(ScrollTrigger);
|
||||
|
||||
/**
|
||||
* AnimatedNumber - A reusable component that animates numbers from 0 to their target value using GSAP
|
||||
@@ -64,42 +67,35 @@ const AnimatedNumber = ({
|
||||
|
||||
const targetValue = numericValue * multiplier;
|
||||
|
||||
// Animate from 0 to target value
|
||||
// Animate from 0 to target value, triggered when element scrolls into view
|
||||
const obj = { val: 0 };
|
||||
|
||||
const formatValue = (v) => {
|
||||
let displayValue = v.toFixed(decimals);
|
||||
if (useLocaleString) {
|
||||
displayValue = parseFloat(displayValue).toLocaleString('en-US', {
|
||||
minimumFractionDigits: decimals,
|
||||
maximumFractionDigits: decimals
|
||||
});
|
||||
}
|
||||
return `${extractedPrefix}${displayValue}${extractedSuffix}`;
|
||||
};
|
||||
|
||||
animationRef.current = gsap.to(obj, {
|
||||
val: numericValue,
|
||||
duration: duration,
|
||||
delay: delay,
|
||||
ease: 'expo.out',
|
||||
scrollTrigger: {
|
||||
trigger: numberRef.current,
|
||||
start: 'top 95%',
|
||||
toggleActions: 'play none none none',
|
||||
},
|
||||
onUpdate: () => {
|
||||
if (numberRef.current) {
|
||||
let displayValue = obj.val.toFixed(decimals);
|
||||
|
||||
if (useLocaleString) {
|
||||
displayValue = parseFloat(displayValue).toLocaleString(undefined, {
|
||||
minimumFractionDigits: decimals,
|
||||
maximumFractionDigits: decimals
|
||||
});
|
||||
}
|
||||
|
||||
numberRef.current.textContent = `${extractedPrefix}${displayValue}${extractedSuffix}`;
|
||||
}
|
||||
if (numberRef.current) numberRef.current.textContent = formatValue(obj.val);
|
||||
},
|
||||
onComplete: () => {
|
||||
// Ensure final value is exact
|
||||
if (numberRef.current) {
|
||||
let displayValue = numericValue.toFixed(decimals);
|
||||
|
||||
if (useLocaleString) {
|
||||
displayValue = parseFloat(displayValue).toLocaleString(undefined, {
|
||||
minimumFractionDigits: decimals,
|
||||
maximumFractionDigits: decimals
|
||||
});
|
||||
}
|
||||
|
||||
numberRef.current.textContent = `${extractedPrefix}${displayValue}${extractedSuffix}`;
|
||||
}
|
||||
if (numberRef.current) numberRef.current.textContent = formatValue(numericValue);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
+27
-24
@@ -731,35 +731,38 @@ const MOCK_USERS = [
|
||||
];
|
||||
|
||||
// --- NEW MOCK SALES HISTORY FOR LEADERBOARD ---
|
||||
// Dates are in March 2026 (current month) so the default "This Month" filter shows data.
|
||||
// A subset also falls in the current week (Mar 15-21) for the "This Week" filter.
|
||||
// Amounts reflect residential storm-damage roofing jobs ($12K–$42K per deal).
|
||||
const MOCK_SALES_HISTORY = [
|
||||
// Frank Agent (High Revenue, Low Volume - "The Sniper")
|
||||
{ id: 'tx_1', agentId: 'e1', date: '2026-02-10', amount: 450000, status: 'closed_won' },
|
||||
{ id: 'tx_2', agentId: 'e1', date: '2026-02-05', amount: 520000, status: 'closed_won' },
|
||||
{ id: 'tx_3', agentId: 'e1', date: '2026-01-28', amount: 380000, status: 'closed_won' },
|
||||
{ id: 'tx_4', agentId: 'e1', date: '2026-02-01', amount: 0, status: 'closed_lost' }, // Lost deal
|
||||
// Frank Agent (High Revenue, Low Volume - "The Sniper") — fewer deals, bigger jobs
|
||||
{ id: 'tx_1', agentId: 'e1', date: '2026-03-19', amount: 38500, status: 'closed_won' }, // this week
|
||||
{ id: 'tx_2', agentId: 'e1', date: '2026-03-12', amount: 42000, status: 'closed_won' },
|
||||
{ id: 'tx_3', agentId: 'e1', date: '2026-03-06', amount: 31800, status: 'closed_won' },
|
||||
{ id: 'tx_4', agentId: 'e1', date: '2026-03-03', amount: 0, status: 'closed_lost' },
|
||||
|
||||
// Fiona Field (High Volume, Mid Revenue - "The Grinder")
|
||||
{ id: 'tx_5', agentId: 'e2', date: '2026-02-09', amount: 250000, status: 'closed_won' },
|
||||
{ id: 'tx_6', agentId: 'e2', date: '2026-02-08', amount: 240000, status: 'closed_won' },
|
||||
{ id: 'tx_7', agentId: 'e2', date: '2026-02-06', amount: 260000, status: 'closed_won' },
|
||||
{ id: 'tx_8', agentId: 'e2', date: '2026-01-30', amount: 230000, status: 'closed_won' },
|
||||
{ id: 'tx_9', agentId: 'e2', date: '2026-02-02', amount: 255000, status: 'closed_won' },
|
||||
{ id: 'tx_10', agentId: 'e2', date: '2026-01-25', amount: 0, status: 'closed_lost' },
|
||||
{ id: 'tx_11', agentId: 'e2', date: '2026-01-20', amount: 0, status: 'closed_lost' },
|
||||
// Fiona Field (High Volume, Mid Revenue - "The Grinder") — more deals, consistent value
|
||||
{ id: 'tx_5', agentId: 'e2', date: '2026-03-17', amount: 18200, status: 'closed_won' }, // this week
|
||||
{ id: 'tx_6', agentId: 'e2', date: '2026-03-16', amount: 16800, status: 'closed_won' }, // this week
|
||||
{ id: 'tx_7', agentId: 'e2', date: '2026-03-11', amount: 21400, status: 'closed_won' },
|
||||
{ id: 'tx_8', agentId: 'e2', date: '2026-03-08', amount: 19600, status: 'closed_won' },
|
||||
{ id: 'tx_9', agentId: 'e2', date: '2026-03-05', amount: 17300, status: 'closed_won' },
|
||||
{ id: 'tx_10', agentId: 'e2', date: '2026-03-02', amount: 0, status: 'closed_lost' },
|
||||
{ id: 'tx_11', agentId: 'e2', date: '2026-03-01', amount: 0, status: 'closed_lost' },
|
||||
|
||||
// Fred Flyer (New/Low Performance)
|
||||
{ id: 'tx_12', agentId: 'e3', date: '2026-02-07', amount: 180000, status: 'closed_won' },
|
||||
{ id: 'tx_13', agentId: 'e3', date: '2026-02-03', amount: 0, status: 'closed_lost' },
|
||||
{ id: 'tx_14', agentId: 'e3', date: '2026-01-29', amount: 0, status: 'closed_lost' },
|
||||
// Fred Flyer (New/Low Performance) — one close this month, struggling
|
||||
{ id: 'tx_12', agentId: 'e3', date: '2026-03-18', amount: 12400, status: 'closed_won' }, // this week
|
||||
{ id: 'tx_13', agentId: 'e3', date: '2026-03-09', amount: 0, status: 'closed_lost' },
|
||||
{ id: 'tx_14', agentId: 'e3', date: '2026-03-04', amount: 0, status: 'closed_lost' },
|
||||
|
||||
// Felicity Fast (Consistent)
|
||||
{ id: 'tx_15', agentId: 'e4', date: '2026-02-10', amount: 310000, status: 'closed_won' },
|
||||
{ id: 'tx_16', agentId: 'e4', date: '2026-02-04', amount: 305000, status: 'closed_won' },
|
||||
{ id: 'tx_17', agentId: 'e4', date: '2026-01-27', amount: 295000, status: 'closed_won' },
|
||||
// Felicity Fast (Consistent) — reliable mid-tier producer
|
||||
{ id: 'tx_15', agentId: 'e4', date: '2026-03-15', amount: 24800, status: 'closed_won' }, // this week
|
||||
{ id: 'tx_16', agentId: 'e4', date: '2026-03-10', amount: 23200, status: 'closed_won' },
|
||||
{ id: 'tx_17', agentId: 'e4', date: '2026-03-07', amount: 26500, status: 'closed_won' },
|
||||
|
||||
// Felix Fixer (Closer - High Win Rate)
|
||||
{ id: 'tx_18', agentId: 'e5', date: '2026-02-08', amount: 410000, status: 'closed_won' },
|
||||
{ id: 'tx_19', agentId: 'e5', date: '2026-02-01', amount: 390000, status: 'closed_won' },
|
||||
// Felix Fixer (Closer - High Win Rate) — doesn't lose, picks his battles
|
||||
{ id: 'tx_18', agentId: 'e5', date: '2026-03-20', amount: 29500, status: 'closed_won' }, // this week
|
||||
{ id: 'tx_19', agentId: 'e5', date: '2026-03-11', amount: 34800, status: 'closed_won' },
|
||||
];
|
||||
|
||||
// Helper to generate meetings
|
||||
|
||||
@@ -58,7 +58,7 @@ const LeaderboardPage = () => {
|
||||
}, [agents, salesHistory, timeframe, metric]);
|
||||
|
||||
const formatValue = (val, type) => {
|
||||
if (type === 'revenue') return `$${val.toLocaleString()}`;
|
||||
if (type === 'revenue') return `$${val.toLocaleString('en-US')}`;
|
||||
if (type === 'volume') return `${val} Deals`;
|
||||
if (type === 'winRate') return `${val.toFixed(1)}%`;
|
||||
return val;
|
||||
|
||||
Reference in New Issue
Block a user