@vizabi/bubblechart 3.13.2 → 3.14.0

package/build/bubblechart.js

@@ -1,4 +1,4 @@
-// https://github.com/vizabi/bubblechart#readme v3.13.2 build 1642697876953 Copyright 2022 Gapminder Foundation and contributors
+// https://github.com/vizabi/bubblechart#readme v3.14.0 build 1642809388634 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) :
@@ -1026,7 +1026,8 @@
         zoomRect: this.element.select(".vzb-bc-zoom-rect"),
         eventArea: this.element.select(".vzb-bc-eventarea"),
         forecastOverlay: this.element.select(".vzb-bc-forecastoverlay"),
-        tooltipMobile: this.element.select(".vzb-tooltip-mobile")
+        tooltipMobile: this.element.select(".vzb-tooltip-mobile"),
+        defs: this.element.select("defs")
       };
       this.DOM.chartSvg.select(".vzb-bc-graph").call(graph => 
         Object.assign(this.DOM, {
@@ -1210,6 +1211,7 @@
       //    this.addReaction(this._resetZoomMinMaxXReaction, this._resetZoomMinMaxX);
       //    this.addReaction(this._resetZoomMinMaxYReaction, this._resetZoomMinMaxY);
       this.addReaction(this._updateOpacity);
+      this.addReaction(this.updateColorPatterns);
       this.addReaction(this._updateShowYear);
       this.addReaction(this._updateYear);
       this.addReaction(this.drawData);
@@ -1230,6 +1232,41 @@
       //this.redrawData();
     }
 
+    updateColorPatterns() {
+      if (this.MDL.color.scale.isPattern) {
+        const colorConcept = this.MDL.color.data.concept;
+        this.DOM.defs.selectAll(".flag")
+          .data(this.MDL.color.data.domainData, d => d[0])
+          .enter()
+          .append("pattern")
+          .attr("id", d => `flag-${d[0]}-${this.id}`)
+          .attr("class", "flag")
+          .attr("width", "100%")
+          .attr("height", "100%")
+          .attr("patternContentUnits", "objectBoundingBox")
+          .html(d => d[1][colorConcept])
+          .each(function() {
+            const svg = d3.select(this).select("svg");
+            if (svg.empty()) return;
+            
+            if (!svg.attr("viewBox"))
+              svg.attr("viewBox", `0 0 ${svg.attr("width")} ${svg.attr("height")}`);
+
+            // xMidYMid: center the image in the circle
+            // slice: scale the image to fill the circle
+            if (!svg.attr("preserveAspectRatio"))
+              svg.attr("preserveAspectRatio", "xMidYMid slice");
+
+            svg.attr("width", 1).attr("height", 1);
+          });
+            // .attr("xlink:href", function(d) {
+            //   return "flags/" + d.CountryCode + ".svg";
+            // });
+      } else {
+        this.DOM.defs.selectAll(".flag").remove();
+      }
+    }
+
     _updateShowYear() {
       this.DOM.date.classed("vzb-hidden", !this.ui.timeInBackground);
     }
@@ -1239,6 +1276,10 @@
       this._date.setText(this.MDL.frame.value, duration);    
     }
 
+    __getColor(key, valueC) {
+      return valueC != null ? (this.MDL.color.scale.isPattern ? `url(#flag-${key}-${this.id})` : this.cScale(valueC)) : COLOR_WHITEISH;
+    }
+
     _createAndDeleteBubbles() {
       const _this = this;
       const duration = this._getDuration();
@@ -1310,7 +1351,7 @@
               d.r = VizabiSharedComponents.LegacyUtils.areaToRadius(_this.sScale(valueS || 0));
               const scaledX = _this.xScale(valueX);
               const scaledY = _this.yScale(valueY);
-              const scaledC = valueC != null ? _this.cScale(valueC) : COLOR_WHITEISH;
+              const scaledC = _this.__getColor(d[Symbol.for(isTrail ? "trailHeadKey" : "key")], valueC);
         
               if (!duration || !headTrail) {
                 circle
@@ -1340,10 +1381,10 @@
                     .attr("x1", scaledX)
                     .attr("y1", scaledY)
                     .attr("x2", scaledX0)
-                    .attr("y2", scaledY0)
-                    .style("stroke", scaledC)
+                    .attr("y2", scaledY0)                  
                     .attr("stroke-dasharray", Math.abs(scaledX - scaledX0) + Math.abs(scaledY - scaledY0))
-                    .attr("stroke-dashoffset", -d.r);
+                    .attr("stroke-dashoffset", -d.r)
+                    .style("stroke", _this.MDL.color.scale.isPattern ? null : scaledC);
                 }
               }
         
@@ -1382,7 +1423,7 @@
               //view.classed("vzb-hidden", d.hidden);
               const scaledX = _this.xScale(valueX);
               const scaledY = _this.yScale(valueY);
-              const scaledC = valueC != null ? _this.cScale(valueC) : COLOR_WHITEISH;
+              const scaledC = _this.__getColor(d[Symbol.for(isTrail ? "trailHeadKey" : "key")], valueC);
         
               if (!duration || !headTrail) {
                 const view = duration && !isTrail ?
@@ -1438,7 +1479,7 @@
                   }
         
                   trailLine
-                    .style("stroke", scaledC)
+                    .style("stroke", _this.MDL.color.scale.isPattern ? null : scaledC)
                     .attr("stroke-dasharray", Math.abs(scaledX - scaledX0) + Math.abs(scaledY - scaledY0))
                     .attr("stroke-dashoffset", -d.r);
                 }
@@ -1494,7 +1535,7 @@
         d.r = VizabiSharedComponents.LegacyUtils.areaToRadius(_this.sScale(valueS || 0));
         const scaledX = _this.xScale(valueX);
         const scaledY = _this.yScale(valueY);
-        const scaledC = valueC != null ? _this.cScale(valueC) : COLOR_WHITEISH;
+        const scaledC = _this.__getColor(d[Symbol.for(isTrail ? "trailHeadKey" : "key")], valueC);
 
         const view = duration ? 
           d3.select(this)
@@ -1544,7 +1585,7 @@
             .attr("y1", scaledY)
             .attr("x2", scaledX0)
             .attr("y2", scaledY0)
-            .style("stroke", scaledC)
+            .style("stroke", _this.MDL.color.scale.isPattern ? null : scaledC)
             .attr("stroke-dasharray", Math.abs(scaledX - scaledX0) + Math.abs(scaledY - scaledY0))
             .attr("stroke-dashoffset", -d.r);
         }
@@ -2263,10 +2304,12 @@
       if (highlightedFilter.markers.size === 1) {
         const highlightedKey = highlightedFilter.markers.keys().next().value;
         const d = Object.assign(this.model.dataMap.getByStr(highlightedKey));
+        const selectedKey = d[Symbol.for("trailHeadKey")] || d[Symbol.for("key")];
+
         const x = _this.xScale(d[_this._alias("x")]);
         const y = _this.yScale(d[_this._alias("y")]);
         const s = d.r;
-        const c = d.color != null ? this.cScale(d.color) : COLOR_WHITEISH;
+        const c = _this.__getColor(selectedKey, d.color);
         let entityOutOfView = false;
 
         ////const titles = _this._formatSTitleValues(values.size[utils.getKey(d, dataKeys.size)], values.color[utils.getKey(d, dataKeys.color)]);
@@ -2276,7 +2319,6 @@
         }
 
         //show tooltip
-        const selectedKey = d[Symbol.for("trailHeadKey")] || d[Symbol.for("key")];
         // const trailShow = this.MDL.trail.show;
         // const trailStarts = this.MDL.trail.starts;
         // const trailGroupDim = this.MDL.trail.groupDim;
@@ -2681,7 +2723,7 @@
     }
   });
 
-  BubbleChart.versionInfo = { version: "3.13.2", build: 1642697876953, package: {"homepage":"https://github.com/vizabi/bubblechart#readme","name":"@vizabi/bubblechart","description":"Vizabi bubble chart"}, sharedComponents: VizabiSharedComponents.versionInfo};
+  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};
 
   return BubbleChart;