Skip to main content

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

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

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

image.pngimage.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 элемента:

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

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

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

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

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

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

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

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