vuetrend - npm Package Compare versions

Comparing version 0.3.1 to 0.3.2

dist/vue-trend.common.js

@@ -205,3 +205,3 @@ 'use strict';
         this.$nextTick(function () {
-          if (!this$1.autoDraw) {
+          if (this$1.$isServer || !this$1.$refs.path || !this$1.autoDraw) {
             return
@@ -208,0 +208,0 @@ }

dist/vue-trend.esm.js

@@ -203,3 +203,3 @@ function int (value) {
         this.$nextTick(function () {
-          if (!this$1.autoDraw) {
+          if (this$1.$isServer || !this$1.$refs.path || !this$1.autoDraw) {
             return
@@ -206,0 +206,0 @@ }

dist/vue-trend.js

@@ -209,3 +209,3 @@ (function (global, factory) {
         this.$nextTick(function () {
-          if (!this$1.autoDraw) {
+          if (this$1.$isServer || !this$1.$refs.path || !this$1.autoDraw) {
             return
@@ -212,0 +212,0 @@ }

dist/vue-trend.min.js

@@ -1,1 +0,1 @@
-(function(global,factory){typeof exports==="object"&&typeof module!=="undefined"?module.exports=factory():typeof define==="function"&&define.amd?define(factory):global["vue-trend"]=factory()})(this,function(){"use strict";function int(value){return parseInt(value,10)}function checkCollinear(p0,p1,p2){return int(p0.x+p2.x)===int(2*p1.x)&&int(p0.y+p2.y)===int(2*p1.y)}function getDistance(p1,p2){return Math.sqrt(Math.pow(p2.x-p1.x,2)+Math.pow(p2.y-p1.y,2))}function moveTo(to,from,radius){var vector={x:to.x-from.x,y:to.y-from.y};var length=Math.sqrt(vector.x*vector.x+vector.y*vector.y);var unitVector={x:vector.x/length,y:vector.y/length};return{x:from.x+unitVector.x*radius,y:from.y+unitVector.y*radius}}function genPoints(arr,ref,ref$1){var minX=ref.minX;var minY=ref.minY;var maxX=ref.maxX;var maxY=ref.maxY;var max=ref$1.max;var min=ref$1.min;arr=arr.map(function(item){return typeof item==="number"?item:item.value});var minValue=Math.min.apply(Math,arr.concat([min]))-.001;var gridX=(maxX-minX)/(arr.length-1);var gridY=(maxY-minY)/(Math.max.apply(Math,arr.concat([max]))+.001-minValue);return arr.map(function(value,index){return{x:index*gridX+minX,y:maxY-(value-minValue)*gridY+ +(index===arr.length-1)*1e-5-+(index===0)*1e-5}})}function genPath(points,radius){var start=points.shift();return"M"+start.x+" "+start.y+points.map(function(point,index){var next=points[index+1];var prev=points[index-1]||start;var isCollinear=next&&checkCollinear(next,point,prev);if(!next||isCollinear){return"L"+point.x+" "+point.y}var threshold=Math.min(getDistance(prev,point),getDistance(next,point));var isTooCloseForRadius=threshold/2<radius;var radiusForPoint=isTooCloseForRadius?threshold/2:radius;var before=moveTo(prev,point,radiusForPoint);var after=moveTo(next,point,radiusForPoint);return"L"+before.x+" "+before.y+"S"+point.x+" "+point.y+" "+after.x+" "+after.y}).join("")}var Path={props:["smooth","data","boundary","radius","id","max","min"],render:function render(h){var ref=this;var data=ref.data;var smooth=ref.smooth;var boundary=ref.boundary;var radius=ref.radius;var id=ref.id;var max=ref.max;var min=ref.min;var points=genPoints(data,boundary,{max:max,min:min});var d=genPath(points,smooth?radius:0);return h("path",{attrs:{d:d,fill:"none",stroke:"url(#"+id+")"}})}};var Gradient={props:["gradient","id"],render:function render(h){var ref=this;var gradient=ref.gradient;var id=ref.id;var len=gradient.length-1||1;var stops=gradient.slice().reverse().map(function(color,index){return h("stop",{attrs:{offset:index/len,"stop-color":color}})});return h("defs",[h("linearGradient",{attrs:{id:id,x1:0,y1:0,x2:0,y2:1}},stops)])}};var Trend$1={name:"Trend",props:{data:{type:Array,required:true},autoDraw:Boolean,autoDrawDuration:{type:Number,default:2e3},autoDrawEasing:{type:String,default:"ease"},gradient:{type:Array,default:function(){return["#000"]}},max:{type:Number,default:-Infinity},min:{type:Number,default:Infinity},height:Number,width:Number,padding:{type:Number,default:8},radius:{type:Number,default:10},smooth:Boolean},watch:{data:{immediate:true,handler:function handler(val){var this$1=this;this.$nextTick(function(){if(!this$1.autoDraw){return}var path=this$1.$refs.path.$el;var length=path.getTotalLength();path.style.transition="none";path.style.strokeDasharray=length+" "+length;path.style.strokeDashoffset=Math.abs(length-(this$1.lastLength||0));path.getBoundingClientRect();path.style.transition="stroke-dashoffset "+this$1.autoDrawDuration+"ms "+this$1.autoDrawEasing;path.style.strokeDashoffset=0;this$1.lastLength=length})}}},render:function render(h){if(!this.data||this.data.length<2){return}var ref=this;var width=ref.width;var height=ref.height;var padding=ref.padding;var viewWidth=width||300;var viewHeight=height||75;var boundary={minX:padding,minY:padding,maxX:viewWidth-padding,maxY:viewHeight-padding};var props=this.$props;props.boundary=boundary;props.id="vue-trend-"+this._uid;return h("svg",{attrs:{width:width||"100%",height:height||"25%",viewBox:"0 0 "+viewWidth+" "+viewHeight}},[h(Gradient,{props:props}),h(Path,{props:props,ref:"path"})])}};Trend$1.install=function(Vue){Vue.component(Trend$1.name,Trend$1)};if(typeof window!=="undefined"&&window.Vue){window.Vue.use(Trend$1)}return Trend$1});
+(function(global,factory){typeof exports==="object"&&typeof module!=="undefined"?module.exports=factory():typeof define==="function"&&define.amd?define(factory):global["vue-trend"]=factory()})(this,function(){"use strict";function int(value){return parseInt(value,10)}function checkCollinear(p0,p1,p2){return int(p0.x+p2.x)===int(2*p1.x)&&int(p0.y+p2.y)===int(2*p1.y)}function getDistance(p1,p2){return Math.sqrt(Math.pow(p2.x-p1.x,2)+Math.pow(p2.y-p1.y,2))}function moveTo(to,from,radius){var vector={x:to.x-from.x,y:to.y-from.y};var length=Math.sqrt(vector.x*vector.x+vector.y*vector.y);var unitVector={x:vector.x/length,y:vector.y/length};return{x:from.x+unitVector.x*radius,y:from.y+unitVector.y*radius}}function genPoints(arr,ref,ref$1){var minX=ref.minX;var minY=ref.minY;var maxX=ref.maxX;var maxY=ref.maxY;var max=ref$1.max;var min=ref$1.min;arr=arr.map(function(item){return typeof item==="number"?item:item.value});var minValue=Math.min.apply(Math,arr.concat([min]))-.001;var gridX=(maxX-minX)/(arr.length-1);var gridY=(maxY-minY)/(Math.max.apply(Math,arr.concat([max]))+.001-minValue);return arr.map(function(value,index){return{x:index*gridX+minX,y:maxY-(value-minValue)*gridY+ +(index===arr.length-1)*1e-5-+(index===0)*1e-5}})}function genPath(points,radius){var start=points.shift();return"M"+start.x+" "+start.y+points.map(function(point,index){var next=points[index+1];var prev=points[index-1]||start;var isCollinear=next&&checkCollinear(next,point,prev);if(!next||isCollinear){return"L"+point.x+" "+point.y}var threshold=Math.min(getDistance(prev,point),getDistance(next,point));var isTooCloseForRadius=threshold/2<radius;var radiusForPoint=isTooCloseForRadius?threshold/2:radius;var before=moveTo(prev,point,radiusForPoint);var after=moveTo(next,point,radiusForPoint);return"L"+before.x+" "+before.y+"S"+point.x+" "+point.y+" "+after.x+" "+after.y}).join("")}var Path={props:["smooth","data","boundary","radius","id","max","min"],render:function render(h){var ref=this;var data=ref.data;var smooth=ref.smooth;var boundary=ref.boundary;var radius=ref.radius;var id=ref.id;var max=ref.max;var min=ref.min;var points=genPoints(data,boundary,{max:max,min:min});var d=genPath(points,smooth?radius:0);return h("path",{attrs:{d:d,fill:"none",stroke:"url(#"+id+")"}})}};var Gradient={props:["gradient","id"],render:function render(h){var ref=this;var gradient=ref.gradient;var id=ref.id;var len=gradient.length-1||1;var stops=gradient.slice().reverse().map(function(color,index){return h("stop",{attrs:{offset:index/len,"stop-color":color}})});return h("defs",[h("linearGradient",{attrs:{id:id,x1:0,y1:0,x2:0,y2:1}},stops)])}};var Trend$1={name:"Trend",props:{data:{type:Array,required:true},autoDraw:Boolean,autoDrawDuration:{type:Number,default:2e3},autoDrawEasing:{type:String,default:"ease"},gradient:{type:Array,default:function(){return["#000"]}},max:{type:Number,default:-Infinity},min:{type:Number,default:Infinity},height:Number,width:Number,padding:{type:Number,default:8},radius:{type:Number,default:10},smooth:Boolean},watch:{data:{immediate:true,handler:function handler(val){var this$1=this;this.$nextTick(function(){if(this$1.$isServer||!this$1.$refs.path||!this$1.autoDraw){return}var path=this$1.$refs.path.$el;var length=path.getTotalLength();path.style.transition="none";path.style.strokeDasharray=length+" "+length;path.style.strokeDashoffset=Math.abs(length-(this$1.lastLength||0));path.getBoundingClientRect();path.style.transition="stroke-dashoffset "+this$1.autoDrawDuration+"ms "+this$1.autoDrawEasing;path.style.strokeDashoffset=0;this$1.lastLength=length})}}},render:function render(h){if(!this.data||this.data.length<2){return}var ref=this;var width=ref.width;var height=ref.height;var padding=ref.padding;var viewWidth=width||300;var viewHeight=height||75;var boundary={minX:padding,minY:padding,maxX:viewWidth-padding,maxY:viewHeight-padding};var props=this.$props;props.boundary=boundary;props.id="vue-trend-"+this._uid;return h("svg",{attrs:{width:width||"100%",height:height||"25%",viewBox:"0 0 "+viewWidth+" "+viewHeight}},[h(Gradient,{props:props}),h(Path,{props:props,ref:"path"})])}};Trend$1.install=function(Vue){Vue.component(Trend$1.name,Trend$1)};if(typeof window!=="undefined"&&window.Vue){window.Vue.use(Trend$1)}return Trend$1});

package.json

 {
   "name": "vuetrend",
   "productionName": "Vue Trend",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "description": "Simple, elegant spark lines for Vue.js",
@@ -6,0 +6,0 @@ "main": "dist/vue-trend.common.js",

README.md

@@ -52,3 +52,3 @@ <div align="center">
 | data             | Number\|Object | `undefined` | The data accepted by Vue Trend is incredibly simple: An array of y-axis values to graph.                                                                                                                                                          | `[120, 149, 193.4, 200, 92]` or `[{ value: 4 }, { value: 6 }, { value: 8 }]` |
-| gradient         | String         | `[#000]`    | Colour can be specified as any SVG-supported format (named, rgb, hex, etc).                                                                                                                                                                       | `['#0FF', '#F0F', '#FF0']`                                                   | - |
+| gradient         | String         | `['#000']`    | Colour can be specified as any SVG-supported format (named, rgb, hex, etc).                                                                                                                                                                       | `['#0FF', '#F0F', '#FF0']`                                                   | - |
 | width            | Number         | auto        | Set an explicit width for your SVG.                                                                                                                                                                                                               | -                                                                            |
@@ -62,4 +62,4 @@ | height           | Number         | auto        | Set an explicit height for your SVG.                                                                                                                                                                                                              | -                                                                            |
 | autoDrawEasing   | String         | `ease`      | The easing function to use for the autoDraw animation. Accepts any transition timing function within [the CSS spec](http://www.w3schools.com/cssref/css3_pr_transition-timing-function.asp) (eg. `linear`, `ease`, `ease-in`, `cubic-bezier`...). | -                                                                            |
-| max              | Number         | `undefined` | Specify max value                                                                                                                                                                                                                                 | -                                                                            |
-| min              | Number         | `undefined` | Specify min value, This is useful if you have multiple lines. See [#8](https://github.com/QingWei-Li/vue-trend/issues/8)                                                                                                                          | -                                                                            |
+| max              | Number         | `-Infinity` | Specify max value                                                                                                                                                                                                                                 | -                                                                            |
+| min              | Number         | `Infinity` | Specify min value, This is useful if you have multiple lines. See [#8](https://github.com/QingWei-Li/vue-trend/issues/8)                                                                                                                          | -                                                                            |
 
@@ -66,0 +66,0 @@ #### SVG Props

No alert changes

Improved metrics

Total package byte prevSize

33231

increased by0.5%

No dependency changes