liquid-tank - npm Package Compare versions

Comparing version 0.0.8 to 0.0.9

liquid-tank.js

@@ -6,2 +6,4 @@ (function() {
     this.options = options || {};
+    if (typeof this.options.fillStyle === "undefined")
+      this.options.fillStyle = "solid";
     if (typeof this.options.dark === "undefined") this.options.dark = false;
@@ -47,3 +49,3 @@ if (typeof this.options.min === "undefined") this.options.min = 0;
     _clearTank(this.canvas);
-    _drawTank(this.canvas, this.options);
+    _drawTank(this._getLatestValue(), this.canvas, this.options);
     return this;
@@ -53,8 +55,12 @@ };
   LiquidTank.prototype.setValue = function(value) {
-    var currentValue =
-      typeof this._originalValue !== "undefined"
-        ? this._originalValue
-        : this.options.min;
+    var currentValue = this._getLatestValue();
+    var initial = typeof this._originalValue === "undefined";
     this._originalValue = value;
-    _animateFromToValue(currentValue, value, this.canvas, this.options);
+    _animateFromToValue(
+      currentValue,
+      value,
+      this.canvas,
+      this.options,
+      initial
+    );
   };
@@ -69,2 +75,8 @@
 
+  LiquidTank.prototype._getLatestValue = function() {
+    return typeof this._originalValue !== "undefined"
+      ? this._originalValue
+      : this.options.min;
+  };
+
   /**
@@ -119,3 +131,3 @@ * Draws a rounded rectangle using the current state of the canvas.
 
-  function _animateFromToValue(fromValue, toValue, canvas, options) {
+  function _animateFromToValue(fromValue, toValue, canvas, options, initial) {
     var now = new Date().getTime();
@@ -132,3 +144,3 @@ var requestAnimationFrame =
       _clearTank(canvas);
-      _drawTank(canvas, options);
+      _drawTank(initial ? toValue : val, canvas, options);
       _drawTankFill(val, canvas, options);
@@ -155,3 +167,4 @@ _drawTextValue(toValue, canvas, options);
     return function() {
-      var context = this, args = arguments;
+      var context = this,
+        args = arguments;
       clearTimeout(timeout);
@@ -166,7 +179,10 @@ timeout = setTimeout(function() {
 
-  function _drawTank(canvas, options) {
+  function _drawTank(value, canvas, options) {
     var ctx = canvas.getContext("2d");
     var lineHeight = options._lineHeight;
     ctx.strokeStyle = _getBorderColor(options);
-    ctx.fillStyle = _getGradientFillStyle(canvas, options);
+    if (options.fillStyle === "solid")
+      ctx.fillStyle = _getSolidFillStyle(value, options);
+    if (options.fillStyle === "segmented")
+      ctx.fillStyle = _getSegmentedFillStyle(canvas, options);
     _drawRoundedRect(
@@ -260,3 +276,21 @@ canvas,
 
-  function _getGradientFillStyle(canvas, options) {
+  function _getSolidFillStyle(value, options) {
+    var color = _getBaseFillColor(options);
+    var segments = options.segments;
+    if (segments && segments.length) {
+      color = segments
+        .sort(function(s1, s2) {
+          return s1.startValue > s2.startValue;
+        })
+        .reduce(function(color, segment) {
+          if (value >= segment.startValue && value <= segment.endValue) {
+            return segment.color;
+          }
+          return color;
+        }, color);
+    }
+    return color;
+  }
+
+  function _getSegmentedFillStyle(canvas, options) {
     var ctx = canvas.getContext("2d");
@@ -263,0 +297,0 @@ var height = canvas.height - options._lineHeight - 8;

package.json

 {
   "name": "liquid-tank",
-  "version": "0.0.8",
+  "version": "0.0.9",
   "description": "",
@@ -5,0 +5,0 @@ "main": "liquid-tank.js",

README.md

@@ -12,2 +12,3 @@ # Liquid Tank
 |       segments | List of segments.                                            | Array    | [ ]     |
+|      fillStyle | Style of the tank fill. Either "solid" or "segmented".       | String   | "solid" |
 |           dark | When set to true it adjusts colors for a darker background.  | Boolean  | false   |
@@ -25,2 +26,3 @@ |     fontFamily | Font family for the displayed value                          | String   | Arial   |
     max: 100,
+    fillStyle: 'solid',
     segments: [
@@ -27,0 +29,0 @@ {

No alert changes

Improved metrics

Total package byte prevSize

16188

increased by7.87%

Lines of code

325

increased by10.92%

Number of lines in readme file

48

increased by4.35%

No dependency changes