import React, { useState, useEffect } from 'react'; import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts'; import axios from 'axios'; import moment from 'moment'; import './App.css'; function App() { const [data, setData] = useState(false); const [history, setHistory] = useState(false); useEffect(() => { const get = async() => { try { const res = await axios.get('https://solar-api.dns.t0.vc/data'); setData(res.data); } catch (error) { setData(false); } }; get(); const interval = setInterval(get, 30000); return () => clearInterval(interval); }, []); useEffect(() => { const get = async() => { try { const date = moment().format('YYYY-MM-DD'); const res = await axios.get('https://solar-api.dns.t0.vc/history/'+date); setHistory(res.data); } catch (error) { setHistory(false); } }; get(); const interval = setInterval(get, 30000); return () => clearInterval(interval); }, []); return (
Loading...
} {data ?Total: {data.actual_total} W — {parseInt(data.actual_total / 5985 * 100)}%
Today: {data.today_energy} kWh
Updated: {data.timestamp.split(' ')[1]}
Individual panels:
Loading...
}