github-such-software/smirk-website
1
0
Fork 0
mirror of https://github.com/Such-Software/smirk-website.git synced 2026-10-17 05:51:28 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: improve favorite login coin chart with colors and hover

Browse Source 
- Update colors: BTC orange, LTC silver, XMR grey, WOW pink, GRIN yellow
- Add hover effects showing login counts and percentages
- Add total logins summary at bottom
- Only show section when there's data
This commit is contained in:
jwinterm
2026-02-01 19:35:18 -05:00
parent f8c689fd72
commit f277d428f7
1 changed files with 38 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/stats/page.tsx
+19 -12
View File
@@ -8,11 +8,11 @@ import { getPublicStats, type PublicStats } from '@/lib/api';
// Asset display names and colors // Asset display names and colors
const ASSETS: Record<string, { name: string; color: string }> = { const ASSETS: Record<string, { name: string; color: string }> = {
btc: { name: 'Bitcoin', color: '#f7931a' }, btc: { name: 'Bitcoin', color: '#f7931a' },
ltc: { name: 'Litecoin', color: '#bfbbbb' }, ltc: { name: 'Litecoin', color: '#c0c0c0' },
xmr: { name: 'Monero', color: '#ff6600' }, xmr: { name: 'Monero', color: '#6b7280' },
wow: { name: 'Wownero', color: '#ff69b4' }, wow: { name: 'Wownero', color: '#ff69b4' },
grin: { name: 'Grin', color: '#ffc107' }, grin: { name: 'Grin', color: '#ffc107' },
unknown: { name: 'Unknown', color: '#6b7280' }, unknown: { name: 'Unknown', color: '#374151' },
}; };
// Platform display names // Platform display names
@@ -78,27 +78,30 @@ export default function StatsPage() {
</div> </div>
{/* Users by Preferred Coin */} {/* Users by Preferred Coin */}
{Object.keys(stats?.users_by_preferred_asset || {}).length > 0 && (
<div className="bg-zinc-900 rounded-xl p-6 mb-6"> <div className="bg-zinc-900 rounded-xl p-6 mb-6">
<h2 className="text-lg font-semibold mb-4">Favorite Login Coin</h2> <h2 className="text-lg font-semibold mb-4">Favorite Login Coin</h2>
<div className="space-y-3"> <div className="space-y-4">
{Object.entries(stats?.users_by_preferred_asset || {}) {Object.entries(stats?.users_by_preferred_asset || {})
.sort(([, a], [, b]) => b - a) .sort(([, a], [, b]) => b - a)
.map(([asset, count]) => { .map(([asset, count]) => {
const info = ASSETS[asset] || ASSETS.unknown; const info = ASSETS[asset] || ASSETS.unknown;
const percentage = totalByAsset > 0 ? (count / totalByAsset) * 100 : 0; const percentage = totalByAsset > 0 ? (count / totalByAsset) * 100 : 0;
return ( return (
<div key={asset}> <div key={asset} className="group">
<div className="flex justify-between text-sm mb-1"> <div className="flex justify-between text-sm mb-2">
<span>{info.name}</span> <span className="font-medium" style={{ color: info.color }}>
<span className="text-zinc-400"> {info.name}
{count} ({percentage.toFixed(1)}%) </span>
<span className="text-zinc-500 group-hover:text-zinc-300 transition-colors">
{count.toLocaleString()} logins ({percentage.toFixed(1)}%)
</span> </span>
</div> </div>
<div className="h-2 bg-zinc-800 rounded-full overflow-hidden"> <div className="h-4 bg-zinc-800 rounded-lg overflow-hidden">
<div <div
className="h-full rounded-full transition-all duration-500" className="h-full rounded-lg transition-all duration-500 group-hover:brightness-110"
style={{ style={{
width: `${percentage}%`, width: `${Math.max(percentage, 2)}%`,
backgroundColor: info.color, backgroundColor: info.color,
}} }}
/> />
@@ -107,7 +110,11 @@ export default function StatsPage() {
); );
})} })}
</div> </div>
<p className="text-xs text-zinc-600 mt-4 text-center">
Based on {totalByAsset.toLocaleString()} total logins
</p>
</div> </div>
)}
{/* Linked Accounts */} {/* Linked Accounts */}
{Object.keys(stats?.linked_accounts_by_platform || {}).length > 0 && ( {Object.keys(stats?.linked_accounts_by_platform || {}).length > 0 && (