Изменил визуал и добавил отметку в 100% по задаче #6

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',
+            shade: 'dark',
-            opacityFrom: 0.75,
+            type: 'vertical',
-            opacityTo: 1,
+            opacityFrom: 1,
+            opacityTo: 0.55,
             stops: [0, 100],
         },
     },
     dataLabels: {
         enabled: true,
         formatter: v => `${v}%`,
-        style: { fontSize: '11px', fontFamily: FONT, fontWeight: 600, colors: [LABEL_COLOR] },
+        style: { fontSize: '10px', fontFamily: FONT, fontWeight: 600, colors: [LABEL_COLOR] },
-        offsetX: 28,
+        offsetY: -6,
     },
     xaxis: {
         categories: departments.value.map(d => d.department),
-        max: 100,
+        labels: { style: { colors: AXIS_COLOR, fontSize: '10px', fontFamily: FONT }, rotate: -40, rotateAlways: true },
-        labels: { style: { colors: AXIS_COLOR, fontSize: '11px', fontFamily: FONT }, formatter: v => `${v}%` },
         axisBorder: { show: false },
         axisTicks: { show: false },
     },
     yaxis: {
-        labels: {
+        min: 0,
-            style: { colors: AXIS_COLOR, fontSize: '11px', fontFamily: FONT },
+        max: bedMax.value,
-            maxWidth: 170,
+        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 },
 }))