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)}
-
+
+
>
);
-Pool.propTypes = {
- pairDailyList: PropTypes.arrayOf(TokenDaily).isRequired,
-};
+Pool.propTypes = PoolPropTypes;
export default Pool;