add Dative for users in exchange

src/components/exchange/exchangeTriggerAdd.js

@@ -0,0 +1,36 @@
+import React, { useState, useEffect } from 'react'
+import { connect } from 'react-redux'
+
+import { getChart, getUserTriggers, getUserNotifications, getUserTransactions } from '../../stores/exchange/duck/operations'
+
+import '../../styles/indexExchange.scss'
+
+const ExchangeTriggerAdd = ({
+  user,
+  exchange, getChart, getUserTriggers, getUserNotifications,  getUserTransactions,
+  mousePosition }) => {
+
+  useEffect( () => { getUserTriggers(user) }, [] )
+
+
+  return (
+    <div className='exchangeTriggerDativeY'
+         style={ { marginTop: mousePosition.y + 'px' } }>
+
+    </div>
+  )
+}
+
+const mapStateToProps = state => ({
+  user: state.user,
+  exchange: state.exchange
+})
+
+const mapDispatchToProps = dispatch => ({
+  getChart: exchange => dispatch( getChart(exchange) ),
+  getUserTriggers: exchange => dispatch( getUserTriggers(exchange) ),
+  getUserNotifications: exchange => dispatch( getUserNotifications(exchange) ),
+  getUserTransactions: exchange => dispatch( getUserTransactions(exchange) )
+})
+
+export default connect(mapStateToProps,mapDispatchToProps)(ExchangeTriggerAdd)

src/components/exchange/indexExchange.js

@@ -1,24 +1,29 @@
 import React, { useState, useEffect } from 'react'
 import { connect } from 'react-redux'
 
-import { getChart, getTriggers, getNotifications, getTransactions } from '../../stores/exchange/duck/operations'
+import { getChart, getUserTriggers, getUserNotifications, getUserTransactions } from '../../stores/exchange/duck/operations'
+
+import ExchangeTriggerAdd from './exchangeTriggerAdd'
 
 import '../../styles/indexExchange.scss'
 
 const IndexExchange = ({
   user,
-  exchange, getChart, getTriggers, getNotifications,  getTransactions }) => {
+  exchange, getChart, getUserTriggers, getUserNotifications,  getUserTransactions }) => {
 
   useEffect( () => { getChart() }, [] )
+  useEffect( () => { getUserTriggers() }, [] )
 
   const [candleInfo, setCandleInfo] = useState( { Open: 0, Close: 0, Min: 0, Max: 0, Vol: 0 } )
 
+  const [mousePosition, setMousePosition] = useState( { x: 0, y: 0 } )
+
   const colorGreen = {
-    background: 'green',
+    background: 'green'//'rgba(0,93,0,1)',
   }
 
   const colorRed = {
-    background: 'red',
+    background: 'red'//'rgba(136,15,15,1)',
   }
 
   const getCandleInformation = (candle) => {
@@ -33,28 +38,48 @@ const IndexExchange = ({
    )
  }
 
+ let pixelScale = ( exchange.candles.graphMax - exchange.candles.graphMin ) / 590
+
+ const getMousePosition = (event) => {
+   setMousePosition( { x: event.pageX, y: event.pageY } )
+ }
+
+
   return (
     <div className='indexExchange'>
       <div className={ user.id > -1 ? 'exchangeChartUser' : 'exchangeChartGuest' }>
-        <div className='chart' style={ { width: exchange.candles.candlesCount * 15 + 'px' } }>
+        <div className='chart'
+             onMouseOver={ event => getMousePosition(event) }
+             style={ { width: exchange.candles.candlesCount * 15 + 'px' } }>
+          { user.id > -1 ? (
+            <div>
+              <div className='exchangeTriggerDativeY'
+                  style={ { transform: 'translateY(' + (mousePosition.y - 175) + 'px)' } }>
+                  <p>{ ( exchange.candles.graphMax - ( pixelScale * ( mousePosition.y - 175 ) ) ) }</p>
+              </div>
+              <div className='exchangeTriggerDativeX'
+                   style={ { transform: 'translateX(' + (mousePosition.x) + 'px)' } }>
+              </div>
+            </div>
+          ) : (
+            <div></div>
+          ) }
           { exchange.candles.candles.map( (candle, key) => {
 
                 const color = candle.Open > candle.Close ? colorRed.background : colorGreen.background
 
                 let highValue = candle.Open > candle.Close ? candle.Open : candle.Close
                 let lowValue = candle.Open < candle.Close ? candle.Open : candle.Close
-                let difference = highValue - lowValue
 
-                let chartScaleY = (exchange.candles.graphMax - candle.Max) / 8
+                let scaleProperties = 8
 
-                if ( difference > 0 && difference < 10 )
-                  difference *= 2
-                else if ( difference > 50 && difference < 100 )
-                  difference /= 2
-                else if ( difference >= 100 && difference <= 200 )
-                  difference /= 3
-                else if ( difference > 200 )
-                  difference = difference % 100
+                let chartScaleY = (exchange.candles.graphMax - candle.Max) / scaleProperties
+
+                let onePercentScaleY = 100 / chartScaleY
+                let difference = (( highValue - lowValue ) / onePercentScaleY ) / scaleProperties
+
+                if ( parseInt(difference) === 0 )
+                  difference = 1
 
                 return (
                   <div
@@ -65,32 +90,22 @@ const IndexExchange = ({
                     <div className='sectionCandle'>
                       <div
                         className='candle'
-                        style={ { paddingTop: chartScaleY + 'px' } }
-                        >
+                        style={ { paddingTop: chartScaleY + 'px' } }>
                         <div
                           className='candleMaxValue'
-                          style={ { height: parseInt( (candle.Max - highValue ) / 2 ) + 'px',
-                                    background: color }
-                        }>
+                          style={ { height: parseInt( (candle.Max - highValue ) / scaleProperties ) + 'px', background: color }}>
                         </div>
                         <div
                           className='candleHigh'
-                          style={
-                            { height: parseInt( difference ) + 'px',
-                              background: color }
-                        }>
+                          style={{ height: parseInt( difference ) + 'px', background: color }}>
                         </div>
                         <div
                           className='candleLow'
-                          style={ { height: parseInt( difference ) + 'px',
-                                    background: color }
-                        }>
+                          style={{ height: parseInt( difference ) + 'px', background: color }}>
                         </div>
                         <div
                           className='candleMinValue'
-                          style={ { height: parseInt( ( lowValue - candle.Min ) / 2 ) + 'px',
-                                    background: color }
-                        }>
+                          style={ { height: parseInt( ( lowValue - candle.Min ) / scaleProperties ) + 'px', background: color }}>
                         </div>
                       </div>
                     </div>
@@ -108,11 +123,13 @@ const IndexExchange = ({
           }
         </div>
       </div>
-      <div className={ user.id > -1 ? 'exchangeInterface' : 'emptySpaceExchange' }>
-        <div>
-          <p>Open: { candleInfo.Open }, Close: { candleInfo.Close }</p>
-          <p>Max: { candleInfo.Max }, Min: { candleInfo.Min }</p>
-          <p>Volume: { candleInfo.Vol }</p>
+      <div className={ user.id > -1 ? 'exchangeInterface' : 'exchangeEmptySpace' }>
+        <div className='candleInformation'>
+          <p>Open: { candleInfo.Open },</p>
+          <p>Close: { candleInfo.Close },</p>
+          <p>Max: { candleInfo.Max },</p>
+          <p>Min: { candleInfo.Min },</p>
+          <p>Volume: { candleInfo.Vol },</p>
           <p>Date: { candleInfo.Date }</p>
         </div>
       </div>
@@ -120,6 +137,7 @@ const IndexExchange = ({
   )
 }
 
+
 const mapStateToProps = state => ({
   user: state.user,
   exchange: state.exchange
@@ -127,9 +145,9 @@ const mapStateToProps = state => ({
 
 const mapDispatchToProps = dispatch => ({
   getChart: exchange => dispatch( getChart(exchange) ),
-  getTriggers: exchange => dispatch( getTriggers(exchange) ),
-  getNotifications: exchange => dispatch( getNotifications(exchange) ),
-  getTransactions: exchange => dispatch( getTransactions(exchange) )
+  getUserTriggers: exchange => dispatch( getUserTriggers(exchange) ),
+  getUserNotifications: exchange => dispatch( getUserNotifications(exchange) ),
+  getUserTransactions: exchange => dispatch( getUserTransactions(exchange) )
 })
 
 export default connect(mapStateToProps,mapDispatchToProps)(IndexExchange)

src/stores/exchange/duck/operations.js

@@ -50,7 +50,7 @@ export const getChart = () =>
     dispatch(actions.setChart(chart))
   }
 
-export const getGetUserTriggers = () =>
+export const getUserTriggers = () =>
   async (dispatch) => {
     const triggers = await fetchGetUserTriggers()
     dispatch(actions.setUserTriggers(triggers))

src/styles/elements.scss

@@ -6,14 +6,9 @@
 }
 
 @mixin scrollStyle {
-  margin-top: 5px;
-  margin-bottom: 5px;
-  border: 0px;
-  border-radius: 10px;
-  font-size: 12pt;
-  text-align: center;
-  color: rgba(111,108,106,1);
-  background-color: rgba(22,28,29,0.6);
+  width: 10px;
+  height: 10px;
+  background-color: rgba(22,28,29,0.5);
 }
 
 @mixin inputStyle {
@@ -59,6 +54,10 @@
   margin-bottom: 10px;
 }
 
+@mixin backgroundColorOnly {
+  background-color: rgba(22,28,29,0.4);
+}
+
 @mixin backgroundDivMenubarStyle {
   background-color: rgba(22,28,29,0.2);
   border-bottom: 1px solid;

src/styles/indexExchange.scss

@@ -7,7 +7,7 @@
   width: 100%;
   height: auto;
 
-  padding-top: 20vh;
+  padding-top: 175px;
 
   margin-left: auto;
   margin-right: auto;
@@ -21,7 +21,7 @@
 
     width: 100%;
     height: 600px;
-    overflow-y: hidden;
+    overflow: hidden;
     overflow-x: scroll;
 
     .chart {
@@ -34,6 +34,11 @@
         margin-right: 5px;
         float: left;
 
+        opacity: 0.6;
+        &:hover {
+          opacity: 1;
+        }
+
         .sectionCandle {
           width: 100%;
           height: 400px;
@@ -73,8 +78,7 @@
           .volumen {
             width: 100%;
             height: 20px;
-            background: gray;
-            opacity: 0.8;
+            background: rgba(0,0,0,0.3);
           }
         }
       }
@@ -90,3 +94,49 @@
   .exchangeChartUser {
     @include exchangeChart
   }
+
+@mixin exchangeInterface {
+  width: 100%;
+  height: auto;
+  background: rgba(0,0,0,0.2);
+
+  .candleInformation {
+    width: 1500px;
+    height: 20px;
+    padding-top: 10px;
+    padding-bottom: 20px;
+    margin-left: auto;
+    margin-right: auto;
+
+    p {
+      width: 250px;
+      text-align: center;
+      float: left;
+    }
+  }
+}
+
+  .exchangeEmptySpace {
+    @include exchangeInterface
+  }
+  .exchangeInterface {
+    @include exchangeInterface
+  }
+
+.exchangeTriggerDativeY {
+  z-index: -1;
+  position: fixed;
+  width: 100vw;
+  height: 1px;
+  background-color: rgba(117,82,29,1);
+  transform: margin 700ms;
+}
+
+.exchangeTriggerDativeX {
+  z-index: -1;
+  position: fixed;
+  width: 1px;
+  height: 590px;
+  background-color: rgba(117,82,29,1);
+  transform: margin 700ms;
+}