From 4b65abbf98ddde384749191258c37850c8a65892 Mon Sep 17 00:00:00 2001 From: Marina Samuel Date: Wed, 20 Aug 2014 17:46:40 -0400 Subject: [PATCH] Add date subtitles and styling. --- data/about-you.html | 1 + data/about-you.js | 5 ++- data/charts/InterestDashboard.js | 37 +++++++++++++++---- data/css/devmenu/styles.css | 32 ++++++++++++---- lib/PlacesInterestsUtils.js | 3 +- .../interestDashboardDataProcessorBolt.js | 3 +- 6 files changed, 62 insertions(+), 19 deletions(-) diff --git a/data/about-you.html b/data/about-you.html index a4e2396..4fc4ea4 100644 --- a/data/about-you.html +++ b/data/about-you.html @@ -61,6 +61,7 @@ Rank Category + Recent Activity diff --git a/data/about-you.js b/data/about-you.js index d25fc22..2b7ac9e 100644 --- a/data/about-you.js +++ b/data/about-you.js @@ -52,8 +52,9 @@ self.port.on("init", function() { "paging": false, "searching": false, "columns": [ - { "width": "64px" }, - { "width": "250px" }, + { "width": "74px" }, + { "width": "231px" }, + { "width": "0px" }, { "width": "400px" }, { "width": "40px" } ] diff --git a/data/charts/InterestDashboard.js b/data/charts/InterestDashboard.js index d63dd7b..f2b6552 100644 --- a/data/charts/InterestDashboard.js +++ b/data/charts/InterestDashboard.js @@ -36,17 +36,17 @@ function InterestDashboard() { InterestDashboard.prototype = { _getMaxDate: function(days) { let max = 0; - for (let day in days) { - if (Number(day) > max) { - max = Number(day); + for (let day of days) { + if (day.timestamp > max) { + max = day.timestamp; } } - return d3.time.format('%A, %B %e, %Y')(new Date(days[max].x)); + return d3.time.format('%A, %B %e, %Y')(new Date(max / 1000)); }, _computeTimeString: function(timestamp) { let AMorPM = "am"; - let date = new Date(timestamp); + let date = new Date(timestamp / 1000); let hours = date.getHours(); let minutes = date.getMinutes() < 10 ? ("0" + date.getMinutes()) : date.getMinutes(); if (hours > 12) { @@ -63,7 +63,8 @@ InterestDashboard.prototype = { "
" + (i + 1) + "
", "
" + categoryObj.name + "
" + "
(" + categoryObj.visitCount + ")
", - this._getMaxDate(categoryObj.days), + "
", + this._getMaxDate(data.historyVisits[categoryObj.name]), null ]).draw(); @@ -84,17 +85,39 @@ InterestDashboard.prototype = { $scope.dailyAvg = data.totalDailyAvg.toFixed(0); }, + _isNewDay: function(currentTimestamp, newTimestamp) { + let currDate = new Date(currentTimestamp / 1000); + let newDate = new Date(newTimestamp / 1000); + + return (currDate.getDate() != newDate.getDate()) || + (currDate.getMonth() != newDate.getMonth()) || + (currDate.getYear() != newDate.getYear()); + }, + _formatSubtable: function(historyVisits) { + let currentDay = historyVisits[0].timestamp; + let table = '
'; for (let visitIndex = 0; visitIndex < historyVisits.length; visitIndex++) { let visit = historyVisits[visitIndex]; let time = this._computeTimeString(visit.timestamp); let lastVisitString = visitIndex == (historyVisits.length - 1) ? 'lastVisit' : ''; + if (this._isNewDay(currentDay, visit.timestamp)) { + table += '' + + '' + + '' + + '' + + '' + + '' + + ''; + currentDay = visit.timestamp; + } + table += '' + '' + '' + - '' + + '' + '' ''; diff --git a/data/css/devmenu/styles.css b/data/css/devmenu/styles.css index fbad312..ae40b3d 100644 --- a/data/css/devmenu/styles.css +++ b/data/css/devmenu/styles.css @@ -236,7 +236,7 @@ table.dataTable thead th { .time { width: 55px; - padding-left: 260px !important; + padding-left: 270px !important; } .domain { font-size: 13px; @@ -261,23 +261,34 @@ table.dataTable thead th { font-size: 13px; color: #AFAFAF; } +.subtitleCircle { + width: 12px; + height: 12px; + margin-left: 4px; + margin-right: 5px; + background-color: #FFFFFF; + border: 2px solid #6A7B86;; + border-radius: 50%; + box-shadow: 0 0 2px #888; + visibility: hidden; +} .timelineCircle { background: #6A7B86; width: 10px; height: 10px; border-radius: 50%; + margin-left: 5px; + margin-right: 5px; } -.timelineCircle:not(.lastVisit):after { +.timelineCircle:not(.lastVisit):after, +.subtitleCircle:after { content: ""; + top:10px; border-left: solid 2px #6A7B86; left: 40%; position: relative; display: block; - height: 55px; -} -.historyVisitFavicon { - margin-left: 5px; - margin-right: 5px; + height: 40px; } #subtable { background: linear-gradient(#FFFFFF, #F9F9F9); @@ -288,7 +299,12 @@ table.dataTable thead th { background: transparent; border-top: none; } - +tr.shown .subtitleCircle, .alwaysVisible { + visibility: visible !important; +} +tr:not(.shown) .subtitleCircle { + visibility: hidden; +} /* Sidebar */ diff --git a/lib/PlacesInterestsUtils.js b/lib/PlacesInterestsUtils.js index 1ca8eed..30ef8bd 100644 --- a/lib/PlacesInterestsUtils.js +++ b/lib/PlacesInterestsUtils.js @@ -101,7 +101,8 @@ let PlacesInterestsUtils = { query += id + ", "; } query = query.substring(0, query.length - 2); // Remove extra comma. - query += ")"; + query += ") " + + "ORDER BY timestamp DESC"; return this._execute(query, { columns: ["timestamp", "title", "url", "favicon"], diff --git a/lib/streams/interestDashboardDataProcessorBolt.js b/lib/streams/interestDashboardDataProcessorBolt.js index 6f7ef4b..8fb189e 100644 --- a/lib/streams/interestDashboardDataProcessorBolt.js +++ b/lib/streams/interestDashboardDataProcessorBolt.js @@ -70,8 +70,9 @@ let InterestDashboardDataProcessorBolt = { return Task.spawn(function() { let kMaxVisits = 50; for (let category of categoryList) { + let visitIDLength = category.visitIDs.length; let visitQueryList = category.visitIDs.length > kMaxVisits ? - category.visitIDs.slice(0, kMaxVisits) : + category.visitIDs.slice(visitIDLength - 1 - kMaxVisits, visitIDLength) : category.visitIDs; yield getHistoryDetails(category.name, visitQueryList); }
' + d3.time.format('%A, %B %e, %Y')(new Date(visit.timestamp / 1000)); + '
' + time + '
' + visit.url + '
' + '
- ' + visit.title + '