From abb608fb1e3473778f6793d6f2ec853653c3cb2e Mon Sep 17 00:00:00 2001
From: brusnitsyn <brusnitsyn@gmail.com>
Date: Wed, 17 Jun 2026 10:26:22 +0900
Subject: [PATCH] =?UTF-8?q?=D0=98=D0=B7=D0=BC=D0=B5=D0=BD=D0=B8=D0=BB=20?=
 =?UTF-8?q?=D0=B2=D0=B8=D0=B7=D1=83=D0=B0=D0=BB=20=D0=B8=20=D0=B4=D0=BE?=
 =?UTF-8?q?=D0=B1=D0=B0=D0=B2=D0=B8=D0=BB=20=D0=BE=D1=82=D0=BC=D0=B5=D1=82?=
 =?UTF-8?q?=D0=BA=D1=83=20=D0=B2=20100%=20=D0=BF=D0=BE=20=D0=B7=D0=B0?=
 =?UTF-8?q?=D0=B4=D0=B0=D1=87=D0=B5=20#6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 resources/js/Pages/Statistic/Headquarters.vue | 48 +++++++++++++------
 1 file changed, 33 insertions(+), 15 deletions(-)

diff --git a/resources/js/Pages/Statistic/Headquarters.vue b/resources/js/Pages/Statistic/Headquarters.vue
index 3301a24..94de1d5 100644
--- a/resources/js/Pages/Statistic/Headquarters.vue
+++ b/resources/js/Pages/Statistic/Headquarters.vue
@@ -109,47 +109,65 @@ const baseTooltip = {
     style: { fontSize: '12px', fontFamily: FONT },
 }
 
-// --- График: Загруженность коек (горизонтальный бар) ---
+// --- График: Загруженность коек (вертикальные столбцы, как «Норма и выбытие») ---
+// Верхняя граница оси: минимум 100%, с запасом если есть перегруженные отделения
+const bedMax = computed(() => {
+    const peak = Math.max(0, ...departments.value.map(d => d.percentLoadedBeds ?? 0))
+    return peak <= 100 ? 100 : Math.ceil(peak / 10) * 10
+})
+
 const bedOccupancyOptions = computed(() => ({
     chart: baseChart('bar'),
     theme: { mode: 'dark' },
     plotOptions: {
         bar: {
-            horizontal: true,
             borderRadius: 5,
             borderRadiusApplication: 'end',
             distributed: true,
-            barHeight: '58%',
+            columnWidth: '60%',
             dataLabels: { position: 'top' },
         },
     },
     fill: {
         type: 'gradient',
         gradient: {
-            type: 'horizontal',
-            opacityFrom: 0.75,
-            opacityTo: 1,
+            shade: 'dark',
+            type: 'vertical',
+            opacityFrom: 1,
+            opacityTo: 0.55,
             stops: [0, 100],
         },
     },
     dataLabels: {
         enabled: true,
         formatter: v => `${v}%`,
-        style: { fontSize: '11px', fontFamily: FONT, fontWeight: 600, colors: [LABEL_COLOR] },
-        offsetX: 28,
+        style: { fontSize: '10px', fontFamily: FONT, fontWeight: 600, colors: [LABEL_COLOR] },
+        offsetY: -6,
     },
     xaxis: {
         categories: departments.value.map(d => d.department),
-        max: 100,
-        labels: { style: { colors: AXIS_COLOR, fontSize: '11px', fontFamily: FONT }, formatter: v => `${v}%` },
+        labels: { style: { colors: AXIS_COLOR, fontSize: '10px', fontFamily: FONT }, rotate: -40, rotateAlways: true },
         axisBorder: { show: false },
         axisTicks: { show: false },
     },
     yaxis: {
-        labels: {
-            style: { colors: AXIS_COLOR, fontSize: '11px', fontFamily: FONT },
-            maxWidth: 170,
-        },
+        min: 0,
+        max: bedMax.value,
+        tickAmount: 5,
+        labels: { style: { colors: AXIS_COLOR, fontFamily: FONT }, formatter: v => `${Math.round(v)}%` },
+    },
+    annotations: {
+        yaxis: [{
+            y: 100,
+            borderColor: '#d03050',
+            strokeDashArray: 4,
+            label: {
+                text: '100%',
+                position: 'right',
+                borderColor: '#d03050',
+                style: { background: '#d03050', color: '#fff', fontSize: '10px', fontFamily: FONT },
+            },
+        }],
     },
     colors: departments.value.map(d => loadColor(d.percentLoadedBeds)),
     tooltip: {
@@ -161,7 +179,7 @@ const bedOccupancyOptions = computed(() => ({
             },
         },
     },
-    grid: { ...baseGrid, yaxis: { lines: { show: false } } },
+    grid: baseGrid,
     legend: { show: false },
 }))