feat(dashboard, i18n): 增强仪表盘视觉效果与多语言支持
在英文、尼泊尔语和中文语言包中新增 “Other statuses” 翻译,提升仪表盘指标展示的清晰度。 在仪表盘中集成新的 StatCard 组件,用于更直观地展示关键指标数据。 更新仪表盘趋势图表,采用 recharts 实现更丰富的数据可视化效果。 重构现有组件与布局,优化整体交互与用户体验,使界面更加直观易用。
This commit is contained in:
78
src/modules/dashboard/dashboard-chart-config.ts
Normal file
78
src/modules/dashboard/dashboard-chart-config.ts
Normal file
@@ -0,0 +1,78 @@
|
||||
import type { ChartConfig } from "@/components/ui/chart";
|
||||
|
||||
/** 仪表盘图表色板,对齐 globals.css --chart-1 … --chart-5 */
|
||||
export const DASHBOARD_CHART_COLORS = {
|
||||
primary: "var(--chart-1)",
|
||||
success: "var(--chart-2)",
|
||||
warning: "var(--chart-3)",
|
||||
violet: "var(--chart-4)",
|
||||
rose: "var(--chart-5)",
|
||||
muted: "var(--muted-foreground)",
|
||||
} as const;
|
||||
|
||||
export function buildTrendChartConfig(labels: {
|
||||
bet: string;
|
||||
payout: string;
|
||||
profit: string;
|
||||
}): ChartConfig {
|
||||
return {
|
||||
bet: { label: labels.bet, color: DASHBOARD_CHART_COLORS.primary },
|
||||
payout: { label: labels.payout, color: DASHBOARD_CHART_COLORS.rose },
|
||||
profit: { label: labels.profit, color: DASHBOARD_CHART_COLORS.success },
|
||||
};
|
||||
}
|
||||
|
||||
export function buildFinanceStructureConfig(labels: {
|
||||
win: string;
|
||||
jackpot: string;
|
||||
gross: string;
|
||||
}): ChartConfig {
|
||||
return {
|
||||
win: { label: labels.win, color: DASHBOARD_CHART_COLORS.success },
|
||||
jackpot: { label: labels.jackpot, color: DASHBOARD_CHART_COLORS.violet },
|
||||
gross: { label: labels.gross, color: DASHBOARD_CHART_COLORS.primary },
|
||||
};
|
||||
}
|
||||
|
||||
export function buildPayoutPieConfig(labels: { win: string; jackpot: string }): ChartConfig {
|
||||
return {
|
||||
win: { label: labels.win, color: DASHBOARD_CHART_COLORS.success },
|
||||
jackpot: { label: labels.jackpot, color: DASHBOARD_CHART_COLORS.violet },
|
||||
};
|
||||
}
|
||||
|
||||
export function buildSoldOutPieConfig(labels: Record<string, string>): ChartConfig {
|
||||
return {
|
||||
d4: { label: labels.d4, color: DASHBOARD_CHART_COLORS.primary },
|
||||
d3: { label: labels.d3, color: DASHBOARD_CHART_COLORS.success },
|
||||
d2: { label: labels.d2, color: DASHBOARD_CHART_COLORS.warning },
|
||||
special: { label: labels.special, color: DASHBOARD_CHART_COLORS.violet },
|
||||
other: { label: labels.other, color: DASHBOARD_CHART_COLORS.rose },
|
||||
};
|
||||
}
|
||||
|
||||
export function buildBatchProgressConfig(labels: {
|
||||
pending: string;
|
||||
published: string;
|
||||
other: string;
|
||||
}): ChartConfig {
|
||||
return {
|
||||
pending: { label: labels.pending, color: DASHBOARD_CHART_COLORS.warning },
|
||||
published: { label: labels.published, color: DASHBOARD_CHART_COLORS.success },
|
||||
other: { label: labels.other, color: DASHBOARD_CHART_COLORS.muted },
|
||||
};
|
||||
}
|
||||
|
||||
export function buildUsageBarConfig(label: string): ChartConfig {
|
||||
return {
|
||||
usage: { label, color: DASHBOARD_CHART_COLORS.primary },
|
||||
};
|
||||
}
|
||||
|
||||
export function buildSettlementBarConfig(
|
||||
entries: { status: string; label: string; color: string }[],
|
||||
): ChartConfig {
|
||||
return Object.fromEntries(
|
||||
entries.map((e) => [e.status, { label: e.label, color: e.color }]),
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user