К нам поступила следующая задача от компании:
Необходим конструктор по своей собственной настройке визуальной составляющей индикаторов. Чтобы можно было уменьшить расстояние между индикаторами и их поместилось больше на странице, а также чтобы можно было настроить цвета индикаторов по своему усмотрению.
Исходя из этого пожелания, в наше приложение "KPI – Эффективность работы компании" был добавлен раздел с функционалом по настройке графических элементов приложения на странице “Настройки”.
Страница "Настройки"
В данном разделе можно настроить “Расстояние между индикаторами” и “Радиус округления индикаторов” (округление углов индикатора), а также цветовое отображение индикаторов:
- “Незаполненная часть индикатора”;
- “Заполненная часть индикатора при положительном результате цели”;
- “Заполненная часть индикатора при отрицательном результате цели”;
- “Заполненная часть индикатора при нерассчитанном результате цели”.
Раздел "Настройки графических элементов приложения"
При необходимо можно вернуть все настройки по умолчанию, нажав на кнопку “Вернуть по умолчанию” внизу раздела или красную закругленную стрелку рядом в каждым полем для сброса значения конкретного поля:
Красная стрелка для сброса значения конкретного поля
После проведения данных настроек необходимо нажать на кнопку “Сохранить” и перезагрузить страницу с приложением.
Настройка отображения индикаторов: изменим отображение индикаторов и цвет для “Незаполненной части индикатора” у сотрудников. В поле “Расстояние между индикаторами” уменьшим до 5 пикселей, а в поле “Радиус округления индикатора” увеличим до 10 пикселей.
Настройка “Расстояния между индикаторами” и “Радиуса округления индикатора”
В блоке редактирования сделаем 3 цвета для индикатора с градиентом. Для того, чтобы поменять цвет необходимо навести на ползунок, нажать на него и кликнуть на кружок снизу. После этого отобразится палитра для выбора цвета.
Настройка цвета индикатора
Чтобы добавить цвет необходимо кликнуть рядом с ползунком. Также ползунок можно двигать, зажав его мышью, или удалять, нажав на кружок с крестиком сверху. Количество ползунков возможно добавлять в неограниченном количестве, а расстояние между ними можно настраивать произвольно.
Выбор нескольких цветов индикатора
Также выберем для индикатора “Тип градиента”, “Направление градиента”, “Цвет текста” и “Цвет результирующей линии”. После выбора всех параметров пример отображения будет отображаться снизу.
Настройка градиента индикатора
Далее нажимаем на кнопку “Сохранить” и перезагружаем страницу, чтобы выбранные настройки отобразились на главной странице у сотрудников:
Сохранение настроек графических элементов приложения
Переходим на главную страницу и проверяем результат.
Было:
Результат "ДО"
Стало:
Результат "ПОСЛЕ"
