From 892128a4be5bb3cfbf3b6dc2531be178706003e7 Mon Sep 17 00:00:00 2001
From: Nathan Cannon <nathan.cannon@edf-energy.com>
Date: Wed, 19 Dec 2018 10:32:10 +0000
Subject: [PATCH] Added quick time period selection buttons.

---
 frontend/src/views/Stats.vue | 24 +++++++++++++++++++++---
 1 file changed, 21 insertions(+), 3 deletions(-)

diff --git a/frontend/src/views/Stats.vue b/frontend/src/views/Stats.vue
index cf4a962..970d5f5 100644
--- a/frontend/src/views/Stats.vue
+++ b/frontend/src/views/Stats.vue
@@ -13,9 +13,23 @@
                 </button>
             </div>
         </b-modal>
-        <b-row>
-          <b-col><b-button @click="chartMode = 0; getFilteredAverage()">Trends</b-button></b-col>
-          <b-col><b-button @click="chartMode = 1; getFilteredAverage()">AFIs</b-button></b-col>
+        <b-row class="pb-2">
+          <b-col>
+            <b-button-group size="sm">
+              <b-button variant="dark">Select Chart:</b-button>
+              <b-button variant="outline-primary" @click="chartMode = 0; getFilteredAverage()">Trends</b-button>
+              <b-button variant="outline-primary" @click="chartMode = 1; getFilteredAverage()">AFIs</b-button>
+            </b-button-group>
+          </b-col>
+          <b-col>
+            <b-button-group size="sm">
+              <b-button variant="dark">Quick Interval:</b-button>
+              <b-button variant="outline-primary" v-on:click="setInterval(1, 'w'); getFilteredAverage()">1 Week</b-button>
+              <b-button variant="outline-primary" v-on:click="setInterval(1, 'M'); getFilteredAverage()">1 Month</b-button>
+              <b-button variant="outline-primary" v-on:click="setInterval(3, 'M'); getFilteredAverage()">3 Months</b-button>
+              <b-button variant="outline-primary" v-on:click="setInterval(1, 'y'); getFilteredAverage()">1 Year</b-button>
+            </b-button-group>
+          </b-col>
         </b-row>
         <b-row>
             <b-col>
@@ -228,6 +242,10 @@ export default {
     },
     changeEndDate: function(e) {
       this.endDate = e.date;
+    },
+    setInterval: function(amount, timeType){
+      this.endDate = moment();
+      this.startDate = moment().subtract(amount, timeType);
     }
   },
   watch: {