Created basics for data analytics

dist/res/common.css

@@ -413,4 +413,42 @@ input[type=submit] {
   background: var(--shale);
   content: "";
   border-radius: 10px;
-}
+}
+
+/* 7 day stack graph for pass fail ratio */
+#weeklyGraph {
+	height: auto;
+	width: 75%;
+	border: 1.2px solid var(--blue);
+	border-radius: 5px;
+}
+
+.barGraphComponent {
+	margin: 0.2em 0.5em !important;
+	display: flex;
+	flex-direction: row;
+	font-size: 0.75em;
+	height: auto;
+	align-content: flex-end;
+}
+
+.bar, .date {
+	margin: 0 auto;
+	width: 5em;
+	display: flex;
+	flex-direction: column;
+	text-align: center;
+	align-self: flex-end;
+}
+
+.visited{
+	background-color: #8B9AC0;
+}
+
+.blocked {
+	background: #193174;
+}
+
+.passed{
+	background-color: #576CA8;
+}

dist/res/pages/options.html

@@ -48,10 +48,12 @@ <h2>sites.</h2>
 			</div>
 
 			<div class="analytics_panel">
-				<br>
-				<h2>analytics.</h2>
+				<h2><br>analytics.</h2>
 				<p>a list showing your most recent entries.</p>
 				<div class='previousIntents' id="previousIntents"></div>
+
+				<p><br>a bar graph showing the details of your reflect usage over the past seven days.</p>
+				<div id="weeklyGraph"></div>
 			</div>
 		</div>
 	</body>

dist/src/content.js

@@ -1,8 +1,82 @@
 const REFLECT_INFO = "#576ca8";
 const REFLECT_ERR = "#ff4a47";
+class WeekStats {
+    constructor(obj) {
+        // cast object obj to this (type WeekStats)
+        Object.assign(this, obj);
+        // map dayStats from obj to DayStats
+        this.dayStats = this.dayStats.map((dayStatObj) => DayStats.fromData(dayStatObj));
+        this.updateCurrentDay();
+    }
+    // update current day
+    updateCurrentDay() {
+        this.currentDay = this.dayStats[0];
+    }
+    // get current day
+    getCurrentDay() {
+        return this.currentDay;
+    }
+    // check to see if the current day is not actually today
+    // returns true if current day != today's actual date
+    currentDayExpired() {
+        return this.currentDay.getDate() != (new Date()).getDay();
+    }
+    pushbackDates() {
+        let tempDayStats = this.dayStats;
+        // take current dayStats and pop off the last element
+        tempDayStats.pop();
+        // concatenate a new DayStats object to the front of it
+        tempDayStats.unshift(new DayStats());
+        // replace dayStats with tempDayStats
+        this.dayStats = tempDayStats;
+        this.updateCurrentDay();
+    }
+    incrementDayStats(type) {
+        // check to see if currentDay is expired
+        if (this.currentDayExpired()) {
+            // if it is expired, push dates back and create new date
+            this.pushbackDates();
+        }
+        // modify currentDay based off of the type of visit
+        console.log(`${type} count has been incremented`);
+        switch (type) {
+            case "visited":
+                this.currentDay.visited++;
+                break;
+            case "blocked":
+                this.currentDay.blocked++;
+                break;
+            case "passed":
+                this.currentDay.passed++;
+                break;
+        }
+    }
+}
+class DayStats {
+    constructor() {
+        this.visited = 0;
+        this.blocked = 0;
+        this.passed = 0;
+        this.date = (new Date()).getDay();
+        this.dateString = (new Date()).toLocaleDateString('default', { month: 'long', day: 'numeric' });
+    }
+    static fromData(obj) {
+        let newDayStats = new DayStats();
+        Object.assign(newDayStats, obj);
+        return newDayStats;
+    }
+    getDate() {
+        return this.date;
+    }
+    getDateString() {
+        return this.dateString;
+    }
+}
 chrome.storage.sync.get(null, (storage) => {
     // check to see if reflect is enabled
     if (storage.isEnabled) {
+        // increment number of times visited
+        incrementDayStats('visited');
         // check for is blocked
         const strippedURL = getStrippedUrl();
         storage.blockedSites.forEach((site) => {
@@ -36,7 +110,6 @@ function iterWhitelist() {
         const strippedURL = getStrippedUrl();
         // activeURL exists
         if (strippedURL != "") {
-            console.log(strippedURL);
             // if url in whitelist
             const m = storage.whitelistedSites;
             if (m.hasOwnProperty(strippedURL)) {
@@ -63,6 +136,8 @@ function iterWhitelist() {
     });
 }
 function loadBlockPage(strippedURL) {
+    // increment number of times blocked
+    incrementDayStats('blocked');
     // get prompt page content
     $.get(chrome.runtime.getURL("res/pages/prompt.html"), (page) => {
         // stop current page and replace with our blocker page
@@ -132,8 +207,8 @@ function callBackgroundWithIntent(intent) {
     port.onMessage.addListener((msg) => {
         switch (msg.status) {
             case "ok":
-                // show success message
-                // optional: transition?
+                // increment number of times passed
+                incrementDayStats('passed');
                 chrome.storage.sync.get(null, (storage) => {
                     const WHITELIST_PERIOD = storage.whitelistTime;
                     displayStatus(`got it! ${WHITELIST_PERIOD} minutes starting now.`, 3000, REFLECT_INFO);
@@ -158,3 +233,14 @@ function callBackgroundWithIntent(intent) {
         port.disconnect();
     });
 }
+function incrementDayStats(type) {
+    chrome.storage.sync.get(null, (storage) => {
+        // getting dayStats array from storage
+        let pastSevenDays = new WeekStats(storage.pastSevenDays);
+        pastSevenDays.incrementDayStats(type);
+        chrome.storage.sync.set({ 'pastSevenDays': pastSevenDays }, () => {
+            console.log(pastSevenDays);
+            console.log('synced statistics');
+        });
+    });
+}

dist/src/options.js

@@ -1,10 +1,11 @@
 const ENTER_KEY_CODE = 13;
 // On page load, draw table and add button listener
-document.addEventListener('DOMContentLoaded', function renderFilterListTable() {
+document.addEventListener('DOMContentLoaded', () => {
     drawFilterListTable();
     drawIntentListTable();
     setAddButtonListener();
     restoreSavedOptions();
+    drawWeeklyStatsGraph();
     // options listeners
     setupOptionsListener();
 });
@@ -107,7 +108,7 @@ function drawIntentListTable() {
         // fetch intent list
         const intentList = storage.intentList;
         // generate table element
-        let table = '<table class="hover shadow styled">' +
+        let table = '<table class="hover styled">' +
             "<tr>" +
             '<th style="width: 40%">url</th>' +
             '<th style="width: 40%">intent</th>' +
@@ -175,3 +176,55 @@ function addUrlToFilterList() {
     }
 }
 ;
+class PercentageStats {
+    constructor(DayStats) {
+        this.totalStats = (DayStats.visited + DayStats.blocked + DayStats.passed) / 100;
+        this.visitedPercent = DayStats.visited / this.totalStats;
+        this.blockedPercent = DayStats.blocked / this.totalStats;
+        this.passedPercent = DayStats.passed / this.totalStats;
+        this.dateString = DayStats.dateString;
+    }
+    getDateString() {
+        return ((this.dateString).toLowerCase()) + '.';
+    }
+}
+function generateBarGraphBar(p) {
+    if (isNaN(p.visitedPercent)) {
+        return "";
+    }
+    return `<div class="bar" style="height:${p.totalStats * 100 * 4}px">` +
+        `<div class="visited" style="flex-basis:${p.visitedPercent}%"></div>` +
+        `<div class="passed" style="flex-basis:${p.passedPercent}%"></div>` +
+        `<div class="blocked" style="flex-basis:${p.blockedPercent}%"></div>` +
+        `</div>`;
+}
+function generateBarGraphDate(p) {
+    if (isNaN(p.visitedPercent)) {
+        return "";
+    }
+    return `<div class="date">` +
+        `<p class="day"> ${p.getDateString()} </p>` +
+        `</div>`;
+}
+function drawWeeklyStatsGraph() {
+    // accessing chrome storage for blocked sites
+    chrome.storage.sync.get(null, (storage) => {
+        //fetch weekly stats
+        const weeklyStats = storage.pastSevenDays;
+        let barDiv = '<div id="graph" class="barGraphComponent">';
+        let labelDiv = '<div id="label" class="barGraphComponent">';
+        weeklyStats.dayStats.forEach((DayStats) => {
+            const dailyPercents = new PercentageStats(DayStats);
+            barDiv += generateBarGraphBar(dailyPercents);
+            labelDiv += generateBarGraphDate(dailyPercents);
+        });
+        barDiv += "</div>";
+        labelDiv += "</div>";
+        console.log(`This is the barDiv: ${barDiv}`);
+        console.log(`This is the labelDiv: ${labelDiv}`);
+        // adds additional div to html
+        const graphBar = document.getElementById("weeklyGraph");
+        graphBar.innerHTML += barDiv + labelDiv;
+    });
+}
+;

dist/src/structs.js

@@ -0,0 +1,61 @@
+export class WeekStats {
+    constructor() {
+        this.dayStats = new Array(7);
+        this.dayStats[0] = new DayStats();
+        this.currentDay = this.dayStats[0];
+    }
+    static fromData(obj) {
+        let parsedWeekStat = new WeekStats();
+        Object.assign(parsedWeekStat, obj);
+        return parsedWeekStat;
+    }
+    // get current day
+    getCurrentDay() {
+        return this.currentDay;
+    }
+    // check to see if the current day is not actually today
+    // returns true if current day != today's actual date
+    currentDayExpired() {
+        return this.currentDay.getDate() != (new Date()).getDay();
+    }
+    pushbackDates() {
+        let tempDayStats = this.dayStats;
+        // take current dayStats and pop off the last element
+        tempDayStats.pop();
+        // concatenate a new DayStats object to the front of it
+        tempDayStats.unshift(new DayStats());
+        // replace dayStats with tempDayStats
+        this.dayStats = tempDayStats;
+    }
+    incrementDayStats(type) {
+        // check to see if currentDay is expired
+        if (this.currentDayExpired()) {
+            // if it is expired, push dates back and create new date
+            this.pushbackDates();
+        }
+        // modify currentDay based off of the type of visit
+        console.log(`${type} count has been incremented`);
+        switch (type) {
+            case "visited":
+                this.currentDay.visited++;
+                break;
+            case "blocked":
+                this.currentDay.blocked++;
+                break;
+            case "passed":
+                this.currentDay.passed++;
+                break;
+        }
+    }
+}
+class DayStats {
+    constructor() {
+        this.visited = 0;
+        this.blocked = 0;
+        this.passed = 0;
+        this.date = (new Date()).getDay();
+    }
+    getDate() {
+        return this.date;
+    }
+}

src/Untitled-1.txt

@@ -0,0 +1,6 @@
+<div class="barGraph">
+    <div class="bar hover shadow">
+        <div class="visited" style="height": 79.3103448275862%"></div>
+        <div class="blocked" style="height": 17.24137931034483%"></div>
+        <div class="passed" style="height": 3.4482758620689657%"></div>
+        <p class="day"> august 8. </p></div><div class="bar hover shadow"><div class="visited" style="height": 62.5%"></div><div class="blocked" style="height": 18.75%"></div><div class="passed" style="height": 18.75%"></div><p class="day"> august 6. </p></div><div class="bar hover shadow"><div class="visited" style="height": 80%"></div><div class="blocked" style="height": 20%"></div><div class="passed" style="height": 0%"></div><p class="day"> august 1. </p></div><div class="bar hover shadow"><div class="visited" style="height": 87.5%"></div><div class="blocked" style="height": 10.526315789473685%"></div><div class="passed" style="height": 1.9736842105263157%"></div><p class="day"> july 26. </p></div><div class="bar hover shadow"><div class="visited" style="height": NaN%"></div><div class="blocked" style="height": NaN%"></div><div class="passed" style="height": NaN%"></div><p class="day"> july 26. </p></div><div class="bar hover shadow"><div class="visited" style="height": NaN%"></div><div class="blocked" style="height": NaN%"></div><div class="passed" style="height": NaN%"></div><p class="day"> july 26. </p></div><div class="bar hover shadow"><div class="visited" style="height": NaN%"></div><div class="blocked" style="height": NaN%"></div><div class="passed" style="height": NaN%"></div><p class="day"> july 26. </p></div></div>