@vizabi/bubblechart 3.16.3 → 3.17.0

package/build/bubblechart.js

@@ -1,4 +1,4 @@
-// https://github.com/vizabi/bubblechart#readme v3.16.3 build 1684270566053 Copyright 2023 Gapminder Foundation and contributors
+// https://github.com/vizabi/bubblechart#readme v3.17.0 build 1684329878518 Copyright 2023 Gapminder Foundation and contributors
 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('@vizabi/shared-components'), require('d3'), require('mobx')) :
   typeof define === 'function' && define.amd ? define(['@vizabi/shared-components', 'd3', 'mobx'], factory) :
@@ -861,6 +861,7 @@
   const {ICON_QUESTION} = sharedComponents.Icons;
   const COLOR_WHITEISH = "rgb(253, 253, 253)";
   const COLOR_BLACKISH = "rgb(51, 51, 51)";
+  const THICK_LINE_THRESHOLD_FOR_DARKER_COLOR = 3;
 
   const marginScaleH = (marginMin, ratio = 0) => height => marginMin + height * ratio;
   const marginScaleW = (marginMin, ratio = 0) => width => marginMin + width * ratio;
@@ -878,6 +879,8 @@
       padding: 2,
       minRadiusPx: 0.5,
       maxRadiusPx: Math.max(0.5, MAX_RADIUS_EM * sharedComponents.LegacyUtils.hypotenuse(width, height)),
+      minTrailThicknessPx: 1,
+      maxTrailThicknessPx: 4,
       infoElHeight: 16,
       yAxisTitleBottomMargin: 6,
       xAxisTitleBottomMargin: 4
@@ -888,6 +891,8 @@
       padding: 2,
       minRadiusPx: 1,
       maxRadiusPx: Math.max(0.5, MAX_RADIUS_EM * sharedComponents.LegacyUtils.hypotenuse(width, height)),
+      minTrailThicknessPx: 2,
+      maxTrailThicknessPx: 6,
       infoElHeight: 20,
       yAxisTitleBottomMargin: 3,
       xAxisTitleBottomMargin: 4
@@ -898,6 +903,8 @@
       padding: 2,
       minRadiusPx: 1,
       maxRadiusPx: Math.max(0.5, MAX_RADIUS_EM * sharedComponents.LegacyUtils.hypotenuse(width, height)),
+      minTrailThicknessPx: 2,
+      maxTrailThicknessPx: 8,
       infoElHeight: 22,
       yAxisTitleBottomMargin: 3,//marginScaleH(4, 0.01)(height),
       xAxisTitleBottomMargin: marginScaleH(0, 0.01)(height),
@@ -1194,6 +1201,7 @@
       //this.MDL.trail.config.show = false;
       //this.ui.cursorMode = "plus";
       this.sScale = this.MDL.size.scale.d3Scale;
+      this.trailSizeScale = this.MDL.size.scale.d3Scale.copy();
 
       this.TIMEDIM = this.MDL.frame.data.concept;
       this.KEYS = this.model.data.space.filter(dim => dim !== this.TIMEDIM);
@@ -1271,10 +1279,14 @@
     }
 
     __getColor(key, valueC) {
-      return valueC != null && !sharedComponents.LegacyUtils.isNaN(valueC) ? (this.MDL.color.scale.isPattern ? `url(#flag-${key}-${this.id})` : this.cScale(valueC)) : COLOR_WHITEISH;
+      return valueC != null && !sharedComponents.LegacyUtils.isNaN(valueC) 
+        ? (this.MDL.color.scale.isPattern ? `url(#flag-${key}-${this.id})` : this.cScale(valueC)) 
+        : COLOR_WHITEISH;
     }
-    __getColorForTrail(key, valueC) {
-      return valueC != null && !sharedComponents.LegacyUtils.isNaN(valueC) ? (this.MDL.color.scale.isPattern ? `url(#flag-${key}-${this.id})` : this.cScale(valueC)) : COLOR_BLACKISH;
+    __getColorForTrail(valueC, valueS) {
+      if(valueC == null || sharedComponents.LegacyUtils.isNaN(valueC) || this.MDL.color.scale.isPattern) return COLOR_BLACKISH; 
+      if(this.trailSizeScale(valueS) > THICK_LINE_THRESHOLD_FOR_DARKER_COLOR) return this.cScale(valueC);
+      return this.MDL.color.scale.palette.getColorShade({colorID: valueC}) || COLOR_BLACKISH;
     }
 
     _createAndDeleteBubbles() {
@@ -1378,16 +1390,19 @@
 
                   const scaledX0 = _this.xScale(dataNext[_this._alias("x")]);
                   const scaledY0 = _this.yScale(dataNext[_this._alias("y")]);
-                  const scaledCT = _this.__getColorForTrail(dataNext[Symbol.for(isTrail ? "trailHeadKey" : "key")], dataNext.color);
+                  const scaledCT = _this.__getColorForTrail(dataNext.color, dataNext.size);
+
+                  const nextR = sharedComponents.LegacyUtils.areaToRadius(_this.sScale(dataNext.size || 0));
+                  const length = Math.sqrt( (scaledX - scaledX0)**2 + (scaledY - scaledY0)**2 ) - d.r - nextR;
                   
                   trailLine
                     .attr("x1", scaledX)
                     .attr("y1", scaledY)
                     .attr("x2", scaledX0)
                     .attr("y2", scaledY0)                  
-                    .attr("stroke-dasharray", Math.abs(scaledX - scaledX0) + Math.abs(scaledY - scaledY0))
-                    .attr("stroke-dashoffset", -d.r)
-                    .style("stroke", _this.MDL.color.scale.isPattern ? null : scaledCT);
+                    .attr("stroke-dasharray", `0 ${d.r} ${length > 0 ? length : 0} ${nextR}`)
+                    .style("stroke-width", _this.trailSizeScale(dataNext.size))
+                    .style("stroke", scaledCT);
                 }
               }
         
@@ -1467,7 +1482,7 @@
                   const trailLine = group.select(".vzb-trail-line");
                   const scaledX0 = _this.xScale(dataNext[_this._alias("x")]);
                   const scaledY0 = _this.yScale(dataNext[_this._alias("y")]);
-                  const scaledCT = _this.__getColorForTrail(dataNext[Symbol.for(isTrail ? "trailHeadKey" : "key")], dataNext.color);
+                  const scaledCT = _this.__getColorForTrail(dataNext.color, dataNext.size);
                   
                   trailLine
                     .attr("x1", scaledX)
@@ -1485,10 +1500,13 @@
                       .attr("y2", scaledY0);
                   }
         
+                  const nextR = sharedComponents.LegacyUtils.areaToRadius(_this.sScale(dataNext.size || 0));
+                  const length = Math.sqrt( (scaledX - scaledX0)**2 + (scaledY - scaledY0)**2 ) - d.r - nextR;
+
                   trailLine
-                    .style("stroke", _this.MDL.color.scale.isPattern ? null : scaledCT)
-                    .attr("stroke-dasharray", Math.abs(scaledX - scaledX0) + Math.abs(scaledY - scaledY0))
-                    .attr("stroke-dashoffset", -d.r);
+                    .style("stroke", scaledCT)
+                    .style("stroke-width", _this.trailSizeScale(dataNext.size))
+                    .attr("stroke-dasharray", `0 ${d.r} ${length > 0 ? length : 0} ${nextR}`);
                 }
               }
               
@@ -1599,16 +1617,19 @@
           const dataNext = data[index + 1];
           const scaledX0 = _this.xScale(dataNext[_this._alias("x")]);
           const scaledY0 = _this.yScale(dataNext[_this._alias("y")]);
-          const scaledCT = _this.__getColorForTrail(dataNext[Symbol.for(isTrail ? "trailHeadKey" : "key")], dataNext.color);
+          const scaledCT = _this.__getColorForTrail(dataNext.color, dataNext.size);
+
+          const nextR = sharedComponents.LegacyUtils.areaToRadius(_this.sScale(dataNext.size || 0));
+          const length = Math.sqrt( (scaledX - scaledX0)**2 + (scaledY - scaledY0)**2 ) - d.r - nextR;
 
           trailLine
             .attr("x1", scaledX)
             .attr("y1", scaledY)
             .attr("x2", scaledX0)
             .attr("y2", scaledY0)
-            .style("stroke", _this.MDL.color.scale.isPattern ? null : scaledCT)
-            .attr("stroke-dasharray", Math.abs(scaledX - scaledX0) + Math.abs(scaledY - scaledY0))
-            .attr("stroke-dashoffset", -d.r);
+            .style("stroke", scaledCT)
+            .style("stroke-width", _this.trailSizeScale(dataNext.size))
+            .attr("stroke-dasharray", `0 ${d.r} ${length > 0 ? length : 0} ${nextR}`);
         }
       });
 
@@ -2155,7 +2176,9 @@
 
       const {
         minRadiusPx,
-        maxRadiusPx
+        maxRadiusPx,
+        minTrailThicknessPx,
+        maxTrailThicknessPx,
       } = this.profileConstants;
 
       //transfer min max radius to size dialog via root ui observable (probably a cleaner way is possible)
@@ -2170,6 +2193,7 @@
         d3.range(minArea, maxArea, (maxArea - minArea)/(this.sScale.domain().length - 1)).concat(maxArea);
 
       this.sScale.range(range);
+      this.trailSizeScale.domain(this.MDL.size.scale.domain).range([minTrailThicknessPx, maxTrailThicknessPx]);
     }
 
     _setTooltip(tooltipText, x, y, s, c, d) {
@@ -2752,7 +2776,7 @@
     }
   });
 
-  BubbleChart.versionInfo = { version: "3.16.3", build: 1684270566053, package: {"homepage":"https://github.com/vizabi/bubblechart#readme","name":"@vizabi/bubblechart","description":"Vizabi bubble chart"}, sharedComponents: sharedComponents.versionInfo};
+  BubbleChart.versionInfo = { version: "3.17.0", build: 1684329878518, package: {"homepage":"https://github.com/vizabi/bubblechart#readme","name":"@vizabi/bubblechart","description":"Vizabi bubble chart"}, sharedComponents: sharedComponents.versionInfo};
 
   return BubbleChart;