chartjs-zoomable 1.0.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: a1774f680deadbe485abb972e0cd29e92d68d3e9
+  data.tar.gz: 271068cca5ba6fc54127ae5885f2509a9e87641f
+SHA512:
+  metadata.gz: b68ff04421cd69b5825cc5653d682c247547518e1b5b3ea200ae026fd616ade435e33aede74dd3220f453622ad3aa93a6a9c1888d10f3fa16e0abe640bc04a00
+  data.tar.gz: 1f1c2bb5da1f4f0e690c7305eb1e5eb90fbe09d36f0616500cb5d55822a32b7a2d824ddf616a06e42643b72c96f7e9a43c78e2903d2f9d73065b8b83b9b69698

data/MIT-LICENSE

@@ -0,0 +1,20 @@
+Copyright 2018 Mateusz Michalski
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/README.md

@@ -0,0 +1,90 @@
+# chartjs-zoomable
+Simplifies usage of Chart.js in Rails views with zoom and pan plugin!
+
+## Installation
+Add this line to your application's Gemfile:
+
+```ruby
+gem 'chartjs-zoomable'
+```
+
+And then execute:
+```bash
+$ bundle
+```
+Add the following to your `application.js`:
+```javascript
+$ //= require chartjs-zoomable
+```
+
+## Usage
+Each chart type has a corresponding helper for your views.  The helper methods take the same arguments as their Javascript counterparts.  The `options` are optional. They allow you to make a graph zoomable:
+
+```erb
+<%= line_chart           data, options %>
+<%= bar_chart            data, options %>
+<%= horizontal_bar_chart data, options %>
+<%= radar_chart          data, options %>
+<%= polar_area_chart     data, options %>
+<%= pie_chart            data, options %>
+<%= doughnut_chart       data, options %>
+<%= bubble_chart         data, options %>
+<%= scatter_chart        data, options %>
+```
+
+If you don't want these helpers – perhaps they clash with other methods in your views – add this initializer to your app:
+
+```ruby
+# config/initializers/chartjs.rb
+Chartjs.no_conflict!
+```
+
+Then you can use these helpers instead:
+
+```erb
+<%= chartjs_line_chart           data, options %>
+<%= chartjs_bar_chart            data, options %>
+<%= chartjs_horizontal_bar_chart data, options %>
+<%= chartjs_radar_chart          data, options %>
+<%= chartjs_polar_area_chart     data, options %>
+<%= chartjs_pie_chart            data, options %>
+<%= chartjs_doughnut_chart       data, options %>
+<%= chartjs_bubble_chart         data, options %>
+<%= chartjs_scatter_chart        data, options %>
+```
+
+For example, to render a [line chart][linechart] with zoom:
+
+```ruby
+data = {
+  labels: ["March", "April", "May", "June", "July", "August", "September"],
+  datasets: [
+    {
+        label: "My First dataset",
+        backgroundColor: "rgba(220,220,220,0.2)",
+        borderColor: "rgba(220,220,220,1)",
+        data: [67, 58, 80, 81, 56, 55, 40]
+    },
+    {
+        label: "My Second dataset",
+        backgroundColor: "rgba(151,187,205,0.2)",
+        borderColor: "rgba(151,187,205,1)",
+        data: [28, 48, 40, 19, 86, 27, 91]
+    }
+  ]
+}
+options = {
+  id: "my_first_graph",
+  zoom: {
+    enabled: true,
+    mode: 'x',
+  },
+}
+<%= line_chart data, options %>
+```
+
+## Contributing
+Contribution directions go here.
+
+## License
+The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).

data/Rakefile

@@ -0,0 +1,32 @@
+begin
+  require 'bundler/setup'
+rescue LoadError
+  puts 'You must `gem install bundler` and `bundle install` to run rake tasks'
+end
+
+require 'rdoc/task'
+
+RDoc::Task.new(:rdoc) do |rdoc|
+  rdoc.rdoc_dir = 'rdoc'
+  rdoc.title    = 'Chartjs::Zoomable'
+  rdoc.options << '--line-numbers'
+  rdoc.rdoc_files.include('README.md')
+  rdoc.rdoc_files.include('lib/**/*.rb')
+end
+
+APP_RAKEFILE = File.expand_path("test/dummy/Rakefile", __dir__)
+load 'rails/tasks/engine.rake'
+
+load 'rails/tasks/statistics.rake'
+
+require 'bundler/gem_tasks'
+
+require 'rake/testtask'
+
+Rake::TestTask.new(:test) do |t|
+  t.libs << 'test'
+  t.pattern = 'test/**/*_test.rb'
+  t.verbose = false
+end
+
+task default: :test

data/app/assets/config/chartjs_zoomable_manifest.js

@@ -0,0 +1,2 @@
+//= link_directory ../javascripts/chartjs/zoomable .js
+//= link_directory ../stylesheets/chartjs/zoomable .css

data/app/assets/javascripts/chartjs/zoomable/application.js

@@ -0,0 +1,14 @@
+// This is a manifest file that'll be compiled into application.js, which will include all the files
+// listed below.
+//
+// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
+// or any plugin's vendor/assets/javascripts directory can be referenced here using a relative path.
+//
+// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
+// compiled file. JavaScript code in this file should be added after the last require_* statement.
+//
+// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
+// about supported directives.
+//
+//= require Chart.bundle.min
+//= require_tree .

data/app/assets/javascripts/chartjs/zoomable/chartjs-plugin-zoom.js

@@ -0,0 +1,580 @@
+/*!
+ * chartjs-plugin-zoom
+ * http://chartjs.org/
+ * Version: 0.6.5
+ *
+ * Copyright 2016 Evert Timberg
+ * Released under the MIT license
+ * https://github.com/chartjs/chartjs-plugin-zoom/blob/master/LICENSE.md
+ */
+(function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c="function"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error("Cannot find module '"+i+"'");throw a.code="MODULE_NOT_FOUND",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u="function"==typeof require&&require,i=0;i<t.length;i++)o(t[i]);return o}return r})()({1:[function(require,module,exports){
+
+},{}],2:[function(require,module,exports){
+/*jslint browser:true, devel:true, white:true, vars:true */
+/*global require*/
+
+// hammer JS for touch support
+var Hammer = require('hammerjs');
+Hammer = typeof(Hammer) === 'function' ? Hammer : window.Hammer;
+
+// Get the chart variable
+var Chart = require('chart.js');
+Chart = typeof(Chart) === 'function' ? Chart : window.Chart;
+var helpers = Chart.helpers;
+
+// Take the zoom namespace of Chart
+var zoomNS = Chart.Zoom = Chart.Zoom || {};
+
+// Where we store functions to handle different scale types
+var zoomFunctions = zoomNS.zoomFunctions = zoomNS.zoomFunctions || {};
+var panFunctions = zoomNS.panFunctions = zoomNS.panFunctions || {};
+
+// Default options if none are provided
+var defaultOptions = zoomNS.defaults = {
+  pan: {
+    enabled: true,
+    mode: 'xy',
+    speed: 20,
+    threshold: 10
+  },
+  zoom: {
+    enabled: true,
+    mode: 'xy',
+    sensitivity: 3
+  }
+};
+
+function directionEnabled(mode, dir) {
+  if (mode === undefined) {
+    return true;
+  } else if (typeof mode === 'string') {
+    return mode.indexOf(dir) !== -1;
+  }
+
+  return false;
+}
+
+function rangeMaxLimiter(zoomPanOptions, newMax) {
+  if (zoomPanOptions.scaleAxes && zoomPanOptions.rangeMax &&
+      !helpers.isNullOrUndef(zoomPanOptions.rangeMax[zoomPanOptions.scaleAxes])) {
+    var rangeMax = zoomPanOptions.rangeMax[zoomPanOptions.scaleAxes];
+    if (newMax > rangeMax) {
+      newMax = rangeMax;
+    }
+  }
+  return newMax;
+}
+
+function rangeMinLimiter(zoomPanOptions, newMin) {
+  if (zoomPanOptions.scaleAxes && zoomPanOptions.rangeMin &&
+      !helpers.isNullOrUndef(zoomPanOptions.rangeMin[zoomPanOptions.scaleAxes])) {
+    var rangeMin = zoomPanOptions.rangeMin[zoomPanOptions.scaleAxes];
+    if (newMin < rangeMin) {
+      newMin = rangeMin;
+    }
+  }
+  return newMin;
+}
+
+function zoomIndexScale(scale, zoom, center, zoomOptions) {
+  var labels = scale.chart.data.labels;
+  var minIndex = scale.minIndex;
+  var lastLabelIndex = labels.length - 1;
+  var maxIndex = scale.maxIndex;
+  var sensitivity = zoomOptions.sensitivity;
+  var chartCenter =  scale.isHorizontal() ? scale.left + (scale.width/2) : scale.top + (scale.height/2);
+  var centerPointer = scale.isHorizontal() ? center.x : center.y;
+
+  zoomNS.zoomCumulativeDelta = zoom > 1 ? zoomNS.zoomCumulativeDelta + 1 : zoomNS.zoomCumulativeDelta - 1;
+
+  if (Math.abs(zoomNS.zoomCumulativeDelta) > sensitivity){
+    if(zoomNS.zoomCumulativeDelta < 0){
+      if(centerPointer >= chartCenter){
+        if (minIndex <= 0){
+          maxIndex = Math.min(lastLabelIndex, maxIndex + 1);
+        } else{
+          minIndex = Math.max(0, minIndex - 1);
+        }
+      } else if(centerPointer < chartCenter){
+        if (maxIndex >= lastLabelIndex){
+          minIndex = Math.max(0, minIndex - 1);
+        } else{
+          maxIndex = Math.min(lastLabelIndex, maxIndex + 1);
+        }
+      }
+      zoomNS.zoomCumulativeDelta = 0;
+    }
+    else if(zoomNS.zoomCumulativeDelta > 0){
+      if(centerPointer >= chartCenter){
+        minIndex = minIndex < maxIndex ? minIndex = Math.min(maxIndex, minIndex + 1) : minIndex;
+      } else if(centerPointer < chartCenter){
+        maxIndex = maxIndex > minIndex ? maxIndex = Math.max(minIndex, maxIndex - 1) : maxIndex;
+      }
+      zoomNS.zoomCumulativeDelta = 0;
+    }
+    scale.options.ticks.min = rangeMinLimiter(zoomOptions, labels[minIndex]);
+    scale.options.ticks.max = rangeMaxLimiter(zoomOptions, labels[maxIndex]);
+  }
+}
+
+function zoomTimeScale(scale, zoom, center, zoomOptions) {
+  var options = scale.options;
+
+  var range;
+  var min_percent;
+  if (scale.isHorizontal()) {
+    range = scale.right - scale.left;
+    min_percent = (center.x - scale.left) / range;
+  } else {
+    range = scale.bottom - scale.top;
+    min_percent = (center.y - scale.top) / range;
+  }
+
+  var max_percent = 1 - min_percent;
+  var newDiff = range * (zoom - 1);
+
+  var minDelta = newDiff * min_percent;
+  var maxDelta = newDiff * max_percent;
+
+  var newMin = scale.getValueForPixel(scale.getPixelForValue(scale.min) + minDelta);
+  var newMax = scale.getValueForPixel(scale.getPixelForValue(scale.max) - maxDelta);
+
+  var diffMinMax = newMax.diff(newMin);
+  var minLimitExceeded = rangeMinLimiter(zoomOptions, diffMinMax) != diffMinMax;
+  var maxLimitExceeded = rangeMaxLimiter(zoomOptions, diffMinMax) != diffMinMax;
+
+  if (!minLimitExceeded && !maxLimitExceeded) {
+    options.time.min = newMin;
+    options.time.max = newMax;
+  }
+}
+
+function zoomNumericalScale(scale, zoom, center, zoomOptions) {
+  var range = scale.max - scale.min;
+  var newDiff = range * (zoom - 1);
+
+  var cursorPixel = scale.isHorizontal() ? center.x : center.y;
+  var min_percent = (scale.getValueForPixel(cursorPixel) - scale.min) / range;
+  var max_percent = 1 - min_percent;
+
+  var minDelta = newDiff * min_percent;
+  var maxDelta = newDiff * max_percent;
+
+  scale.options.ticks.min = rangeMinLimiter(zoomOptions, scale.min + minDelta);
+  scale.options.ticks.max = rangeMaxLimiter(zoomOptions, scale.max - maxDelta);
+}
+
+function zoomScale(scale, zoom, center, zoomOptions) {
+  var fn = zoomFunctions[scale.options.type];
+  if (fn) {
+    fn(scale, zoom, center, zoomOptions);
+  }
+}
+
+function doZoom(chartInstance, zoom, center, whichAxes) {
+  var ca = chartInstance.chartArea;
+  if (!center) {
+    center = {
+      x: (ca.left + ca.right) / 2,
+      y: (ca.top + ca.bottom) / 2,
+    };
+  }
+
+  var zoomOptions = chartInstance.options.zoom;
+
+  if (zoomOptions && helpers.getValueOrDefault(zoomOptions.enabled, defaultOptions.zoom.enabled)) {
+    // Do the zoom here
+    var zoomMode = helpers.getValueOrDefault(chartInstance.options.zoom.mode, defaultOptions.zoom.mode);
+    zoomOptions.sensitivity = helpers.getValueOrDefault(chartInstance.options.zoom.sensitivity, defaultOptions.zoom.sensitivity);
+
+    // Which axe should be modified when figers were used.
+    var _whichAxes;
+    if (zoomMode == 'xy' && whichAxes !== undefined) {
+      // based on fingers positions
+      _whichAxes = whichAxes;
+    } else {
+      // no effect
+      _whichAxes = 'xy';
+    }
+
+    helpers.each(chartInstance.scales, function(scale, id) {
+      if (scale.isHorizontal() && directionEnabled(zoomMode, 'x') && directionEnabled(_whichAxes, 'x')) {
+        zoomOptions.scaleAxes = "x";
+        zoomScale(scale, zoom, center, zoomOptions);
+      } else if (!scale.isHorizontal() && directionEnabled(zoomMode, 'y') && directionEnabled(_whichAxes, 'y')) {
+        // Do Y zoom
+        zoomOptions.scaleAxes = "y";
+        zoomScale(scale, zoom, center, zoomOptions);
+      }
+    });
+
+    chartInstance.update(0);
+  }
+}
+
+function panIndexScale(scale, delta, panOptions) {
+  var labels = scale.chart.data.labels;
+  var lastLabelIndex = labels.length - 1;
+  var offsetAmt = Math.max((scale.ticks.length - ((scale.options.gridLines.offsetGridLines) ? 0 : 1)), 1);
+  var panSpeed = panOptions.speed;
+  var minIndex = scale.minIndex;
+  var step = Math.round(scale.width / (offsetAmt * panSpeed));
+  var maxIndex;
+
+  zoomNS.panCumulativeDelta += delta;
+
+  minIndex = zoomNS.panCumulativeDelta > step ? Math.max(0, minIndex -1) : zoomNS.panCumulativeDelta < -step ? Math.min(lastLabelIndex - offsetAmt + 1, minIndex + 1) : minIndex;
+  zoomNS.panCumulativeDelta = minIndex !== scale.minIndex ? 0 : zoomNS.panCumulativeDelta;
+
+  maxIndex = Math.min(lastLabelIndex, minIndex + offsetAmt - 1);
+
+  scale.options.ticks.min = rangeMinLimiter(panOptions, labels[minIndex]);
+  scale.options.ticks.max = rangeMaxLimiter(panOptions, labels[maxIndex]);
+}
+
+function panTimeScale(scale, delta, panOptions) {
+  var options = scale.options;
+  var limitedMax = rangeMaxLimiter(panOptions, scale.getValueForPixel(scale.getPixelForValue(scale.max) - delta));
+  var limitedMin = rangeMinLimiter(panOptions, scale.getValueForPixel(scale.getPixelForValue(scale.min) - delta));
+
+  var limitedTimeDelta = delta < 0 ? limitedMax - scale.max : limitedMin - scale.min;
+
+  options.time.max = scale.max + limitedTimeDelta;
+  options.time.min = scale.min + limitedTimeDelta;
+}
+
+function panNumericalScale(scale, delta, panOptions) {
+  var tickOpts = scale.options.ticks;
+  var start = scale.start,
+    end = scale.end;
+
+  if (tickOpts.reverse) {
+    tickOpts.max = scale.getValueForPixel(scale.getPixelForValue(start) - delta);
+    tickOpts.min = scale.getValueForPixel(scale.getPixelForValue(end) - delta);
+  } else {
+    tickOpts.min = scale.getValueForPixel(scale.getPixelForValue(start) - delta);
+    tickOpts.max = scale.getValueForPixel(scale.getPixelForValue(end) - delta);
+  }
+  tickOpts.min = rangeMinLimiter(panOptions, tickOpts.min);
+  tickOpts.max = rangeMaxLimiter(panOptions, tickOpts.max);
+}
+
+function panScale(scale, delta, panOptions) {
+  var fn = panFunctions[scale.options.type];
+  if (fn) {
+    fn(scale, delta, panOptions);
+  }
+}
+
+function doPan(chartInstance, deltaX, deltaY) {
+  var panOptions = chartInstance.options.pan;
+  if (panOptions && helpers.getValueOrDefault(panOptions.enabled, defaultOptions.pan.enabled)) {
+    var panMode = helpers.getValueOrDefault(chartInstance.options.pan.mode, defaultOptions.pan.mode);
+    panOptions.speed = helpers.getValueOrDefault(chartInstance.options.pan.speed, defaultOptions.pan.speed);
+
+    helpers.each(chartInstance.scales, function(scale, id) {
+      if (scale.isHorizontal() && directionEnabled(panMode, 'x') && deltaX !== 0) {
+        panOptions.scaleAxes = "x";
+        panScale(scale, deltaX, panOptions);
+      } else if (!scale.isHorizontal() && directionEnabled(panMode, 'y') && deltaY !== 0) {
+        panOptions.scaleAxes = "y";
+        panScale(scale, deltaY, panOptions);
+      }
+    });
+
+    chartInstance.update(0);
+  }
+}
+
+function positionInChartArea(chartInstance, position) {
+  return  (position.x >= chartInstance.chartArea.left && position.x <= chartInstance.chartArea.right) &&
+    (position.y >= chartInstance.chartArea.top && position.y <= chartInstance.chartArea.bottom);
+}
+
+function getYAxis(chartInstance) {
+  var scales = chartInstance.scales;
+
+  for (var scaleId in scales) {
+    var scale = scales[scaleId];
+
+    if (!scale.isHorizontal()) {
+      return scale;
+    }
+  }
+}
+
+// Store these for later
+zoomNS.zoomFunctions.category = zoomIndexScale;
+zoomNS.zoomFunctions.time = zoomTimeScale;
+zoomNS.zoomFunctions.linear = zoomNumericalScale;
+zoomNS.zoomFunctions.logarithmic = zoomNumericalScale;
+zoomNS.panFunctions.category = panIndexScale;
+zoomNS.panFunctions.time = panTimeScale;
+zoomNS.panFunctions.linear = panNumericalScale;
+zoomNS.panFunctions.logarithmic = panNumericalScale;
+// Globals for catergory pan and zoom
+zoomNS.panCumulativeDelta = 0;
+zoomNS.zoomCumulativeDelta = 0;
+
+// Chartjs Zoom Plugin
+var zoomPlugin = {
+  afterInit: function(chartInstance) {
+    helpers.each(chartInstance.scales, function(scale) {
+      scale.originalOptions = helpers.clone(scale.options);
+    });
+
+    chartInstance.resetZoom = function() {
+      helpers.each(chartInstance.scales, function(scale, id) {
+        var timeOptions = scale.options.time;
+        var tickOptions = scale.options.ticks;
+
+        if (timeOptions) {
+          timeOptions.min = scale.originalOptions.time.min;
+          timeOptions.max = scale.originalOptions.time.max;
+        }
+
+        if (tickOptions) {
+          tickOptions.min = scale.originalOptions.ticks.min;
+          tickOptions.max = scale.originalOptions.ticks.max;
+        }
+      });
+
+      helpers.each(chartInstance.data.datasets, function(dataset, id) {
+        dataset._meta = null;
+      });
+
+      chartInstance.update();
+    };
+
+  },
+  beforeInit: function(chartInstance) {
+    chartInstance.zoom = {};
+
+    var node = chartInstance.zoom.node = chartInstance.chart.ctx.canvas;
+
+    var options = chartInstance.options;
+    var panThreshold = helpers.getValueOrDefault(options.pan ? options.pan.threshold : undefined, zoomNS.defaults.pan.threshold);
+    if (!options.zoom || !options.zoom.enabled) {
+      return;
+    }
+    if (options.zoom.drag) {
+      // Only want to zoom horizontal axis
+      options.zoom.mode = 'x';
+
+      chartInstance.zoom._mouseDownHandler = function(event) {
+        chartInstance.zoom._dragZoomStart = event;
+      };
+      node.addEventListener('mousedown', chartInstance.zoom._mouseDownHandler);
+
+      chartInstance.zoom._mouseMoveHandler = function(event){
+        if (chartInstance.zoom._dragZoomStart) {
+          chartInstance.zoom._dragZoomEnd = event;
+          chartInstance.update(0);
+        }
+      };
+      node.addEventListener('mousemove', chartInstance.zoom._mouseMoveHandler);
+
+      chartInstance.zoom._mouseUpHandler = function(event){
+        if (chartInstance.zoom._dragZoomStart) {
+          var chartArea = chartInstance.chartArea;
+          var yAxis = getYAxis(chartInstance);
+          var beginPoint = chartInstance.zoom._dragZoomStart;
+          var offsetX = beginPoint.target.getBoundingClientRect().left;
+          var startX = Math.min(beginPoint.clientX, event.clientX) - offsetX;
+          var endX = Math.max(beginPoint.clientX, event.clientX) - offsetX;
+          var dragDistance = endX - startX;
+          var chartDistance = chartArea.right - chartArea.left;
+          var zoom = 1 + ((chartDistance - dragDistance) / chartDistance );
+
+          // Remove drag start and end before chart update to stop drawing selected area
+          chartInstance.zoom._dragZoomStart = null;
+          chartInstance.zoom._dragZoomEnd = null;
+
+          if (dragDistance > 0) {
+            doZoom(chartInstance, zoom, {
+              x: (dragDistance / 2) + startX,
+              y: (yAxis.bottom - yAxis.top) / 2,
+            });
+          }
+        }
+      };
+      node.addEventListener('mouseup', chartInstance.zoom._mouseUpHandler);
+    } else {
+      chartInstance.zoom._wheelHandler = function(event) {
+        var rect = event.target.getBoundingClientRect();
+        var offsetX = event.clientX - rect.left;
+        var offsetY = event.clientY - rect.top;
+
+        var center = {
+          x : offsetX,
+          y : offsetY
+        };
+
+        if (event.deltaY < 0) {
+          doZoom(chartInstance, 1.1, center);
+        } else {
+          doZoom(chartInstance, 0.909, center);
+        }
+        // Prevent the event from triggering the default behavior (eg. Content scrolling).
+        event.preventDefault();
+      };
+
+      node.addEventListener('wheel', chartInstance.zoom._wheelHandler);
+    }
+
+    if (Hammer) {
+      var mc = new Hammer.Manager(node);
+      mc.add(new Hammer.Pinch());
+      mc.add(new Hammer.Pan({
+        threshold: panThreshold
+      }));
+
+      // Hammer reports the total scaling. We need the incremental amount
+      var currentPinchScaling;
+      var handlePinch = function handlePinch(e) {
+        var diff = 1 / (currentPinchScaling) * e.scale;
+        var rect = e.target.getBoundingClientRect();
+        var offsetX = e.center.x - rect.left;
+        var offsetY = e.center.y - rect.top;
+        var center = {
+          x : offsetX,
+          y : offsetY
+        };
+
+        // fingers position difference
+        var x = Math.abs(e.pointers[0].clientX - e.pointers[1].clientX);
+        var y = Math.abs(e.pointers[0].clientY - e.pointers[1].clientY);
+
+        // diagonal fingers will change both (xy) axes
+        var p = x / y;
+        var xy;
+        if (p > 0.3 && p < 1.7) {
+          xy = 'xy';
+        }
+        // x axis
+        else if (x > y) {
+          xy = 'x';
+        }
+        // y axis
+        else {
+          xy = 'y';
+        }
+
+        doZoom(chartInstance, diff, center, xy);
+
+        // Keep track of overall scale
+        currentPinchScaling = e.scale;
+      };
+
+      mc.on('pinchstart', function(e) {
+        currentPinchScaling = 1; // reset tracker
+      });
+      mc.on('pinch', handlePinch);
+      mc.on('pinchend', function(e) {
+        handlePinch(e);
+        currentPinchScaling = null; // reset
+        zoomNS.zoomCumulativeDelta = 0;
+      });
+
+      var currentDeltaX = null, currentDeltaY = null, panning = false;
+      var handlePan = function handlePan(e) {
+        if (currentDeltaX !== null && currentDeltaY !== null) {
+          panning = true;
+          var deltaX = e.deltaX - currentDeltaX;
+          var deltaY = e.deltaY - currentDeltaY;
+          currentDeltaX = e.deltaX;
+          currentDeltaY = e.deltaY;
+          doPan(chartInstance, deltaX, deltaY);
+        }
+      };
+
+      mc.on('panstart', function(e) {
+        currentDeltaX = 0;
+        currentDeltaY = 0;
+        handlePan(e);
+      });
+      mc.on('panmove', handlePan);
+      mc.on('panend', function(e) {
+        currentDeltaX = null;
+        currentDeltaY = null;
+        zoomNS.panCumulativeDelta = 0;
+        setTimeout(function() { panning = false; }, 500);
+      });
+
+      chartInstance.zoom._ghostClickHandler = function(e) {
+        if (panning) {
+          e.stopImmediatePropagation();
+          e.preventDefault();
+        }
+      };
+      node.addEventListener('click', chartInstance.zoom._ghostClickHandler);
+
+      chartInstance._mc = mc;
+    }
+  },
+
+  beforeDatasetsDraw: function(chartInstance) {
+    var ctx = chartInstance.chart.ctx;
+    var chartArea = chartInstance.chartArea;
+    ctx.save();
+    ctx.beginPath();
+
+    if (chartInstance.zoom._dragZoomEnd) {
+      var yAxis = getYAxis(chartInstance);
+      var beginPoint = chartInstance.zoom._dragZoomStart;
+      var endPoint = chartInstance.zoom._dragZoomEnd;
+      var offsetX = beginPoint.target.getBoundingClientRect().left;
+      var startX = Math.min(beginPoint.clientX, endPoint.clientX) - offsetX;
+      var endX = Math.max(beginPoint.clientX, endPoint.clientX) - offsetX;
+      var rectWidth = endX - startX;
+
+
+      ctx.fillStyle = 'rgba(225,225,225,0.3)';
+      ctx.lineWidth = 5;
+      ctx.fillRect(startX, yAxis.top, rectWidth, yAxis.bottom - yAxis.top);
+    }
+
+    ctx.rect(chartArea.left, chartArea.top, chartArea.right - chartArea.left, chartArea.bottom - chartArea.top);
+    ctx.clip();
+  },
+
+  afterDatasetsDraw: function(chartInstance) {
+    chartInstance.chart.ctx.restore();
+  },
+
+  destroy: function(chartInstance) {
+    if (chartInstance.zoom) {
+      var options = chartInstance.options;
+      var node = chartInstance.zoom.node;
+
+      if (options.zoom && options.zoom.drag) {
+        node.removeEventListener('mousedown', chartInstance.zoom._mouseDownHandler);
+        node.removeEventListener('mousemove', chartInstance.zoom._mouseMoveHandler);
+        node.removeEventListener('mouseup', chartInstance.zoom._mouseUpHandler);
+      } else {
+        node.removeEventListener('wheel', chartInstance.zoom._wheelHandler);
+      }
+
+      if (Hammer) {
+        node.removeEventListener('click', chartInstance.zoom._ghostClickHandler);
+      }
+
+      delete chartInstance.zoom;
+
+      var mc = chartInstance._mc;
+      if (mc) {
+        mc.remove('pinchstart');
+        mc.remove('pinch');
+        mc.remove('pinchend');
+        mc.remove('panstart');
+        mc.remove('pan');
+        mc.remove('panend');
+      }
+    }
+  }
+};
+
+module.exports = zoomPlugin;
+Chart.pluginService.register(zoomPlugin);
+
+},{"chart.js":1,"hammerjs":1}]},{},[2]);

data/app/assets/stylesheets/chartjs/zoomable/application.css

@@ -0,0 +1,15 @@
+/*
+ * This is a manifest file that'll be compiled into application.css, which will include all the files
+ * listed below.
+ *
+ * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
+ * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
+ *
+ * You're free to add application-wide styles to this file and they'll appear at the bottom of the
+ * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
+ * files in this directory. Styles in this file should be added after the last require_* statement.
+ * It is generally better to create a new file per style scope.
+ *
+ *= require_tree .
+ *= require_self
+ */

data/app/controllers/chartjs/zoomable/application_controller.rb

@@ -0,0 +1,7 @@
+module Chartjs
+  module Zoomable
+    class ApplicationController < ActionController::Base
+      protect_from_forgery with: :exception
+    end
+  end
+end

data/app/helpers/chartjs/zoomable/application_helper.rb

@@ -0,0 +1,6 @@
+module Chartjs
+  module Zoomable
+    module ApplicationHelper
+    end
+  end
+end

data/app/jobs/chartjs/zoomable/application_job.rb

@@ -0,0 +1,6 @@
+module Chartjs
+  module Zoomable
+    class ApplicationJob < ActiveJob::Base
+    end
+  end
+end

data/app/mailers/chartjs/zoomable/application_mailer.rb

@@ -0,0 +1,8 @@
+module Chartjs
+  module Zoomable
+    class ApplicationMailer < ActionMailer::Base
+      default from: 'from@example.com'
+      layout 'mailer'
+    end
+  end
+end

data/app/models/chartjs/zoomable/application_record.rb

@@ -0,0 +1,7 @@
+module Chartjs
+  module Zoomable
+    class ApplicationRecord < ActiveRecord::Base
+      self.abstract_class = true
+    end
+  end
+end

data/app/views/layouts/chartjs/zoomable/application.html.erb

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Chartjs zoomable</title>
+  <%= csrf_meta_tags %>
+  <%= csp_meta_tag %>
+
+  <%= stylesheet_link_tag    "chartjs/zoomable/application", media: "all" %>
+  <%= javascript_include_tag "chartjs/zoomable/application" %>
+</head>
+<body>
+
+<%= yield %>
+
+</body>
+</html>

data/config/routes.rb

@@ -0,0 +1,2 @@
+Chartjs::Zoomable::Engine.routes.draw do
+end

data/lib/chartjs/zoomable.rb

@@ -0,0 +1,7 @@
+require "chartjs/zoomable/engine"
+
+module Chartjs
+  module Zoomable
+    # Your code goes here...
+  end
+end

data/lib/chartjs/zoomable/engine.rb

@@ -0,0 +1,7 @@
+module Chartjs
+  module Zoomable
+    class Engine < ::Rails::Engine
+      isolate_namespace Chartjs::Zoomable
+    end
+  end
+end

data/lib/chartjs/zoomable/version.rb

@@ -0,0 +1,5 @@
+module Chartjs
+  module Zoomable
+    VERSION = '1.0.0'
+  end
+end

data/lib/tasks/chartjs/zoomable_tasks.rake

@@ -0,0 +1,4 @@
+# desc "Explaining what the task does"
+# task :chartjs_zoomable do
+#   # Task goes here
+# end

metadata

@@ -0,0 +1,105 @@
+--- !ruby/object:Gem::Specification
+name: chartjs-zoomable
+version: !ruby/object:Gem::Version
+  version: 1.0.0
+platform: ruby
+authors:
+- Mateusz Michalski
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2018-11-21 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 5.2.1
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 5.2.1
+- !ruby/object:Gem::Dependency
+  name: chartjs-ror
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 3.6.2
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 3.6.2
+- !ruby/object:Gem::Dependency
+  name: sqlite3
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+description: chartjs-zoomable lets you use Chartjs graphs using helper methods in
+  your views with zoom and pan functionality
+email:
+- nytorian@icloud.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- MIT-LICENSE
+- README.md
+- Rakefile
+- app/assets/config/chartjs_zoomable_manifest.js
+- app/assets/javascripts/chartjs/zoomable/application.js
+- app/assets/javascripts/chartjs/zoomable/chartjs-plugin-zoom.js
+- app/assets/stylesheets/chartjs/zoomable/application.css
+- app/controllers/chartjs/zoomable/application_controller.rb
+- app/helpers/chartjs/zoomable/application_helper.rb
+- app/jobs/chartjs/zoomable/application_job.rb
+- app/mailers/chartjs/zoomable/application_mailer.rb
+- app/models/chartjs/zoomable/application_record.rb
+- app/views/layouts/chartjs/zoomable/application.html.erb
+- config/routes.rb
+- lib/chartjs/zoomable.rb
+- lib/chartjs/zoomable/engine.rb
+- lib/chartjs/zoomable/version.rb
+- lib/tasks/chartjs/zoomable_tasks.rake
+homepage: https://github.com/Nytorian/chartjs-zoomable
+licenses:
+- MIT
+metadata: {}
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubyforge_project: 
+rubygems_version: 2.5.1
+signing_key: 
+specification_version: 4
+summary: Simplifies usage of Chart.js in Rails views with zoom and pan plugin!
+test_files: []