← назад
Как просьба «поменять цвет фона виджета» превратилась в алгоритм, который лёг в продакшн-код
Enterprise B2B-платформа бизнес-аналитики и автоматизации. 100+ клиентов из топ-300 российских компаний: банки, ретейл, телеком, производство.
Результат
Темизация работает в продакшне: команда сама собирает брендированные шаблоны под клиентов, JS-функции из моей песочницы легли в основу реализации алгоритма.
Задача
Дать возможность брендировать дашборды под клиента — вместо ручной настройки каждого виджета.
Точка отсчета
Запрос от команды звучал иначе: «нужна возможность менять цвет фона виджета». Точечная доработка на пару экранов.
Я пошёл к стейкхолдерам проверить, что за ней стоит, — и вернулся с другой задачей. Цвет фона был симптомом: людям нужно было брендировать целые дашборды и переиспользовать оформление, а не красить виджеты по одному. Я переопределил задачу как темизацию, защитил новый скоуп перед командой и вёл её сам — от модели наследования настроек до сдачи спецификаций разработке.
Количественных метрик по задаче нет. Поэтому критерий успеха фиксировали заранее и поведенческий — не «фичу выкатили», а «ей пользуются без меня».
Просили цвет фона, а болело другое
Разговоры вскрыли не одну проблему, а пять — и все растут из одного корня: любой параметр внешнего вида живёт на уровне виджета.
Шрифт заголовка, шрифты осей, отступы, скругления — всё задаётся отдельно для каждого. На дашборде с десятками виджетов одно глобальное изменение — это часы ручной работы.
Дальше — контекст. Один и тот же дашборд открывается как полноэкранная страница и как встроенный виджет в дровере. Дроверов 3–4, разной ширины, у каждого свои параметры отображения. Значит, 3–4 набора настроек вручную.
Предпродажное демо: брендированный вид пересобирали заново перед каждым показом клиенту.
Я прошёл сценарий настройки как аналитик и составил карту мест, где результат расходится с ожиданием. С ней и пошёл расширять скоуп.
Автоматика или рутина — третьего не было
Ключевая развилка: пользователь меняет фон виджета — что делать с текстом, разделителями и цветными сериями графика?
Переложить на пользователя — значит оставить ту самую рутину, ради которой всё затевалось. Значит, цвета должен пересчитывать продукт.
Я собрал алгоритм итеративной адаптации: система определяет, тёмный фон или светлый, проверяет контрастность элемента, и пока порог не достигнут — осветляет или затемняет его шагами. Отдельные правила для ахроматики, хроматики и элементов с прозрачностью: универсальной формулы на все три класса не существует.
Проверял не рассуждениями, а руками
Алгоритм нельзя защитить на словах — его видно только на реальных цветах.
Я собрал HTML-песочницу с JS-реализацией правил (функции написал с помощью AI). Подставлял цвет, сразу видел результат, правил коэффициенты и пороги, повторял. Варианты перебирал за минуты вместо спринтов.
Механику согласовывал с разработкой на промежуточных синках — проверяли реализуемость до того, как решение считалось финальным. В итоге эти же функции стали основой продакшн-реализации.
Контакты

Электронная почта:

Made on
Tilda