|
|
|
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 (
|
|
|
|
<div>
|
|
|
|
{history ?
|
|
|
|
<ResponsiveContainer width='100%' height={300}>
|
|
|
|
<LineChart data={history}>
|
|
|
|
<XAxis
|
|
|
|
dataKey='time'
|
|
|
|
minTickGap={10}
|
|
|
|
tickFormatter={timeStr => moment(timeStr).format('HH:mm')}
|
|
|
|
/>
|
|
|
|
<YAxis
|
|
|
|
domain={[0, 6000]}
|
|
|
|
/>
|
|
|
|
<CartesianGrid strokeDasharray='3 3'/>
|
|
|
|
<Tooltip
|
|
|
|
labelFormatter={timeStr => 'Time: ' + moment(timeStr).format('HH:mm')}
|
|
|
|
/>
|
|
|
|
|
|
|
|
<Line
|
|
|
|
type='monotone'
|
|
|
|
dataKey='actual_total'
|
|
|
|
name='Watts'
|
|
|
|
stroke='#ff5900'
|
|
|
|
strokeWidth={2}
|
|
|
|
dot={false}
|
|
|
|
animationDuration={1000}
|
|
|
|
/>
|
|
|
|
</LineChart>
|
|
|
|
</ResponsiveContainer>
|
|
|
|
:
|
|
|
|
<p>Loading...</p>
|
|
|
|
}
|
|
|
|
|
|
|
|
{data ?
|
|
|
|
<div className='container'>
|
|
|
|
<p>Total: {data.actual_total} W — {parseInt(data.actual_total / 5985 * 100)}%</p>
|
|
|
|
|
|
|
|
<p>Today: {data.today_energy} kWh</p>
|
|
|
|
|
|
|
|
<p>Updated: {data.timestamp.split(' ')[1]}</p>
|
|
|
|
|
|
|
|
<p>Individual panels:</p>
|
|
|
|
|
|
|
|
<div className='panels'>
|
|
|
|
{Object.values(data.inverters).map((x, i) =>
|
|
|
|
<>
|
|
|
|
<div
|
|
|
|
className='panel'
|
|
|
|
style={{ backgroundColor: `hsl(21, 100%, ${x.power[0]/315*50}%)` }}
|
|
|
|
>
|
|
|
|
<div className='panel-label'>
|
|
|
|
{x.power[0]}
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
{i != 2 &&
|
|
|
|
<div
|
|
|
|
className='panel'
|
|
|
|
style={{ backgroundColor: `hsl(21, 100%, ${x.power[1]/315*50}%)` }}
|
|
|
|
>
|
|
|
|
<div className='panel-label'>
|
|
|
|
{x.power[1]}
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
}
|
|
|
|
</>
|
|
|
|
)}
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
:
|
|
|
|
<p>Loading...</p>
|
|
|
|
}
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
export default App;
|