Implement euclidean distance of clicks and area

src/heatContainer.js

@@ -115,10 +115,29 @@ function countClicks (x1, y1, x2, y2) {
   return counter;
 }
 
+function getClicksInWindow (x1, y1, x2, y2) {
+  const instance = stateObject['heatmap'].instance;
+  const points = instance.getData().data;
+  const list = [];
+  for(let i = 0; i < points.length; ++i) {
+    const point = points[i];
+    if (point.x >= x1 && point.y >= y1) {
+      if (point.x <= x2 && point.y <= y2) {
+       list.push(point);
+      }
+    }
+  }
+  return list;
+}
+
 function totalClicks () {
   return stateObject['data'].length;
 }
 
+function getData () {
+  return stateObject['data'];
+}
+
 function logTransform (logString) {
   const data = logString.split("\n")
   .filter(v => v.split(',').length > 3)
@@ -193,49 +212,48 @@ function updateDivText (div, posLeft, posTop, xBottom, yBottom) {
   <span style="font-size:14px">Proporção em relação ao total: ${ratio}</span>`;
 }
 
-
-export default {
-  init,
-  updateLogString,
-  countClicks,
-  totalClicks
+function clicksEuclideanDist (points) {
+  if(points.length <= 1) {
+    return 0;
+  } else if (points.length == 2) {
+    const p1 = points[0];
+    const p2 = points[1];
+    return euclideanDist(p1, p2);
+  } else {
+    let count = 0;
+    points.reduce((p1, p2) => {
+      count += euclideanDist(p1, p2);
+      return p2;
+    });
+    return count;
+  }
 }
 
-/**
- var x1, y1, x2, y2;
-var sequencia = 1;
+function calcPixelsPerClick () {
+  const data = getData();
+  const totalPixels = clicksEuclideanDist(data);
+  return totalPixels / totalClicks();
+}
 
-window.onclick = function(evt) {
-    var elemen = document.querySelector(".heatmap-canvas");
-    if (sequencia == 1) {
-     if (evt.pageX || evt.pageY) {
-        x1 = evt.pageX;
-        y1 = evt.pageY;
-     } else {
-        x1 = evt.clientX + document.body.scrollLeft + elemen.scrollLeft;
-        y1 = evt.clientY + document.body.scrollTop + elemen.scrollTop;
-       }
-     x1 -= elemen.offsetLeft;
-       y1 -= elemen.offsetTop;
-       sequencia ++;
-    } else {
-      if (evt.pageX || evt.pageY) {
-        x2 = evt.pageX;
-        y2 = evt.pageY;
-     } else {
-        x2 = evt.clientX + document.body.scrollLeft + elemen.scrollLeft;
-        y2 = evt.clientY + document.body.scrollTop + elemen.scrollTop;
-       }
-    x2 -= elemen.offsetLeft;
-       y2 -= elemen.offsetTop;
-       
-      var width = Math.abs(x2 - x1);
-      var height = Math.abs(y2 - y1);
-      sequencia = 1;
+function calcPixelsPerClickInArea () {
+  if(div == null) {
+    return 0;
+  }
+  const data = getClicksInWindow(posLeft, posTop, xBottom, yBottom);
+  const totalPixels = clicksEuclideanDist(data);
+  return totalPixels / countClicks(posLeft, posTop, xBottom, yBottom);
+}
 
+function euclideanDist (p1, p2) {
+  return Math.sqrt(Math.pow(p1.x-p2.x, 2) + Math.pow(p1.y-p2.y, 2));
+}
 
-        $('#line-heatmap-canvas').append($('<div style="position: absolute; border: 1px solid green; top: '+(y1 - 580)+'px; left: '+x1+'px; width: '+width+'px; height: '+height+'px; "></div>'));
-            
-    }
+export default {
+  init,
+  updateLogString,
+  countClicks,
+  totalClicks,
+  getData,
+  calcPixelsPerClick,
+  calcPixelsPerClickInArea
 }
- */