@vizabi/bubblechart 3.14.0 → 3.14.1

package/build/bubblechart.js

@@ -1,4 +1,4 @@
-// https://github.com/vizabi/bubblechart#readme v3.14.0 build 1642809388634 Copyright 2022 Gapminder Foundation and contributors
+// https://github.com/vizabi/bubblechart#readme v3.14.1 build 1645171739593 Copyright 2022 Gapminder Foundation and contributors
 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('VizabiSharedComponents'), require('mobx')) :
   typeof define === 'function' && define.amd ? define(['VizabiSharedComponents', 'mobx'], factory) :
@@ -1091,6 +1091,7 @@
       this.draggingNow = null;
 
       this.hoverBubble = false;
+      this.__lastStep = 0;
 
       const _this = this;
       //keyboard listeners
@@ -1216,6 +1217,7 @@
       this.addReaction(this._updateYear);
       this.addReaction(this.drawData);
       this.addReaction(this._zoomToMarkerMaxMin);
+      this.addReaction(this.redrawData);
 
       this.addReaction(this._selectDataPoints);
       this.addReaction(this._highlightDataPoints);
@@ -1285,6 +1287,11 @@
       const duration = this._getDuration();
       const transition = this._getTransition(duration);
       const data = this.__dataProcessed;
+      let trailRedrawDate;
+
+      mobx.runInAction(()=>{
+        trailRedrawDate = this.MDL.frame.stepScale.invert(Math.min(this.__lastStep, this.__lastStep = this.MDL.frame.step << 0) - 1);
+      });
 
       this.bubbles = this.DOM.bubbleContainer.selectAll(".vzb-bc-entity")
         .data(this.__dataProcessed, d => d[Symbol.for("key")])
@@ -1406,13 +1413,11 @@
               const isTrail = isTrailBubble(d);
               const isExtrapolated = d[Symbol.for("extrapolated")];
               const dataNext = data[index + 1] || {};
-              const dataNext2 = data[index + 2] || {};
               const headTrail = isTrail && !dataNext[Symbol.for("trailHeadKey")];
-              const headTrail2 = isTrail && !dataNext2[Symbol.for("trailHeadKey")];
         
               const valueS = d.size;
               d.r = VizabiSharedComponents.LegacyUtils.areaToRadius(_this.sScale(valueS || 0));
-              if (isTrail && !headTrail && !headTrail2) return;
+              if (isTrail && d["frame"] < trailRedrawDate) return;
         
               const valueX = d[_this._alias("x")];
               const valueY = d[_this._alias("y")];
@@ -1425,19 +1430,24 @@
               const scaledY = _this.yScale(valueY);
               const scaledC = _this.__getColor(d[Symbol.for(isTrail ? "trailHeadKey" : "key")], valueC);
         
+              const group = d3.select(this);
               if (!duration || !headTrail) {
-                const view = duration && !isTrail ?
-                  d3.select(this).transition(transition)
-                  :
-                  d3.select(this).interrupt();
-
-                view.select("circle")
-                  .attr("r", d.r)
-                  .attr("fill", scaledC)
-                  .attr("cy", scaledY)
-                  .attr("cx", scaledX);
+                const circle = group.select("circle");
+                if (duration && !isTrail) {
+                  circle.transition(transition)
+                    .attr("r", d.r)
+                    .attr("fill", scaledC)
+                    .attr("cy", scaledY)
+                    .attr("cx", scaledX);
+                } else {
+                  circle.interrupt()
+                    .attr("r", d.r)
+                    .attr("fill", scaledC)
+                    .attr("cy", scaledY)
+                    .attr("cx", scaledX);
+                }
                   
-                const diagonalLine = d3.select(this).select(".vzb-diagonal-line");
+                const diagonalLine = group.select(".vzb-diagonal-line");
                 diagonalLine
                   .classed("vzb-hidden", !isExtrapolated);
                 if(isExtrapolated){
@@ -1458,7 +1468,7 @@
                 
                 //trail line
                 if (isTrail) {
-                  const trailLine = d3.select(this).select(".vzb-trail-line");
+                  const trailLine = group.select(".vzb-trail-line");
                   const scaledX0 = _this.xScale(dataNext[_this._alias("x")]);
                   const scaledY0 = _this.yScale(dataNext[_this._alias("y")]);
                   
@@ -1513,18 +1523,21 @@
 
 
     redrawData(duration) {
-      this.services.layout.size;
-      this.MDL.x.scale.type;
-      this.MDL.y.scale.type;
+      //this.services.layout.size;
+      //this.MDL.x.scale.type;
+      //this.MDL.y.scale.type;
       this.MDL.color.scale.type;
       this.MDL.size.scale.type;
       this.MDL.size.scale.extent;
 
       const _this = this;
       const data = this.__dataProcessed;
+      const transition = this._getTransition(duration);
 
       if (this.bubbles) this.bubbles.each(function(d, index) {
         const isTrail = isTrailBubble(d);
+        const dataNext = data[index + 1] || {};
+        const headTrail = isTrail && !dataNext[Symbol.for("trailHeadKey")];
         const isExtrapolated = d[Symbol.for("extrapolated")];
 
         const valueX = d[_this._alias("x")];
@@ -1537,24 +1550,35 @@
         const scaledY = _this.yScale(valueY);
         const scaledC = _this.__getColor(d[Symbol.for(isTrail ? "trailHeadKey" : "key")], valueC);
 
-        const view = duration ? 
-          d3.select(this)
-            .transition()
-            .duration(duration)
-          : d3.select(this).interrupt();
+        const group = d3.select(this);
 
-        view.select("circle")
-          .attr("r", d.r)
-          .attr("fill", scaledC)
-          .attr("cy", scaledY)
-          .attr("cx", scaledX);
+        if (duration && headTrail) {
+          group.style("opacity", 0)
+            .transition().delay(duration).duration(0)
+            .style("opacity", d[Symbol.for("opacity")]);
+        }
+
+        const circle = group.select("circle");                            
+        if (duration && !headTrail) {
+          circle.transition(transition)
+            .attr("r", d.r)
+            .attr("fill", scaledC)
+            .attr("cy", scaledY)
+            .attr("cx", scaledX);
+        } else {
+          circle.interrupt()
+            .attr("r", d.r)
+            .attr("fill", scaledC)
+            .attr("cy", scaledY)
+            .attr("cx", scaledX);
+        }
 
-        const diagonalLine = d3.select(this).select(".vzb-diagonal-line");
+        const diagonalLine = group.select(".vzb-diagonal-line");
         diagonalLine
           .classed("vzb-hidden", !isExtrapolated);
         if(isExtrapolated){
-          if (duration){
-            diagonalLine.transition().duration(duration)
+          if (duration && !headTrail){
+            diagonalLine.transition(transition)
               .attr("x1", scaledX + d.r/Math.sqrt(2))
               .attr("y1", scaledY + d.r/Math.sqrt(2))
               .attr("x2", scaledX - d.r/Math.sqrt(2))
@@ -1570,11 +1594,10 @@
         
 
         if (isTrail) {
-          const trailLine = duration ? 
-            d3.select(this).select(".vzb-trail-line")
-              .transition()
-              .duration(duration)
-            : d3.select(this).select(".vzb-trail-line").interrupt();
+          const trailLine = (duration  && !headTrail) ? 
+            group.select(".vzb-trail-line")
+              .transition(transition)
+            : group.select(".vzb-trail-line").interrupt();
 
           const dataNext = data[index + 1];
           const scaledX0 = _this.xScale(dataNext[_this._alias("x")]);
@@ -1591,7 +1614,7 @@
         }
       });
 
-      _this._updateLabels();
+      mobx.runInAction(() => _this._updateLabels(duration));
     }
 
     __getZoomed(type, zoomed, domain) {
@@ -2471,7 +2494,7 @@
       }
     }
     
-    _updateLabels() {
+    _updateLabels(duration) {
       //console.log("updateLabels");
 
       const selectedFilter = this.MDL.selected.data.filter;
@@ -2498,7 +2521,7 @@
         cache.valueS0 = d.size;
         cache.initTextBBox = null;
         cache.initFontSize = null;
-        this._labels.updateLabel({ [Symbol.for("key")]: key }, null, null, null, null, null, null, d.size_label);
+        this._labels.updateLabel({ [Symbol.for("key")]: key }, null, null, null, null, null, null, d.size_label, duration);
       }
     }
 
@@ -2723,7 +2746,7 @@
     }
   });
 
-  BubbleChart.versionInfo = { version: "3.14.0", build: 1642809388634, package: {"homepage":"https://github.com/vizabi/bubblechart#readme","name":"@vizabi/bubblechart","description":"Vizabi bubble chart"}, sharedComponents: VizabiSharedComponents.versionInfo};
+  BubbleChart.versionInfo = { version: "3.14.1", build: 1645171739593, package: {"homepage":"https://github.com/vizabi/bubblechart#readme","name":"@vizabi/bubblechart","description":"Vizabi bubble chart"}, sharedComponents: VizabiSharedComponents.versionInfo};
 
   return BubbleChart;