fix(storm-intel): force en-US digit grouping on homes/area/revenue figures

This commit is contained in:
Satyam Rastogi
2026-05-30 05:01:43 +05:30
parent 6cbb1d729c
commit 6f175f4498
+6 -6
View File
@@ -672,7 +672,7 @@ const StormCard = ({ storm, isSelected, isPinned, onSelect, onTogglePin, distanc
<div className="flex items-center gap-1 mt-1.5"> <div className="flex items-center gap-1 mt-1.5">
<Home size={10} className="text-zinc-400" /> <Home size={10} className="text-zinc-400" />
<span className="text-[10px] text-zinc-400"> <span className="text-[10px] text-zinc-400">
~{storm.estimatedHomes.toLocaleString()} homes affected ~{storm.estimatedHomes.toLocaleString('en-US')} homes affected
</span> </span>
</div> </div>
)} )}
@@ -871,14 +871,14 @@ const StormDetailDrawer = ({ storm, open, onClose, onFlyTo, onAssignZone, canMan
{storm.areaSqMi > 0 && ( {storm.areaSqMi > 0 && (
<div className="rounded-xl bg-zinc-50 dark:bg-zinc-800/60 border border-zinc-100 dark:border-white/[0.06] p-3"> <div className="rounded-xl bg-zinc-50 dark:bg-zinc-800/60 border border-zinc-100 dark:border-white/[0.06] p-3">
<p className="text-[10px] font-bold uppercase tracking-wider text-zinc-400 mb-1">Warning Area</p> <p className="text-[10px] font-bold uppercase tracking-wider text-zinc-400 mb-1">Warning Area</p>
<p className="text-xl font-black text-zinc-900 dark:text-white">{storm.areaSqMi.toLocaleString()}</p> <p className="text-xl font-black text-zinc-900 dark:text-white">{storm.areaSqMi.toLocaleString('en-US')}</p>
<p className="text-[10px] text-zinc-400">sq miles covered</p> <p className="text-[10px] text-zinc-400">sq miles covered</p>
</div> </div>
)} )}
{storm.estimatedHomes > 0 && ( {storm.estimatedHomes > 0 && (
<div className="rounded-xl bg-zinc-50 dark:bg-zinc-800/60 border border-zinc-100 dark:border-white/[0.06] p-3"> <div className="rounded-xl bg-zinc-50 dark:bg-zinc-800/60 border border-zinc-100 dark:border-white/[0.06] p-3">
<p className="text-[10px] font-bold uppercase tracking-wider text-zinc-400 mb-1">Est. Homes Affected</p> <p className="text-[10px] font-bold uppercase tracking-wider text-zinc-400 mb-1">Est. Homes Affected</p>
<p className="text-xl font-black text-zinc-900 dark:text-white">{storm.estimatedHomes.toLocaleString()}</p> <p className="text-xl font-black text-zinc-900 dark:text-white">{storm.estimatedHomes.toLocaleString('en-US')}</p>
<p className="text-[10px] text-zinc-400"> <p className="text-[10px] text-zinc-400">
~{storm.damagePct}% damage probability ~{storm.damagePct}% damage probability
</p> </p>
@@ -1129,7 +1129,7 @@ const AttributionView = ({ events, sessionLeads }) => {
</div> </div>
<div className="text-right shrink-0"> <div className="text-right shrink-0">
<p className="text-lg font-black text-zinc-900 dark:text-white"> <p className="text-lg font-black text-zinc-900 dark:text-white">
{item.revenue > 0 ? `$${item.revenue.toLocaleString()}` : '—'} {item.revenue > 0 ? `$${item.revenue.toLocaleString('en-US')}` : '—'}
</p> </p>
<p className="text-[10px] text-zinc-400">revenue</p> <p className="text-[10px] text-zinc-400">revenue</p>
</div> </div>
@@ -1181,7 +1181,7 @@ const AttributionView = ({ events, sessionLeads }) => {
<div> <div>
<p className="text-[12px] font-black uppercase tracking-wider text-emerald-700 dark:text-emerald-400 mb-0.5">Top Performing Zone</p> <p className="text-[12px] font-black uppercase tracking-wider text-emerald-700 dark:text-emerald-400 mb-0.5">Top Performing Zone</p>
<p className="text-[13px] text-zinc-700 dark:text-zinc-300 font-semibold"> <p className="text-[13px] text-zinc-700 dark:text-zinc-300 font-semibold">
{perStorm[0].storm.areaName} generated ${perStorm[0].revenue.toLocaleString()} from {perStorm[0].closedCount} closed deal{perStorm[0].closedCount !== 1 ? 's' : ''} ({perStorm[0].conversionRate}% conversion). {perStorm[0].storm.areaName} generated ${perStorm[0].revenue.toLocaleString('en-US')} from {perStorm[0].closedCount} closed deal{perStorm[0].closedCount !== 1 ? 's' : ''} ({perStorm[0].conversionRate}% conversion).
{perStorm[0].pipeline > 0 && ` $${(perStorm[0].pipeline / 1000).toFixed(0)}k more in pipeline.`} {perStorm[0].pipeline > 0 && ` $${(perStorm[0].pipeline / 1000).toFixed(0)}k more in pipeline.`}
</p> </p>
</div> </div>
@@ -1482,7 +1482,7 @@ const StormIntelPage = () => {
<div className="text-right" title={pinnedHomes !== null ? 'Sum of est. damaged homes across pinned events — zones may overlap' : 'Pin events to see estimated homes affected'}> <div className="text-right" title={pinnedHomes !== null ? 'Sum of est. damaged homes across pinned events — zones may overlap' : 'Pin events to see estimated homes affected'}>
<p className={`text-xl font-black ${pinnedHomes !== null ? 'text-amber-500' : 'text-zinc-400'}`}> <p className={`text-xl font-black ${pinnedHomes !== null ? 'text-amber-500' : 'text-zinc-400'}`}>
{pinnedHomes !== null {pinnedHomes !== null
? (pinnedHomes >= 1000 ? `${(pinnedHomes / 1000).toFixed(1)}k` : pinnedHomes.toLocaleString()) ? (pinnedHomes >= 1000 ? `${(pinnedHomes / 1000).toFixed(1)}k` : pinnedHomes.toLocaleString('en-US'))
: '—' : '—'
} }
</p> </p>