8d3a0874ef
3 pages (market, PRINZIP drilldown, developers leaderboard) on top of existing v_developer_full_metrics + domrf_realization views. ECharts on the frontend, FastAPI router /api/v1/analytics on the backend.
50 lines
1.3 KiB
TypeScript
50 lines
1.3 KiB
TypeScript
"use client";
|
|
|
|
import { useMemo } from "react";
|
|
|
|
import { useDistricts } from "@/lib/analytics-api";
|
|
|
|
import { ChartShell } from "./ChartShell";
|
|
|
|
export function DistrictTreemap() {
|
|
const { data, isLoading } = useDistricts();
|
|
|
|
const option = useMemo(() => {
|
|
const rows = data ?? [];
|
|
return {
|
|
tooltip: {
|
|
formatter: (info: {
|
|
data: { name: string; value: number; flat_count: number };
|
|
}) =>
|
|
`<b>${info.data.name}</b><br/>ЖК: ${info.data.value}<br/>квартир: ${info.data.flat_count?.toLocaleString("ru")}`,
|
|
},
|
|
series: [
|
|
{
|
|
type: "treemap",
|
|
roam: false,
|
|
breadcrumb: { show: false },
|
|
label: {
|
|
show: true,
|
|
formatter: "{b}\n{c} ЖК",
|
|
color: "#fff",
|
|
fontSize: 13,
|
|
},
|
|
itemStyle: { borderColor: "#fff", borderWidth: 2, gapWidth: 2 },
|
|
levels: [
|
|
{
|
|
colorMappingBy: "value",
|
|
color: ["#dbeafe", "#3b82f6", "#1d4ed8"],
|
|
},
|
|
],
|
|
data: rows.map((r) => ({
|
|
name: r.district_name,
|
|
value: r.zk_count ?? 0,
|
|
flat_count: r.flat_count ?? 0,
|
|
})),
|
|
},
|
|
],
|
|
};
|
|
}, [data]);
|
|
|
|
return <ChartShell option={option} loading={isLoading} height={360} />;
|
|
}
|