Customizable dashboard

main/http_server/axe-os/angular.json

@@ -18,7 +18,8 @@
           "builder": "@angular-devkit/build-angular:browser",
           "options": {
             "allowedCommonJsDependencies": [
-              "moment"
+              "moment",
+              "gridstack"
             ],
             "outputPath": "dist/axe-os",
             "index": "src/index.html",
@@ -35,7 +36,8 @@
             ],
             "styles": [
               "src/styles.scss",
-              "node_modules/ngx-toastr/toastr.css"
+              "node_modules/ngx-toastr/toastr.css",
+              "node_modules/gridstack/dist/gridstack.min.css"
             ],
             "scripts": []
           },

main/http_server/axe-os/package.json

@@ -26,6 +26,7 @@
     "@angular/router": "^18.2.13",
     "chart.js": "^4.4.7",
     "chartjs-adapter-moment": "^1.0.1",
+    "gridstack": "^12.4.2",
     "moment": "^2.30.1",
     "ngx-toastr": "^19.0.0",
     "primeflex": "^3.3.1",

main/http_server/axe-os/src/app/components/home/home.component.scss

@@ -1,7 +1,3 @@
-.card {
-    min-height: 100%;
-}
-
 .col-fixed-width {
     min-width: 80px;
 }
@@ -23,3 +19,109 @@
         transition: background-color 2s ease-in-out;
     }
 }
+
+// Gridstack layout
+.grid-stack {
+    margin: -8px;
+
+    .grid-stack-item-content {
+        container-type: size;
+        container-name: widget;
+        overflow: hidden;
+
+        > .card {
+            height: 100%;
+            min-height: 0;
+            margin: 0;
+            overflow: auto;
+            padding: 2rem;
+        }
+    }
+
+    // Chart widget: make the canvas fill the full card height
+    .grid-stack-item[gs-id="chart"] {
+        .grid-stack-item-content {
+            > .card {
+                display: flex;
+                flex-direction: column;
+                overflow: hidden;
+                padding-bottom: 2rem;
+
+                form {
+                    flex: 1;
+                    min-height: 0;
+                    display: flex;
+                    flex-direction: column;
+
+                    p-chart {
+                        flex: 1;
+                        min-height: 0;
+                        display: flex;
+                        flex-direction: column;
+
+                        ::ng-deep > div {
+                            flex: 1;
+                            min-height: 0;
+                            position: relative;
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    // Hide resize handles by default
+    .ui-resizable-handle,
+    .gs-resizable-handle {
+        display: none !important;
+    }
+
+    // Edit mode
+    &.gs-edit-mode {
+        .grid-stack-item > .grid-stack-item-content {
+            outline: 2px dashed var(--primary-color, #6366f1);
+            outline-offset: -2px;
+            border-radius: 8px;
+        }
+
+        .ui-resizable-handle,
+        .gs-resizable-handle {
+            display: block !important;
+        }
+    }
+}
+
+@container widget (max-width: 250px) {
+    .card {
+        padding: 0.75rem;
+    }
+    .text-lg { font-size: 0.8rem; }
+    .text-2xl { font-size: 1.1rem; }
+    .text-sm { font-size: 0.65rem; }
+    h4 { font-size: 0.875rem; margin-bottom: 0.375rem; }
+    h6 { font-size: 0.75rem; margin-bottom: 0.25rem; }
+    .mb-3 { margin-bottom: 0.5rem; }
+    .mb-1 { margin-bottom: 0.125rem; }
+}
+
+@container widget (max-height: 200px) {
+    .card {
+        padding: 0.625rem 1rem;
+    }
+    h4 { font-size: 0.875rem; margin-bottom: 0.25rem; }
+    h6 { font-size: 0.75rem; margin-bottom: 0.125rem; }
+    .mb-3 { margin-bottom: 0.375rem; }
+    .mb-1 { margin-bottom: 0.125rem; }
+}
+
+@container widget (min-width: 500px) {
+    .card {
+        padding: 2rem;
+    }
+    .text-lg { font-size: 1.15rem; }
+    .text-2xl { font-size: 2.25rem; }
+    h4 { font-size: 1.2rem; }
+    .mb-3 { margin-bottom: 1.25rem; }
+}
+
+