0.2.4: candles timeframes, candles own settings (stock, pair), fix bu…

…g with swithing dashboards
suenot · Nov 14, 2018 · eda241b · eda241b
1 parent 66189ac
commit eda241b
Show file tree

Hide file tree

Showing 7 changed files with 36 additions and 34 deletions.
diff --git a/react-client/src/App.js b/react-client/src/App.js
@@ -298,7 +298,12 @@ class App extends React.Component {
     }
   }
   setDashboard(id) {
+    // this.forceUpdate()
     DashboardsStore.setDashboard(id)
+    console.log('SET DASHBOARD')
+    // setTimeout(() => {
+    //   this.forceUpdate()
+    // }, 200)
   }
   addDashboard() {
     DashboardsStore.addDashboard()

diff --git a/react-client/src/Grid.js b/react-client/src/Grid.js
@@ -51,12 +51,15 @@ class Grid extends React.Component {
             }
             var dashboardId = DashboardsStore.dashboardActiveId
             var widgetId = widget.i
+            var stock = widget.data.stock
+            var pair = widget.data.pair
             var data = _.find(DashboardsStore.dashboards[dashboardId].widgets, ['i', widgetId]).data
             return (
               <div key={widget.uid} data-grid={{ w: widget.w, h: widget.h, x: widget.x, y: widget.y, minW: widget.minW, minH:  widget.minH }}>
                 <div className={`widget widget-${widget.name}`}>
                   <div className='widget-header draggable-header'>
                     <span>{ customHeader || widget.header}</span>
+                    <span>{ stock || '' }{ pair ? `:${pair}` : '' }</span>
                     <div>
                       <FullscreenExitIcon style={{ fontSize: 18 }} onClick={this.fullscreen.bind(this)} className="pointer fullscreen-exit-icon hide"/>
                       <FullscreenIcon style={{ fontSize: 18 }} onClick={this.fullscreen.bind(this)} className="pointer fullscreen-icon"/>
@@ -68,9 +71,7 @@ class Grid extends React.Component {
                           dashboardId: dashboardId,
                           widgetId: widgetId,
                           ...data
-                        },
-                        // DashboardsStore.dashboardActiveId,
-                        // widget.i
+                        }
                       )} className="pointer settings-icon"/>
                       <ClearIcon style={{ fontSize: 18 }} onClick={this.removeWidget.bind(this, widget.i)} className="pointer clear-icon"/>
                     </div>

diff --git a/react-client/src/core_components/ReactStockcharts/HeikinAshi/Config.js b/react-client/src/core_components/ReactStockcharts/HeikinAshi/Config.js
@@ -11,6 +11,6 @@ module.exports = [
     author: '#core',
     authorLink: 'https://github.com/kupi-network/kupi-terminal',
     source: 'https://github.com/kupi-network/kupi-terminal/blob/master/react-client/src/core_components/ReactStockcharts/HeikinAshi/index.js',
-    data: {stock: '', pair: '', timeframe: '15m'}
+    data: {stock: 'BINANCE', pair: 'ETH_BTC', timeframe: '1m'}
   }
 ]
diff --git a/react-client/src/core_components/ReactStockcharts/HeikinAshi/Settings.js b/react-client/src/core_components/ReactStockcharts/HeikinAshi/Settings.js
@@ -30,7 +30,7 @@ class Settings extends React.Component {
 
             <TextField
               id="outlined-name"
-              label="Custom stock"
+              label="Stock"
               value={_.find(DashboardsStore.dashboards[dashboardId].widgets, ['i', widgetId]).data.stock}
               onChange={this.setWidgetData.bind(this, 'stock', 'value')}
               variant="outlined"
@@ -40,7 +40,7 @@ class Settings extends React.Component {
 
             <TextField
               id="outlined-name"
-              label="Custom pair"
+              label="Pair"
               value={_.find(DashboardsStore.dashboards[dashboardId].widgets, ['i', widgetId]).data.pair}
               onChange={this.setWidgetData.bind(this, 'pair', 'value')}
               variant="outlined"
@@ -73,12 +73,12 @@ class Settings extends React.Component {
   }
   changeCustomHeader(e) {
     var {dashboardId, widgetId} = this.props.data
-    DashboardsStore.setCustomHeader(dashboardId, widgetId, e.target.value)
+    DashboardsStore.setCustomHeader(dashboardId, widgetId, e.target.value.trim())
   }
   setWidgetData(key, attr, e) {
     var {dashboardId, widgetId} = this.props.data
     var value = e.target[attr]
-    DashboardsStore.setWidgetData(dashboardId, widgetId, key, value)
+    DashboardsStore.setWidgetData(dashboardId, widgetId, key, value.trim())
   }
 }
 

diff --git a/react-client/src/core_components/ReactStockcharts/HeikinAshi/index.js b/react-client/src/core_components/ReactStockcharts/HeikinAshi/index.js
@@ -5,14 +5,11 @@ import { observer } from 'mobx-react'
 import './theme.sass'
 
 import OhlcvStore from 'stores/OhlcvStore'
-import DashboardsStore from 'stores/DashboardsStore'
 
 @observer
 export default class ChartComponent extends React.Component {
 	render() {
     var {dashboardId, widgetId, stock, pair, timeframe} = this.props.data
-    stock = stock !== '' ? stock : DashboardsStore.stock
-    pair = pair !== '' ? pair : DashboardsStore.pair
     var key = `${stock}--${pair}--${timeframe}`
     if (
       OhlcvStore.ohlcvComputed === undefined ||
@@ -21,7 +18,6 @@ export default class ChartComponent extends React.Component {
       JSON.parse( JSON.stringify(OhlcvStore.ohlcvComputed[key]) ).length < 3 ) {
 			return <Preloader />
 		} else {
-      window.dispatchEvent(new Event('resize')) // ???
       var ordersJSON = JSON.parse( JSON.stringify(OhlcvStore.ohlcvComputed[key]) )
 			ordersJSON = ordersJSON.map(function(order){
 				order.date = new Date(order.date)
@@ -35,16 +31,20 @@ export default class ChartComponent extends React.Component {
   }
 
   componentWillMount() {
-    OhlcvStore.count(1, this.props.data.stock, this.props.data.pair, this.props.data.timeframe)
+    var {stock, pair, timeframe} = this.props.data
+    OhlcvStore.count(1, stock, pair, timeframe)
   }
   componentWillUnmount() {
-    OhlcvStore.count(-1, this.props.data.stock, this.props.data.pair, this.props.data.timeframe)
+    var {stock, pair, timeframe} = this.props.data
+    OhlcvStore.count(-1, stock, pair, timeframe)
   }
   componentWillUpdate() {
-    OhlcvStore.count(-1, this.props.data.stock, this.props.data.pair, this.props.data.timeframe)
+    var {stock, pair, timeframe} = this.props.data
+    OhlcvStore.count(-1, stock, pair, timeframe)
   }
   componentDidUpdate() {
-    OhlcvStore.count(1, this.props.data.stock, this.props.data.pair, this.props.data.timeframe)
+    var {stock, pair, timeframe} = this.props.data
+    OhlcvStore.count(1, stock, pair, timeframe)
   }
 
 }
diff --git a/react-client/src/stores/DashboardsStore.js b/react-client/src/stores/DashboardsStore.js
@@ -1,5 +1,5 @@
 import { observable, action, reaction, computed } from 'mobx'
-import { version, AsyncTrunk, ignore } from 'mobx-sync'
+import { version, AsyncTrunk } from 'mobx-sync'
 import _ from 'lodash'
 import axios from 'axios'
 import widgetsIcons from './data/widgetsIcons'
@@ -26,7 +26,9 @@ class DashboardsStore {
     '2': { id: '2', name: 'Second', bg: '#ccc', icon: '/img/widgets/helmet.svg', type: 'terminal', stock: 'LIQUI', pair: 'LTC_BTC', widgets: [], counter: 0},
   }
   @computed get name() { return this.dashboards[this.dashboardActiveId].name }
-  @computed get stock() { return this.dashboards[this.dashboardActiveId].stock }
+  @computed get stock() {
+    return this.dashboards[this.dashboardActiveId].stock
+  }
   @computed get stockLowerCase() { return (this.dashboards[this.dashboardActiveId].stock).toLowerCase() }
   @computed get pair() { return this.dashboards[this.dashboardActiveId].pair }
   @computed get icon() { return this.dashboards[this.dashboardActiveId].icon }
@@ -38,7 +40,6 @@ class DashboardsStore {
     this.dashboardsCounter += 1
     var icon = '/img/widgets/' + _.sample(widgetsIcons)
     this.dashboards[this.dashboardsCounter+""] = { id: this.dashboardsCounter+"", name: 'Untitled', bg: '#ccc', icon: icon, type: 'terminal', stock: 'BINANCE', pair: 'ETH_BTC', widgets: [], counter: 0}
-    // window.dispatchEvent(new Event('resize'))
   }
   @action removeDashboard(id) {
     if (Object.keys(this.dashboards).length > 1) {
@@ -70,12 +71,12 @@ class DashboardsStore {
 
   @observable counter = 15
 
-  @ignore @observable widgetsMarket = []
+  @observable widgetsMarket = []
   @action fetchWidgets(){
     axios.get(`${this.terminalBackend}/widgets/`)
     .then((response) => {
       if (response.data.length === 0) {
-        this.widgetsMarket = []
+        // this.widgetsMarket = []
       } else {
         this.widgetsMarket = response.data
       }
@@ -104,10 +105,10 @@ class DashboardsStore {
   }
 
   @action addWidget(widget) {
-    var dashboardName = this.dashboards[this.dashboardActiveId].name
+    var activeDashboard = this.dashboardActiveId
     this.dashboards[this.dashboardActiveId].counter = (parseInt(this.dashboards[this.dashboardActiveId].counter, 10) + 1).toString()
     this.dashboards[this.dashboardActiveId].widgets.push({
-      i: this.dashboards[this.dashboardActiveId].counter+"", uid: dashboardName+'_'+this.dashboards[this.dashboardActiveId].counter, name: widget.name, component: widget.component, settings: widget.settings, settingsWidth: widget.settingsWidth, header: widget.header, customHeader: widget.customHeader, data: widget.data, x: 0, y: 0, w: 5, h: 19, minW: 2, minH: 3
+      i: this.dashboards[this.dashboardActiveId].counter+"", uid: activeDashboard+'_'+this.dashboards[this.dashboardActiveId].counter, name: widget.name, component: widget.component, settings: widget.settings, settingsWidth: widget.settingsWidth, header: widget.header, customHeader: widget.customHeader, data: widget.data, x: 0, y: 0, w: 5, h: 19, minW: 2, minH: 3
     })
   }
 

diff --git a/react-client/src/stores/OhlcvStore.js b/react-client/src/stores/OhlcvStore.js
@@ -7,15 +7,17 @@ import _ from 'lodash'
 class OhlcvStore {
   constructor() {
     const start = () => {
+      // console.log('START')
+      // console.log(this.activeTimeframes)
       _.forEach(this.activeTimeframes, (counter, key) => {
         var [stock, pair, timeframe] = key.split('--')
         if ( counter > 0 && (SettingsStore.fetchEnabled.value) ) this.fetchOhlcv(stock, pair, timeframe)
       })
     }
-    // start()
+    start()
     setInterval(() => {
       start()
-    }, 4000)
+    }, 3000)
   }
   @computed get stock() {return DashboardsStore.stock }
   @computed get stockLowerCase() {return DashboardsStore.stockLowerCase }
@@ -55,7 +57,6 @@ class OhlcvStore {
     .then((response) => {
       // if (this.hash === JSON.stringify(response.data)) return true
       // this.hash = JSON.stringify(response.data)
-
       if (!response.data) {
         this.ohlcv[key] = []
       } else {
@@ -70,16 +71,10 @@ class OhlcvStore {
   activeTimeframes = {}
 
   @action count(n, stock, pair, timeframe) {
-    stock = stock !== '' ? stock : this.stock
-    pair = pair !== '' ? pair : this.pair
     var key = `${stock}--${pair}--${timeframe}`
-    if (!this.ohlcv[key]) this.ohlcv[key] = []
-    if (!this.activeTimeframes[key]) this.activeTimeframes[key] = 0
+    if (this.ohlcv[key] === undefined) this.ohlcv[key] = []
+    if (this.activeTimeframes[key] === undefined) this.activeTimeframes[key] = 0
     this.activeTimeframes[key] += n
-
-    if (this.activeTimeframes[key] === 0) {
-      delete this.activeTimeframes[key]
-    }
   }
 }