chartjs-plugin-watermark - npm Package Compare versions

Comparing version 1.0.0 to 1.0.3

chartjs-plugin-watermark.js

@@ -49,2 +49,3 @@ /* chartjs-plugin-watermark | AlbinoDrought | MIT License | https://github.com/AlbinoDrought/chartjs-plugin-watermark/blob/master/LICENSE */
         alignY: "left",
+        alignToChartArea: false,
 
@@ -96,5 +97,19 @@ position: "front",
             var canvas = context.canvas;
-            var cHeight = canvas.clientHeight || canvas.height;
-            var cWidth = canvas.clientWidth || canvas.width;
 
+            var cHeight, cWidth;
+            var offsetX = 0, offsetY = 0;
+
+            if(watermark.alignToChartArea) {
+                var chartArea = chartInstance.chartArea;
+
+                cHeight = chartArea.bottom - chartArea.top;
+                cWidth = chartArea.right - chartArea.left;
+
+                offsetX = chartArea.left;
+                offsetY = chartArea.top;
+            } else {
+                cHeight = canvas.clientHeight || canvas.height;
+                cWidth = canvas.clientWidth || canvas.width;
+            }
+
             var height = watermark.height || image.height;
@@ -127,8 +142,9 @@ height = this.autoPercentage(height, cHeight);
 
-            context.save();
-
+            // avoid unnecessary calls to context save/restore, just manually restore the single value we change
+            var oldAlpha = context.globalAlpha;
             context.globalAlpha = watermark.opacity;
-            context.drawImage(image, x, y, width, height);
 
-            context.restore();
+            context.drawImage(image, offsetX + x, offsetY + y, width, height);
+
+            context.globalAlpha = oldAlpha;
         }
@@ -140,6 +156,8 @@ },
 
-        var options = chartInstance.options;
+        var helpers = Chart.helpers,
+            options = chartInstance.options;
 
         if (options.watermark) {
-            var watermark = Chart.helpers.extend(this.defaultOptions, options.watermark);
+            var clonedDefaultOptions = helpers.clone(this.defaultOptions),
+                watermark = helpers.extend(clonedDefaultOptions, options.watermark);
 
@@ -146,0 +164,0 @@ if (watermark.image) {

chartjs-plugin-watermark.min.js

 /* chartjs-plugin-watermark | AlbinoDrought | MIT License | https://github.com/AlbinoDrought/chartjs-plugin-watermark/blob/master/LICENSE */
-!function t(e,r,a){function i(o,c){if(!r[o]){if(!e[o]){var s="function"==typeof require&&require;if(!c&&s)return s(o,!0);if(n)return n(o,!0);var u=new Error("Cannot find module '"+o+"'");throw u.code="MODULE_NOT_FOUND",u}var f=r[o]={exports:{}};e[o][0].call(f.exports,function(t){var r=e[o][1][t];return i(r?r:t)},f,f.exports,t,e,r,a)}return r[o].exports}for(var n="function"==typeof require&&require,o=0;o<a.length;o++)i(a[o]);return i}({1:[function(t,e,r){},{}],2:[function(t,e,r){var a=t("chart.js");a="function"==typeof a?a:window.Chart;var i={defaultOptions:{x:0,y:0,height:!1,width:!1,alignX:"top",alignY:"left",position:"front",opacity:1,image:!1},isPercentage:function(t){return"string"==typeof t&&"%"==t.charAt(t.length-1)},calcPercentage:function(t,e){var r=t.substr(0,t.length-1);return r=parseFloat(r),e*(r/100)},autoPercentage:function(t,e){return this.isPercentage(t)&&(t=this.calcPercentage(t,e)),t},imageFromString:function(t){var e=new Image;return e.src=t,e},drawWatermark:function(t,e){var r=t.watermark;if(r.position==e&&r.image){var a=r.image,i=t.chart.ctx,n=i.canvas,o=n.clientHeight||n.height,c=n.clientWidth||n.width,s=r.height||a.height;s=this.autoPercentage(s,o);var u=r.width||a.width;u=this.autoPercentage(u,c);var f=this.autoPercentage(r.x,c),g=this.autoPercentage(r.y,o);switch(r.alignX){case"right":f=c-f-u;break;case"middle":f=c/2-u/2-f}switch(r.alignY){case"bottom":g=o-g-s;break;case"middle":g=o/2-s/2-g}i.save(),i.globalAlpha=r.opacity,i.drawImage(a,f,g,u,s),i.restore()}},beforeInit:function(t){t.watermark={};var e=t.options;if(e.watermark){var r=a.helpers.extend(this.defaultOptions,e.watermark);if(r.image){var i=r.image;"string"==typeof i&&(i=this.imageFromString(i)),i.onload=function(){t.update()},r.image=i}t.watermark=r}},beforeDraw:function(t){this.drawWatermark(t,"back")},afterDraw:function(t){this.drawWatermark(t,"front")}};e.exports=i,a.pluginService.register(i)},{"chart.js":1}]},{},[2]);
+!function t(e,r,a){function i(o,c){if(!r[o]){if(!e[o]){var f="function"==typeof require&&require;if(!c&&f)return f(o,!0);if(n)return n(o,!0);var g=new Error("Cannot find module '"+o+"'");throw g.code="MODULE_NOT_FOUND",g}var h=r[o]={exports:{}};e[o][0].call(h.exports,function(t){var r=e[o][1][t];return i(r?r:t)},h,h.exports,t,e,r,a)}return r[o].exports}for(var n="function"==typeof require&&require,o=0;o<a.length;o++)i(a[o]);return i}({1:[function(t,e,r){},{}],2:[function(t,e,r){var a=t("chart.js");a="function"==typeof a?a:window.Chart;var i={defaultOptions:{x:0,y:0,height:!1,width:!1,alignX:"top",alignY:"left",alignToChartArea:!1,position:"front",opacity:1,image:!1},isPercentage:function(t){return"string"==typeof t&&"%"==t.charAt(t.length-1)},calcPercentage:function(t,e){var r=t.substr(0,t.length-1);return r=parseFloat(r),e*(r/100)},autoPercentage:function(t,e){return this.isPercentage(t)&&(t=this.calcPercentage(t,e)),t},imageFromString:function(t){var e=new Image;return e.src=t,e},drawWatermark:function(t,e){var r=t.watermark;if(r.position==e&&r.image){var a,i,n=r.image,o=t.chart.ctx,c=o.canvas,f=0,g=0;if(r.alignToChartArea){var h=t.chartArea;a=h.bottom-h.top,i=h.right-h.left,f=h.left,g=h.top}else a=c.clientHeight||c.height,i=c.clientWidth||c.width;var s=r.height||n.height;s=this.autoPercentage(s,a);var u=r.width||n.width;u=this.autoPercentage(u,i);var l=this.autoPercentage(r.x,i),m=this.autoPercentage(r.y,a);switch(r.alignX){case"right":l=i-l-u;break;case"middle":l=i/2-u/2-l}switch(r.alignY){case"bottom":m=a-m-s;break;case"middle":m=a/2-s/2-m}o.save(),o.globalAlpha=r.opacity,o.drawImage(n,f+l,g+m,u,s),o.restore()}},beforeInit:function(t){t.watermark={};var e=a.helpers,r=t.options;if(r.watermark){var i=e.clone(this.defaultOptions),n=e.extend(i,r.watermark);if(n.image){var o=n.image;"string"==typeof o&&(o=this.imageFromString(o)),o.onload=function(){t.update()},n.image=o}t.watermark=n}},beforeDraw:function(t){this.drawWatermark(t,"back")},afterDraw:function(t){this.drawWatermark(t,"front")}};e.exports=i,a.pluginService.register(i)},{"chart.js":1}]},{},[2]);

package.json

 {
   "name": "chartjs-plugin-watermark",
-  "version": "1.0.0",
+  "version": "1.0.3",
   "description": "A simple watermark plugin for Chart.js",
@@ -5,0 +5,0 @@ "main": "src/chart.plugin.watermark.js",

README.md

@@ -38,2 +38,8 @@ # chartjs-plugin-watermark
         
+        // if true, aligns the watermark to the inside of the chart area (where the lines are)
+        // (where the lines are)
+        // if false, aligns the watermark to the inside of the canvas
+        // see samples/alignToChartArea.html
+        alignToChartArea: false,
+        
         // determines whether the watermark is drawn on top of or behind the chart
@@ -40,0 +46,0 @@ // valid values: "front", "back"

src/chart.plugin.watermark.js

@@ -45,2 +45,3 @@ /**
         alignY: "left",
+        alignToChartArea: false,
 
@@ -92,5 +93,19 @@ position: "front",
             var canvas = context.canvas;
-            var cHeight = canvas.clientHeight || canvas.height;
-            var cWidth = canvas.clientWidth || canvas.width;
 
+            var cHeight, cWidth;
+            var offsetX = 0, offsetY = 0;
+
+            if(watermark.alignToChartArea) {
+                var chartArea = chartInstance.chartArea;
+
+                cHeight = chartArea.bottom - chartArea.top;
+                cWidth = chartArea.right - chartArea.left;
+
+                offsetX = chartArea.left;
+                offsetY = chartArea.top;
+            } else {
+                cHeight = canvas.clientHeight || canvas.height;
+                cWidth = canvas.clientWidth || canvas.width;
+            }
+
             var height = watermark.height || image.height;
@@ -126,3 +141,3 @@ height = this.autoPercentage(height, cHeight);
             context.globalAlpha = watermark.opacity;
-            context.drawImage(image, x, y, width, height);
+            context.drawImage(image, offsetX + x, offsetY + y, width, height);
 
@@ -136,6 +151,8 @@ context.restore();
 
-        var options = chartInstance.options;
+        var helpers = Chart.helpers,
+            options = chartInstance.options;
 
         if (options.watermark) {
-            var watermark = Chart.helpers.extend(this.defaultOptions, options.watermark);
+            var clonedDefaultOptions = helpers.clone(this.defaultOptions),
+                watermark = helpers.extend(clonedDefaultOptions, options.watermark);
 
@@ -151,3 +168,5 @@ if (watermark.image) {
                 image.onload = function () {
-                    chartInstance.update();
+                    if(chartInstance.chart.ctx) {
+                        chartInstance.update();
+                    }
                 };
@@ -154,0 +173,0 @@

No alert changes

Improved metrics

Total package byte prevSize

36818

24.36%

Number of package files

18

12.5%

Lines of code

323

9.86%

Number of lines in readme file

64

10.34%

No dependency changes