fix(tradein/v2): честность гистограмм и оси scatter + мобильный guard + a11y графика
All checks were successful
CI Trade-In / changes (pull_request) Successful in 13s
CI / backend-tests (pull_request) Has been skipped
CI Trade-In / backend-tests (pull_request) Has been skipped
CI / changes (pull_request) Successful in 13s
CI / frontend-tests (pull_request) Has been skipped
CI / openapi-codegen-check (pull_request) Has been skipped
CI Trade-In / frontend-checks (pull_request) Successful in 1m23s
All checks were successful
CI Trade-In / changes (pull_request) Successful in 13s
CI / backend-tests (pull_request) Has been skipped
CI Trade-In / backend-tests (pull_request) Has been skipped
CI / changes (pull_request) Successful in 13s
CI / frontend-tests (pull_request) Has been skipped
CI / openapi-codegen-check (pull_request) Has been skipped
CI Trade-In / frontend-checks (pull_request) Successful in 1m23s
- Гистограммы флагман-карточки (ОБЪЯВЛЕНИЯ) и ДКП/сделок биннятся по outlier-guarded пулу (guardPriceOutliers().clean) — консистентно с числом «выброс исключён» и спредом на той же карточке. Раньше bins8 спанил [min,max] ВКЛЮЧАЯ выброс 872k, схлопывая реальные аналоги в левые бины. - Ось детального scatter «СРОК ПРОДАЖИ» → «СРОК НА РЫНКЕ»: для активных лотов x = дней на рынке (today−listing_date, нижняя граница), а не измеренный срок продажи. Обновлены title/aria-label/подзаголовок карточки. - <1024px: honest desktop-only notice вместо нечитаемого ~25%-scaled артборда (client-side width guard, ранний return после всех хуков; десктоп не тронут). - WCAG 2.1.1: точки истории цен теперь фокусируемы с клавиатуры (role=button / tabIndex / Enter+Space / onFocus-onBlur), мышиный hover сохранён.
This commit is contained in:
parent
b1ac551451
commit
219cdfdbcc
3 changed files with 97 additions and 9 deletions
|
|
@ -448,10 +448,17 @@ export default function TradeInV2Page() {
|
|||
// The rest of the dashboard (ParamsPanel / ResultPanel / overlays) stays
|
||||
// inside the scaled artboard — smaller on phones, but no longer overflowing.
|
||||
const [isMobile, setIsMobile] = useState(false);
|
||||
// Below this width the fixed 1536px artboard scales down to an unreadable
|
||||
// ~25% and there is no responsive layout yet. Rather than ship that broken
|
||||
// scaled-down HUD, render an honest "open on desktop" notice instead (see the
|
||||
// early return below). Starts false so SSR + first client render match the
|
||||
// desktop tree; the effect flips it post-hydration → no hydration mismatch.
|
||||
const [isSmallViewport, setIsSmallViewport] = useState(false);
|
||||
useEffect(() => {
|
||||
const compute = () => {
|
||||
setArtboardScale(Math.min(1, window.innerWidth / 1536));
|
||||
setIsMobile(window.innerWidth < 768);
|
||||
setIsSmallViewport(window.innerWidth < 1024);
|
||||
};
|
||||
compute();
|
||||
window.addEventListener("resize", compute);
|
||||
|
|
@ -766,6 +773,48 @@ export default function TradeInV2Page() {
|
|||
statusMessage = "Оценка готова";
|
||||
}
|
||||
|
||||
// Small-viewport guard: the HUD is a fixed 1536px artboard with no responsive
|
||||
// layout — under ~1024px it scales to an unreadable ~25%. Show an honest
|
||||
// desktop-only notice instead of the broken scaled-down copy. Placed after all
|
||||
// hooks so the early return never changes hook order. Desktop (≥1024) is
|
||||
// untouched.
|
||||
if (isSmallViewport) {
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
minHeight: "100vh",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
textAlign: "center",
|
||||
padding: "40px 24px",
|
||||
boxSizing: "border-box",
|
||||
gap: 14,
|
||||
fontFamily: tokens.font.sans,
|
||||
color: tokens.ink,
|
||||
background: tokens.gradientBg,
|
||||
}}
|
||||
>
|
||||
<h1 style={{ fontSize: 20, fontWeight: 700, margin: 0, letterSpacing: 0.3 }}>
|
||||
Мера оптимизирована для десктопа
|
||||
</h1>
|
||||
<p
|
||||
style={{
|
||||
fontSize: 14,
|
||||
lineHeight: 1.6,
|
||||
margin: 0,
|
||||
maxWidth: 360,
|
||||
color: tokens.body,
|
||||
}}
|
||||
>
|
||||
Откройте оценку на компьютере или расширьте окно браузера до 1024 px
|
||||
и шире — на узком экране интерфейс отчёта нечитаем.
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
|
|
|
|||
|
|
@ -460,12 +460,35 @@ export default function AnalyticsView({
|
|||
<circle key={i} cx={p.x} cy={p.y} r={3.5} />
|
||||
))}
|
||||
</g>
|
||||
{/* WCAG 2.1.1 (#4): the chart's "open archived listings" affordance
|
||||
was a mouse-only <g onClick>. Expose it as a real focusable
|
||||
button (role + tabIndex + Enter/Space) so keyboard/SR users can
|
||||
open the «Аналогичные объявления» overlay too — the transparent
|
||||
hover circles stay as the pointer target. Only interactive when
|
||||
there are points to click (no empty tab stop on a data-less
|
||||
chart). onFocus/onBlur mirror hover so the hint tooltip shows on
|
||||
keyboard focus as well. */}
|
||||
<g
|
||||
fill="transparent"
|
||||
role={hoverPts.length > 0 ? "button" : undefined}
|
||||
tabIndex={hoverPts.length > 0 ? 0 : undefined}
|
||||
aria-label={
|
||||
hoverPts.length > 0
|
||||
? "Открыть архивные объявления этого дома"
|
||||
: undefined
|
||||
}
|
||||
style={{ cursor: "pointer" }}
|
||||
onMouseEnter={() => setHoverHist(true)}
|
||||
onMouseLeave={() => setHoverHist(false)}
|
||||
onFocus={() => setHoverHist(true)}
|
||||
onBlur={() => setHoverHist(false)}
|
||||
onClick={() => onNavigate?.(2)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter" || e.key === " ") {
|
||||
e.preventDefault();
|
||||
onNavigate?.(2);
|
||||
}
|
||||
}}
|
||||
>
|
||||
{hoverPts.map((p, i) => (
|
||||
<circle key={i} cx={p.x} cy={p.y} r={13} />
|
||||
|
|
@ -512,10 +535,15 @@ export default function AnalyticsView({
|
|||
>
|
||||
<div>
|
||||
<div style={{ fontSize: 12, fontWeight: 600, color: tokens.ink2 }}>
|
||||
Цена × срок продажи
|
||||
Цена × срок на рынке
|
||||
</div>
|
||||
<div style={{ fontSize: 10, color: tokens.muted2, marginTop: 4 }}>
|
||||
Зависимость цены от срока экспозиции · {data.scatterDetail.note}
|
||||
{/* Honesty (#2): active analogs carry «дней на рынке так далеко»
|
||||
(today − listing_date, нижняя граница), not realized
|
||||
time-to-sell — the axis reads «срок на рынке», not «срок
|
||||
продажи», so an ещё-продающийся лот isn't shown as a
|
||||
measured sale time. */}
|
||||
Цена в зависимости от срока на рынке · {data.scatterDetail.note}
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ display: "flex", gap: 14, fontSize: 10 }}>
|
||||
|
|
@ -582,9 +610,9 @@ export default function AnalyticsView({
|
|||
style={{ width: "100%", height: 260, marginTop: 12 }}
|
||||
preserveAspectRatio="none"
|
||||
role="img"
|
||||
aria-label="Точечный график зависимости цены продажи от срока экспозиции: аналоги, сделки и ваш объект"
|
||||
aria-label="Точечный график зависимости цены от срока лота на рынке: аналоги, сделки и ваш объект"
|
||||
>
|
||||
<title>Цена × срок продажи</title>
|
||||
<title>Цена × срок на рынке</title>
|
||||
<g stroke={tokens.lineSoft2} strokeWidth={1}>
|
||||
<line x1={60} y1={20} x2={880} y2={20} />
|
||||
<line x1={60} y1={77} x2={880} y2={77} />
|
||||
|
|
@ -680,7 +708,7 @@ export default function AnalyticsView({
|
|||
fill={tokens.muted2}
|
||||
textAnchor="middle"
|
||||
>
|
||||
СРОК ПРОДАЖИ, ДН
|
||||
СРОК НА РЫНКЕ, ДН
|
||||
</text>
|
||||
<text
|
||||
x={18}
|
||||
|
|
|
|||
|
|
@ -616,7 +616,10 @@ function resolveDealTier(
|
|||
hiRub: sd.range_high_rub,
|
||||
medianPpm: sd.median_price_per_m2,
|
||||
count: sd.count,
|
||||
bars: bins8(sd.deals.map((d) => d.price_per_m2)),
|
||||
// Fix #1/#8: guard the deal ₽/м² histogram against a high outlier the
|
||||
// same way the ads card does — otherwise a single mis-scraped lot bins
|
||||
// over [min,max] and crushes the real deals into the left buckets.
|
||||
bars: bins8(guardPriceOutliers(sd.deals.map((d) => d.price_per_m2)).clean),
|
||||
};
|
||||
}
|
||||
const area = e.area_m2;
|
||||
|
|
@ -628,7 +631,10 @@ function resolveDealTier(
|
|||
hiRub: c.high_ppm2 * area,
|
||||
medianPpm: c.median_ppm2,
|
||||
count: c.count,
|
||||
bars: bins8(e.actual_deals.map((d) => d.price_per_m2)),
|
||||
// Fix #1/#8: same high-outlier guard as the ads card (see above).
|
||||
bars: bins8(
|
||||
guardPriceOutliers(e.actual_deals.map((d) => d.price_per_m2)).clean,
|
||||
),
|
||||
};
|
||||
}
|
||||
if (e.actual_deals.length > 0) {
|
||||
|
|
@ -643,7 +649,8 @@ function resolveDealTier(
|
|||
hiRub: Math.max(...prices),
|
||||
medianPpm: medPpm,
|
||||
count: e.actual_deals.length,
|
||||
bars: bins8(ppms),
|
||||
// Fix #1/#8: same high-outlier guard as the ads card (see above).
|
||||
bars: bins8(guardPriceOutliers(ppms).clean),
|
||||
};
|
||||
}
|
||||
return null;
|
||||
|
|
@ -1016,7 +1023,11 @@ export function mapResultPanel(
|
|||
unit: "млн ₽",
|
||||
range: rangeLine(e.range_low_rub, e.range_high_rub),
|
||||
ppm: `${fmtPpm(e.median_price_per_m2)} · по объявлениям`,
|
||||
bars: bins8(e.analogs.map((a) => a.price_per_m2)),
|
||||
// Fix #1/#8: bin over the SAME outlier-guarded pool the spread/CV uses
|
||||
// (meta.cv below) — otherwise the histogram spans [min,max] INCLUDING the
|
||||
// 872k выброс this card already reports as "исключён", squashing the real
|
||||
// analogs into the left bins while the number says the outlier is dropped.
|
||||
bars: bins8(guardPriceOutliers(e.analogs.map((a) => a.price_per_m2)).clean),
|
||||
nav: 2,
|
||||
},
|
||||
{
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue