@vizabi/bubblechart 3.16.3 → 3.17.1

package/build/bubblechart.css

@@ -484,6 +484,7 @@
 .vzb-tool .vzb-bubblechart .vzb-bubblechart-svg .vzb-bc-decorations .vzb-bc-line-equal-xy {
   stroke-dasharray: 4 4;
   stroke: #333;
+  fill: none;
 }
 .vzb-tool .vzb-bubblechart .vzb-bubblechart-svg .vzb-bc-decorations .vzb-bc-x-axis-groups text {
   fill: #999;

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.1 build 1684874653888 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) :
@@ -843,17 +843,27 @@
         && layoutProfile !== "SMALL";
       
       this.DOM.lineEqualXY.classed("vzb-invisible", !showLineEqualXY);
+
       if (showLineEqualXY) {
-        const min = d3.min(this.yScale.domain().concat(this.xScale.domain()));
-        const max = d3.max(this.yScale.domain().concat(this.xScale.domain()));
+        this.MDL.x.scale.type; //watch
+        this.MDL.y.scale.type; //watch
+
+        const domains = this.yScale.domain().concat(this.xScale.domain()),
+          min = d3.min(domains), 
+          max = d3.max(domains), 
+          step = (max-min)/100;
+
+        const sequence = d3.range(min, max, step).concat(max);
+
+        const line = d3.line()
+          .curve(d3.curveBasis)
+          .x(d => this.xScale(d))
+          .y(d => this.yScale(d));
 
         this.DOM.lineEqualXY
           .transition()
           .duration(duration || 0)
-          .attr("y1", this.yScale(min) || 0)
-          .attr("y2", this.yScale(max) || 0)
-          .attr("x1", this.xScale(min) || 0)
-          .attr("x2", this.xScale(max) || 0);
+          .attr("d", line(sequence));
       }
     }
   }
@@ -861,6 +871,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 +889,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 +901,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 +913,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),
@@ -979,7 +996,7 @@
               <g class="vzb-bc-graph">
                   <svg class="vzb-bc-bubbles-crop">
                       <g class="vzb-bc-decorations">
-                          <line class="vzb-bc-line-equal-xy vzb-invisible"></line>
+                          <path class="vzb-bc-line-equal-xy vzb-invisible"></path>
                           <g class="vzb-bc-x-axis-groups"></g>
                       </g>   
                       <g class="vzb-bc-lines"></g>
@@ -1194,6 +1211,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 +1289,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 +1400,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 +1492,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 +1510,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 +1627,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 +2186,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 +2203,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 +2786,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.1", build: 1684874653888, package: {"homepage":"https://github.com/vizabi/bubblechart#readme","name":"@vizabi/bubblechart","description":"Vizabi bubble chart"}, sharedComponents: sharedComponents.versionInfo};
 
   return BubbleChart;