fix(tradein/ui): убрать debug cache-key, гейт тонких графиков, разграничить динамику цен #1821
5 changed files with 140 additions and 125 deletions
|
|
@ -25,6 +25,7 @@ interface Props {
|
|||
}
|
||||
|
||||
const BIN_COUNT = 12;
|
||||
const MIN_CHART_ANALOGS = 8;
|
||||
const fmtK = (n: number) => `${Math.round(n / 1000)}k`;
|
||||
|
||||
interface Bin {
|
||||
|
|
@ -74,7 +75,7 @@ export function DistributionCard({ estimate }: Props) {
|
|||
return out;
|
||||
}, [estimate.analogs, subject]);
|
||||
|
||||
// Empty state: меньше 3 валидных аналогов — распределение не показываем.
|
||||
// Empty state: меньше 3 валидных аналогов — бины не строим вовсе.
|
||||
if (bins.length === 0) return null;
|
||||
|
||||
const n = estimate.analogs.filter((l) => l.price_per_m2 > 0).length;
|
||||
|
|
@ -94,63 +95,73 @@ export function DistributionCard({ estimate }: Props) {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
{/* #835: декоративный чарт — aria-hidden (данные в тексте/легенде карточки). */}
|
||||
<div aria-hidden="true" style={{ width: "100%", height: 260, padding: "12px 8px 0" }}>
|
||||
<ResponsiveContainer>
|
||||
<BarChart data={bins} margin={{ top: 8, right: 16, left: 8, bottom: 8 }}>
|
||||
<CartesianGrid stroke="var(--border)" strokeDasharray="3 3" />
|
||||
<XAxis
|
||||
dataKey="mid"
|
||||
type="number"
|
||||
domain={["dataMin", "dataMax"]}
|
||||
tickFormatter={fmtK}
|
||||
tick={{ fontSize: 11 }}
|
||||
/>
|
||||
<YAxis allowDecimals={false} tick={{ fontSize: 11 }} />
|
||||
<Tooltip
|
||||
cursor={{ fill: "var(--surface-3)" }}
|
||||
formatter={(value: number) => [`${value} лот.`, "В диапазоне"]}
|
||||
labelFormatter={(mid: number) => {
|
||||
const b = bins.find((x) => x.mid === mid);
|
||||
return b
|
||||
? `${Math.round(b.start).toLocaleString("ru-RU")}–${Math.round(
|
||||
b.end,
|
||||
).toLocaleString("ru-RU")} ₽/м²`
|
||||
: `${Math.round(mid).toLocaleString("ru-RU")} ₽/м²`;
|
||||
}}
|
||||
/>
|
||||
<Bar dataKey="count" radius={[3, 3, 0, 0]}>
|
||||
{bins.map((b, i) => (
|
||||
<Cell
|
||||
key={i}
|
||||
fill={b.isSubject ? "var(--accent-2)" : "var(--accent)"}
|
||||
fillOpacity={b.isSubject ? 1 : 0.55}
|
||||
{n < MIN_CHART_ANALOGS ? (
|
||||
<div className="card-body">
|
||||
<p style={{ color: "var(--muted)", textAlign: "center", padding: "24px 0" }}>
|
||||
Мало аналогов для графика — нужно не менее {MIN_CHART_ANALOGS}.
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
{/* #835: декоративный чарт — aria-hidden (данные в тексте/легенде карточки). */}
|
||||
<div aria-hidden="true" style={{ width: "100%", height: 260, padding: "12px 8px 0" }}>
|
||||
<ResponsiveContainer>
|
||||
<BarChart data={bins} margin={{ top: 8, right: 16, left: 8, bottom: 8 }}>
|
||||
<CartesianGrid stroke="var(--border)" strokeDasharray="3 3" />
|
||||
<XAxis
|
||||
dataKey="mid"
|
||||
type="number"
|
||||
domain={["dataMin", "dataMax"]}
|
||||
tickFormatter={fmtK}
|
||||
tick={{ fontSize: 11 }}
|
||||
/>
|
||||
))}
|
||||
</Bar>
|
||||
<ReferenceLine
|
||||
x={subject}
|
||||
stroke="var(--accent-2)"
|
||||
strokeWidth={2}
|
||||
strokeDasharray="4 2"
|
||||
label={{
|
||||
value: "ваша квартира",
|
||||
position: "top",
|
||||
fontSize: 11,
|
||||
fill: "var(--accent-2)",
|
||||
}}
|
||||
/>
|
||||
</BarChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
<YAxis allowDecimals={false} tick={{ fontSize: 11 }} />
|
||||
<Tooltip
|
||||
cursor={{ fill: "var(--surface-3)" }}
|
||||
formatter={(value: number) => [`${value} лот.`, "В диапазоне"]}
|
||||
labelFormatter={(mid: number) => {
|
||||
const b = bins.find((x) => x.mid === mid);
|
||||
return b
|
||||
? `${Math.round(b.start).toLocaleString("ru-RU")}–${Math.round(
|
||||
b.end,
|
||||
).toLocaleString("ru-RU")} ₽/м²`
|
||||
: `${Math.round(mid).toLocaleString("ru-RU")} ₽/м²`;
|
||||
}}
|
||||
/>
|
||||
<Bar dataKey="count" radius={[3, 3, 0, 0]}>
|
||||
{bins.map((b, i) => (
|
||||
<Cell
|
||||
key={i}
|
||||
fill={b.isSubject ? "var(--accent-2)" : "var(--accent)"}
|
||||
fillOpacity={b.isSubject ? 1 : 0.55}
|
||||
/>
|
||||
))}
|
||||
</Bar>
|
||||
<ReferenceLine
|
||||
x={subject}
|
||||
stroke="var(--accent-2)"
|
||||
strokeWidth={2}
|
||||
strokeDasharray="4 2"
|
||||
label={{
|
||||
value: "ваша квартира",
|
||||
position: "top",
|
||||
fontSize: 11,
|
||||
fill: "var(--accent-2)",
|
||||
}}
|
||||
/>
|
||||
</BarChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
|
||||
<div className="table-foot">
|
||||
<span>
|
||||
Ваша оценка:{" "}
|
||||
<b style={{ color: "var(--fg)" }}>{subject.toLocaleString("ru-RU")} ₽/м²</b> ·
|
||||
оранжевый столбец — ваш диапазон
|
||||
</span>
|
||||
</div>
|
||||
<div className="table-foot">
|
||||
<span>
|
||||
Ваша оценка:{" "}
|
||||
<b style={{ color: "var(--fg)" }}>{subject.toLocaleString("ru-RU")} ₽/м²</b> ·
|
||||
оранжевый столбец — ваш диапазон
|
||||
</span>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</article>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -25,6 +25,7 @@ interface Props {
|
|||
estimate: AggregatedEstimate;
|
||||
}
|
||||
|
||||
const MIN_CHART_ANALOGS = 8;
|
||||
const fmtM = (n: number) => `${(n / 1_000_000).toFixed(1)}`;
|
||||
|
||||
interface Point {
|
||||
|
|
@ -72,64 +73,74 @@ export function ExposureCard({ estimate }: Props) {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
{/* #835: чарт декоративный (данные — в заголовке/легенде/тексте карточки);
|
||||
aria-hidden убирает recharts symbol'ы role="img" без accessible-name. */}
|
||||
<div aria-hidden="true" style={{ width: "100%", height: 280, padding: "12px 8px 0" }}>
|
||||
<ResponsiveContainer>
|
||||
<ScatterChart margin={{ top: 8, right: 20, left: 8, bottom: 16 }}>
|
||||
<CartesianGrid stroke="var(--border)" strokeDasharray="3 3" />
|
||||
<XAxis
|
||||
type="number"
|
||||
dataKey="price"
|
||||
name="Цена"
|
||||
tickFormatter={fmtM}
|
||||
tick={{ fontSize: 11 }}
|
||||
domain={["auto", "auto"]}
|
||||
label={{ value: "млн ₽", position: "insideBottomRight", offset: -8, fontSize: 11 }}
|
||||
/>
|
||||
<YAxis
|
||||
type="number"
|
||||
dataKey="days"
|
||||
name="Срок"
|
||||
tick={{ fontSize: 11 }}
|
||||
label={{ value: "дней", angle: -90, position: "insideLeft", fontSize: 11 }}
|
||||
/>
|
||||
<ZAxis range={[60, 60]} />
|
||||
<Tooltip
|
||||
cursor={{ strokeDasharray: "3 3" }}
|
||||
formatter={(value: number, name: string) =>
|
||||
name === "Цена"
|
||||
? [`${value.toLocaleString("ru-RU")} ₽`, name]
|
||||
: [`${value} дн.`, name]
|
||||
}
|
||||
/>
|
||||
<Scatter
|
||||
data={points}
|
||||
fill="var(--accent)"
|
||||
fillOpacity={0.6}
|
||||
/>
|
||||
<ReferenceLine
|
||||
x={subjectPrice}
|
||||
stroke="var(--accent-2)"
|
||||
strokeWidth={2}
|
||||
strokeDasharray="4 2"
|
||||
label={{
|
||||
value: "ваша цена",
|
||||
position: "top",
|
||||
fontSize: 11,
|
||||
fill: "var(--accent-2)",
|
||||
}}
|
||||
/>
|
||||
</ScatterChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
{points.length < MIN_CHART_ANALOGS ? (
|
||||
<div className="card-body">
|
||||
<p style={{ color: "var(--muted)", textAlign: "center", padding: "24px 0" }}>
|
||||
Недостаточно данных для графика — нужно не менее {MIN_CHART_ANALOGS} аналогов со сроком.
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
{/* #835: чарт декоративный (данные — в заголовке/легенде/тексте карточки);
|
||||
aria-hidden убирает recharts symbol'ы role="img" без accessible-name. */}
|
||||
<div aria-hidden="true" style={{ width: "100%", height: 280, padding: "12px 8px 0" }}>
|
||||
<ResponsiveContainer>
|
||||
<ScatterChart margin={{ top: 8, right: 20, left: 8, bottom: 16 }}>
|
||||
<CartesianGrid stroke="var(--border)" strokeDasharray="3 3" />
|
||||
<XAxis
|
||||
type="number"
|
||||
dataKey="price"
|
||||
name="Цена"
|
||||
tickFormatter={fmtM}
|
||||
tick={{ fontSize: 11 }}
|
||||
domain={["auto", "auto"]}
|
||||
label={{ value: "млн ₽", position: "insideBottomRight", offset: -8, fontSize: 11 }}
|
||||
/>
|
||||
<YAxis
|
||||
type="number"
|
||||
dataKey="days"
|
||||
name="Срок"
|
||||
tick={{ fontSize: 11 }}
|
||||
label={{ value: "дней", angle: -90, position: "insideLeft", fontSize: 11 }}
|
||||
/>
|
||||
<ZAxis range={[60, 60]} />
|
||||
<Tooltip
|
||||
cursor={{ strokeDasharray: "3 3" }}
|
||||
formatter={(value: number, name: string) =>
|
||||
name === "Цена"
|
||||
? [`${value.toLocaleString("ru-RU")} ₽`, name]
|
||||
: [`${value} дн.`, name]
|
||||
}
|
||||
/>
|
||||
<Scatter
|
||||
data={points}
|
||||
fill="var(--accent)"
|
||||
fillOpacity={0.6}
|
||||
/>
|
||||
<ReferenceLine
|
||||
x={subjectPrice}
|
||||
stroke="var(--accent-2)"
|
||||
strokeWidth={2}
|
||||
strokeDasharray="4 2"
|
||||
label={{
|
||||
value: "ваша цена",
|
||||
position: "top",
|
||||
fontSize: 11,
|
||||
fill: "var(--accent-2)",
|
||||
}}
|
||||
/>
|
||||
</ScatterChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
|
||||
<div className="table-foot">
|
||||
<span>
|
||||
Каждая точка — аналог в продаже · вертикаль — ваша оценка{" "}
|
||||
<b style={{ color: "var(--fg)" }}>{fmtM(subjectPrice)} млн ₽</b>
|
||||
</span>
|
||||
</div>
|
||||
<div className="table-foot">
|
||||
<span>
|
||||
Каждая точка — аналог в продаже · вертикаль — ваша оценка{" "}
|
||||
<b style={{ color: "var(--fg)" }}>{fmtM(subjectPrice)} млн ₽</b>
|
||||
</span>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</article>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -46,10 +46,10 @@ export function PriceHistoryChart({ points }: Props) {
|
|||
<article className="card" style={{ marginTop: 12, padding: 16 }}>
|
||||
<header style={{ marginBottom: 8 }}>
|
||||
<h4 style={{ margin: 0, fontSize: 14, fontWeight: 600 }}>
|
||||
Динамика цен в доме
|
||||
История цен в этом доме
|
||||
</h4>
|
||||
<small style={{ color: "var(--muted, #6b7280)" }}>
|
||||
Медиана ₽/м² по году · Avito + Яндекс (по {totalLots} лотам)
|
||||
Медиана ₽/м² по годам · только этот дом · Avito + Яндекс ({totalLots} лотов)
|
||||
</small>
|
||||
</header>
|
||||
{/* #835: декоративный чарт — aria-hidden (данные в тексте/легенде карточки). */}
|
||||
|
|
|
|||
|
|
@ -58,8 +58,8 @@ export function PriceTrendCard({ estimate }: Props) {
|
|||
<article className="card">
|
||||
<div className="card-head">
|
||||
<div>
|
||||
<div className="section-kicker">Аналитика · Тренд</div>
|
||||
<h2>Динамика ₽/м²</h2>
|
||||
<div className="section-kicker">Аналитика · Тренд рынка</div>
|
||||
<h2>Динамика ₽/м² по рынку района</h2>
|
||||
</div>
|
||||
<div className="card-meta">
|
||||
<div>
|
||||
|
|
@ -101,7 +101,7 @@ export function PriceTrendCard({ estimate }: Props) {
|
|||
|
||||
<div className="table-foot">
|
||||
<span>
|
||||
Медиана ₽/м² по месяцам · {fmtMonth(data[0].month)} →{" "}
|
||||
Медиана ₽/м² по аналогам рынка · {fmtMonth(data[0].month)} →{" "}
|
||||
{fmtMonth(data[data.length - 1].month)}
|
||||
</span>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -198,13 +198,6 @@ export function SourcesProgress({ estimate, isPending }: Props) {
|
|||
</div>
|
||||
|
||||
<div className="card-foot">
|
||||
<span className="mono" style={{ fontSize: 11, letterSpacing: "0.06em" }}>
|
||||
CACHE-KEY ·{" "}
|
||||
</span>
|
||||
<span className="mono" style={{ fontSize: 11 }}>
|
||||
{estimate?.estimate_id?.slice(0, 18) ?? "—"}
|
||||
</span>{" "}
|
||||
·{" "}
|
||||
<span>при недоступности источника частичный результат не блокируется</span>
|
||||
</div>
|
||||
</article>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue