@fishawack/lab-d3 - npm Package Compare versions

Comparing version 2.6.5 to 2.7.0

package.json

 {
   "name": "@fishawack/lab-d3",
-  "version": "2.6.5",
+  "version": "2.7.0",
   "description": "Abstract layer built on top of d3",
@@ -5,0 +5,0 @@ "vars": {

README.md

@@ -47,2 +47,3 @@ ## Background
 var myBar = new Bar('#chart--bar')
+    .att()
     .init()
@@ -97,2 +98,20 @@ .data([
 
+## Rotated chart 
+
+Here are the key values that need setting when rotating a chart, these could be different depending on the chart you are using. Ensure you set sensible min/max values for the x axis if you still can't see the visualization
+
+```json
+{
+    scale: {
+        x: 'linear',
+        y: 'group'
+    },
+    plot: {
+        x: 'key',
+        y: 'value'
+    },
+    autoAxis: "y"
+}
+```
+
 ## Attributes
@@ -235,2 +254,5 @@
 
+### 2.7.0
+* Overhauled barstacked animation, stagger 0 will now make both bars come in together
+
 ### 2.6.5
@@ -237,0 +259,0 @@ * Fixed bug in valueFormat

src/charts/barstacked.js

 "use strict";
 
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread(); }
+
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance"); }
+
+function _iterableToArray(iter) { if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter); }
+
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } }
+
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
@@ -135,3 +143,3 @@
     _.width = local.levelWidth[levelIndex];
-    _.value = Shared.value(d, att);
+    _.value = +Shared.value(d, att);
     _.value += d.accumulated;
@@ -148,2 +156,4 @@ _.base = local.scale[_.sA](minValue);
   [['path', 'bar', function (element, d, i, status, name, _) {
+    var _this = this;
+
     if (status === 'enter') {
@@ -154,3 +164,3 @@ if (att.scale.x === 'group') {
         element.attr("d", Shared.roundedRect(_.base, 0, 0, _.width, 0, 0, 0, 0));
-      } else {}
+      }
     }
@@ -163,8 +173,8 @@
     if (status === 'anim') {
-      // dataLast used to detect initial draw of this element, if so need to animate the bar after the previous bar has finished
-      if (element.delay && !local.dataLast.get(this) || att.stagger && att.transitionSpeed) {
+      // Check if this is the bottom bar or a stacked one
+      var prev = this.parentNode && this.parentNode.previousSibling; // If the prev bar has a value saved then this isn't the first render, in which case never stagger as it doesn't work with stagger bar
+
+      if (prev && local.dataLast.get(prev.children[0]) == null && (element.delay || att.stagger && att.transitionSpeed)) {
         var delay = att.delaySpeed + _.index * att.stagger;
-        delay += att.transitionSpeed * i;
         element.delay(delay);
-        local.dataLast.set(this, true);
       }
@@ -194,3 +204,3 @@
           calcY = y;
-        } else {}
+        }
       } else {
@@ -205,5 +215,6 @@ if (att.scale.x === 'group') {
           calcY = _.base;
-        } else {}
-      }
+        }
+      } // All stacks but first should have no rounding
 
+
       if (i !== localData.length - 1) {
@@ -214,4 +225,5 @@ radius[0] = 0;
         radius[3] = 0;
-      }
+      } // Stop rounding being greater than height, if really small would cause the shape to collapse
 
+
       for (var j = radius.length; j--;) {
@@ -223,7 +235,29 @@ if (radius[j] > height) {
 
-      if (att.scale.x === 'group') {
-        element.attr("d", Shared.roundedRect(0, calcY, _.width, height, radius[0], radius[1], radius[2], radius[3]));
-      } else if (att.scale.y === 'group') {
-        element.attr("d", Shared.roundedRect(calcY, 0, height, _.width, radius[0], radius[1], radius[2], radius[3]));
-      } else {}
+      var position = att.scale.x === 'group' ? [0, calcY, _.width, height] : [calcY, 0, height, _.width];
+
+      if (element.attrTween) {
+        element.attrTween('d', function (d, i) {
+          var start = _.base;
+          var current = local.dataLast.get(_this);
+
+          var from = _this.getAttribute('d');
+
+          if (current != null) {
+            start = current;
+          } else if (prev) {
+            start = local.dataLast.get(prev.children[0]);
+            from = Shared.roundedRect.apply(Shared, _toConsumableArray(att.scale.x === 'group' ? [0, start, _.width, 0] : [start, 0, 0, _.width]).concat([0, 0, 0, 0]));
+          }
+
+          local.dataLast.set(_this, start);
+          var j = d3.interpolate(from, Shared.roundedRect.apply(Shared, position.concat([radius[0], radius[1], radius[2], radius[3]])));
+          var k = d3.interpolate(start, y);
+          return function (t) {
+            local.dataLast.set(_this, k(t));
+            return j(t);
+          };
+        });
+      } else {
+        element.attr("d", Shared.roundedRect.apply(Shared, position.concat([radius[0], radius[1], radius[2], radius[3]])));
+      }
     }
@@ -301,9 +335,10 @@ }], ['text', 'value', function (element, d, i, status, name, _) {
       // dataLast used to detect initial draw of this element, if so need to animate the bar after the previous bar has finished
-      if (element.delay && !local.dataLast.get(this) || att.stagger && att.transitionSpeed) {
+      if (element.delay && local.dataLast.get(this) == null && att.stagger && att.transitionSpeed) {
         var delay = att.delaySpeed + _.index * att.stagger;
-        delay += att.transitionSpeed * i;
         element.delay(delay);
-        local.dataLast.set(this, true);
-      }
+      } // Need to set this to 0 as local already being used and don't want to break current implementation
 
+
+      local.dataLast.set(this, 0);
+
       if (att.scale.x === 'group') {
@@ -340,9 +375,8 @@ element.attr('transform', "translate(" + offset.x + ", " + offset.y + ")").attr('opacity', 1);
       // dataLast used to detect initial draw of this element, if so need to animate the bar after the previous bar has finished
-      if (element.delay && !local.dataLast.get(this) || att.stagger && att.transitionSpeed) {
+      if (element.delay && local.dataLast.get(this) == null && att.stagger && att.transitionSpeed) {
         var delay = att.delaySpeed + _.index * att.stagger;
-        delay += att.transitionSpeed * i;
         element.delay(delay);
-        local.dataLast.set(this, true);
       }
 
+      local.dataLast.set(this, true);
       element.attr(_.sA + '1', _.max).attr(_.sA + '2', _.min);
@@ -371,9 +405,8 @@ }
       // dataLast used to detect initial draw of this element, if so need to animate the bar after the previous bar has finished
-      if (element.delay && !local.dataLast.get(this) || att.stagger && att.transitionSpeed) {
+      if (element.delay && local.dataLast.get(this) == null && att.stagger && att.transitionSpeed) {
         var delay = att.delaySpeed + _.index * att.stagger;
-        delay += att.transitionSpeed * i;
         element.delay(delay);
-        local.dataLast.set(this, true);
       }
 
+      local.dataLast.set(this, true);
       element.attr(_.sA + '1', _[minmax]).attr(_.sA + '2', _[minmax]);
@@ -455,8 +488,8 @@ }
     if (status === 'anim' && !levelIndex && i) {
-      if (element.delay && !local.dataLast.get(this) || att.stagger && att.transitionSpeed) {
-        var delay = att.delaySpeed + att.stagger;
-        delay += att.transitionSpeed * i;
+      if (element.delay && local.dataLast.get(this) == null && att.stagger && att.transitionSpeed) {
+        var delay = att.delaySpeed + i * att.stagger;
         element.delay(delay);
-        local.dataLast.set(this, true);
       }
+
+      local.dataLast.set(this, true);
     }
@@ -658,3 +691,3 @@
       for (var j = 0; j < i; j++) {
-        d.accumulated += Shared.value(data[j], att);
+        d.accumulated += +Shared.value(data[j], att);
       }
@@ -661,0 +694,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

Improved metrics

Total package byte prevSize

566116

increased by0.36%

Lines of code

5498

increased by0.33%

Number of lines in readme file

593

increased by3.85%

No dependency changes