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:
@@ -1,5 +1,8 @@
|
|||||||
import React, { useEffect, useRef } from 'react';
|
import React, { useEffect, useRef } from 'react';
|
||||||
import { gsap } from 'gsap';
|
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
|
* 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;
|
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 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, {
|
animationRef.current = gsap.to(obj, {
|
||||||
val: numericValue,
|
val: numericValue,
|
||||||
duration: duration,
|
duration: duration,
|
||||||
delay: delay,
|
delay: delay,
|
||||||
ease: 'expo.out',
|
ease: 'expo.out',
|
||||||
|
scrollTrigger: {
|
||||||
|
trigger: numberRef.current,
|
||||||
|
start: 'top 95%',
|
||||||
|
toggleActions: 'play none none none',
|
||||||
|
},
|
||||||
onUpdate: () => {
|
onUpdate: () => {
|
||||||
if (numberRef.current) {
|
if (numberRef.current) numberRef.current.textContent = formatValue(obj.val);
|
||||||
let displayValue = obj.val.toFixed(decimals);
|
|
||||||
|
|
||||||
if (useLocaleString) {
|
|
||||||
displayValue = parseFloat(displayValue).toLocaleString(undefined, {
|
|
||||||
minimumFractionDigits: decimals,
|
|
||||||
maximumFractionDigits: decimals
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
numberRef.current.textContent = `${extractedPrefix}${displayValue}${extractedSuffix}`;
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
onComplete: () => {
|
onComplete: () => {
|
||||||
// Ensure final value is exact
|
if (numberRef.current) numberRef.current.textContent = formatValue(numericValue);
|
||||||
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}`;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
+27
-24
@@ -731,35 +731,38 @@ const MOCK_USERS = [
|
|||||||
];
|
];
|
||||||
|
|
||||||
// --- NEW MOCK SALES HISTORY FOR LEADERBOARD ---
|
// --- 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 = [
|
const MOCK_SALES_HISTORY = [
|
||||||
// Frank Agent (High Revenue, Low Volume - "The Sniper")
|
// Frank Agent (High Revenue, Low Volume - "The Sniper") — fewer deals, bigger jobs
|
||||||
{ id: 'tx_1', agentId: 'e1', date: '2026-02-10', amount: 450000, status: 'closed_won' },
|
{ id: 'tx_1', agentId: 'e1', date: '2026-03-19', amount: 38500, status: 'closed_won' }, // this week
|
||||||
{ id: 'tx_2', agentId: 'e1', date: '2026-02-05', amount: 520000, status: 'closed_won' },
|
{ id: 'tx_2', agentId: 'e1', date: '2026-03-12', amount: 42000, status: 'closed_won' },
|
||||||
{ id: 'tx_3', agentId: 'e1', date: '2026-01-28', amount: 380000, status: 'closed_won' },
|
{ id: 'tx_3', agentId: 'e1', date: '2026-03-06', amount: 31800, status: 'closed_won' },
|
||||||
{ id: 'tx_4', agentId: 'e1', date: '2026-02-01', amount: 0, status: 'closed_lost' }, // Lost deal
|
{ id: 'tx_4', agentId: 'e1', date: '2026-03-03', amount: 0, status: 'closed_lost' },
|
||||||
|
|
||||||
// Fiona Field (High Volume, Mid Revenue - "The Grinder")
|
// Fiona Field (High Volume, Mid Revenue - "The Grinder") — more deals, consistent value
|
||||||
{ id: 'tx_5', agentId: 'e2', date: '2026-02-09', amount: 250000, status: 'closed_won' },
|
{ id: 'tx_5', agentId: 'e2', date: '2026-03-17', amount: 18200, status: 'closed_won' }, // this week
|
||||||
{ id: 'tx_6', agentId: 'e2', date: '2026-02-08', amount: 240000, status: 'closed_won' },
|
{ id: 'tx_6', agentId: 'e2', date: '2026-03-16', amount: 16800, status: 'closed_won' }, // this week
|
||||||
{ id: 'tx_7', agentId: 'e2', date: '2026-02-06', amount: 260000, status: 'closed_won' },
|
{ id: 'tx_7', agentId: 'e2', date: '2026-03-11', amount: 21400, status: 'closed_won' },
|
||||||
{ id: 'tx_8', agentId: 'e2', date: '2026-01-30', amount: 230000, status: 'closed_won' },
|
{ id: 'tx_8', agentId: 'e2', date: '2026-03-08', amount: 19600, status: 'closed_won' },
|
||||||
{ id: 'tx_9', agentId: 'e2', date: '2026-02-02', amount: 255000, status: 'closed_won' },
|
{ id: 'tx_9', agentId: 'e2', date: '2026-03-05', amount: 17300, status: 'closed_won' },
|
||||||
{ id: 'tx_10', agentId: 'e2', date: '2026-01-25', amount: 0, status: 'closed_lost' },
|
{ id: 'tx_10', agentId: 'e2', date: '2026-03-02', amount: 0, status: 'closed_lost' },
|
||||||
{ id: 'tx_11', agentId: 'e2', date: '2026-01-20', amount: 0, status: 'closed_lost' },
|
{ id: 'tx_11', agentId: 'e2', date: '2026-03-01', amount: 0, status: 'closed_lost' },
|
||||||
|
|
||||||
// Fred Flyer (New/Low Performance)
|
// Fred Flyer (New/Low Performance) — one close this month, struggling
|
||||||
{ id: 'tx_12', agentId: 'e3', date: '2026-02-07', amount: 180000, status: 'closed_won' },
|
{ id: 'tx_12', agentId: 'e3', date: '2026-03-18', amount: 12400, status: 'closed_won' }, // this week
|
||||||
{ id: 'tx_13', agentId: 'e3', date: '2026-02-03', amount: 0, status: 'closed_lost' },
|
{ id: 'tx_13', agentId: 'e3', date: '2026-03-09', amount: 0, status: 'closed_lost' },
|
||||||
{ id: 'tx_14', agentId: 'e3', date: '2026-01-29', amount: 0, status: 'closed_lost' },
|
{ id: 'tx_14', agentId: 'e3', date: '2026-03-04', amount: 0, status: 'closed_lost' },
|
||||||
|
|
||||||
// Felicity Fast (Consistent)
|
// Felicity Fast (Consistent) — reliable mid-tier producer
|
||||||
{ id: 'tx_15', agentId: 'e4', date: '2026-02-10', amount: 310000, status: 'closed_won' },
|
{ id: 'tx_15', agentId: 'e4', date: '2026-03-15', amount: 24800, status: 'closed_won' }, // this week
|
||||||
{ id: 'tx_16', agentId: 'e4', date: '2026-02-04', amount: 305000, status: 'closed_won' },
|
{ id: 'tx_16', agentId: 'e4', date: '2026-03-10', amount: 23200, status: 'closed_won' },
|
||||||
{ id: 'tx_17', agentId: 'e4', date: '2026-01-27', amount: 295000, status: 'closed_won' },
|
{ id: 'tx_17', agentId: 'e4', date: '2026-03-07', amount: 26500, status: 'closed_won' },
|
||||||
|
|
||||||
// Felix Fixer (Closer - High Win Rate)
|
// Felix Fixer (Closer - High Win Rate) — doesn't lose, picks his battles
|
||||||
{ id: 'tx_18', agentId: 'e5', date: '2026-02-08', amount: 410000, status: 'closed_won' },
|
{ id: 'tx_18', agentId: 'e5', date: '2026-03-20', amount: 29500, status: 'closed_won' }, // this week
|
||||||
{ id: 'tx_19', agentId: 'e5', date: '2026-02-01', amount: 390000, status: 'closed_won' },
|
{ id: 'tx_19', agentId: 'e5', date: '2026-03-11', amount: 34800, status: 'closed_won' },
|
||||||
];
|
];
|
||||||
|
|
||||||
// Helper to generate meetings
|
// Helper to generate meetings
|
||||||
|
|||||||
@@ -58,7 +58,7 @@ const LeaderboardPage = () => {
|
|||||||
}, [agents, salesHistory, timeframe, metric]);
|
}, [agents, salesHistory, timeframe, metric]);
|
||||||
|
|
||||||
const formatValue = (val, type) => {
|
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 === 'volume') return `${val} Deals`;
|
||||||
if (type === 'winRate') return `${val.toFixed(1)}%`;
|
if (type === 'winRate') return `${val.toFixed(1)}%`;
|
||||||
return val;
|
return val;
|
||||||
|
|||||||
Reference in New Issue
Block a user