From 51c3f0d77a63fceb3a86dfa99ea9fcdcf7ab0d77 Mon Sep 17 00:00:00 2001 From: psychobunny Date: Mon, 29 Sep 2014 03:39:28 -0400 Subject: [PATCH] topic presence graph, coolest one yet imo --- public/src/forum/admin/general/dashboard.js | 78 +++++++++++++++++---- src/socket.io/meta.js | 35 +++++++-- src/views/admin/general/dashboard.tpl | 10 +++ 3 files changed, 104 insertions(+), 19 deletions(-) diff --git a/public/src/forum/admin/general/dashboard.js b/public/src/forum/admin/general/dashboard.js index d4a83fd469..2d7e785af3 100644 --- a/public/src/forum/admin/general/dashboard.js +++ b/public/src/forum/admin/general/dashboard.js @@ -128,6 +128,7 @@ define('forum/admin/general/dashboard', ['semver'], function(semver) { updateRegisteredGraph(data.onlineRegisteredCount, data.onlineGuestCount); updatePresenceGraph(data.users.home, data.users.topics, data.users.category, idle); + updateTopicsGraph(data.topics); $('#active-users').html(html); }; @@ -135,20 +136,12 @@ define('forum/admin/general/dashboard', ['semver'], function(semver) { var graphs = { traffic: null, registered: null, - presence: null + presence: null, + topics: null }; - var colors = { - "red": "#bf616a", - "blue": "#5B90BF", - "orange": "#d08770", - "yellow": "#ebcb8b", - "green": "#a3be8c", - "teal": "#96b5b4", - "pale_blue": "#8fa1b3", - "purple": "#b48ead", - "brown": "#ab7967" - }; + var topicColors = ["#bf616a","#5B90BF","#d08770","#ebcb8b","#a3be8c","#96b5b4","#8fa1b3","#b48ead","#ab7967","#46BFBD"], + usedTopicColors = []; // from chartjs.org function lighten(col, amt) { @@ -195,9 +188,11 @@ define('forum/admin/general/dashboard', ['semver'], function(semver) { var trafficCanvas = document.getElementById('analytics-traffic'), registeredCanvas = document.getElementById('analytics-registered'), presenceCanvas = document.getElementById('analytics-presence'), + topicsCanvas = document.getElementById('analytics-topics'), trafficCtx = trafficCanvas.getContext('2d'), registeredCtx = registeredCanvas.getContext('2d'), presenceCtx = presenceCanvas.getContext('2d'), + topicsCtx = topicsCanvas.getContext('2d'), trafficLabels = getHoursArray(); var data = { @@ -226,7 +221,7 @@ define('forum/admin/general/dashboard', ['semver'], function(semver) { ] }; - trafficCanvas.width = $(trafficCanvas).parent().width(); + trafficCanvas.width = $(trafficCanvas).parent().width(); // is this necessary graphs.traffic = new Chart(trafficCtx).Line(data, { responsive: true }); @@ -273,6 +268,12 @@ define('forum/admin/general/dashboard', ['semver'], function(semver) { responsive: true }); + graphs.topics = new Chart(topicsCtx).Doughnut([], {responsive: true}); + topicsCanvas.onclick = function(evt){ + var activePoints = graphs.topics.getSegmentsAtEvent(evt); + console.log(activePoints); + }; + setInterval(updateTrafficGraph, 15000); updateTrafficGraph(); } @@ -305,5 +306,56 @@ define('forum/admin/general/dashboard', ['semver'], function(semver) { graphs.presence.update(); } + function updateTopicsGraph(topics) { + var tids = Object.keys(topics); + + var segments = graphs.topics.segments; + + for (var i = 0, ii = segments.length; i < ii; i++ ){ + var tid = segments[i].tid; + + if ($.inArray(tid, tids) === -1) { + usedTopicColors.splice($.inArray(segments[i].color, usedTopicColors), 1); + graphs.topics.removeData(i); + } else { + graphs.topics.segments[i].value = topics[tid]; + delete topics[tid]; + } + } + + while (segments.length < 10 && tids.length > 0) { + var tid = tids.pop(), + value = topics[tid], + color = null; + + if (!value) { + continue; + } + + do { + for (var i = 0, ii = topicColors.length; i < ii; i++) { + var chosenColor = topicColors[i]; + + if ($.inArray(chosenColor, usedTopicColors) === -1) { + color = chosenColor; + usedTopicColors.push(color); + break; + } + } + } while (color !== null && usedTopicColors.length === topicColors.length); + + graphs.topics.addData({ + value: tid, + color: color, + highlight: lighten(color, 10), + label: "tid " + value + }); + + segments[segments.length - 1].tid = tid; + } + + graphs.topics.update(); + } + return Admin; }); diff --git a/src/socket.io/meta.js b/src/socket.io/meta.js index f01b362c3c..88db6ccec9 100644 --- a/src/socket.io/meta.js +++ b/src/socket.io/meta.js @@ -84,7 +84,7 @@ SocketMeta.rooms.enter = function(socket, data, callback) { SocketMeta.rooms.getAll = function(socket, data, callback) { var rooms = websockets.server.sockets.manager.rooms, - userData = { + socketData = { onlineGuestCount: websockets.getOnlineAnonCount(), onlineRegisteredCount: websockets.getOnlineUserCount(), socketCount: websockets.getSocketCount(), @@ -92,20 +92,43 @@ SocketMeta.rooms.getAll = function(socket, data, callback) { home: rooms['/home'] ? rooms['/home'].length : 0, topics: 0, category: 0 - } + }, + topics: {} }; + var scores = {}, + topTenTopics = [], + tid; + for (var room in rooms) { if (rooms.hasOwnProperty(room)) { - if (room.match(/^\/topic/)) { - userData.users.topics += rooms[room].length + if (tid = room.match(/^\/topic_(\d+)/)) { + var length = rooms[room].length; + socketData.users.topics += length; + + if (scores[length]) { + scores[length].push(tid[1]); + } else { + scores[length] = [tid[1]]; + } } else if (room.match(/^\/category/)) { - userData.users.category += rooms[room].length + socketData.users.category += rooms[room].length } } } - callback(null, userData); + var scoreKeys = Object.keys(scores), + mostActive = scoreKeys.sort(); + + while(topTenTopics.length < 10 && mostActive.length > 0) { + topTenTopics = topTenTopics.concat(scores[mostActive.pop()]); + } + + topTenTopics.splice(0, 9).slice(0,9).forEach(function(tid) { + socketData.topics[tid] = rooms['/topic_' + tid].length; + }); + + callback(null, socketData); }; /* Exports */ diff --git a/src/views/admin/general/dashboard.tpl b/src/views/admin/general/dashboard.tpl index f0f6703270..df785df4c4 100644 --- a/src/views/admin/general/dashboard.tpl +++ b/src/views/admin/general/dashboard.tpl @@ -85,6 +85,16 @@ +
+
High Presence Topics
+
+
+
    + +
    +
    +
    +
    {stats.name}