Size of graph same as container size, not responsive

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

@@ -8,6 +8,14 @@ declare var require: any
 
 
 export class GraphLoader {
+  static customSize = -1;
+  static width = 800;
+  static height = 300;
+
+  static setSize(width : number, height : number) {
+    this.width = width;
+    this.height = height;
+  }
 
   /**
    * Loads graph with default interval value (e.g. for observation service)
@@ -82,6 +90,10 @@ export class GraphLoader {
     const vegaTooltip = require('vega-tooltip');
     const handler = new vegaTooltip.Handler();
 
+    console.log(config.height);
+
+    config.width = this.width;
+    config.height = this.height;
 
     const view = new vega.View(vega.parse(spec, config))
       .tooltip(handler.call)

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

@@ -79,7 +79,7 @@
         </div>
         
         
-        <div id="vega_container_{{group}}" #vegaContainer style="width:100%; height:auto;"></div>
+        <div id="vega_container_{{group}}" #vegaContainer style="width:100%; height:auto;" ></div>
       </ng-template>
 
     </p-accordionTab>

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

@@ -140,6 +140,12 @@ export class UnitComponent implements OnInit, OnDestroy {
     // if (event.checked.includes(sensorId.toString()))
       this.showVega[groupId] = true;
 
+    const box = document.getElementById('vega_container_' + groupId);
+    const boxWidth = box.getBoundingClientRect().width;
+    const boxHeight = box.getBoundingClientRect().height;
+
+    GraphLoader.setSize(boxWidth - 50, 300);
+
     if (!this.selectedSensors.find(sensId => sensId.toString().slice(0, 5) === groupId)) { // if group of sensors is empty show empty graph
       // GraphLoader.getAnalyticsGraph(null, null, null, sensorGroupElement);
       GraphLoader.getGraph(null, null, null, sensorGroupElement, null);

src/vega/config/config.json

@@ -1,10 +1,10 @@
 {
   "$schema": "https://vega.github.io/schema/vega/v5.json",
-  "width": 800,
-  "height": 300,
   "signals": [
     {"name": "overviewHeight", "value":  70},
     {"name":  "axeLegendPath", "value":  "phenomenon.phenomenonName"},
     {"name":  "axeUnitPath", "value":  "phenomenon.unit"}
-  ]
+  ],
+  "width": 800,
+  "height": 300
 }