@vizabi/bubblechart 0.0.4 → 0.0.11

package/build/bubblechart.js

@@ -1,17 +1,37 @@
-// https://github.com/vizabi/bubblechart#readme v0.0.4 build 1680086164280 Copyright 2023 Gapminder Foundation and contributors
+// https://github.com/vizabi/bubblechart#readme v0.0.11 build 1680128721323 Copyright 2023 Gapminder Foundation and contributors
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('VizabiSharedComponents'), require('d3'), require('mobx')) :
-  typeof define === 'function' && define.amd ? define(['VizabiSharedComponents', 'd3', 'mobx'], 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) :
   (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.BubbleChart = factory(global.VizabiSharedComponents, global.d3, global.mobx));
-})(this, (function (VizabiSharedComponents, d3$1, mobx) { 'use strict';
+})(this, (function (sharedComponents, d3, mobx) { 'use strict';
+
+  function _interopNamespace(e) {
+    if (e && e.__esModule) return e;
+    var n = Object.create(null);
+    if (e) {
+      Object.keys(e).forEach(function (k) {
+        if (k !== 'default') {
+          var d = Object.getOwnPropertyDescriptor(e, k);
+          Object.defineProperty(n, k, d.get ? d : {
+            enumerable: true,
+            get: function () { return e[k]; }
+          });
+        }
+      });
+    }
+    n["default"] = e;
+    return Object.freeze(n);
+  }
+
+  var d3__namespace = /*#__PURE__*/_interopNamespace(d3);
 
   class PanZoom {
 
     constructor(context) {
       this.context = context;
 
-      this.dragRectangle = d3$1.drag();
-      this.zoomer = d3$1.zoom();
+      this.dragRectangle = d3__namespace.drag();
+      this.zoomer = d3__namespace.zoom();
 
       // this.dragLock = false;
 
@@ -55,8 +75,8 @@
         }
 
         return {
-          x: d3$1.pointer(event, this)[0],
-          y: d3$1.pointer(event, this)[1]
+          x: d3__namespace.pointer(event, this)[0],
+          y: d3__namespace.pointer(event, this)[1]
         };
       };
     }
@@ -81,8 +101,8 @@
 
           // self.dragLock = true;
           this.origin = {
-            x: d3$1.pointer(event, this)[0],
-            y: d3$1.pointer(event, this)[1]
+            x: d3__namespace.pointer(event, this)[0],
+            y: d3__namespace.pointer(event, this)[1]
           };
           _this.DOM.zoomRect.classed("vzb-invisible", false);
         },
@@ -111,8 +131,8 @@
             .classed("vzb-invisible", true);
 
           this.target = {
-            x: d3$1.pointer(event, this)[0],
-            y: d3$1.pointer(event, this)[1]
+            x: d3__namespace.pointer(event, this)[0],
+            y: d3__namespace.pointer(event, this)[1]
           };
           if (Math.abs(this.origin.x - this.target.x) < 10 || Math.abs(this.origin.y - this.target.y) < 10) return;
 
@@ -125,7 +145,7 @@
             _this.ui.cursorMode === "plus";
 
           self._zoomOnRectangle(
-            d3$1.select(this),
+            d3__namespace.select(this),
             this.origin.x,
             this.origin.y,
             this.target.x,
@@ -245,7 +265,7 @@
           }
 
           //limit zoom translate
-          self.zoomSelection.property("__zoom", d3$1.zoomIdentity.translate(pan[0], pan[1]).scale(zoom));
+          self.zoomSelection.property("__zoom", d3__namespace.zoomIdentity.translate(pan[0], pan[1]).scale(zoom));
 
           const xPanOffset = _this.width * zoom * ratioX;
           const yPanOffset = _this.height * zoom * ratioY;
@@ -302,7 +322,7 @@
           }
 
           //zoomer.translate = pan;
-          //self.zoomSelection.property("__zoom", d3_zoomIdentity.translate(pan[0], pan[1]).scale(zoom));
+          //self.zoomSelection.property("__zoom", d3.zoomIdentity.translate(pan[0], pan[1]).scale(zoom));
 
           /*
            * Clamp the xRange and yRange by the amount that the bounds
@@ -369,7 +389,7 @@
           }
 
           const formatter = function(n) {
-            return VizabiSharedComponents.LegacyUtils.isDate(n) ? n : +n.toFixed(2);
+            return sharedComponents.LegacyUtils.isDate(n) ? n : +n.toFixed(2);
           };
 
           const zoomedXRange = xRangeBoundsBumped;
@@ -453,12 +473,12 @@
       if (!duration) duration = _this.duration;
 
       //d3 extent returns min and max of the input array as [min, max]
-      const mmX = d3$1.extent(VizabiSharedComponents.LegacyUtils.values(_this.frame.x));
-      const mmY = d3$1.extent(VizabiSharedComponents.LegacyUtils.values(_this.frame.y));
+      const mmX = d3__namespace.extent(sharedComponents.LegacyUtils.values(_this.frame.x));
+      const mmY = d3__namespace.extent(sharedComponents.LegacyUtils.values(_this.frame.y));
 
       //protection agains unreasonable min-max results -- abort function
       if (!mmX[0] && mmX[0] !== 0 || !mmX[1] && mmX[1] !== 0 || !mmY[0] && mmY[0] !== 0 || !mmY[1] && mmY[1] !== 0) {
-        return VizabiSharedComponents.LegacyUtils.warn("panZoom.expandCanvas: X or Y min/max are broken. Aborting with no action");
+        return sharedComponents.LegacyUtils.warn("panZoom.expandCanvas: X or Y min/max are broken. Aborting with no action");
       }
       /*
        * Use a range bumped scale to correctly accommodate the range bump
@@ -553,7 +573,7 @@
     _zoomOnRectangle(element, zoomedX1, zoomedY1, zoomedX2, zoomedY2, compensateDragging, duration, dontFeedToState) {
       const _this = this.context;
       const zoomer = this.zoomer;
-      const transform = d3$1.zoomTransform(this.zoomSelection.node());
+      const transform = d3__namespace.zoomTransform(this.zoomSelection.node());
 
       const x1 = zoomedX1;
       const y1 = zoomedY1;
@@ -588,7 +608,7 @@
       let zoom, ratioX, ratioY;
 
       if (x1 == x2 || y1 == y2 || xRangeBoundsBumped[0] == xRangeBoundsBumped[1] || yRangeBoundsBumped[0] == yRangeBoundsBumped[1]) {
-        return VizabiSharedComponents.LegacyUtils.warn("_zoomOnRectangle(): can not proceed because this may result in infinity zooms");
+        return sharedComponents.LegacyUtils.warn("_zoomOnRectangle(): can not proceed because this may result in infinity zooms");
       }
 
       if (Math.abs(x1 - x2) > Math.abs(y1 - y2)) {
@@ -633,7 +653,7 @@
       zoomer.ratioX = ratioX || 1; //NaN defaults to 1
       zoomer.duration = duration ? duration : 0;
 
-      this.zoomSelection.call(zoomer.transform, d3$1.zoomIdentity.translate(pan[0], pan[1]).scale(zoom));
+      this.zoomSelection.call(zoomer.transform, d3__namespace.zoomIdentity.translate(pan[0], pan[1]).scale(zoom));
     }
 
     /*
@@ -643,12 +663,12 @@
      * function dblclicked() and what it refers to
      */
     zoomByIncrement(event, direction, duration) {
-      const transform = d3$1.zoomTransform(this.zoomSelection.node());
+      const transform = d3__namespace.zoomTransform(this.zoomSelection.node());
 
       let ratio = transform.k;
       const pan = [transform.x, transform.y];
 
-      const mouse = d3$1.pointer(event, this.zoomSelection.node());
+      const mouse = d3__namespace.pointer(event, this.zoomSelection.node());
       let k = Math.log(ratio) / Math.LN2;
 
       //change factor direction based on the input. default is no direction supplied
@@ -672,7 +692,7 @@
       pan[1] += mouse[1] - locus[1];
 
       this.zoomer.duration = duration || 0;
-      this.zoomSelection.call(this.zoomer.transform, d3$1.zoomIdentity.translate(pan[0], pan[1]).scale(ratio));
+      this.zoomSelection.call(this.zoomer.transform, d3__namespace.zoomIdentity.translate(pan[0], pan[1]).scale(ratio));
 
     }
 
@@ -682,7 +702,7 @@
     resetZoomState(element) {
       this.zoomer.ratioY = 1;
       this.zoomer.ratioX = 1;
-      (element || this.zoomSelection).property("__zoom", d3$1.zoomIdentity);
+      (element || this.zoomSelection).property("__zoom", d3__namespace.zoomIdentity);
     }
 
     reset(element, duration) {
@@ -692,7 +712,7 @@
       this.zoomer.ratioY = 1;
       this.zoomer.ratioX = 1;
       this.zoomer.duration = duration || 0;
-      (element || this.zoomSelection).call(this.zoomer.transform, d3$1.zoomIdentity);
+      (element || this.zoomSelection).call(this.zoomer.transform, d3__namespace.zoomIdentity);
     }
 
     rerun(element) {
@@ -724,13 +744,13 @@
       
       this.DOM.xAxisGroupsEl.classed("vzb-invisible", !showxAxisGroups);
       if (showxAxisGroups) {
-        const axisGroupsData = VizabiSharedComponents.Utils.injectIndexes(uiSetting.xAxisGroups[this.MDL.x.data.concept]);
+        const axisGroupsData = sharedComponents.Utils.injectIndexes(uiSetting.xAxisGroups[this.MDL.x.data.concept]);
         let xAxisGroups = this.DOM.xAxisGroupsEl.selectAll(".vzb-bc-x-axis-group").data(axisGroupsData);
         
         xAxisGroups.exit().remove();
         xAxisGroups = xAxisGroups.enter().append("g").attr("class", "vzb-bc-x-axis-group")
           .each(function(){
-            const view = d3$1.select(this);
+            const view = d3__namespace.select(this);
             view.append("text").attr("class", "vzb-bc-x-axis-group-line").text("◆").style("text-anchor","middle");
             view.append("text").attr("class", "vzb-bc-x-axis-group-text");
           })
@@ -741,7 +761,7 @@
         
         // first pass: calculate label text sizes and margins
         xAxisGroups.each(function(d, i){
-          const view = d3$1.select(this);
+          const view = d3__namespace.select(this);
           
           const text = view.select("text.vzb-bc-x-axis-group-text")
             .text(_this.localise(d.label));
@@ -751,8 +771,8 @@
           calcs.textHeight = text.node().getBBox().height;
           calcs.textWidth = text.node().getBBox().width;
           
-          calcs.boundaryMinX_px = _this.xScale(d.min || d.min === 0? d.min : d3$1.min(_this.xScale.domain())) || 0;
-          calcs.boundaryMaxX_px = _this.xScale(d.max || d.max === 0? d.max : d3$1.max(_this.xScale.domain())) || 0;
+          calcs.boundaryMinX_px = _this.xScale(d.min || d.min === 0? d.min : d3__namespace.min(_this.xScale.domain())) || 0;
+          calcs.boundaryMaxX_px = _this.xScale(d.max || d.max === 0? d.max : d3__namespace.max(_this.xScale.domain())) || 0;
           
           calcs.centerX_px = (calcs.boundaryMinX_px + calcs.boundaryMaxX_px) / 2;
           calcs.marginX_px = (Math.abs(calcs.boundaryMinX_px - calcs.boundaryMaxX_px) - calcs.textWidth) / 2;
@@ -765,7 +785,7 @@
         // second pass: if at least one of labels doesn't fit, switch to compact mode and recalculate text sizes and margins
         if (useShorterLabels) {
           xAxisGroups.each(function(d, i){
-            const view = d3$1.select(this);
+            const view = d3__namespace.select(this);
 
             const text = view.select("text.vzb-bc-x-axis-group-text")
               .text(_this.localise(d.label_short));
@@ -781,7 +801,7 @@
         
         // third pass: actually put labels in places
         xAxisGroups.each(function(d, i){
-          const view = d3$1.select(this);
+          const view = d3__namespace.select(this);
           
           const isFirst = (i == 0);
           const isLast = (i == xAxisGroups_calcs.length - 1);
@@ -811,9 +831,9 @@
         
         xAxisGroups.select("text.vzb-bc-x-axis-group-text").on("mouseenter", function(event, d) {
           const calcs = xAxisGroups_calcs[d.i];
-          const parentView = d3$1.select(this.parentNode);
+          const parentView = d3__namespace.select(this.parentNode);
     
-          d3$1.select(this).attr("font-weight", "bold");
+          d3__namespace.select(this).attr("font-weight", "bold");
           parentView.append("rect").lower()
             .attr("x", calcs.boundaryMinX_px)
             .attr("width", calcs.boundaryMaxX_px - calcs.boundaryMinX_px)
@@ -833,9 +853,9 @@
             .attr("y2", _this.height);
     
         }).on("mouseleave", function() {
-          const parentView = d3$1.select(this.parentNode);
+          const parentView = d3__namespace.select(this.parentNode);
     
-          d3$1.select(this).attr("font-weight", null);
+          d3__namespace.select(this).attr("font-weight", null);
           parentView.selectAll("rect").remove();
           parentView.selectAll("line").remove();
         });
@@ -849,8 +869,8 @@
       
       this.DOM.lineEqualXY.classed("vzb-invisible", !showLineEqualXY);
       if (showLineEqualXY) {
-        const min = d3$1.min(this.yScale.domain().concat(this.xScale.domain()));
-        const max = d3$1.max(this.yScale.domain().concat(this.xScale.domain()));
+        const min = d3__namespace.min(this.yScale.domain().concat(this.xScale.domain()));
+        const max = d3__namespace.max(this.yScale.domain().concat(this.xScale.domain()));
 
         this.DOM.lineEqualXY
           .transition()
@@ -863,7 +883,7 @@
     }
   }
 
-  const {ICON_QUESTION} = VizabiSharedComponents.Icons;
+  const {ICON_QUESTION} = sharedComponents.Icons;
   const COLOR_WHITEISH = "rgb(253, 253, 253)";
 
   const marginScaleH = (marginMin, ratio = 0) => height => marginMin + height * ratio;
@@ -881,7 +901,7 @@
       leftMarginRatio: 1,
       padding: 2,
       minRadiusPx: 0.5,
-      maxRadiusPx: Math.max(0.5, MAX_RADIUS_EM * VizabiSharedComponents.LegacyUtils.hypotenuse(width, height)),
+      maxRadiusPx: Math.max(0.5, MAX_RADIUS_EM * sharedComponents.LegacyUtils.hypotenuse(width, height)),
       infoElHeight: 16,
       yAxisTitleBottomMargin: 6,
       xAxisTitleBottomMargin: 4
@@ -891,7 +911,7 @@
       leftMarginRatio: 1.6,
       padding: 2,
       minRadiusPx: 1,
-      maxRadiusPx: Math.max(0.5, MAX_RADIUS_EM * VizabiSharedComponents.LegacyUtils.hypotenuse(width, height)),
+      maxRadiusPx: Math.max(0.5, MAX_RADIUS_EM * sharedComponents.LegacyUtils.hypotenuse(width, height)),
       infoElHeight: 20,
       yAxisTitleBottomMargin: 3,
       xAxisTitleBottomMargin: 4
@@ -901,7 +921,7 @@
       leftMarginRatio: 1.8,
       padding: 2,
       minRadiusPx: 1,
-      maxRadiusPx: Math.max(0.5, MAX_RADIUS_EM * VizabiSharedComponents.LegacyUtils.hypotenuse(width, height)),
+      maxRadiusPx: Math.max(0.5, MAX_RADIUS_EM * sharedComponents.LegacyUtils.hypotenuse(width, height)),
       infoElHeight: 22,
       yAxisTitleBottomMargin: 3,//marginScaleH(4, 0.01)(height),
       xAxisTitleBottomMargin: marginScaleH(0, 0.01)(height),
@@ -919,18 +939,18 @@
     LARGE: {
       margin: { top: 30, bottom: marginScaleH(45, 0.03)(height), left: marginScaleW(35, 0.025)(width), right: 30 },
       yAxisTitleBottomMargin: 3,//marginScaleH(4, 0.01)(height),
-      xAxisTitleBottomMargin: marginScaleH(-5, 0.01)(height),
+      xAxisTitleBottomMargin: marginScaleH(-10, 0.01)(height),
       infoElHeight: 32,
       hideSTitle: true
     }
   });
 
   // BUBBLE CHART COMPONENT
-  class _VizabiBubbleChart extends VizabiSharedComponents.Chart {
+  class _VizabiBubbleChart extends sharedComponents.Chart {
 
     constructor(config) {
       config.subcomponents = [{
-        type: VizabiSharedComponents.Labels,
+        type: sharedComponents.Labels,
         placeholder: ".vzb-bc-labels",      
         options: {
           CSS_PREFIX: "vzb-bc",
@@ -940,7 +960,7 @@
         },
         name: "labels"
       },{
-        type: VizabiSharedComponents.DateTimeBackground,
+        type: sharedComponents.DateTimeBackground,
         placeholder: ".vzb-bc-date"
       }];
 
@@ -1081,10 +1101,10 @@
       this.decorations = new BCDecorations(this);
       this._initInfoElements();
     
-      this.scrollableAncestor = VizabiSharedComponents.LegacyUtils.findScrollableAncestor(this.element);
+      this.scrollableAncestor = sharedComponents.LegacyUtils.findScrollableAncestor(this.element);
 
-      this.xAxis = VizabiSharedComponents.axisSmart("bottom");
-      this.yAxis = VizabiSharedComponents.axisSmart("left");
+      this.xAxis = sharedComponents.axisSmart("bottom");
+      this.yAxis = sharedComponents.axisSmart("left");
 
       this.axisTitleComplimentStrings = {Y: "", X: "", S: "", C: ""};
 
@@ -1096,7 +1116,7 @@
 
       const _this = this;
       //keyboard listeners
-      d3$1.select("body")
+      d3__namespace.select("body")
         .on("keydown", (event) => {
           if (_this.ui.cursorMode !== "arrow" && _this.ui.cursorMode !== "hand") return;
           if (event.metaKey || event.ctrlKey) _this.DOM.chartSvgAll.classed("vzb-zoomin", true);
@@ -1138,14 +1158,14 @@
       const dataNotesDialog = () => this.root.findChild({type: "DataNotes"});
       const timeSlider = () => this.root.findChild({type: "TimeSlider"});
 
-      VizabiSharedComponents.LegacyUtils.setIcon(this.DOM.yInfoEl, ICON_QUESTION)
+      sharedComponents.LegacyUtils.setIcon(this.DOM.yInfoEl, ICON_QUESTION)
         .on("click", () => {
           dataNotesDialog().pin();
         })
         .on("mouseover", function() {
           if (timeSlider().ui.dragging) return;
           const rect = this.getBBox();
-          const coord = VizabiSharedComponents.LegacyUtils.makeAbsoluteContext(this, this.farthestViewportElement)(rect.x - 10, rect.y + rect.height + 10);
+          const coord = sharedComponents.LegacyUtils.makeAbsoluteContext(this, this.farthestViewportElement)(rect.x - 10, rect.y + rect.height + 10);
           const toolRect = _this.root.element.node().getBoundingClientRect();
           const chartRect = _this.element.node().getBoundingClientRect();
           dataNotesDialog()
@@ -1158,14 +1178,14 @@
           dataNotesDialog().hide();
         });
 
-      VizabiSharedComponents.LegacyUtils.setIcon(this.DOM.xInfoEl, ICON_QUESTION)
+      sharedComponents.LegacyUtils.setIcon(this.DOM.xInfoEl, ICON_QUESTION)
         .on("click", () => {
           dataNotesDialog().pin();
         })
         .on("mouseover", function() {
           if (timeSlider().ui.dragging) return;
           const rect = this.getBBox();
-          const coord = VizabiSharedComponents.LegacyUtils.makeAbsoluteContext(this, this.farthestViewportElement)(rect.x - 10, rect.y + rect.height + 10);
+          const coord = sharedComponents.LegacyUtils.makeAbsoluteContext(this, this.farthestViewportElement)(rect.x - 10, rect.y + rect.height + 10);
           const toolRect = _this.root.element.node().getBoundingClientRect();
           const chartRect = _this.element.node().getBoundingClientRect();
           dataNotesDialog()
@@ -1249,7 +1269,7 @@
           .attr("patternContentUnits", "objectBoundingBox")
           .html(d => d[1][colorConcept])
           .each(function() {
-            const svg = d3$1.select(this).select("svg");
+            const svg = d3__namespace.select(this).select("svg");
             if (svg.empty()) return;
             
             if (!svg.attr("viewBox"))
@@ -1314,7 +1334,7 @@
             .attr("id", d => `vzb-bc-bubble-${d[Symbol.for("key")]}-${this.id}`)
             .style("opacity", d => d[Symbol.for("opacity")] = this._getBubbleOpacity(d))
             .call(selection => {
-              if(!VizabiSharedComponents.LegacyUtils.isTouchDevice()){
+              if(!sharedComponents.LegacyUtils.isTouchDevice()){
                 selection
                   .on("mouseover", (event, d) => {
                     if (this.ui.cursorMode !== "arrow" && this.ui.cursorMode !== "hand") return;
@@ -1344,7 +1364,7 @@
               const isTrail = isTrailBubble(d);
               const isExtrapolated = d[Symbol.for("extrapolated")];
               const headTrail = isTrail && !dataNext[Symbol.for("trailHeadKey")];
-              const view = d3$1.select(this);
+              const view = d3__namespace.select(this);
               const circle = view.select("circle");
               const diagonalLine = view.select(".vzb-diagonal-line");
         
@@ -1356,7 +1376,7 @@
               //d.hidden = (!valueS && valueS !== 0) || valueX == null || valueY == null;
         
               //view.classed("vzb-hidden", d.hidden);
-              d.r = VizabiSharedComponents.LegacyUtils.areaToRadius(_this.sScale(valueS || 0));
+              d.r = sharedComponents.LegacyUtils.areaToRadius(_this.sScale(valueS || 0));
               const scaledX = _this.xScale(valueX);
               const scaledY = _this.yScale(valueY);
               const scaledC = _this.__getColor(d[Symbol.for(isTrail ? "trailHeadKey" : "key")], valueC);
@@ -1417,7 +1437,7 @@
               const headTrail = isTrail && !dataNext[Symbol.for("trailHeadKey")];
         
               const valueS = d.size;
-              d.r = VizabiSharedComponents.LegacyUtils.areaToRadius(_this.sScale(valueS || 0));
+              d.r = sharedComponents.LegacyUtils.areaToRadius(_this.sScale(valueS || 0));
               if (isTrail && d["frame"] < trailRedrawDate) return;
         
               const valueX = d[_this._alias("x")];
@@ -1431,7 +1451,7 @@
               const scaledY = _this.yScale(valueY);
               const scaledC = _this.__getColor(d[Symbol.for(isTrail ? "trailHeadKey" : "key")], valueC);
         
-              const group = d3$1.select(this);
+              const group = d3__namespace.select(this);
               if (!duration || !headTrail) {
                 const circle = group.select("circle");
                 if (duration && !isTrail) {
@@ -1505,11 +1525,11 @@
               const isTrail = isTrailBubble(d);
               
               const view = duration && !isTrail ?
-                d3$1.select(this).transition(transition)
+                d3__namespace.select(this).transition(transition)
                   .duration(duration*0.9)
                   .style("opacity", 0)
                 :
-                d3$1.select(this).interrupt();
+                d3__namespace.select(this).interrupt();
         
               view
                 .remove();
@@ -1546,12 +1566,12 @@
         const valueS = d.size;
         const valueC = d.color;
 
-        d.r = VizabiSharedComponents.LegacyUtils.areaToRadius(_this.sScale(valueS || 0));
+        d.r = sharedComponents.LegacyUtils.areaToRadius(_this.sScale(valueS || 0));
         const scaledX = _this.xScale(valueX);
         const scaledY = _this.yScale(valueY);
         const scaledC = _this.__getColor(d[Symbol.for(isTrail ? "trailHeadKey" : "key")], valueC);
 
-        const group = d3$1.select(this);
+        const group = d3__namespace.select(this);
 
         if (duration && headTrail) {
           group.style("opacity", 0)
@@ -1620,7 +1640,7 @@
 
     __getZoomed(type, zoomed, domain) {
       //const zoomed = values[`zoomed${type}`];
-      return d3[type.toLowerCase()](zoomed !== null ? zoomed : domain);
+      return d3__namespace[type.toLowerCase()](zoomed !== null ? zoomed : domain);
     }
 
     __getZoomedMin(values, domain) {
@@ -1710,7 +1730,7 @@
         PROFILE_CONSTANTS_FOR_PROJECTOR(this.elementWidth, this.elementHeight)
       );
 
-      if (!this.elementHeight || !this.elementWidth) return VizabiSharedComponents.LegacyUtils.warn("Chart _updateProfile() abort: container is too little or has display:none");
+      if (!this.elementHeight || !this.elementWidth) return sharedComponents.LegacyUtils.warn("Chart _updateProfile() abort: container is too little or has display:none");
     }
 
     _getDuration() {
@@ -1734,34 +1754,34 @@
 
       this.strings = {
         title: {
-          Y: VizabiSharedComponents.Utils.getConceptName(y, this.localise),
-          X: VizabiSharedComponents.Utils.getConceptName(x, this.localise),
-          S: VizabiSharedComponents.Utils.getConceptName(size, this.localise),
-          C: VizabiSharedComponents.Utils.getConceptName(color, this.localise)
+          Y: sharedComponents.Utils.getConceptName(y, this.localise),
+          X: sharedComponents.Utils.getConceptName(x, this.localise),
+          S: sharedComponents.Utils.getConceptName(size, this.localise),
+          C: sharedComponents.Utils.getConceptName(color, this.localise)
         },
         title_short: {
-          Y: VizabiSharedComponents.Utils.getConceptShortName(y, this.localise),
-          X: VizabiSharedComponents.Utils.getConceptShortName(x, this.localise),
-          S: VizabiSharedComponents.Utils.getConceptShortName(size, this.localise),
-          C: VizabiSharedComponents.Utils.getConceptShortName(color, this.localise)
+          Y: sharedComponents.Utils.getConceptShortName(y, this.localise),
+          X: sharedComponents.Utils.getConceptShortName(x, this.localise),
+          S: sharedComponents.Utils.getConceptShortName(size, this.localise),
+          C: sharedComponents.Utils.getConceptShortName(color, this.localise)
         },
         subtitle: {
-          Y: VizabiSharedComponents.Utils.getConceptNameMinusShortName(y, this.localise),
-          X: VizabiSharedComponents.Utils.getConceptNameMinusShortName(x, this.localise)
+          Y: sharedComponents.Utils.getConceptNameMinusShortName(y, this.localise),
+          X: sharedComponents.Utils.getConceptNameMinusShortName(x, this.localise)
         },
         unit: {
-          Y: VizabiSharedComponents.Utils.getConceptUnit(y),
-          X: VizabiSharedComponents.Utils.getConceptUnit(x),
-          S: VizabiSharedComponents.Utils.getConceptUnit(size),
-          C: VizabiSharedComponents.Utils.getConceptUnit(color)
+          Y: sharedComponents.Utils.getConceptUnit(y),
+          X: sharedComponents.Utils.getConceptUnit(x),
+          S: sharedComponents.Utils.getConceptUnit(size),
+          C: sharedComponents.Utils.getConceptUnit(color)
         }
       };
 
       Promise.all([
-        VizabiSharedComponents.Utils.getConceptNameCompliment(y),
-        VizabiSharedComponents.Utils.getConceptNameCompliment(x),
-        VizabiSharedComponents.Utils.getConceptNameCompliment(size),
-        VizabiSharedComponents.Utils.getConceptNameCompliment(color)
+        sharedComponents.Utils.getConceptNameCompliment(y),
+        sharedComponents.Utils.getConceptNameCompliment(x),
+        sharedComponents.Utils.getConceptNameCompliment(size),
+        sharedComponents.Utils.getConceptNameCompliment(color)
       ]).then(mobx.action(response => {        
         [ 
           this.axisTitleComplimentStrings.Y,
@@ -1776,7 +1796,7 @@
       const treemenu = this.root.findChild({type: "TreeMenu"});
 
       this.DOM.yTitleEl
-        .classed("vzb-disabled", treemenu.state.ownReadiness !== VizabiSharedComponents.Utils.STATUS.READY)
+        .classed("vzb-disabled", treemenu.state.ownReadiness !== sharedComponents.Utils.STATUS.READY)
         .on("click", () => {
           treemenu
             .encoding(this._alias("y"))
@@ -1787,7 +1807,7 @@
         });
 
       this.DOM.xTitleEl
-        .classed("vzb-disabled", treemenu.state.ownReadiness !== VizabiSharedComponents.Utils.STATUS.READY)
+        .classed("vzb-disabled", treemenu.state.ownReadiness !== sharedComponents.Utils.STATUS.READY)
         .on("click", () => {
           treemenu
             .encoding(this._alias("x"))
@@ -2022,7 +2042,7 @@
 
       if (yInfoEl.select("svg").node()) {
         const titleBBox = yTitleEl.node().getBBox();
-        const t = VizabiSharedComponents.LegacyUtils.transform(yTitleEl.node());
+        const t = sharedComponents.LegacyUtils.transform(yTitleEl.node());
         const hTranslate = isRTL ? (titleBBox.x + t.translateX - infoElHeight * 1.4) : (titleBBox.x + t.translateX + titleBBox.width + infoElHeight * 0.4);
         const vTranslate = isRTL ? (t.translateY + infoElHeight * 1.4 + titleBBox.width * 0.5) : (t.translateY - infoElHeight * 0.4 - titleBBox.width * 0.5);
         const conceptPropsY = y.data.conceptProps;
@@ -2039,7 +2059,7 @@
 
       if (xInfoEl.select("svg").node()) {
         const titleBBox = xTitleEl.node().getBBox();
-        const t = VizabiSharedComponents.LegacyUtils.transform(xTitleEl.node());
+        const t = sharedComponents.LegacyUtils.transform(xTitleEl.node());
         const hTranslate = isRTL ? (titleBBox.x + t.translateX - infoElHeight * 1.4) : (titleBBox.x + t.translateX + titleBBox.width + infoElHeight * 0.4);
         const conceptPropsX = x.data.conceptProps;
 
@@ -2055,7 +2075,7 @@
     _rangeBump(arg, undo) {
       const bump = this.profileConstants.maxRadiusPx;
       undo = undo ? -1 : 1;
-      if (VizabiSharedComponents.LegacyUtils.isArray(arg) && arg.length > 1) {
+      if (sharedComponents.LegacyUtils.isArray(arg) && arg.length > 1) {
         let z1 = arg[0];
         let z2 = arg[arg.length - 1];
 
@@ -2073,7 +2093,7 @@
         } else ;
         return [z1, z2];
       }
-      VizabiSharedComponents.LegacyUtils.warn("rangeBump error: input is not an array or empty");
+      sharedComponents.LegacyUtils.warn("rangeBump error: input is not an array or empty");
     }
 
     _updateSTitle(titleS, titleC) {
@@ -2116,9 +2136,9 @@
     }
 
     _getTransition(duration) {
-      return duration ? d3$1.transition()
+      return duration ? d3__namespace.transition()
         .duration(duration)
-        .ease(d3$1.easeLinear) : d3$1.transition();
+        .ease(d3__namespace.easeLinear) : d3__namespace.transition();
     }  
 
     _bubblesInteract() {
@@ -2166,11 +2186,11 @@
       
       const extent = this.MDL.size.scale.extent || [0, 1];
       
-      let minArea = VizabiSharedComponents.LegacyUtils.radiusToArea(Math.max(maxRadiusPx * extent[0], minRadiusPx));
-      let maxArea = VizabiSharedComponents.LegacyUtils.radiusToArea(Math.max(maxRadiusPx * extent[1], minRadiusPx));
+      let minArea = sharedComponents.LegacyUtils.radiusToArea(Math.max(maxRadiusPx * extent[0], minRadiusPx));
+      let maxArea = sharedComponents.LegacyUtils.radiusToArea(Math.max(maxRadiusPx * extent[1], minRadiusPx));
 
       let range = minArea === maxArea? [minArea, maxArea] :
-        d3$1.range(minArea, maxArea, (maxArea - minArea)/(this.sScale.domain().length - 1)).concat(maxArea);
+        d3__namespace.range(minArea, maxArea, (maxArea - minArea)/(this.sScale.domain().length - 1)).concat(maxArea);
 
       this.sScale.range(range);
     }
@@ -2408,7 +2428,7 @@
       const _this = this;
       const selectedFilter = this.MDL.selected.data.filter;
       
-      if (VizabiSharedComponents.LegacyUtils.isTouchDevice()) {
+      if (sharedComponents.LegacyUtils.isTouchDevice()) {
         _this.MDL.highlighted.data.filter.clear();
         _this._labels.showCloseCross(null, false);
       } else {
@@ -2479,7 +2499,7 @@
             cache.labelX0 = trailData[this._alias("x")];
             cache.labelY0 = trailData[this._alias("y")];
             cache.scaledC0 = trailData.color != null ? this.cScale(trailData.color) : COLOR_WHITEISH,
-            cache.scaledS0 = (trailData.size || trailData.size === 0) ? VizabiSharedComponents.LegacyUtils.areaToRadius(this.sScale(trailData.size)) : null;
+            cache.scaledS0 = (trailData.size || trailData.size === 0) ? sharedComponents.LegacyUtils.areaToRadius(this.sScale(trailData.size)) : null;
             cache.valueS0 = trailData.size;
             trailData.hidden = hidden;
             this._labels.updateLabel(trailData, cache, cache.labelX0, cache.labelY0, trailData.size, trailData.color, labelText, trailData.size_label, duration, showhide);
@@ -2489,7 +2509,7 @@
           cache.labelX0 = x;
           cache.labelY0 = y;
           cache.scaledC0 = d.color != null ? this.cScale(d.color) : COLOR_WHITEISH,
-          cache.scaledS0 = (d.size || d.size === 0) ? VizabiSharedComponents.LegacyUtils.areaToRadius(this.sScale(d.size)) : null;
+          cache.scaledS0 = (d.size || d.size === 0) ? sharedComponents.LegacyUtils.areaToRadius(this.sScale(d.size)) : null;
           cache.valueS0 = d.size;
           d.hidden = hidden;
           this._labels.updateLabel(d, cache, x, y, d.size, d.color, labelText, d.size_label, duration, showhide);
@@ -2520,7 +2540,7 @@
         cache.labelX0 = d[this._alias("x")];
         cache.labelY0 = d[this._alias("y")];
         cache.scaledC0 = d.color != null ? this.cScale(d.color) : COLOR_WHITEISH,
-        cache.scaledS0 = (d.size || d.size === 0) ? VizabiSharedComponents.LegacyUtils.areaToRadius(this.sScale(d.size)) : null;
+        cache.scaledS0 = (d.size || d.size === 0) ? sharedComponents.LegacyUtils.areaToRadius(this.sScale(d.size)) : null;
         cache.valueS0 = d.size;
         cache.initTextBBox = null;
         cache.initFontSize = null;
@@ -2532,7 +2552,7 @@
       if (typeof d.label == "object") 
         return Object.entries(d.label)
           .filter(entry => entry[0] != this.MDL.frame.data.concept)
-          .map(entry => VizabiSharedComponents.LegacyUtils.isNumber(entry[1]) ? (entry[0] + ": " + entry[1]) : entry[1])
+          .map(entry => sharedComponents.LegacyUtils.isNumber(entry[1]) ? (entry[0] + ": " + entry[1]) : entry[1])
           .join(", ");
       if (d.label != null) return "" + d.label;
       return d[Symbol.for("key")];
@@ -2595,9 +2615,9 @@
     "cScale": mobx.computed
   });
 
-  VizabiSharedComponents.Chart.add("bubblechart", VizabiBubbleChart);
+  sharedComponents.Chart.add("bubblechart", VizabiBubbleChart);
 
-  class BubbleChart extends VizabiSharedComponents.BaseComponent {
+  class BubbleChart extends sharedComponents.BaseComponent {
 
     constructor(config){
 
@@ -2613,7 +2633,7 @@
       config.name = "bubblechart";
 
       config.subcomponents = [{
-        type: VizabiSharedComponents.Repeater,
+        type: sharedComponents.Repeater,
         placeholder: ".vzb-repeater",
         model: marker,
         options: {
@@ -2622,48 +2642,48 @@
         },
         name: "chart",
       },{
-        type: VizabiSharedComponents.TimeSlider,
+        type: sharedComponents.TimeSlider,
         placeholder: ".vzb-timeslider",
         model: marker,
         name: "time-slider"
       },{
-        type: VizabiSharedComponents.SteppedSlider,
+        type: sharedComponents.SteppedSlider,
         placeholder: ".vzb-speedslider",
         model: marker,
         name: "speed-slider"
       },{
-        type: VizabiSharedComponents.TreeMenu,
+        type: sharedComponents.TreeMenu,
         placeholder: ".vzb-treemenu",
         model: marker,
         name: "tree-menu"
       },{
-        type: VizabiSharedComponents.DataWarning,
+        type: sharedComponents.DataWarning,
         placeholder: ".vzb-datawarning",
         options: {button: ".vzb-datawarning-button"},
         model: marker,
         name: "data-warning"
       },{
-        type: VizabiSharedComponents.DataNotes,
+        type: sharedComponents.DataNotes,
         placeholder: ".vzb-datanotes",
         model: marker
       },{
-        type: VizabiSharedComponents.Dialogs,
+        type: sharedComponents.Dialogs,
         placeholder: ".vzb-dialogs",
         model: marker,
         name: "dialogs"
       },{
-        type: VizabiSharedComponents.ButtonList,
+        type: sharedComponents.ButtonList,
         placeholder: ".vzb-buttonlist",
         model: marker,
         name: "buttons"
       },{
-        type: VizabiSharedComponents.SpaceConfig,
+        type: sharedComponents.SpaceConfig,
         placeholder: ".vzb-spaceconfig",
         options: {button: ".vzb-spaceconfig-button"},
         model: marker,
         name: "space-config"
       },{
-        type: VizabiSharedComponents.ErrorMessage,
+        type: sharedComponents.ErrorMessage,
         placeholder: ".vzb-errormessage",
         model: marker,
         name: "error-message"
@@ -2687,9 +2707,9 @@
     `;
 
       config.services = {
-        Vizabi: new VizabiSharedComponents.CapitalVizabiService({Vizabi: config.Vizabi}),
-        locale: new VizabiSharedComponents.LocaleService(config.locale),
-        layout: new VizabiSharedComponents.LayoutService(config.layout)
+        Vizabi: new sharedComponents.CapitalVizabiService({Vizabi: config.Vizabi}),
+        locale: new sharedComponents.LocaleService(config.locale),
+        layout: new sharedComponents.LayoutService(config.layout)
       };
 
       super(config);
@@ -2751,7 +2771,7 @@
     }
   });
 
-  BubbleChart.versionInfo = { version: "0.0.4", build: 1680086164280, package: {"homepage":"https://github.com/vizabi/bubblechart#readme","name":"@vizabi/bubblechart","description":"Vizabi bubble chart"}, sharedComponents: VizabiSharedComponents.versionInfo};
+  BubbleChart.versionInfo = { version: "0.0.11", build: 1680128721323, package: {"homepage":"https://github.com/vizabi/bubblechart#readme","name":"@vizabi/bubblechart","description":"Vizabi bubble chart"}, sharedComponents: sharedComponents.versionInfo};
 
   return BubbleChart;