From 87f486c770c4156756218fc8bc6def00188c8324 Mon Sep 17 00:00:00 2001
From: Darko Lukic <lukicdarkoo@gmail.com>
Date: Mon, 26 Mar 2018 23:35:38 +0200
Subject: [PATCH] Add bin size parameter for histogram image creation

---
 cosmicpi/ui/README.md                  |  2 +-
 cosmicpi/ui/src/components/Science.vue | 16 ++++++++++++++--
 cosmicpi/ui/webpack.config.js          | 14 ++++++++++----
 3 files changed, 25 insertions(+), 7 deletions(-)

diff --git a/cosmicpi/ui/README.md b/cosmicpi/ui/README.md
index bd64bd8..858d14a 100644
--- a/cosmicpi/ui/README.md
+++ b/cosmicpi/ui/README.md
@@ -1,5 +1,5 @@
 ## Development
-Make sure you have Node.js and npm installed on your computer. Run `npm run dev` to open application in a development mode.
+Make sure you have Node.js and npm installed on your computer. Run `npm run dev` to open application in a development mode. You can also specify different REST url by setting up an environment variable `API_URL`, eg. `API_URL=http://127.0.0.1:5000/api/ npm run dev`.
 
 ## Production
 To compile the project and generate distribution files run `npm run build`.
diff --git a/cosmicpi/ui/src/components/Science.vue b/cosmicpi/ui/src/components/Science.vue
index e0788aa..8fd38f2 100644
--- a/cosmicpi/ui/src/components/Science.vue
+++ b/cosmicpi/ui/src/components/Science.vue
@@ -15,6 +15,10 @@
                         <label for="toDate">To date:</label>
                         <datetime @input="rangeUpdated" v-model="to" id="toDate" type="datetime" input-class="form-control"></datetime>
                     </div>
+                    <div class="form-group col">
+                        <label for="binSize">Bin size (s):</label>
+                        <input type="number" min="1" @change="binSizeUpdated" v-model="binSize" id="binSize" class="form-control" />
+                    </div>
                 </div>
                 <div class="row">
                     <img v-if="graphIsLoading" ref="loader" style="margin: auto" :src="loaderUrl" />
@@ -38,11 +42,14 @@ import moment from 'moment';
 
 const FROM_DEFAULT = moment().add('-24', 'hours').toISOString();
 const TO_DEFAULT = moment().toISOString();
+const DEFAULT_BIN_SIZE = 1;
 
 export default {
     name: 'Science',
     data() {
         return {
+            binSize: DEFAULT_BIN_SIZE,
+            lastBinSize: DEFAULT_BIN_SIZE,
             from: FROM_DEFAULT,
             to: TO_DEFAULT,
             lastFrom: FROM_DEFAULT,
@@ -70,6 +77,12 @@ export default {
                 this.updateDownloadUrl();
             }
         },
+        binSizeUpdated() {
+            if (this.lastBinSize != this.binSize) {
+                this.lastBinSize = this.binSize;
+                this.loadGraphImage();
+            }
+        },
         updateDownloadUrl() {
             let from = moment(this.from).unix();
             let to = moment(this.to).unix();
@@ -82,11 +95,10 @@ export default {
             let from = moment(this.from).unix();
             let to = moment(this.to).unix();
             let root = this.$http.options.root;
-            let binSize = 1;
 
             this.$refs.graph.src = '';
             this.graphIsLoading = true;
-            let imageUrl = `${root}histogram.png?from=${from}&to=${to}&bin_size=${binSize}`;
+            let imageUrl = `${root}histogram.png?from=${from}&to=${to}&bin_size=${this.binSize}`;
             this.$refs.graph.src = imageUrl;
         },
     },
diff --git a/cosmicpi/ui/webpack.config.js b/cosmicpi/ui/webpack.config.js
index 4444dbb..fe0afdf 100644
--- a/cosmicpi/ui/webpack.config.js
+++ b/cosmicpi/ui/webpack.config.js
@@ -1,5 +1,12 @@
-var path = require('path')
-var webpack = require('webpack')
+const path = require('path')
+const webpack = require('webpack')
+
+
+const DEFAULT_API_URL = (process.env.NODE_ENV === 'production') ? 
+  '/api/' : 'http://192.168.1.26:5000/api/';
+const API_URL = (process.env.API_URL === undefined) ?
+  DEFAULT_API_URL : process.env.API_URL;
+
 
 module.exports = {
   entry: './src/main.js',
@@ -69,8 +76,7 @@ module.exports = {
   devtool: '#eval-source-map',
   plugins: [
     new webpack.DefinePlugin({
-      'API_URL': JSON.stringify(process.env.NODE_ENV === 'production' ? 
-        '/api/' : 'http://192.168.1.26:5000/api/'),
+      'API_URL': JSON.stringify(API_URL),
     })
   ]
 }