From a575f59378e7f238e85dc6eba2746c83fd506237 Mon Sep 17 00:00:00 2001
From: bot-backend <alexandro361@gmail.com>
Date: Sun, 12 Jul 2026 17:54:04 +0300
Subject: [PATCH] =?UTF-8?q?fix(tradein/v2):=20=D0=B0=D0=BD=D0=B0=D0=BB?=
 =?UTF-8?q?=D0=B8=D1=82=D0=B8=D0=BA=D0=B0=20=E2=80=94=202=20=D0=B3=D1=80?=
 =?UTF-8?q?=D0=B0=D1=84=D0=B8=D0=BA=D0=B0=20=D0=B2=20=D1=80=D1=8F=D0=B4,?=
 =?UTF-8?q?=20=D1=87=D1=82=D0=BE=D0=B1=D1=8B=20=D0=A6=D0=B5=D0=BD=D0=B0?=
 =?UTF-8?q?=C3=97=D1=81=D1=80=D0=BE=D0=BA=20=D0=B2=D0=BB=D0=B5=D0=B7=D0=B0?=
 =?UTF-8?q?=D0=BB=D0=B0=20=D0=BD=D0=B0=20=D1=8D=D0=BA=D1=80=D0=B0=D0=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

"История цен в этом доме" и "Цена × срок продажи" стояли друг под другом и
переполняли фиксированную высоту v2-панели (scrollHeight 1041px vs ~847px
видимой области) — scatter-график обрезался, требовался скролл. Ставим оба
блока в один ряд (grid 1fr 1fr, gap 16, align-items start) — освобождает
ровно ~194px по вертикали, весь оверлей помещается без скролла. Высоты и
viewBox самих SVG не трогали.
---
 .../components/trade-in/v2/AnalyticsView.tsx  | 658 +++++++++---------
 1 file changed, 335 insertions(+), 323 deletions(-)

diff --git a/tradein-mvp/frontend/src/components/trade-in/v2/AnalyticsView.tsx b/tradein-mvp/frontend/src/components/trade-in/v2/AnalyticsView.tsx
index 6d972aa4..64861eca 100644
--- a/tradein-mvp/frontend/src/components/trade-in/v2/AnalyticsView.tsx
+++ b/tradein-mvp/frontend/src/components/trade-in/v2/AnalyticsView.tsx
@@ -327,204 +327,196 @@ export default function AnalyticsView({
         )}
       </div>
 
-      {/* история цен */}
-      <div style={{ position: "relative", ...cardStyle }}>
-        <div
-          style={{
-            display: "flex",
-            alignItems: "flex-end",
-            justifyContent: "space-between",
-          }}
-        >
-          <div>
-            <div style={{ fontSize: 12, fontWeight: 600, color: tokens.ink2 }}>
-              История цен в этом доме
-            </div>
-            <div style={{ fontSize: 10, color: tokens.muted2, marginTop: 4 }}>
-              {historyNote}
-            </div>
-          </div>
-          <div style={{ display: "flex", gap: 16, fontSize: 10 }}>
-            {avitoPts.length > 0 ? (
-              <span
-                style={{
-                  display: "flex",
-                  alignItems: "center",
-                  gap: 6,
-                  color: tokens.muted,
-                }}
-              >
-                <span
-                  style={{ width: 14, height: 2, background: tokens.accent }}
-                />
-                Avito
-              </span>
-            ) : null}
-            {yandexPts.length > 0 ? (
-              <span
-                style={{
-                  display: "flex",
-                  alignItems: "center",
-                  gap: 6,
-                  color: tokens.muted,
-                }}
-              >
-                <span
-                  style={{ width: 14, height: 2, background: tokens.gold }}
-                />
-                Яндекс
-              </span>
-            ) : null}
-          </div>
-        </div>
-        <svg
-          viewBox="0 0 900 220"
-          style={{ width: "100%", height: 200, marginTop: 12 }}
-          preserveAspectRatio="none"
-          role="img"
-          aria-label="График истории цен в этом доме: медиана ₽/м² по годам, серии Avito и Яндекс"
-        >
-          <title>История цен в этом доме — медиана ₽/м² по годам</title>
-          <g stroke={tokens.lineSoft2} strokeWidth={1}>
-            {PH_GRID_Y.map((y) => (
-              <line key={y} x1={40} y1={y} x2={900} y2={y} />
-            ))}
-          </g>
-          <g fontFamily={tokens.font.mono} fontSize={11} fill={tokens.muted2}>
-            {data.priceHistory.yTicks.map((t) => (
-              <text key={t.label} x={0} y={t.y + 4}>
-                {t.label}
-              </text>
-            ))}
-          </g>
-          <g
-            fontFamily={tokens.font.mono}
-            fontSize={11}
-            fill={tokens.muted2}
-            textAnchor="middle"
-          >
-            {data.priceHistory.years.map((yr, i) => (
-              <text
-                key={yr}
-                x={histYearX(i, data.priceHistory.years.length)}
-                y={214}
-              >
-                {yr}
-              </text>
-            ))}
-          </g>
-          <polyline
-            points={data.priceHistory.avito}
-            fill="none"
-            stroke={tokens.accent}
-            strokeWidth={2.5}
-          />
-          <polyline
-            points={data.priceHistory.yandex}
-            fill="none"
-            stroke={tokens.gold}
-            strokeWidth={2.5}
-          />
-          {/* white dot fill on an accent ring — documented one-off, no token (design l.568) */}
-          <g
-            fill="#fff"
-            stroke={tokens.accent}
-            strokeWidth={2}
-            style={{ cursor: "pointer" }}
-          >
-            <title>Архивные объявления Avito · нажмите, чтобы открыть</title>
-            {avitoPts.map((p, i) => (
-              <circle key={i} cx={p.x} cy={p.y} r={3.5} />
-            ))}
-          </g>
-          <g
-            fill={tokens.gold}
-            stroke={tokens.gold}
-            strokeWidth={2}
-            style={{ cursor: "pointer" }}
-          >
-            {yandexDots.map((p, i) => (
-              <circle key={i} cx={p.x} cy={p.y} r={3.5} />
-            ))}
-          </g>
-          <g
-            fill="transparent"
-            style={{ cursor: "pointer" }}
-            onMouseEnter={() => setHoverHist(true)}
-            onMouseLeave={() => setHoverHist(false)}
-            onClick={() => onNavigate?.(2)}
-          >
-            {hoverPts.map((p, i) => (
-              <circle key={i} cx={p.x} cy={p.y} r={13} />
-            ))}
-          </g>
-        </svg>
-        {hoverHist ? (
-          // Dark navy tooltip surface + white text — documented one-off literals
-          // matching the design (l.572); no token equivalent.
+      {/* история цен + цена × срок продажи — side by side so both fit the
+          fixed-height v2 artboard panel without scrolling (reclaims ~194px
+          of vertical space vs. stacking; chart heights unchanged). */}
+      <div
+        style={{
+          display: "grid",
+          gridTemplateColumns: "1fr 1fr",
+          gap: 16,
+          alignItems: "start",
+        }}
+      >
+        {/* история цен */}
+        <div style={{ position: "relative", ...cardStyle }}>
           <div
             style={{
-              position: "absolute",
-              left: 64,
-              top: 54,
-              background: "rgba(23,38,58,.96)",
-              color: "#fff",
-              borderRadius: 7,
-              padding: "9px 13px",
-              fontSize: 11,
-              lineHeight: 1.5,
-              zIndex: 6,
-              pointerEvents: "none",
-              boxShadow: "0 10px 26px rgba(20,40,70,.28)",
+              display: "flex",
+              alignItems: "flex-end",
+              justifyContent: "space-between",
             }}
           >
-            <div style={{ fontWeight: 600 }}>
-              Архивные объявления этого дома
+            <div>
+              <div style={{ fontSize: 12, fontWeight: 600, color: tokens.ink2 }}>
+                История цен в этом доме
+              </div>
+              <div style={{ fontSize: 10, color: tokens.muted2, marginTop: 4 }}>
+                {historyNote}
+              </div>
             </div>
-            <div style={{ color: tokens.barMid, fontSize: 10, marginTop: 2 }}>
-              Нажмите, чтобы открыть список →
+            <div style={{ display: "flex", gap: 16, fontSize: 10 }}>
+              {avitoPts.length > 0 ? (
+                <span
+                  style={{
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 6,
+                    color: tokens.muted,
+                  }}
+                >
+                  <span
+                    style={{ width: 14, height: 2, background: tokens.accent }}
+                  />
+                  Avito
+                </span>
+              ) : null}
+              {yandexPts.length > 0 ? (
+                <span
+                  style={{
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 6,
+                    color: tokens.muted,
+                  }}
+                >
+                  <span
+                    style={{ width: 14, height: 2, background: tokens.gold }}
+                  />
+                  Яндекс
+                </span>
+              ) : null}
             </div>
           </div>
-        ) : null}
-      </div>
-
-      {/* цена × срок продажи (детально) */}
-      <div style={cardStyle}>
-        <div
-          style={{
-            display: "flex",
-            alignItems: "flex-end",
-            justifyContent: "space-between",
-          }}
-        >
-          <div>
-            <div style={{ fontSize: 12, fontWeight: 600, color: tokens.ink2 }}>
-              Цена × срок продажи
-            </div>
-            <div style={{ fontSize: 10, color: tokens.muted2, marginTop: 4 }}>
-              Зависимость цены от срока экспозиции · {data.scatterDetail.note}
-            </div>
-          </div>
-          <div style={{ display: "flex", gap: 14, fontSize: 10 }}>
-            <span
+          <svg
+            viewBox="0 0 900 220"
+            style={{ width: "100%", height: 200, marginTop: 12 }}
+            preserveAspectRatio="none"
+            role="img"
+            aria-label="График истории цен в этом доме: медиана ₽/м² по годам, серии Avito и Яндекс"
+          >
+            <title>История цен в этом доме — медиана ₽/м² по годам</title>
+            <g stroke={tokens.lineSoft2} strokeWidth={1}>
+              {PH_GRID_Y.map((y) => (
+                <line key={y} x1={40} y1={y} x2={900} y2={y} />
+              ))}
+            </g>
+            <g fontFamily={tokens.font.mono} fontSize={11} fill={tokens.muted2}>
+              {data.priceHistory.yTicks.map((t) => (
+                <text key={t.label} x={0} y={t.y + 4}>
+                  {t.label}
+                </text>
+              ))}
+            </g>
+            <g
+              fontFamily={tokens.font.mono}
+              fontSize={11}
+              fill={tokens.muted2}
+              textAnchor="middle"
+            >
+              {data.priceHistory.years.map((yr, i) => (
+                <text
+                  key={yr}
+                  x={histYearX(i, data.priceHistory.years.length)}
+                  y={214}
+                >
+                  {yr}
+                </text>
+              ))}
+            </g>
+            <polyline
+              points={data.priceHistory.avito}
+              fill="none"
+              stroke={tokens.accent}
+              strokeWidth={2.5}
+            />
+            <polyline
+              points={data.priceHistory.yandex}
+              fill="none"
+              stroke={tokens.gold}
+              strokeWidth={2.5}
+            />
+            {/* white dot fill on an accent ring — documented one-off, no token (design l.568) */}
+            <g
+              fill="#fff"
+              stroke={tokens.accent}
+              strokeWidth={2}
+              style={{ cursor: "pointer" }}
+            >
+              <title>Архивные объявления Avito · нажмите, чтобы открыть</title>
+              {avitoPts.map((p, i) => (
+                <circle key={i} cx={p.x} cy={p.y} r={3.5} />
+              ))}
+            </g>
+            <g
+              fill={tokens.gold}
+              stroke={tokens.gold}
+              strokeWidth={2}
+              style={{ cursor: "pointer" }}
+            >
+              {yandexDots.map((p, i) => (
+                <circle key={i} cx={p.x} cy={p.y} r={3.5} />
+              ))}
+            </g>
+            <g
+              fill="transparent"
+              style={{ cursor: "pointer" }}
+              onMouseEnter={() => setHoverHist(true)}
+              onMouseLeave={() => setHoverHist(false)}
+              onClick={() => onNavigate?.(2)}
+            >
+              {hoverPts.map((p, i) => (
+                <circle key={i} cx={p.x} cy={p.y} r={13} />
+              ))}
+            </g>
+          </svg>
+          {hoverHist ? (
+            // Dark navy tooltip surface + white text — documented one-off literals
+            // matching the design (l.572); no token equivalent.
+            <div
               style={{
-                display: "flex",
-                alignItems: "center",
-                gap: 6,
-                color: tokens.muted,
+                position: "absolute",
+                left: 64,
+                top: 54,
+                background: "rgba(23,38,58,.96)",
+                color: "#fff",
+                borderRadius: 7,
+                padding: "9px 13px",
+                fontSize: 11,
+                lineHeight: 1.5,
+                zIndex: 6,
+                pointerEvents: "none",
+                boxShadow: "0 10px 26px rgba(20,40,70,.28)",
               }}
             >
-              <span
-                style={{
-                  width: 8,
-                  height: 8,
-                  borderRadius: "50%",
-                  background: tokens.accent,
-                }}
-              />
-              аналоги
-            </span>
-            {data.scatterDetail.deals.length > 0 ? (
+              <div style={{ fontWeight: 600 }}>
+                Архивные объявления этого дома
+              </div>
+              <div style={{ color: tokens.barMid, fontSize: 10, marginTop: 2 }}>
+                Нажмите, чтобы открыть список →
+              </div>
+            </div>
+          ) : null}
+        </div>
+
+        {/* цена × срок продажи (детально) */}
+        <div style={cardStyle}>
+          <div
+            style={{
+              display: "flex",
+              alignItems: "flex-end",
+              justifyContent: "space-between",
+            }}
+          >
+            <div>
+              <div style={{ fontSize: 12, fontWeight: 600, color: tokens.ink2 }}>
+                Цена × срок продажи
+              </div>
+              <div style={{ fontSize: 10, color: tokens.muted2, marginTop: 4 }}>
+                Зависимость цены от срока экспозиции · {data.scatterDetail.note}
+              </div>
+            </div>
+            <div style={{ display: "flex", gap: 14, fontSize: 10 }}>
               <span
                 style={{
                   display: "flex",
@@ -538,149 +530,169 @@ export default function AnalyticsView({
                     width: 8,
                     height: 8,
                     borderRadius: "50%",
-                    background: tokens.scatterDeal,
+                    background: tokens.accent,
                   }}
                 />
-                сделки
+                аналоги
               </span>
-            ) : null}
-            <span
-              style={{
-                display: "flex",
-                alignItems: "center",
-                gap: 6,
-                color: tokens.muted,
-              }}
-            >
+              {data.scatterDetail.deals.length > 0 ? (
+                <span
+                  style={{
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 6,
+                    color: tokens.muted,
+                  }}
+                >
+                  <span
+                    style={{
+                      width: 8,
+                      height: 8,
+                      borderRadius: "50%",
+                      background: tokens.scatterDeal,
+                    }}
+                  />
+                  сделки
+                </span>
+              ) : null}
               <span
                 style={{
-                  width: 8,
-                  height: 8,
-                  borderRadius: "50%",
-                  background: tokens.ink,
+                  display: "flex",
+                  alignItems: "center",
+                  gap: 6,
+                  color: tokens.muted,
                 }}
-              />
-              объект
-            </span>
+              >
+                <span
+                  style={{
+                    width: 8,
+                    height: 8,
+                    borderRadius: "50%",
+                    background: tokens.ink,
+                  }}
+                />
+                объект
+              </span>
+            </div>
           </div>
+          <svg
+            viewBox="0 0 900 300"
+            style={{ width: "100%", height: 280, marginTop: 12 }}
+            preserveAspectRatio="none"
+            role="img"
+            aria-label="Точечный график зависимости цены продажи от срока экспозиции: аналоги, сделки и ваш объект"
+          >
+            <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} />
+              <line x1={60} y1={134} x2={880} y2={134} />
+              <line x1={60} y1={191} x2={880} y2={191} />
+              <line x1={60} y1={250} x2={880} y2={250} />
+              <line x1={265} y1={20} x2={265} y2={250} />
+              <line x1={470} y1={20} x2={470} y2={250} />
+              <line x1={675} y1={20} x2={675} y2={250} />
+            </g>
+            <line
+              x1={60}
+              y1={20}
+              x2={60}
+              y2={250}
+              stroke={tokens.line3}
+              strokeWidth={1.5}
+            />
+            <line
+              x1={60}
+              y1={250}
+              x2={880}
+              y2={250}
+              stroke={tokens.line3}
+              strokeWidth={1.5}
+            />
+            <g fill={tokens.scatterDeal}>
+              {data.scatterDetail.deals.map((p, i) => (
+                <circle key={i} cx={p.x} cy={p.y} r={p.r} />
+              ))}
+            </g>
+            <g fill={tokens.accent}>
+              {data.scatterDetail.analogs.map((p, i) => (
+                <circle key={i} cx={p.x} cy={p.y} r={p.r} />
+              ))}
+            </g>
+            <g opacity={data.scatterDetail.subjectApprox ? 0.55 : 1}>
+              {/* V4: subjectApprox marks a fallback x (est_days_on_market unknown) —
+                  dashed ring + title flag it as an estimate, not a measurement. */}
+              {data.scatterDetail.subjectApprox ? (
+                <title>
+                  Срок продажи — оценка (~90 дн.), точных данных нет
+                </title>
+              ) : null}
+              <circle
+                cx={data.scatterDetail.subject.x}
+                cy={data.scatterDetail.subject.y}
+                r={data.scatterDetail.subject.r}
+                fill={tokens.ink}
+              />
+              <circle
+                cx={data.scatterDetail.subject.x}
+                cy={data.scatterDetail.subject.y}
+                r={11}
+                fill="none"
+                stroke={tokens.ink}
+                strokeWidth={1.2}
+                strokeDasharray={
+                  data.scatterDetail.subjectApprox ? "3 3" : undefined
+                }
+                opacity={0.4}
+              />
+            </g>
+            <g
+              fontFamily={tokens.font.mono}
+              fontSize={11}
+              fill={tokens.muted2}
+              textAnchor="end"
+            >
+              {data.scatterDetail.yTicks.map((t) => (
+                <text key={t.label} x={52} y={t.y}>
+                  {t.label}
+                </text>
+              ))}
+            </g>
+            <g
+              fontFamily={tokens.font.mono}
+              fontSize={11}
+              fill={tokens.muted2}
+              textAnchor="middle"
+            >
+              {data.scatterDetail.xTicks.map((t) => (
+                <text key={t.label} x={t.x} y={268}>
+                  {t.label}
+                </text>
+              ))}
+            </g>
+            <text
+              x={470}
+              y={288}
+              fontSize={10}
+              letterSpacing={1}
+              fill={tokens.muted2}
+              textAnchor="middle"
+            >
+              СРОК ПРОДАЖИ, ДН
+            </text>
+            <text
+              x={18}
+              y={135}
+              fontSize={10}
+              letterSpacing={1}
+              fill={tokens.muted2}
+              textAnchor="middle"
+              transform="rotate(-90 18 135)"
+            >
+              ЦЕНА ПРОДАЖИ, ₽
+            </text>
+          </svg>
         </div>
-        <svg
-          viewBox="0 0 900 300"
-          style={{ width: "100%", height: 280, marginTop: 12 }}
-          preserveAspectRatio="none"
-          role="img"
-          aria-label="Точечный график зависимости цены продажи от срока экспозиции: аналоги, сделки и ваш объект"
-        >
-          <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} />
-            <line x1={60} y1={134} x2={880} y2={134} />
-            <line x1={60} y1={191} x2={880} y2={191} />
-            <line x1={60} y1={250} x2={880} y2={250} />
-            <line x1={265} y1={20} x2={265} y2={250} />
-            <line x1={470} y1={20} x2={470} y2={250} />
-            <line x1={675} y1={20} x2={675} y2={250} />
-          </g>
-          <line
-            x1={60}
-            y1={20}
-            x2={60}
-            y2={250}
-            stroke={tokens.line3}
-            strokeWidth={1.5}
-          />
-          <line
-            x1={60}
-            y1={250}
-            x2={880}
-            y2={250}
-            stroke={tokens.line3}
-            strokeWidth={1.5}
-          />
-          <g fill={tokens.scatterDeal}>
-            {data.scatterDetail.deals.map((p, i) => (
-              <circle key={i} cx={p.x} cy={p.y} r={p.r} />
-            ))}
-          </g>
-          <g fill={tokens.accent}>
-            {data.scatterDetail.analogs.map((p, i) => (
-              <circle key={i} cx={p.x} cy={p.y} r={p.r} />
-            ))}
-          </g>
-          <g opacity={data.scatterDetail.subjectApprox ? 0.55 : 1}>
-            {/* V4: subjectApprox marks a fallback x (est_days_on_market unknown) —
-                dashed ring + title flag it as an estimate, not a measurement. */}
-            {data.scatterDetail.subjectApprox ? (
-              <title>
-                Срок продажи — оценка (~90 дн.), точных данных нет
-              </title>
-            ) : null}
-            <circle
-              cx={data.scatterDetail.subject.x}
-              cy={data.scatterDetail.subject.y}
-              r={data.scatterDetail.subject.r}
-              fill={tokens.ink}
-            />
-            <circle
-              cx={data.scatterDetail.subject.x}
-              cy={data.scatterDetail.subject.y}
-              r={11}
-              fill="none"
-              stroke={tokens.ink}
-              strokeWidth={1.2}
-              strokeDasharray={
-                data.scatterDetail.subjectApprox ? "3 3" : undefined
-              }
-              opacity={0.4}
-            />
-          </g>
-          <g
-            fontFamily={tokens.font.mono}
-            fontSize={11}
-            fill={tokens.muted2}
-            textAnchor="end"
-          >
-            {data.scatterDetail.yTicks.map((t) => (
-              <text key={t.label} x={52} y={t.y}>
-                {t.label}
-              </text>
-            ))}
-          </g>
-          <g
-            fontFamily={tokens.font.mono}
-            fontSize={11}
-            fill={tokens.muted2}
-            textAnchor="middle"
-          >
-            {data.scatterDetail.xTicks.map((t) => (
-              <text key={t.label} x={t.x} y={268}>
-                {t.label}
-              </text>
-            ))}
-          </g>
-          <text
-            x={470}
-            y={288}
-            fontSize={10}
-            letterSpacing={1}
-            fill={tokens.muted2}
-            textAnchor="middle"
-          >
-            СРОК ПРОДАЖИ, ДН
-          </text>
-          <text
-            x={18}
-            y={135}
-            fontSize={10}
-            letterSpacing={1}
-            fill={tokens.muted2}
-            textAnchor="middle"
-            transform="rotate(-90 18 135)"
-          >
-            ЦЕНА ПРОДАЖИ, ₽
-          </text>
-        </svg>
       </div>
     </div>
   );
-- 
2.45.3