瀏覽代碼

HUE-7546 [dashboard] Automatically apply height to the Gridster widgets on load and on plotly afterplot

Enrico Berti 8 年之前
父節點
當前提交
adb86cf14f

+ 8 - 0
desktop/core/src/desktop/static/desktop/js/ko.charts.plotly.js

@@ -56,6 +56,12 @@
     });
   }
 
+  function eventEmitterSetup(element) {
+    element.on('plotly_afterplot', function () {
+      huePubSub.publish('plotly.afterplot', element);
+    });
+  }
+
   ko.bindingHandlers.pieChart = {
     init: function (element, valueAccessor) {
       resizeHandlers(element);
@@ -75,6 +81,7 @@
           chartData.labels.push(el.label);
         });
         Plotly.newPlot(element, [chartData], PLOTLY_COMMON_LAYOUT, PLOTLY_COMMON_OPTIONS);
+        eventEmitterSetup(element);
       }, 200);
     }
   };
@@ -99,6 +106,7 @@
         chartData.push(chartSerie)
       });
       Plotly.newPlot(element, chartData, PLOTLY_COMMON_LAYOUT, PLOTLY_COMMON_OPTIONS);
+      eventEmitterSetup(element);
     }, 200);
   }
 

+ 32 - 4
desktop/libs/dashboard/src/dashboard/templates/common_search.mako

@@ -3630,14 +3630,42 @@ $(document).ready(function () {
     }
   });
 
-  huePubSub.subscribe('calculate.gridster.heights', function () {
-    var g = $('.gridster ul').data('gridster');
+  function resizeGridsterWidget($el){
+    $(".gridster>ul").data('gridster').resize_widget($el, $el.data('sizex'), Math.ceil($el.find('.card-widget').height() / WIDGET_BASE_HEIGHT));
+  }
+
+  huePubSub.subscribeOnce('calculate.gridster.heights', function () {
     $('.gridster ul li.gs-w').each(function () {
-      var $el = $(this);
-      g.resize_widget($el, $el.data('sizex'), Math.ceil($el.find('.card-widget').height() / WIDGET_BASE_HEIGHT));
+      resizeGridsterWidget($(this));
     });
   }, 'dashboard');
 
+
+  // there's no elegant way to do this because it doesn't work with knockout afterrender events
+  var previousWidgetsHeights = 0;
+  var toleranceCycles = 0;
+  var renderingCheckInterval = window.setInterval(function () {
+    if (toleranceCycles === 5) {
+      window.clearInterval(renderingCheckInterval);
+      huePubSub.publish('calculate.gridster.heights');
+    }
+    var latestWidgetsHeights = 0;
+    $('.gridster ul li.gs-w .card-widget').each(function () {
+      latestWidgetsHeights += $(this).height();
+    });
+    if (latestWidgetsHeights !== previousWidgetsHeights) {
+      previousWidgetsHeights = latestWidgetsHeights;
+      toleranceCycles = 0;
+    }
+    else {
+      toleranceCycles++;
+    }
+  }, 200);
+
+  huePubSub.subscribe('plotly.afterplot', function (element){
+    resizeGridsterWidget($(element).parents('li.gs-w'));
+  }, 'dashboard');
+
 %endif
 
   $(document).on("click", ".widget-settings-pill", function(){