Merge pull request #18 from cyator/main

MQTT, Websockets, Influx Query, Print and WS on telegraf and Streaming Charts

client/components/LineChart.js

@@ -1,4 +1,7 @@
 import { Line } from 'react-chartjs-2';
+import 'chartjs-adapter-luxon';
+import StreamingPlugin from 'chartjs-plugin-streaming';
+
 import {
 	Chart as ChartJS,
 	CategoryScale,
@@ -17,24 +20,38 @@ ChartJS.register(
 	LineElement,
 	Title,
 	Tooltip,
-	Legend
+	Legend,
+
+	StreamingPlugin
 );
 
-function LineChart({ x = [], y = [] }) {
+function LineChart({ label, onRefresh }) {
 	const data = {
-		labels: y,
 		datasets: [
 			{
-				label: 'altitude',
-				backgroundColor: 'rgb(255, 99, 132)',
+				label: label,
+				backgroundColor: 'rgba(255, 99, 132, 0.5)',
 				borderColor: 'rgb(255, 99, 132)',
-				data: x,
+				data: [],
 			},
 		],
 	};
 
 	const options = {
-		responsive: true,
+		scales: {
+			x: {
+				type: 'realtime',
+				realtime: {
+					delay: 2000,
+					onRefresh: onRefresh,
+					//pause: false,
+					// ttl: 60000,
+					// duration: 20000,
+					// refresh: 100,
+					// frameRate: 30,
+				},
+			},
+		},
 		plugins: {
 			legend: {
 				position: 'top',

client/components/charts/Altitude.js

@@ -0,0 +1,19 @@
+import { memo } from 'react';
+import LineChart from '../LineChart';
+
+function Altitude() {
+	const onRefresh = (chart) => {
+		//listen for ws
+
+		const arr = chart.data.datasets[0].data;
+		arr.push({
+			x: Date.now(),
+			y: Math.random(),
+		});
+		chart.update('quiet');
+	};
+
+	return <LineChart onRefresh={onRefresh} label="altitude" />;
+}
+
+export default memo(Altitude);

client/config/getData.js

@@ -0,0 +1,22 @@
+export const getData = () => {
+	fetch('/api/altitude')
+		.then(async (res) => {
+			if (res.status !== 200) {
+				const isJson = res.headers
+					.get('content-type')
+					?.includes('application/json');
+				if (!isJson) {
+					return Promise.reject(res);
+				}
+				const data = await res.json();
+				const error = data ?? res.statusText;
+				return Promise.reject(error);
+			}
+			let data = await res.json();
+			console.log('data', data);
+			return data;
+		})
+		.catch((e) => {
+			console.error(e);
+		});
+};

client/config/influx.js

@@ -0,0 +1,10 @@
+// connect to influx
+
+import { InfluxDB } from '@influxdata/influxdb-client';
+
+const url = 'http://localhost:8086';
+const token = 'mytoken';
+
+const client = new InfluxDB({ url: url, token: token });
+
+export default client;

client/config/mqtt.js

@@ -0,0 +1,39 @@
+import mqtt from 'mqtt';
+
+const URL = 'mqtt://localhost:1883';
+
+export default async () => {
+	const client = mqtt.connect(URL);
+
+	client.on('connect', (connack) => {
+		console.log('client connected', connack);
+	});
+	return client;
+};
+
+// socket.on('ignite', (payload) => {
+// 	console.log('ignition payload', payload);
+// 	client.publish(
+// 		'esp32/ignition',
+// 		payload,
+// 		{ qos: 1, retain: false },
+// 		(PacketCallback, err) => {
+// 			if (err) {
+// 				console.log(err, 'MQTT publish packet');
+// 			}
+// 		}
+// 	);
+// });
+// socket.on('eject', (payload) => {
+// 	console.log('eject payload', payload);
+// 	client.publish(
+// 		'esp32/ejection',
+// 		payload,
+// 		{ qos: 1, retain: false },
+// 		(PacketCallback, err) => {
+// 			if (err) {
+// 				console.log(err, 'MQTT publish packet');
+// 			}
+// 		}
+// 	);
+// });