PoC: add echarts for sensor readings

aastefanov · aastefanov · commit 90496aa6241a · 2026-01-12T20:15:07.000+02:00
Directly read sensors from Prometheus instead of embedding Grafana in an
iframe.
This must be cleaned up a bit before merging.
diff --git a/package.json b/package.json
@@ -30,7 +30,9 @@
     "react-router-dom": "^7.11.0",
     "sass": "^1.97.0",
     "swr": "^2.3.8",
-    "vite-plugin-compression": "^0.5.1"
+    "vite-plugin-compression": "^0.5.1",
+    "echarts": "^6.0.0",
+    "echarts-for-react": "^3.0.5"
   },
   "devDependencies": {
     "typescript":">=4.0.0",
diff --git a/public/locales/bg.yaml b/public/locales/bg.yaml
@@ -109,6 +109,11 @@ network_devices:
     new_network_device: Ново мрежово устройство
   edit:
     edit_network_device: Редакция на мрежово устройство
+rooms:
+  big-room: Голяма зала
+  small-room: Малка зала
+  kitchen: Кухня
+  outside: Навън
 views:
   dashboard:
     sensor_readings: Температура и влажност на въздуха
@@ -227,6 +232,8 @@ views:
     are_you_sure: 'Сигурни ли сте?'
   sensors:
     title: Показания на сензорите
+    temperature: Температура
+    humidity: Влажност
   action_log:
     title: Лог на действията
     columns:
diff --git a/public/locales/en.yaml b/public/locales/en.yaml
@@ -103,6 +103,11 @@ network_devices:
     new_network_device: New network device
   edit:
     edit_network_device: Edit network device
+rooms:
+  big-room: Big Room
+  small-room: Small Room
+  kitchen: Kitchen
+  outside: Outside
 views:
   dashboard:
     sensor_readings: Air temperature and humidity
@@ -219,6 +224,8 @@ views:
     are_you_sure: 'Are you shnur?'
   sensors:
     title: Sensor readings
+    temperature: Temperature
+    humidity: Humidity
   action_log:
     title: Action logs
     columns:
diff --git a/src/config.ts b/src/config.ts
@@ -13,10 +13,10 @@ export const oidc = {
 
 export type MqttConfig = {[topic: string]: {label: string}}
 export const sensors: MqttConfig = {
-    'sensors/big-room': {label: 'Big room',},
-    'sensors/small-room': {label: 'Small room',},
-    'sensors/kitchen': {label: 'Kitchen',},
-    'sensors/outside': {label: 'Outside',},
+    'sensors/big-room/test': {label: 'big-room'},
+    'sensors/small-room/test': {label: 'small-room',},
+    'sensors/kitchen/test': {label: 'kitchen',},
+    'sensors/outside/test': {label: 'outside',},
 };
 
 export const variantHosts: {[hostname: string]: string} = {
@@ -45,12 +45,4 @@ export const variants: {[variant: string]: VariantConfig} = {
         logo: {url: colibriLogo, alt: 'colibri logo',},
         title: 'Casa Libri',
     },
-}
-
-export const grafana = {
-    urls: [
-        'https://stats.initlab.org/d-solo/SGAb0ZXMk/temperature-and-humidity?orgId=1&refresh=1m&panelId=4',
-        'https://stats.initlab.org/d-solo/SGAb0ZXMk/temperature-and-humidity?orgId=1&refresh=1m&panelId=5',
-        'https://stats.initlab.org/d-solo/SGAb0ZXMk/temperature-and-humidity?orgId=1&refresh=1m&panelId=10',
-    ]
-};
+}
diff --git a/src/hooks/useEndpoints.ts b/src/hooks/useEndpoints.ts
@@ -33,6 +33,10 @@ export function useMqttStatus(config?: SWRConfiguration) {
     return useCheckSWR<{ [topic: string]: RawMqttReading }>(import.meta.env.MQTT_PROXY_URL.concat('status'), config);
 }
 
+export function useMqttHistory(config?: SWRConfiguration) {
+    return useCheckSWR<{ [sensor: string]: {[metric: string]: [[number, number]]} }>(import.meta.env.MQTT_PROXY_URL.concat('sensors/'), config);
+}
+
 export function useActionLog(config?: SWRConfiguration) {
     return useAuthSWR<PortierActionLogEntry[]>(import.meta.env.PORTIER_URL.concat('api/actionLog/0/0'), config);
 }
diff --git a/src/hooks/useLocale.ts b/src/hooks/useLocale.ts
diff --git a/src/pages/Sensors.tsx b/src/pages/Sensors.tsx
@@ -1,22 +1,92 @@
 import {Col, Row} from 'react-bootstrap';
 import {useTranslation} from 'react-i18next';
-import {grafana} from '../config.ts';
+import {sensors} from '../config.ts';
+import {useMqttHistory} from "../hooks/useEndpoints.ts";
+import EChartsReact from "echarts-for-react";
 
 const Sensors = () => {
     const {t} = useTranslation();
+    const {data} = useMqttHistory();
 
-    return (<>
+    if(!data) return <></>;
+
+    return <>
         <Row>
             <Col>
                 <h2>{t('views.sensors.title')}</h2>
             </Col>
         </Row>
-        <Row className="row-cols row-cols-1 row-cols-xxl-3">
-            {grafana.urls.map(url => <Col key={url}>
-                <iframe src={url} className="w-100" height={300}/>
-            </Col>)}
+        <Row className="row-cols row-cols-1 row-cols-xxl-2">
+
+            {Object.entries(data).map(([sensor, metrics]) => {
+
+                const temperature = metrics['sensor_temperature'];
+                const humidity = metrics['sensor_humidity'];
+
+                const matchedSensor = Object.keys(sensors).find(n => n.includes(sensor));
+                const label = sensors[matchedSensor??''].label ?? sensor;
+
+                const yAxis = [];
+                const series = [];
+
+                const parse = (d: [number, number]):  [number, number] => [d[0]*1000, d[1]];
+
+                if(temperature) {
+                    yAxis.push({
+                        name: t('views.sensors.temperature'),
+                        type: 'value',
+                        interval: 2.5,
+                        axisLabel: {formatter: '{value} °C'},
+                        min: (v: any) => Math.floor(v.min / 5) * 5,
+                        max: (v: any) => Math.ceil(v.max / 5) * 5,
+                    });
+                    series.push({
+                        name: t('views.sensors.temperature'),
+                        type: 'line',
+                        smooth: true,
+                        symbol: 'none',
+                        data: temperature.map(parse),
+                        yAxisIndex: yAxis.length - 1,
+                        tooltip: {valueFormatter: (v: any) => `${v} °C`}
+                    });
+                }
+                if(humidity) {
+                    yAxis.push({
+                        name: t('views.sensors.humidity'),
+                        type: 'value',
+                        interval: 2.5,
+                        axisLabel: {formatter: '{value} %'},
+                        min: (v: any) => Math.floor(v.min / 5) * 5,
+                        max: (v: any) => Math.ceil(v.max / 5) * 5,
+                    });
+                    series.push({
+                        name: t('views.sensors.humidity'),
+                        type: 'line',
+                        smooth: true,
+                        symbol: 'none',
+                        data: humidity.map(parse),
+                        yAxisIndex: yAxis.length - 1,
+                        tooltip: {valueFormatter: (v: any) => `${v} %`}
+                    });
+                }
+
+
+                    return <Col key={sensor}><EChartsReact option={{
+                        title: {text: t(`rooms.${label}`), left: 'left'},
+                        tooltip: {
+                            trigger: 'axis'
+                        },
+                        legend: {type: 'plain', left: 'left'},
+                        xAxis: {type: 'time',max:Date.now()},
+                        grid: { left: 0, right: 0, top: 70, bottom: 70 },
+                        yAxis: yAxis,
+                        series: series,
+                        animation: false,
+                    }}/></Col>;
+                }
+            )}
         </Row>
-    </>);
+    </>;
 };
 
 export default Sensors;
diff --git a/src/widgets/SensorReadings/SensorPanel.tsx b/src/widgets/SensorReadings/SensorPanel.tsx
@@ -6,6 +6,7 @@ import './SensorPanel.css';
 import {useMemo, useState} from 'react';
 import type {MqttReading} from "../../types";
 import type {RawMqttReading} from "../../portier-types";
+import {useTranslation} from "react-i18next";
 
 const temperatureThresholds = [18, 24, 26, 32];
 
@@ -52,7 +53,7 @@ const SensorReadingValue = ({reading, valueFormat}: {
 }
 
 const SensorPanel = ({label, readings}: MqttReading) => {
-
+    const {t} = useTranslation();
         const formatTemperature = (t: number) => Math.round(t) + '°C'
         const formatHumidity = (h: number) => Math.round(h) + '%'
         const [loadTime] = useState<number>(Date.now);
@@ -104,7 +105,7 @@ const SensorPanel = ({label, readings}: MqttReading) => {
                                         <i className={'fa-solid fa-battery-' + batteryState(state.readings.battery.value)}
                                            title={formatTimestamp(state.readings.battery.timestamp)}
                                         />} {' '}
-                                    {label}
+                                    {t(`rooms.${label}`)}
                                 </div>
                             </Col>
                         </Row>

Original file line number	Diff line number	Diff line change
`@@ -33,6 +33,10 @@ export function useMqttStatus(config?: SWRConfiguration) {`
`33`	`33`	`return useCheckSWR<{ [topic: string]: RawMqttReading }>(import.meta.env.MQTT_PROXY_URL.concat('status'), config);`
`34`	`34`	`}`
`35`	`35`
	`36`	`+export function useMqttHistory(config?: SWRConfiguration) {`
	`37`	`+ return useCheckSWR<{ [sensor: string]: {[metric: string]: [[number, number]]} }>(import.meta.env.MQTT_PROXY_URL.concat('sensors/'), config);`
	`38`	`+}`
	`39`	`+`
`36`	`40`	`export function useActionLog(config?: SWRConfiguration) {`
`37`	`41`	`return useAuthSWR<PortierActionLogEntry[]>(import.meta.env.PORTIER_URL.concat('api/actionLog/0/0'), config);`
`38`	`42`	`}`