Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Heatmaps resolution options #769

Merged
merged 2 commits into from
Dec 18, 2018
Merged

Heatmaps resolution options #769

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ff98f71
heatmaps additional resolution options added
itsiprikshit Dec 15, 2018
e123afa
heatmap resolution option lower limit check
itsiprikshit Dec 18, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
45 changes: 13 additions & 32 deletions plugins/views/api/api.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand Down Expand Up @@ -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 = {
Expand Down
70 changes: 60 additions & 10 deletions plugins/views/frontend/public/heatmap.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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,
Expand All @@ -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",
Expand 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);
}
Expand All @@ -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);
Expand All @@ -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";
});
Expand Down Expand Up @@ -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";
}
Expand Down Expand Up @@ -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";
}
Expand Down Expand Up @@ -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();
Expand Down Expand Up @@ -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();
Expand Down Expand Up @@ -728,4 +778,4 @@
}
}
}
})();
})();
2 changes: 1 addition & 1 deletion plugins/views/frontend/public/stylesheets/heatmap.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -219,7 +219,7 @@
}

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

Expand Down