diff --git a/src/components/exchange/exchangeTriggerAdd.js b/src/components/exchange/exchangeTriggerAdd.js new file mode 100644 index 0000000..aec9640 --- /dev/null +++ b/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 ( +
+ +
+ ) +} + +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) diff --git a/src/components/exchange/indexExchange.js b/src/components/exchange/indexExchange.js index 9b3234a..0025ac8 100644 --- a/src/components/exchange/indexExchange.js +++ b/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) => { @@ -31,30 +36,50 @@ const IndexExchange = ({ Date: candle.Date } ) - } + } + + let pixelScale = ( exchange.candles.graphMax - exchange.candles.graphMin ) / 590 + + const getMousePosition = (event) => { + setMousePosition( { x: event.pageX, y: event.pageY } ) + } + return (
-1 ? 'exchangeChartUser' : 'exchangeChartGuest' }> -
+
getMousePosition(event) } + style={ { width: exchange.candles.candlesCount * 15 + 'px' } }> + { user.id > -1 ? ( +
+
+

{ ( exchange.candles.graphMax - ( pixelScale * ( mousePosition.y - 175 ) ) ) }

+
+
+
+
+ ) : ( +
+ ) } { 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 (
+ style={ { paddingTop: chartScaleY + 'px' } }>
+ style={ { height: parseInt( (candle.Max - highValue ) / scaleProperties ) + 'px', background: color }}>
+ style={{ height: parseInt( difference ) + 'px', background: color }}>
+ style={{ height: parseInt( difference ) + 'px', background: color }}>
+ style={ { height: parseInt( ( lowValue - candle.Min ) / scaleProperties ) + 'px', background: color }}>
@@ -108,11 +123,13 @@ const IndexExchange = ({ }
-
-1 ? 'exchangeInterface' : 'emptySpaceExchange' }> -
-

Open: { candleInfo.Open }, Close: { candleInfo.Close }

-

Max: { candleInfo.Max }, Min: { candleInfo.Min }

-

Volume: { candleInfo.Vol }

+
-1 ? 'exchangeInterface' : 'exchangeEmptySpace' }> +
+

Open: { candleInfo.Open },

+

Close: { candleInfo.Close },

+

Max: { candleInfo.Max },

+

Min: { candleInfo.Min },

+

Volume: { candleInfo.Vol },

Date: { candleInfo.Date }

@@ -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) diff --git a/src/stores/exchange/duck/operations.js b/src/stores/exchange/duck/operations.js index dda6760..a5cab4a 100644 --- a/src/stores/exchange/duck/operations.js +++ b/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)) diff --git a/src/styles/elements.scss b/src/styles/elements.scss index cfa2cab..86090b2 100644 --- a/src/styles/elements.scss +++ b/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,7 +54,11 @@ margin-bottom: 10px; } -@mixin backgroundDivMenubarStyle{ +@mixin backgroundColorOnly { + background-color: rgba(22,28,29,0.4); +} + +@mixin backgroundDivMenubarStyle { background-color: rgba(22,28,29,0.2); border-bottom: 1px solid; border-color: rgba(117,82,29,0.7); diff --git a/src/styles/indexExchange.scss b/src/styles/indexExchange.scss index 46b7c61..4fa0f9f 100644 --- a/src/styles/indexExchange.scss +++ b/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; +}