From ab289165b5da2b5e82d497ba4b6d6456ea8657fa Mon Sep 17 00:00:00 2001
From: "a.tolmachev" <a.tolmachev@tbank.ru>
Date: Wed, 1 Apr 2026 09:48:04 +0300
Subject: [PATCH] fix: render usage timeline bars correctly

---
 apps/ui/css/usage.css | 15 ++++++++++++++-
 apps/ui/js/usage.js   |  6 ++++++
 2 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/apps/ui/css/usage.css b/apps/ui/css/usage.css
index 9785ebe..356b0f4 100644
--- a/apps/ui/css/usage.css
+++ b/apps/ui/css/usage.css
@@ -34,10 +34,23 @@
   position: relative;
 }
 
-.chart-bar {
+.chart-col {
   flex: 1;
+  min-width: 0;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 2px;
+  position: relative;
+}
+
+.chart-bar {
+  flex: 0 0 auto;
   border-radius: 3px 3px 0 0;
   min-width: 0;
+  width: 100%;
   transition: opacity 0.15s;
   position: relative;
   cursor: pointer;
diff --git a/apps/ui/js/usage.js b/apps/ui/js/usage.js
index 0288d67..b9b990c 100644
--- a/apps/ui/js/usage.js
+++ b/apps/ui/js/usage.js
@@ -145,6 +145,12 @@ document.addEventListener('DOMContentLoaded', function () {
       var node = chartTemplate.content.cloneNode(true);
       var okHeight = maxValue ? Math.round((point.calls_ok / maxValue) * 160) : 0;
       var errorHeight = maxValue ? Math.round((point.calls_error / maxValue) * 160) : 0;
+      if (point.calls_ok > 0) {
+        okHeight = Math.max(okHeight, 6);
+      }
+      if (point.calls_error > 0) {
+        errorHeight = Math.max(errorHeight, 6);
+      }
       node.querySelector('.chart-bar.success').style.height = okHeight + 'px';
       node.querySelector('.chart-bar.success').dataset.tip = formatCount(point.calls_ok) + ' ok';
       node.querySelector('.chart-bar.error').style.height = errorHeight + 'px';