@vizabi/bubblechart 3.14.4 → 3.16.0

package/build/bubblechart.js

@@ -1,9 +1,9 @@
-// https://github.com/vizabi/bubblechart#readme v3.14.4 build 1679679202659 Copyright 2023 Gapminder Foundation and contributors
+// https://github.com/vizabi/bubblechart#readme v3.16.0 build 1680712135487 Copyright 2023 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) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.BubbleChart = factory(global.VizabiSharedComponents, global.mobx));
-})(this, (function (VizabiSharedComponents, mobx) { 'use strict';
+  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 (sharedComponents, d3, mobx) { 'use strict';
 
   class PanZoom {
 
@@ -149,11 +149,6 @@
 
         if ((event.type === "wheel" || event.type === "mousewheel") &&
           _this.ui.zoomOnScrolling) {
-          // if (_this.scrollableAncestor) {
-          //   _this.scrollableAncestor.scrollTop -= (event.deltaY || -event.wheelDelta);
-          // }
-          // event.scale = null;
-          //zoomer.scale(this.savedScale);
           return true;
         }
 
@@ -369,7 +364,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 +448,12 @@
       if (!duration) duration = _this.duration;
 
       //d3 extent returns min and max of the input array as [min, max]
-      const mmX = d3.extent(VizabiSharedComponents.LegacyUtils.values(_this.frame.x));
-      const mmY = d3.extent(VizabiSharedComponents.LegacyUtils.values(_this.frame.y));
+      const mmX = d3.extent(sharedComponents.LegacyUtils.values(_this.frame.x));
+      const mmY = d3.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
@@ -588,7 +583,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)) {
@@ -724,7 +719,7 @@
       
       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();
@@ -863,7 +858,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 +876,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 +886,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 +896,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),
@@ -926,11 +921,11 @@
   });
 
   // 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 +935,7 @@
         },
         name: "labels"
       },{
-        type: VizabiSharedComponents.DateTimeBackground,
+        type: sharedComponents.DateTimeBackground,
         placeholder: ".vzb-bc-date"
       }];
 
@@ -1073,7 +1068,7 @@
 
       //set filter
       this.DOM.bubbleCrown.selectAll(".vzb-crown-glow")
-        .attr("filter", `url(${location.pathname}#vzb-glow-filter-${this.id})`);
+        .attr("filter", `url(#vzb-glow-filter-${this.id})`);
 
       this._date = this.findChild({type: "DateTimeBackground"});
       this._labels = this.findChild({type: "Labels"});
@@ -1081,10 +1076,8 @@
       this.decorations = new BCDecorations(this);
       this._initInfoElements();
     
-      this.scrollableAncestor = VizabiSharedComponents.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: ""};
 
@@ -1138,14 +1131,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 +1151,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()
@@ -1262,9 +1255,6 @@
 
             svg.attr("width", 1).attr("height", 1);
           });
-            // .attr("xlink:href", function(d) {
-            //   return "flags/" + d.CountryCode + ".svg";
-            // });
       } else {
         this.DOM.defs.selectAll(".flag").remove();
       }
@@ -1314,7 +1304,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;
@@ -1356,7 +1346,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 +1407,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")];
@@ -1546,7 +1536,7 @@
         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);
@@ -1710,7 +1700,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 +1724,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 +1766,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 +1777,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 +2012,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 +2029,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 +2045,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 +2063,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) {
@@ -2166,8 +2156,8 @@
       
       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.range(minArea, maxArea, (maxArea - minArea)/(this.sScale.domain().length - 1)).concat(maxArea);
@@ -2408,7 +2398,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 +2469,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 +2479,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 +2510,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 +2522,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 +2585,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 +2603,7 @@
       config.name = "bubblechart";
 
       config.subcomponents = [{
-        type: VizabiSharedComponents.Repeater,
+        type: sharedComponents.Repeater,
         placeholder: ".vzb-repeater",
         model: marker,
         options: {
@@ -2622,48 +2612,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"
@@ -2686,10 +2676,12 @@
       <div class="vzb-errormessage"></div>
     `;
 
+      config.locale.Vizabi = config.Vizabi;
+      config.layout.Vizabi = config.Vizabi;
       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 +2743,7 @@
     }
   });
 
-  BubbleChart.versionInfo = { version: "3.14.4", build: 1679679202659, package: {"homepage":"https://github.com/vizabi/bubblechart#readme","name":"@vizabi/bubblechart","description":"Vizabi bubble chart"}, sharedComponents: VizabiSharedComponents.versionInfo};
+  BubbleChart.versionInfo = { version: "3.16.0", build: 1680712135487, package: {"homepage":"https://github.com/vizabi/bubblechart#readme","name":"@vizabi/bubblechart","description":"Vizabi bubble chart"}, sharedComponents: sharedComponents.versionInfo};
 
   return BubbleChart;