浏览代码

HUE-7453 [frontend] Create basic barchart port and refactor common plotly options

Enrico Berti 8 年之前
父节点
当前提交
31ff8ac
共有 1 个文件被更改,包括 44 次插入22 次删除
  1. 44 22
      desktop/core/src/desktop/static/desktop/js/ko.charts.plotly.js

+ 44 - 22
desktop/core/src/desktop/static/desktop/js/ko.charts.plotly.js

@@ -26,27 +26,36 @@
       MAP: 'map',
       MAP: 'map',
       GRADIENTMAP: 'gradientmap',
       GRADIENTMAP: 'gradientmap',
       SCATTERCHART: 'scatter'
       SCATTERCHART: 'scatter'
-    },
-    PLOTLY_OPTIONS: {
-      displaylogo: false,
-      modeBarButtonsToRemove: ['sendDataToCloud', 'hoverCompareCartesian']
     }
     }
   };
   };
 
 
+  var PLOTLY_COMMON_LAYOUT = {
+    height: 400
+  };
+
+  var PLOTLY_COMMON_OPTIONS = {
+    displaylogo: false,
+    modeBarButtonsToRemove: ['sendDataToCloud', 'hoverCompareCartesian']
+  }
+
+  function resizeHandlers(element) {
+    var resizeSubscription = huePubSub.subscribe('resize.plotly.chart', function () {
+      Plotly.Plots.resize(element);
+    });
+    var resizeEvent = function () {
+      Plotly.Plots.resize(element);
+    };
+
+    $(window).on('resize', resizeEvent);
+    ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
+      resizeSubscription.remove();
+      $(window).off('resize', resizeEvent);
+    });
+  }
+
   ko.bindingHandlers.pieChart = {
   ko.bindingHandlers.pieChart = {
     init: function (element, valueAccessor) {
     init: function (element, valueAccessor) {
-      var resizeSubscription = huePubSub.subscribe('resize.plotly.chart', function () {
-        Plotly.Plots.resize(element);
-      });
-      var resizeEvent = function () {
-        Plotly.Plots.resize(element);
-      };
-
-      $(window).on('resize', resizeEvent);
-      ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
-        resizeSubscription.remove();
-        $(window).off('resize', resizeEvent);
-      });
+      resizeHandlers(element);
     },
     },
     update: function (element, valueAccessor) {
     update: function (element, valueAccessor) {
       var options = valueAccessor();
       var options = valueAccessor();
@@ -62,20 +71,33 @@
           chartData.values.push(el.value);
           chartData.values.push(el.value);
           chartData.labels.push(el.label);
           chartData.labels.push(el.label);
         });
         });
-        var layout = {
-          height: 400
-        };
-        Plotly.newPlot(element, [chartData], layout, ko.HUE_CHARTS.PLOTLY_OPTIONS);
+        Plotly.newPlot(element, [chartData], PLOTLY_COMMON_LAYOUT, PLOTLY_COMMON_OPTIONS);
       }, 10);
       }, 10);
     }
     }
   };
   };
 
 
   ko.bindingHandlers.barChart = {
   ko.bindingHandlers.barChart = {
     init: function (element, valueAccessor) {
     init: function (element, valueAccessor) {
-      $(element).html('To-do.');
+      resizeHandlers(element);
     },
     },
     update: function (element, valueAccessor) {
     update: function (element, valueAccessor) {
-      $(element).html('To-do.');
+      var options = valueAccessor();
+      window.clearTimeout(element.plotterTimeout);
+      element.plotterTimeout = window.setTimeout(function () {
+        var data = options.transformer(options.datum);
+        var chartData = {
+          x: [],
+          y: [],
+          type: 'bar'
+        }
+        data.forEach(function (el) {
+          el.values.forEach(function (serie) {
+            chartData.x.push(serie.x);
+            chartData.y.push(serie.y);
+          });
+        });
+        Plotly.newPlot(element, [chartData], PLOTLY_COMMON_LAYOUT, PLOTLY_COMMON_OPTIONS);
+      }, 10);
     }
     }
   };
   };