Change grid-stack-item sizes

Author: jacquesbach

templates/index.html

@@ -98,7 +98,7 @@ <h1>
 
       <div class="grid-stack" id="dashboard-grid">
 
-        <div class="grid-stack-item" id="card-total" gs-w="4" gs-h="2" gs-min-w="2" gs-min-h="2">
+        <div class="grid-stack-item" id="card-total" gs-w="4" gs-h="5" gs-min-w="2" gs-min-h="2">
           <div class="grid-stack-item-content">
             <div class="card card-gradient" style="height: 100%; box-sizing: border-box;">
               <div id="totalLoading" style="position:absolute; inset:0; background:rgba(255,255,255,0.15); display:none; align-items:center; justify-content:center; border-radius:24px; z-index:10;">
@@ -114,7 +114,7 @@ <h1>
           </div>
         </div>
 
-        <div class="grid-stack-item" id="card-live" gs-w="8" gs-h="2" gs-min-w="4" gs-min-h="2">
+        <div class="grid-stack-item" id="card-live" gs-w="8" gs-h="5" gs-min-w="4" gs-min-h="2">
           <div class="grid-stack-item-content">
             <div class="card card-light" style="height: 100%; text-align: left; box-sizing: border-box;">
               <div class="label" style="border-bottom: 1px solid #f0f0f0; padding-bottom: 10px; margin-bottom: 20px;">
@@ -129,7 +129,7 @@ <h1>
           </div>
         </div>
 
-        <div class="grid-stack-item" id="card-main-chart" gs-w="12" gs-h="4" gs-min-w="3" gs-min-h="3">
+        <div class="grid-stack-item" id="card-main-chart" gs-w="6" gs-h="10" gs-min-w="3" gs-min-h="3">
           <div class="grid-stack-item-content">
             <div class="chart-card" style="height: 100%; box-sizing: border-box; position: relative;">
               <div id="chartLoading" style="position:absolute; inset:0; background:rgba(255,255,255,0.75); display:none; align-items:center; justify-content:center; border-radius:24px; z-index:10;">
@@ -146,7 +146,7 @@ <h1>
           </div>
         </div>
 
-        <div class="grid-stack-item" id="card-panel-chart" gs-w="12" gs-h="4" gs-min-w="3" gs-min-h="3">
+        <div class="grid-stack-item" id="card-panel-chart" gs-w="6" gs-h="10" gs-min-w="3" gs-min-h="3">
           <div class="grid-stack-item-content">
             <div class="chart-card" style="height: 100%; box-sizing: border-box; position: relative;">
               <div id="panelChartLoading" style="position:absolute; inset:0; background:rgba(255,255,255,0.75); display:none; align-items:center; justify-content:center; border-radius:24px; z-index:10;">
@@ -200,7 +200,7 @@ <h1>
           </div>
         </div>
 
-        <div class="grid-stack-item" id="card-records" gs-w="6" gs-h="2" gs-min-w="2" gs-min-h="2">
+        <div class="grid-stack-item" id="card-records" gs-w="6" gs-h="5" gs-min-w="2" gs-min-h="2">
           <div class="grid-stack-item-content">
             <div class="card card-gradient card-peak" style="height: 100%; box-sizing: border-box;">
               <div class="label">Leistungs-Rekorde (AC)</div>
@@ -213,7 +213,7 @@ <h1>
           </div>
         </div>
 
-        <div class="grid-stack-item" id="card-roi" gs-w="6" gs-h="2">
+        <div class="grid-stack-item" id="card-roi" gs-w="6" gs-h="5">
           <div class="grid-stack-item-content">
             <div class="card card-light card-roi" style="height: 100%; box-sizing: border-box;">
               <div class="label">ROI Fortschritt</div>
@@ -226,7 +226,7 @@ <h1>
           </div>
         </div>
 
-        <div class="grid-stack-item" id="card-yearly-heatmap" gs-w="12" gs-h="3">
+        <div class="grid-stack-item" id="card-yearly-heatmap" gs-w="12" gs-h="6">
           <div class="grid-stack-item-content">
             <div class="card card-light heatmap-card" style="height: 100%; box-sizing: border-box;">
               <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:15px;">
@@ -243,7 +243,7 @@ <h1>
           </div>
         </div>
 
-        <div class="grid-stack-item" id="card-forecast" gs-w="12" gs-h="8">
+        <div class="grid-stack-item" id="card-forecast" gs-w="7" gs-h="14">
           <div class="grid-stack-item-content">
             <div class="card card-light" style="height: 100%; box-sizing: border-box;">
               <div class="label">Prognose</div>
@@ -260,7 +260,7 @@ <h1>
           </div>
         </div>
 
-        <div class="grid-stack-item" id="card-shap-details" gs-w="7" gs-h="4">
+        <div class="grid-stack-item" id="card-shap-details" gs-w="5" gs-h="14">
           <div class="grid-stack-item-content">
             <div class="card card-light" style="height: 100%; box-sizing: border-box;">
               <div id="shapDetailCard" style="display:none;">
@@ -289,7 +289,7 @@ <h1>
             </div>
           </div>
         </div>
-        <div class="grid-stack-item" id="card-global-shap" gs-w="5" gs-h="4">
+        <div class="grid-stack-item" id="card-global-shap" gs-w="6" gs-h="9">
           <div class="grid-stack-item-content">
             <div class="card card-light" style="height: 100%; box-sizing: border-box;">
               <div style="margin-top:30px;">
@@ -299,7 +299,7 @@ <h1>
             </div>
           </div>
         </div>
-        <div class="grid-stack-item" id="card-feature-importance" gs-w="12" gs-h="8">
+        <div class="grid-stack-item" id="card-feature-importance" gs-w="6" gs-h="9">
           <div class="grid-stack-item-content">
             <div class="card card-light" style="height: 100%; box-sizing: border-box;">
               <div style="margin-top:30px;">