From 90496aa6241a666234578e54ab800a56f0cf0c1f Mon Sep 17 00:00:00 2001
From: Albert Stefanov <aastefanov@outlook.com>
Date: Mon, 12 Jan 2026 20:15:07 +0200
Subject: [PATCH 1/2] PoC: add echarts for sensor readings

Directly read sensors from Prometheus instead of embedding Grafana in an
iframe.
This must be cleaned up a bit before merging.
---
 package.json                               |  4 +-
 public/locales/bg.yaml                     |  7 ++
 public/locales/en.yaml                     |  7 ++
 src/config.ts                              | 18 ++---
 src/hooks/useEndpoints.ts                  |  4 ++
 src/hooks/useLocale.ts                     |  0
 src/pages/Sensors.tsx                      | 84 ++++++++++++++++++++--
 src/widgets/SensorReadings/SensorPanel.tsx |  5 +-
 8 files changed, 106 insertions(+), 23 deletions(-)
 create mode 100644 src/hooks/useLocale.ts

diff --git a/package.json b/package.json
index 607b709..1112cd7 100644
--- 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
index ff79441..1fbed26 100644
--- 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
index 36c32e0..30ed0b4 100644
--- 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
index dea8439..1c29a3b 100644
--- 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',
-    ]
-};
+}
\ No newline at end of file
diff --git a/src/hooks/useEndpoints.ts b/src/hooks/useEndpoints.ts
index 0c41aa6..c897ba4 100644
--- 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
new file mode 100644
index 0000000..e69de29
diff --git a/src/pages/Sensors.tsx b/src/pages/Sensors.tsx
index 33fd886..8d4ac7d 100644
--- 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
index 149421f..800828e 100644
--- 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>

From 2a125b60c5ac062b13a54f6b57b289f0b50f36a6 Mon Sep 17 00:00:00 2001
From: Albert Stefanov <aastefanov@outlook.com>
Date: Sat, 17 Jan 2026 13:07:04 +0200
Subject: [PATCH 2/2] Graphs, Languages, Themes

- remove the grafana stuff completely and replace it with HASS-style
  charts
- add a language switcher, so it works no matter the fauna language
- add a dark mode, so people hating white backgrounds don't use
  extensions which ens***fy the experience (esp. irt the graphs)
---
 public/locales/bg.yaml                     |  4 +-
 public/locales/en.yaml                     |  4 +-
 src/App.tsx                                |  5 +-
 src/hooks/useEndpoints.ts                  |  6 +-
 src/hooks/useLocale.ts                     | 20 ++++++
 src/hooks/useTheme.ts                      |  8 +++
 src/i18n.ts                                |  5 +-
 src/layout/NavBar.tsx                      | 29 +++++---
 src/pages/Devices.tsx                      | 10 +--
 src/pages/Sensors.tsx                      | 74 ++-----------------
 src/portier-types.d.ts                     |  2 +
 src/widgets/SensorReadings/SensorGraph.tsx | 82 ++++++++++++++++++++++
 yarn.lock                                  | 41 +++++++++--
 13 files changed, 195 insertions(+), 95 deletions(-)
 create mode 100644 src/hooks/useTheme.ts
 create mode 100644 src/widgets/SensorReadings/SensorGraph.tsx

diff --git a/public/locales/bg.yaml b/public/locales/bg.yaml
index 1fbed26..111adbf 100644
--- a/public/locales/bg.yaml
+++ b/public/locales/bg.yaml
@@ -124,7 +124,7 @@ views:
     colibri_message_contact: |
       Ако имате проблем с ползването му, или е нужно да заявите достъп за нови служители, моля свържете се с Инит Лаб на
       имейл us@initlab.org.
-    colibri_message_emergency: При неотложни случаи, моля обадете се на тел. 0883 433 990 (Венцислав).
+    colibri_message_emergency: При неотложни случаи, моля обадете се на тел. 02 422 54 36.
   devices:
     lock: заключи
     unlock: отключи
@@ -170,6 +170,8 @@ views:
     lights: Осветление
     hvac: Климатици
     sensors: Графики
+    dark_mode: Тъмна тема
+    language: Език
     oauth_application_management: OAuth интеграция
     oauth_token_management: Упълномощени приложения
   registrations:
diff --git a/public/locales/en.yaml b/public/locales/en.yaml
index 30ed0b4..3882310 100644
--- a/public/locales/en.yaml
+++ b/public/locales/en.yaml
@@ -117,7 +117,7 @@ views:
     colibri_message_contact: |
       In case of technical difficulties, or you need to request access for new employees, please contact init Lab
       at us@initlab.org.
-    colibri_message_emergency: In case of major malfunction, please call +359 883 433 990 (Vencislav).
+    colibri_message_emergency: In case of major malfunction, please call +359 2 422 54 36.
   devices:
     lock: lock
     unlock: unlock
@@ -163,6 +163,8 @@ views:
     lights: Lights
     hvac: HVAC
     sensors: Sensors
+    dark_mode: Dark Mode
+    language: Language
     oauth_application_management: OAuth integration
     oauth_token_management: Authorized applications
   registrations:
diff --git a/src/App.tsx b/src/App.tsx
index 5c56a58..eedd1cf 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,4 +1,4 @@
-import {createElement} from 'react';
+import {createElement, useEffect} from 'react';
 import {Container} from 'react-bootstrap';
 import {Route, Routes} from 'react-router-dom';
 
@@ -14,10 +14,13 @@ import {useVariant} from './hooks/useVariant.ts';
 import {getDoorActions, getHvacActions, getLightActions} from "./utils/device.ts";
 import Devices from "./pages/Devices.tsx";
 import {useDocumentTitle} from '@uidotdev/usehooks';
+import {useTheme} from './hooks/useTheme.ts';
 
 function App() {
     const variant = useVariant();
     useDocumentTitle(variant.title);
+    const [theme] = useTheme();
+    useEffect(() => document.documentElement.setAttribute('data-bs-theme', theme), [theme]);
 
     return (<>
         <NavBar/>
diff --git a/src/hooks/useEndpoints.ts b/src/hooks/useEndpoints.ts
index c897ba4..edc4549 100644
--- a/src/hooks/useEndpoints.ts
+++ b/src/hooks/useEndpoints.ts
@@ -2,7 +2,7 @@ import useSWR, {type Fetcher, type SWRConfiguration} from 'swr';
 import {authenticatedFetcher, fetcher} from '../utils/swr.js';
 import {useAuthStorage} from './useAuthStorage.ts';
 import type {FaunaPresentUser, FaunaUser} from "../fauna-types";
-import type {PortierActionLogEntry, PortierDevice, RawMqttReading} from "../portier-types";
+import type {MqttSensorHistory, PortierActionLogEntry, PortierDevice, RawMqttReading} from "../portier-types";
 
 function useAuthSWR<TResult>(key: URL | string, config?: SWRConfiguration) {
     const {accessToken} = useAuthStorage();
@@ -34,7 +34,9 @@ export function useMqttStatus(config?: SWRConfiguration) {
 }
 
 export function useMqttHistory(config?: SWRConfiguration) {
-    return useCheckSWR<{ [sensor: string]: {[metric: string]: [[number, number]]} }>(import.meta.env.MQTT_PROXY_URL.concat('sensors/'), config);
+    return useCheckSWR<{
+        [sensor: string]: MqttSensorHistory
+    }>(import.meta.env.MQTT_PROXY_URL.concat('sensors/'), config);
 }
 
 export function useActionLog(config?: SWRConfiguration) {
diff --git a/src/hooks/useLocale.ts b/src/hooks/useLocale.ts
index e69de29..9039d7b 100644
--- a/src/hooks/useLocale.ts
+++ b/src/hooks/useLocale.ts
@@ -0,0 +1,20 @@
+import {type Dispatch, useEffect} from 'react';
+import {useLocalStorage} from '@uidotdev/usehooks';
+import {useCurrentUser} from './useEndpoints.ts';
+import {useTranslation} from "react-i18next";
+
+const LOCALE_KEY = 'locale';
+
+export function useLocale(): [string | undefined, Dispatch<string>] {
+    const {data: user} = useCurrentUser();
+    const [locale, setStoredLocale] = useLocalStorage<string>(LOCALE_KEY);
+
+    const {i18n} = useTranslation();
+
+    useEffect(() => {
+        i18n.changeLanguage(locale ?? user?.locale ?? 'bg').then(() => {})
+    }, [i18n, locale, user?.locale]);
+
+
+    return [locale, setStoredLocale];
+}
diff --git a/src/hooks/useTheme.ts b/src/hooks/useTheme.ts
new file mode 100644
index 0000000..e9987ef
--- /dev/null
+++ b/src/hooks/useTheme.ts
@@ -0,0 +1,8 @@
+import {useLocalStorage, useMediaQuery} from '@uidotdev/usehooks';
+
+const THEME_KEY = 'theme';
+
+export function useTheme() {
+    const darkMode = useMediaQuery('(prefers-color-scheme: dark)') ? 'dark' : 'light';
+    return useLocalStorage<string>(THEME_KEY, darkMode);
+}
diff --git a/src/i18n.ts b/src/i18n.ts
index 6b17d6d..4a2cf2f 100644
--- a/src/i18n.ts
+++ b/src/i18n.ts
@@ -1,13 +1,12 @@
 import i18n from 'i18next';
 import Backend from 'i18next-http-backend';
-import { initReactI18next } from 'react-i18next';
-import { load } from 'js-yaml';
+import {initReactI18next} from 'react-i18next';
+import {load} from 'js-yaml';
 
 i18n
     .use(Backend)
     .use(initReactI18next)
     .init({
-        fallbackLng: 'bg',
         backend: {
             loadPath: import.meta.env.BASE_URL + 'locales/{{lng}}.yaml',
             parse: (data: any) => load(data),
diff --git a/src/layout/NavBar.tsx b/src/layout/NavBar.tsx
index 0d7f3ff..8cd97b1 100644
--- a/src/layout/NavBar.tsx
+++ b/src/layout/NavBar.tsx
@@ -1,29 +1,36 @@
-import {useEffect} from 'react';
 import {NavLink, useLocation} from 'react-router-dom';
 import {Container, Image, Nav, Navbar, NavDropdown} from 'react-bootstrap';
 import {useTranslation} from 'react-i18next';
 
 import './NavBar.css';
-import i18n from '../i18n.ts';
 import {useVariant} from '../hooks/useVariant.ts';
 import {useCurrentUser} from '../hooks/useEndpoints.ts';
+import {useTheme} from '../hooks/useTheme.ts';
 import RequireRole from '../widgets/RequireRole.tsx';
 import RequireVariant from "../widgets/RequireVariant.tsx";
+import {useLocale} from '../hooks/useLocale.ts';
 
 const NavBar = () => {
     const {t} = useTranslation();
+    const [locale, setLocale] = useLocale();
     const backendUrl = import.meta.env.OIDC_AUTHORITY_URL;
     const {
         data: user,
     } = useCurrentUser();
     const variant = useVariant();
 
-    useEffect(function () {
-        if (user?.locale) {
-            i18n.changeLanguage(user.locale).then(() => {
-            });
-        }
-    }, [user]);
+    const [theme, setTheme] = useTheme();
+    const changeLanguage = async () =>
+        setLocale((!locale || locale == 'bg') ? 'en' : 'bg');
+
+    const changeTheme = () => setTheme(theme == 'light' ? 'dark' : 'light');
+
+//    useEffect(function () {
+//       if (user?.locale) {
+//            i18n.changeLanguage(user.locale).then(() => {
+//            });
+//        }
+//    }, [user]);
 
     const location = useLocation();
 
@@ -71,6 +78,12 @@ const NavBar = () => {
                             {t('views.navigation.labbers')}
                         </Nav.Link>
                     </RequireRole>
+                </Nav>
+                <Nav>
+                    <Nav.Link onClick={changeLanguage}><i className="fa-solid fa-language"/>{' '}<span
+                        className={'d-lg-none'}>{t('views.navigation.language')}</span></Nav.Link>
+                    <Nav.Link onClick={changeTheme}><i className="fa-solid fa-circle-half-stroke"/>{' '}<span
+                        className={'d-lg-none'}>{t('views.navigation.dark_mode')}</span></Nav.Link>
                     {user ? <NavDropdown title={<>
                         <i className="fa-solid fa-user"/>{' '}
                         {t('views.navigation.account')}
diff --git a/src/pages/Devices.tsx b/src/pages/Devices.tsx
index e7e17a9..b617b0e 100644
--- a/src/pages/Devices.tsx
+++ b/src/pages/Devices.tsx
@@ -12,7 +12,7 @@ import type {PortierDevice} from "../portier-types";
 const Devices = ({
                      deviceGroup,
                      deviceActionMapper,
-                 }: {deviceGroup: string, deviceActionMapper: (d: PortierDevice) => string[]}) => {
+                 }: { deviceGroup: string, deviceActionMapper: (d: PortierDevice) => string[] }) => {
     const {t} = useTranslation();
 
     const {
@@ -36,11 +36,11 @@ const Devices = ({
         {devices && <>
             {filteredDevices.length > 0 ? filteredDevices.map(device => {
                 const deviceActions = deviceActionMapper(device);
-                const isUnavailable = device?.statuses?.available === false;
-                const isOpen = device?.statuses?.open === true;
+                const isUnavailable = !device?.statuses?.available;
+                const isOpen = !!device?.statuses?.open;
 
-                return (<Col key={device.id} className={`col-xl-${2*deviceActions.length}`}>
-                    <Card>
+                return (<Col key={device.id} className={`col-xl-${2 * deviceActions.length}`}>
+                    <Card border="secondary">
                         <Card.Header
                             className={'text-start' + (variantName === "initlab" ? ' bg-primary text-light' : '')}>
                             {device.name}
diff --git a/src/pages/Sensors.tsx b/src/pages/Sensors.tsx
index 8d4ac7d..9685a36 100644
--- a/src/pages/Sensors.tsx
+++ b/src/pages/Sensors.tsx
@@ -1,14 +1,13 @@
 import {Col, Row} from 'react-bootstrap';
 import {useTranslation} from 'react-i18next';
-import {sensors} from '../config.ts';
 import {useMqttHistory} from "../hooks/useEndpoints.ts";
-import EChartsReact from "echarts-for-react";
+import SensorGraph from "../widgets/SensorReadings/SensorGraph.tsx";
 
 const Sensors = () => {
     const {t} = useTranslation();
     const {data} = useMqttHistory();
 
-    if(!data) return <></>;
+    if (!data) return <></>;
 
     return <>
         <Row>
@@ -17,73 +16,8 @@ const Sensors = () => {
             </Col>
         </Row>
         <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>;
-                }
+            {Object.entries(data).map(([sensor, metrics]) =>
+                <Col key={sensor}><SensorGraph sensor={sensor} metrics={metrics}/></Col>
             )}
         </Row>
     </>;
diff --git a/src/portier-types.d.ts b/src/portier-types.d.ts
index a879a6b..7916260 100644
--- a/src/portier-types.d.ts
+++ b/src/portier-types.d.ts
@@ -27,3 +27,5 @@ export type PortierActionLogEntry = {
     User?: { name: string, username: string, },
     Application?: { name: string, },
 }
+
+export type MqttSensorHistory = { [metric: string]: [[number, number, number, number]] }
\ No newline at end of file
diff --git a/src/widgets/SensorReadings/SensorGraph.tsx b/src/widgets/SensorReadings/SensorGraph.tsx
new file mode 100644
index 0000000..e9456d6
--- /dev/null
+++ b/src/widgets/SensorReadings/SensorGraph.tsx
@@ -0,0 +1,82 @@
+import {sensors} from "../../config.ts";
+import EChartsReact from "echarts-for-react";
+import {useState} from "react";
+import {useTheme} from "../../hooks/useTheme.ts";
+import type {MqttSensorHistory} from "../../portier-types";
+import {useTranslation} from "react-i18next";
+
+const round = (d: number, places: number = 2) => Math.round(d * Math.pow(10, places)) / Math.pow(10, places);
+
+const SensorGraph = ({sensor, metrics}: { sensor: string, metrics: MqttSensorHistory }) => {
+    const [now] = useState(() => Date.now());
+    const [theme] = useTheme();
+    const {t} = useTranslation();
+
+    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 = [];
+
+
+    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(d => [d[0] * 1000, d[1]]),
+            yAxisIndex: yAxis.length - 1,
+            tooltip: {valueFormatter: (v: any) => `${round(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(d => [d[0] * 1000, d[1]]),
+            yAxisIndex: yAxis.length - 1,
+            tooltip: {valueFormatter: (v: any) => `${round(v)}%`}
+        });
+
+        return <EChartsReact theme={theme} option={{
+            title: {text: t(`rooms.${label}`), left: 'left'},
+            backgroundColor: 'transparent',
+            tooltip: {
+                trigger: 'axis'
+            },
+            color: ['#fac858', '#5470c6', '#91cc75', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'],
+            legend: {type: 'plain', left: 'left'},
+            xAxis: {type: 'time', max: now},
+            grid: {left: 0, right: 0, top: 70, bottom: 70},
+            yAxis: yAxis,
+            series: series,
+            animation: false,
+        }}/>;
+    }
+}
+
+export default SensorGraph;
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index f49d3a2..f6a2e27 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1121,14 +1121,14 @@ baseline-browser-mapping@^2.9.0:
   resolved "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.9.10.tgz"
   integrity sha512-2VIKvDx8Z1a9rTB2eCkdPE5nSe28XnA+qivGnWHoB40hMMt/h1hSz0960Zqsn6ZyxWXUie0EBdElKv8may20AA==
 
-bootstrap@^5.3.8:
+bootstrap@^5.3.3:
   version "5.3.8"
-  resolved "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.8.tgz"
+  resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-5.3.8.tgz#6401a10057a22752d21f4e19055508980656aeed"
   integrity sha512-HP1SZDqaLDPwsNiqRqi5NcP0SSXciX2s9E+RyqJIIqGo+vJeN5AJVM98CXmW/Wux0nQ5L7jeWUdplCEf0Ee+tg==
 
-bootswatch@^5.3.8:
+bootswatch@^5.3.3:
   version "5.3.8"
-  resolved "https://registry.npmjs.org/bootswatch/-/bootswatch-5.3.8.tgz"
+  resolved "https://registry.yarnpkg.com/bootswatch/-/bootswatch-5.3.8.tgz#534538ce50285e52cb715823f8b4d734f73956e7"
   integrity sha512-88mnH9tv+x6DV+scBxYFOpM4YSDVhyfEgbhqaEfvkHNctKI9qRcACxIP9nmBZ5mSeLXtsgax1VsRkUs1eWjlAQ==
 
 brace-expansion@^1.1.7:
@@ -1429,6 +1429,22 @@ dunder-proto@^1.0.0, dunder-proto@^1.0.1:
     es-errors "^1.3.0"
     gopd "^1.2.0"
 
+echarts-for-react@^3.0.5:
+  version "3.0.5"
+  resolved "https://registry.yarnpkg.com/echarts-for-react/-/echarts-for-react-3.0.5.tgz#87d55e3278dbf7b5a7926a08ac9a663b0351bbc2"
+  integrity sha512-YpEI5Ty7O/2nvCfQ7ybNa+S90DwE8KYZWacGvJW4luUqywP7qStQ+pxDlYOmr4jGDu10mhEkiAuMKcUlT4W5vg==
+  dependencies:
+    fast-deep-equal "^3.1.3"
+    size-sensor "^1.0.1"
+
+echarts@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/echarts/-/echarts-6.0.0.tgz#2935aa7751c282d1abbbf7d719d397199a15b9e7"
+  integrity sha512-Tte/grDQRiETQP4xz3iZWSvoHrkCQtwqd6hs+mifXcjrCuo2iKWbajFObuLJVBlDIJlOzgQPd1hsaKt/3+OMkQ==
+  dependencies:
+    tslib "2.3.0"
+    zrender "6.0.0"
+
 electron-to-chromium@^1.5.263:
   version "1.5.267"
   resolved "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.267.tgz"
@@ -3390,6 +3406,11 @@ side-channel@^1.1.0:
     side-channel-map "^1.0.1"
     side-channel-weakmap "^1.0.2"
 
+size-sensor@^1.0.1:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/size-sensor/-/size-sensor-1.0.3.tgz#4ce525cbc5a098da09852e38b6f851ebb9b5116a"
+  integrity sha512-+k9mJ2/rQMiRmQUcjn+qznch260leIXY8r4FyYKKyRBO/s5UoeMAHGkCJyE1R/4wrIhTJONfyloY55SkE7ve3A==
+
 "source-map-js@>=0.6.2 <2.0.0", source-map-js@^1.0.2, source-map-js@^1.2.1:
   version "1.2.1"
   resolved "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz"
@@ -3571,6 +3592,11 @@ tsconfig-paths@^4.2.0:
     minimist "^1.2.6"
     strip-bom "^3.0.0"
 
+tslib@2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.3.0.tgz#803b8cdab3e12ba581a4ca41c8839bbb0dacb09e"
+  integrity sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==
+
 tslib@^2.3.0, tslib@^2.4.0:
   version "2.7.0"
   resolved "https://registry.npmjs.org/tslib/-/tslib-2.7.0.tgz"
@@ -3929,3 +3955,10 @@ yocto-queue@^0.1.0:
   version "4.2.1"
   resolved "https://registry.npmjs.org/zod/-/zod-4.2.1.tgz"
   integrity sha512-0wZ1IRqGGhMP76gLqz8EyfBXKk0J2qo2+H3fi4mcUP/KtTocoX08nmIAHl1Z2kJIZbZee8KOpBCSNPRgauucjw==
+
+zrender@6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/zrender/-/zrender-6.0.0.tgz#947077bc69cdea744134984927f132f3727f8079"
+  integrity sha512-41dFXEEXuJpNecuUQq6JlbybmnHaqqpGlbH1yxnA5V9MMP4SbohSVZsJIwz+zdjQXSSlR1Vc34EgH1zxyTDvhg==
+  dependencies:
+    tslib "2.3.0"