dailychart - npm Package Compare versions

Comparing version 1.2.2 to 1.2.3

dist/dailychart.js

@@ -25,3 +25,3 @@ ;(function(root, factory) {
     if (!el) {
-      throw 'Dailychart.js: el is not defined';
+      throw new Error('Dailychart.js: el is not defined');
     } else {
@@ -54,45 +54,45 @@ this.element = el;
 
-    this._normalize();
-    this._translate();
-    this._draw();
+    this.normalize().translate().draw();
   }
 
   _createClass(Dailychart, [{
-    key: '_normalize',
-    value: function _normalize() {
-      var _this = this;
-
+    key: 'normalize',
+    value: function normalize() {
+      var min = Math.min.apply(null, this.values.concat([this.previous]));
       var max = Math.max.apply(null, this.values.concat([this.previous]));
-      var min = Math.min.apply(null, this.values.concat([this.previous]));
-      var k = max === min ? 0 : (this.height - this.options.lineWidth * 2) / (max - min);
-      var shift = k === 0 ? this.height / 2 : 0;
 
       this.values = this.values.map(function (value) {
-        return (value - min) * k + _this.options.lineWidth + shift;
+        return (value - min) / (max - min);
       });
-      this.previous = (this.previous - min) * k + this.options.lineWidth + shift;
+      this.previous = (this.previous - min) / (max - min);
+
+      return this;
     }
   }, {
-    key: '_translate',
-    value: function _translate() {
-      var _this2 = this;
+    key: 'translate',
+    value: function translate() {
+      var _this = this;
 
+      var max = Math.max.apply(null, this.values.concat([this.previous]));
+      var k = this.height / max;
+
       this.values = this.values.map(function (value) {
-        return _this2.height - value;
+        return _this.height - value * k;
       });
-      this.previous = this.height - this.previous;
+      this.previous = this.height - this.previous * k;
+
+      return this;
     }
   }, {
-    key: '_id',
-    value: function _id() {
+    key: 'id',
+    value: function id() {
       return Math.random().toString(36).substr(2, 9);
     }
   }, {
-    key: '_path',
-    value: function _path() {
+    key: 'path',
+    value: function path() {
       var inc = this.width / (this.length - 1);
-      var i = 0,
-          d = [];
+      var d = [];
 
-      for (; i < this.values.length; i++) {
+      for (var i = 0; i < this.values.length; i++) {
         d.push(i === 0 ? 'M' : 'L');
@@ -106,15 +106,4 @@ d.push(i * inc);
   }, {
-    key: '_close',
-    value: function _close(path, flag) {
-      if (flag === 'positive') {
-        path += ' V ' + this.height + ' H 0 Z';
-      }
-      if (flag === 'negative') {
-        path += ' V 0 H 0 Z';
-      }
-      return path;
-    }
-  }, {
-    key: '_draw',
-    value: function _draw() {
+    key: 'draw',
+    value: function draw() {
       var _options = this.options,
@@ -128,22 +117,22 @@ lineWidth = _options.lineWidth,
 
-      var id = this._id();
+      var id = this.id();
       var idPositive = 'dailychart-' + id + '-positive';
       var idNegative = 'dailychart-' + id + '-negative';
 
-      var d = this._path();
-      var dPositive = this._close(d, 'positive');
-      var dNegative = this._close(d, 'negative');
+      var d = this.path();
+      var dPositive = d + ' V ' + this.height + ' H 0 Z';
+      var dNegative = d + ' V 0 H 0 Z';
 
-      var svg = this._svgElement();
-      var linePrevious = this._lineElement(this.previous);
+      var svg = this.svgElement();
+      var linePrevious = this.lineElement(this.previous);
 
-      var pathPositive = this._pathElement(d, lineWidth, colorPositive, '', idPositive);
-      var areaPositive = this._pathElement(dPositive, 0, '', fillPositive, idPositive);
-      var clipPositive = this._clipElement(idPositive);
-      var rectPositive = this._rectElement(0, 0, this.width, this.previous);
+      var pathPositive = this.pathElement(d, lineWidth, colorPositive, '', idPositive);
+      var areaPositive = this.pathElement(dPositive, 0, '', fillPositive, idPositive);
+      var clipPositive = this.clipElement(idPositive);
+      var rectPositive = this.rectElement(0, 0, this.width, this.previous);
 
-      var pathNegative = this._pathElement(d, lineWidth, colorNegative, '', idNegative);
-      var areaNegative = this._pathElement(dNegative, 0, '', fillNegative, idNegative);
-      var clipNegative = this._clipElement(idNegative);
-      var rectNegative = this._rectElement(0, this.previous, this.width, this.height - this.previous);
+      var pathNegative = this.pathElement(d, lineWidth, colorNegative, '', idNegative);
+      var areaNegative = this.pathElement(dNegative, 0, '', fillNegative, idNegative);
+      var clipNegative = this.clipElement(idNegative);
+      var rectNegative = this.rectElement(0, this.previous, this.width, this.height - this.previous);
 
@@ -165,4 +154,4 @@ clipPositive.appendChild(rectPositive);
   }, {
-    key: '_svgElement',
-    value: function _svgElement() {
+    key: 'svgElement',
+    value: function svgElement() {
       var svg = document.createElementNS(SVG_NS, 'svg');
@@ -177,4 +166,4 @@
   }, {
-    key: '_lineElement',
-    value: function _lineElement(y) {
+    key: 'lineElement',
+    value: function lineElement(y) {
       var line = document.createElementNS(SVG_NS, 'line');
@@ -194,4 +183,4 @@
   }, {
-    key: '_pathElement',
-    value: function _pathElement(d, width, stroke, fill, clipId) {
+    key: 'pathElement',
+    value: function pathElement(d, width, stroke, fill, clipId) {
       var path = document.createElementNS(SVG_NS, 'path');
@@ -209,4 +198,4 @@
   }, {
-    key: '_rectElement',
-    value: function _rectElement(x, y, w, h) {
+    key: 'rectElement',
+    value: function rectElement(x, y, w, h) {
       var rect = document.createElementNS(SVG_NS, 'rect');
@@ -222,4 +211,4 @@
   }, {
-    key: '_clipElement',
-    value: function _clipElement(id) {
+    key: 'clipElement',
+    value: function clipElement(id) {
       var clip = document.createElementNS(SVG_NS, 'clipPath');
@@ -275,5 +264,3 @@
 };
-
-Dailychart.version = '1.2.2';
 return Dailychart;
 }));

dist/dailychart.min.js

@@ -1,1 +0,1 @@
-!function(t,e){"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?module.exports=e():t.Dailychart=e()}(this,function(){"use strict";var t=function(){function s(t,e){for(var i=0;i<e.length;i++){var s=e[i];s.enumerable=s.enumerable||!1,s.configurable=!0,"value"in s&&(s.writable=!0),Object.defineProperty(t,s.key,s)}}return function(t,e,i){return e&&s(t.prototype,e),i&&s(t,i),t}}();var r="http://www.w3.org/2000/svg",e=function(){function i(t,e){if(function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,i),this.options=i.extend({},this.defaultOptions,e),!t)throw"Dailychart.js: el is not defined";this.element=t,this.width=this.options.width||t.offsetWidth,this.height=this.options.height||t.offsetHeight,t.getAttribute("data-dailychart-values")&&0!==t.getAttribute("data-dailychart-values").length&&(this.values=t.getAttribute("data-dailychart-values").split(",").map(Number),this.values.length<2||(t.getAttribute("data-dailychart-length")&&0!==t.getAttribute("data-dailychart-length").length?this.length=+t.getAttribute("data-dailychart-length"):this.length=this.values.length,t.getAttribute("data-dailychart-close")&&0!==t.getAttribute("data-dailychart-close").length?this.previous=+t.getAttribute("data-dailychart-close"):this.previous=this.values[0],this._normalize(),this._translate(),this._draw()))}return t(i,[{key:"_normalize",value:function(){var e=this,t=Math.max.apply(null,this.values.concat([this.previous])),i=Math.min.apply(null,this.values.concat([this.previous])),s=t===i?0:(this.height-2*this.options.lineWidth)/(t-i),n=0===s?this.height/2:0;this.values=this.values.map(function(t){return(t-i)*s+e.options.lineWidth+n}),this.previous=(this.previous-i)*s+this.options.lineWidth+n}},{key:"_translate",value:function(){var e=this;this.values=this.values.map(function(t){return e.height-t}),this.previous=this.height-this.previous}},{key:"_id",value:function(){return Math.random().toString(36).substr(2,9)}},{key:"_path",value:function(){for(var t=this.width/(this.length-1),e=0,i=[];e<this.values.length;e++)i.push(0===e?"M":"L"),i.push(e*t),i.push(this.values[e]);return i.join(" ")}},{key:"_close",value:function(t,e){return"positive"===e&&(t+=" V "+this.height+" H 0 Z"),"negative"===e&&(t+=" V 0 H 0 Z"),t}},{key:"_draw",value:function(){var t=this.options,e=t.lineWidth,i=t.colorPositive,s=t.colorNegative,n=t.fillPositive,h=t.fillNegative,r=this._id(),a="dailychart-"+r+"-positive",l="dailychart-"+r+"-negative",o=this._path(),u=this._close(o,"positive"),d=this._close(o,"negative"),p=this._svgElement(),c=this._lineElement(this.previous),v=this._pathElement(o,e,i,"",a),f=this._pathElement(u,0,"",n,a),g=this._clipElement(a),m=this._rectElement(0,0,this.width,this.previous),y=this._pathElement(o,e,s,"",l),b=this._pathElement(d,0,"",h,l),A=this._clipElement(l),_=this._rectElement(0,this.previous,this.width,this.height-this.previous);g.appendChild(m),A.appendChild(_),p.appendChild(g),p.appendChild(A),p.appendChild(c),p.appendChild(f),p.appendChild(b),p.appendChild(v),p.appendChild(y),this.element.appendChild(p)}},{key:"_svgElement",value:function(){var t=document.createElementNS(r,"svg");return t.setAttributeNS("http://www.w3.org/2000/xmlns/","xmlns",r),t.setAttribute("width",this.width),t.setAttribute("height",this.height),t}},{key:"_lineElement",value:function(t){var e=document.createElementNS(r,"line");return e.setAttribute("x1",0),e.setAttribute("y1",t),e.setAttribute("x2",this.width),e.setAttribute("y2",t),e.setAttribute("stroke",this.options.closeColor),e.setAttribute("stroke-width",this.options.closeWidth),e.style.shapeRendering="crispEdges",e}},{key:"_pathElement",value:function(t,e,i,s,n){var h=document.createElementNS(r,"path");return h.setAttribute("d",t),h.setAttribute("fill",""===s?"none":s),h.setAttribute("stroke-width",e),h.setAttribute("stroke-linejoin","bevel"),h.setAttribute("stroke",""===i?"none":i),h.setAttribute("clip-path","url(#"+n+")"),h}},{key:"_rectElement",value:function(t,e,i,s){var n=document.createElementNS(r,"rect");return n.setAttribute("x",t),n.setAttribute("y",e),n.setAttribute("width",i),n.setAttribute("height",s),n}},{key:"_clipElement",value:function(t){var e=document.createElementNS(r,"clipPath");return e.setAttribute("id",t),e}}],[{key:"extend",value:function(t){for(var e=arguments.length,i=Array(1<e?e-1:0),s=1;s<e;s++)i[s-1]=arguments[s];var n=i,h=Array.isArray(n),r=0;for(n=h?n:n[Symbol.iterator]();;){var a;if(h){if(r>=n.length)break;a=n[r++]}else{if((r=n.next()).done)break;a=r.value}var l=a;for(var o in l){var u=l[o];t[o]=u}}return t}}]),i}();return e.prototype.defaultOptions={width:void 0,height:void 0,lineWidth:1,colorPositive:"#33AE45",colorNegative:"#EB5757",fillPositive:"",fillNegative:"",closeWidth:1,closeColor:"#e0e0e0"},e.version="1.2.2",e});
+!function(t,e){"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?module.exports=e():t.Dailychart=e()}(this,function(){"use strict";var t=function(){function r(t,e){for(var i=0;i<e.length;i++){var r=e[i];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}return function(t,e,i){return e&&r(t.prototype,e),i&&r(t,i),t}}();var h="http://www.w3.org/2000/svg",e=function(){function i(t,e){if(function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,i),this.options=i.extend({},this.defaultOptions,e),!t)throw new Error("Dailychart.js: el is not defined");this.element=t,this.width=this.options.width||t.offsetWidth,this.height=this.options.height||t.offsetHeight,t.getAttribute("data-dailychart-values")&&0!==t.getAttribute("data-dailychart-values").length&&(this.values=t.getAttribute("data-dailychart-values").split(",").map(Number),this.values.length<2||(t.getAttribute("data-dailychart-length")&&0!==t.getAttribute("data-dailychart-length").length?this.length=+t.getAttribute("data-dailychart-length"):this.length=this.values.length,t.getAttribute("data-dailychart-close")&&0!==t.getAttribute("data-dailychart-close").length?this.previous=+t.getAttribute("data-dailychart-close"):this.previous=this.values[0],this.normalize().translate().draw()))}return t(i,[{key:"normalize",value:function(){var e=Math.min.apply(null,this.values.concat([this.previous])),i=Math.max.apply(null,this.values.concat([this.previous]));return this.values=this.values.map(function(t){return(t-e)/(i-e)}),this.previous=(this.previous-e)/(i-e),this}},{key:"translate",value:function(){var e=this,t=Math.max.apply(null,this.values.concat([this.previous])),i=this.height/t;return this.values=this.values.map(function(t){return e.height-t*i}),this.previous=this.height-this.previous*i,this}},{key:"id",value:function(){return Math.random().toString(36).substr(2,9)}},{key:"path",value:function(){for(var t=this.width/(this.length-1),e=[],i=0;i<this.values.length;i++)e.push(0===i?"M":"L"),e.push(i*t),e.push(this.values[i]);return e.join(" ")}},{key:"draw",value:function(){var t=this.options,e=t.lineWidth,i=t.colorPositive,r=t.colorNegative,s=t.fillPositive,n=t.fillNegative,h=this.id(),a="dailychart-"+h+"-positive",l="dailychart-"+h+"-negative",u=this.path(),o=u+" V "+this.height+" H 0 Z",d=u+" V 0 H 0 Z",p=this.svgElement(),c=this.lineElement(this.previous),v=this.pathElement(u,e,i,"",a),f=this.pathElement(o,0,"",s,a),g=this.clipElement(a),m=this.rectElement(0,0,this.width,this.previous),y=this.pathElement(u,e,r,"",l),b=this.pathElement(d,0,"",n,l),A=this.clipElement(l),w=this.rectElement(0,this.previous,this.width,this.height-this.previous);g.appendChild(m),A.appendChild(w),p.appendChild(g),p.appendChild(A),p.appendChild(c),p.appendChild(f),p.appendChild(b),p.appendChild(v),p.appendChild(y),this.element.appendChild(p)}},{key:"svgElement",value:function(){var t=document.createElementNS(h,"svg");return t.setAttributeNS("http://www.w3.org/2000/xmlns/","xmlns",h),t.setAttribute("width",this.width),t.setAttribute("height",this.height),t}},{key:"lineElement",value:function(t){var e=document.createElementNS(h,"line");return e.setAttribute("x1",0),e.setAttribute("y1",t),e.setAttribute("x2",this.width),e.setAttribute("y2",t),e.setAttribute("stroke",this.options.closeColor),e.setAttribute("stroke-width",this.options.closeWidth),e.style.shapeRendering="crispEdges",e}},{key:"pathElement",value:function(t,e,i,r,s){var n=document.createElementNS(h,"path");return n.setAttribute("d",t),n.setAttribute("fill",""===r?"none":r),n.setAttribute("stroke-width",e),n.setAttribute("stroke-linejoin","bevel"),n.setAttribute("stroke",""===i?"none":i),n.setAttribute("clip-path","url(#"+s+")"),n}},{key:"rectElement",value:function(t,e,i,r){var s=document.createElementNS(h,"rect");return s.setAttribute("x",t),s.setAttribute("y",e),s.setAttribute("width",i),s.setAttribute("height",r),s}},{key:"clipElement",value:function(t){var e=document.createElementNS(h,"clipPath");return e.setAttribute("id",t),e}}],[{key:"extend",value:function(t){for(var e=arguments.length,i=Array(1<e?e-1:0),r=1;r<e;r++)i[r-1]=arguments[r];var s=i,n=Array.isArray(s),h=0;for(s=n?s:s[Symbol.iterator]();;){var a;if(n){if(h>=s.length)break;a=s[h++]}else{if((h=s.next()).done)break;a=h.value}var l=a;for(var u in l){var o=l[u];t[u]=o}}return t}}]),i}();return e.prototype.defaultOptions={width:void 0,height:void 0,lineWidth:1,colorPositive:"#33AE45",colorNegative:"#EB5757",fillPositive:"",fillNegative:"",closeWidth:1,closeColor:"#e0e0e0"},e});

package.json

 {
   "name": "dailychart",
-  "version": "1.2.2",
+  "version": "1.2.3",
   "description": "Tiny SVG charting library to display daily graph of a stock market security",
@@ -25,2 +25,3 @@ "homepage": "https://github.com/kbychkov/dailychart",
     "babel-preset-env": "^1.7.0",
+    "chai": "^4.2.0",
     "gulp": "^3.9.1",
@@ -30,4 +31,5 @@ "gulp-babel": "^7.0.1",
     "gulp-uglify": "^3.0.1",
-    "gulp-umd": "^2.0.0"
+    "gulp-umd": "^2.0.0",
+    "mocha": "^5.2.0"
   }
 }

README.md

@@ -0,1 +1,3 @@
+[![npm](https://img.shields.io/npm/v/dailychart.svg)](https://www.npmjs.com/package/dailychart)
+
 # Dailychart.js
@@ -72,11 +74,1 @@
 - `data-dailychart-close` - Close value of previous trading session.
-
-## Changelog
-
-### 1.2.0
-
-- Added UMD wrapper
-
-### 1.1.0
-
-- Added new options: `fillPositive`, `fillNegative`

src/dailychart.js

@@ -8,3 +8,3 @@ const SVG_NS = 'http://www.w3.org/2000/svg';
     if (!el) {
-      throw 'Dailychart.js: el is not defined';
+      throw new Error('Dailychart.js: el is not defined');
     } else {
@@ -37,5 +37,3 @@ this.element = el;
 
-    this._normalize();
-    this._translate();
-    this._draw();
+    this.normalize().translate().draw();
   }
@@ -53,26 +51,31 @@
 
-  _normalize() {
+  normalize() {
+    const min = Math.min.apply(null, this.values.concat([this.previous]));
     const max = Math.max.apply(null, this.values.concat([this.previous]));
-    const min = Math.min.apply(null, this.values.concat([this.previous]));
-    const k = max === min ? 0 : (this.height - this.options.lineWidth * 2) / (max - min);
-    const shift = k === 0 ? this.height / 2 : 0;
 
-    this.values = this.values.map(value => (value - min) * k + this.options.lineWidth + shift);
-    this.previous = (this.previous - min) * k + this.options.lineWidth + shift;
+    this.values = this.values.map(value => (value - min) / (max - min));
+    this.previous = (this.previous - min) / (max - min);
+
+    return this;
   }
 
-  _translate() {
-    this.values = this.values.map(value => this.height - value);
-    this.previous = this.height - this.previous;
+  translate() {
+    const max = Math.max.apply(null, this.values.concat([this.previous]));
+    const k = this.height / max;
+
+    this.values = this.values.map(value => this.height - value * k);
+    this.previous = this.height - this.previous * k;
+
+    return this;
   }
 
-  _id() {
+  id() {
     return Math.random().toString(36).substr(2, 9);
   }
 
-  _path() {
+  path() {
     const inc = this.width / (this.length - 1);
-    let i = 0, d = [];
+    const d = [];
 
-    for (; i < this.values.length; i++) {
+    for (let i = 0; i < this.values.length; i++) {
       d.push(i === 0 ? 'M' : 'L');
@@ -86,35 +89,25 @@ d.push(i * inc);
 
-  _close(path, flag) {
-    if (flag === 'positive') {
-      path += ` V ${this.height} H 0 Z`;
-    }
-    if (flag === 'negative') {
-      path += ` V 0 H 0 Z`;
-    }
-    return path;
-  }
-
-  _draw() {
+  draw() {
     const { lineWidth, colorPositive, colorNegative, fillPositive, fillNegative } = this.options;
 
-    const id = this._id();
+    const id = this.id();
     const idPositive = `dailychart-${id}-positive`;
     const idNegative = `dailychart-${id}-negative`;
 
-    const d = this._path();
-    const dPositive = this._close(d, 'positive');
-    const dNegative = this._close(d, 'negative');
+    const d = this.path();
+    const dPositive = `${d} V ${this.height} H 0 Z`;
+    const dNegative = `${d} V 0 H 0 Z`;
 
-    const svg = this._svgElement();
-    const linePrevious = this._lineElement(this.previous);
+    const svg = this.svgElement();
+    const linePrevious = this.lineElement(this.previous);
 
-    const pathPositive = this._pathElement(d, lineWidth, colorPositive, '', idPositive);
-    const areaPositive = this._pathElement(dPositive, 0, '', fillPositive, idPositive);
-    const clipPositive = this._clipElement(idPositive);
-    const rectPositive = this._rectElement(0, 0, this.width, this.previous);
+    const pathPositive = this.pathElement(d, lineWidth, colorPositive, '', idPositive);
+    const areaPositive = this.pathElement(dPositive, 0, '', fillPositive, idPositive);
+    const clipPositive = this.clipElement(idPositive);
+    const rectPositive = this.rectElement(0, 0, this.width, this.previous);
 
-    const pathNegative = this._pathElement(d, lineWidth, colorNegative, '', idNegative);
-    const areaNegative = this._pathElement(dNegative, 0, '', fillNegative, idNegative);
-    const clipNegative = this._clipElement(idNegative);
-    const rectNegative = this._rectElement(0, this.previous, this.width, this.height - this.previous);
+    const pathNegative = this.pathElement(d, lineWidth, colorNegative, '', idNegative);
+    const areaNegative = this.pathElement(dNegative, 0, '', fillNegative, idNegative);
+    const clipNegative = this.clipElement(idNegative);
+    const rectNegative = this.rectElement(0, this.previous, this.width, this.height - this.previous);
 
@@ -136,3 +129,3 @@ clipPositive.appendChild(rectPositive);
 
-  _svgElement() {
+  svgElement() {
     const svg = document.createElementNS(SVG_NS, 'svg');
@@ -147,3 +140,3 @@
 
-  _lineElement(y) {
+  lineElement(y) {
     const line = document.createElementNS(SVG_NS, 'line');
@@ -163,3 +156,3 @@
 
-  _pathElement(d, width, stroke, fill, clipId) {
+  pathElement(d, width, stroke, fill, clipId) {
     const path = document.createElementNS(SVG_NS, 'path');
@@ -177,3 +170,3 @@
 
-  _rectElement(x, y, w, h) {
+  rectElement(x, y, w, h) {
     const rect = document.createElementNS(SVG_NS, 'rect');
@@ -189,3 +182,3 @@
 
-  _clipElement(id) {
+  clipElement(id) {
     const clip = document.createElementNS(SVG_NS, 'clipPath');
@@ -210,3 +203,1 @@
 };
-
-Dailychart.version = '1.2.2';

No alert changes

Improved metrics

Total package byte prevSize

33894

increased by8.26%

Number of package files

13

increased by30%

Lines of code

439

increased by10.03%

Worsened metrics

Dev dependency count

10

increased by25%

Number of lines in readme file

74

decreased by-9.76%

No dependency changes