From ce094e65f02549e75f0487b2abc6561d19049233 Mon Sep 17 00:00:00 2001
From: hansmaad <hansmaad@gmail.com>
Date: Wed, 30 Sep 2015 09:33:53 +0200
Subject: [PATCH] Fix onZoom callback in demo. Add css class to readme. Fix
 bower.json

---
 README.md                            |   9 +
 bower.json                           |   5 +-
 demo.html                            |   8 +-
 dist/LICENSE                         |  13 ++
 dist/chartist-plugin-zoom.js         | 204 +++++++++++++++++
 dist/chartist-plugin-zoom.min.js     |   2 +
 dist/chartist-plugin-zoom.min.js.map |   1 +
 src/scripts/chartist-plugin-zoom.js  | 330 ++++++++++++++-------------
 8 files changed, 401 insertions(+), 171 deletions(-)
 create mode 100644 dist/LICENSE
 create mode 100644 dist/chartist-plugin-zoom.js
 create mode 100644 dist/chartist-plugin-zoom.min.js
 create mode 100644 dist/chartist-plugin-zoom.min.js.map

diff --git a/README.md b/README.md
index 324cf59..9269f5c 100644
--- a/README.md
+++ b/README.md
@@ -13,6 +13,7 @@ var defaultOptions = {
 
 ## Sample usage in Chartist.js
 
+    
 ```javascript
 var chart = new Chartist.Line('.ct-chart', {
   series: [/* */]
@@ -27,3 +28,11 @@ var chart = new Chartist.Line('.ct-chart', {
   ]
 });
 ```
+
+```css
+/* style the svg rect */
+.ct-zoom-rect {
+	fill: rgba(200, 100, 100, 0.3);
+  stroke: red;
+}
+```
diff --git a/bower.json b/bower.json
index 6d71478..065bd52 100644
--- a/bower.json
+++ b/bower.json
@@ -1,11 +1,10 @@
 {
-  "name": "chartist-zoom-pointlabels",
-  "version": "0.0.0",
+  "name": "chartist-plugin-zoom",
   "main": [
     "./dist/chartist-plugin-zoom.min.js"
   ],
   "dependencies": {
-    "chartist": "~0.9.0"
+    "chartist": "~0.9.4"
   },
   "ignore": [
     ".*",
diff --git a/demo.html b/demo.html
index 1d6fd60..b9b5b5a 100644
--- a/demo.html
+++ b/demo.html
@@ -14,10 +14,10 @@
 	<h1>Chartist Zoom Plugin</h1>
 	<p>Use left mouse button to drag a zoom box. Reset zoom with right mouse button.</p>
 	<p><a id="reset" href="#" style="display:none" onclick='return reset()'>Reset</a></p>
-	<div class="ct-chart ct-golden-section"></div>
+	<div class="ct-chart ct-golden-section" style="max-width:800px"></div>
 	
 	<script src="bower_components/chartist/dist/chartist.js"></script>
-	<script src="src/scripts/chartist-plugin-zoom.js"></script>
+	<script src="dist/chartist-plugin-zoom.min.js"></script>
 
 	<script>
 		var data  = {
@@ -32,7 +32,7 @@ <h1>Chartist Zoom Plugin</h1>
 			]]
 			};
 			
-		var options = {
+		var options = {      
 			chartPadding: {
 				top: 50,
 				right: 30,
@@ -52,7 +52,7 @@ <h1>Chartist Zoom Plugin</h1>
 		var chart = Chartist.Line('.ct-chart', data, options);
 		
 		var resetFnc;
-		function onZoom(reset) {
+		function onZoom(chart, reset) {
 			document.getElementById('reset').style.display = 'inline';
 			resetFnc = reset;					
 		}
diff --git a/dist/LICENSE b/dist/LICENSE
new file mode 100644
index 0000000..5c93f45
--- /dev/null
+++ b/dist/LICENSE
@@ -0,0 +1,13 @@
+            DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
+                    Version 2, December 2004
+
+ Copyright (C) 2004 Sam Hocevar <sam@hocevar.net>
+
+ Everyone is permitted to copy and distribute verbatim or modified
+ copies of this license document, and changing it is allowed as long
+ as the name is changed.
+
+            DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
+   TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION
+
+  0. You just DO WHAT THE FUCK YOU WANT TO.
diff --git a/dist/chartist-plugin-zoom.js b/dist/chartist-plugin-zoom.js
new file mode 100644
index 0000000..7e0c922
--- /dev/null
+++ b/dist/chartist-plugin-zoom.js
@@ -0,0 +1,204 @@
+(function (root, factory) {
+  if (typeof define === 'function' && define.amd) {
+    // AMD. Register as an anonymous module.
+    define([], function () {
+      return (root.returnExportsGlobal = factory());
+    });
+  } else if (typeof exports === 'object') {
+    // Node. Does not work with strict CommonJS, but
+    // only CommonJS-like enviroments that support module.exports,
+    // like Node.
+    module.exports = factory();
+  } else {
+    root['Chartist.plugins.zoom'] = factory();
+  }
+}(this, function () {
+
+  /**
+   * Chartist.js zoom plugin.
+   *
+   */
+  (function (window, document, Chartist) {
+    'use strict';
+
+    var defaultOptions = {
+      // onZoom
+      // resetOnRightMouseBtn
+    };
+
+
+    Chartist.plugins = Chartist.plugins || {};
+    Chartist.plugins.zoom = function (options) {
+
+      options = Chartist.extend({}, defaultOptions, options);
+
+      return function zoom(chart) {
+
+        if (!(chart instanceof Chartist.Line)) {
+          return;
+        }
+
+        var rect, svg, axisX, axisY, chartRect;
+        var downPosition;
+        var onZoom = options.onZoom;
+
+        chart.on('draw', function (data) {
+          var type = data.type;
+          if (type === 'line' || type === 'bar' || type === 'area' || type === 'point') {
+            data.element.attr({
+              'clip-path': 'url(#zoom-mask)'
+            });
+          }
+        });
+
+        chart.on('created', function (data) {
+          axisX = data.axisX;
+          axisY = data.axisY;
+          chartRect = data.chartRect;
+          svg = data.svg._node;
+          rect = data.svg.elem('rect', {
+            x: 10,
+            y: 10,
+            width: 100,
+            height: 100,
+          }, 'ct-zoom-rect');
+          hide(rect);
+
+          var defs = data.svg.querySelector('defs') || data.svg.elem('defs');
+          var width = chartRect.width();
+          var height = chartRect.height();
+
+          defs
+            .elem('clipPath', {
+              id: 'zoom-mask'
+            })
+            .elem('rect', {
+              x: chartRect.x1,
+              y: chartRect.y2,
+              width: width,
+              height: height,
+              fill: 'white'
+            });
+
+          svg.addEventListener('mousedown', onMouseDown);
+          svg.addEventListener('mouseup', onMouseUp);
+          svg.addEventListener('mousemove', onMouseMove);
+        });
+
+        function onMouseDown(event) {
+          if (event.button === 0) {
+            downPosition = position(event, svg);
+            rect.attr(getRect(downPosition, downPosition));
+            show(rect);
+            event.preventDefault();
+          }
+        }
+
+        var reset = function () {
+          chart.options.axisX.highLow = null;
+          chart.options.axisY.highLow = null;
+          chart.update(chart.data, chart.options);
+        };
+
+        function onMouseUp(event) {
+          if (event.button === 0) {
+            var box = getRect(downPosition, position(event, svg));
+            if (box.width > 5 && box.height > 5) {
+              var x1 = box.x - chartRect.x1;
+              var x2 = x1 + box.width;
+              var y2 = chartRect.y1 - box.y;
+              var y1 = y2 - box.height;
+
+              chart.options.axisX.highLow = { low: project(x1, axisX), high: project(x2, axisX) };
+              chart.options.axisY.highLow = { low: project(y1, axisY), high: project(y2, axisY) };
+
+              chart.update(chart.data, chart.options);
+              onZoom && onZoom(chart, reset);
+            }
+
+            downPosition = null;
+            hide(rect);
+            event.preventDefault();
+          }
+          else if (options.resetOnRightMouseBtn && event.button === 2) {
+            reset();
+            event.preventDefault();
+          }
+        }
+
+        function onMouseMove(event) {
+          if (downPosition) {
+            var point = position(event, svg);
+            rect.attr(getRect(downPosition, point));
+            event.preventDefault();
+          }
+        }
+      };
+
+    };
+
+    function hide(rect) {
+      rect.attr({ style: 'display:none' });
+    }
+
+    function show(rect) {
+      rect.attr({ style: 'display:block' });
+    }
+
+    function getRect(firstPoint, secondPoint) {
+      var x = firstPoint.x;
+      var y = firstPoint.y;
+      var width = secondPoint.x - x;
+      var height = secondPoint.y - y;
+      if (width < 0) {
+        width = -width;
+        x = secondPoint.x;
+      }
+      if (height < 0) {
+        height = -height;
+        y = secondPoint.y;
+      }
+      return {
+        x: x,
+        y: y,
+        width: width,
+        height: height
+      };
+    }
+
+    function position(event, svg) {
+      var x = event.layerX;
+      var y = event.layerY;
+      return transform(x, y, svg);
+    }
+
+    function transform(x, y, svgElement) {
+      svgElement = svgElement;
+      var svg = svgElement.tagName === 'svg' ? svgElement : svgElement.ownerSVGElement;
+      var matrix = svgElement.getCTM();
+      var point = svg.createSVGPoint();
+      point.x = x;
+      point.y = y;
+      point = point.matrixTransform(matrix.inverse());
+      return point || { x: 0, y: 0 };
+    }
+
+    function project(value, axis) {
+      var max = axis.bounds.max;
+      var min = axis.bounds.min;
+      if (axis.scale && axis.scale.type === 'log') {
+        var base = axis.scale.base;
+        return Math.pow(base,
+          value * baseLog(max / min, base) / axis.axisLength) * min;
+      }
+      return (value * axis.bounds.range / axis.axisLength) + min;
+    }
+
+    function baseLog(val, base) {
+      return Math.log(val) / Math.log(base);
+    }
+
+  } (window, document, Chartist));
+  return Chartist.plugins.zoom;
+
+}));
diff --git a/dist/chartist-plugin-zoom.min.js b/dist/chartist-plugin-zoom.min.js
new file mode 100644
index 0000000..ae181ce
--- /dev/null
+++ b/dist/chartist-plugin-zoom.min.js
@@ -0,0 +1,2 @@
+!function(a,b){"function"==typeof define&&define.amd?define([],function(){return a.returnExportsGlobal=b()}):"object"==typeof exports?module.exports=b():a["Chartist.plugins.zoom"]=b()}(this,function(){return function(a,b,c){"use strict";function d(a){a.attr({style:"display:none"})}function e(a){a.attr({style:"display:block"})}function f(a,b){var c=a.x,d=a.y,e=b.x-c,f=b.y-d;return 0>e&&(e=-e,c=b.x),0>f&&(f=-f,d=b.y),{x:c,y:d,width:e,height:f}}function g(a,b){var c=a.layerX,d=a.layerY;return h(c,d,b)}function h(a,b,c){c=c;var d="svg"===c.tagName?c:c.ownerSVGElement,e=c.getCTM(),f=d.createSVGPoint();return f.x=a,f.y=b,f=f.matrixTransform(e.inverse()),f||{x:0,y:0}}function i(a,b){var c=b.bounds.max,d=b.bounds.min;if(b.scale&&"log"===b.scale.type){var e=b.scale.base;return Math.pow(e,a*j(c/d,e)/b.axisLength)*d}return a*b.bounds.range/b.axisLength+d}function j(a,b){return Math.log(a)/Math.log(b)}var k={};c.plugins=c.plugins||{},c.plugins.zoom=function(a){return a=c.extend({},k,a),function(b){function h(a){0===a.button&&(q=g(a,m),l.attr(f(q,q)),e(l),a.preventDefault())}function j(c){if(0===c.button){var e=f(q,g(c,m));if(e.width>5&&e.height>5){var h=e.x-p.x1,j=h+e.width,k=p.y1-e.y,t=k-e.height;b.options.axisX.highLow={low:i(h,n),high:i(j,n)},b.options.axisY.highLow={low:i(t,o),high:i(k,o)},b.update(b.data,b.options),r&&r(b,s)}q=null,d(l),c.preventDefault()}else a.resetOnRightMouseBtn&&2===c.button&&(s(),c.preventDefault())}function k(a){if(q){var b=g(a,m);l.attr(f(q,b)),a.preventDefault()}}if(b instanceof c.Line){var l,m,n,o,p,q,r=a.onZoom;b.on("draw",function(a){var b=a.type;("line"===b||"bar"===b||"area"===b||"point"===b)&&a.element.attr({"clip-path":"url(#zoom-mask)"})}),b.on("created",function(a){n=a.axisX,o=a.axisY,p=a.chartRect,m=a.svg._node,l=a.svg.elem("rect",{x:10,y:10,width:100,height:100},"ct-zoom-rect"),d(l);var b=a.svg.querySelector("defs")||a.svg.elem("defs"),c=p.width(),e=p.height();b.elem("clipPath",{id:"zoom-mask"}).elem("rect",{x:p.x1,y:p.y2,width:c,height:e,fill:"white"}),m.addEventListener("mousedown",h),m.addEventListener("mouseup",j),m.addEventListener("mousemove",k)});var s=function(){b.options.axisX.highLow=null,b.options.axisY.highLow=null,b.update(b.data,b.options)}}}}}(window,document,Chartist),Chartist.plugins.zoom});
+//# sourceMappingURL=chartist-plugin-zoom.min.js.map
\ No newline at end of file
diff --git a/dist/chartist-plugin-zoom.min.js.map b/dist/chartist-plugin-zoom.min.js.map
new file mode 100644
index 0000000..431c2d3
--- /dev/null
+++ b/dist/chartist-plugin-zoom.min.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"chartist-plugin-zoom.min.js","sources":["chartist-plugin-zoom.js"],"names":["root","factory","define","amd","returnExportsGlobal","exports","module","this","window","document","Chartist","hide","rect","attr","style","show","getRect","firstPoint","secondPoint","x","y","width","height","position","event","svg","layerX","layerY","transform","svgElement","tagName","ownerSVGElement","matrix","getCTM","point","createSVGPoint","matrixTransform","inverse","project","value","axis","max","bounds","min","scale","type","base","Math","pow","baseLog","axisLength","range","val","log","defaultOptions","plugins","zoom","options","extend","chart","onMouseDown","button","downPosition","preventDefault","onMouseUp","box","x1","chartRect","x2","y2","y1","axisX","highLow","low","high","axisY","update","data","onZoom","reset","resetOnRightMouseBtn","onMouseMove","Line","on","element","clip-path","_node","elem","defs","querySelector","id","fill","addEventListener"],"mappings":"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","sourcesContent":["(function (root, factory) {\n  if (typeof define === 'function' && define.amd) {\n    // AMD. Register as an anonymous module.\n    define([], function () {\n      return (root.returnExportsGlobal = factory());\n    });\n  } else if (typeof exports === 'object') {\n    // Node. Does not work with strict CommonJS, but\n    // only CommonJS-like enviroments that support module.exports,\n    // like Node.\n    module.exports = factory();\n  } else {\n    root['Chartist.plugins.zoom'] = factory();\n  }\n}(this, function () {\n\n  /**\r\n   * Chartist.js zoom plugin.\r\n   *\r\n   */\r\n  (function (window, document, Chartist) {\r\n    'use strict';\r\n\r\n    var defaultOptions = {\r\n      // onZoom\r\n      // resetOnRightMouseBtn\r\n    };\r\n\r\n\r\n    Chartist.plugins = Chartist.plugins || {};\r\n    Chartist.plugins.zoom = function (options) {\r\n\r\n      options = Chartist.extend({}, defaultOptions, options);\r\n\r\n      return function zoom(chart) {\r\n\r\n        if (!(chart instanceof Chartist.Line)) {\r\n          return;\r\n        }\r\n\r\n        var rect, svg, axisX, axisY, chartRect;\r\n        var downPosition;\r\n        var onZoom = options.onZoom;\r\n\r\n        chart.on('draw', function (data) {\r\n          var type = data.type;\r\n          if (type === 'line' || type === 'bar' || type === 'area' || type === 'point') {\r\n            data.element.attr({\r\n              'clip-path': 'url(#zoom-mask)'\r\n            });\r\n          }\r\n        });\r\n\r\n        chart.on('created', function (data) {\r\n          axisX = data.axisX;\r\n          axisY = data.axisY;\r\n          chartRect = data.chartRect;\r\n          svg = data.svg._node;\r\n          rect = data.svg.elem('rect', {\r\n            x: 10,\r\n            y: 10,\r\n            width: 100,\r\n            height: 100,\r\n          }, 'ct-zoom-rect');\r\n          hide(rect);\r\n\r\n          var defs = data.svg.querySelector('defs') || data.svg.elem('defs');\r\n          var width = chartRect.width();\r\n          var height = chartRect.height();\r\n\r\n          defs\r\n            .elem('clipPath', {\r\n              id: 'zoom-mask'\r\n            })\r\n            .elem('rect', {\r\n              x: chartRect.x1,\r\n              y: chartRect.y2,\r\n              width: width,\r\n              height: height,\r\n              fill: 'white'\r\n            });\r\n\r\n          svg.addEventListener('mousedown', onMouseDown);\r\n          svg.addEventListener('mouseup', onMouseUp);\r\n          svg.addEventListener('mousemove', onMouseMove);\r\n        });\r\n\r\n        function onMouseDown(event) {\r\n          if (event.button === 0) {\r\n            downPosition = position(event, svg);\r\n            rect.attr(getRect(downPosition, downPosition));\r\n            show(rect);\r\n            event.preventDefault();\r\n          }\r\n        }\r\n\r\n        var reset = function () {\r\n          chart.options.axisX.highLow = null;\r\n          chart.options.axisY.highLow = null;\r\n          chart.update(chart.data, chart.options);\r\n        };\r\n\r\n        function onMouseUp(event) {\r\n          if (event.button === 0) {\r\n            var box = getRect(downPosition, position(event, svg));\r\n            if (box.width > 5 && box.height > 5) {\r\n              var x1 = box.x - chartRect.x1;\r\n              var x2 = x1 + box.width;\r\n              var y2 = chartRect.y1 - box.y;\r\n              var y1 = y2 - box.height;\r\n\r\n              chart.options.axisX.highLow = { low: project(x1, axisX), high: project(x2, axisX) };\r\n              chart.options.axisY.highLow = { low: project(y1, axisY), high: project(y2, axisY) };\r\n\r\n              chart.update(chart.data, chart.options);\r\n              onZoom && onZoom(chart, reset);\r\n            }\r\n\r\n            downPosition = null;\r\n            hide(rect);\r\n            event.preventDefault();\r\n          }\r\n          else if (options.resetOnRightMouseBtn && event.button === 2) {\r\n            reset();\r\n            event.preventDefault();\r\n          }\r\n        }\r\n\r\n        function onMouseMove(event) {\r\n          if (downPosition) {\r\n            var point = position(event, svg);\r\n            rect.attr(getRect(downPosition, point));\r\n            event.preventDefault();\r\n          }\r\n        }\r\n      };\r\n\r\n    };\r\n\r\n    function hide(rect) {\r\n      rect.attr({ style: 'display:none' });\r\n    }\r\n\r\n    function show(rect) {\r\n      rect.attr({ style: 'display:block' });\r\n    }\r\n\r\n    function getRect(firstPoint, secondPoint) {\r\n      var x = firstPoint.x;\r\n      var y = firstPoint.y;\r\n      var width = secondPoint.x - x;\r\n      var height = secondPoint.y - y;\r\n      if (width < 0) {\r\n        width = -width;\r\n        x = secondPoint.x;\r\n      }\r\n      if (height < 0) {\r\n        height = -height;\r\n        y = secondPoint.y;\r\n      }\r\n      return {\r\n        x: x,\r\n        y: y,\r\n        width: width,\r\n        height: height\r\n      };\r\n    }\r\n\r\n    function position(event, svg) {\r\n      var x = event.layerX;\r\n      var y = event.layerY;\r\n      return transform(x, y, svg);\r\n    }\r\n\r\n    function transform(x, y, svgElement) {\r\n      svgElement = svgElement;\r\n      var svg = svgElement.tagName === 'svg' ? svgElement : svgElement.ownerSVGElement;\r\n      var matrix = svgElement.getCTM();\r\n      var point = svg.createSVGPoint();\r\n      point.x = x;\r\n      point.y = y;\r\n      point = point.matrixTransform(matrix.inverse());\r\n      return point || { x: 0, y: 0 };\r\n    }\r\n\r\n    function project(value, axis) {\r\n      var max = axis.bounds.max;\r\n      var min = axis.bounds.min;\r\n      if (axis.scale && axis.scale.type === 'log') {\r\n        var base = axis.scale.base;\r\n        return Math.pow(base,\r\n          value * baseLog(max / min, base) / axis.axisLength) * min;\r\n      }\r\n      return (value * axis.bounds.range / axis.axisLength) + min;\r\n    }\r\n\r\n    function baseLog(val, base) {\r\n      return Math.log(val) / Math.log(base);\r\n    }\r\n\r\n  } (window, document, Chartist));\n  return Chartist.plugins.zoom;\n\n}));\n"]}
\ No newline at end of file
diff --git a/src/scripts/chartist-plugin-zoom.js b/src/scripts/chartist-plugin-zoom.js
index 477f5e2..5546c4c 100644
--- a/src/scripts/chartist-plugin-zoom.js
+++ b/src/scripts/chartist-plugin-zoom.js
@@ -2,182 +2,184 @@
  * Chartist.js zoom plugin.
  *
  */
- (function (window, document, Chartist) {
-    'use strict';
+(function (window, document, Chartist) {
+  'use strict';
 
-    var defaultOptions = {
-        // onZoom
-        // resetOnRightMouseBtn
-    };
+  var defaultOptions = {
+    // onZoom
+    // resetOnRightMouseBtn
+  };
 
-    Chartist.plugins = Chartist.plugins || {};
-    Chartist.plugins.zoom = function (options) {
-
-        options = Chartist.extend({}, defaultOptions, options);
-
-        return function zoom(chart) {
-           
-            if (!(chart instanceof Chartist.Line)) {
-                return;
-            }
-
-            var rect, svg, axisX, axisY, chartRect;
-            var downPosition;
-            var onZoom = options.onZoom;
-
-            chart.on('draw', function (data) {
-                var type = data.type;
-                if (type === 'line' || type === 'bar' || type === 'area' || type === 'point') {
-                    data.element.attr({
-                        'clip-path': 'url(#zoom-mask)'
-                    });
-                }
-            });
-
-            chart.on('created', function (data) {
-                axisX = data.axisX;
-                axisY = data.axisY;
-                chartRect = data.chartRect;
-                svg = data.svg._node;
-                rect = data.svg.elem('rect', {
-                    x: 0,
-                    y: 0,
-                    width: 0,
-                    height: 0,
-                }, 'ct-zoom-rect');
-                hide(rect);
-
-                var defs = data.svg.querySelector('defs') || data.svg.elem('defs');
-                var width = chartRect.width();
-                var height = chartRect.height();
-
-                defs.elem('clipPath', {
-                    id: 'zoom-mask'
-                }).elem('rect', {
-                    x: chartRect.x1,
-                    y: chartRect.y2,
-                    width: width,
-                    height: height,
-                    fill: 'white'
-                    });
-
-                svg.addEventListener('mousedown', onMouseDown);
-                svg.addEventListener('mouseup', onMouseUp);
-                svg.addEventListener('mousemove', onMouseMove);
-            });
-
-            function onMouseDown(event) {
-                if (event.button === 0) {
-                    downPosition = position(event, svg);
-                    rect.attr(getRect(downPosition, downPosition));
-                    show(rect);
-                    event.preventDefault();
-                }
-            }
-
-            var reset = function () {
-                chart.options.axisX.highLow = null;
-                chart.options.axisY.highLow = null;
-                chart.update(chart.data, chart.options);
-            };
-
-            function onMouseUp(event) {
-                if (event.button === 0) {
-                    var box = getRect(downPosition, position(event, svg));
-                    if (box.width > 5 && box.height > 5) {
-                        var x1 = box.x - chartRect.x1;
-                        var x2 = x1 + box.width;
-                        var y2 = chartRect.y1 - box.y;
-                        var y1 = y2 - box.height;
-
-                        chart.options.axisX.highLow = { low: project(x1, axisX), high: project(x2, axisX) };
-                        chart.options.axisY.highLow = { low: project(y1, axisY), high: project(y2, axisY) };
-
-                        chart.update(chart.data, chart.options);
-                        onZoom && onZoom(chart, reset);
-                    }
-
-                    downPosition = null;
-                    hide(rect);
-                    event.preventDefault();
-                }
-                else if (options.resetOnRightMouseBtn && event.button === 2) {
-                    reset();
-                    event.preventDefault();
-                }
-            };
-
-            function onMouseMove(event) {
-                if (downPosition) {
-                    var point = position(event, svg);
-                    rect.attr(getRect(downPosition, point));
-                    event.preventDefault();
-                }
-            };
-        };
 
+  Chartist.plugins = Chartist.plugins || {};
+  Chartist.plugins.zoom = function (options) {
 
-    };
+    options = Chartist.extend({}, defaultOptions, options);
 
-    function hide(rect) {
-        rect.attr({ style: 'display:none' });
-    }
+    return function zoom(chart) {
 
-    function show(rect) {
-        rect.attr({ style: 'display:block' });
-    }
+      if (!(chart instanceof Chartist.Line)) {
+        return;
+      }
 
-    function getRect(firstPoint, secondPoint) {
-        var x = firstPoint.x;
-        var y = firstPoint.y;
-        var width = secondPoint.x - x;
-        var height = secondPoint.y - y;
-        if (width < 0) {
-            width = -width;
-            x = secondPoint.x;
-        }
-        if (height < 0) {
-            height = -height;
-            y = secondPoint.y;
+      var rect, svg, axisX, axisY, chartRect;
+      var downPosition;
+      var onZoom = options.onZoom;
+
+      chart.on('draw', function (data) {
+        var type = data.type;
+        if (type === 'line' || type === 'bar' || type === 'area' || type === 'point') {
+          data.element.attr({
+            'clip-path': 'url(#zoom-mask)'
+          });
         }
-        return {
-            x: x,
-            y: y,
+      });
+
+      chart.on('created', function (data) {
+        axisX = data.axisX;
+        axisY = data.axisY;
+        chartRect = data.chartRect;
+        svg = data.svg._node;
+        rect = data.svg.elem('rect', {
+          x: 10,
+          y: 10,
+          width: 100,
+          height: 100,
+        }, 'ct-zoom-rect');
+        hide(rect);
+
+        var defs = data.svg.querySelector('defs') || data.svg.elem('defs');
+        var width = chartRect.width();
+        var height = chartRect.height();
+
+        defs
+          .elem('clipPath', {
+            id: 'zoom-mask'
+          })
+          .elem('rect', {
+            x: chartRect.x1,
+            y: chartRect.y2,
             width: width,
-            height: height
-        };
-    }
+            height: height,
+            fill: 'white'
+          });
+
+        svg.addEventListener('mousedown', onMouseDown);
+        svg.addEventListener('mouseup', onMouseUp);
+        svg.addEventListener('mousemove', onMouseMove);
+      });
+
+      function onMouseDown(event) {
+        if (event.button === 0) {
+          downPosition = position(event, svg);
+          rect.attr(getRect(downPosition, downPosition));
+          show(rect);
+          event.preventDefault();
+        }
+      }
+
+      var reset = function () {
+        chart.options.axisX.highLow = null;
+        chart.options.axisY.highLow = null;
+        chart.update(chart.data, chart.options);
+      };
+
+      function onMouseUp(event) {
+        if (event.button === 0) {
+          var box = getRect(downPosition, position(event, svg));
+          if (box.width > 5 && box.height > 5) {
+            var x1 = box.x - chartRect.x1;
+            var x2 = x1 + box.width;
+            var y2 = chartRect.y1 - box.y;
+            var y1 = y2 - box.height;
+
+            chart.options.axisX.highLow = { low: project(x1, axisX), high: project(x2, axisX) };
+            chart.options.axisY.highLow = { low: project(y1, axisY), high: project(y2, axisY) };
+
+            chart.update(chart.data, chart.options);
+            onZoom && onZoom(chart, reset);
+          }
+
+          downPosition = null;
+          hide(rect);
+          event.preventDefault();
+        }
+        else if (options.resetOnRightMouseBtn && event.button === 2) {
+          reset();
+          event.preventDefault();
+        }
+      }
 
-    function position(event, svg) {
-        var x = event.layerX;
-        var y = event.layerY;
-        return transform(x, y, svg);
-    }
+      function onMouseMove(event) {
+        if (downPosition) {
+          var point = position(event, svg);
+          rect.attr(getRect(downPosition, point));
+          event.preventDefault();
+        }
+      }
+    };
 
-    function transform(x, y, svgElement) {
-        svgElement = svgElement;
-        var svg = svgElement.tagName === 'svg' ? svgElement : svgElement.ownerSVGElement;
-        var matrix = svgElement.getCTM();
-        var point = svg.createSVGPoint();
-        point.x = x;
-        point.y = y;
-        point = point.matrixTransform(matrix.inverse());
-        return point || { x: 0, y: 0 };
-    }
+  };
 
-    function project(value, axis) {
-        var max = axis.bounds.max;
-        var min = axis.bounds.min;
-        if (axis.scale && axis.scale.type === 'log') {
-            var base = axis.scale.base;
-            return Math.pow(base,
-                value * baseLog(max / min, base) / axis.axisLength) * min;
-        }
-        return (value * axis.bounds.range / axis.axisLength) + min;
-    }
+  function hide(rect) {
+    rect.attr({ style: 'display:none' });
+  }
 
-    function baseLog(val, base) {
-        return Math.log(val) / Math.log(base);
+  function show(rect) {
+    rect.attr({ style: 'display:block' });
+  }
+
+  function getRect(firstPoint, secondPoint) {
+    var x = firstPoint.x;
+    var y = firstPoint.y;
+    var width = secondPoint.x - x;
+    var height = secondPoint.y - y;
+    if (width < 0) {
+      width = -width;
+      x = secondPoint.x;
+    }
+    if (height < 0) {
+      height = -height;
+      y = secondPoint.y;
     }
+    return {
+      x: x,
+      y: y,
+      width: width,
+      height: height
+    };
+  }
+
+  function position(event, svg) {
+    var x = event.layerX;
+    var y = event.layerY;
+    return transform(x, y, svg);
+  }
+
+  function transform(x, y, svgElement) {
+    svgElement = svgElement;
+    var svg = svgElement.tagName === 'svg' ? svgElement : svgElement.ownerSVGElement;
+    var matrix = svgElement.getCTM();
+    var point = svg.createSVGPoint();
+    point.x = x;
+    point.y = y;
+    point = point.matrixTransform(matrix.inverse());
+    return point || { x: 0, y: 0 };
+  }
+
+  function project(value, axis) {
+    var max = axis.bounds.max;
+    var min = axis.bounds.min;
+    if (axis.scale && axis.scale.type === 'log') {
+      var base = axis.scale.base;
+      return Math.pow(base,
+        value * baseLog(max / min, base) / axis.axisLength) * min;
+    }
+    return (value * axis.bounds.range / axis.axisLength) + min;
+  }
+
+  function baseLog(val, base) {
+    return Math.log(val) / Math.log(base);
+  }
 
-} (window, document, Chartist));
+} (window, document, Chartist));
\ No newline at end of file