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

Макет в фигме

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

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

image.png

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

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

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

image.png

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

image.png

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

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

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

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

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

image.png

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

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

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

Комбинированная:
Тепловая карта (хитмап):
Круговая:
Пузырьковая:
Медиаблок:
Таблица
Водопад, , Дерево, iFrame, Фильтры – настройка отсутствует

Revision #20
Created 18 December 2024 12:48:51 by Артём
Updated 31 March 2025 09:03:15 by Станислав