Skip to content

Commit 87d40b6

Browse files
authored
Merge pull request #769 from prikshittekta/heatmaps-resolution
Heatmaps resolution options
2 parents 607d95c + e123afa commit 87d40b6

File tree

3 files changed

+74
-43
lines changed

3 files changed

+74
-43
lines changed

plugins/views/api/api.js

+13-32
Original file line numberDiff line numberDiff line change
@@ -192,38 +192,19 @@ var pluginOb = {},
192192
*/
193193
function getHeatmap(params) {
194194
var result = {types: [], data: []};
195-
var devices = [
196-
{
197-
type: "all",
198-
displayText: "All",
199-
minWidth: 0,
200-
maxWidth: 10240
201-
},
202-
{
203-
type: "mobile",
204-
minWidth: 0,
205-
maxWidth: 767
206-
},
207-
{
208-
type: "tablet",
209-
minWidth: 767,
210-
maxWidth: 1024
211-
},
212-
{
213-
type: "desktop",
214-
minWidth: 1024,
215-
maxWidth: 10240
216-
},
217-
];
218-
219-
var deviceType = params.qstring.deviceType;
195+
196+
var device = {};
197+
try {
198+
device = JSON.parse(params.qstring.device);
199+
}
200+
catch (SyntaxError) {
201+
console.log('Parse device failed: ', params.qstring.device);
202+
}
203+
220204
var actionType = params.qstring.actionType;
221-
var device = devices.filter((obj) => {
222-
return obj.type === deviceType;
223-
});
224205

225-
if (!device.length) {
226-
common.returnMessage(params, 400, 'Bad request parameter: device type');
206+
if (!(device.minWidth >= 0) || !(device.maxWidth >= 0)) {
207+
common.returnMessage(params, 400, 'Bad request parameter: device');
227208
return false;
228209
}
229210
var collectionName = "drill_events" + crypto.createHash('sha1').update("[CLY]_action" + params.qstring.app_id).digest('hex');
@@ -345,8 +326,8 @@ var pluginOb = {},
345326
queryObject.ts.$lt = queryObject.ts.$lt.getTime() + queryObject.ts.$lt.getTimezoneOffset() * 60000;
346327

347328
queryObject["sg.width"] = {};
348-
queryObject["sg.width"].$gt = device[0].minWidth;
349-
queryObject["sg.width"].$lte = device[0].maxWidth;
329+
queryObject["sg.width"].$gt = device.minWidth;
330+
queryObject["sg.width"].$lte = device.maxWidth;
350331
queryObject["sg.type"] = actionType;
351332

352333
var projections = {

plugins/views/frontend/public/heatmap.js

+60-10
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
(function() {
22
var pageWidth = 0,
33
pageHeight = 0,
4-
currentDevice = Countly.passed_data.currentDevice && Countly.passed_data.currentDevice.length ? Countly.passed_data.currentDevice : [],
4+
currentDevice = Countly.passed_data.currentDevice && Countly.passed_data.currentDevice.length && Countly.passed_data.currentDevice[0] ? Countly.passed_data.currentDevice : [],
55
currentMap = Countly.passed_data.currentMap == "scroll" ? "scroll" : "click",
66
showHeatMap = Countly.passed_data.showHeatMap == false ? false : true,
77
clickMap,
@@ -12,7 +12,7 @@
1212
document.body.style.position = "relative";
1313
var origtop = document.body.style.top;
1414
var toppx = 59;
15-
var devices = [
15+
var allDevices = [
1616
{
1717
type: "all",
1818
displayText: "All",
@@ -32,13 +32,45 @@
3232
maxWidth: 1024
3333
},
3434
{
35-
type: "desktop",
36-
displayText: "Desktop",
35+
type: "desktop-1280",
36+
displayText: "Desktop - 1280",
3737
minWidth: 1024,
38-
maxWidth: 10240
38+
maxWidth: 1280
39+
},
40+
{
41+
type: "desktop-1366",
42+
displayText: "Desktop - 1366",
43+
minWidth: 1280,
44+
maxWidth: 1366
45+
},
46+
{
47+
type: "desktop-1440",
48+
displayText: "Desktop - 1440",
49+
minWidth: 1366,
50+
maxWidth: 1440
51+
},
52+
{
53+
type: "desktop-1600",
54+
displayText: "Desktop - 1600",
55+
minWidth: 1440,
56+
maxWidth: 1600
57+
},
58+
{
59+
type: "desktop-1920",
60+
displayText: "Desktop - 1920",
61+
minWidth: 1600,
62+
maxWidth: 1920
3963
},
64+
{
65+
type: "desktop-other",
66+
displayText: "Desktop - Other",
67+
minWidth: null,
68+
maxWidth: 10240
69+
}
4070
];
4171

72+
var devices = [];
73+
4274
if (origtop) {
4375
toppx += parseInt(origtop);
4476
}
@@ -49,8 +81,6 @@
4981
topbar.setAttribute("id", "cly-heatmap-topbar");
5082
document.body.appendChild(topbar);
5183

52-
53-
5484
if (currentDevice.length) {
5585
pageWidth = Countly._internals.getDocWidth();
5686
pageWidth = Math.min(currentDevice[0].maxWidth, pageWidth);
@@ -62,6 +92,20 @@
6292
else {
6393
pageWidth = Countly._internals.getDocWidth();
6494
pageHeight = Countly._internals.getDocHeight() - toppx;
95+
}
96+
97+
for (var i = 0; i < allDevices.length; i++) {
98+
if ((allDevices[i].minWidth != null) && (allDevices[i].minWidth < pageWidth)) {
99+
devices.push(allDevices[i]);
100+
}
101+
102+
if (allDevices[i].type === "desktop-other" && (devices.length > 3)) {
103+
devices.push(allDevices[i]);
104+
devices[devices.length - 1].minWidth = devices[devices.length - 2].maxWidth;
105+
}
106+
}
107+
108+
if (!currentDevice.length) {
65109
currentDevice = devices.filter((deviceObj) => {
66110
return deviceObj.minWidth < pageWidth && deviceObj.maxWidth >= pageWidth && deviceObj.type != "all";
67111
});
@@ -205,6 +249,9 @@
205249
if (device.type == "all") {
206250
return deviceObj.type == "all";
207251
}
252+
else if (device.type == "desktop-other") {
253+
return deviceObj.type == "desktop-other";
254+
}
208255
else {
209256
return deviceObj.minWidth < pageWidth && deviceObj.maxWidth >= pageWidth && deviceObj.type != "all";
210257
}
@@ -305,6 +352,9 @@
305352
if (currentDevice[0].type == "all") {
306353
return deviceObj.type == "all";
307354
}
355+
else if (currentDevice[0].type == "desktop-other") {
356+
return deviceObj.type == "desktop-other";
357+
}
308358
else {
309359
return deviceObj.minWidth < pageWidth && deviceObj.maxWidth >= pageWidth && deviceObj.type != "all";
310360
}
@@ -473,7 +523,7 @@
473523
}
474524

475525
function loadData() {
476-
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) {
526+
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) {
477527
if (!err) {
478528
dataCache[currentDevice[0].type] = clicks.data;
479529
drawData();
@@ -538,7 +588,7 @@
538588
}
539589

540590
function loadData() {
541-
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) {
591+
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) {
542592
if (!err) {
543593
dataCache[currentDevice[0].type] = scrolls.data;
544594
drawData();
@@ -728,4 +778,4 @@
728778
}
729779
}
730780
}
731-
})();
781+
})();

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -219,7 +219,7 @@
219219
}
220220

221221
#cly-heatmap-topbar .cly-heatmap-dropdown .cly-heatmap-menu .cly-heatmap-list {
222-
max-height: 300px;
222+
max-height: 350px;
223223
overflow: auto
224224
}
225225

0 commit comments

Comments
 (0)