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

Макет в фигме

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

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

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

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

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

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

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

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

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

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

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

При переключении между значениями границ в процентах и абсолютных значениях система должна запоминать введённые значения и заполнять поля ввода пропорционально им

Цветовая шкала – формируется в зависимости от выбранных пользователем цветов. На цветовой шкале должны находиться метки в виде цветных кругов, которые можно перемещать в рамках границ ползунка. Метки не могут заходить одна за другую: при попытке такого переноса метки упираются друг в друга будто в границу ползунка.

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

Цветовая шкала должна быть динамической: при смещении метки в сторону цвет шкалы должен меняться согласно цвету меток и их положению.

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

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

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

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

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

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

• С помощью полосы можно прокручивать только область, содержащую 4 цвета в центре блока ввода. Первый цвет, последний цвет и кнопка для добавления нового цвета всегда зафиксированы на одном месте

Расположение настройки

Порядок указания расположения: "Вкладка" – "Секция" – "Подсекция" (опционально) – "Переход в окно настроек" (опционально)

Отмечены чекбоксы дря расположений, где настройка уже сделана верно

Комбинированная:

• "Данные" – "Показатели" – Окно настроек показателя – "Тип элемента" – "Цвет"
• "Данные" – "Показатели" – Окно настроек показателя – "Показать значения" – "Цвет"
• "Вид" – "Оформление точек данных" – "Цвет заливки"
• "Вид" – "Оформление точек данных" – "Цвет текста"

Тепловая карта (хитмап):

• "Вид" – "Оформление точек данных" – "Цвет заливки": заменить "Градиент" на "По значению"
• "Вид" – "Оформление точек данных" – "Цвет значений"

Круговая:

• "Вид" – "Оформление" – "Цвет сегментов"
• "Вид" – "Оформление" – "Цвет" (для текста)

Пузырьковая:

• "Данные" – "Разрезы" – Окно настроек разреза – "Пузырьки" – "Изменить цвет пузырьков"
• "Вид" – "Оформление точек данных" – "Цвет пузырьков": добавить "По значению"
• "Вид" – "Оформление точек данных" – "Цвет значений": добавить"По значению"

Медиаблок:

• "Данные" – "Переменные" – Окно настроек переменных – "Свойства переменных" – "Цвет текста"

Таблица

• "Данные" – "Показатели" – Окно настроек показателя – "Параметры текста" – "Изменить цвет текста"
• "Данные" – "Показатели" – Окно настроек показателя – "Параметры ячейки" – "Изменить цвет заливки"

Водопад, , Дерево, iFrame, Фильтры – настройка отсутствует