@fishawack/lab-d3 - npm Package Compare versions

Comparing version 3.1.3 to 4.0.0

package.json

 {
   "name": "@fishawack/lab-d3",
-  "version": "3.1.3",
+  "version": "4.0.0",
   "description": "Abstract layer built on top of d3",
@@ -34,4 +34,4 @@ "scripts": {
     "@babel/preset-env": "7.3.1",
-    "@fishawack/core": "^8.9.2",
-    "@fishawack/lab-ui": "12.4.1",
+    "@fishawack/core": "^8.13.1",
+    "@fishawack/lab-ui": "^12.4.2",
     "rimraf": "2.6.3"
@@ -38,0 +38,0 @@ },

src/base.js

@@ -24,4 +24,5 @@ "use strict";
   this.store.att = {
-    colors: ['fill1', 'fill2', 'fill3', 'fill4'],
-    // Can be array ['fill1'] or object {0: 'fill1'}
+    primaryIndex: 0,
+    colors: ['color-1', 'color-2', 'color-3', 'color-4'],
+    // Can be array ['color-1'] or object {0: 'color-1'}
     colorsKey: 'key',
@@ -83,3 +84,9 @@ minmaxKey: 'key',
     },
-    chockData: false
+    chockData: false,
+    threshhold: {
+      bounds: [0.8, 0.6, 0],
+      ratio: true,
+      // When false will compare results without normalizing value so bounds are expected to be exact numbers
+      instant: false // Uses new value instantly rather than using the tweened value
+    }
   };
@@ -86,0 +93,0 @@ }

src/chart_map.js

 "use strict";
 
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
@@ -99,30 +105,2 @@ import Shared from './shared';
         }
-        var bounds = local.path.bounds(d);
-        if (d.properties.offset && d.properties.offset.anchor) {
-          var center = local.path.centroid(d);
-          if (!isNaN(center[0])) {
-            if (d.properties.offset) {
-              center[0] += d.properties.offset.x * local.geomWidth || 0;
-              center[1] += d.properties.offset.y * local.geomHeight || 0;
-            }
-          }
-          if (center[0] - att.anchorRadius < bounds[0][0]) {
-            bounds[0][0] = center[0] - att.anchorRadius;
-          }
-          if (center[1] - att.anchorRadius < bounds[0][1]) {
-            bounds[0][1] = center[1] - att.anchorRadius;
-          }
-          if (center[0] + att.anchorRadius > bounds[1][0]) {
-            bounds[1][0] = center[0] + att.anchorRadius;
-          }
-          if (center[1] + att.anchorRadius > bounds[1][1]) {
-            bounds[1][1] = center[1] + att.anchorRadius;
-          }
-        }
-        var dx = bounds[1][0] - bounds[0][0],
-          dy = bounds[1][1] - bounds[0][1],
-          x = (bounds[0][0] + bounds[1][0]) / 2,
-          y = (bounds[0][1] + bounds[1][1]) / 2,
-          scale = Math.max(1, Math.min(8, 0.9 / Math.max(dx / local.width, dy / local.height))),
-          translate = [local.width / 2 - scale * x, local.height / 2 - scale * y];
         var anim = local.chart;
@@ -134,3 +112,3 @@ if (att.transitionSpeed || att.delaySpeed) {
         }
-        anim.call(local.zoom.transform, d3.zoomIdentity.translate(translate[0], translate[1]).scale(scale));
+        anim.call(local.zoom.transform, that.zoomTo(d));
         if (att.spherical) {
@@ -171,3 +149,3 @@ var rotate = d3.interpolate(hold, [-point[0], -point[1]]);
       }
-      anim.call(local.zoom.transform, d3.zoomIdentity);
+      anim.call(local.zoom.transform, that.zoomTo());
       if (att.spherical) {
@@ -240,8 +218,2 @@ var country = local.geometry.selectAll(".feature path");
     },
-    threshhold: {
-      instant: false,
-      upper: 0.8,
-      middle: 0.6,
-      lower: 0
-    },
     hide: {
@@ -306,14 +278,4 @@ empty: true,
   local.projection.fitSize([local.width, local.height], local.geoJson);
+  chart.call(local.zoom.transform, this.zoomTo());
 
-  // Default start position of the map
-  var startPosition = [local.width * 0.5, local.height * 0.5];
-  if (att.zoom.lat || att.zoom.long) {
-    startPosition = local.projection([att.zoom.long, att.zoom.lat]);
-  }
-  var x = startPosition[0];
-  var y = startPosition[1];
-  var scale = att.zoom.min,
-    translate = [local.width / 2 - scale * x, local.height / 2 - scale * y];
-  local.chart.call(local.zoom.transform, d3.zoomIdentity.translate(translate[0], translate[1]).scale(att.zoom.min));
-
   // Setup features
@@ -354,46 +316,16 @@ var selection = local.geometry.selectAll(".feature").data(local.geoJson.features);
     }
-  }).transition().ease(d3['ease' + att.transitionType]).delay(att.delaySpeed).duration(att.transitionSpeed).tween("text", function (d, i) {
-    var that = this;
-    var _that = d3.select(that.parentNode);
-    _that.classed('missing', !data[d.id]);
-    if (att.threshhold.instant) {
-      var value = parseFloat(data[d.id] && data[d.id][att.plot.value] || 0);
-      var total = att.totalCount;
-      var normal = value / total;
-      if (normal > att.threshhold.upper) {
-        _that.classed('lower middle', false).classed('upper', true);
-      } else if (normal > att.threshhold.middle) {
-        _that.classed('lower upper', false).classed('middle', true);
-      } else if (normal > att.threshhold.lower) {
-        _that.classed('middle upper', false).classed('lower', true);
-      } else {
-        _that.classed('lower middle upper', false);
-      }
-    }
-    var j = d3.interpolate(local.dataLast.get(this) || 0, data[d.id] && data[d.id][att.plot.value] || 0);
+  }).transition().ease(d3['ease' + att.transitionType]).delay(att.delaySpeed).duration(att.transitionSpeed).tween("text", function (d) {
+    var node = this;
+    var select = d3.select(node.parentNode);
+    var datum = data[d.id];
+    var value = datum?.[att.plot.value] || 0;
+    var prev = local.dataLast.get(node) || 0;
+    var i = d3.interpolate(prev, value);
+    select.classed('labD3__missing', !datum);
+    att.threshhold.instant && Shared.applyThreshholds(value, select, att);
     return function (t) {
-      var value = parseFloat(j(t));
-      var total = att.totalCount;
-      var normal = value / total;
-      var percent = Math.round(normal * 100);
-      if (!att.threshhold.instant) {
-        if (normal > att.threshhold.upper) {
-          _that.classed('lower middle', false).classed('upper', true);
-        } else if (normal > att.threshhold.middle) {
-          _that.classed('lower upper', false).classed('middle', true);
-        } else if (normal > att.threshhold.lower) {
-          _that.classed('middle upper', false).classed('lower', true);
-        } else {
-          _that.classed('lower middle upper', false);
-        }
-      }
-      local.dataLast.set(that, value);
-      var textObject = {
-        value: value.toFixed(att.value.decimal),
-        percent: percent,
-        total: total,
-        id: d.id,
-        name: d.properties.name
-      };
-      that.textContent = Shared.formatKeys(att.value.structure, textObject);
+      var value = parseFloat(i(t));
+      att.threshhold.instant || Shared.applyThreshholds(value, select, att);
+      local.dataLast.set(node, value);
+      node[att.value.html ? 'innerHTML' : 'textContent'] = Shared.valueFormat(value, _objectSpread(_objectSpread({}, d), datum?.properties), att);
     };
@@ -531,33 +463,2 @@ }).attr('opacity', function (d, i) {
 }
-Chart_Map.prototype.resize = function (value) {
-  var local = this.store,
-    att = local.att;
-  Chart.prototype.resize.call(this);
-  if (att.zoom.click && local.active) {
-    this.renderSync();
-    var d = local.active;
-    var bounds = local.path.bounds(d),
-      dx = bounds[1][0] - bounds[0][0],
-      dy = bounds[1][1] - bounds[0][1],
-      x = (bounds[0][0] + bounds[1][0]) / 2,
-      y = (bounds[0][1] + bounds[1][1]) / 2,
-      scale = Math.max(1, Math.min(8, 0.9 / Math.max(dx / local.width, dy / local.height))),
-      translate = [local.width / 2 - scale * x, local.height / 2 - scale * y];
-    local.chart.call(local.zoom.transform, d3.zoomIdentity.translate(translate[0], translate[1]).scale(scale));
-  } else {
-    if (local.inited) {
-      var save = {
-        transitionSpeed: att.transitionSpeed,
-        delaySpeed: att.delaySpeed
-      };
-      this.att({
-        transitionSpeed: 0,
-        delaySpeed: 0
-      });
-      local.reset();
-      this.att(save);
-    }
-  }
-  return this;
-};
 Chart_Map.prototype.zoomOut = function () {
@@ -587,2 +488,45 @@ var local = this.store,
 };
+Chart_Map.prototype.zoomTo = function (d) {
+  var local = this.store,
+    att = local.att;
+  var scale, x, y;
+  if (d) {
+    var bounds = local.path.bounds(d);
+    if (d.properties.offset && d.properties.offset.anchor) {
+      var center = local.path.centroid(d);
+      if (!isNaN(center[0])) {
+        if (d.properties.offset) {
+          center[0] += d.properties.offset.x * local.geomWidth || 0;
+          center[1] += d.properties.offset.y * local.geomHeight || 0;
+        }
+      }
+      if (center[0] - att.anchorRadius < bounds[0][0]) {
+        bounds[0][0] = center[0] - att.anchorRadius;
+      }
+      if (center[1] - att.anchorRadius < bounds[0][1]) {
+        bounds[0][1] = center[1] - att.anchorRadius;
+      }
+      if (center[0] + att.anchorRadius > bounds[1][0]) {
+        bounds[1][0] = center[0] + att.anchorRadius;
+      }
+      if (center[1] + att.anchorRadius > bounds[1][1]) {
+        bounds[1][1] = center[1] + att.anchorRadius;
+      }
+    }
+    var dx = bounds[1][0] - bounds[0][0],
+      dy = bounds[1][1] - bounds[0][1];
+    x = (bounds[0][0] + bounds[1][0]) / 2, y = (bounds[0][1] + bounds[1][1]) / 2, scale = Math.max(1, Math.min(8, 0.9 / Math.max(dx / local.width, dy / local.height)));
+  } else {
+    // Default start position of the map
+    var startPosition = [local.width * 0.5, local.height * 0.5];
+    if (att.zoom.lat || att.zoom.long) {
+      startPosition = local.projection([att.zoom.long, att.zoom.lat]);
+    }
+    x = startPosition[0];
+    y = startPosition[1];
+    scale = att.zoom.min;
+  }
+  var translate = [local.width / 2 - scale * x, local.height / 2 - scale * y];
+  return d3.zoomIdentity.translate(translate[0], translate[1]).scale(scale);
+};
 Chart_Map.prototype.reset = function (node, d) {
@@ -589,0 +533,0 @@ this.store.reset(node, d);

src/chart.js

@@ -130,5 +130,4 @@ "use strict";
     formatDate: d3.timeFormat('%Y-%m-%d'),
-    primaryIndex: null,
     symbols: ['Cross'],
-    symbolColors: ['fill2'],
+    symbolColors: ['color-2'],
     symbolsSize: 100,
@@ -280,3 +279,3 @@ symbolsRatio: false,
   });
-  var enter = selection.enter().append("g").attr('class', 'level--' + levelIndex).attr('opacity', att.startOpacity);
+  var enter = selection.enter().append("g").attr('opacity', att.startOpacity);
 
@@ -287,5 +286,5 @@ // Insert in elements at front rather than appending to end
   }
-  var update = enter.merge(selection).each(function (d, i) {
-    // Used to get parent indexes for aniamtions/colors etc.
-    this.index = i;
+  var update = enter.merge(selection).attr('class', function (d, i) {
+    this.index = i; // Used to get parent indexes for aniamtions/colors etc.
+    return "level--".concat(levelIndex).concat(att.primaryIndex === levelIndex ? " ".concat(Shared.getKey(att, d, i, 'colors')) : '');
   });
@@ -292,0 +291,0 @@ var anim = update;

src/charts/area.js

@@ -31,3 +31,4 @@ "use strict";
       }
-    }
+    },
+    primaryIndex: 1
   });
@@ -79,3 +80,3 @@ }
     }
-    _.index = Shared.getPrimaryIndex(element, att.primaryIndex, local.levels, levelIndex);
+    _.index = Shared.getPrimaryIndex(element, att.primaryIndex);
   };
@@ -98,6 +99,2 @@
     }
-    if (status === 'update') {
-      var prevColor = element.attr('class').split(':').slice(1);
-      element.classed(prevColor, false).classed('area__stroke : ' + Shared.getKey(att, d, _.index, 'colors'), true);
-    }
     if (status === 'anim') {
@@ -104,0 +101,0 @@ if (att.stagger && att.transitionSpeed) {

src/charts/bar.js

@@ -57,3 +57,3 @@ "use strict";
     _.min = d.min ? local.scale[_.sA](d.min) : _.y;
-    _.index = Shared.getPrimaryIndex(element, att.primaryIndex, local.levels, levelIndex);
+    _.index = Shared.getPrimaryIndex(element, att.primaryIndex);
   };
@@ -71,3 +71,3 @@
     if (status === 'enter' || status === 'update') {
-      element.attr('class', name + ' ' + Shared.getKey(att, d, _.index, 'colors')).attr('opacity', 1);
+      element.attr('opacity', 1);
     }
@@ -180,5 +180,2 @@ if (status === 'anim') {
     }
-    if (status === 'enter' || status === 'update') {
-      element.attr('class', name + ' ' + Shared.getKey(att, d, _.index, 'colors'));
-    }
     if (status === 'anim') {
@@ -185,0 +182,0 @@ if (att.stagger && att.transitionSpeed) {

src/charts/barstacked.js

@@ -35,4 +35,3 @@ "use strict";
       x: 'group'
-    },
-    primaryIndex: 0
+    }
   });
@@ -121,3 +120,3 @@ }
     _.min = d.min ? local.scale[_.sA](d.min) : _.y;
-    _.index = Shared.getPrimaryIndex(element, att.primaryIndex, local.levels, levelIndex);
+    _.index = Shared.getPrimaryIndex(element, att.primaryIndex);
   };
@@ -136,3 +135,3 @@
     if (status === 'enter' || status === 'update') {
-      element.attr('class', name + ' ' + Shared.getKey(att, d, _.index, 'colors')).attr('opacity', 1);
+      element.attr('opacity', 1);
     }
@@ -275,5 +274,2 @@ if (status === 'anim') {
     }
-    if (status === 'enter' || status === 'update') {
-      element.attr('class', name + ' ' + Shared.getKey(att, d, _.index, 'colors'));
-    }
     if (status === 'anim') {
@@ -280,0 +276,0 @@ // dataLast used to detect initial draw of this element, if so need to animate the bar after the previous bar has finished

src/charts/block.js

@@ -87,3 +87,3 @@ "use strict";
     _.y = base - blockWidth * parseInt((_.value - 1) / local.baseBlock, 10);
-    _.index = Shared.getPrimaryIndex(element, att.primaryIndex, local.levels, levelIndex);
+    _.index = Shared.getPrimaryIndex(element, att.primaryIndex);
   };
@@ -106,5 +106,2 @@
     }
-    if (status === 'enter' || status === 'update') {
-      element.attr('class', name + ' ' + Shared.getKey(att, d, _.index, 'colors'));
-    }
     if (status === 'anim') {
@@ -149,3 +146,3 @@ if (att.stagger && att.transitionSpeed) {
   enter = selection.enter().append('rect').attr('class', function (d, i) {
-    return 'level--0--block ' + Shared.getKey(att, d, d.i, 'colors');
+    return 'level--0--block';
   }).attr('opacity', 0).attr('y', 0).attr('width', 0).attr('height', 0).attr('x', function (d, i) {
@@ -152,0 +149,0 @@ return blockWidth * (i % local.baseBlock) + blockGap + (blockWidth - blockGapDouble) * 0.5;

src/charts/box.js

@@ -46,3 +46,3 @@ "use strict";
     _.xCenter = _.x + _.width * 0.5;
-    _.index = Shared.getPrimaryIndex(element, att.primaryIndex, local.levels, levelIndex);
+    _.index = Shared.getPrimaryIndex(element, att.primaryIndex);
   };
@@ -56,3 +56,3 @@
     if (status === 'enter' || status === 'update') {
-      element.attr('class', name + ' ' + Shared.getKey(att, d, _.index, 'colors')).attr('opacity', 1);
+      element.attr('opacity', 1);
     }
@@ -59,0 +59,0 @@ if (status === 'anim') {

src/charts/dial.js

@@ -147,6 +147,2 @@ "use strict";
     }
-    if (status === 'update') {
-      var color = Shared.getKey(att, d, i, 'colors');
-      element.attr('class', name + ' ' + color);
-    }
     var nw = local.radius * att.needle.width;
@@ -153,0 +149,0 @@ var np = nw * att.needle.pin;

src/charts/gantt.js

@@ -153,3 +153,3 @@ "use strict";
       element.attr('class', function () {
-        var color = Shared.getKey(att, d, i, 'colors');
+        var color = '';
         if (_.x === 0 && _.width === 100) {
@@ -156,0 +156,0 @@ color = 'fade';

src/charts/harveyball.js

@@ -64,5 +64,2 @@ "use strict";
   [['path', 'slice', function (element, d, i, status, name, _) {
-    if (status === 'update') {
-      element.attr('class', name + ' ' + Shared.getKey(att, d, i, 'colors'));
-    }
     if (status === 'anim') {
@@ -69,0 +66,0 @@ if (element.attrTween) {

src/charts/key.js

@@ -53,5 +53,3 @@ "use strict";
   update.attr('class', function (d, i) {
-    // Pass children[0] just to keep function call consistent with chart.js buildLevel calls
-    var index = Shared.getPrimaryIndex(this.children[0], att.primaryIndex, local.levels, levelIndex);
-    return 'level--' + levelIndex + ' ' + Shared.getKey(att, d, index, 'colors');
+    return "level--".concat(levelIndex).concat(att.primaryIndex === levelIndex ? " ".concat(Shared.getKey(att, d, i, 'colors')) : '');
   });
@@ -58,0 +56,0 @@ selection.exit().remove();

src/charts/line.js

@@ -32,3 +32,4 @@ "use strict";
       }
-    }
+    },
+    primaryIndex: 1
   });
@@ -72,3 +73,3 @@ }
     _.width = local.plotWidth[_.pA];
-    _.index = Shared.getPrimaryIndex(element, att.primaryIndex, local.levels, levelIndex);
+    _.index = Shared.getPrimaryIndex(element, att.primaryIndex);
   };
@@ -105,3 +106,3 @@
     if (status === 'update') {
-      element.attr('class', name + ' ' + Shared.getKey(att, d, _.index, 'colors')).attr('d', d3.symbol().type(d3['symbol' + symbol]).size(att.symbolsSize * (att.symbolsRatio ? att.width : 1)));
+      element.attr('d', d3.symbol().type(d3['symbol' + symbol]).size(att.symbolsSize * (att.symbolsRatio ? att.width : 1)));
     }
@@ -130,3 +131,3 @@ if (status === 'anim') {
     if (status === 'enter' || status === 'update') {
-      element.attr('class', name + ' ' + Shared.getKey(att, d, _.index, 'colors'))[att.value.html ? 'html' : 'text'](Shared.valueFormat(_.value, d, att));
+      element[att.value.html ? 'html' : 'text'](Shared.valueFormat(_.value, d, att));
     }
@@ -188,3 +189,3 @@ if (status === 'anim') {
     }
-    _.index = Shared.getPrimaryIndex(element, att.primaryIndex, local.levels, levelIndex);
+    _.index = Shared.getPrimaryIndex(element, att.primaryIndex);
   };
@@ -227,5 +228,4 @@
     }
-    if (status === 'update') {
-      var prevColor = element.attr('class').split(':').slice(1);
-      element.classed(prevColor, false).classed('line__stroke : ' + Shared.getKey(att, d, _.index, 'colors') + '-stroked', true);
+    if (status === 'enter' || status === 'update') {
+      element.attr('class', "".concat(name, " line__stroke"));
     }
@@ -232,0 +232,0 @@ if (status === 'anim') {

src/charts/pie.js

@@ -40,5 +40,2 @@ "use strict";
   [['path', 'slice', function (element, d, i, status, name, _) {
-    if (status === 'update') {
-      element.attr('class', name + ' ' + Shared.getKey(att, d, i, 'colors'));
-    }
     if (status === 'anim') {
@@ -45,0 +42,0 @@ if (element.attrTween) {

src/charts/ring.js

@@ -37,3 +37,2 @@ "use strict";
     },
-    primaryIndex: 0,
     autoAxis: null,
@@ -75,3 +74,3 @@ positions: null,
     }
-    _.index = Shared.getPrimaryIndex(element, att.primaryIndex, local.levels, levelIndex);
+    _.index = Shared.getPrimaryIndex(element, att.primaryIndex);
     _.index = localData.length - 1 - _.index;
@@ -119,3 +118,3 @@ _.size = d.size != null ? d.size : 0.5;
     if (status === 'update') {
-      element.attr('class', name + ' ' + Shared.getKey(att, d, _.index, 'colors') + '-stroked').attr('stroke-dasharray', d.value ? null : dashStyle).style('transition-duration', att.transitionSpeed * 0.001 + 's');
+      element.attr('class', "".concat(name, " line__stroke")).attr('stroke-dasharray', d.value ? null : dashStyle).style('transition-duration', att.transitionSpeed * 0.001 + 's');
     }
@@ -122,0 +121,0 @@ if (status === 'anim') {

src/charts/scatter.js

@@ -81,3 +81,3 @@ "use strict";
     }
-    _.index = Shared.getPrimaryIndex(element, att.primaryIndex, local.levels, levelIndex);
+    _.index = Shared.getPrimaryIndex(element, att.primaryIndex);
   };
@@ -112,3 +112,3 @@
     if (status === 'update') {
-      element.attr('class', name + ' ' + Shared.getKey(att, d, _.index, 'colors')).attr('d', d3.symbol().type(d3['symbol' + Shared.getKey(att, d, localIndex, 'symbols')]).size((d.symbolsSize || att.symbolsSize) * (att.symbolsRatio ? att.width : 1)));
+      element.attr('d', d3.symbol().type(d3['symbol' + Shared.getKey(att, d, localIndex, 'symbols')]).size((d.symbolsSize || att.symbolsSize) * (att.symbolsRatio ? att.width : 1)));
     }
@@ -136,3 +136,3 @@ if (status === 'anim') {
     if (status === 'enter' || status === 'update') {
-      element.attr('class', name + ' ' + Shared.getKey(att, d, _.index, 'colors'))[att.value.html ? 'html' : 'text'](Shared.valueFormat(_.value, d, att));
+      element[att.value.html ? 'html' : 'text'](Shared.valueFormat(_.value, d, att));
     }
@@ -139,0 +139,0 @@ if (status === 'anim') {

src/charts/text.js

@@ -17,9 +17,3 @@ "use strict";
   this.store.chart.classed(this.store.name, true);
-  this.att({
-    threshhold: {
-      upper: 0.8,
-      middle: 0.6,
-      lower: 0
-    }
-  });
+  this.att({});
   Shared.extend(this.store, {});
@@ -34,19 +28,13 @@ }
   chart.transition().ease(d3['ease' + att.transitionType]).delay(att.delaySpeed).duration(att.transitionSpeed).tween("text", function () {
-    var that = this;
-    var _that = d3.select(this);
-    var i = d3.interpolate(local.dataLast.get(chart) || 0, data[0] && data[0].value || 0);
+    var node = this;
+    var select = d3.select(this);
+    var value = data[0] && data[0].value || 0;
+    var prev = local.dataLast.get(node) || 0;
+    var i = d3.interpolate(prev, value);
+    att.threshhold.instant && Shared.applyThreshholds(value, select, att);
     return function (t) {
       var value = parseFloat(i(t));
-      var total = att.totalCount;
-      var normal = value / total;
-      var percent = normal * 100;
-      if (normal > att.threshhold.upper) {
-        _that.classed('labD3__lower labD3__middle', false).classed('labD3__upper', true);
-      } else if (normal > att.threshhold.middle) {
-        _that.classed('labD3__lower labD3__upper', false).classed('labD3__middle', true);
-      } else if (normal > att.threshhold.lower) {
-        _that.classed('labD3__middle labD3__upper', false).classed('labD3__lower', true);
-      }
-      local.dataLast.set(chart, value);
-      that[att.value.html ? 'innerHTML' : 'textContent'] = Shared.valueFormat(value, data[0], att);
+      att.threshhold.instant || Shared.applyThreshholds(value, select, att);
+      local.dataLast.set(node, value);
+      node[att.value.html ? 'innerHTML' : 'textContent'] = Shared.valueFormat(value, data[0], att);
     };
@@ -53,0 +41,0 @@ });

src/charts/tumbler.js

@@ -18,7 +18,2 @@ "use strict";
   this.att({
-    threshhold: {
-      upper: 0.8,
-      middle: 0.6,
-      lower: 0
-    },
     leadingZeros: 0
@@ -51,17 +46,11 @@ });
   chart.transition().ease(d3['ease' + att.transitionType]).delay(att.delaySpeed).duration(att.transitionSpeed).tween("text", function () {
-    var that = this;
-    var _that = d3.select(this);
-    var i = d3.interpolate(local.dataLast.get(chart) || 0, data[0] && data[0].value || 0);
+    var node = this;
+    var select = d3.select(this);
+    var prev = local.dataLast.get(node) || 0;
+    var i = d3.interpolate(prev, value);
+    att.threshhold.instant && Shared.applyThreshholds(value, select, att);
     return function (t) {
       var value = parseFloat(i(t));
-      var total = att.totalCount;
-      var normal = value / total;
-      if (normal > att.threshhold.upper) {
-        _that.classed('labD3__lower labD3__middle', false).classed('labD3__upper', true);
-      } else if (normal > att.threshhold.middle) {
-        _that.classed('labD3__lower labD3__upper', false).classed('labD3__middle', true);
-      } else if (normal > att.threshhold.lower) {
-        _that.classed('labD3__middle labD3__upper', false).classed('labD3__lower', true);
-      }
-      local.dataLast.set(chart, value);
+      att.threshhold.instant || Shared.applyThreshholds(value, select, att);
+      local.dataLast.set(node, value);
     };
@@ -68,0 +57,0 @@ });

src/shared.js

@@ -47,8 +47,9 @@ "use strict";
   },
-  valueFormat: function valueFormat(value, d, att) {
+  valueFormat: function valueFormat(value) {
+    var d = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    var att = arguments.length > 2 ? arguments[2] : undefined;
     var type = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'value';
     value = type === 'value' ? value : d.value;
-    var total = att.totalCount;
-    var normal = value / total;
-    var percent = normal * 100;
+    var total = d.total || att.totalCount;
+    var percent = d.percent || value / total * 100;
     var textObject = {
@@ -69,3 +70,3 @@ value: value,
         if (typeof textObject[key] === 'number') {
-          var format = d && d.format && d.format[key] || att[type].format[key];
+          var format = d.format?.[key] || att[type].format[key];
           if (format) {
@@ -77,3 +78,3 @@ textObject[key] = (typeof format === "function" ? format(d, key, textObject) : d3.format(format))(textObject[key]);
     }
-    var structure = d && d.structure || att[type].structure;
+    var structure = d.structure || att[type].structure;
     if (typeof structure === "function") {
@@ -327,10 +328,4 @@ structure = structure(value, d, att);
   },
-  getPrimaryIndex: function getPrimaryIndex(element, primaryIndex, levels, levelIndex) {
+  getPrimaryIndex: function getPrimaryIndex(element, primaryIndex) {
     var tempElement = element.parentNode;
-
-    // Grab the set primaryIndex or use the max level depth
-    primaryIndex = primaryIndex == null ? levels : primaryIndex;
-
-    // Minus the level index from the max levels so you don't move up past the root
-    primaryIndex -= levelIndex;
     for (var i = 0; i < primaryIndex; i++) {
@@ -343,4 +338,18 @@ tempElement = tempElement.parentNode.parentNode;
     return seedrandom(seed);
+  },
+  applyThreshholds: function applyThreshholds(value, node, _ref) {
+    var _ref$threshhold = _ref.threshhold,
+      ratio = _ref$threshhold.ratio,
+      bounds = _ref$threshhold.bounds,
+      totalCount = _ref.totalCount;
+    var normal = value / (ratio ? totalCount : 1);
+    var index = bounds.findIndex(function (d) {
+      return normal > d;
+    });
+    node.classed(bounds.reduce(function (sum, b, i) {
+      return sum + "labD3__threshhold-".concat(i, " ");
+    }, ''), false);
+    index > -1 && node.classed("labD3__threshhold-".concat(index), true);
   }
 };
 export default Shared;

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

558134

decreased by-0.66%

Lines of code

5550

decreased by-1.49%

No dependency changes