vizabi-barchart-ds - npm Package Compare versions

Comparing version 1.0.0 to 1.0.1

package.json

@@ -11,5 +11,5 @@ {
   "name": "vizabi-barchart-ds",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "dependencies": {
-    "vizabi": "^0.20.2-6"
+    "vizabi": "^0.21.0-20"
   },
@@ -16,0 +16,0 @@ "repository": {

src/component.js

@@ -33,2 +33,5 @@ const {
     }, {
+      name: "marker_order",
+      type: "model"
+    }, {
       name: "entities",
@@ -69,17 +72,10 @@ type: "entities"
         if (!_this.snapped) {
-          if (_this.timeSteps.filter(t => (t - _this.model.time.value) == 0).length) {
+//          if (_this.timeSteps.filter(t => (t - _this.model.time.value) == 0).length) {
             _this.model.marker.getFrame(_this.model.time.value, frame => {
               _this.frame = frame;
               _this.frameAxisX = frame.axis_x;
-              _this._updateEntities();
-              _this.updateBarsOpacity();
-            });
-          } else {
-            const nextIndex = d3.bisectLeft(_this.timeSteps, _this.model.time.value);
-            const prevFrameTime = _this.timeSteps[nextIndex - 1];
-            const nextFrameTime = _this.timeSteps[nextIndex];
-            const fraction = (_this.model.time.value - prevFrameTime) / (nextFrameTime - prevFrameTime);
-            _this.model.marker.getFrame(nextFrameTime, nValues => {
-              _this.model.marker.getFrame(prevFrameTime, pValues => {
-                _this.frameAxisX = _this.interpolateDiagonal(pValues.axis_x, nValues.axis_x, fraction);
+              _this.model.marker_order.getFrame(_this.model.time.value, frameOrder => {
+                _this.frameOrder = frameOrder.hook_order;
+
+                _this._reorderBars();
                 _this._updateEntities();
@@ -89,6 +85,25 @@ _this.updateBarsOpacity();
             });
-          }
+          // } else {
+          //   const nextIndex = d3.bisectLeft(_this.timeSteps, _this.model.time.value);
+          //   const prevFrameTime = _this.timeSteps[nextIndex - 1];
+          //   const nextFrameTime = _this.timeSteps[nextIndex];
+          //   const fraction = (_this.model.time.value - prevFrameTime) / (nextFrameTime - prevFrameTime);
+          //   _this.model.marker.getFrame(nextFrameTime, nValues => {
+          //     _this.model.marker.getFrame(prevFrameTime, pValues => {
+          //       _this.frameAxisX = _this.interpolateDiagonal(pValues.axis_x, nValues.axis_x, fraction);
+          //       _this._updateEntities();
+          //       _this.updateBarsOpacity();
+          //     });
+          //   });
+          // }
         }
         _this.snapped = false;
       },
+      "change:marker": function(evt, path) {
+        if (!_this._readyOnce) return;
+        if (path.indexOf("scaleType") > -1) {
+          _this.ready();
+          return;
+        }
+      },
       "change:marker.select": function(evt) {
@@ -230,3 +245,3 @@ _this.someSelected = (_this.model.marker.select.length > 0);
     this.xScales = [];
-    this.SHIFTEDAGEDIM = "s_age";
+    //this.SHIFTEDAGEDIM = "s_age";
 
@@ -247,5 +262,5 @@ this.totalFieldName = "Total";
 
-    this.colorUseConstant = this.model.marker.color.use == "constant";
-    this.stackSkip = this.colorUseConstant || stackDim == sideDim;
-    this.geoLess = stackDim !== this.geoDomainDimension && sideDim !== this.geoDomainDimension;
+    this.colorUseNotProperty = this.model.marker.color.use == "constant" || this.model.marker.color.use == "indicator";
+    this.stackSkip = this.colorUseNotProperty || stackDim == sideDim;
+    this.geoLess = stackDim !== this.geoDomainDimension && sideDim !== this.geoDomainDimension && this.AGEDIM !== this.geoDomainDimension;
     this.sideSkip = this.model.marker.side.use == "constant";
@@ -296,13 +311,13 @@ },
         if (_this.geoLess && _this.stackSkip && _this.sideSkip) {
-          width = (_this.frameAxisX[d[_this.AGEDIM] + _this.ageShift] || {})[_this.geoDomainDefaultValue];
+          width = (_this.frameAxisX[d[_this.AGEDIM]] || {})[_this.geoDomainDefaultValue];
         } else if (_this.geoLess && _this.stackSkip) {
-          width = _this.colorUseConstant || d[_this.PREFIXEDSIDEDIM] == d[_this.PREFIXEDSTACKDIM] ? (_this.frameAxisX[d[_this.PREFIXEDSIDEDIM]][d[_this.AGEDIM] + _this.ageShift] || {})[_this.geoDomainDefaultValue] : 0;
+          width = _this.colorUseNotProperty || d[_this.PREFIXEDSIDEDIM] == d[_this.PREFIXEDSTACKDIM] ? (_this.frameAxisX[d[_this.PREFIXEDSIDEDIM]][d[_this.AGEDIM]] || {})[_this.geoDomainDefaultValue] : 0;
         } else if (_this.geoLess && _this.sideSkip) {
-          width = (_this.frameAxisX[d[_this.PREFIXEDSTACKDIM]][d[_this.AGEDIM] + _this.ageShift] || {})[_this.geoDomainDefaultValue];
+          width = (_this.frameAxisX[d[_this.PREFIXEDSTACKDIM]][d[_this.AGEDIM]] || {})[_this.geoDomainDefaultValue];
         } else if (_this.stackSkip) {
-          width = _this.colorUseConstant || d[_this.PREFIXEDSIDEDIM] == d[_this.PREFIXEDSTACKDIM] ? _this.frameAxisX[d[_this.PREFIXEDSIDEDIM]][d[_this.AGEDIM] + _this.ageShift] : 0;
+          width = _this.colorUseNotProperty || d[_this.PREFIXEDSIDEDIM] == d[_this.PREFIXEDSTACKDIM] ? _this.frameAxisX[d[_this.PREFIXEDSIDEDIM]][d[_this.AGEDIM]] : 0;
         } else if (_this.sideSkip) {
-          width = _this.frameAxisX[d[_this.PREFIXEDSTACKDIM]][d[_this.AGEDIM] + _this.ageShift];
+          width = _this.frameAxisX[d[_this.PREFIXEDSTACKDIM]][d[_this.AGEDIM]];
         } else {
-          width = _this.frameAxisX[d[_this.PREFIXEDSTACKDIM]][d[_this.PREFIXEDSIDEDIM]][d[_this.AGEDIM] + _this.ageShift];
+          width = _this.frameAxisX[d[_this.PREFIXEDSTACKDIM]][d[_this.PREFIXEDSIDEDIM]][d[_this.AGEDIM]];
         }
@@ -350,3 +365,3 @@ d["width_"] = width ? _this.xScale(width) : 0;
     this.age = this.model.marker.axis_y.getEntity();
-    this.AGEDIM = this.age.getDimension();
+    this.AGEDIM = this.SHIFTEDAGEDIM = this.age.getDimension();
     this.TIMEDIM = this.model.time.getDimension();
@@ -362,95 +377,17 @@ this.groupBy = this.age.grouping || 1;
       _this.frameAxisX = frame.axis_x;
+      _this.model.marker_order.getFrame(_this.model.time.value, frameOrder => {
+        _this.frameOrder = frameOrder.hook_order;
+        _this._createLimits();
+        _this._updateLimits();
+  
+        _this._reorderBars();
+        _this.markers = this.model.marker.getKeys(_this.AGEDIM);
 
-      _this._createLimits();
-      _this._updateLimits();
-
-      _this.resize();
-      _this._updateEntities(true);
-      _this.updateBarsOpacity();
+        _this.resize();
+        _this._updateEntities(true);
+        _this.updateBarsOpacity();
+      });
     });
   },
 
-  interpolateDiagonal(pValues, nValues, fraction) {
-    const _this = this;
-    const dataBetweenFrames = {};
-    let data;
-    let val1, val2, shiftedAge;
-    const groupBy = this.groupBy;
-    if (this.geoLess && this.stackSkip && this.sideSkip) {
-      data = dataBetweenFrames;
-      utils.forEach(_this.ageKeys, age => {
-        shiftedAge = +age + groupBy;
-        val1 = pValues[age][_this.geoDomainDefaultValue];
-        val2 = (nValues[shiftedAge] || {})[_this.geoDomainDefaultValue] || 0;
-        data[shiftedAge] = {};
-        data[shiftedAge][_this.geoDomainDefaultValue] = (val1 == null || val2 == null) ? null : val1 + ((val2 - val1) * fraction);
-      });
-      data[0] = {};
-      data[0][_this.geoDomainDefaultValue] = nValues[0][_this.geoDomainDefaultValue] || 0;
-    } else if (this.stackSkip && this.geoLess) {
-      utils.forEach(_this.sideKeys, side => {
-        data = dataBetweenFrames[side] = {};
-        utils.forEach(_this.ageKeys, age => {
-          shiftedAge = +age + groupBy;
-          val1 = pValues[side][age][_this.geoDomainDefaultValue];
-          val2 = (nValues[side][shiftedAge] || {})[_this.geoDomainDefaultValue] || 0;
-          data[shiftedAge] = {};
-          data[shiftedAge][_this.geoDomainDefaultValue] = (val1 == null || val2 == null) ? null : val1 + ((val2 - val1) * fraction);
-        });
-        data[0] = {};
-        data[0][_this.geoDomainDefaultValue] = nValues[side][0][_this.geoDomainDefaultValue] || 0;
-      });
-    } else if (this.stackSkip) {
-      utils.forEach(_this.sideKeys, side => {
-        data = dataBetweenFrames[side] = {};
-        utils.forEach(_this.ageKeys, age => {
-          shiftedAge = +age + groupBy;
-          val1 = pValues[side][age];
-          val2 = nValues[side][shiftedAge] || 0;
-          data[shiftedAge] = (val1 == null || val2 == null) ? null : val1 + ((val2 - val1) * fraction);
-        });
-        data[0] = nValues[side][0] || 0;
-      });
-    } else if (this.sideSkip && this.geoLess) {
-      utils.forEach(_this.stackKeys, stack => {
-        data = dataBetweenFrames[stack] = {};
-        utils.forEach(_this.ageKeys, age => {
-          shiftedAge = +age + groupBy;
-          val1 = pValues[stack][age][_this.geoDomainDefaultValue];
-          val2 = (nValues[stack][shiftedAge] || {})[_this.geoDomainDefaultValue] || 0;
-          data[shiftedAge] = {};
-          data[shiftedAge][_this.geoDomainDefaultValue] = (val1 == null || val2 == null) ? null : val1 + ((val2 - val1) * fraction);
-        });
-        data[0] = {};
-        data[0][_this.geoDomainDefaultValue] = nValues[stack][0][_this.geoDomainDefaultValue] || 0;
-      });
-    } else if (this.sideSkip) {
-      utils.forEach(_this.stackKeys, stack => {
-        data = dataBetweenFrames[stack] = {};
-        utils.forEach(_this.ageKeys, age => {
-          shiftedAge = +age + groupBy;
-          val1 = pValues[stack][age];
-          val2 = nValues[stack][shiftedAge] || 0;
-          data[shiftedAge] = (val1 == null || val2 == null) ? null : val1 + ((val2 - val1) * fraction);
-        });
-        data[0] = nValues[stack][0] || 0;
-      });
-    } else {
-      utils.forEach(_this.stackKeys, stack => {
-        dataBetweenFrames[stack] = {};
-        utils.forEach(_this.sideKeys, side => {
-          data = dataBetweenFrames[stack][side] = {};
-          utils.forEach(_this.ageKeys, age => {
-            shiftedAge = +age + groupBy;
-            val1 = pValues[stack][side][age];
-            val2 = nValues[stack][side][shiftedAge] || 0;
-            data[shiftedAge] = (val1 == null || val2 == null) ? null : val1 + ((val2 - val1) * fraction);
-          });
-          data[0] = nValues[stack][side][0] || 0;
-        });
-      });
-    }
-    return dataBetweenFrames;
-  },
-
   updateUIStrings() {
@@ -523,5 +460,5 @@ const _this = this;
     ageKeys = ages.map(m => m[ageDim]);
-    this.ageKeys = ageKeys;
+    this.shiftedAgeKeys = this.ageKeys = ageKeys;
 
-    this.shiftedAgeKeys = this.timeSteps.map((m, i) => -i * groupBy).slice(1).reverse().concat(ageKeys);
+    //this.shiftedAgeKeys = this.timeSteps.map((m, i) => -i * groupBy).slice(1).reverse().concat(ageKeys);
 
@@ -580,5 +517,9 @@ const sideItems = this.model.marker.label_side.getItems();
     this.cScale = this.model.marker.color.getScale();
+  },
 
-    const shiftedAgeDim = this.SHIFTEDAGEDIM;
-    this.markers = this.model.marker.getKeys(ageDim);
+  _reorderBars() {
+    const _this = this;
+    const domain = this.yScale.domain();
+    domain.sort((a, b) => d3.ascending(_this.frameOrder[a] || 0, _this.frameOrder[b] || 0));
+    this.yScale.domain(domain);
   },
@@ -699,7 +640,8 @@
     const axisX = this.model.marker.axis_x;
+    const zero = axisX.scaleType == "log" ? 0.01 : 0;
     let domain;
     if (this.ui.chart.inpercent) {
-      domain = [0, Math.max(...this.sideKeys.map(s => _this.inpercentMaxLimits[s]))];
+      domain = [zero * 0.01, Math.max(...this.sideKeys.map(s => _this.inpercentMaxLimits[s]))];
     } else {
-      domain = (axisX.domainMin != null && axisX.domainMax != null) ? [+axisX.domainMin, +axisX.domainMax] : [0, Math.max(...this.sideKeys.map(s => _this.maxLimits[s]))];
+      domain = (axisX.domainMin != null && axisX.domainMax != null) ? [+axisX.domainMin, +axisX.domainMax] : [zero, Math.max(...this.sideKeys.map(s => _this.maxLimits[s]))];
     }
@@ -748,22 +690,22 @@ this.xScale.domain(domain);
 
-    const nextStep = d3.bisectLeft(this.timeSteps, time.value);
+    //const nextStep = d3.bisectLeft(this.timeSteps, time.value);
 
     const shiftedAgeDim = this.SHIFTEDAGEDIM;
 
-    const markers = this.markers.map(data => {
-        const o = {};
-    o[ageDim] = o[shiftedAgeDim] = +data[ageDim];
-    o[ageDim] -= nextStep * groupBy;
-    return o;
-  });
+  //   const markers = this.markers.map(data => {
+  //       const o = {};
+  //   o[ageDim] = o[shiftedAgeDim] = +data[ageDim];
+  //   o[ageDim] -= nextStep * groupBy;
+  //   return o;
+  // });
 
-    const ageBars = markers.slice(0);
+    const ageBars = this.markers.slice(0);
 
-    const outAge = {};
-    outAge[shiftedAgeDim] = markers.length * groupBy;
-    outAge[ageDim] = outAge[shiftedAgeDim] - nextStep * groupBy;
+    // const outAge = {};
+    // outAge[shiftedAgeDim] = markers.length * groupBy;
+    // outAge[ageDim] = outAge[shiftedAgeDim] - nextStep * groupBy;
 
-    this.ageShift = nextStep * groupBy;
+   //this.ageShift = 0;//= nextStep * groupBy;
 
-    if (nextStep) ageBars.push(outAge);
+    // if (nextStep) ageBars.push(outAge);
 
@@ -782,3 +724,4 @@ this.entityBars = this.bars.selectAll(".vzb-bc-bar")
         .attr("class", d => "vzb-bc-bar " + "vzb-bc-bar-" + d[ageDim])
-  .attr("transform", (d, i) => "translate(0," + (firstBarOffsetY - (d[shiftedAgeDim] - domain[0] - groupBy) * oneBarHeight) + ")")
+//  .attr("transform", (d, i) => "translate(0," + (firstBarOffsetY - (d[shiftedAgeDim] - domain[0] - groupBy) * oneBarHeight) + ")")
+  .attr("transform", (d, i) => "translate(0," + (firstBarOffsetY - _this.yScale(d[shiftedAgeDim])) + ")")
   .merge(this.entityBars);
@@ -829,7 +772,7 @@
     this.stackBars = this.stackBars.enter().append("rect")
-        .attr("class", (d, i) => "vzb-bc-stack " + "vzb-bc-stack-" + i + (_this.highlighted ? " vzb-dimmed" : ""))
-  .attr("y", 0)
+      .attr("class", (d, i) => "vzb-bc-stack " + "vzb-bc-stack-" + i + (_this.highlighted ? " vzb-dimmed" : ""))
+      .attr("y", 0)
       .attr("height", barHeight)
-      .attr("fill", d => _this.cScale(d[prefixedStackDim]))
-  .attr("width", _attributeUpdaters._newWidth)
+      .attr("fill", d => _this.cScale(_this.colorUseNotProperty ? _this.frame.color[d[_this.PREFIXEDSIDEDIM]][d[_this.AGEDIM]] : d[prefixedStackDim]))
+      .attr("width", _attributeUpdaters._newWidth)
       .attr("x", _attributeUpdaters._newX)
@@ -844,44 +787,5 @@ .on("mouseover", _this.interaction.mouseover)
     if (reorder) this.stackBars
-      .attr("fill", d => _this.cScale(d[prefixedStackDim]))
+      .attr("fill", d => _this.cScale(_this.colorUseNotProperty ? _this.frame.color[d[_this.PREFIXEDSIDEDIM]][d[_this.AGEDIM]] : d[prefixedStackDim]))
       .order();
 
-    // this.stackBars = this.bars.selectAll('.vzb-bc-bar')
-    //   .selectAll('.vzb-bc-side')
-    //     .attr("transform", function(d, i) {
-    //       return i ? ("scale(-1,1) translate(" + _this.activeProfile.centerWidth + ",0)") : "";
-    //     })
-    //   .selectAll('.vzb-bc-stack')
-    //     .attr("height", barHeight)
-    //     .attr("fill", function(d) {
-    //       //return _this._temporaryBarsColorAdapter(values, d, ageDim);
-    //       //return _this.cScale(values.color[d[ageDim]]);
-    //       return _this.cScale(d[stackDim]);
-    //     })
-    //     //.attr("shape-rendering", "crispEdges") // this makes sure there are no gaps between the bars, but also disables anti-aliasing
-    //     .each(function(d, i) {
-    //       var total = _this.ui.chart.inpercent ? _this.totalValues[d[sideDim]] : 1;
-    //       var sum = 0;
-    //       if(shiftedValues[d[ageDim]]) {
-    //         if(_this.stacked) {
-    //           sum = shiftedValues[d[ageDim]][d[sideDim]][d[stackDim]];
-    //         } else {
-    //           var stacksData = shiftedValues[d[ageDim]][d[sideDim]];
-    //           utils.forEach(stacksData, function(val) {
-    //             sum += val;
-    //           });
-    //         }
-    //       }
-    //       //var prevWidth = +this.getAttribute("width");
-    //       d["width_"] = _this.xScale(sum / total);
-    //       //d3.select(this).classed("vzb-hidden", d["width_"] < 1 && prevWidth < 1);
-
-    //       var prevSbl = this.previousSibling;
-    //       if(prevSbl) {
-    //         var prevSblDatum = d3.select(prevSbl).datum();
-    //         d["x_"] = prevSblDatum.x_ + prevSblDatum.width_;
-    //       } else {
-    //         d["x_"] = 0;
-    //       }
-    //     });
-
     const stepShift = (ageBars[0][shiftedAgeDim] - ageBars[0][ageDim]) - this.shiftScale(time.value) * groupBy;
@@ -895,4 +799,5 @@
       this.entityBars
-        .transition(transition)
-        .attr("transform", (d, i) => "translate(0," + (firstBarOffsetY - (d[shiftedAgeDim] - domain[0] - stepShift) * oneBarHeight) + ")");
+        //.transition(transition)
+        .attr("transform", (d, i) => "translate(0," + (firstBarOffsetY - _this.yScale(d[shiftedAgeDim])) + ")");
+//        .attr("transform", (d, i) => "translate(0," + (firstBarOffsetY - (d[shiftedAgeDim] - domain[0] - stepShift) * oneBarHeight) + ")");
       this.stackBars
@@ -904,3 +809,4 @@ .transition(transition)
       this.entityBars.interrupt()
-        .attr("transform", (d, i) => "translate(0," + (firstBarOffsetY - (d[shiftedAgeDim] - domain[0] - stepShift) * oneBarHeight) + ")");
+        .attr("transform", (d, i) => "translate(0," + (firstBarOffsetY - _this.yScale(d[shiftedAgeDim])) + ")");
+//        .attr("transform", (d, i) => "translate(0," + (firstBarOffsetY - (d[shiftedAgeDim] - domain[0] - stepShift) * oneBarHeight) + ")");
       this.stackBars.interrupt()
@@ -912,3 +818,3 @@ .attr("width", _attributeUpdaters._newWidth)
     this.entityLabels = this.labels.selectAll(".vzb-bc-label")
-      .data(markers);
+      .data(this.markers);
     //exit selection
@@ -934,3 +840,3 @@ this.entityLabels.exit().remove();
   })
-  .attr("y", (d, i) => firstBarOffsetY - (d[shiftedAgeDim] - domain[0]) * oneBarHeight - 10);
+  .attr("y", (d, i) => firstBarOffsetY - _this.yScale(d[shiftedAgeDim]) - 10);
     // .style("fill", function(d) {
@@ -1098,3 +1004,3 @@ //   var color = _this.cScale(values.color[d[ageDim]]);
     const domain = this.yScale.domain();
-    this.oneBarHeight = this.height / (domain[1] - domain[0]);
+    this.oneBarHeight = this.model.marker.axis_y.scaleType == "ordinal" ? this.height / domain.length : this.height / (domain[1] - domain[0]);
     const barHeight = this.barHeight = this.oneBarHeight * groupBy; // height per bar is total domain height divided by the number of possible markers in the domain
@@ -1118,2 +1024,3 @@ this.firstBarOffsetY = this.height - this.barHeight;
     this.yAxis.scale(this.yScale)
+      .tickValues([])
       .tickSizeInner(-this.width)
@@ -1126,3 +1033,3 @@ .tickSizeOuter(0)
         toolMargin: margin,
-        limitMaxTickNumber: 19
+        limitMaxTickNumber: 1
       });
@@ -1179,3 +1086,8 @@
       }
-    }
+      this.xAxisEl.select(".tick line").classed("vzb-hidden", true);
+   
+      //hide left axis zero tick
+      const tickNodes = this.xAxisLeftEl.selectAll(".tick").nodes();
+      d3.select(tickNodes[tickNodes.length - 1]).classed("vzb-hidden", true);
+   }
 
@@ -1182,0 +1094,0 @@ const isRTL = this.model.locale.isRTL();

src/index.js

@@ -22,3 +22,3 @@ import "./styles.scss";
       placeholder: ".vzb-tool-viz",
-      model: ["state.time", "state.marker", "state.entities", "state.entities_side", "state.entities_allpossible", "state.entities_geodomain", "locale", "ui"] //pass models to component
+      model: ["state.time", "state.marker", "state.marker_order", "state.entities", "state.entities_side", "state.entities_allpossible", "state.entities_geodomain", "locale", "ui"] //pass models to component
     }, {
@@ -74,3 +74,3 @@ component: Vizabi.Component.get("timeslider"),
       entities_geodomain.skipFilter = model.state.entities.dim === entities_geodomain.dim ||
-        model.state.entities_side.dim === entities_geodomain.dim;
+        model.state.entities_side.dim === entities_geodomain.dim || model.state.entities_age.dim === entities_geodomain.dim;
     }
@@ -89,6 +89,6 @@ },
       },
-      "buttons": ["colors", "inpercent", "side", "moreoptions", "fullscreen"],
+      "buttons": ["colors", "inpercent", "find", "side", "moreoptions", "fullscreen"],
       "dialogs": {
-        "popup": ["timedisplay", "colors", "side", "moreoptions"],
-        "sidebar": ["timedisplay", "colors", "show"],
+        "popup": ["timedisplay", "colors", "find", "side", "moreoptions"],
+        "sidebar": ["timedisplay", "colors", "find"],
         "moreoptions": ["opacity", "speed", "colors", "side", "presentation", "about"]
@@ -95,0 +95,0 @@ },

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

50372

decreased by-6.6%

Lines of code

1083

decreased by-7.44%

Dependency changes

• + Addedvizabi@0.21.0-22(transitive)

• - Removedvizabi@0.20.2(transitive)

• Updatedvizabi@^0.21.0-20