diff --git a/src/CHANGELOG.md b/src/CHANGELOG.md index 06fd4cc..1ef9c13 100644 --- a/src/CHANGELOG.md +++ b/src/CHANGELOG.md @@ -2,7 +2,7 @@ ## [Unreleased] - - Fetch raw price feed of a pair, refs #9 + - Pair price chart page, refs #9 ## [2020.10.24] - Autodeploy on merge, refs #1 diff --git a/src/components/Pair.jsx b/src/components/Pair.jsx index 735d589..281c9df 100644 --- a/src/components/Pair.jsx +++ b/src/components/Pair.jsx @@ -22,7 +22,7 @@ EtherscanTokenLink.defaultProps = { }; const PairDetailsLink = ({ onClick }) => ( - + ); PairDetailsLink.propTypes = { onClick: PropTypes.func.isRequired, @@ -46,8 +46,10 @@ const Pair = ({ address, pairDict }) => { /> - $ - { pairDict.token_price.toFixed(decimalPlace) } + + $ + { pairDict.token_price.toFixed(decimalPlace) } + { pairDict.share.toFixed(decimalPlace) } @@ -73,10 +75,6 @@ const Pair = ({ address, pairDict }) => { setShowDetails(false)} /> setShowDetails(true)} /> - {' '} - - - ); diff --git a/src/components/Pool.jsx b/src/components/Pool.jsx index 988ea3b..51b10a8 100644 --- a/src/components/Pool.jsx +++ b/src/components/Pool.jsx @@ -1,21 +1,40 @@ import React from 'react'; import PropTypes from 'prop-types'; +import { Line } from 'react-chartjs-2'; +import Title from './Title'; const TokenDaily = { date: PropTypes.instanceOf(Date).isRequired, price_usd: PropTypes.number.isRequired, }; +const PoolPropTypes = { + pairDailyList: PropTypes.arrayOf(TokenDaily).isRequired, +}; + +const LineChart = ({ pairDailyList }) => { + const sortedPairDailyList = pairDailyList.sort( + (a, b) => new Date(b.date) - new Date(a.date), + ); + const labels = sortedPairDailyList.map((pairDaily) => pairDaily.date); + const datasetsData = sortedPairDailyList.map((pairDaily) => pairDaily.price_usd); + const data = { + labels, + datasets: [{ + label: 'Price USD', + data: datasetsData, + }], + }; + return ; +}; +LineChart.propTypes = PoolPropTypes; + const Pool = ({ pairDailyList }) => ( <> -

Pool page

-
-      {JSON.stringify(pairDailyList, null, 2)}
-    
+ + <LineChart pairDailyList={pairDailyList} /> </> ); -Pool.propTypes = { - pairDailyList: PropTypes.arrayOf(TokenDaily).isRequired, -}; +Pool.propTypes = PoolPropTypes; export default Pool;