Skip to main content

Цвет по значению (новый)

Необходимо добавить дополнительные настройки и сделать принцип работы с функционалом более доступным для обычного пользователя

Концепт интерфейса:

image.png

Элементы интерфейса и настройки цвета по значению

По умолчанию активны 2 цвета (минимальное и максимальное значение), перед максимальным – кнопка для добавления нового цвета.

Формирование границ – переключатель, принимающий значения:

  • Автоматически – делает недоступными для пользователя поля ввода значений, скрывает блок "Значения границ". Значения границ формируются автоматически в процентах от максимального значения по формуле
    Min + ((n – 1) / (N – 1)) * (Max – Min),
    где N – число цветов, n – порядковый номер границы, Min – минимальное значение в наборе данных, Max – максимальное значение в наборе данных.
    Установлено по умолчанию.
  • Вручную – пользователь сможет вводить значения самостоятельно, блок "Значения границ активен". Если пользователь не ввёл какое-либо значение в первую или последнюю ячейку, то они автоматически заполняются минимальным и максимальным значением в наборе данных соответственно (либо 0% и 100%, если значения установлены в процентах). При этом в поле ввода серым цветом отображается: "{Число} (min/max)"

image.png

Значения границ – настройка, устанавливающая значения в блоке ввода в одном из следующих форматов (недоступна при автоматическом формировании границ):

  • В процентах – записанное пользователем число в блок ввода интерпретируется как процент от диапазона рассматриваемых значений по формуле:
    (Max – Min) * (X / 100),
    где X – введенное пользователем число.

    После записи числа в блок ввода к нему автоматически должен приписываться знак "%". При нажатии на блок выбора (редактировании) знак "%" скрывается. 

    Установлено по умолчанию.

image.png

  • Абсолютные значения – записанное пользователем число в блок ввода интерпретируется как число из диапазона рассматриваемых значений.

Цветовая шкала – формируется в зависимости от выбранных пользователем цветов.

Направление значений – значок справа от цветовой шкалы, отвечает за порядок формирования границ в градиенте при наведении высвечивается тултип): 

image.png – "Направление значений для градиента – по возрастанию". Первый блок ввода – минимум, последний – максимум. Ожидается, что пользователь будет вводить значения последовательно по возрастанию. Формула для автоматического расчёта границ остаётся без изменений.

image.png – "Направление значений для градиента – по убыванию". Первый блок ввода – максимум, последний – минимум. Ожидается, что пользователь будет вводить значения последовательно по убыванию. В формуле для автоматического расчёта границ в начале вместо "Min +" подставляется "Max –"

Для каждого из направлений должна производиться проверка сравнением каждого элемента с предыдущим.

Нажатие на значок приводит к смене направления. При этом все поля ввода меняются местами с противолежащими (первое с последним, второе с предпоследним и т.д.). Ячейки для ввода цвета остаются на своих местах. Кнопка для добавления нового цвета всегда идёт перед последней ячейкой для ввода цвета, не завися от направления.

Блок ввода – включает в себя 4 элемента:

  • Ячейки для ввода цветов – при нажатии на ячейку должна открываться палитра для выбора одного конкретного цвета. По умолчанию цвет в ячейке белый.

    Если в диапазоне цветов установлено значение "Много цветов", то пПри наведении на любую ячейку цвета (кроме первой и последней) слева от неё должна появляться корзина – значок для удаления цвета.

  • Поля для ввода границ – текстовые поля для записи пользователем значений, разделяющих диапазон на отрезки. Элемент визуализации принимает указанный цвет при равенстве показателя указанному значению. Цвета на промежутках устанавливаются оттенками между двумя цветами на концах отрезка пропорционально длине этого числового отрезка.

    Если пользователь установил границы для первого и последнего значения отличающимися от минимума и максимума, то не попавшие в диапазон элементы получают цвет согласно теме оформления (по умолчанию – Level 2).

  • Кнопку для добавления нового цвета – доступна только если в диапазоне цветов установлено значение "Много цветов", располагается всегда перед последней ячейкой для ввода цвета.
  • Полосу прокрутки – если добавлено более 5 цветов, то в блоке ввода одновременно отображаются только 5 из них, все остальные можно просмотреть с помощью полосы прокрутки, расположенной справа от полей для ввода границ.

Обработка ошибок

Кейс: пользователь указал значение, выходящее за диапазон представленных значений (меньше минимума / больше максимума в абсолютных значениях или меньше 0 / больше 100 в процентах).
Ошибка: граница поля ввода подсвечивается красным цветом, при наведении на поле ввода появляется описание ошибки – "Указанное число находится за рамками рассматриваемого диапазона значений".

Кейс: пользователь указал значение в противоположном выбранному направлении (например, при направлении на возрастание указал последующее значение меньшим, чем предыдущее).
Ошибка: граница поля ввода подсвечивается красным цветом, при наведении на поле ввода появляется описание ошибки – "Указанное число не соответствует выбранному направлению значений – оно больше/меньше предыдущего".