Задача
Городской обсерватории нужна была платформа, которая превращает почасовые показания 26 станций в понятную картину: от короткой сводки на главной до подробной таблицы, которую можно выгрузить и изучить в Excel. Шесть показателей, восемь районов, шесть разделов сайта.
Что сделал
- Свёл четыре ключевых показателя в один индекс городской среды по стобалльной шкале — по нему сразу понятно, как обстоят дела, без чтения графиков
- Выстроил модель данных так, что цифры на главной, дашборде, карте и в таблице всегда совпадают между собой. Заложил утренние и вечерние пики, разницу между буднями и выходными, сезонность и редкие происшествия вроде безветренной погоды
- Написал собственную библиотеку графиков: линии, столбцы, кольцевые диаграммы, спарклайны, тепловая карта и радар. Всё остаётся чётким на экранах с высокой плотностью пикселей и перерисовывается при изменении размера окна
- Дал каждому графику кнопку «Таблица» — те же данные обычным текстом, для тех, кому так удобнее читать
- Подобрал цвета так, чтобы линии различались и при нарушениях цветовосприятия. Поэтому в сравнении одновременно участвуют максимум три района
- Нарисовал карту районов: насыщенность заливки показывает уровень показателя, ползунок прокручивает сутки по часам, в боковой панели — подробности по выбранному району
- Собрал таблицу наблюдений на 1 440 записей: поиск, фильтры, сортировка по любому столбцу, выбор нужных колонок и постраничный вывод. На узких экранах строки превращаются в карточки
- Сделал выгрузку в CSV и JSON. Файл CSV открывается в Excel сразу, без мастера импорта — с правильной кодировкой и разделителями
- Добавил быстрый переход по платформе на
Ctrl + K, подписки на пороговые значения с уведомлением и режим ускоренного времени, в котором наглядно видно, как меняется картина за сутки
Результат
- Шесть разделов, шесть показателей, 26 станций и восемь районов — около 9 200 строк кода
- Фильтрация и сортировка 1 440 записей происходят мгновенно, без ожидания ответа сервера
- Любой срез данных передаётся ссылкой: коллега открывает ровно тот вид, который вы смотрели