Add heatmap chart for interval

Author: Stigmatoz

src/index.html

@@ -25,8 +25,9 @@
       <a id="settings">Settings</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/scripts/activity.js

@@ -99,10 +99,18 @@ class Activity {
     }
 
     setCurrentActiveTab(domain) {
+        this.closeIntervalForCurrentTab();
         currentTab = domain;
     }
 
     clearCurrentActiveTab() {
+        this.closeIntervalForCurrentTab();
         currentTab = '';
     }
+
+    closeIntervalForCurrentTab(){
+        var tabUrl = this.getTab(currentTab);
+        if (tabUrl !== undefined)
+            tabUrl.closeInterval();
+    }
 };

src/scripts/background.js

@@ -48,6 +48,8 @@ function backgroundCheck() {
                     }
                 }
             }
+        } else {
+            activity.closeIntervalForCurrentTab();
         }
     });
 }

src/scripts/chart/chart-core.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,153 @@ 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("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)
+        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]) + 275 + "px")
+    }
+    var mouseleave = function (d) {
+        tooltip
+            .style("opacity", 0)
+        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");
+
+    //draw the bars, offset y and bar height based on data
+    svg.selectAll(".bar")
+        .data(data)
+        .enter()
+        .append("rect")
+        .style("fill", "lightgreen")
+        .style("stroke", "#f1f1f1")
+        .style("stroke-width", "1")
+        .attr("class", "bar")
+        .attr("x", function (d) {
+            return x(getHourFrom(d.interval));
+        })
+        .attr("width", 19)
+        .attr("y", function (d) {
+            return y(getMinutesTo(d.interval));
+        })
+        .attr("height", function (d) {
+            var offset = getMinutesTo(d.interval) - getMinutesFrom(d.interval);
+            // if (offset == 0)
+            //     return 2;
+            // else 
+            return offset * tickDistance;
+        })
+        .on("mouseover", mouseover)
+        .on("mousemove", mousemove)
+        .on("mouseleave", mouseleave);
+}
+
+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];
 }

src/scripts/tab.js

@@ -41,16 +41,41 @@ class Tab {
         }
         else {
             day['counter'] += 1;
+            this.addInterval(day);
         }
     }
 
     addNewDay(today) {
+        var date = new Date();
+        var stringDate = date.getHours() + ':' + date.getMinutes() + ':' + date.getSeconds();
         this.days.push(
             {
                 'date': today,
                 'summary': 1,
-                'counter': 1
+                'counter': 1,
+                'time': ["" + stringDate + '-'+ stringDate + ""]
             }
         );
     }
+
+    addInterval(day){
+        var date = new Date();
+        var stringDate = date.getHours() + ':' + date.getMinutes() + ':' + date.getSeconds();
+        if (day.time == undefined)
+            day.time = [stringDate + '-'+ stringDate]; 
+        else {
+            day.time.push(stringDate + '-' + stringDate);
+        }
+    }
+
+    closeInterval(){
+        var date = new Date();
+        var stringDate = date.getHours() + ':' + date.getMinutes() + ':' + date.getSeconds();
+        var today = new Date().toLocaleDateString("en-US");
+        var day = this.days.find(x => x.date == today);
+        if (day != undefined && day.time !== undefined){
+            var interval = day.time.pop();
+            day.time.push(interval.split('-')[0] + '-' + stringDate);
+        }
+    }
 };

src/scripts/ui.js

@@ -33,14 +33,15 @@ class UI {
     clearUI() {
         document.getElementById('resultTable').innerHTML = null;
         document.getElementById('chart').innerHTML = null;
+        document.getElementById('timeChart').innerHTML = null;
         document.getElementById('total').innerHTML = null;
         document.getElementById('byDays').innerHTML = null;
     }
 
     createTotalBlock(totalTime) {
         var totalElement = document.getElementById('total');
 
-        var spanTitle = this.createElement('span', ['span-total'], 'Total');
+        var spanTitle = this.createElement('span', ['title'], 'Total: ');
         var spanTime = this.createElement('span', ['span-time'], convertSummaryTimeToString(totalTime));
 
         totalElement = this.appendChild(totalElement, [spanTitle, spanTime]);
@@ -78,7 +79,7 @@ class UI {
 
     drawChart(tabs) {
         var donut = donutChart()
-            .width(480)
+            .width(550)
             .height(230)
             .cornerRadius(5) // sets how rounded the corners are on each slice
             .padAngle(0.020) // effectively dictates the gap between slices
@@ -92,6 +93,10 @@ class UI {
         ui.addHrAfterChart();
     }
 
+    drawTimeChart(tabs) {
+        //drawIntervalChart(tabs);
+    }
+
     drawBarChart(days) {
         d3.select('#barChart').datum(days);
         barChart(days);

src/scripts/webact.js

@@ -142,9 +142,25 @@ function getTabsFromStorage(tabs) {
     ui.addHrAfterTableOfSite();
     ui.createTotalBlock(totalTime);
     ui.drawChart(tabsForChart);
+    if (currentTypeOfList === TypeListEnum.ToDay)
+        ui.drawTimeChart(getTabsForTimeChart(targetTabs));
     ui.setActiveTooltipe(currentTab);
 }
 
+function getTabsForTimeChart(targetTabs){
+    var resultArr = [];
+    targetTabs.forEach(function (name){
+      var current = name.days.forEach(function (item){
+        if (item.date == new Date().toLocaleDateString("en-US")){
+          item.time.forEach(function (time){
+            resultArr.push({'domain':name.url, 'interval':time});
+                })
+            } 
+        });
+    });
+    return resultArr;
+}
+
 function getTabsForExpander() {
     storage.loadTabs(STORAGE_TABS, getTabsFromStorageForExpander);
 }