@vizabi/bubblechart 3.17.1 → 4.0.0

package/build/bubblechart.js

@@ -1,9 +1,9 @@
-// https://github.com/vizabi/bubblechart#readme v3.17.1 build 1684874653888 Copyright 2023 Gapminder Foundation and contributors
+// https://github.com/vizabi/bubblechart#readme v4.0.0 build 1687772747236 Copyright 2023 Gapminder Foundation and contributors
 (function (global, 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 (sharedComponents, d3, mobx) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@vizabi/shared-components'), require('d3'), require('mobx')) :
+  typeof define === 'function' && define.amd ? define(['exports', '@vizabi/shared-components', 'd3', 'mobx'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.BubbleChart = {}, global.VizabiSharedComponents, global.d3, global.mobx));
+})(this, (function (exports, sharedComponents, d3, mobx) { 'use strict';
 
   class PanZoom {
 
@@ -700,6 +700,381 @@
 
   }
 
+  const {ICON_QUESTION} = sharedComponents.Icons;
+
+  class BCAxisTitles extends sharedComponents.BaseComponent {
+
+    constructor(config) {
+      config.template = `
+      <g class="vzb-bc-axis-x-title"><text></text></g>
+      <g class="vzb-bc-axis-y-title"><text></text></g>
+      <g class="vzb-bc-axis-s-title"><text></text></g>
+      <g class="vzb-bc-axis-x-subtitle"><text></text></g>
+      <g class="vzb-bc-axis-y-subtitle"><text></text></g>
+      <g class="vzb-bc-axis-x-info vzb-noexport"></g>
+      <g class="vzb-bc-axis-y-info vzb-noexport"></g>
+    `;
+      super(config);
+    }
+
+    setup(){
+      this.DOM = {
+        xTitle: this.element.select(".vzb-bc-axis-x-title"),
+        yTitle: this.element.select(".vzb-bc-axis-y-title"),
+        sTitle: this.element.select(".vzb-bc-axis-s-title"),
+        xSubTitle: this.element.select(".vzb-bc-axis-x-subtitle"),
+        ySubTitle: this.element.select(".vzb-bc-axis-y-subtitle"),
+        xInfo: this.element.select(".vzb-bc-axis-x-info"),
+        yInfo: this.element.select(".vzb-bc-axis-y-info")
+      };
+
+      this.axisTitleComplimentStrings = {Y: "", X: "", S: "", C: ""};
+
+      this._initInfoElements();
+    }
+
+    draw(){
+      this.localise = this.services.locale.auto();
+
+      this.addReaction(this.updateUIStrings);
+      this.addReaction(this.updateTreemenu);
+      this.addReaction(this.updateSize);
+      this.addReaction(this.updateInfoElements);
+    }
+
+    get MDL(){
+      return {
+        y: this.model.encoding[this.state.alias?.y || "y"],
+        x: this.model.encoding[this.state.alias?.x || "x"],
+        size: this.model.encoding.size,
+        color: this.model.encoding.color
+      };
+    }
+
+    updateTreemenu(){
+      const treemenu = this.root.findChild({type: "TreeMenu"});
+
+      this.DOM.yTitle
+        .classed("vzb-disabled", treemenu.state.ownReadiness !== sharedComponents.Utils.STATUS.READY)
+        .on("click", () => {
+          treemenu
+            .encoding(this.parent._alias("y"))
+            .alignX(this.services.locale.isRTL() ? "right" : "left")
+            .alignY("top")
+            .updateView()
+            .toggle();
+        });
+
+      this.DOM.xTitle
+        .classed("vzb-disabled", treemenu.state.ownReadiness !== sharedComponents.Utils.STATUS.READY)
+        .on("click", () => {
+          treemenu
+            .encoding(this.parent._alias("x"))
+            .alignX(this.services.locale.isRTL() ? "right" : "left")
+            .alignY("bottom")
+            .updateView()
+            .toggle();
+        });    
+    }
+
+    updateUIStrings() {
+      const {
+        y, x, size, color
+      } = this.MDL;
+
+      this.strings = {
+        title: {
+          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: 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: sharedComponents.Utils.getConceptNameMinusShortName(y, this.localise),
+          X: sharedComponents.Utils.getConceptNameMinusShortName(x, this.localise)
+        },
+        unit: {
+          Y: sharedComponents.Utils.getConceptUnit(y),
+          X: sharedComponents.Utils.getConceptUnit(x),
+          S: sharedComponents.Utils.getConceptUnit(size),
+          C: sharedComponents.Utils.getConceptUnit(color)
+        }
+      };
+
+      Promise.all([
+        sharedComponents.Utils.getConceptNameCompliment(y),
+        sharedComponents.Utils.getConceptNameCompliment(x),
+        sharedComponents.Utils.getConceptNameCompliment(size),
+        sharedComponents.Utils.getConceptNameCompliment(color)
+      ]).then(mobx.action(response => {        
+        [ 
+          this.axisTitleComplimentStrings.Y,
+          this.axisTitleComplimentStrings.X,
+          this.axisTitleComplimentStrings.S,
+          this.axisTitleComplimentStrings.C
+        ] = response;
+      }));
+    }
+
+
+    _initInfoElements() {
+      const _this = this;
+      const dataNotesDialog = () => this.root.findChild({type: "DataNotes"});
+      const timeSlider = () => this.root.findChild({type: "TimeSlider"});
+
+      sharedComponents.LegacyUtils.setIcon(this.DOM.yInfo, ICON_QUESTION)
+        .on("click", () => {
+          dataNotesDialog().pin();
+        })
+        .on("mouseover", function() {
+          if (timeSlider().ui.dragging) return;
+          const rect = this.getBBox();
+          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()
+            .setEncoding(_this.MDL.y)
+            .show()
+            .setPos(coord.x + chartRect.left - toolRect.left, coord.y);
+        })
+        .on("mouseout", () => {
+          if (timeSlider().ui.dragging) return;
+          dataNotesDialog().hide();
+        });
+
+      sharedComponents.LegacyUtils.setIcon(this.DOM.xInfo, ICON_QUESTION)
+        .on("click", () => {
+          dataNotesDialog().pin();
+        })
+        .on("mouseover", function() {
+          if (timeSlider().ui.dragging) return;
+          const rect = this.getBBox();
+          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()
+            .setEncoding(_this.MDL.x)
+            .show()
+            .setPos(coord.x + chartRect.left - toolRect.left, coord.y);
+        })
+        .on("mouseout", () => {
+          if (timeSlider().ui.dragging) return;
+          dataNotesDialog().hide();
+        });
+    }
+
+    updateInfoElements() {
+      this.services.layout.size;
+      this.axisTitleComplimentStrings.X;
+      this.axisTitleComplimentStrings.Y;
+
+      const {xInfo, yInfo, xTitle, yTitle} = this.DOM;
+      const {x, y} = this.MDL;
+      const isRTL = this.services.locale.isRTL();
+      const infoElHeight = this.parent.profileConstants.infoElHeight;
+      const layoutProfile = this.services.layout.profile;
+
+      if (yInfo.select("svg").node()) {
+        const titleBBox = yTitle.node().getBBox();
+        const t = sharedComponents.LegacyUtils.transform(yTitle.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;
+
+        yInfo
+          .classed("vzb-hidden", !conceptPropsY.description && !conceptPropsY.sourceLink || this.services.layout.projector)
+          .attr("transform", layoutProfile !== "SMALL" ?
+            `translate(${ t.translateX - infoElHeight * 0.8 }, ${ vTranslate }) rotate(-90)` :
+            `translate(${ hTranslate },${ t.translateY - infoElHeight * 0.8 })`)
+          .select("svg")
+          .attr("width", infoElHeight + "px")
+          .attr("height", infoElHeight + "px");
+      }
+
+      if (xInfo.select("svg").node()) {
+        const titleBBox = xTitle.node().getBBox();
+        const t = sharedComponents.LegacyUtils.transform(xTitle.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;
+
+        xInfo
+          .classed("vzb-hidden", !conceptPropsX.description && !conceptPropsX.sourceLink || this.services.layout.projector)
+          .attr("transform", `translate(${ hTranslate }, ${ t.translateY - infoElHeight * 0.8 })`)
+          .select("svg")
+          .attr("width", infoElHeight + "px")
+          .attr("height", infoElHeight + "px");
+      }
+    }
+
+
+    _updateSTitle(width = this.parent.width, height = this.parent.height) {
+      const { sTitle } = this.DOM;
+      const { size, color } = this.MDL;
+      const compl = this.axisTitleComplimentStrings;
+      
+      // vertical text about size and color
+      const invisible = this.parent.profileConstants.hideSTitle
+        && this.root.ui.dialogs.dialogs.sidebar.includes("colors")
+        && this.root.ui.dialogs.dialogs.sidebar.includes("size");
+
+      sTitle.classed("vzb-invisible", invisible);
+      if (invisible) return;
+
+      const sTitleContent = !size.data.constant 
+        ? this.localise("buttons/size") + ": " + this.strings.title.S + (compl.S ? " · " + compl.S : "")
+        : "";
+      const cTitleContent = !color.data.constant 
+        ? this.localise("buttons/colors") + ": " + this.strings.title.C + (compl.C ? " · " + compl.C : "") 
+        : "";
+
+      const sTitleText = sTitle
+        .attr("text-anchor", "end")
+        .attr("transform", "translate(" + width + "," + 20 + ") rotate(-90)")
+        .select("text")
+        .style("font-size", null) // reset font size to remove jumpy measurement
+        .text(sTitleContent + (sTitleContent && cTitleContent ? ", " : "") + cTitleContent);
+
+      // reduce font size if the caption doesn't fit
+      const sTitleWidth = sTitleText.node().getBBox().width;
+      const padding = 30;
+      const font = parseInt(sTitleText.style("font-size")) * (height - padding) / sTitleWidth;
+      sTitleText.style("font-size", sTitleWidth > (height - padding) ? font + "px" : null);
+    }
+
+
+    _updateYTitle(width = this.parent.width, height = this.parent.height) {
+      const { yTitle, ySubTitle } = this.DOM;
+
+      const { 
+        margin, 
+        infoElHeight, 
+        yAxisTitleBottomMargin, 
+      } = this.parent.profileConstants;
+
+      const layoutProfile = this.services.layout.profile;
+
+      const compl = this.axisTitleComplimentStrings;
+      const isRTL = this.services.locale.isRTL();
+
+      if (layoutProfile !== "SMALL") {
+        ySubTitle
+          .attr("transform", "translate(" + 0 + "," + 0 + ") rotate(-90)")
+          .select("text")
+          .attr("dy", infoElHeight * 0.6)
+          .style("font-size", (infoElHeight * 0.8) + "px")
+          .text(this.strings.subtitle.Y);
+        
+        const yTitleText = yTitle.select("text")
+          .style("font-size", infoElHeight + "px")
+          .text(this.strings.title_short.Y + (compl.Y ? " · " + compl.Y : ""));
+
+        yTitleText.append("tspan")
+          .classed("vzb-noexport", true)
+          .style("font-size", (infoElHeight * 0.7) + "px")
+          .attr("dx", ( (isRTL ? -1 : 1) * infoElHeight * 0.25) + "px")
+          .text("▼");
+
+        const doesntFit = yTitle.node().getBBox().width > height; 
+        
+        yTitle
+          .attr("text-anchor", doesntFit ? "start" : "middle")
+          .attr("transform", "translate(" + (-margin.left - yAxisTitleBottomMargin)  + "," + (doesntFit ? (isRTL ? 0 : height) : height / 2 ) + ") rotate(-90)");
+
+      } else {
+        ySubTitle.select("text").text("");
+
+        const yTitleText = yTitle
+          .select("text")
+          .text(this.strings.title.Y + (compl.Y ? " · " + compl.Y : ""));
+          
+        const doesntFit = yTitleText.node().getBBox().width > width; 
+        if (doesntFit) yTitleText.text(this.strings.title_short.Y + (compl.Y ? " · " + compl.Y : ""));
+        
+        yTitle
+          .attr("text-anchor", "start")
+          .attr("transform", "translate(" + (isRTL ? width : 10 - margin.left) + ", -" + yAxisTitleBottomMargin + ")");
+      }
+    }
+
+
+    _updateXTitle(width = this.parent.width, height = this.parent.height) {
+      const { xTitle, xSubTitle } = this.DOM;
+
+      const { 
+        margin, 
+        infoElHeight, 
+        xAxisTitleBottomMargin, 
+      } = this.parent.profileConstants;
+
+      const layoutProfile = this.services.layout.profile;
+
+      const compl = this.axisTitleComplimentStrings;
+      const isRTL = this.services.locale.isRTL();
+
+      if (layoutProfile !== "SMALL") {
+        xSubTitle
+          .attr("transform", "translate(" + width + "," + height + ")")
+          .select("text")
+          .attr("dy", -infoElHeight * 0.3)
+          .style("font-size", (infoElHeight * 0.8) + "px")
+          .text(this.strings.subtitle.X);
+        
+        const xTitleText = xTitle.select("text")
+          .style("font-size", infoElHeight + "px")
+          .text(this.strings.title_short.X + (compl.X ? " · " + compl.X : ""));
+
+        xTitleText 
+          .append("tspan")
+          .classed("vzb-noexport", true)
+          .style("font-size", (infoElHeight * 0.7) + "px")
+          .attr("dx", ( (isRTL ? -1 : 1) * infoElHeight * 0.25) + "px")
+          .text("▼");
+
+      } else {
+        xSubTitle.select("text").text("");
+
+        xTitle.select("text")        
+          .text(this.strings.title.X + (compl.X ? " · " + compl.X : ""));
+      }
+
+      const doesntFit = xTitle.node().getBBox().width > width - 100;
+      xTitle
+        .attr("text-anchor", doesntFit ? "start" : "middle")
+        .attr("transform", "translate(" + (doesntFit ? (isRTL ? width : 0) : width / 2) + "," + (height + margin.bottom - xAxisTitleBottomMargin) + ")");
+      
+      if (doesntFit && layoutProfile === "SMALL") xTitle.select("text").text(this.strings.title_short.X) + (compl.X ? " · " + compl.X : ""); 
+    }
+
+
+    updateSize() {
+      this.services.layout.size;
+   
+      const { 
+        margin, 
+        leftMarginRatio 
+      } = this.parent.profileConstants;
+
+      const height = (this.parent.elementHeight - margin.top - margin.bottom) || 0;
+      const width = (this.parent.elementWidth - margin.left * leftMarginRatio - margin.right) || 0;
+
+      this._updateSTitle(width, height);
+      this._updateYTitle(width, height);
+      this._updateXTitle(width, height);
+      
+    }
+  }
+
+  const decorated = mobx.decorate(BCAxisTitles, {
+    "MDL": mobx.computed,
+    "axisTitleComplimentStrings": mobx.observable
+  });
+
   class BCDecorations{
     constructor(){
     }
@@ -868,7 +1243,6 @@
     }
   }
 
-  const {ICON_QUESTION} = sharedComponents.Icons;
   const COLOR_WHITEISH = "rgb(253, 253, 253)";
   const COLOR_BLACKISH = "rgb(51, 51, 51)";
   const THICK_LINE_THRESHOLD_FOR_DARKER_COLOR = 3;
@@ -955,6 +1329,9 @@
       },{
         type: sharedComponents.DateTimeBackground,
         placeholder: ".vzb-bc-date"
+      },{
+        type: decorated,
+        placeholder: ".vzb-bc-axis-titles"
       }];
 
       config.template = `
@@ -970,11 +1347,8 @@
           </svg>
           <svg class="vzb-bubblechart-svg-main">
               <g class="vzb-bc-graph">
-                  <g class="vzb-bc-axis-x-title"><text></text></g>
-                  <g class="vzb-bc-axis-x-info vzb-noexport"></g>
+                  <g class="vzb-bc-axis-titles"></g>
 
-                  <g class="vzb-bc-axis-y-title"><text></text></g>
-                  <g class="vzb-bc-axis-y-info vzb-noexport"></g>
                   <svg class="vzb-bc-bubbles-crop">
                       <g class="vzb-zoom-selection"></g>
                       <rect class="vzb-bc-eventarea"></rect>
@@ -983,11 +1357,6 @@
                       <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>
-                  <g class="vzb-bc-axis-x-subtitle"><text></text></g>
-                  <g class="vzb-bc-axis-s-title"><text></text></g>
-                  <g class="vzb-bc-axis-c-title"><text></text></g>
-
                   <rect class="vzb-bc-zoom-rect"></rect>
               </g>
               <g class="vzb-datawarning-button vzb-noexport"></g>
@@ -1046,14 +1415,6 @@
       this.DOM.chartSvg.select(".vzb-bc-graph").call(graph => 
         Object.assign(this.DOM, {
           graph: graph,
-          ySubTitleEl: graph.select(".vzb-bc-axis-y-subtitle"),
-          xSubTitleEl: graph.select(".vzb-bc-axis-x-subtitle"),
-          yTitleEl: graph.select(".vzb-bc-axis-y-title"),
-          xTitleEl: graph.select(".vzb-bc-axis-x-title"),
-          sTitleEl: graph.select(".vzb-bc-axis-s-title"),
-          cTitleEl: graph.select(".vzb-bc-axis-c-title"),
-          yInfoEl: graph.select(".vzb-bc-axis-y-info"),
-          xInfoEl: graph.select(".vzb-bc-axis-x-info"),
           trailsContainer: graph.select(".vzb-bc-trails"),
           bubbleContainer: graph.select(".vzb-bc-bubbles"),
           bubbleContainerCrop: graph.select(".vzb-bc-bubbles-crop"),
@@ -1092,12 +1453,10 @@
       this._labels = this.findChild({type: "Labels"});
       this._panZoom = new PanZoom(this);    
       this.decorations = new BCDecorations(this);
-      this._initInfoElements();
     
       this.xAxis = sharedComponents.axisSmart("bottom");
       this.yAxis = sharedComponents.axisSmart("left");
 
-      this.axisTitleComplimentStrings = {Y: "", X: "", S: "", C: ""};
 
       this.isCanvasPreviouslyExpanded = false;
       this.draggingNow = null;
@@ -1144,51 +1503,6 @@
 
     }
 
-    _initInfoElements() {
-      const _this = this;
-      const dataNotesDialog = () => this.root.findChild({type: "DataNotes"});
-      const timeSlider = () => this.root.findChild({type: "TimeSlider"});
-
-      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 = 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()
-            .setEncoding(_this.MDL.y)
-            .show()
-            .setPos(coord.x + chartRect.left - toolRect.left, coord.y);
-        })
-        .on("mouseout", () => {
-          if (timeSlider().ui.dragging) return;
-          dataNotesDialog().hide();
-        });
-
-      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 = 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()
-            .setEncoding(_this.MDL.x)
-            .show()
-            .setPos(coord.x + chartRect.left - toolRect.left, coord.y);
-        })
-        .on("mouseout", () => {
-          if (timeSlider().ui.dragging) return;
-          dataNotesDialog().hide();
-        });
-    }
 
     get MDL(){
       return {
@@ -1218,10 +1532,7 @@
 
       if (this._updateLayoutProfile()) return; //return if exists with error
       this.addReaction(this._updateScales);
-      this.addReaction(this.updateUIStrings);
-      this.addReaction(this.updateTreemenu);
       this.addReaction(this._updateSize);
-      this.addReaction(this.updateInfoElements);
       //    this.addReaction(this._resetZoomMinMaxXReaction, this._resetZoomMinMaxX);
       //    this.addReaction(this._resetZoomMinMaxYReaction, this._resetZoomMinMaxY);
       this.addReaction(this._updateOpacity);
@@ -1755,76 +2066,7 @@
       return this.MDL.color.scale.d3Scale;
     }
     
-    updateUIStrings() {
-      const {
-        y, x, size, color
-      } = this.MDL;
-
-      this.strings = {
-        title: {
-          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: 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: sharedComponents.Utils.getConceptNameMinusShortName(y, this.localise),
-          X: sharedComponents.Utils.getConceptNameMinusShortName(x, this.localise)
-        },
-        unit: {
-          Y: sharedComponents.Utils.getConceptUnit(y),
-          X: sharedComponents.Utils.getConceptUnit(x),
-          S: sharedComponents.Utils.getConceptUnit(size),
-          C: sharedComponents.Utils.getConceptUnit(color)
-        }
-      };
-
-      Promise.all([
-        sharedComponents.Utils.getConceptNameCompliment(y),
-        sharedComponents.Utils.getConceptNameCompliment(x),
-        sharedComponents.Utils.getConceptNameCompliment(size),
-        sharedComponents.Utils.getConceptNameCompliment(color)
-      ]).then(mobx.action(response => {        
-        [ 
-          this.axisTitleComplimentStrings.Y,
-          this.axisTitleComplimentStrings.X,
-          this.axisTitleComplimentStrings.S,
-          this.axisTitleComplimentStrings.C
-        ] = response;
-      }));
-    }
-
-    updateTreemenu(){
-      const treemenu = this.root.findChild({type: "TreeMenu"});
-
-      this.DOM.yTitleEl
-        .classed("vzb-disabled", treemenu.state.ownReadiness !== sharedComponents.Utils.STATUS.READY)
-        .on("click", () => {
-          treemenu
-            .encoding(this._alias("y"))
-            .alignX(this.services.locale.isRTL() ? "right" : "left")
-            .alignY("top")
-            .updateView()
-            .toggle();
-        });
 
-      this.DOM.xTitleEl
-        .classed("vzb-disabled", treemenu.state.ownReadiness !== sharedComponents.Utils.STATUS.READY)
-        .on("click", () => {
-          treemenu
-            .encoding(this._alias("x"))
-            .alignX(this.services.locale.isRTL() ? "right" : "left")
-            .alignY("bottom")
-            .updateView()
-            .toggle();
-        });    
-    }
 
     _updateSize() {
       this.services.layout.size;
@@ -1845,11 +2087,6 @@
         yAxisEl,
         projectionX,
         projectionY,
-        sTitleEl,
-        xTitleEl,
-        yTitleEl,
-        xSubTitleEl,
-        ySubTitleEl,
         xAxisGroupsEl,
       } = this.DOM;
 
@@ -1881,17 +2118,6 @@
         .attr("width", width)
         .attr("height", Math.max(0, height));
 
-      //update scales to the new range
-      // // if (this.model.marker.y.scaleType !== "ordinal") {
-      // //   this.yScale.range(this._rangeBump([height, 0]));
-      // // } else {
-      // //   this.yScale.rangePoints([height, 0], _this.profileConstants.padding).range();
-      // // }
-      // // if (this.model.marker.x.scaleType !== "ordinal") {
-      // //   this.xScale.range(this._rangeBump([0, width]));
-      // // } else {
-      // //   this.xScale.rangePoints([0, width], _this.profileConstants.padding).range();
-      // // }
       this.yScale.range(this._rangeBump([height, 0]));
       this.xScale.range(this._rangeBump([0, width]));
 
@@ -1954,61 +2180,6 @@
       projectionX.attr("y1", _this.yScale.range()[0] + rangeBump);
       projectionY.attr("x2", _this.xScale.range()[0] - rangeBump);
 
-
-      // reduce font size if the caption doesn't fit
-      this._updateSTitle();
-      sTitleEl
-        .attr("text-anchor", "end")
-        .attr("transform", "translate(" + width + "," + 20 + ") rotate(-90)");
-
-      const compl = this.axisTitleComplimentStrings;
-      if (layoutProfile !== "SMALL") {
-        ySubTitleEl.select("text").attr("dy", infoElHeight * 0.6).text(this.strings.subtitle.Y);
-        xSubTitleEl.select("text").attr("dy", -infoElHeight * 0.3).text(this.strings.subtitle.X);
-        
-        yTitleEl.select("text").text(this.strings.title_short.Y + (compl.Y ? " · " + compl.Y : "") + " ")
-          .append("tspan")
-          .classed("vzb-noexport", true)
-          .style("font-size", (infoElHeight * 0.7) + "px")
-          .text("▼");
-        xTitleEl.select("text").text(this.strings.title_short.X + (compl.X ? " · " + compl.X : "") + " ")
-          .append("tspan")
-          .classed("vzb-noexport", true)
-          .style("font-size", (infoElHeight * 0.7) + "px")
-          .text("▼");
-      } else {
-        ySubTitleEl.select("text").text("");
-        xSubTitleEl.select("text").text("");
-
-        const yTitleText = yTitleEl.select("text").text(this.strings.title.Y + (compl.Y ? " · " + compl.Y : ""));
-        if (yTitleText.node().getBBox().width > width) yTitleText.text(this.strings.title_short.Y + (compl.Y ? " · " + compl.Y : ""));
-      
-        const xTitleText = xTitleEl.select("text").text(this.strings.title.X + (compl.X ? " · " + compl.X : ""));
-        if (xTitleText.node().getBBox().width > width - 100) xTitleText.text(this.strings.title_short.X) + (compl.X ? " · " + compl.X : "");      
-      }
-
-      const isRTL = this.services.locale.isRTL();
-      ySubTitleEl
-        .style("font-size", (infoElHeight * 0.8) + "px")
-        .attr("transform", "translate(" + 0 + "," + 0 + ") rotate(-90)");
-      xSubTitleEl
-        .style("font-size", (infoElHeight * 0.8) + "px")
-        .attr("transform", "translate(" + width + "," + height + ")");
-    
-      yTitleEl
-        .style("font-size", infoElHeight + "px")
-        .attr("transform", layoutProfile !== "SMALL" ?
-          "translate(" + (-margin.left - this.profileConstants.yAxisTitleBottomMargin)  + "," + (height * 0.5) + ") rotate(-90)"
-          : 
-          "translate(" + (isRTL ? width : 10 - this.profileConstants.margin.left) + ", -" + this.profileConstants.yAxisTitleBottomMargin + ")");
-
-      xTitleEl
-        .style("font-size", infoElHeight + "px")
-        .attr("transform", layoutProfile !== "SMALL" ?
-          "translate(" + (width * 0.5) + "," + (height + margin.bottom - xAxisTitleBottomMargin) + ")"
-          :
-          "translate(" + (isRTL ? width : 0) + "," + (height + margin.bottom - xAxisTitleBottomMargin) + ")");
-      
       xAxisGroupsEl
         .style("font-size", infoElHeight * 0.8 + "px");
 
@@ -2020,65 +2191,11 @@
         right: margin.right,
         bottom: xAxisTitleBottomMargin,
         wLimit: (layoutProfile !== "SMALL" ? 0.5 : 1) *
-          (this.elementWidth - xTitleEl.node().getBBox().width - infoElHeight * 3)
+          (this.elementWidth - this.DOM.graph.select(".vzb-bc-axis-x-title").node().getBBox().width - infoElHeight * 3)
       });
 
-      //this.services.layout.setHGrid([this.elementWidth - marginRightAdjusted]);
-      //this.ui.margin.set("left", margin.left * this.profileConstants.leftMarginRatio, false, false);
-
-      // (function(xMin, xMax, yMin, yMax) {
-      //   if ((xMin && xMax && yMin && yMax) === null) return;
-      //   _this._panZoom.zoomer.dontFeedToState = true;
-      //   _this._panZoom.rerun(); // includes redraw data points and trail resize
-      //   _this._panZoom.zoomToMaxMin(xMin, xMax, yMin, yMax, 0, true);
-      // })(_this._zoomedXYMinMax.x.zoomedMin,
-      //   _this._zoomedXYMinMax.x.zoomedMax,
-      //   _this._zoomedXYMinMax.y.zoomedMin,
-      //   _this._zoomedXYMinMax.y.zoomedMax);
     }
 
-    updateInfoElements() {
-      this.services.layout.size;
-      this.axisTitleComplimentStrings.X;
-      this.axisTitleComplimentStrings.Y;
-
-      const {xInfoEl, yInfoEl, xTitleEl, yTitleEl} = this.DOM;
-      const {x, y} = this.MDL;
-      const isRTL = this.services.locale.isRTL();
-      const infoElHeight = this.profileConstants.infoElHeight;
-      const layoutProfile = this.services.layout.profile;
-
-      if (yInfoEl.select("svg").node()) {
-        const titleBBox = yTitleEl.node().getBBox();
-        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;
-
-        yInfoEl
-          .classed("vzb-hidden", !conceptPropsY.description && !conceptPropsY.sourceLink || this.services.layout.projector)
-          .attr("transform", layoutProfile !== "SMALL" ?
-            `translate(${ t.translateX - infoElHeight * 0.8 }, ${ vTranslate }) rotate(-90)` :
-            `translate(${ hTranslate },${ t.translateY - infoElHeight * 0.8 })`)
-          .select("svg")
-          .attr("width", infoElHeight + "px")
-          .attr("height", infoElHeight + "px");
-      }
-
-      if (xInfoEl.select("svg").node()) {
-        const titleBBox = xTitleEl.node().getBBox();
-        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;
-
-        xInfoEl
-          .classed("vzb-hidden", !conceptPropsX.description && !conceptPropsX.sourceLink || this.services.layout.projector)
-          .attr("transform", `translate(${ hTranslate }, ${ t.translateY - infoElHeight * 0.8 })`)
-          .select("svg")
-          .attr("width", infoElHeight + "px")
-          .attr("height", infoElHeight + "px");
-      }
-    }
 
     _rangeBump(arg, undo) {
       const bump = this.profileConstants.maxRadiusPx;
@@ -2104,40 +2221,6 @@
       sharedComponents.LegacyUtils.warn("rangeBump error: input is not an array or empty");
     }
 
-    _updateSTitle(titleS, titleC) {
-      const { sTitleEl } = this.DOM;
-      const {
-        size,
-        color
-      } = this.MDL;
-      const compl = this.axisTitleComplimentStrings;
-      // vertical text about size and color
-      if (this.profileConstants.hideSTitle
-        && this.root.ui.dialogs.dialogs.sidebar.indexOf("colors") > -1
-        && this.root.ui.dialogs.dialogs.sidebar.indexOf("size") > -1) {
-        sTitleEl.classed("vzb-invisible", true);
-        return;
-      }
-      if (sTitleEl.classed("vzb-invisible")) {
-        sTitleEl.classed("vzb-invisible", false);
-      }
-      const sTitleContentON = !size.data.constant;
-      const cTitleContentON = !color.data.constant;
-      const sTitleText = sTitleEl.select("text")
-      // reset font size to remove jumpy measurement
-        .style("font-size", null)
-        .text(
-          (sTitleContentON ? this.localise("buttons/size") + ": " + (titleS ? titleS : this.strings.title.S) : "") +
-          (compl.S ? " · " + compl.S : "") +
-          (sTitleContentON && cTitleContentON ? ", " : "") +
-          (cTitleContentON ? this.localise("buttons/colors") + ": " + (titleC ? titleC : this.strings.title.C) : "") +
-          (compl.C ? " · " + compl.C : "")
-        );
-      const sTitleWidth = sTitleText.node().getBBox().width;
-      const remainigHeight = this.height - 30;
-      const font = parseInt(sTitleText.style("font-size")) * remainigHeight / sTitleWidth;
-      sTitleText.style("font-size", sTitleWidth > remainigHeight ? font + "px" : null);
-    }
 
     processFrameData() {
       return this.__dataProcessed = this.model.dataArray;
@@ -2372,8 +2455,6 @@
         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)]);
-        ////_this._updateSTitle(titles[0], titles[1]);
         if (x + s < 0 || x - s > this.width || y + s < 0 || y - s > this.height) {
           entityOutOfView = true;
         }
@@ -2421,7 +2502,6 @@
         this._axisProjections();
         ////this._trails.run(["opacityHandler"]);
         //hide tooltip
-        //this._updateSTitle();
         this._setTooltip();
         this._setBubbleCrown();
         this._labels.highlight(null, false);
@@ -2624,7 +2704,6 @@
   //export default BubbleChart;
   const VizabiBubbleChart = mobx.decorate(_VizabiBubbleChart, {
     "MDL": mobx.computed,
-    "axisTitleComplimentStrings": mobx.observable,
     "cScale": mobx.computed
   });
 
@@ -2786,9 +2865,11 @@
     }
   });
 
-  BubbleChart.versionInfo = { version: "3.17.1", build: 1684874653888, package: {"homepage":"https://github.com/vizabi/bubblechart#readme","name":"@vizabi/bubblechart","description":"Vizabi bubble chart"}, sharedComponents: sharedComponents.versionInfo};
+  BubbleChart.versionInfo = { version: "4.0.0", build: 1687772747236, package: {"homepage":"https://github.com/vizabi/bubblechart#readme","name":"@vizabi/bubblechart","description":"Vizabi bubble chart"}, sharedComponents: sharedComponents.versionInfo};
+
+  exports.Base = BubbleChart;
 
-  return BubbleChart;
+  Object.defineProperty(exports, '__esModule', { value: true });
 
 }));
 //# sourceMappingURL=bubblechart.js.map