@vizabi/bubblechart 5.5.0 → 5.5.2

package/build/bubblechart.js

@@ -1,4 +1,4 @@
-// https://github.com/vizabi/bubblechart#readme v5.5.0 build 1764365872039 Copyright 2025 Gapminder Foundation and contributors
+// https://github.com/vizabi/bubblechart#readme v5.5.2 build 1765875954936 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'), require('@deck.gl/core'), require('@deck.gl/layers')) :
   typeof define === 'function' && define.amd ? define(['exports', '@vizabi/shared-components', 'd3', 'mobx', '@deck.gl/core', '@deck.gl/layers'], factory) :
@@ -2700,7 +2700,7 @@ void main(void) {
             requestAnimationFrame(() => {
               this.redrawUpdateTrigger++;
               this.__labelData = this.__newLabelData;
-              this.deckBubble.setProps({layers: this.getBubbleLayers(this.__data, true, this.duration + this.perfDataStart - performance.now(), undefined, this.__newLastLineTrailData)});
+              this.deckBubble.setProps({layers: this.getBubbleLayers(this.__data, true, this.duration + (this.perfDataStart - performance.now()) * 0.85, undefined, this.__newLastLineTrailData)});
               this.__trailsData = this.__newTrailsData;
               //_updateRangesLine = _newUpdateRangesLine;
             });
@@ -3265,28 +3265,35 @@ void main(void) {
 
     getProps() {
       return {
-        getSourcePosition: (d) => {
+        getSourcePosition: (d, { target }) => {
           if (!d) return;
-          //console.log("src", d, d.KEY, d.uz ? d.uz : this.zScale(d.z*1.01), this.zScale(d.z*1.01));
-          return [this.xScale(d.x), this.yScale(d.y), d.uz ? d.uz : this.zScale(d.z*1.01)]
+          target[0] = this.xScale(d.x);
+          target[1] = this.yScale(d.y);
+          target[2] = d.uz ? d.uz : this.zScale(d.z*1.01);
+          return target;
         },
-        getTargetPosition: (_d, { data, index }) => {
-          //console.log("trgt", _d, data[index + 1]);
+        getTargetPosition: (_d, { data, index, target }) => {
           if (!_d) return;
           const d = _d[TRAIL_KEY] ? data[index + 1] ? data[index + 1] : _d : _d;
           if (!d) return;
-          //console.log("trgt", d, d.KEY, d.uz ? d.uz : this.zScale(d.z*1.01), this.zScale(d.z*1.01));
-          return [this.xScale(d.x), this.yScale(d.y), d.uz ? d.uz : this.zScale(d.z*1.01)]
+          target[0] = this.xScale(d.x);
+          target[1] = this.yScale(d.y);
+          target[2] = d.uz ? d.uz : this.zScale(d.z*1.01);
+          return target;
         },    
-        getLastLineSourcePosition: (d) => {
-          //console.log("src",d);
+        getLastLineSourcePosition: (d, { target }) => {
           if (!d) return;
-          return [this.xScale(d[0].x), this.yScale(d[0].y), this.zScale(d[0].z*1.01)]
+          target[0] = this.xScale(d[0].x);
+          target[1] = this.yScale(d[0].y);
+          target[2] = this.zScale(d[0].z*1.01);
+          return target;
         },
-        getLastLineTargetPosition: (d) => {
-          //console.log("trgt", _d, data[index + 1]);
+        getLastLineTargetPosition: (d, { target }) => {
           if (!d) return;
-          return [this.xScale(d[1].x), this.yScale(d[1].y), this.zScale(d[1].z*1.01)]
+          target[0] = this.xScale(d[1].x);
+          target[1] = this.yScale(d[1].y);
+          target[2] = this.zScale(d[1].z*1.01);
+          return target;
         },    
         getLabelText: (d) => {
           if (!d) return;
@@ -3342,7 +3349,7 @@ void main(void) {
     
           //adjust label offset if label with current offset located outside of vieport
           const offset = this.labelOffset[key];
-          const pPos = viewport.project(this.props.getPosition(d).slice(0,2));
+          const pPos = viewport.project(this.props.getPosition(d, { target: [] }).slice(0,2));
           const vW = viewport.width;
           const vH = viewport.height;
           const [lW, lH] = sourceLayer.parent.state.labelSize;
@@ -3371,7 +3378,7 @@ void main(void) {
             offset[1] = vH - lPaddB - pPos[1];
           }
     
-          console.log("offset", offset, "point", pPos, lW, lH, viewport);
+          //console.log("offset", offset, "point", pPos, lW, lH, viewport);
           this.dragX0 = this.labelOffset[key][0] - x;
           this.dragY0 = this.labelOffset[key][1] - y;
           //this.deckBubble.setProps({layers: this.getBubbleLayers(undefined, false, 0, false), controller: { dragPan: dragFlag }}); 
@@ -3385,7 +3392,6 @@ void main(void) {
           const key = d[TRAIL_KEY] || d[KEY];
           this.labelOffset[key][0] = this.dragX;
           this.labelOffset[key][1] = this.dragY;
-          this.props.getPosition(d).slice(0,2);
           //console.log("offset", this.labelOffset[key], "point", sourceLayer.project(pos),  viewport.getBounds(), viewport);
           this.deckBubble.setProps({layers: this.getBubbleLayers(undefined, false, 0, false),}); //views: this.getViews({ dragPan: dragFlag }),}); 
           return true;
@@ -3427,25 +3433,25 @@ void main(void) {
           const offsetY = this.labelOffset[key] && this.labelOffset[key][1] || 0;
           return [offsetX || 0, -offsetY || 0];
         },
-        getPosition: (d) => {
+        getPosition: (d, { target }) => {
           if (!d) return;
-          //let zHover = 0;
-          // if (this.activeObject && this.activeObject[KEY] == d[KEY]) {
-            //zHover = -0.05;
-            //console.log("zHover", zHover, d, this.activeObject)
-          // }
-          //console.log(d[KEY],this.xScale(d.x), this.yScale(d.y), d.uz ? d.uz : this.zScale(d.size))
-          //return [this.xScale(d.x), this.yScale(d.y), d.uz ? d.uz : this.zScale(d.size)]
-          return [this.xScale(d.x), this.yScale(d.y), d.uz ? d.uz : this.zScale(d.size)]
+          target[0] = this.xScale(d.x);
+          target[1] = this.yScale(d.y);
+          target[2] = d.uz ? d.uz : this.zScale(d.size);
+          return target;
         },
-        getPositionHighlight: (d) => {
+        getPositionHighlight: (d, { target }) => {
           if (!d) return;
-          return [this.xScale(d.x), this.yScale(d.y), -0.095];
+          target[0] = this.xScale(d.x);
+          target[1] = this.yScale(d.y);
+          target[2] = -0.095;
+          return target;
         },
-        getPositionXY: (d) => {
+        getPositionXY: (d, { target }) => {
           if (!d) return;
-          //console.log(d[KEY],this.xScale(d.x), this.yScale(d.y), d.uz ? d.uz : this.zScale(d.size))
-          return [this.xScale(d.x), this.yScale(d.y)]
+          target[0] = this.xScale(d.x);
+          target[1] = this.yScale(d.y);
+          return target;
         },
         
         getFillColor: (d, { target }) => {
@@ -3636,6 +3642,7 @@ void main(void) {
           //  console.log("_datediff line", newData, oldData, _updateRangesLine);
           //  return dataDiff ? playing ? _updateRangesLine : null : null;
           //}
+          visible: this.MDL.trail.show
         }),
         new layers.LineLayer({
           id: 'lastLineLayer',
@@ -3658,6 +3665,7 @@ void main(void) {
           //  console.log("_datediff line", newData, oldData, _updateRangesLine);
           //  return dataDiff ? playing ? _updateRangesLine : null : null;
           //}
+          visible: this.MDL.trail.show
         }),
         new layers.ScatterplotLayer({
           parameters: {depthTest: false},
@@ -3684,12 +3692,6 @@ void main(void) {
           transitions: t ? { 
             getPosition: { 
               duration,
-              onStart: (e) => {
-                console.log("start", e);
-              },
-              onEnd: (e) => {
-                console.log("end", e);
-              }
             },
             getRadius: {
               duration,
@@ -3829,7 +3831,7 @@ void main(void) {
           //}
         }),*/
         
-        this.ui.labels.enabled && new LabelLayer({
+        this.ui.labels.enabled && this.__someSelected && new LabelLayer({
           //parameters: {depthTest: false},
           id: 'labelTextLayer',
           _subLayerProps: {
@@ -3903,7 +3905,8 @@ void main(void) {
             getLineSourceFillOffset: {
               duration,
             }
-          } : null
+          } : null,
+          visible: this.__someSelected
         }),
       ]
     }
@@ -4224,18 +4227,28 @@ void main(void) {
           }
           //"scale": { "ref": "markers.bubble.encoding.color.scale" }
         },
-        "name": { "data": { } },
+        "name": { 
+          "data": {
+            "concept": {"filter": { "concept": { "$in": ["name"]} } }
+          }
+        },
         "order": {
           "modelType": "order",
           "direction": "asc",
-          "data": { }
+          "data": {
+            "concept": {"filter": { "concept": { "$in": ["rank"]} } }
+          }
         },
-        "map": { "data": { } }
+        "map": { 
+          "data": {
+            "concept": {"filter": { "concept": { "$in": ["shape_lores_svg", "shape", "svg"]} } }
+          }
+        }
       }
     },
   };
 
-  BubbleChart.versionInfo = { version: "5.5.0", build: 1764365872039, package: {"homepage":"https://github.com/vizabi/bubblechart#readme","name":"@vizabi/bubblechart","description":"Vizabi bubble chart"}, sharedComponents: sharedComponents.versionInfo};
+  BubbleChart.versionInfo = { version: "5.5.2", build: 1765875954936, package: {"homepage":"https://github.com/vizabi/bubblechart#readme","name":"@vizabi/bubblechart","description":"Vizabi bubble chart"}, sharedComponents: sharedComponents.versionInfo};
 
   exports.Base = BubbleChart;