Merge branch 'feature-track-interval' of https://github.com/Stigmatoz/web-activity-time-tracker

Author: Stigmatoz

src/icons/heat-map-16.png

@@ -24,9 +24,14 @@
       <a id="btnByDays">By days</a>
       <a id="settings">Settings</a>
    </div>
+   <div id="blockForChartBtn">
+      <a class="button active chart-btn chart-btn-donut" id="donutChartBtn">Common chart</a>
+      <a class="button chart-btn chart-btn-heatmap" id="heatMapChartBtn">Time chart</a>
+   </div>
    <div id="chart"></div>
+   <div id="timeChart"></div>
    <div id="resultTable" class="list-of-site"></div>
-   <div id="total" class="inline-flex"></div>
+   <div id="total"></div>
    <div id="byDays" class="calendar-block"></div>
 
    <svg class="height-0">

src/icons/pie-chart.png

@@ -3,7 +3,7 @@
 
         "name": "Web Activity Time Tracker",
         "short_name": "Web Time Tracker",
-        "version": "1.1.3",
+        "version": "1.2.0",
         "minimum_chrome_version": "26",
 
         "description": "Track and limit time your activity in the browser.",

src/index.html

@@ -10,7 +10,7 @@ class Activity {
                 if (currentTab !== tab.url) {
                     isDifferentUrl = true;
                 }
-                this.setCurrentActiveTab(domain);
+                
                 if (this.isNewUrl(domain) && !this.isInBlackList(domain)) {
                     var favicon = tab.favIconUrl;
                     if (favicon === undefined) {
@@ -20,7 +20,8 @@ class Activity {
                     tabs.push(newTab);
                 }
 
-                if (isDifferentUrl) {
+                if (isDifferentUrl && !this.isInBlackList(domain)) {
+                    this.setCurrentActiveTab(domain);
                     var tabUrl = this.getTab(domain);
                     if (tabUrl !== undefined)
                         tabUrl.incCounter();
@@ -99,10 +100,21 @@ class Activity {
     }
 
     setCurrentActiveTab(domain) {
+        this.closeIntervalForCurrentTab();
         currentTab = domain;
     }
 
     clearCurrentActiveTab() {
+        this.closeIntervalForCurrentTab();
         currentTab = '';
     }
+
+    closeIntervalForCurrentTab() {
+        if (currentTab !== '') {
+            var tabUrl = this.getTab(currentTab);
+            if (tabUrl !== undefined)
+                tabUrl.closeInterval();
+            currentTab = '';
+        }
+    }
 };

src/manifest.json

@@ -30,24 +30,29 @@ function backgroundCheck() {
                     activity.addTab(activeTab);
                 }
 
-                if (tab !== undefined) {
-                    activity.setCurrentActiveTab(tab.url);
-                    chrome.idle.queryState(parseInt(setting_interval_inactivity), function (state) {
-                        if (state === 'active') {
-                            mainTRacker(activeUrl, tab, activeTab);
-                        }
-                        else checkDOM(state, activeUrl, tab, activeTab);
+                if (activity.isInBlackList(activeUrl)) {
+                    chrome.browserAction.setBadgeBackgroundColor({ color: '#FF0000' })
+                    chrome.browserAction.setBadgeText({
+                        tabId: activeTab.id,
+                        text: 'n/a'
                     });
                 } else {
-                    if (activity.isInBlackList(activeUrl)) {
-                        chrome.browserAction.setBadgeBackgroundColor({ color: '#FF0000' })
-                        chrome.browserAction.setBadgeText({
-                            tabId: activeTab.id,
-                            text: 'n/a'
+                    if (tab !== undefined) {
+                        if (currentTab !== tab.url) {
+                            tab.incCounter();
+                            activity.setCurrentActiveTab(tab.url);
+                        }
+                        chrome.idle.queryState(parseInt(setting_interval_inactivity), function (state) {
+                            if (state === 'active') {
+                                mainTRacker(activeUrl, tab, activeTab);
+                            }
+                            else checkDOM(state, activeUrl, tab, activeTab);
                         });
                     }
                 }
             }
+        } else {
+            activity.closeIntervalForCurrentTab();
         }
     });
 }
@@ -60,21 +65,13 @@ function mainTRacker(activeUrl, tab, activeTab) {
         tab.incSummaryTime();
     }
     if (setting_view_in_badge === true) {
-        if (activity.isInBlackList(activeUrl)) {
-            chrome.browserAction.setBadgeBackgroundColor({ color: '#FF0000' })
-            chrome.browserAction.setBadgeText({
-                tabId: activeTab.id,
-                text: 'n/a'
-            });
-        } else {
-            chrome.browserAction.setBadgeBackgroundColor({ color: [0, 0, 0, 0] })
-            var today = new Date().toLocaleDateString("en-US");
-            var summary = tab.days.find(s => s.date === today).summary;
-            chrome.browserAction.setBadgeText({
-                tabId: activeTab.id,
-                text: String(convertSummaryTimeToBadgeString(summary))
-            });
-        }
+        chrome.browserAction.setBadgeBackgroundColor({ color: [0, 0, 0, 0] })
+        var today = new Date().toLocaleDateString("en-US");
+        var summary = tab.days.find(s => s.date === today).summary;
+        chrome.browserAction.setBadgeText({
+            tabId: activeTab.id,
+            text: String(convertSummaryTimeToBadgeString(summary))
+        });
     } else {
         chrome.browserAction.setBadgeBackgroundColor({ color: [0, 0, 0, 0] })
         chrome.browserAction.setBadgeText({
@@ -100,9 +97,10 @@ function isVideoPlayedOnPage() {
 }
 
 function checkDOM(state, activeUrl, tab, activeTab) {
-    if (state === 'idle') {
+    if (state === 'idle' && isDomainEquals(activeUrl, "youtube.com")) {
         checkPermissions(mainTRacker, activeUrl, tab, activeTab);
     }
+    else activity.closeIntervalForCurrentTab();
 }
 
 function checkPermissions(callback, activeUrl, tab, activeTab) {
@@ -114,6 +112,7 @@ function checkPermissions(callback, activeUrl, tab, activeTab) {
             chrome.tabs.executeScript({ code: "var videoElement = document.getElementsByTagName('video')[0]; (videoElement !== undefined && videoElement.currentTime > 0 && !videoElement.paused && !videoElement.ended && videoElement.readyState > 2);" }, (results) => {
                 if (results !== undefined && results[0] !== undefined && results[0] === true)
                     callback(activeUrl, tab, activeTab);
+                else activity.closeIntervalForCurrentTab();
             });
         }
     });
@@ -159,22 +158,22 @@ function addListener() {
             checkSettingsImEmpty();
         }
     });
-    chrome.storage.onChanged.addListener(function(changes, namespace) {
+    chrome.storage.onChanged.addListener(function (changes, namespace) {
         for (var key in changes) {
-            if (key === STORAGE_BLACK_LIST){
+            if (key === STORAGE_BLACK_LIST) {
                 loadBlackList();
             }
-            if (key === STORAGE_RESTRICTION_LIST){
+            if (key === STORAGE_RESTRICTION_LIST) {
                 loadRestrictionList();
             }
-            if (key === SETTINGS_INTERVAL_INACTIVITY){
+            if (key === SETTINGS_INTERVAL_INACTIVITY) {
                 storage.getSettings(SETTINGS_INTERVAL_INACTIVITY, function (item) { setting_interval_inactivity = item; });
             }
-            if (key === SETTINGS_VIEW_TIME_IN_BADGE){
+            if (key === SETTINGS_VIEW_TIME_IN_BADGE) {
                 storage.getSettings(SETTINGS_VIEW_TIME_IN_BADGE, function (item) { setting_view_in_badge = item; });
             }
         }
-      });
+    });
 
     chrome.runtime.setUninstallURL("https://docs.google.com/forms/d/e/1FAIpQLSdImHtvey6sg5mzsQwWfAQscgZOOV52blSf9HkywSXJhuQQHg/viewform");
 }
@@ -200,7 +199,7 @@ function loadRestrictionList() {
     })
 }
 
-function loadSettings(){
+function loadSettings() {
     storage.getSettings(SETTINGS_INTERVAL_INACTIVITY, function (item) { setting_interval_inactivity = item; });
     storage.getSettings(SETTINGS_VIEW_TIME_IN_BADGE, function (item) { setting_view_in_badge = item; });
 }

src/scripts/activity.js

@@ -226,8 +226,8 @@ function donutChart() {
 }
 
 function barChart(data) {
-    var margin = { top: 5, right: 5, bottom: 25, left: 5 },
-        width = 485,
+    var margin = { top: 25, right: 5, bottom: 25, left: 5 },
+        width = 555,
         height = 160;
 
     // set the ranges
@@ -282,4 +282,180 @@ function barChart(data) {
 
     if (data.length > 9)
         document.querySelectorAll('#barChart g.tick ').forEach(element => { element.remove() });
+}
+
+function drawIntervalChart(data) {
+    data.forEach(function (item) {
+        var hFrom = getHourFrom(item.interval);
+        var hTo = getHourTo(item.interval);
+        if (hFrom != hTo) {
+            var sourceTimeFrom = item.interval.split('-')[0].split(':');
+            var sourceTimeTo = item.interval.split('-')[1].split(':');
+            var timeTo = sourceTimeFrom[0] + ":" + 59 + ":" + 59;
+            var timeFrom = sourceTimeTo[0] + ":" + 00 + ":" + 00;
+            data.push({ "domain": item.domain, "interval": item.interval.split('-')[0] + "-" + timeTo });
+            data.push({ "domain": item.domain, "interval": timeFrom + "-" + item.interval.split('-')[1] });
+        }
+    });
+
+    var margin = { top: 5, right: 10, bottom: 20, left: 20 },
+        width = 580 - margin.left - margin.right,
+        height = 410 - margin.top - margin.bottom;
+
+    //linear 24 hour scale
+    var y = d3.scaleLinear()
+        .domain([0, 60])
+        .range([height, 0]);
+
+    //vertical axis
+    var yAxis = d3.axisLeft()
+        .ticks(10)
+        .scale(y);
+
+    var x = d3.scaleLinear()
+        .domain([0, 24])
+        .range([0, width]);
+
+    //vertical axis
+    var xAxis = d3.axisBottom()
+        .ticks(24)
+        .scale(x)
+
+    var tickDistance = 4.38;
+
+    var tooltip = d3.select("#timeChart")
+        .append("div")
+        .style("opacity", 0)
+        .style("display", "none")
+        .style("position", "absolute")
+        .attr("class", "tooltip")
+        .style("background-color", "white")
+        .style("border", "solid")
+        .style("border-width", "1px")
+        .style("border-radius", "5px")
+        .style("padding", "5px")
+
+    // Three function that change the tooltip when user hover / move / leave a cell
+    var mouseover = function (d) {
+        tooltip
+            .style("opacity", 1)
+            .style("display", "block")
+        d3.select(this)
+            .style("stroke", "black")
+            .style("stroke-width", "0.5px")
+            .style("opacity", 1)
+    }
+    var mousemove = function (d) {
+        tooltip
+            .html(d.domain + "<br>" + d.interval)
+            .style("left", (d3.mouse(this)[0]) + 10 + "px")
+            .style("top", (d3.mouse(this)[1]) + 30 + "px")
+    }
+    var mouseleave = function (d) {
+        tooltip
+            .style("opacity", 0)
+            .style("display", "none")
+        d3.select(this)
+            .style("stroke", "none")
+            .style("opacity", 0.8)
+    }
+
+    //create the svg
+    var svg = d3.select("#timeChart").append("svg")
+        .attr("width", width + margin.left + margin.right)
+        .attr("height", height + margin.top + margin.bottom)
+        .append("g")
+        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
+
+    //draw the axis.
+    svg.append("g")
+        .attr("class", "x axis")
+        .attr("transform", "translate(0," + height + ")")
+        .attr("class", "label")
+        .call(xAxis)
+        .append("text")
+        .text("Value");
+
+    // Add a y-axis with label.
+    svg.append("g")
+        .attr("class", "y axis")
+        .call(yAxis)
+        .append("text")
+        .attr("class", "label")
+        .attr("y", 6)
+        .attr("dy", ".71em")
+        .attr("text-anchor", "end")
+        .attr("transform", "rotate(-90)")
+        .text("Value");
+
+    svg.append("g")
+        .attr("class", "grid")
+        .attr("transform", "translate(0," + height + ")")
+        .call(make_x_axis()
+            .tickSize(-height, 0, 0)
+        )
+
+    svg.append("g")
+        .attr("class", "grid")
+        .call(make_y_axis()
+            .tickSize(-width, 0, 0)
+        )
+
+    //draw the bars, offset y and bar height based on data
+    svg.selectAll(".bar")
+        .data(data)
+        .enter()
+        .append("rect")
+        .style("fill", "orangered")
+        .style("stroke", "#f1f1f1")
+        .style("stroke-width", "1")
+        .attr("class", "bar")
+        .attr("x", function (d) {
+            return x(getHourFrom(d.interval)) + 2;
+        })
+        .attr("width", 20)
+        .attr("y", function (d) {
+            return y(getMinutesTo(d.interval)) - 1;
+        })
+        .attr("height", function (d) {
+            var offset = getMinutesTo(d.interval) - getMinutesFrom(d.interval);
+            if (offset == 0)
+                return 1;
+            else return offset * tickDistance;
+        })
+        .on("mouseover", mouseover)
+        .on("mousemove", mousemove)
+        .on("mouseleave", mouseleave);
+
+    function make_x_axis() {
+        return d3.axisBottom()
+            .scale(x)
+            .ticks(24)
+    }
+
+    function make_y_axis() {
+        return d3.axisLeft()
+            .scale(y)
+            .ticks(10)
+    }
+
+    function getHourFrom(interval) {
+        var time = interval.split('-')[0];
+        return time.split(':')[0];
+    }
+
+    function getHourTo(interval) {
+        var time = interval.split('-')[1];
+        return time.split(':')[0];
+    }
+
+    function getMinutesFrom(interval) {
+        var time = interval.split('-')[0];
+        return time.split(':')[1];
+    }
+
+    function getMinutesTo(interval) {
+        var time = interval.split('-')[1];
+        return time.split(':')[1];
+    }
 }