@vizabi/bubblechart 3.12.0 → 3.13.2

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.0 build 1633354384005 Copyright 2021 Gapminder Foundation and contributors
+// https://github.com/vizabi/bubblechart#readme v3.13.2 build 1642697876953 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>
@@ -1070,7 +1071,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 +1192,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";
@@ -1767,10 +1768,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;
@@ -2290,7 +2287,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);
         
@@ -2467,7 +2464,7 @@
       if (typeof d.label == "object") 
         return Object.entries(d.label)
           .filter(entry => entry[0] != this.MDL.frame.data.concept)
-          .map(entry => entry[1])
+          .map(entry => VizabiSharedComponents.LegacyUtils.isNumber(entry[1]) ? (entry[0] + ": " + entry[1]) : entry[1])
           .join(", ");
       if (d.label != null) return "" + d.label;
       return d[Symbol.for("key")];
@@ -2552,8 +2549,8 @@
         placeholder: ".vzb-repeater",
         model: marker,
         options: {
-          ComponentClass: VizabiBubbleChart,
-          componentCssName: "vzb-bubblechart"
+          repeatedComponent: VizabiBubbleChart,
+          repeatedComponentCssClass: "vzb-bubblechart"
         },
         name: "chart",
       },{
@@ -2605,7 +2602,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 +2681,7 @@
     }
   });
 
-  BubbleChart.versionInfo = { version: "3.12.0", build: 1633354384005, package: {"homepage":"https://github.com/vizabi/bubblechart#readme","name":"@vizabi/bubblechart","description":"Vizabi bubble chart"}, sharedComponents: VizabiSharedComponents.versionInfo};
+  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};
 
   return BubbleChart;