Browse Source

HUE-4304 [core] Pie slices shrink after wrong timing of resize of the pie

Enrico Berti 9 năm trước cách đây
mục cha
commit
dd1161b
1 tập tin đã thay đổi với 30 bổ sung20 xóa
  1. 30 20
      desktop/core/src/desktop/static/desktop/js/nv.d3.growingPie.js

+ 30 - 20
desktop/core/src/desktop/static/desktop/js/nv.d3.growingPie.js

@@ -84,16 +84,26 @@ nv.models.growingPie = function() {
               });
           });
 
-
-      var arc = d3.svg.arc()
-                  .outerRadius(arcRadius);
-
-      var arcOver = d3.svg.arc()
-                  .outerRadius(arcRadius + 10);
-
-      if (startAngle) arc.startAngle(startAngle)
-      if (endAngle) arc.endAngle(endAngle);
-      if (donut) arc.innerRadius(radius * donutRatio);
+      function updateVariables() {
+        availableWidth = width - margin.left - margin.right;
+        availableHeight = height - margin.top - margin.bottom;
+        radius = Math.min(availableWidth, availableHeight) / 2;
+        arcRadius = radius-(radius / 5);
+      }
+
+      var arcNormal = function() {
+        updateVariables();
+        return d3.svg.arc().outerRadius(arcRadius);
+      }
+
+      var arcOver = function() {
+        updateVariables();
+        return d3.svg.arc().outerRadius(arcRadius + 10);
+      }
+
+      if (startAngle) arcNormal().startAngle(startAngle)
+      if (endAngle) arcNormal().endAngle(endAngle);
+      if (donut) arcNormal().innerRadius(radius * donutRatio);
 
       // Setup the Pie chart and choose the data element
       var pie = d3.layout.pie()
@@ -115,7 +125,7 @@ nv.models.growingPie = function() {
           slices.each(function(d, i) {
             if ((typeof d.data.obj.from != "undefined" && d.data.obj.from == item) || d.data.obj.value == item) {
               d3.select(this).classed('selected', true);
-              d3.select(this).select("path").transition().duration(100).attr("d", arcOver);
+              d3.select(this).select("path").transition().duration(100).attr("d", arcOver());
             }
           });
         });
@@ -124,7 +134,7 @@ nv.models.growingPie = function() {
       var ae = slices.enter().append('g')
               .attr('class', 'nv-slice')
               .on('mouseover', function(d,i){
-                d3.select(this).select("path").transition().duration(100).attr("d", arcOver);
+                d3.select(this).select("path").transition().duration(100).attr("d", arcOver());
                 d3.select(this).classed('hover', true);
                 dispatch.elementMouseover({
                     label: getX(d.data),
@@ -137,7 +147,7 @@ nv.models.growingPie = function() {
               })
               .on('mouseout', function(d,i){
                 if (!d3.select(this).classed('selected')){
-                  d3.select(this).select("path").transition().duration(100).attr("d", arc);
+                  d3.select(this).select("path").transition().duration(100).attr("d", arcNormal());
                 }
                 d3.select(this).classed('hover', false);
                 dispatch.elementMouseout({
@@ -149,7 +159,7 @@ nv.models.growingPie = function() {
                 });
               })
               .on('click', function(d,i) {
-                d3.select(this).select("path").transition().duration(100).attr("d", arcOver);
+                d3.select(this).select("path").transition().duration(100).attr("d", arcOver());
                 dispatch.elementClick({
                     label: getX(d.data),
                     value: getY(d.data),
@@ -161,7 +171,7 @@ nv.models.growingPie = function() {
                 d3.event.stopPropagation();
               })
               .on('dblclick', function(d,i) {
-                d3.select(this).select("path").transition().duration(100).attr("d", arc);
+                d3.select(this).select("path").transition().duration(100).attr("d", arcNormal());
                 dispatch.elementDblClick({
                     label: getX(d.data),
                     value: getY(d.data),
@@ -183,16 +193,16 @@ nv.models.growingPie = function() {
 
         slices.select('path')
           .transition()
-            .attr('d', arc)
+            .attr('d', arcNormal())
             .attrTween('d', arcTween);
 
         if (showLabels) {
           // This does the normal label
           var labelsArc = d3.svg.arc().innerRadius(0);
 
-          if (pieLabelsOutside){ labelsArc = arc; }
+          if (pieLabelsOutside){ labelsArc = arcNormal(); }
 
-          if (donutLabelsOutside) { labelsArc = d3.svg.arc().outerRadius(arc.outerRadius()); }
+          if (donutLabelsOutside) { labelsArc = d3.svg.arc().outerRadius(arc().outerRadius()); }
 
           pieLabels.enter().append("g").classed("nv-label",true)
             .each(function(d,i) {
@@ -311,7 +321,7 @@ nv.models.growingPie = function() {
           var i = d3.interpolate(this._current, a);
           this._current = i(0);
           return function(t) {
-            return arc(i(t));
+            return arcNormal()(i(t));
           };
         }
 
@@ -319,7 +329,7 @@ nv.models.growingPie = function() {
           b.innerRadius = 0;
           var i = d3.interpolate({startAngle: 0, endAngle: 0}, b);
           return function(t) {
-              return arc(i(t));
+              return arcNormal()(i(t));
           };
         }