idk

client/src/App.css

@@ -47,3 +47,8 @@ p {
 	margin: 0.25em;
 }
 
+.recharts-wrapper p {
+	color: initial;
+	font-size: initial;
+}
+

client/src/App.js

@@ -6,11 +6,12 @@ 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://reg.t0.vc/solar.json');
+				const res = await axios.get('https://solar-api.dns.t0.vc/data');
 				setData(res.data);
 			} catch (error) {
 				setData(false);
@@ -18,45 +19,47 @@ function App() {
 		};
 
 		get();
-		const interval = setInterval(get, 1000);
+		const interval = setInterval(get, 30000);
 		return () => clearInterval(interval);
 	}, []);
 
-	const listen = () => {
-		var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
-		var myArrayBuffer = audioCtx.createBuffer(2, audioCtx.sampleRate * 5, audioCtx.sampleRate);
-		for (var channel = 0; channel < myArrayBuffer.numberOfChannels; channel++) {
-			var nowBuffering = myArrayBuffer.getChannelData(channel);
-			for (var i = 0; i < myArrayBuffer.length; i++) {
-				nowBuffering[i] = data.history[i % data.history.length].total / 24000.0;
-			}
-		}
-		var source = audioCtx.createBufferSource();
-		source.buffer = myArrayBuffer;
-		source.connect(audioCtx.destination);
-		source.start();
+	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>
-			{data ?
-				<div>
+			{history ?
 				<ResponsiveContainer width='100%' height={300}>
-						<LineChart data={data.history}>
+					<LineChart data={history}>
 						<XAxis
 							dataKey='time'
 							minTickGap={10}
-								tickFormatter={timeStr => moment.utc(timeStr).format('HH:mm')}
+							tickFormatter={timeStr => moment(timeStr).format('HH:mm')}
+						/>
+						<YAxis
+							domain={[0, 6000]}
 						/>
-							<YAxis />
 						<CartesianGrid strokeDasharray='3 3'/>
 						<Tooltip
-								labelFormatter={timeStr => 'Time: ' + moment.utc(timeStr).format('HH:mm')}
+							labelFormatter={timeStr => 'Time: ' + moment(timeStr).format('HH:mm')}
 						/>
 
 						<Line
 							type='monotone'
-								dataKey='total'
+							dataKey='actual_total'
 							name='Watts'
 							stroke='#ff5900'
 							strokeWidth={2}
@@ -65,14 +68,11 @@ function App() {
 						/>
 					</LineChart>
 				</ResponsiveContainer>
-
-					<button onClick={listen}>Listen</button>
-
-					{data.night ?
-						<div className='container'>
-							<p>The sun has set 😴</p>
-						</div>
 			:
+				<p>Loading...</p>
+			}
+
+			{data ?
 				<div className='container'>
 					<p>Total: {data.actual_total} W — {parseInt(data.actual_total / 5985 * 100)}%</p>
 
@@ -108,8 +108,6 @@ function App() {
 						)}
 					</div>
 				</div>
-					}
-				</div>
 			:
 				<p>Loading...</p>
 			}