From ebca146fd2325144158dda0541a1311ad8af7ab6 Mon Sep 17 00:00:00 2001
From: Mike van Rossum <mike@mikevanrossum.nl>
Date: Sun, 13 Nov 2016 19:28:11 +0000
Subject: [PATCH] use datasets over ranges, gekko UI v0.1.0

---
 core/workers/datasetScan/parent.js            |   2 -
 web/vue/package.json                          |   2 +-
 .../src/backtester/backtestConfigBuilder.vue  |  49 +++++---
 web/vue/src/backtester/backtester.vue         |   1 +
 web/vue/src/data/data.vue                     |  92 +++++++++++++-
 web/vue/src/data/import/importer.vue          |   6 +-
 .../global/configbuilder/datasetpicker.vue    | 114 ++++++++++++++++++
 .../src/global/configbuilder/stratpicker.vue  |   1 -
 8 files changed, 235 insertions(+), 32 deletions(-)
 create mode 100644 web/vue/src/global/configbuilder/datasetpicker.vue

diff --git a/core/workers/datasetScan/parent.js b/core/workers/datasetScan/parent.js
index 6e9610cec..0c2f0eb83 100644
--- a/core/workers/datasetScan/parent.js
+++ b/core/workers/datasetScan/parent.js
@@ -22,8 +22,6 @@ module.exports = function(config, done) {
       let marketConfig = _.clone(config);
       marketConfig.watch = market;
 
-      console.log(marketConfig);
-
       dateRangeScan(marketConfig, (err, ranges) => {
         if(err)
           return next(err);
diff --git a/web/vue/package.json b/web/vue/package.json
index 94f31cdf2..ab5b35e44 100644
--- a/web/vue/package.json
+++ b/web/vue/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue",
-  "version": "0.0.9",
+  "version": "0.1.0",
   "description": "The frontend for the Gekko UI",
   "author": "Mike van Rossum <mike@mvr.me>",
   "scripts": {
diff --git a/web/vue/src/backtester/backtestConfigBuilder.vue b/web/vue/src/backtester/backtestConfigBuilder.vue
index dc920943f..ce5e35d9f 100644
--- a/web/vue/src/backtester/backtestConfigBuilder.vue
+++ b/web/vue/src/backtester/backtestConfigBuilder.vue
@@ -1,42 +1,54 @@
 <template lang='jade'>
 .contain
-  .grd
-    .grd-row
-      .grd-row-col-3-6.mx1
-        h3 Market
-        market-picker.contain(v-on:market='updateMarket')
-      .grd-row-col-3-6.mx1
-        range-picker(v-on:range='updateRange', :config='market')
+  dataset-picker.contain.my2(v-on:dataset='updateDataset')
   .hr
   strat-picker.contain.my2(v-on:stratConfig='updateStrat')
 </template>
 
 <script>
 
-import marketPicker from '../global/configbuilder/marketpicker.vue'
+import datasetPicker from '../global/configbuilder/datasetPicker.vue'
 import stratPicker from '../global/configbuilder/stratpicker.vue'
-import rangePicker from '../global/configbuilder/rangepicker.vue'
 import _ from 'lodash'
 
 export default {
   data: () => {
     return {
-      market: {},
+      dataset: {},
       strat: {},
-      range: {}
     }
   },
   components: {
-    marketPicker,
     stratPicker,
-    rangePicker
+    datasetPicker
   },
   computed: {
+    market: function() {
+      if(!this.dataset.exchange)
+        return {};
+
+      return {
+        exchange: this.dataset.exchange,
+        currency: this.dataset.currency,
+        asset: this.dataset.asset
+      }
+    },
+    range: function() {
+      if(!this.dataset.exchange)
+        return {};
+
+      return {
+        from: this.dataset.from,
+        to: this.dataset.to
+      }
+    },
     config: function() {
       let config = {};
       Object.assign(
         config,
-        this.market,
+        {
+          watch: this.market
+        },
         this.strat,
         {
           backtest: {
@@ -77,12 +89,9 @@ export default {
 
       return true;
     },
-    updateMarket: function(mc) {
-      this.market = mc;
-      this.$emit('config', this.config);
-    },
-    updateRange: function(range) {
-      this.range = range;
+    updateDataset: function(set) {
+      this.dataset = set;
+      // console.log('updateDataset', set);
       this.$emit('config', this.config);
     },
     updateStrat: function(sc) {
diff --git a/web/vue/src/backtester/backtester.vue b/web/vue/src/backtester/backtester.vue
index c52adac25..d69230fc6 100644
--- a/web/vue/src/backtester/backtester.vue
+++ b/web/vue/src/backtester/backtester.vue
@@ -30,6 +30,7 @@ export default {
   },
   methods: {
     check: function(config) {
+      // console.log('CHECK', config);
       this.config = config;
 
       if(!config.valid)
diff --git a/web/vue/src/data/data.vue b/web/vue/src/data/data.vue
index 387dd8bad..69752b502 100644
--- a/web/vue/src/data/data.vue
+++ b/web/vue/src/data/data.vue
@@ -3,18 +3,41 @@
     .text(v-html='intro')
     .hr
     h2 Available datasets
-    .txt--center.my2(v-if='!datasets.length')
+    .txt--center.my2(v-if='scanstate === "idle"')
       a.w100--s.btn--blue.scan-btn(href='#', v-on:click.prevent='scan') scan available data
+    .txt--center.my2(v-if='scanstate === "scanning"')
+      spinner
+    .my2(v-if='scanstate === "scanned"')
+      table.full
+        thead
+          tr
+            th exchange
+            th currency
+            th asset
+            th from
+            th to
+            th duration
+        tbody
+          tr(v-for='set in datasets')
+            td {{ set.exchange }}
+            td {{ set.currency }}
+            td {{ set.asset }}
+            td {{ fmt(set.from) }}
+            td {{ fmt(set.to) }}
+            td {{ humanizeDuration(set.to.diff(set.from)) }}
     .my2
       h2 Import more data
       p.text You can easily import more market data directly from the exchange using the importer.
       router-link(to='/data/importer') Go to the importer.
-
 </template>
 
 <script>
 
+import spinner from '../global/blockSpinner.vue'
+import { post } from '../tools/ajax'
 import marked from '../tools/marked'
+// global moment
+// global humanizeDuration
 
 let intro = marked(`
 
@@ -24,17 +47,78 @@ Gekko needs local market data in order to backtest strategies. The local
 data can also be used in a warmup period when running a strategy against a
 live market.
 
-`)
+`);
 
 export default {
+  components: {
+    spinner
+  },
   data: () => {
     return {
       intro,
-      datasets: []
+      datasets: [],
+      scanstate: 'idle'
     }
+  },
+  methods: {
+    scan: function() {
+      this.scanstate = 'scanning';
+
+      post('scansets', {}, (error, response) => {
+        this.scanstate = 'scanned';
+
+        let sets = [];
+
+        response.forEach(market => {
+          market.ranges.forEach(range => {
+            sets.push({
+              exchange: market.exchange,
+              currency: market.currency,
+              asset: market.asset,
+              from: moment.unix(range.from).utc(),
+              to: moment.unix(range.to).utc()
+            });
+          });
+        });
+
+        // for now, filter out sets smaller than 3 hours..
+        sets = sets.filter(set => {
+          if(set.to.diff(set.from, 'hours') > 2)
+            return true;
+        });
+
+        sets = sets.sort((a, b) => {
+          let adiff = a.to.diff(a.from);
+          let bdiff = b.to.diff(b.from);
+
+          if(adiff < bdiff)
+            return -1;
+
+          if(adiff > bdiff)
+            return 1;
+
+          return 0;
+        }).reverse();
+
+        this.datasets = sets;
+      })
+    },
+    humanizeDuration: (n) => window.humanizeDuration(n),
+    fmt: mom => mom.format('YYYY-MM-DD HH:mm')
   }
 }
 </script>
 
 <style>
+table.full {
+  width: 100%;
+}
+
+table.full td {
+  padding: 0.5rem 0;
+}
+
+table.full th {
+  text-align: center;
+}
 </style>
diff --git a/web/vue/src/data/import/importer.vue b/web/vue/src/data/import/importer.vue
index 6c1473850..6d46b410a 100644
--- a/web/vue/src/data/import/importer.vue
+++ b/web/vue/src/data/import/importer.vue
@@ -6,14 +6,13 @@
     p(v-if='imports.length === 0') You currently don't have any imports running.
     ul(v-if='imports.length')
       li(v-for='_import in imports')
-        router-link(:to='"/single-import/" + _import.id') {{ _import.watch.exchange }}:{{ _import.watch.currency }}/{{ _import.watch.asset }}
+        router-link(:to='"/data/importer/import/" + _import.id') {{ _import.watch.exchange }}:{{ _import.watch.currency }}/{{ _import.watch.asset }}
         
     .hr
     h3 Start a new import
     import-config-builder(v-on:config='updateConfig')
     .hr
     .txt--center
-      // router-link(to='/single-import/a').w100--s.my1.btn--blue.b(href='#') Import
       a.w100--s.my1.btn--blue(href='#', v-on:click.prevent='run') Import
 </template>
 
@@ -29,8 +28,7 @@ let intro = marked(`
 
 ## Import data
 
-In order to backtest your strategies using Gekko against
-historical data you first need to import data into Gekko.
+The importer can download historical market data directly from the exchange.
 
 `)
 
diff --git a/web/vue/src/global/configbuilder/datasetpicker.vue b/web/vue/src/global/configbuilder/datasetpicker.vue
new file mode 100644
index 000000000..79d21a28f
--- /dev/null
+++ b/web/vue/src/global/configbuilder/datasetpicker.vue
@@ -0,0 +1,114 @@
+<template lang='jade'>
+div
+  h3 Select a dataset
+  .txt--center.my2(v-if='scanstate === "idle"')
+    a.w100--s.btn--blue.scan-btn(href='#', v-on:click.prevent='scan') scan available data
+  .txt--center.my2(v-if='scanstate === "scanning"')
+    spinner
+  .my2(v-if='scanstate === "scanned"')
+    table.full
+      thead
+        tr
+          th 
+          th exchange
+          th currency
+          th asset
+          th from
+          th to
+          th duration
+      tbody
+        tr(v-for='(set, i) in datasets')
+          td.radio
+            input(type='radio', name='dataset', :value='i', v-model='setIndex')
+          td {{ set.exchange }}
+          td {{ set.currency }}
+          td {{ set.asset }}
+          td {{ fmt(set.from) }}
+          td {{ fmt(set.to) }}
+          td {{ humanizeDuration(set.to.diff(set.from)) }}
+</template>
+
+<script>
+
+import { post } from '../../tools/ajax'
+import spinner from '../../global/blockSpinner.vue'
+
+export default {
+  components: {
+    spinner
+  },
+  data: () => {
+    return {
+      datasets: [],
+      scanstate: 'idle',
+      setIndex: -1
+    };
+  },
+  methods: {
+    scan: function() {
+      this.scanstate = 'scanning';
+
+      post('scansets', {}, (error, response) => {
+        this.scanstate = 'scanned';
+
+        let sets = [];
+
+        response.forEach(market => {
+          market.ranges.forEach(range => {
+            sets.push({
+              exchange: market.exchange,
+              currency: market.currency,
+              asset: market.asset,
+              from: moment.unix(range.from).utc(),
+              to: moment.unix(range.to).utc()
+            });
+          });
+        });
+
+        // for now, filter out sets smaller than 3 hours..
+        sets = sets.filter(set => {
+          if(set.to.diff(set.from, 'hours') > 2)
+            return true;
+        });
+
+        sets = sets.sort((a, b) => {
+          let adiff = a.to.diff(a.from);
+          let bdiff = b.to.diff(b.from);
+
+          if(adiff < bdiff)
+            return -1;
+
+          if(adiff > bdiff)
+            return 1;
+
+          return 0;
+        }).reverse();
+
+        this.datasets = sets;
+      })
+    },
+    humanizeDuration: (n) => {
+      return window.humanizeDuration(n, {largest: 4});
+    },
+    fmt: mom => mom.format('YYYY-MM-DD HH:mm')
+  },
+  computed: {
+    set: function() {
+      return this.datasets[this.setIndex];
+    }
+  },
+  watch: {
+    set: function(val) {
+      if(!val)
+        return;
+
+      this.$emit('dataset', val);
+    }
+  }
+}
+</script>
+<style>
+td.radio {
+  width: 45px;
+}
+</style>
diff --git a/web/vue/src/global/configbuilder/stratpicker.vue b/web/vue/src/global/configbuilder/stratpicker.vue
index 98d85e86e..61490263c 100644
--- a/web/vue/src/global/configbuilder/stratpicker.vue
+++ b/web/vue/src/global/configbuilder/stratpicker.vue
@@ -1,5 +1,4 @@
 <template lang='jade'>
-// config.tradingAdvisor
 .grd
   .grd-row
     .grd-row-col-3-6.px1