@vizabi/bubblechart 3.12.1 → 3.14.0

package/build/bubblechart.css

@@ -171,22 +171,20 @@
 .vzb-tool .vzb-bubblechart .vzb-bubblechart-svg .vzb-bc-axis-y-subtitle .tick-minor,
 .vzb-tool .vzb-bubblechart .vzb-bubblechart-svg .vzb-bc-axis-x .tick-minor,
 .vzb-tool .vzb-bubblechart .vzb-bubblechart-svg .vzb-bc-axis-y .tick-minor {
-  stroke-dasharray: 1 3;
+  stroke: #d6d6d6;
 }
 .vzb-tool.vzb-medium .vzb-bubblechart-svg .vzb-bc-axis-x .tick line,
 .vzb-tool.vzb-medium .vzb-bubblechart-svg .vzb-bc-axis-y .tick line,
 .vzb-tool.vzb-medium .vzb-bubblechart-svg .vzb-bc-axis-x .tick-minor,
 .vzb-tool.vzb-medium .vzb-bubblechart-svg .vzb-bc-axis-y .tick-minor {
-  stroke: #363E40;
-  stroke-dasharray: 1 6;
+  stroke: #d6d6d6;
 }
 
 .vzb-tool.vzb-large .vzb-bubblechart-svg .vzb-bc-axis-x .tick line,
 .vzb-tool.vzb-large .vzb-bubblechart-svg .vzb-bc-axis-y .tick line,
 .vzb-tool.vzb-large .vzb-bubblechart-svg .vzb-bc-axis-x .tick-minor,
 .vzb-tool.vzb-large .vzb-bubblechart-svg .vzb-bc-axis-y .tick-minor {
-  stroke: #e3eef0;
-  stroke-dasharray: none;
+  stroke: #d6d6d6;
 }
 
 .vzb-tool.vzb-presentation .vzb-bubblechart-svg .vzb-bc-axis-x .tick line,
@@ -194,7 +192,6 @@
 .vzb-tool.vzb-presentation .vzb-bubblechart-svg .vzb-bc-axis-x .tick-minor,
 .vzb-tool.vzb-presentation .vzb-bubblechart-svg .vzb-bc-axis-y .tick-minor {
   stroke: none;
-  stroke-dasharray: none;
 }
 
 .vzb-tool .vzb-bubblechart .vzb-bubblechart-svg .vzb-bc-axis-x-info,
@@ -512,8 +509,6 @@
   stroke-width: 1px;
 }
 .vzb-tool .vzb-bubblechart .vzb-bubblechart-svg .vzb-bc-date {
-  filter: alpha(opacity=30);
-  opacity: 0.3;
   font-size: 15em;
   fill: #999;
   text-anchor: middle;

package/build/bubblechart.js

@@ -1,4 +1,4 @@
-// https://github.com/vizabi/bubblechart#readme v3.12.1 build 1634118614227 Copyright 2021 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) :
@@ -16,6 +16,7 @@
       // this.dragLock = false;
 
       this.dragRectangle
+        .filter(event => !event.button)
         .subject(this.dragSubject())
         .on("start", this.drag().start)
         .on("drag", this.drag().go)
@@ -54,8 +55,8 @@
         }
 
         return {
-          x: d3.pointer(event)[0],
-          y: d3.pointer(event)[1]
+          x: d3.pointer(event, this)[0],
+          y: d3.pointer(event, this)[1]
         };
       };
     }
@@ -80,8 +81,8 @@
 
           // self.dragLock = true;
           this.origin = {
-            x: d3.pointer(event)[0],
-            y: d3.pointer(event)[1]
+            x: d3.pointer(event, this)[0],
+            y: d3.pointer(event, this)[1]
           };
           _this.DOM.zoomRect.classed("vzb-invisible", false);
         },
@@ -110,8 +111,8 @@
             .classed("vzb-invisible", true);
 
           this.target = {
-            x: d3.pointer(event)[0],
-            y: d3.pointer(event)[1]
+            x: d3.pointer(event, this)[0],
+            y: d3.pointer(event, this)[1]
           };
           if (Math.abs(this.origin.x - this.target.x) < 10 || Math.abs(this.origin.y - this.target.y) < 10) return;
 
@@ -647,7 +648,7 @@
       let ratio = transform.k;
       const pan = [transform.x, transform.y];
 
-      const mouse = d3.pointer(event);
+      const mouse = d3.pointer(event, this.zoomSelection.node());
       let k = Math.log(ratio) / Math.LN2;
 
       //change factor direction based on the input. default is no direction supplied
@@ -965,7 +966,7 @@
                   <rect class="vzb-bc-eventarea"></rect>
                   <g class="vzb-bc-trails"></g>
                   <g class="vzb-bc-bubbles"></g>
-                  <rect class="vzb-bc-forecastoverlay vzb-hidden" x="0" y="0" width="100%" height="100%" fill="url(#vzb-bc-pattern-lines)" pointer-events='none'></rect>
+                  <rect class="vzb-bc-forecastoverlay vzb-hidden" x="0" y="0" width="100%" height="100%" fill="url(#vzb-bc-pattern-lines-${config.id})" pointer-events='none'></rect>
               </svg>
 
               <g class="vzb-bc-axis-y-subtitle"><text></text></g>
@@ -997,10 +998,10 @@
       </svg>
       <svg width="0" height="0">
           <defs>
-              <filter id="vzb-glow-filter" x="-50%" y="-50%" width="200%" height="200%">
+              <filter id="vzb-glow-filter-${config.id}" x="-50%" y="-50%" width="200%" height="200%">
                   <feGaussianBlur in="SourceGraphic" stdDeviation="2"></feGaussianBlur>
               </filter>
-            <pattern id="vzb-bc-pattern-lines" x="0" y="0" patternUnits="userSpaceOnUse" width="50" height="50" viewBox="0 0 10 10"> 
+            <pattern id="vzb-bc-pattern-lines-${config.id}" x="0" y="0" patternUnits="userSpaceOnUse" width="50" height="50" viewBox="0 0 10 10"> 
                 <path d='M-1,1 l2,-2M0,10 l10,-10M9,11 l2,-2' stroke='black' stroke-width='3' opacity='0.08'/>
               </pattern> 
           </defs>
@@ -1025,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, {
@@ -1070,7 +1072,7 @@
 
       //set filter
       this.DOM.bubbleCrown.selectAll(".vzb-crown-glow")
-        .attr("filter", "url(" + location.pathname + "#vzb-glow-filter)");
+        .attr("filter", `url(${location.pathname}#vzb-glow-filter-${this.id})`);
 
       this._date = this.findChild({type: "DateTimeBackground"});
       this._labels = this.findChild({type: "Labels"});
@@ -1191,7 +1193,7 @@
     }
 
     draw() {
-      this.localise = this.services.locale.auto();
+      this.localise = this.services.locale.auto(this.MDL.frame.interval);
 
       //this.MDL.trail.config.show = false;
       //this.ui.cursorMode = "plus";
@@ -1209,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);
@@ -1229,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);
     }
@@ -1238,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();
@@ -1309,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
@@ -1339,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);
                 }
               }
         
@@ -1381,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 ?
@@ -1437,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);
                 }
@@ -1493,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)
@@ -1543,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);
         }
@@ -1767,10 +1809,6 @@
       const infoElHeight = this.profileConstants.infoElHeight;
       const xAxisTitleBottomMargin = this.profileConstants.xAxisTitleBottomMargin;
 
-      //labels
-      this._labels.setCloseCrossHeight(_this.profileConstants.infoElHeight * 1.2);
-      this._labels.setTooltipFontSize(_this.profileConstants.infoElHeight + "px");
-      
       //stage
       const height = this.height = (this.elementHeight - margin.top - margin.bottom) || 0;
       const width = this.width = (this.elementWidth - margin.left * this.profileConstants.leftMarginRatio - margin.right) || 0;
@@ -2266,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)]);
@@ -2279,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;
@@ -2290,7 +2329,7 @@
         let text = "";
         
         text = isSelected ? 
-          !trailShow || isTailTrail || (!isTrail && !this.hoverBubble) ? "": this.localise(d.label[trailGroupDim])
+          !trailShow || isTailTrail || (!isTrail && !this.hoverBubble) ? "": this.localise(d[trailGroupDim])
           : 
           this.__labelWithoutFrame(d);
         
@@ -2552,8 +2591,8 @@
         placeholder: ".vzb-repeater",
         model: marker,
         options: {
-          ComponentClass: VizabiBubbleChart,
-          componentCssName: "vzb-bubblechart"
+          repeatedComponent: VizabiBubbleChart,
+          repeatedComponentCssClass: "vzb-bubblechart"
         },
         name: "chart",
       },{
@@ -2605,7 +2644,7 @@
       }];
 
       config.template = `
-      <div class="vzb-repeater vzb-bubblechart"></div>
+      <div class="vzb-repeater"></div>
       <div class="vzb-animationcontrols">
         <div class="vzb-timeslider"></div>
         <div class="vzb-speedslider"></div>
@@ -2684,7 +2723,7 @@
     }
   });
 
-  BubbleChart.versionInfo = { version: "3.12.1", build: 1634118614227, 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;