Add chart library
This commit is contained in:
@@ -1,4 +1,5 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { LineChart, Line } from "recharts";
|
||||
|
||||
const onWeatherFetch = async function (cb) {
|
||||
const response = await fetch(
|
||||
@@ -9,6 +10,12 @@ const onWeatherFetch = async function (cb) {
|
||||
cb(data);
|
||||
};
|
||||
|
||||
const WeatherChart = function ({ data }) {
|
||||
<LineChart width={400} height={400} data={data}>
|
||||
<Line type="monotone" dataKey="uv" stroke="#8884d8" />
|
||||
</LineChart>;
|
||||
};
|
||||
|
||||
const App: React.FC = () => {
|
||||
const [data, setData] = useState(null);
|
||||
|
||||
@@ -18,7 +25,11 @@ const App: React.FC = () => {
|
||||
|
||||
console.log(data);
|
||||
|
||||
return <div className="fixed top-0 right-0 bottom-0 left-0">Hello world</div>;
|
||||
return (
|
||||
<div className="fixed top-0 right-0 bottom-0 left-0">
|
||||
{data ? <WeatherChart data={data} /> : "Loading..."}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default App;
|
||||
|
||||
Reference in New Issue
Block a user