From 45d3736a9912124d2ae258e34f6219613b12da7f Mon Sep 17 00:00:00 2001
From: 4aiman <konsorumaniakku@ya.ru>
Date: Mon, 1 Jun 2026 13:51:47 +0300
Subject: [PATCH] Chart zoom 2x faster, chart padding, clearer food cost format
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Charts:
- Zoom speed: 0.02 -> 0.04 (all 5 chart instances)
- stats-chart-block: added padding 0 14px to match content margins

Food cost of workout:
- Was: "1.8 x Хлеб (102г, 273 кк)" — ambiguous "1.8 x"
- Now: "1.8 порц. Хлеб (по 102г, 273 кк/порц.)" — clear units
- Header: "485 ккал — это как:" instead of "485 ккал ="
- Math: 485/273 = 1.78 portions of 102g each

Duplicates: seed DB has none (verified). Device dupes from pre-dedup
imports — JS migration handles them on next launch.
---
 frontend/css/styles.css |  1 +
 frontend/js/main.js     | 14 +++++++-------
 2 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/frontend/css/styles.css b/frontend/css/styles.css
index c4636a4..00a1632 100644
--- a/frontend/css/styles.css
+++ b/frontend/css/styles.css
@@ -1642,6 +1642,7 @@ select {
 /* Stats charts */
 .stats-chart-block {
   margin-bottom: 16px;
+  padding: 0 14px;
 }
 .stats-period {
   display: flex;
diff --git a/frontend/js/main.js b/frontend/js/main.js
index b2c7eac..8e60c2c 100644
--- a/frontend/js/main.js
+++ b/frontend/js/main.js
@@ -511,7 +511,7 @@ async function renderStatsCharts(container, days, foodTotals, bmr) {
           legend: { display: false },
           zoom: {
             zoom: {
-              wheel: { enabled: true, modifierKey: "ctrl", speed: 0.02 },
+              wheel: { enabled: true, modifierKey: "ctrl", speed: 0.04 },
               pinch: { enabled: true },
               mode: "x",
               onZoomStart: ({chart, event}) => {
@@ -642,7 +642,7 @@ async function renderStatsCharts(container, days, foodTotals, bmr) {
           },
           zoom: {
             zoom: {
-              wheel: { enabled: true, modifierKey: "ctrl", speed: 0.02 },
+              wheel: { enabled: true, modifierKey: "ctrl", speed: 0.04 },
               pinch: { enabled: true },
               mode: "x",
               onZoomStart: ({chart, event}) => {
@@ -760,7 +760,7 @@ async function renderStatsCharts(container, days, foodTotals, bmr) {
           },
           zoom: {
             zoom: {
-              wheel: { enabled: true, modifierKey: "ctrl", speed: 0.02 },
+              wheel: { enabled: true, modifierKey: "ctrl", speed: 0.04 },
               pinch: { enabled: true },
               mode: "x",
               onZoomStart: ({chart, event}) => {
@@ -2959,7 +2959,7 @@ async function showSessionDetail(sessionId) {
           legend: { display: false },
           zoom: {
             zoom: {
-              wheel: { enabled: true, modifierKey: "ctrl", speed: 0.02 },
+              wheel: { enabled: true, modifierKey: "ctrl", speed: 0.04 },
               pinch: { enabled: true },
               mode: "x",
               limits: { x: { minRange: 0.5 } },
@@ -3009,7 +3009,7 @@ async function showSessionDetail(sessionId) {
           legend: { display: false },
           zoom: {
             zoom: {
-              wheel: { enabled: true, modifierKey: "ctrl", speed: 0.02 },
+              wheel: { enabled: true, modifierKey: "ctrl", speed: 0.04 },
               pinch: { enabled: true },
               mode: "x",
               limits: { x: { minRange: 0.5 } },
@@ -3223,11 +3223,11 @@ async function showSessionDetail(sessionId) {
       // Take first 3, build readable string
       const display = parts.slice(0, 3);
       const lines = display.map(p =>
-        `${p.portions} x ${esc(p.name)}${p.amountStr ? " (" + p.amountStr + ", " + p.servingKcal + " кк)" : ""}`
+        `${p.portions} порц. ${esc(p.name)} (по ${p.amountStr || "?"}, ${p.servingKcal} кк/порц.)`
       );
 
       costSection.style.display = "";
-      costEl.innerHTML = `<div class="food-cost-total">${Math.round(sessionKcal)} ккал =</div>
+      costEl.innerHTML = `<div class="food-cost-total">${Math.round(sessionKcal)} ккал — это как:</div>
         <div class="food-cost-items">${lines.map(l => `<div class="food-cost-line">${l}</div>`).join('<div class="food-cost-or">или</div>')}</div>`;
     } catch (e) { console.error("[food-cost]", e); }
   }, 600);