48 lines
1.5 KiB
TypeScript
48 lines
1.5 KiB
TypeScript
"use client";
|
|
|
|
import { useMemo } from "react";
|
|
|
|
import { ChartShell } from "./ChartShell";
|
|
|
|
interface Props {
|
|
bucketLabels: string[];
|
|
revenuesRub: (number | null)[];
|
|
}
|
|
|
|
const COLORS = ["#94a3b8", "#1d4ed8", "#0891b2", "#0a7a3a", "#c2410c"];
|
|
|
|
export function RecommendRevenueChart({ bucketLabels, revenuesRub }: Props) {
|
|
const option = useMemo(() => {
|
|
const valuesMln = revenuesRub.map((v) =>
|
|
v == null ? 0 : Math.round((v / 1_000_000) * 10) / 10,
|
|
);
|
|
const total = valuesMln.reduce((a, b) => a + b, 0);
|
|
return {
|
|
tooltip: {
|
|
trigger: "axis",
|
|
valueFormatter: (v: unknown) =>
|
|
typeof v === "number" ? `${v.toFixed(1)} млн ₽` : "—",
|
|
},
|
|
grid: { left: 60, right: 32, top: 24, bottom: 32 },
|
|
xAxis: { type: "value", axisLabel: { formatter: "{value} млн" } },
|
|
yAxis: { type: "category", data: ["Выручка"] },
|
|
series: bucketLabels.map((label, i) => ({
|
|
name: label,
|
|
type: "bar",
|
|
stack: "rev",
|
|
data: [valuesMln[i] ?? 0],
|
|
itemStyle: { color: COLORS[i % COLORS.length] },
|
|
emphasis: { focus: "series" },
|
|
label: {
|
|
show: (valuesMln[i] ?? 0) >= total * 0.05,
|
|
formatter: (p: { value: number; seriesName: string }) =>
|
|
`${p.seriesName}\n${p.value.toFixed(1)} млн`,
|
|
color: "#fff",
|
|
fontSize: 11,
|
|
},
|
|
})),
|
|
};
|
|
}, [bucketLabels, revenuesRub]);
|
|
|
|
return <ChartShell option={option} height={120} notMerge />;
|
|
}
|