boos
314 lines
9.6 KiB
TypeScript
314 lines
9.6 KiB
TypeScript
import { useState, useMemo } from 'react';
|
|
import { VChart } from '@visactor/react-vchart';
|
|
import { useThemeLabelColor } from '../useThemeLabelColor.js';
|
|
|
|
interface SiteDistributionData {
|
|
siteName: string;
|
|
platform?: string | null;
|
|
totalBalance?: number;
|
|
totalSpend?: number;
|
|
accountCount?: number;
|
|
spend?: number;
|
|
calls?: number;
|
|
tokens?: number;
|
|
}
|
|
|
|
interface SiteDistributionChartProps {
|
|
data: SiteDistributionData[];
|
|
loading?: boolean;
|
|
}
|
|
|
|
type ViewMode = 'balance' | 'spend';
|
|
|
|
function coerceDatumRecord(datum: unknown): Record<string, unknown> {
|
|
return datum && typeof datum === 'object' ? datum as Record<string, unknown> : {};
|
|
}
|
|
|
|
function safeNumber(value: unknown): number {
|
|
if (typeof value !== 'number' || Number.isNaN(value) || !Number.isFinite(value)) return 0;
|
|
return value;
|
|
}
|
|
|
|
function formatPercentLabel(datum: unknown): string {
|
|
const item = coerceDatumRecord(datum);
|
|
const percent = safeNumber(item._percent_);
|
|
if (percent <= 0) return '';
|
|
return `${percent.toFixed(percent >= 10 ? 0 : 1)}%`;
|
|
}
|
|
|
|
function SkeletonCircle() {
|
|
return (
|
|
<div
|
|
style={{
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
padding: '40px 0',
|
|
}}
|
|
>
|
|
<div
|
|
className="skeleton"
|
|
style={{
|
|
width: 200,
|
|
height: 200,
|
|
borderRadius: '50%',
|
|
}}
|
|
/>
|
|
<div style={{ marginLeft: 32, display: 'flex', flexDirection: 'column', gap: 12 }}>
|
|
{[...Array(4)].map((_, i) => (
|
|
<div key={i} style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
|
|
<div className="skeleton" style={{ width: 12, height: 12, borderRadius: 3 }} />
|
|
<div className="skeleton" style={{ width: 80 + i * 10, height: 12 }} />
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function EmptyState() {
|
|
return (
|
|
<div className="empty-state" style={{ padding: 40 }}>
|
|
<div style={{ margin: '0 auto 16px', width: 64, height: 64, opacity: 0.35 }}>
|
|
<svg
|
|
width="64"
|
|
height="64"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="var(--color-text-muted)"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={1.2}
|
|
d="M11 3.055A9.001 9.001 0 1020.945 13H11V3.055z"
|
|
/>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={1.2}
|
|
d="M20.488 9H15V3.512A9.025 9.025 0 0120.488 9z"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<div className="empty-state-title" style={{ marginBottom: 4 }}>
|
|
暂无站点数据
|
|
</div>
|
|
<div className="empty-state-desc">添加站点后将自动展示分布图表</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default function SiteDistributionChart({ data, loading }: SiteDistributionChartProps) {
|
|
const [viewMode, setViewMode] = useState<ViewMode>('balance');
|
|
const labelColor = useThemeLabelColor();
|
|
|
|
const chartData = useMemo(() => {
|
|
if (!data || data.length === 0) return [];
|
|
return data.map((item) => ({
|
|
siteName: item.siteName,
|
|
platform: item.platform,
|
|
value: safeNumber(viewMode === 'balance'
|
|
? item.totalBalance
|
|
: item.totalSpend ?? item.spend),
|
|
accountCount: safeNumber(item.accountCount),
|
|
calls: safeNumber(item.calls),
|
|
}));
|
|
}, [data, viewMode]);
|
|
|
|
const hasData = chartData.length > 0 && chartData.some((d) => d.value > 0);
|
|
|
|
const PIE_COLORS = ['#4f46e5', '#06b6d4', '#10b981', '#f59e0b', '#ef4444', '#8b5cf6', '#ec4899', '#14b8a6'];
|
|
|
|
const spec = useMemo(() => {
|
|
if (!hasData) return null;
|
|
|
|
return {
|
|
type: 'pie' as const,
|
|
data: [{ id: 'siteData', values: chartData }],
|
|
valueField: 'value',
|
|
categoryField: 'siteName',
|
|
outerRadius: 0.8,
|
|
innerRadius: 0.55,
|
|
pie: { style: { cornerRadius: 4, padAngle: 0.02 } },
|
|
label: {
|
|
visible: true,
|
|
position: 'outside',
|
|
formatMethod: (_text: unknown, datum: unknown) => formatPercentLabel(datum),
|
|
style: { fill: labelColor, fontSize: 12, stroke: 'transparent' },
|
|
},
|
|
legends: { visible: false },
|
|
tooltip: {
|
|
mark: {
|
|
content: [
|
|
{
|
|
key: (datum: unknown) => {
|
|
const item = coerceDatumRecord(datum);
|
|
return String(item.siteName || '-');
|
|
},
|
|
value: (datum: unknown) => {
|
|
const item = coerceDatumRecord(datum);
|
|
const val = safeNumber(item.value);
|
|
return `$${val.toFixed(2)}`;
|
|
},
|
|
},
|
|
{
|
|
key: '占比',
|
|
value: (datum: unknown) => {
|
|
const item = coerceDatumRecord(datum);
|
|
const pct = safeNumber(item._percent_);
|
|
return `${pct.toFixed(1)}%`;
|
|
},
|
|
},
|
|
{
|
|
key: '账户数',
|
|
value: (datum: unknown) => {
|
|
const item = coerceDatumRecord(datum);
|
|
return String(item.accountCount || 0);
|
|
},
|
|
},
|
|
{
|
|
key: '调用',
|
|
value: (datum: unknown) => {
|
|
const item = coerceDatumRecord(datum);
|
|
return String(item.calls || 0);
|
|
},
|
|
},
|
|
] as any,
|
|
},
|
|
},
|
|
color: PIE_COLORS,
|
|
animation: true,
|
|
background: 'transparent',
|
|
};
|
|
}, [chartData, hasData, labelColor]);
|
|
|
|
const formatValue = (value: number): string => {
|
|
if (viewMode === 'balance' && value === 0) return '$0.00';
|
|
if (value >= 1000) return `$${value.toFixed(2)}`;
|
|
if (value >= 1) return `$${value.toFixed(3)}`;
|
|
return `$${value.toFixed(6)}`;
|
|
};
|
|
|
|
return (
|
|
<div
|
|
className="chart-container animate-fade-in"
|
|
style={{ padding: 20 }}
|
|
>
|
|
{/* Header */}
|
|
<div
|
|
style={{
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'space-between',
|
|
marginBottom: 16,
|
|
}}
|
|
>
|
|
<div
|
|
style={{
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
gap: 6,
|
|
fontSize: 14,
|
|
fontWeight: 600,
|
|
color: 'var(--color-text-primary)',
|
|
}}
|
|
>
|
|
<svg
|
|
width="16"
|
|
height="16"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M11 3.055A9.001 9.001 0 1020.945 13H11V3.055z"
|
|
/>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M20.488 9H15V3.512A9.025 9.025 0 0120.488 9z"
|
|
/>
|
|
</svg>
|
|
站点分布
|
|
</div>
|
|
|
|
{/* Toggle buttons */}
|
|
<div
|
|
style={{
|
|
display: 'flex',
|
|
gap: 0,
|
|
background: 'var(--color-bg)',
|
|
borderRadius: 'var(--radius-sm)',
|
|
padding: 3,
|
|
border: '1px solid var(--color-border-light)',
|
|
}}
|
|
>
|
|
<button
|
|
onClick={() => setViewMode('balance')}
|
|
style={{
|
|
padding: '5px 14px',
|
|
fontSize: 12,
|
|
fontWeight: 500,
|
|
border: 'none',
|
|
borderRadius: 'calc(var(--radius-sm) - 2px)',
|
|
cursor: 'pointer',
|
|
transition: 'all 0.2s ease',
|
|
background: viewMode === 'balance' ? 'var(--color-primary)' : 'transparent',
|
|
color: viewMode === 'balance' ? '#ffffff' : 'var(--color-text-secondary)',
|
|
boxShadow: viewMode === 'balance' ? 'var(--shadow-sm)' : 'none',
|
|
}}
|
|
>
|
|
余额分布
|
|
</button>
|
|
<button
|
|
onClick={() => setViewMode('spend')}
|
|
style={{
|
|
padding: '5px 14px',
|
|
fontSize: 12,
|
|
fontWeight: 500,
|
|
border: 'none',
|
|
borderRadius: 'calc(var(--radius-sm) - 2px)',
|
|
cursor: 'pointer',
|
|
transition: 'all 0.2s ease',
|
|
background: viewMode === 'spend' ? 'var(--color-primary)' : 'transparent',
|
|
color: viewMode === 'spend' ? '#ffffff' : 'var(--color-text-secondary)',
|
|
boxShadow: viewMode === 'spend' ? 'var(--shadow-sm)' : 'none',
|
|
}}
|
|
>
|
|
消耗分布
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Content */}
|
|
{loading ? (
|
|
<SkeletonCircle />
|
|
) : !hasData ? (
|
|
<EmptyState />
|
|
) : (
|
|
<div>
|
|
<div style={{ width: '100%', height: 300 }}>
|
|
{spec && <VChart spec={spec} style={{ width: '100%', height: '100%' }} />}
|
|
</div>
|
|
<div style={{ display: 'flex', flexWrap: 'wrap', gap: '6px 14px', marginTop: 10, padding: '0 4px' }}>
|
|
{chartData.map((d, idx) => (
|
|
<span key={d.siteName} style={{ display: 'inline-flex', alignItems: 'center', gap: 4, fontSize: 11, color: 'var(--color-text-secondary)' }}>
|
|
<span style={{ width: 8, height: 8, borderRadius: 2, background: PIE_COLORS[idx % PIE_COLORS.length], flexShrink: 0 }} />
|
|
<span style={{ maxWidth: 120, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{d.siteName}</span>
|
|
<span style={{ fontVariantNumeric: 'tabular-nums', fontWeight: 600, color: 'var(--color-text-primary)' }}>
|
|
{formatValue(d.value)}
|
|
</span>
|
|
</span>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|