Created
April 28, 2021 09:23
-
-
Save infantiablue/7ef201478a40b436e07ee1f7a47f5c05 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React, { useState, useEffect } from "react"; | |
import callAPI from "./utils"; | |
function App() { | |
const [latestPrice, setLatestPrice] = useState(0); | |
useEffect(() => { | |
fetchData().then((chartData) => { | |
initChart(chartData); | |
setLatestPrice(parseFloat(chartData.price[chartData.price.length - 1]).toFixed(2)); | |
}); | |
}, []); | |
const fetchData = async () => { | |
let data = { index: [], price: [], volumes: [] }; | |
let result = await callAPI("https://api.coingecko.com/api/v3/coins/ethereum/market_chart?vs_currency=usd&days=1&interval=1m"); | |
for (const item of result.prices) { | |
data.index.push(item[0]); | |
data.price.push(item[1]); | |
} | |
for (const item of result.total_volumes) data.volumes.push(item[1]); | |
return data; | |
}; | |
const initChart = (data) => { | |
let trace_price = { | |
name: "Price ($)", | |
x: data.index.map((t) => new Date(t)), | |
y: data.price, | |
xaxis: "x", | |
yaxis: "y1", | |
type: "scatter", | |
mode: "lines+markers", | |
marker: { color: "blue", size: 3 }, | |
}; | |
let trace_volumes = { | |
name: "Volumne ($B)", | |
x: data.index.map((t) => new Date(t)), | |
y: data.volumes, | |
xaxis: "x", | |
yaxis: "y2", | |
type: "bar", | |
barmode: "relative", | |
marker: { | |
color: "rgb(49,130,189)", | |
opacity: 0.7, | |
}, | |
}; | |
let layout = { | |
autosize: true, | |
height: "100%", | |
margin: { | |
l: 50, | |
r: 20, | |
t: 35, | |
pad: 3, | |
}, | |
showlegend: false, | |
xaxis: { | |
domain: [1, 1], | |
anchor: "y2", | |
}, | |
yaxis: { | |
domain: [0.1, 1], | |
anchor: "x", | |
}, | |
yaxis2: { | |
showticklabels: false, | |
domain: [0, 0.1], | |
anchor: "x", | |
}, | |
grid: { | |
roworder: "bottom to top", | |
}, | |
}; | |
let config = { responsive: true }; | |
let series = [trace_price, trace_volumes]; | |
Plotly.newPlot("chart", series, layout, config); | |
}; | |
return ( | |
<> | |
<h2 className='text-center text-primary'>$ {latestPrice}</h2> | |
<div id='chart' className='p-0 m-0'></div> | |
</> | |
); | |
} | |
export default App; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment