From 1a794ab1d57baa10a09bd5f194ce24b39cc67320 Mon Sep 17 00:00:00 2001
From: tore <ekazhman@gmail.com>
Date: Fri, 4 Sep 2026 09:39:41 +0000
Subject: [PATCH] =?UTF-8?q?feat:=20=D0=BF=D0=BE=D0=B4=D0=BF=D0=B8=D1=81?=
 =?UTF-8?q?=D0=B8=20=D0=BA=D0=B0=D1=82=D0=B5=D0=B3=D0=BE=D1=80=D0=B8=D0=B9?=
 =?UTF-8?q?=20=D0=BF=D0=BE=D0=B4=20=D1=81=D1=82=D0=BE=D0=BB=D0=B1=D1=86?=
 =?UTF-8?q?=D0=B0=D0=BC=D0=B8=20=D0=B3=D1=80=D0=B0=D1=84=D0=B8=D0=BA=D0=BE?=
 =?UTF-8?q?=D0=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/index.html b/index.html
index 7d10d1a..201be04 100644
--- a/index.html
+++ b/index.html
@@ -14,11 +14,12 @@
     @media (max-width: 900px) { .kpi-strip { grid-template-columns: repeat(2, 1fr); } }
     .charts-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; padding: 0 32px 24px; }
     @media (max-width: 900px) { .charts-row { grid-template-columns: 1fr; } }
-    .chart-wrap { height: 220px; position: relative; display: flex; align-items: flex-end; gap: 4px; padding-top: 28px; overflow-x: auto; }
+    .chart-wrap { height: 280px; position: relative; display: flex; align-items: flex-end; gap: 4px; padding-top: 28px; padding-bottom: 60px; overflow-x: auto; }
     .bar { flex: 1; min-width: 20px; max-width: 28px; border-radius: 2px 2px 0 0; position: relative; cursor: pointer; }
     .bar[data-kt-tip]::after { content: attr(data-kt-tip); position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%); background: var(--kt-ai-overlay); color: var(--kt-ai-fg-on-fill); padding: 4px 8px; border-radius: 4px; font-size: 11px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.15s; }
     .bar:hover::after { opacity: 1; }
-    .bar-value { position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%); font-size: 11px; font-family: var(--kt-ai-font-mono); color: var(--kt-ai-fg-muted); }
+    .bar-value { position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%); font-size: 11px; font-family: var(--kt-ai-font-mono); color: var(--kt-ai-fg-muted); white-space: nowrap; }
+    .bar-label { position: absolute; bottom: -56px; left: 50%; transform: translateX(-50%) rotate(-35deg); transform-origin: center top; font-size: 10px; color: var(--kt-ai-fg-muted); white-space: nowrap; }
     .table-section { padding: 0 32px 32px; }
     .table-controls { display: flex; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
     .chip-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
@@ -157,21 +158,24 @@
     document.getElementById('kpi-service').title = topService[0];
     document.getElementById('kpi-region').textContent = topRegion[0];
 
-    function renderChart(containerId, data, colorVar) {
+    function renderChart(containerId, data, colorVar, isService) {
       const container = document.getElementById(containerId);
       const maxVal = Math.max(...data.map(d => d.value));
       container.innerHTML = data.map((d, i) => {
         const h = (d.value / maxVal) * 170;
-        return `<div class="bar" data-kt-tip="${d.label}: ${fmtNum(d.value)}" style="height:${h}px;background:var(${colorVar});">
+        const shortLabel = isService ? (d.label.length > 14 ? d.label.slice(0, 14) + '…' : d.label) : d.label;
+        const tipLabel = isService ? d.label : shortLabel;
+        return `<div class="bar" data-kt-tip="${tipLabel}: ${fmtNum(d.value)}" style="height:${h}px;background:var(${colorVar});">
           <span class="bar-value">${fmtNum(d.value)}</span>
+          <span class="bar-label">${shortLabel}</span>
         </div>`;
       }).join('');
     }
 
     const regionData = Object.entries(byRegion).sort((a, b) => b[1] - a[1]).slice(0, 12).map(([label, value]) => ({ label, value }));
     const serviceData = Object.entries(byService).sort((a, b) => b[1] - a[1]).slice(0, 12).map(([label, value]) => ({ label, value: value }));
-    renderChart('chart-regions', regionData, '--kt-ai-chart-blue');
-    renderChart('chart-services', serviceData, '--kt-ai-chart-green');
+    renderChart('chart-regions', regionData, '--kt-ai-chart-blue', false);
+    renderChart('chart-services', serviceData, '--kt-ai-chart-green', true);
 
     const regionFilter = document.getElementById('region-filter');
     const chipRow = document.getElementById('chip-row');