График показаний: температура и влажность на дашборде умного дома

Когда график лучше индикатора

Стрелочный индикатор и числовая плитка показывают текущее значение. Этого мало, если важна динамика:

• в подвале условного частного дома влажность медленно растёт после дождей — по цифре этого не заметить, по графику видно сразу;
• в детской вечером становится прохладно — график покажет, в какой час начинается падение и когда стоит включать обогреватель;
• котёл включается слишком часто — на графике температуры теплоносителя видна «пила» коротких циклов.

Правило: если вам хочется спросить «а что было вчера?», нужен график.

Период: на какой вопрос отвечаем

Один и тот же датчик выглядит по-разному на разных периодах.

На панели удобно дать переключатель периода, а по умолчанию показывать сутки: это самый частый вопрос.

Частота точек и усреднение

Датчик может публиковать значение каждые несколько секунд, но рисовать каждую точку на суточном графике бессмысленно: экран телефона всё равно не покажет тысячи точек, а линия превратится в шумную полосу.

Решение — усреднение по интервалам. Для суточного графика достаточно точки каждые несколько минут, для недельного — раз в час. Каждая точка — среднее за свой интервал. Если важны пики, например максимальная мощность, храните рядом минимум и максимум интервала и рисуйте их бледной полосой вокруг средней линии.

Пример сообщения, которое публикует датчик, — без лишнего, только значение и время:

{"t": 19.8, "h": 52, "ts": "2026-11-07T21:40:00Z"}

Метка времени от устройства полезна, когда связь временами пропадает и сообщения приходят пачкой. Без неё точки встанут на время прихода, а не замера. О формате полезной нагрузки и топиках подробно — в материале про обмен сообщениями MQTT.

Несколько серий на одном графике

Температура в кухне, детской и на улице на одном графике — отличная идея: сразу видно, какая комната остывает быстрее. А вот температура и влажность на одной оси — плохая: у них разные единицы и диапазоны, и одна линия прижмётся к низу.

Варианты:

1. Одна величина — один график. Самый понятный путь.
2. Две оси. Левая для температуры, правая для влажности. Работает, но требует подписей и разных цветов, иначе путаница.
3. Графики друг под другом с общей осью времени. Удобно сравнивать моменты, не смешивая масштабы.

Больше пяти линий на одном графике уже не читается. Для серий выбирайте различимые цвета и подписывайте их прямо у линии или в легенде; как сделать цвета читаемыми в тёмной теме — в материале про цвета дашборда.

Подписи осей и масштаб

График без подписей — загадка. На вертикальной оси нужны единицы измерения, на горизонтальной — понятное время: часы для суток, дни недели для недели, даты для месяца. Отдельно решите вопрос масштаба. Автоматический подбор границ по данным удобен, но преувеличивает мелкие колебания: изменение на полградуса растягивается на весь экран. Лучше задать минимальную ширину шкалы, например не меньше пяти градусов для комнатной температуры, а при больших перепадах позволить ей расширяться. Полезно отметить на графике целевое значение или зону нормы тонкой линией или фоном — тогда сразу видно, сколько времени показания были вне нормы.

Где хранить историю

Брокер сообщений хранит только последнее значение с флагом retained, а не историю. Панель на телефоне тоже не лучшее место для архива: её перезапускают, чистят, открывают с разных устройств. Надёжная схема:

• отдельный подписчик слушает нужные топики и пишет значения в базу временных рядов или просто в файл;
• он же делает усреднение и удаляет подробные данные старше определённого срока, оставляя только усреднённые;
• панель запрашивает у хранилища готовые точки за нужный период.

Так история переживёт перезапуск панели, а нагрузка на телефон останется минимальной. Где разместить брокер и такого подписчика, рассказано в материале про домашний брокер.

Чек-лист

• Записан вопрос, на который отвечает график, и под него выбран период по умолчанию.
• Точки усреднены по интервалам, на экране нет «шумной полосы».
• На одной оси только величины с одинаковыми единицами.
• Серий не больше пяти, у каждой своя подпись и различимый цвет.
• Пропуски в данных показаны разрывом, а не дорисованы.
• История хранится отдельно от панели и переживает её перезапуск.
• Устройство отправляет метку времени замера.

Типичные ошибки

1. Каждая точка на суточном графике. Линия превращается в шум, а телефон тормозит.
2. Температура и влажность на одной оси. Одна из линий становится плоской и бесполезной.
3. Плавная линия через пропуск. Кажется, что всё было хорошо, хотя датчик молчал.
4. История только в панели. После переустановки приложения или смены телефона данные пропадают.
5. Автомасштаб без границ. Колебание в полградуса растягивается на весь экран и выглядит катастрофой.