44 lines
1.4 KiB
JavaScript
44 lines
1.4 KiB
JavaScript
import { EChart } from "../charts/EChart.jsx";
|
|
import { createDonutOption } from "../charts/options/createDonutOption.js";
|
|
import { formatCoin, formatPercent, formatWholeMoney } from "../utils/format.js";
|
|
import { FiveMetricRow } from "./MiniStat.jsx";
|
|
import { Panel } from "./Panel.jsx";
|
|
|
|
export function LuckyGiftPanel({ luckyMetrics, payoutDistribution }) {
|
|
return (
|
|
<Panel title="幸运礼物返奖">
|
|
<FiveMetricRow items={luckyMetrics} />
|
|
<div className="donut-layout">
|
|
<div className="donut-wrap">
|
|
<EChart className="donut-chart" option={createDonutOption(payoutDistribution)} />
|
|
<div className="donut-center">
|
|
<strong>{formatWholeMoney(totalValue(payoutDistribution))}</strong>
|
|
<span>返奖总额</span>
|
|
</div>
|
|
</div>
|
|
<DistributionList items={payoutDistribution} />
|
|
</div>
|
|
</Panel>
|
|
);
|
|
}
|
|
|
|
function totalValue(items) {
|
|
return items.reduce((sum, item) => sum + item.value, 0);
|
|
}
|
|
|
|
function DistributionList({ items }) {
|
|
const total = items.reduce((sum, item) => sum + item.value, 0) || 1;
|
|
return (
|
|
<div className="distribution-list">
|
|
{items.map((item) => (
|
|
<div className="distribution-row" key={item.name}>
|
|
<span />
|
|
<em>{item.name}</em>
|
|
<strong>{formatPercent(item.value / total)}</strong>
|
|
<b>{formatCoin(item.value)}</b>
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|