canvas-colorchart - npm Package Compare versions

Comparing version 1.1.0 to 1.1.1

index.js

@@ -1,12 +0,13 @@
-module.exports = canvasLineChart;
+module.exports = canvasColorChart;
 // var elem = document.createElement('canvas');
 //setInterval(function() {
-// canvasLineChart(elem, [[10 * (Math.sin(Date.now() / 1000) + 1), 'rgba(0, 0, 0, 0.2)'], [20, '#0f0']], [20, '#FF0000']);
+ // canvasLineChart(elem, [[10, 'rgba(0, 0, 0, 0.2)'], [20, '#0f0']], [10, '#FF0000']);
 //}, 100);
 //=elem
 
-function canvasLineChart(c, data, marker) {
-    var width = 170 * 2;
-    var height = 40 * 2;
-    var chartHeight = 20 * 2;
+function canvasColorChart(c, data, marker) {
+    var width = 169 * 2;
+    var height = 30 * 2;
+    var chartHeight = 18 * 2;
+    var margin = 5;
     c.width = width;
@@ -19,7 +20,9 @@ c.height = height;
     function xScale(_) {
-      return (_ / 20);
+        return (_ / 20);
     }
-
+    function xScalePX(_) {
+        return ~~Math.min(Math.max(0, ((_ / 20) * (width - (margin * 2))) + margin), width - margin);
+    }
     ctx.fillStyle = '#fff';
-    [width - chartHeight / 2, chartHeight / 2].forEach(function(offset) {
+    [width - (chartHeight / 2) - margin, margin + chartHeight / 2].forEach(function(offset) {
         ctx.beginPath();
@@ -31,3 +34,3 @@ ctx.arc(offset, chartHeight/2 - 1, chartHeight/2 - 1, 0, 2 * Math.PI, false);
 
-    ctx.fillRect(chartHeight/2, 1, width - chartHeight, chartHeight - 2);
+    ctx.fillRect(chartHeight/2 + margin, 1, width - chartHeight - margin, chartHeight - 2);
 
@@ -40,5 +43,10 @@ ctx.fillStyle = '#000';
     ctx.globalCompositeOperation = 'source-atop';
-    var grd = ctx.createLinearGradient(0, 0, width, 0);
+    ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
+    for (var i = 0; i < 20; i++) {
+        ctx.fillRect(xScalePX(i), 0, 2, height);
+    }
+
+    var grd = ctx.createLinearGradient(margin, 0, width - margin, 0);
     data.forEach(function(data, i) {
-      grd.addColorStop(xScale(data[0]), data[1]);
+        grd.addColorStop(xScale(data[0]), data[1]);
     });
@@ -49,7 +57,2 @@ ctx.fillStyle = grd;
 
-  	ctx.fillStyle = 'rgba(0, 0, 0, 0.4)';
-  	for (var i = 0; i < 20; i++) {
-      ctx.fillRect(xScale(i) * width, 0, 2, height);
-  	}
-
     ctx.globalCompositeOperation = 'source-over';
@@ -59,4 +62,4 @@
         ctx.fillStyle = '#3bb2d0';
-        ctx.fillRect(Math.min(width - 3, xScale(marker[0]) * width), 0, 3, height);
-        var xAnchor = xScale(marker[0]) * width;
+        ctx.fillRect(xScalePX(marker[0]), 0, 3, height);
+        var xAnchor = xScalePX(marker[0]);
 
@@ -67,3 +70,3 @@ var labelWidth = 230;
         if (xAnchor < labelWidthH) xAnchor = labelWidthH;
-        if (xAnchor > (width - labelWidthH)) xAnchor = width - labelWidthH;
+        if (xAnchor > (width - labelWidthH)) xAnchor = width - labelWidthH - margin;
         ctx.fillStyle = '#3bb2d0';
@@ -74,5 +77,5 @@ ctx.fillRect(xAnchor - labelWidthH, chartHeight, labelWidth, height - chartHeight);
         ctx.textAlign = 'center';
-        ctx.fillText('' + marker[1], xAnchor, chartHeight + 27);
+        ctx.fillText('' + marker[1], xAnchor, chartHeight + 18);
     }
 }
 

package.json

 {
   "name": "canvas-colorchart",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "a standalone color graph widget",
@@ -5,0 +5,0 @@ "main": "index.js",

No alert changes

Improved metrics

Total package byte prevSize

5041

increased by3.11%

Lines of code

63

increased by6.78%

No dependency changes