Add bar chart for list of days

Author: Stigmatoz

src/manifest.json

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

src/scripts/chart/chart-core.js

@@ -91,7 +91,7 @@ function donutChart() {
                 })
                 .style("font-size", 13)
                 .attr("y", 10)
-                .attr("x", 11);
+                .attr("x", 13);
 
             // ===========================================================================================
             // add tooltip to mouse events on slices and labels
@@ -168,7 +168,6 @@ function donutChart() {
         });
     }
 
-    // getter and setter functions. See Mike Bostocks post "Towards Reusable Charts" for a tutorial on how this works.
     chart.width = function (value) {
         if (!arguments.length) return width;
         width = value;
@@ -224,4 +223,57 @@ function donutChart() {
     };
 
     return chart;
+}
+
+function barChart(data) {
+    var margin = { top: 5, right: 5, bottom: 25, left: 5 },
+        width = 485,
+        height = 160;
+
+    // set the ranges
+    var x = d3.scaleBand()
+        .range([0, width])
+        .padding(0.1);
+    var y = d3.scaleLinear()
+        .range([height, 0]);
+
+    // append the svg object to the body of the page
+    // append a 'group' element to 'svg'
+    // moves the 'group' element to the top left margin
+    var svg = d3.select("#barChart").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 + ")");
+
+    var tip = d3.tip()
+        .attr('class', 'd3-tip')
+        .offset([-10, 0])
+        .html(function (d) {
+            return "<strong>" + convertShortSummaryTimeToLongString(d.total) + "</strong>";
+        });
+
+    svg.call(tip);
+
+    // Scale the range of the data in the domains
+    x.domain(data.map(function (d) { return d.date; }));
+    y.domain([0, d3.max(data, function (d) { return d.total; })]);
+
+    // append the rectangles for the bar chart
+    svg.selectAll(".bar")
+        .data(data)
+        .enter().append("rect")
+        .attr("class", "bar")
+        .attr("x", function (d) { return x(d.date); })
+        .attr("width", x.bandwidth())
+        .attr("y", function (d) { return y(d.total); })
+        .attr("height", function (d) { return height - y(d.total); })
+        .on('mouseover', tip.show)
+        .on('mouseout', tip.hide);
+
+    // add the x Axis
+    svg.append("g")
+        .attr("transform", "translate(0," + height + ")")
+        .call(d3.axisBottom(x));
 }

src/scripts/chart/d3.v4.min.js

@@ -98,6 +98,11 @@ class UI {
         ui.addHrAfterChart();
     }
 
+    drawBarChart(days) {
+        d3.select('#barChart').datum(days);
+        barChart(days);
+    }
+
     addTableHeader(currentTypeOfList, counterOfSite, totalDays) {
         var p = document.createElement('p');
         p.classList.add('table-header');
@@ -212,6 +217,8 @@ class UI {
 
     addBlockForCalendar(range) {
         var div = document.getElementById('byDays');
+        var barChart = document.createElement('div');
+        barChart.id = 'barChart';
 
         var from = document.createElement('span');
         from.innerHTML = 'From';
@@ -234,6 +241,7 @@ class UI {
         var tableForDaysBlock = document.createElement('div');
         tableForDaysBlock.id = 'tableForDaysBlock';
 
+        div.appendChild(barChart);
         div.appendChild(from);
         div.appendChild(calendarFirst);
         div.appendChild(to);
@@ -257,10 +265,14 @@ class UI {
         };
     }
 
-    fillListOfDays(days) {
+    fillListOfDays(days, allDays) {
         var parent = document.getElementById('tableForDaysBlock');
         parent.innerHTML = null;
+        document.getElementById('barChart').innerHTML = null;
         if (days.length > 0) {
+            var daysForBarChart = this.fillDaysForBarChart(days, allDays);
+            this.drawBarChart(daysForBarChart);
+
             var header = document.createElement('div');
             header.classList.add('table-header');
 
@@ -315,4 +327,23 @@ class UI {
             this.fillEmptyBlock('tableForDaysBlock');
         }
     }
+
+    fillDaysForBarChart(days, allDays) {
+        var resultList = [];
+        allDays.forEach(element => {
+            var day = days.find(x => x.date == element);
+            if (day !== undefined){
+                resultList.push({
+                    'date': day.date,
+                    'total': day.total
+                });
+            }
+            else resultList.push({
+                'date': element,
+                'total': 0
+            });
+        });
+        
+        return resultList;
+    }
 }

src/scripts/ui.js

@@ -266,24 +266,30 @@ function getTabsByDays(tabs) {
     }
     if (range.from !== 'Invalid Date' && range.to !== 'Invalid Date') {
         var listOfDays = [];
-        tabs.map(function (a) {
-            return a.days.map(function (a) {
-                var item = listOfDays.find(x => x.date == a.date);
+        tabs.forEach(tab => {
+            return tab.days.forEach(day => {
+                var item = listOfDays.find(x => x.date == day.date);
                 if (item !== undefined) {
-                    return item.total += a.summary;
+                    return item.total += day.summary;
                 }
-                if (item === undefined && isDateInRange(a.date, range))
+                if (item === undefined && isDateInRange(day.date, range))
                     return listOfDays.push({
-                        'date': a.date,
-                        'total': a.summary
+                        'date': day.date,
+                        'total': day.summary
                     });
             });
         });
         listOfDays = listOfDays.sort(function (a, b) {
             return convertToDate(a.date) - convertToDate(b.date);
         });
 
-        ui.fillListOfDays(listOfDays);
+        var getDaysArray = function(start, end) {
+            for(var arr=[],dt=start; dt<=end; dt.setDate(dt.getDate()+1)){
+                arr.push(dt.toLocaleDateString());
+            }
+            return arr;
+        };
+        ui.fillListOfDays(listOfDays, getDaysArray(getValueFromArrayRange(range.from), getValueFromArrayRange(range.to)));
     }
     else {
         ui.fillEmptyBlockForDaysIfInvalid();

src/scripts/webact.js

@@ -36,4 +36,54 @@ tspan{
 .percentageValue{
     font-size: 1.8em !important;
     font-weight: 600 !important;
-}
+}
+
+/*styles for chart of days*/
+.axis path,
+.axis line {
+  fill: none;
+  stroke: #000;
+  shape-rendering: crispEdges;
+}
+
+.bar {
+  fill: orange;
+}
+
+.bar:hover {
+  fill: orangered ;
+}
+
+.x.axis path {
+  display: none;
+}
+
+.d3-tip {
+  font-size: 11px;
+  line-height: 1;
+  font-weight: bold;
+  padding: 7px;
+  background: rgba(0, 0, 0, 0.8);
+  color: #fff;
+  border-radius: 2px;
+}
+
+/* Creates a small triangle extender for the tooltip */
+.d3-tip:after {
+  box-sizing: border-box;
+  display: inline;
+  font-size: 10px;
+  line-height: 1;
+  color: rgba(0, 0, 0, 0.8);
+  content: "\25BC";
+  position: absolute;
+  text-align: center;
+  right:0;
+}
+
+/* Style northward tooltips differently */
+.d3-tip.n:after {
+  margin: -1px 0 0 0;
+  top: 100%;
+  left: 0;
+}