compare period totals to previous period and show % diff

README.md

@@ -3,7 +3,7 @@ Ana. Open Source Web Analytics.
 
 This is nowhere near being usable, let alone stable. Treat as a proof of concept.
 
-![Screenshot of the Ana dashboard](https://github.com/dannyvankooten/ana/raw/master/assets/img/screenshot.png?v=4)
+![Screenshot of the Ana dashboard](https://github.com/dannyvankooten/ana/raw/master/assets/img/screenshot.png?v=5)
 
 ## Usage
 

ROADMAP.md

@@ -5,7 +5,6 @@ This is a general draft document for thoughts and todo's, without any structure
 
 ### What's cooking?
 
-- Compare period totals to previous period.
 - Allow setting custom limit in table overviews.
 - Allow sorting in table overviews.
 - Choose a OS license & settle on name.

assets/js/components/CountWidget.js

@@ -1,13 +1,15 @@
 'use strict';
 
 import { h, render, Component } from 'preact';
+const dayInSeconds = 60 * 60 * 24;
 
 class CountWidget extends Component {
   constructor(props) {
     super(props)
 
     this.state = {
-      count: 0
+      count: 0,
+      previousCount: 0
     }
 
     this.fetchData = this.fetchData.bind(this);
@@ -21,7 +23,10 @@ class CountWidget extends Component {
   }
 
   fetchData(period) {
-    return fetch('/api/' + this.props.endpoint + '/count?period=' + period, {
+    const before = Math.round((+new Date() ) / 1000);
+    const after = before - ( period * dayInSeconds );
+
+    fetch(`/api/${this.props.endpoint}/count?before=${before}&after=${after}`, {
       credentials: 'include'
     }).then((r) => {
         if( r.ok ) { return r.json(); }
@@ -29,14 +34,36 @@ class CountWidget extends Component {
      }).then((data) => {
         this.setState({ count: data })
     });
+
+    // query previous period
+    const previousBefore = after;
+    const previousAfter = previousBefore - ( period * dayInSeconds );
+    fetch(`/api/${this.props.endpoint}/count?before=${previousBefore}&after=${previousAfter}`, {
+      credentials: 'include'
+    }).then((r) => {
+        if( r.ok ) { return r.json(); }
+        throw new Error();
+     }).then((data) => {
+        this.setState({ previousCount: data })
+    });
+  }
+
+  renderPercentage() {
+    if( ! this.state.previousCount ) {
+      return '';
+    }
+
+    const percentage = Math.round(( this.state.count / this.state.previousCount * 100 - 100))
+    return (
+      <small class={percentage > 0 ? 'positive' : 'negative'}>{percentage}%</small>
+    )
   }
 
   render() {
     return (
-
       <div class="block center-text">
-        <h4 class="no-margin">{this.props.title}</h4>
-        <div class="big">{this.state.count}</div>
+        <h4 class="">{this.props.title}</h4>
+        <div class="big tiny-margin">{this.state.count} {this.renderPercentage()}</div>
         <div class="muted">last {this.props.period} days</div>
       </div>
     )

assets/sass/_util.scss

@@ -16,6 +16,11 @@
     clear: both;
 }
 
+.tiny-margin{
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
+
 .small-margin {
   margin-top: 20px;
   margin-bottom: 20px;
@@ -45,3 +50,15 @@
 .center-text {
   text-align: center;
 }
+
+.positive {
+  color: limegreen;
+
+  &:before {
+    content: "+";
+  }
+}
+
+.negative {
+  color: orangered;
+}

assets/sass/styles.scss

@@ -101,3 +101,7 @@ h3{
 h4 {
   font-size: 16px;
 }
+
+small {
+  font-size: 70%;
+}