Browse Source

HUE-2679 [search] Update logic for PieChart and BarChart

Enrico Berti 10 years ago
parent
commit
2f03188f7e

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

@@ -27,7 +27,7 @@ ko.HUE_CHARTS = {
 };
 
 ko.bindingHandlers.pieChart = {
-  update: function (element, valueAccessor) {
+  init: function (element, valueAccessor) {
     var _options = valueAccessor();
     var _data = _options.transformer(_options.data);
     $(element).css("marginLeft", "auto");
@@ -78,6 +78,8 @@ ko.bindingHandlers.pieChart = {
           });
         }
 
+        $(element).data("chart", _chart);
+
         var _resizeTimeout = -1;
         nv.utils.windowResize(function () {
           window.clearTimeout(_resizeTimeout);
@@ -113,25 +115,68 @@ ko.bindingHandlers.pieChart = {
             });
       });
     }
+  },
+  update: function (element, valueAccessor) {
+    var _options = valueAccessor();
+    var _chart = $(element).data("chart");
+    if (_chart) {
+      var _d3 = d3.select($(element).find("svg")[0]);
+      var _data = _options.transformer(_options.data);
+      _d3.datum(_data)
+            .transition().duration(150)
+            .each("end", _options.onComplete != null ? _options.onComplete : void(0))
+            .call(_chart);
+      _chart.update();
+    }
+    chartsNormalState();
   }
 };
 
 ko.bindingHandlers.barChart = {
-  update: function (element, valueAccessor) {
+  init: function (element, valueAccessor) {
     barChartBuilder(element, valueAccessor(), false);
+  },
+  update: function (element, valueAccessor) {
+    var _options = valueAccessor();
+    var _chart = $(element).data("chart");
+    if (_chart) {
+      var _d3 = d3.select($(element).find("svg")[0]);
+      var _datum = _options.transformer(_options.datum);
+      _d3.datum(_datum)
+        .transition().duration(150)
+        .each("end", function () {
+          if (_options.onComplete != null) {
+            _options.onComplete();
+          }
+        }).call(_chart);
+    }
+    chartsNormalState();
   }
 };
 
 ko.bindingHandlers.timelineChart = {
-  update: function (element, valueAccessor) {
-    if ($(element).find("svg").length > 0) {
-      $(element).find("svg").remove();
-    }
+  init: function (element, valueAccessor) {
     if (valueAccessor().type && valueAccessor().type() == "line"){
       lineChartBuilder(element, valueAccessor(), true);
+      $(element).data("type", "line");
     }
     else {
       barChartBuilder(element, valueAccessor(), true);
+      $(element).data("type", "bar");
+    }
+  },
+  update: function (element, valueAccessor) {
+    if (valueAccessor().type && valueAccessor().type() != $(element).data("type")){
+      if ($(element).find("svg").length > 0) {
+        $(element).find("svg").remove();
+      }
+      if (valueAccessor().type() == "line"){
+        lineChartBuilder(element, valueAccessor(), true);
+      }
+      else {
+        barChartBuilder(element, valueAccessor(), true);
+      }
+      $(element).data("type", valueAccessor().type());
     }
   }
 };
@@ -570,7 +615,6 @@ var insertLinebreaks = function (d, ref) {
   }
 };
 
-
 function lineChartBuilder(element, options, isTimeline) {
   var _datum = options.transformer(options.datum);
   $(element).height(300);
@@ -585,6 +629,8 @@ function lineChartBuilder(element, options, isTimeline) {
   if ($(element).is(":visible")) {
     nv.addGraph(function () {
       var _chart = nv.models.lineWithBrushChart();
+      $(element).data("chart", _chart);
+      _chart.transitionDuration(0);
       if (_datum.length > 0 && _datum[0].values.length > 10) {
         _chart.enableSelection();
       }
@@ -668,7 +714,6 @@ function barChartBuilder(element, options, isTimeline) {
   if ($(element).is(":visible")) {
     nv.addGraph(function () {
       var _chart;
-
       if (isTimeline) {
         if ($(element).find("svg").length > 0 && $(element).find(".nv-discreteBarWithAxes").length > 0) {
           $(element).find("svg").empty();
@@ -752,6 +797,8 @@ function barChartBuilder(element, options, isTimeline) {
       _chart.yAxis
           .tickFormat(d3.format(",0f"));
 
+      $(element).data("chart", _chart);
+
       var _d3 = ($(element).find("svg").length > 0) ? d3.select($(element).find("svg")[0]) : d3.select($(element)[0]).append("svg");
       _d3.datum(_datum)
           .transition().duration(150)
@@ -990,6 +1037,10 @@ function chartsUpdatingState() {
   $(document).find("svg").css("opacity", "0.5");
 }
 
+function chartsNormalState() {
+  $(document).find("svg").css("opacity", "1");
+}
+
 
 var tipBuilder = function () {
   var direction = d3_tip_direction,

+ 1 - 1
desktop/core/src/desktop/static/desktop/js/nv.d3.growingMultiBar.js

@@ -37,7 +37,7 @@ nv.models.growingMultiBar = function() {
     , hideable = false
     , barColor = null // adding the ability to set the color for each rather than the whole group
     , disabled // used in conjunction with barColor to communicate from multiBarHorizontalChart what series are disabled
-    , delay = 1200
+    , delay = 0
     , xDomain
     , yDomain
     , xRange

+ 1 - 0
desktop/core/src/desktop/static/desktop/js/nv.d3.growingPieChart.js

@@ -63,6 +63,7 @@ nv.models.growingPieChart = function() {
 
   function chart(selection) {
     selection.each(function(data) {
+
       var container = d3.select(this),
           that = this;