heatmap-rails 0.1.1 → 0.1.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 568b92121f25bb606764d5c28b365142210db651
-  data.tar.gz: 4bba25dc14b8727dd7080691467c56c1c64f8d68
+  metadata.gz: 87094bab47af8ff7d11ffa1ad7859bfd676663f0
+  data.tar.gz: b29655825150001bb58b16a34730967a674d113f
 SHA512:
-  metadata.gz: b9dfe95586c7eb8f2f22487586e25ece9506c8ae384f6b36ebbeef1bf541f225602f045b5fd1065913346d186fe18d8eb15fb590aee70a13a975d8ada57825ce
-  data.tar.gz: 25a45b31e1530430f91083afa58c577700501df9045886b42edd59cee98f01085f9ecdf877b860c6bd8f11c88af22dfa394688dfcc0e044adcd3afc76f79f3ac
+  metadata.gz: b73c339204943ab57d3581404621c0e40df06b887756845f74e12918753d3b6e431a06ab5cd81d2e3916abf5dc39ff045e1029bb805901842562ee98926ed220
+  data.tar.gz: d1d14d96f0a6168e02df4389680407713dc8921c642056cef95d239dd2bac112e50391963714785ea62c39da972fbd0a2da49f8bf675c6f22694e5b21e3e704a

data/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    heatmap-rails (0.1.0)
+    heatmap-rails (0.1.2)
 
 GEM
   remote: https://rubygems.org/

data/README.md

@@ -1,16 +1,11 @@
-# HeatmapRb :construction:
+[![Gem Version](https://badge.fury.io/rb/heatmap-rails.svg)](https://badge.fury.io/rb/heatmap-rails)
+
+# Heatmap-Rails
 
 Integrate heatmaps in your web application to see on which part the user spends most time on your web application. Where does users click on the page.
 Helping in gathering analytics to find out what works on the web, what attracts most of the users.
 View user interactions and make your application more amazing! :sparkles:
-
-## Local Testing
-
-Use
-
-```ruby
-gem 'heatmap-rails', git: 'https://github.com/Qbatch/heatmap-rails.git'
-```
+[Demo](https://heatmap-rails.herokuapp.com/)
 
 ## Installation
 
@@ -31,7 +26,8 @@ Or install it yourself as:
 ## Usage
 
 1. Install the gem
-2. Run the command to generate migration:
+
+2. Run the command to generate a migration to save heatmaps data:
 ```console
 $ rails g heatmap_rails:install
 ```
@@ -50,8 +46,13 @@ $ rake db:migrate
 ```erb
 <%= show_heatmap(request.path) %>
 ```
+6. Before adding headmap.js in the application install **jquery-rails** gem and require it in application.js file
+```js
+//= require jquery
+```
+
 
-6. In respective JS file, Require HeatMap.Js to show the heatmap:
+7. In respective JS file, Require HeatMap.Js to show the heatmap:
 ```js
 //= require heatmap.js
 ```
@@ -69,43 +70,47 @@ The viewing can be done in multiple ways, for example if you want only the admin
 <% end %>
 ```
 
-Another way can be using some code in URL. For example is you want to use URL like
+Another way can be using some param in the URL. For example if you want to use URL like:
 
 ```url
-www.website.com/see_heatmap
+www.website.com/?see_heatmap
 ```
 
 You can use:
 
 ```erb
-<% if request.path.include?("see_heatmap") %>
+<% if request.query_parameters.include?("see_heatmap") %>
     <%= show_heatmap(request.path) %>
 <% end %>
 ```
 
-And there can be multiple ways!
 ### Options
 
-You can customize:
+You can customize the max stack limits before the data is sent to server side via http request. We understand for different application the average user interactions time on a specific page varies. You can set these values w.r.t to your application's needs:
 ```erb
 <%= save_heatmap({click: 3, move: 50}) %>
 ```
-These are default values.
+The default values for clicks is `3`. For mouse movements tracking its `50`.
+
+```erb
+<%= save_heatmap({click: 3, move: 50, html_element: 'body'}) %>
+```
+you can even restrict heatmap generation to a specific DOM element. Default value for DOM element is `body` element. This can be change to any `.class` or any '#id'.  
 
-## Development :construction:
+## Development
 
 After checking out the repo, run `bin/setup` to install dependencies. Then, run `rake spec` to run the tests. You can also run `bin/console` for an interactive prompt that will allow you to experiment.
 
 To install this gem onto your local machine, run `bundle exec rake install`. To release a new version, update the version number in `version.rb`, and then run `bundle exec rake release`, which will create a git tag for the version, push git commits and tags, and push the `.gem` file to [rubygems.org](https://rubygems.org).
 
 ## Credits
-heatmap-rails uses [HeatMap.Js](https://www.patrick-wied.at/static/heatmapjs/) to generated show heatmaps.
+heatmap-rails uses [HeatMap.Js](https://www.patrick-wied.at/static/heatmapjs/) to show generated data in form of heatmaps.
 
 ## Contributing :construction:
 
 1. [Bug reports](https://github.com/Qbatch/heatmap-rails/issues) are always welcome.
 2. [Pull Requests](https://github.com/Qbatch/heatmap-rails/pulls). Suggest or Update.
 
-## License :construction:
+## License
 
 The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).

data/Rakefile

@@ -1,6 +1,2 @@
 require "bundler/gem_tasks"
-require "rspec/core/rake_task"
-
-RSpec::Core::RakeTask.new(:spec)
-
 task :default => :spec

data/app/controllers/points_controller.rb

@@ -3,14 +3,14 @@ class PointsController < ApplicationController
   skip_before_action :verify_authenticity_token
 
   def create
-    if params[:data].present?
-      for i in 0..Heatmap::Rails.options[:click]-1
-        HeatMap.create(path: params[:data]["#{i}"][:path], click_type: 'click',xpath: params[:data]["#{i}"][:xpath])
+    if params[:click_data].present? && params[:total_clicks].to_i > 0
+      for i in 0..params[:total_clicks].to_i-1
+         HeatMap.create(path: params[:click_data]["#{i}"][:path], click_type: 'click',xpath: params[:click_data]["#{i}"][:xpath], offset_x: params[:click_data]["#{i}"][:offset_x], offset_y: params[:click_data]["#{i}"][:offset_y])
       end
     end
-    if params[:move_data].present?
-      for i in 0..Heatmap::Rails.options[:move]-1
-        HeatMap.create(path: params[:move_data]["#{i}"][:path], click_type: 'click',xpath: params[:move_data]["#{i}"][:xpath])
+    if params[:move_data].present? && params[:total_moves].to_i > 0
+      for i in 0..params[:total_moves].to_i-1
+        HeatMap.create(path: params[:move_data]["#{i}"][:path], click_type: 'move',xpath: params[:move_data]["#{i}"][:xpath], offset_x: params[:move_data]["#{i}"][:offset_x], offset_y: params[:move_data]["#{i}"][:offset_y])
       end
     end
   end

data/bin/console

@@ -1,7 +1,7 @@
 #!/usr/bin/env ruby
 
 require "bundler/setup"
-require "heatmap-rails"
+require "heatmap/rails"
 
 # You can add fixtures and/or initialization code here to make experimenting
 # with your gem easier. You can also use a different console, if you like.

data/heatmap-rails.gemspec

@@ -1,11 +1,11 @@
 
 lib = File.expand_path("../lib", __FILE__)
 $LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
-require "heatmap/version"
+require "heatmap/rails/version"
 
 Gem::Specification.new do |spec|
   spec.name          = "heatmap-rails"
-  spec.version       = Heatmap::VERSION
+  spec.version       = Heatmap::Rails::VERSION
   spec.authors       = ["Hassan"]
   spec.email         = ["hassan@qbatch.com"]
 

data/lib/generators/heatmap_rails/templates/initializer.rb

@@ -3,6 +3,8 @@ class CreateHeatMaps < ActiveRecord::Migration[5.1]
     create_table :heat_maps do |t|
       t.string :path
       t.string :click_type
+      t.float :offset_x
+      t.float :offset_y
       t.text :xpath
 
       t.timestamps

data/lib/heatmap/rails.rb

@@ -0,0 +1,12 @@
+require "heatmap/rails/version"
+require "heatmap/rails/engine"
+require "heatmap/rails/helper"
+
+module Heatmap
+  module Rails
+    class << self
+      attr_accessor :options
+    end
+    self.options = {click: 3, move: 10, html_element: 'body'}
+  end
+end

data/lib/heatmap/rails/engine.rb

@@ -0,0 +1,11 @@
+module Heatmap
+  module Rails
+    class Engine < ::Rails::Engine
+      initializer "helper" do
+        ActiveSupport.on_load(:action_view) do
+          include Helper
+        end
+      end
+    end
+  end
+end

data/lib/heatmap/{helper.rb → rails/helper.rb}

@@ -7,17 +7,21 @@ module Heatmap
 
       click = options[:click] || Heatmap::Rails.options[:click]
       move = options[:move] || Heatmap::Rails.options[:move]
-
+      html_element = options[:html_element] || Heatmap::Rails.options[:html_element]
       html = ""
 
       js = <<JS
 <script type="text/javascript">
 $( document ).ready(function() {
   var move_array = [];
-  document.querySelector('body').onmousemove = function(ev) {
+  document.querySelector('#{html_element}').onmousemove = function(ev) {
     var xpath_element =  xpathstring(ev);
-    var pageCoords = { path: window.location.pathname,  type: 'move', xpath: xpath_element };
-    console.log(xpath_element);
+    var element_width = ev.target.getBoundingClientRect().width;
+    var element_height= ev.target.getBoundingClientRect().height;
+    offset_x_element = ev.offsetX / element_width;
+    offset_y_element = ev.offsetY /  element_height;
+    var pageCoords = { path: window.location.pathname,  type: 'move', xpath: xpath_element, offset_x: offset_x_element ,  offset_y: offset_y_element, };
+
     var obj = move_array.find(function (obj) { return obj.xpath === xpath_element; });
     if (obj == null){
      move_array.push(pageCoords);
@@ -25,21 +29,28 @@ $( document ).ready(function() {
     if (move_array.length >= parseInt(#{move}))
     {
       var coordinates = move_array;
-      sendRequest({'move_data': coordinates});
+      sendRequest({'move_data': coordinates,'total_moves': #{move} });
       move_array = [];
     }
+
+
   };
   var click_array = [];
-  document.querySelector('body').onclick = function(ev) {
+  document.querySelector('#{html_element}').onclick = function(ev) {
 
     var xpath_element=  xpathstring(ev);
-    var pageCoords = { path: window.location.pathname,  type: 'click', xpath: xpath_element };
+    var element_width = ev.target.getBoundingClientRect().width;
+    var element_height= ev.target.getBoundingClientRect().height;
+    offset_x_element = ev.offsetX / element_width;
+    offset_y_element = ev.offsetY /  element_height;
+    var pageCoords = { path: window.location.pathname,  type: 'click', xpath: xpath_element, offset_x: offset_x_element ,  offset_y: offset_y_element, };
     click_array.push(pageCoords);
     if (click_array.length >= parseInt(#{click}))
     {
       var coordinates = click_array;
-      sendRequest({'data': coordinates});
+      sendRequest({'click_data': coordinates, 'total_clicks': #{click} });
       click_array = [];
+
     }
   };
   function sendRequest(coordinates_data){
@@ -113,7 +124,7 @@ JS
       @data_points = []
       @data_xpaths = []
       heatmap.each do |coordinate|
-        @data_xpaths.push({xpath: coordinate.xpath, x: 0, y:0, value: 100})
+        @data_xpaths.push({xpath: coordinate.xpath, offset_x: coordinate.offset_x, offset_y:coordinate.offset_y, value: 100})
       end
       html = ""
       js = <<JS
@@ -122,13 +133,31 @@ JS
     container: document.querySelector('body'),
     radius: 40
   });
+  function getOffset( path ) {
+    el = document.evaluate(path, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
+    var _x = 0;
+    var _y = 0;
+    while( el && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) ) {
+        _x += el.offsetLeft - el.scrollLeft;
+        _y += el.offsetTop - el.scrollTop;
+        el = el.offsetParent;
+    }
+    return { y: _y, x: _x };
+  }
+  function getElement(xpath){
+     return document.evaluate(xpath, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
+  }
   var xpath = JSON.parse('#{raw(@data_xpaths.to_json.html_safe)}');
   var data_xpath = xpath.map(function(path){
-    var x_coord = getOffset(path.xpath).x+25;
-    var y_coord = getOffset(path.xpath).y+25;
+    width = getElement(path.xpath).getBoundingClientRect().width;
+    height = getElement(path.xpath).getBoundingClientRect().height;
+    var x_coord = getOffset(path.xpath).x+  (width * path.offset_x);
+    var y_coord = getOffset(path.xpath).y+  (height * path.offset_y);
     delete path["xpath"];
-    path.x = parseInt(x_coord);
-    path.y = parseInt(y_coord);
+    delete path["offset_x"];
+    delete path["offset_y"];
+    path.x = Math.ceil(parseFloat(x_coord));
+    path.y = Math.ceil(parseFloat(y_coord));
     return path;
   });
   heatmapInstance.addData(data_xpath);

data/lib/heatmap/rails/version.rb

@@ -0,0 +1,5 @@
+module Heatmap
+  module Rails
+    VERSION = "0.1.2"
+  end
+end

data/spec/heatmap_rails_spec.rb

@@ -0,0 +1,15 @@
+require 'spec_helper'
+require 'heatmap/rails/helper'
+
+RSpec.describe Heatmap do
+  it "has a version number" do
+    expect(Heatmap::Rails::VERSION).not_to be nil
+  end
+end
+
+RSpec.describe Heatmap::Helper do
+  def run_save_heatmap
+   Heatmap::Helper.save_heatmap({move: 10, click: 2, html_element: '#test'})
+  end
+  let(:processed_message) { run_save_heatmap() }
+end

data/spec/spec_helper.rb

@@ -1,5 +1,5 @@
 require "bundler/setup"
-require "heatmap-rails"
+require "heatmap/rails/helper"
 
 RSpec.configure do |config|
   # Enable flags like --only-failures and --next-failure

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: heatmap-rails
 version: !ruby/object:Gem::Version
-  version: 0.1.1
+  version: 0.1.2
 platform: ruby
 authors:
 - Hassan
 autorequire: 
 bindir: exe
 cert_chain: []
-date: 2017-12-06 00:00:00.000000000 Z
+date: 2017-12-11 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bundler
@@ -76,11 +76,11 @@ files:
 - heatmap-rails.gemspec
 - lib/generators/heatmap_rails/install_generator.rb
 - lib/generators/heatmap_rails/templates/initializer.rb
-- lib/heatmap-rails.rb
-- lib/heatmap/engine.rb
-- lib/heatmap/helper.rb
-- lib/heatmap/version.rb
-- spec/heatmap_rb_spec.rb
+- lib/heatmap/rails.rb
+- lib/heatmap/rails/engine.rb
+- lib/heatmap/rails/helper.rb
+- lib/heatmap/rails/version.rb
+- spec/heatmap_rails_spec.rb
 - spec/spec_helper.rb
 homepage: https://github.com/Qbatch/heatmap-rails
 licenses:

data/lib/heatmap-rails.rb

@@ -1,12 +0,0 @@
-require "heatmap/version"
-require "heatmap/engine"
-require "heatmap/helper"
-
-module Heatmap
-  module Rails
-    class << self
-      attr_accessor :options
-    end
-    self.options = {click: 3, move: 10}
-  end
-end

data/lib/heatmap/engine.rb

@@ -1,9 +0,0 @@
-module Heatmap
-  class Engine < Rails::Engine
-    initializer "helper" do
-      ActiveSupport.on_load(:action_view) do
-        include Helper
-      end
-    end
-  end
-end

data/lib/heatmap/version.rb

@@ -1,3 +0,0 @@
-module Heatmap
-  VERSION = "0.1.1"
-end

data/spec/heatmap_rb_spec.rb

@@ -1,9 +0,0 @@
-RSpec.describe HeatmapRb do
-  it "has a version number" do
-    expect(HeatmapRb::VERSION).not_to be nil
-  end
-
-  it "does something useful" do
-    expect(false).to eq(true)
-  end
-end