Spaces:
Runtime error
Runtime error
File size: 2,150 Bytes
cd8bd0a | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 | "use client";
import { useEffect, useState } from "react";
import Card from "../Card";
type RechartsModule = typeof import("recharts");
let rechartsModule: RechartsModule | null = null;
let rechartsPromise: Promise<RechartsModule> | null = null;
export function loadRecharts() {
if (rechartsModule) return Promise.resolve(rechartsModule);
if (!rechartsPromise) {
rechartsPromise = import("recharts")
.then((module) => {
rechartsModule = module;
return module;
})
.catch((error) => {
rechartsPromise = null;
throw error;
});
}
return rechartsPromise;
}
export function useRecharts() {
const [module, setModule] = useState<RechartsModule | null>(rechartsModule);
useEffect(() => {
if (module) return;
let cancelled = false;
loadRecharts()
.then((loadedModule) => {
if (!cancelled) setModule(loadedModule);
})
.catch(() => {
if (!cancelled) setModule(null);
});
return () => {
cancelled = true;
};
}, [module]);
return module;
}
export function ChartLoadingCard({ className = "p-4 flex-1" }: { className?: string }) {
return (
<Card className={className}>
<div className="py-8" aria-hidden="true" />
</Card>
);
}
export function DarkTooltip({
active,
payload,
label,
formatter,
}: {
active?: boolean;
payload?: any[];
label?: any;
formatter?: Function;
}) {
if (!active || !payload?.length) return null;
return (
<div className="rounded-lg border border-white/10 bg-surface px-3 py-2 text-xs shadow-lg">
{label && <div className="font-semibold text-text-main mb-1">{label}</div>}
{payload.map((entry, i) => (
<div key={i} className="flex items-center gap-1.5 text-text-muted">
<span
className="w-2 h-2 rounded-full shrink-0"
style={{ backgroundColor: entry.color }}
/>
<span>{entry.name}:</span>
<span className="font-mono font-medium text-text-main">
{formatter ? formatter(entry.value) : entry.value}
</span>
</div>
))}
</div>
);
}
|