Working resize

src/app/sensor/components/sensor.component.html

@@ -31,7 +31,7 @@
       </div>
     </div>
       <div class="graph-range-dates">
-          <div class="input-group form-group">
+          <div class="input-group calendar-group">
               <label for="from">From:</label>
 
               <p-calendar
@@ -47,7 +47,7 @@
               </p-calendar>
           </div>
 
-          <div class="input-group form-group">
+          <div class="input-group calendar-group">
               <label for="to">To:</label>
 
               <p-calendar

src/app/sensor/components/sensor.component.scss

@@ -5,14 +5,12 @@
 /* Round only the right side of the calendar button */
 ::ng-deep .p-calendar .p-datepicker-trigger {
   color: white !important;
-  border-top-right-radius: 6px;
-  border-bottom-right-radius: 6px;
   border-left: none;
+  border-radius: 0px 6px 6px 0px;
   background: #174B97 !important;
   border-color: #174B97 !important;
 }
 
-
 /* Add space to the right of every button except the last one */
 ::ng-deep .button-row .p-button:not(:last-child) {
   margin-right: 1rem;
@@ -22,7 +20,7 @@
   margin: 5px !important;
 }
 
-::ng-deep .input-group {
+::ng-deep .calendar-group {
   display: flex;
   flex-direction: column;
   padding-right: 50px;

src/app/sensor/components/sensor.component.ts

@@ -167,11 +167,13 @@ export class SensorComponent implements OnInit, OnDestroy, AfterViewInit {
       console.log('Requested width : ', newWidth);
       console.log('Got width: ', this.graphView.width());
 
-      // 3. Check if Vega "stole" pixels. If it did, force it again.
+      // check if Vega "stole" pixels. If it did, force it again.
+      /*
       if (this.graphView.width() < newWidth - 50) {
         this.graphView.width(newWidth).height(300).runAsync();
         console.log('Calling resize twice');
       }
+       */
     }
   }
 }

src/app/shared/graph-loading/graphloader.ts

@@ -95,7 +95,16 @@ export class GraphLoader {
     config.width = this.width;
     config.height = this.height;
 
-    console.log(JSON.stringify(config));
+    // --- LOGGING THE SOURCE CODE ---
+    const fullSpecForExport = {
+      ...spec,
+      config
+    };
+
+    console.log('COPY THIS INTO VEGA EDITOR:');
+    console.log(JSON.stringify(fullSpecForExport, null, 2));
+
+    // --------------------------------
 
     // const view = await
     return new vega.View(vega.parse(spec, config))

src/app/unit/components/unit.component.html

@@ -15,7 +15,7 @@
       </div>
     </div>
     <div class="graph-range-dates">
-      <div class="input-group form-group">
+      <div class="input-group calendar-group">
           <label for="from">From:</label>
 
           <p-calendar
@@ -31,7 +31,7 @@
           </p-calendar>
       </div>
 
-      <div class="input-group form-group">
+      <div class="input-group calendar-group">
           <label for="to">To:</label>
 
           <p-calendar

src/app/unit/components/unit.component.scss

@@ -8,24 +8,15 @@
     color: black !important;    
 }
 
-::ng-deep .p-button-primary {
-    background: #174B97 !important;
-    border-color: #174B97 !important;
-}
-
 ::ng-deep .top-button {
     width: 220px !important;
 }
 
-::ng-deep .p-calendar .p-datepicker-trigger {
-    color: white !important;
-}
-
 /* Round only the right side of the calendar button */
 ::ng-deep .p-calendar .p-datepicker-trigger {
-    border-top-right-radius: 6px;
-    border-bottom-right-radius: 6px;
+    color: white !important;
     border-left: none;
+    border-radius: 0px 6px 6px 0px;
     background: #174B97 !important;
     border-color: #174B97 !important;
 }
@@ -39,7 +30,7 @@
     margin: 5px !important;
 }
 
-::ng-deep .input-group {
+::ng-deep .calendar-group {
     display: flex;
     flex-direction: column;
     padding-right: 50px;

src/app/unit/components/unit.component.ts

@@ -90,27 +90,12 @@ export class UnitComponent implements OnInit, OnDestroy {
 
     window.requestAnimationFrame(() => {
       Object.entries(this.graphViews).forEach(([key, view]) => {
-        // Process each pair here
-
-        const sensorGroupElement = '#vega_container_' + key;
-        const box = document.getElementById('vega_container_' + key);
-        const boxWidth = box.getBoundingClientRect().width;
-        const boxHeight = box.getBoundingClientRect().height;
-
-        console.log('Container Style:', window.getComputedStyle(box).width);
-
         if (view) {
-          const newWidth = box.getBoundingClientRect().width - 60;
-          console.log('Key:', key, 'NewWidth:', newWidth);
-
-          view.width(newWidth).runAsync().then(v => {
-            console.log('--- Debugging Vega Layout ---');
-            console.log('Target Width Signal:', v.signal('width'));
-            console.log('Actual View Width:', v.width());
-            console.log('Padding:', v.padding());
-            // If this returns a different number than 'width',
-            // a signal in your JSON is overriding the layout.
-          });
+          const box = document.getElementById('vega_container_' + key);
+          const newWidth = box.getBoundingClientRect().width - 50;
+          view.width(newWidth).run();
+          console.log('Requested width : ', newWidth);
+          console.log('Got width: ', view.width());
         }
       })
     });

src/assets/scss/_popup-form.scss

@@ -67,9 +67,6 @@
     background-color: #F2F2F2;
 
     color: #6c757d;
-
-    border-top-right-radius: 6px;
-    border-bottom-right-radius: 6px;
   }
 
   .input-group-prepend span {

src/assets/scss/styles.scss

@@ -17,4 +17,8 @@ $terciary: #1B3059;
 
 .p-tabview .p-tabview-panels {
   color: $terciary;
+}
+
+.p-button {
+  border-radius: 6px;
 }

src/vega/base/default.json

@@ -85,7 +85,7 @@
       "type": "group",
       "name": "detail",
       "encode": {
-        "enter": {
+        "update": {
           "height": {"signal": "detailHeight"},
           "width": {"signal": "width"}
         }
@@ -113,7 +113,7 @@
         {
           "type": "group",
           "encode": {
-            "enter": {
+            "update": {
               "height": {
                 "field": {
                   "group": "height"
@@ -137,7 +137,7 @@
       "type": "group",
       "name": "overview",
       "encode": {
-        "enter": {
+        "update": {
           "x": {"value": 0},
           "y": {"signal":  "overviewHeightStart"},
           "height": {"signal": "overviewHeight"},

src/vega/data.json

@@ -125,7 +125,7 @@
       "type": "rule",
       "from": {"data":"table2"},
       "encode": {
-        "enter": {
+        "update": {
           "x": {"scale": "xscale", "field": "unit0"},
           "x2":[
             {