Merge pull request #769 from prikshittekta/heatmaps-resolution

Heatmaps resolution options

Author: ar2rsawseen

plugins/views/api/api.js

@@ -192,38 +192,19 @@ var pluginOb = {},
      */
     function getHeatmap(params) {
         var result = {types: [], data: []};
-        var devices = [
-            {
-                type: "all",
-                displayText: "All",
-                minWidth: 0,
-                maxWidth: 10240
-            },
-            {
-                type: "mobile",
-                minWidth: 0,
-                maxWidth: 767
-            },
-            {
-                type: "tablet",
-                minWidth: 767,
-                maxWidth: 1024
-            },
-            {
-                type: "desktop",
-                minWidth: 1024,
-                maxWidth: 10240
-            },
-        ];
-
-        var deviceType = params.qstring.deviceType;
+
+        var device = {};
+        try {
+            device = JSON.parse(params.qstring.device);
+        }
+        catch (SyntaxError) {
+            console.log('Parse device failed: ', params.qstring.device);
+        }
+
         var actionType = params.qstring.actionType;
-        var device = devices.filter((obj) => {
-            return obj.type === deviceType;
-        });
 
-        if (!device.length) {
-            common.returnMessage(params, 400, 'Bad request parameter: device type');
+        if (!(device.minWidth >= 0) || !(device.maxWidth >= 0)) {
+            common.returnMessage(params, 400, 'Bad request parameter: device');
             return false;
         }
         var collectionName = "drill_events" + crypto.createHash('sha1').update("[CLY]_action" + params.qstring.app_id).digest('hex');
@@ -345,8 +326,8 @@ var pluginOb = {},
                     queryObject.ts.$lt = queryObject.ts.$lt.getTime() + queryObject.ts.$lt.getTimezoneOffset() * 60000;
 
                     queryObject["sg.width"] = {};
-                    queryObject["sg.width"].$gt = device[0].minWidth;
-                    queryObject["sg.width"].$lte = device[0].maxWidth;
+                    queryObject["sg.width"].$gt = device.minWidth;
+                    queryObject["sg.width"].$lte = device.maxWidth;
                     queryObject["sg.type"] = actionType;
 
                     var projections = {

plugins/views/frontend/public/heatmap.js

@@ -1,7 +1,7 @@
 (function() {
     var pageWidth = 0,
         pageHeight = 0,
-        currentDevice = Countly.passed_data.currentDevice && Countly.passed_data.currentDevice.length ? Countly.passed_data.currentDevice : [],
+        currentDevice = Countly.passed_data.currentDevice && Countly.passed_data.currentDevice.length && Countly.passed_data.currentDevice[0] ? Countly.passed_data.currentDevice : [],
         currentMap = Countly.passed_data.currentMap == "scroll" ? "scroll" : "click",
         showHeatMap = Countly.passed_data.showHeatMap == false ? false : true,
         clickMap,
@@ -12,7 +12,7 @@
             document.body.style.position = "relative";
             var origtop = document.body.style.top;
             var toppx = 59;
-            var devices = [
+            var allDevices = [
                 {
                     type: "all",
                     displayText: "All",
@@ -32,13 +32,45 @@
                     maxWidth: 1024
                 },
                 {
-                    type: "desktop",
-                    displayText: "Desktop",
+                    type: "desktop-1280",
+                    displayText: "Desktop - 1280",
                     minWidth: 1024,
-                    maxWidth: 10240
+                    maxWidth: 1280
+                },
+                {
+                    type: "desktop-1366",
+                    displayText: "Desktop - 1366",
+                    minWidth: 1280,
+                    maxWidth: 1366
+                },
+                {
+                    type: "desktop-1440",
+                    displayText: "Desktop - 1440",
+                    minWidth: 1366,
+                    maxWidth: 1440
+                },
+                {
+                    type: "desktop-1600",
+                    displayText: "Desktop - 1600",
+                    minWidth: 1440,
+                    maxWidth: 1600
+                },
+                {
+                    type: "desktop-1920",
+                    displayText: "Desktop - 1920",
+                    minWidth: 1600,
+                    maxWidth: 1920
                 },
+                {
+                    type: "desktop-other",
+                    displayText: "Desktop - Other",
+                    minWidth: null,
+                    maxWidth: 10240
+                }
             ];
 
+            var devices = [];
+
             if (origtop) {
                 toppx += parseInt(origtop);
             }
@@ -49,8 +81,6 @@
             topbar.setAttribute("id", "cly-heatmap-topbar");
             document.body.appendChild(topbar);
 
-
-
             if (currentDevice.length) {
                 pageWidth = Countly._internals.getDocWidth();
                 pageWidth = Math.min(currentDevice[0].maxWidth, pageWidth);
@@ -62,6 +92,20 @@
             else {
                 pageWidth = Countly._internals.getDocWidth();
                 pageHeight = Countly._internals.getDocHeight() - toppx;
+            }
+
+            for (var i = 0; i < allDevices.length; i++) {
+                if ((allDevices[i].minWidth != null) && (allDevices[i].minWidth < pageWidth)) {
+                    devices.push(allDevices[i]);
+                }
+
+                if (allDevices[i].type === "desktop-other" && (devices.length > 3)) {
+                    devices.push(allDevices[i]);
+                    devices[devices.length - 1].minWidth = devices[devices.length - 2].maxWidth;
+                }
+            }
+
+            if (!currentDevice.length) {
                 currentDevice = devices.filter((deviceObj) => {
                     return deviceObj.minWidth < pageWidth && deviceObj.maxWidth >= pageWidth && deviceObj.type != "all";
                 });
@@ -205,6 +249,9 @@
                         if (device.type == "all") {
                             return deviceObj.type == "all";
                         }
+                        else if (device.type == "desktop-other") {
+                            return deviceObj.type == "desktop-other";
+                        }
                         else {
                             return deviceObj.minWidth < pageWidth && deviceObj.maxWidth >= pageWidth && deviceObj.type != "all";
                         }
@@ -305,6 +352,9 @@
                         if (currentDevice[0].type == "all") {
                             return deviceObj.type == "all";
                         }
+                        else if (currentDevice[0].type == "desktop-other") {
+                            return deviceObj.type == "desktop-other";
+                        }
                         else {
                             return deviceObj.minWidth < pageWidth && deviceObj.maxWidth >= pageWidth && deviceObj.type != "all";
                         }
@@ -473,7 +523,7 @@
                 }
 
                 function loadData() {
-                    sendXmlHttpRequest({ app_key: Countly.app_key, view: Countly._internals.getLastView() || window.location.pathname, period: period, deviceType: currentDevice[0].type, actionType: actionType }, apiPath, function(err, clicks) {
+                    sendXmlHttpRequest({ app_key: Countly.app_key, view: Countly._internals.getLastView() || window.location.pathname, period: period, device: JSON.stringify(currentDevice[0]), actionType: actionType }, apiPath, function(err, clicks) {
                         if (!err) {
                             dataCache[currentDevice[0].type] = clicks.data;
                             drawData();
@@ -538,7 +588,7 @@
                 }
 
                 function loadData() {
-                    sendXmlHttpRequest({ app_key: Countly.app_key, view: Countly._internals.getLastView() || window.location.pathname, period: period, deviceType: currentDevice[0].type, actionType: actionType }, apiPath, function(err, scrolls) {
+                    sendXmlHttpRequest({ app_key: Countly.app_key, view: Countly._internals.getLastView() || window.location.pathname, period: period, device: JSON.stringify(currentDevice[0]), actionType: actionType }, apiPath, function(err, scrolls) {
                         if (!err) {
                             dataCache[currentDevice[0].type] = scrolls.data;
                             drawData();
@@ -728,4 +778,4 @@
             }
         }
     }
-})();
+})();

plugins/views/frontend/public/stylesheets/heatmap.css

@@ -219,7 +219,7 @@
 }
 
 #cly-heatmap-topbar .cly-heatmap-dropdown .cly-heatmap-menu .cly-heatmap-list {
-    max-height: 300px;
+    max-height: 350px;
     overflow: auto
 }