fix temp gauge resizing

Signed-off-by: Musilah <nataleigh.nk@gmail.com>
absmach · Mar 13, 2024 · 0f89e07 · 0f89e07
1 parent 10de76b
commit 0f89e07
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 4 deletions.
diff --git a/ui/web/static/js/charts.js b/ui/web/static/js/charts.js
@@ -1842,9 +1842,21 @@ class StepChart extends Echart {
 class TempGaugeChart extends Echart {
   constructor(chartData, widgetID) {
     super(widgetID, chartData);
+    this.Style = {
+      width: "480px",
+      height: "420px",
+    };
+    this.Content = this.#generateContent();
     this.Script = this.#generateScript();
   }
 
+  #generateContent() {
+    return `
+      <div class="item-content" id="${this.ID}" style="width: ${this.Style.width}; height: ${this.Style.height};">
+      </div>
+    `;
+  }
+
   #generateScript() {
     return `
     (function() {
@@ -1865,7 +1877,6 @@ class TempGaugeChart extends Echart {
             endAngle: -20,
             min: ${this.chartData.minValue},
             max: ${this.chartData.maxValue},
-            splitNumber: 12,
             itemStyle: {
               color: '#FFAB91'
             },
@@ -1919,7 +1930,12 @@ class TempGaugeChart extends Echart {
               formatter: '{value} °C',
               color: 'inherit'
             },
-            data: []
+            data: [
+              {
+                value: "${this.chartData.minValue}",
+                name: "${this.chartData.gaugeLabel}"
+              }
+            ]
           },
           {
             type: 'gauge',
@@ -1953,7 +1969,12 @@ class TempGaugeChart extends Echart {
             detail: {
               show: false
             },
-            data: []
+            data: [
+              {
+                value: "${this.chartData.minValue}",
+                name: "${this.chartData.gaugeLabel}",
+              }
+            ]
           }
         ]
       };

diff --git a/ui/web/templates/charts/multigaugemodal.html b/ui/web/templates/charts/multigaugemodal.html
@@ -101,7 +101,9 @@ <h5 class="modal-title" id="multiGaugeModalLabel">Multi Gauge Chart</h5>
                     placeholder="Enter three value names eg. temperature,voltage"
                     required
                   />
-                  <div class="invalid-feedback">Please enter three value names without spaces between them</div>
+                  <div class="invalid-feedback">
+                    Please enter three value names without spaces between them
+                  </div>
                 </div>
               </div>
               <!-- Appearance Tab -->