MG-110 - Fix resizing of the charts (#114)

* facilitate resizing of charts on the dashboard Signed-off-by: ianmuchyri <[email protected]> * remove unused variables Signed-off-by: ianmuchyri <[email protected]> * fix error Signed-off-by: ianmuchyri <[email protected]> --------- Signed-off-by: ianmuchyri <[email protected]>
absmach · Feb 9, 2024 · d0a393f · d0a393f
1 parent 80feff2
commit d0a393f
Show file tree

Hide file tree

Showing 13 changed files with 625 additions and 656 deletions.
diff --git a/ui/web/static/js/dashboards.js b/ui/web/static/js/dashboards.js
@@ -98,13 +98,15 @@ function editGrid(grid) {
       gridState.items.forEach((itemData) => {
         const newItem = document.createElement("div");
         newItem.className = "item";
+        newItem.classList.add("item-editable");
         newItem.innerHTML = itemData.innerHTML.trim();
         var scriptTag = document.createElement("script");
         scriptTag.type = "text/javascript";
         scriptTag.defer = true;
         scriptTag.innerHTML = itemData.widgetScript;
         newItem.appendChild(scriptTag);
-        const item = grid.add(newItem);
+        grid.add(newItem);
+        resizeObserver.observe(newItem);
       });
       grid.layout(gridState.layout);
     }
@@ -119,11 +121,6 @@ function editGrid(grid) {
     item.disabled = false;
   });
 
-  document.querySelectorAll(".item").forEach((item) => {
-    item.classList.add("item-editable");
-    resizeObserver.observe(item);
-  });
-
   return grid;
 }
 
@@ -140,10 +137,12 @@ const resizeObserver = new ResizeObserver((entries) => {
     var el = item.getElement();
     grid = item.getGrid();
 
+    const contentEl = el.querySelector(".item-content");
+    var chart = echarts.getInstanceByDom(contentEl);
+
     // Calculate the change in width and height
     var widthChange = target.clientWidth - previousSize.width;
     var heightChange = target.clientHeight - previousSize.height;
-    const contentEl = el.querySelector(".item-content");
     var itemContentWidth =
       parseInt(window.getComputedStyle(contentEl).getPropertyValue("width")) + widthChange;
     var itemContentHeight =
@@ -159,6 +158,10 @@ const resizeObserver = new ResizeObserver((entries) => {
     el.style.height = target.clientHeight + "px";
     el.querySelector(".item-content").style.width = itemContentWidth + "px";
     el.querySelector(".item-content").style.height = itemContentHeight + "px";
+    chart.resize({
+      width: itemContentWidth,
+      height: itemContentHeight,
+    });
     grid.refreshItems();
     grid.layout(true);
   }

diff --git a/ui/web/templates/charts/arealinechartmodal.html b/ui/web/templates/charts/arealinechartmodal.html
@@ -98,86 +98,83 @@ <h5 class="modal-title" id="areaLineChartModalLabel">Area line charts</h5>
 
       var widgetID = "arealinechart-" + Date.now();
       var widgetScript = `
-      var areaLineChart = echarts.init(document.getElementById("${widgetID}"), null, {
-              width: 500,
-              height: 300,
-            });
-            var option = {
-                tooltip: {
-                  trigger: 'axis',
-                  axisPointer: {
-                    type: 'cross',
-                    label: {
-                      backgroundColor: '#6a7985'
-                    }
-                  }
+        var areaLineChart = echarts.init(document.getElementById("${widgetID}"));
+        var option = {
+            tooltip: {
+              trigger: 'axis',
+              axisPointer: {
+                type: 'cross',
+                label: {
+                  backgroundColor: '#6a7985'
+                }
+              }
+            },
+            legend: {
+              data: ['voltage', 'current', 'temperature', 'pressue']
+            },
+            grid: {
+              left: '3%',
+              right: '4%',
+              bottom: '3%',
+              containLabel: true
+            },
+            xAxis: [
+              {
+                type: 'category',
+                boundaryGap: false,
+                data: ['thing1', 'thing2', 'thing3', 'thing4', 'thing5', 'thing6', 'thing7']
+              }
+            ],
+            yAxis: [
+              {
+                type: 'value'
+              }
+            ],
+            series: [
+              {
+                name: 'voltage',
+                type: 'line',
+                stack: 'Total',
+                areaStyle: {},
+                emphasis: {
+                  focus: 'series'
                 },
-                legend: {
-                  data: ['voltage', 'current', 'temperature', 'pressue']
+                data: [120, 132, 101, 134, 90, 230, 210]
+              },
+              {
+                name: 'current',
+                type: 'line',
+                stack: 'Total',
+                areaStyle: {},
+                emphasis: {
+                  focus: 'series'
                 },
-                grid: {
-                  left: '3%',
-                  right: '4%',
-                  bottom: '3%',
-                  containLabel: true
+                data: [220, 182, 191, 234, 290, 330, 310]
+              },
+              {
+                name: 'temperature',
+                type: 'line',
+                stack: 'Total',
+                areaStyle: {},
+                emphasis: {
+                  focus: 'series'
                 },
-                xAxis: [
-                  {
-                    type: 'category',
-                    boundaryGap: false,
-                    data: ['thing1', 'thing2', 'thing3', 'thing4', 'thing5', 'thing6', 'thing7']
-                  }
-                ],
-                yAxis: [
-                  {
-                    type: 'value'
-                  }
-                ],
-                series: [
-                  {
-                    name: 'voltage',
-                    type: 'line',
-                    stack: 'Total',
-                    areaStyle: {},
-                    emphasis: {
-                      focus: 'series'
-                    },
-                    data: [120, 132, 101, 134, 90, 230, 210]
-                  },
-                  {
-                    name: 'current',
-                    type: 'line',
-                    stack: 'Total',
-                    areaStyle: {},
-                    emphasis: {
-                      focus: 'series'
-                    },
-                    data: [220, 182, 191, 234, 290, 330, 310]
-                  },
-                  {
-                    name: 'temperature',
-                    type: 'line',
-                    stack: 'Total',
-                    areaStyle: {},
-                    emphasis: {
-                      focus: 'series'
-                    },
-                    data: [150, 232, 201, 154, 190, 330, 410]
-                  },
-                  {
-                    name: 'pressure',
-                    type: 'line',
-                    stack: 'Total',
-                    areaStyle: {},
-                    emphasis: {
-                      focus: 'series'
-                    },
-                    data: [320, 332, 301, 334, 390, 330, 320]
-                  },
-                ]
-              };
+                data: [150, 232, 201, 154, 190, 330, 410]
+              },
+              {
+                name: 'pressure',
+                type: 'line',
+                stack: 'Total',
+                areaStyle: {},
+                emphasis: {
+                  focus: 'series'
+                },
+                data: [320, 332, 301, 334, 390, 330, 320]
+              },
+            ]
+          };
 
-            areaLineChart.setOption(option);`;
+        areaLineChart.setOption(option);`;
 
       addWidget(widgetID, widgetScript);
     });

diff --git a/ui/web/templates/charts/barchartmodal.html b/ui/web/templates/charts/barchartmodal.html
@@ -98,27 +98,24 @@ <h5 class="modal-title" id="barChartModalLabel">Time series bar chart</h5>
 
       var widgetID = "barchart-" + Date.now();
       var widgetScript = `
-      var barChart = echarts.init(document.getElementById("${widgetID}"), null, {
-              width: 500,
-              height: 200,
-            });
-            var option = {
-                xAxis: {
-                  type: 'category',
-                  data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
-                },
-                yAxis: {
-                  type: 'value'
-                },
-                series: [
-                  {
-                    data: [120, 200, 150, 80, 70, 110, 130],
-                    type: 'bar'
-                  }
-                ]
-            };
+        var barChart = echarts.init(document.getElementById("${widgetID}"));
+        var option = {
+            xAxis: {
+              type: 'category',
+              data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+            },
+            yAxis: {
+              type: 'value'
+            },
+            series: [
+              {
+                data: [120, 200, 150, 80, 70, 110, 130],
+                type: 'bar'
+              }
+            ]
+        };
 
-            barChart.setOption(option);`;
+        barChart.setOption(option);`;
 
       addWidget(widgetID, widgetScript);
     });

diff --git a/ui/web/templates/charts/donutmodal.html b/ui/web/templates/charts/donutmodal.html
@@ -98,50 +98,47 @@ <h5 class="modal-title" id="donutModalLabel">Donut chart</h5>
 
       var widgetID = "donut-" + Date.now();
       var widgetScript = `
-      var donut = echarts.init(document.getElementById("${widgetID}"), null, {
-              width: 500,
-              height: 200,
-            });
-            var option = {
-                tooltip: {
-                  trigger: 'item'
+        var donut = echarts.init(document.getElementById("${widgetID}"));
+        var option = {
+            tooltip: {
+              trigger: 'item'
+            },
+            legend: {
+              top: '5%',
+              left: 'center'
+            },
+            series: [
+              {
+                name: 'Access From',
+                type: 'pie',
+                radius: ['40%', '70%'],
+                avoidLabelOverlap: false,
+                label: {
+                  show: false,
+                  position: 'center'
                 },
-                legend: {
-                  top: '5%',
-                  left: 'center'
-                },
-                series: [
-                  {
-                    name: 'Access From',
-                    type: 'pie',
-                    radius: ['40%', '70%'],
-                    avoidLabelOverlap: false,
-                    label: {
-                      show: false,
-                      position: 'center'
-                    },
-                    emphasis: {
-                      label: {
-                        show: true,
-                        fontSize: 40,
-                        fontWeight: 'bold'
-                      }
-                    },
-                    labelLine: {
-                      show: false
-                    },
-                    data: [
-                      { value: 1048, name: 'Thing1' },
-                      { value: 735, name: 'Thing2' },
-                      { value: 580, name: 'Thing3' },
-                      { value: 484, name: 'Thing4' },
-                      { value: 300, name: 'Thing5' }
-                    ]
+                emphasis: {
+                  label: {
+                    show: true,
+                    fontSize: 40,
+                    fontWeight: 'bold'
                   }
+                },
+                labelLine: {
+                  show: false
+                },
+                data: [
+                  { value: 1048, name: 'Thing1' },
+                  { value: 735, name: 'Thing2' },
+                  { value: 580, name: 'Thing3' },
+                  { value: 484, name: 'Thing4' },
+                  { value: 300, name: 'Thing5' }
                 ]
-            };
+              }
+            ]
+        };
 
-            donut.setOption(option);`;
+        donut.setOption(option);`;
 
       addWidget(widgetID, widgetScript);
     });