63 lines
1.6 KiB
TypeScript
63 lines
1.6 KiB
TypeScript
"use client";
|
|
|
|
import { useMemo } from "react";
|
|
|
|
import { ChartShell } from "./ChartShell";
|
|
|
|
interface Props {
|
|
bucketLabels: string[];
|
|
recommended: number[];
|
|
current: number[];
|
|
}
|
|
|
|
export function RecommendBucketsChart({
|
|
bucketLabels,
|
|
recommended,
|
|
current,
|
|
}: Props) {
|
|
const option = useMemo(
|
|
() => ({
|
|
tooltip: {
|
|
trigger: "axis",
|
|
axisPointer: { type: "shadow" },
|
|
valueFormatter: (v: unknown) =>
|
|
typeof v === "number" ? `${v.toFixed(1)}%` : "—",
|
|
},
|
|
legend: { data: ["Рекомендация", "Ваше распределение"], top: 0 },
|
|
grid: { left: 100, right: 24, top: 32, bottom: 32 },
|
|
xAxis: {
|
|
type: "value",
|
|
max: 100,
|
|
axisLabel: { formatter: "{value}%" },
|
|
},
|
|
yAxis: { type: "category", data: bucketLabels, inverse: true },
|
|
series: [
|
|
{
|
|
name: "Рекомендация",
|
|
type: "bar",
|
|
data: recommended,
|
|
itemStyle: { color: "#cbd5e1" },
|
|
barGap: "-100%",
|
|
z: 1,
|
|
},
|
|
{
|
|
name: "Ваше распределение",
|
|
type: "bar",
|
|
data: current,
|
|
itemStyle: { color: "#1d4ed8" },
|
|
z: 2,
|
|
label: {
|
|
show: true,
|
|
position: "right",
|
|
formatter: (p: { value: number }) =>
|
|
p.value > 0 ? `${p.value.toFixed(1)}%` : "",
|
|
fontSize: 11,
|
|
},
|
|
},
|
|
],
|
|
}),
|
|
[bucketLabels, recommended, current],
|
|
);
|
|
|
|
return <ChartShell option={option} height={280} notMerge />;
|
|
}
|