@vizabi/bubblechart 5.2.3 → 5.4.0

package/build/bubblechart.js

@@ -1,4 +1,4 @@
-// https://github.com/vizabi/bubblechart#readme v5.2.3 build 1748252204619 Copyright 2025 Gapminder Foundation and contributors
+// https://github.com/vizabi/bubblechart#readme v5.4.0 build 1763740005307 Copyright 2025 Gapminder Foundation and contributors
 (function (global, factory) {
   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) :
@@ -44465,6 +44465,7 @@ void main(void) {
       this.DOM.canvasWrap.select("canvas")
         .call(this._panZoom.dragRectangle)
         .call(this._panZoom.zoomer)
+        .on("contextmenu", (evt) => evt.preventDefault())
         .on("dblclick.zoom", null)
         .on("mouseup", () => {
           _this.draggingNow = false;
@@ -45730,34 +45731,35 @@ void main(void) {
             //}, 0);
           }
         },
-        onClick: ({ object:d, index }) => {
-          //console.log("onclick", d, this.activeObject);  
+        onClick: ({ object:d, index }, event) => {
           if (!d) return;
-          //zero opacity for non-selected markers
+          //invisible bubbles should not react to clicks
           if (this._getBubbleOpacity(d) == 0) return;
-
-          let dataKey = {[KEY]: d[KEY]};
-          console.log("click pretoggle", d, dataKey);
-          if (d[TRAIL_KEY]) {
-            const nextIndex = index + 1;
-            if (this.__data[nextIndex]?.[TRAIL_KEY] == d[TRAIL_KEY]) {
-              return;
+          //no reaction on trail bubbles either
+          if (d[TRAIL_KEY]) return;
+          
+          mobx.runInAction(() => {
+            const dataKey = {[KEY] : d[KEY]};
+
+            if (event.rightButton) {
+              dataKey.name = this.__labelWithoutFrame(d);
+              const margin = this.profileConstants.margin;
+              const toolNode = this.element.node();
+              const x = (this.width - event.offsetCenter.x) < 250 ? this.width - 250 : event.offsetCenter.x - 5;
+
+              //set context menu
+              const contextMenuComponent = this.root.findChild({type: "MarkerContextmenu"});
+              contextMenuComponent.show(dataKey, {
+                x: toolNode.offsetLeft + x + margin.left * this.profileConstants.leftMarginRatio,
+                y: toolNode.offsetTop + event.offsetCenter.y + margin.top - 5
+              });
             } else {
-              dataKey = {[KEY]: d[TRAIL_KEY]};
+              this.MDL.selected.data.filter.toggle(dataKey);
             }
-          }
-          //const invalidate = d?.[KEY] !== this.activeObject?.[KEY]
-          mobx.runInAction(() => {
-            this.MDL.selected.data.filter.toggle(dataKey);
-            console.log("click toggle", dataKey);
-          });      
-          //this.activeObject = d;
-          //if (invalidate) {
-            //setTimeout(() => {
-            //console.log("invalidate", d, this.activeObject);  
-          this.deckBubble.setProps({layers: this.getBubbleLayers(undefined, false, 0, false)});
-            //}, 0);
-          //}
+          });
+
+          // not sure why this is needed? -- angie
+          //this.deckBubble.setProps({layers: this.getBubbleLayers(undefined, false, 0, false)})
         },
       }
     }
@@ -46133,15 +46135,14 @@ void main(void) {
 
     constructor(config){
 
-      const markerName = config.options?.markerNames?.bubble || "bubble";
-      const fullMarker = config.model.markers[markerName];
-      config.Vizabi.utils.applyDefaults(fullMarker.config, BubbleChart.DEFAULT_CORE(markerName));   
+      const fullMarker = config.model.markers?.bubble;
+      const fullMarkerLegend = config.model.markers?.legend;
+      config.Vizabi.utils.applyDefaults(fullMarker?.config, BubbleChart.DEFAULT_MODEL.bubble);   
+      config.Vizabi.utils.applyDefaults(fullMarkerLegend?.config || {}, BubbleChart.DEFAULT_MODEL.legend);  
 
       const frameType = config.Vizabi.stores.encodings.modelTypes.frame;
       const { marker, splashMarker } = frameType.splashMarker(fullMarker);
       
-      config.model.markers[markerName] = marker;
-
       config.name = "bubblechart";
 
       config.subcomponents = [{
@@ -46168,6 +46169,11 @@ void main(void) {
         placeholder: ".vzb-treemenu",
         model: marker,
         name: "tree-menu"
+      },{
+        type: sharedComponents.MarkerContextmenu,
+        placeholder: ".vzb-marker-contextmenu",
+        model: marker,
+        name: "marker-contextmenu"
       },{
         type: sharedComponents.DataWarning,
         placeholder: ".vzb-datawarning",
@@ -46188,12 +46194,6 @@ void main(void) {
         placeholder: ".vzb-buttonlist",
         model: marker,
         name: "buttons"
-      },{
-        type: sharedComponents.SpaceConfig,
-        placeholder: ".vzb-spaceconfig",
-        options: {button: ".vzb-spaceconfig-button"},
-        model: marker,
-        name: "space-config"
       },{
         type: sharedComponents.ErrorMessage,
         placeholder: ".vzb-errormessage",
@@ -46212,8 +46212,8 @@ void main(void) {
         <div class="vzb-buttonlist"></div>
       </div>
       <div class="vzb-treemenu"></div>
+      <div class="vzb-marker-contextmenu"></div>
       <div class="vzb-datawarning"></div>
-      <div class="vzb-spaceconfig"></div>
       <div class="vzb-datanotes"></div>
       <div class="vzb-errormessage"></div>
     `;
@@ -46233,9 +46233,12 @@ void main(void) {
   }
 
   BubbleChart.DEFAULT_UI = {
+    "locale": { "id": "en", "shortNumberFormat": true },
+    "layout": { "projector": false },
+
     //ui
     "buttons": {
-      "buttons": ["colors", "markercontrols", "trails", "moreoptions", "presentation", "sidebarcollapse", "fullscreen"]
+      "buttons": ["markercontrols", "colors", "trails", "moreoptions", "presentation", "sidebarcollapse", "fullscreen"]
     },
     "dialogs": {
       "dialogs": {
@@ -46243,116 +46246,191 @@ void main(void) {
         "sidebar": ["colors", "markercontrols", "size", "zoom"],
         "moreoptions": ["opacity", "speed", "axes", "size", "colors", "label", "zoom", "technical", "repeat", "presentation", "about"]
       },
-      "markercontrols": {}
+      "markercontrols": {
+        "disableSlice": true,
+        "disableAddRemoveGroups": true,
+        "primaryDim": null,
+        "drilldown": null,
+        "shortcutForSwitch": false,
+        "shortcutForSwitch_allow": null
+      }
     },
-    chart: {
-      show_ticks: true,
-      showForecast: false,
-      showForecastOverlay: true,
-      pauseBeforeForecast: true,
-      opacityHighlight: 1.0,
-      opacitySelect: 1.0,
-      opacityHighlightDim: 0.1,
-      opacitySelectDim: 0.3,
-      opacityRegular: 0.8,
-      timeInBackground: true,
-      timeInTrails: true,
-      lockNonSelected: 0,
-      panWithArrow: false,
-      adaptMinMaxZoom: false,
-      cursorMode: "arrow",
-      zoomOnScrolling: true,
-      decorations: {
-        enabled: true,
-        xAxisGroups: null //left to be set by external page
+    "marker-contextmenu": {
+      "primaryDim": null,
+      "drilldown": null,
+    },
+    "chart": {
+      "show_ticks": true,
+      "showForecast": false,
+      "showForecastOverlay": true,
+      "pauseBeforeForecast": true,
+      "endBeforeForecast": null, //value like "2022", auto-resolved to current time minus one frame step
+      "opacityHighlight": 1.0,
+      "opacitySelect": 1.0,
+      "opacityHighlightDim": 0.1,
+      "opacitySelectDim": 0.3,
+      "opacityRegular": 0.8,
+      "timeInBackground": true,
+      "timeInTrails": true,
+      "lockNonSelected": 0,
+      "panWithArrow": true,
+      "adaptMinMaxZoom": false,
+      "cursorMode": "arrow",
+      "zoomOnScrolling": true,
+      "superhighlightOnMinimapHover": true,
+      "whenHovering": {
+        "showProjectionLineX": true,
+        "showProjectionLineY": true,
+        "higlightValueX": true,
+        "higlightValueY": true
       },
-      superhighlightOnMinimapHover: true,
-      whenHovering: {
-        showProjectionLineX: true,
-        showProjectionLineY: true,
-        higlightValueX: true,
-        higlightValueY: true
+      "labels": {
+        "enabled": true,
+        "dragging": true,
+        "removeLabelBox": false
       },
-      labels: {
-        enabled: true,
-        dragging: true,
-        removeLabelBox: false
+      "margin": {
+        "left": 0,
+        "top": 0
       },
-      margin: {
-        left: 0,
-        top: 0
+      "decorations": {
+        "enabled": false,
+        "xAxisGroups": null //left to be set by external page. example: {
+        //   "gdp_pcap": [
+        //     { "min": null, "max": 2650, "label": "incomegroups/level1", "label_short": "incomegroups/level1short" },
+        //     { "min": 2650, "max": 8000, "label": "incomegroups/level2", "label_short": "incomegroups/level2short" },
+        //     { "min": 8000, "max": 24200, "label": "incomegroups/level3", "label_short": "incomegroups/level3short" },
+        //     { "min": 24200, "max": null, "label": "incomegroups/level4", "label_short": "incomegroups/level4short" }
+        //   ]
+        // }
       }
     },
     "data-warning": {
-      margin: {
-        LARGE: { bottom: 90 },
-        MEDIUM: { bottom: 70 },
-        SMALL: { bottom: 50 }
+      "enable": false,
+      "margin": {
+        "LARGE": { "bottom": 90 },
+        "MEDIUM": { "bottom": 70 },
+        "SMALL": { "bottom": 50 }
       }
+    },
+    "tree-menu": {
+      "showDataSources": false,
+      "folderStrategyByDataset": {}
     }
   };
 
   BubbleChart.mainComponent = VizabiBubbleChart;
 
-  BubbleChart.DEFAULT_CORE = (markerName) => ({
-    requiredEncodings: ["x", "y", "size"],
-    encoding: {
-      "show": { modelType: "selection" },
-      "selected": {
-        modelType: "selection",
-        data: { 
-          filter: { 
-            ref: `markers.${markerName}.encoding.trail.data.filter`
+  BubbleChart.DEFAULT_MODEL = {
+    "bubble": {
+      "requiredEncodings": ["x", "y", "size"],
+      "encoding": {
+        "show": { "modelType": "selection" },
+        "selected": {
+          "modelType": "selection",
+          "data": { 
+            "filter": { 
+              "ref": `markers.bubble.encoding.trail.data.filter`
+            }
           }
+        },
+        "highlighted": { "modelType": "selection" },
+        "superhighlighted": { "modelType": "selection" },
+        "x": {
+          "data": { },
+          "scale": {
+            "allowedTypes": ["linear", "log", "genericLog", "pow", "time"]
+          }
+        },
+        "y": {
+          "modelType": "lane",
+          "data": { },
+          "scale": {
+            "allowedTypes": ["linear", "log", "genericLog", "pow", "time", "rank"]
+          }
+        },
+        "order": { 
+          "modelType": "order",
+          "direction": "desc",
+          "data": { 
+            "ref": `markers.bubble.encoding.size.data.config`
+          }
+        },
+        "size": {
+          "data": { },
+          "scale": {
+            "modelType": "size",
+            "allowedTypes": ["linear", "point"],
+            "range": [0, 50],
+            "extent": [0, 1]
+          }
+        },
+        "color": {
+          "data": { "constant": "_default" },
+          "scale": {
+            "modelType": "color"
+          }
+        },
+        "label": { "data": { "modelType": "entityPropertyDataConfig" } },
+        "frame": { "modelType": "frame", "speed": 200, "splash": true },
+        "trail": { "modelType": "trail", "show": false },             
+        "size_label": {
+          "data": {
+            "constant": "_default"
+          },
+          "scale": {
+            "extent": [0, 0.22],
+            "modelType": "size",
+            "allowedTypes": ["linear", "point"],
+          }
+        },
+        "repeat": {
+          "modelType": "repeat",
+          "useConnectedRowsAndColumns": true,
+          "row": ["y"],
+          "column": ["x"],
+          "allowEnc": ["y", "x"]
         }
-      },
-      "highlighted": { modelType: "selection" },
-      "superhighlighted": { modelType: "selection" },
-      "x": {
-        scale: {
-          allowedTypes: ["linear", "log", "genericLog", "pow", "time"]
-        }
-      },
-      "y": {
-        modelType: "lane",
-        scale: {
-          allowedTypes: ["linear", "log", "genericLog", "pow", "time", "rank"]
-        }
-      },
-      "order": { modelType: "order",
-        data: { 
-          ref: `markers.${markerName}.encoding.size.data.config`
-        }
-      },
-      "size": {
-        scale: {
-          modelType: "size",
-          allowedTypes: ["linear", "point"],
-          range: [0, 50]
+      }
+    },
+    "legend": {
+      "data": {
+        "ref": {
+          "transform": "entityConceptSkipFilter",
+          "path": "markers.bubble.encoding.color"
         }
       },
-      "color": { scale: { modelType: "color" } },
-      "label": { data: { modelType: "entityPropertyDataConfig" } },
-      "frame": { modelType: "frame" },
-      "trail": { modelType: "trail" },             
-      "size_label": {
-        data: {
-          constant: "_default"
+      "encoding": {
+        "color": {
+          "data": {
+            "concept": { "ref": "markers.bubble.encoding.color.data.concept" },
+            "constant": { "ref": "markers.bubble.encoding.color.data.constant" }
+          },
+          "scale": {
+            "modelType": "color",
+            "palette": { "ref": "markers.bubble.encoding.color.scale.palette" },
+            "domain": null,
+            "range": null,
+            "type": null,
+            "zoomed": null,
+            "zeroBaseline": false,
+            "clamp": false,
+            "allowedTypes": null
+          }
+          //"scale": { "ref": "markers.bubble.encoding.color.scale" }
         },
-        scale: {
-          extent: [0, 0.35],
-          modelType: "size",
-          allowedTypes: ["linear", "point"]
-        }
-      },
-      "repeat": {
-        modelType: "repeat",
-        allowEnc: ["y", "x"]
+        "name": { "data": { } },
+        "order": {
+          "modelType": "order",
+          "direction": "asc",
+          "data": { }
+        },
+        "map": { "data": { } }
       }
-    }
-  });
+    },
+  };
 
-  BubbleChart.versionInfo = { version: "5.2.3", build: 1748252204619, package: {"homepage":"https://github.com/vizabi/bubblechart#readme","name":"@vizabi/bubblechart","description":"Vizabi bubble chart"}, sharedComponents: sharedComponents.versionInfo};
+  BubbleChart.versionInfo = { version: "5.4.0", build: 1763740005307, package: {"homepage":"https://github.com/vizabi/bubblechart#readme","name":"@vizabi/bubblechart","description":"Vizabi bubble chart"}, sharedComponents: sharedComponents.versionInfo};
 
   exports.Base = BubbleChart;