Кастомные виджеты Visiology

Настраиваемая диаграмма размаха с группировкой
Расширенная версия Box Plot: статистические параметры блока можно задать самостоятельно, распределения — сравнить по дополнительному измерению, а на график вывести опорные линии, которые пересчитываются вместе с данными.

Основные возможности

• Режим Тьюки: медиана, квартили, усы по границам 1,5 IQR и выбросы отдельными точками; доступен и режим усов по минимуму и максимуму.
• Собственные формулы для нижнего уса, Q1, медианы, Q3 и верхнего уса; показ выбросов включается и выключается.
• Вертикальная и горизонтальная ориентация, группировка блоков по дополнительному измерению с общей осью и легендой.
• Ручная установка минимума и максимума оси показателя.
• До десяти опорных линий: значение по формуле, подпись и цвет; значения пересчитываются при изменении данных.
• Кнопки выбора измерения, настройки оформления и фильтрация дашборда по клику на блок.

Идеально подходит для:
Сравнения распределений по подразделениям, контроля KPI и поиска выбросов.

Группировка малых сегментов в «Другие»
Новая версия Treemap для данных с длинным хвостом категорий. Мелкие прямоугольники объединяются в категорию «Другие», поэтому крупные элементы остаются читаемыми. По клику на «Другие» открывается состав группы, из которого можно вернуться к общей карте.

Основные возможности

• Группировка в «Другие» по доле от общей суммы, абсолютному порогу или числу сохраняемых крупных элементов; группировку можно отключить.
• Раскрытие состава «Других» по клику и возврат к общей карте.
• Дополнительные показатели в подсказке по выбору пользователя.
• Подписи только в прямоугольниках, где они помещаются; размер шрифта настраивается.
• Единичный и множественный выбор для фильтрации дашборда, включающий и исключающий фильтр.

Идеально подходит для:
Анализа структуры продаж, ассортимента и других наборов с длинным хвостом категорий.

Каскад с подытогами и дельтами
Расширенная каскадная диаграмма показывает, как отдельные факторы складываются в итог. К обычному каскаду она добавляет промежуточные итоги, опорные линии по формулам и подписи изменений между столбцами, а данные можно подключить по одной из трёх схем.

Основные возможности

• Положительные, отрицательные, итоговые и промежуточные столбцы с отдельными настройками цвета.
• Промежуточные итоги после выбранных категорий или каждой N-й категории; можно выбрать накопительный итог или итог участка.
• До десяти опорных линий с арифметическими формулами по агрегатам текущих данных, подписями и цветом; значения обновляются вместе с данными.
• Подписи абсолютных и процентных дельт на соединительных линиях — по отдельности или одновременно, с настройкой знака, точности и оформления.
• Три схемы данных: одно измерение и один показатель, набор показателей без измерения, измерение с несколькими показателями.
• Общий итог, оформление осей, легенды и подсказок; фильтрация дашборда по клику на столбец.

Идеально подходит для:
Факторного анализа прибыли, движения денежных средств и сравнения вклада показателей.

Пузырьки, кластеры и анимированные траектории
Точечная диаграмма, в которой размер точки задаётся третьей мерой, близкие точки объединяются в кластеры, а изменение положения объектов показывается направленными траекториями с воспроизведением. Кластеры пересчитываются при изменении масштаба.

Основные возможности

• Размер точки по третьей мере или фиксированный размер, если третьей меры нет.
• Автоматическая кластеризация близких точек с пересчётом при изменении масштаба и подписью количества точек.
• Направленные стрелки между последовательными состояниями объекта по дополнительному измерению.
• Воспроизведение траекторий (Trail): автозапуск, пауза, шаг вперёд и назад, сброс.
• До десяти вертикальных и десяти горизонтальных опорных линий с формулами по статистикам данных, подписями и цветом.

Идеально подходит для:
Анализа динамики объектов, сегментации клиентов и поиска взаимосвязей показателей.

Распределения по группам и панелям
Показывает распределение значений точками, гистограммой и полосой диапазона. Данные можно разбить по группам на отдельные панели и сравнить между собой.

Основные возможности

• Вертикальное и горизонтальное представление, разбиение на панели по группам (small multiples).
• Размер точек по константе, показателю или формуле; выбор символа или собственной иконки.
• Условные правила для символа, цвета и размера точки.
• До пяти опорных линий с формулой и подписью — для всей диаграммы или для отдельной панели.
• Гистограмма и полоса диапазона включаются отдельно.

Идеально подходит для:
Сравнения распределений по группам, анализа отклонений и выбросов.

Диаграммы из текстового описания
Отображает диаграммы, описанные на языке Mermaid, и позволяет редактировать их код прямо в дашборде. Библиотеки Mermaid 11.6.0 и редактора кода CodeMirror 6 входят в пакет виджета.

Основные возможности

• Шаблоны для flowchart, sequence, class, state, ER и requirement diagram.
• Редактор кода с предпросмотром и сообщениями об ошибках.
• Цвета и шрифт подстраиваются под оформление дашборда и обновляются при смене темы.
• Внешние HTTP(S)-ссылки и подсказки для узлов.

Идеально подходит для:
Схем процессов, архитектуры, последовательностей и моделей данных.

Потоки через несколько измерений
Показывает, как потоки переходят с уровня на уровень: виджет строит цепочку связей через все измерения, переданные в данных. Диаграмму можно развернуть горизонтально или вертикально и построить последовательными уровнями или деревом.

Основные возможности

• Последовательные уровни потоков по измерениям входных данных.
• Горизонтальная и вертикальная ориентация.
• Режимы последовательных уровней и дерева.
• Настройка цветов, подписей и подсказок; прокрутка при большом числе уровней.

Идеально подходит для:
Анализа маршрутов клиентов, денежных и ресурсных потоков.

Планирование с иерархией и событиями
Диаграмма Ганта для проектных планов и графиков исполнения. Поля данных сопоставляются в настройках: однозначные даты виджет определяет сам, а если в данных нет ID, создаёт его из номера строки.

Основные возможности

• Иерархия задач с раскрытием и сворачиванием уровней.
• Иерархия периодов по нескольким измерениям (год, квартал, месяц, неделя, дата) с кнопками раскрытия и скрытия уровней; без этих измерений шкала строится по датам.
• До четырёх полос на задачу: план, факт, базовый план, прогноз; высота и цвет каждой полосы настраиваются.
• События с правилами формы, размера и цвета маркера.
• Текстовые метки полос и событий по шаблонам с подстановкой полей и арифметических формул.
• Зависимости из данных или ручной настройки.

Идеально подходит для:
Проектных планов, графиков исполнения и контроля сроков.

Четыре вида и три метрики
Показывает, сколько объектов доходит до каждого этапа и где они теряются. Воронку можно построить вертикально или горизонтально, ступенями или сглаженной формой, а у этапов вывести конверсию и абсолютную разницу.

Основные возможности

• Вертикальная или горизонтальная ориентация.
• Отдельные ступени или сглаженная форма для каждой ориентации.
• Независимое включение конверсии от предыдущего и от первого этапа и абсолютной разницы между этапами.
• Настройка числа десятичных знаков и оформления подписей.

Идеально подходит для:
Воронок продаж, заявок и клиентских этапов.

Умная таблица с трендовыми мини-графиками
Виджет объединяет удобство классической таблицы с наглядностью визуальной аналитики. В каждой строке автоматически строятся спарклайны — компактные мини-графики, которые помогают мгновенно оценить динамику показателей.

Основные возможности

• Отображение спарклайнов (line, area, column) рядом с агрегированными значениями.
• Полная кастомизация внешнего вида: шрифты, размеры, цвета, границы, фон заголовков.
• Интерактивность: клик по строке устанавливает фильтр в дашборде.
• Прогрессивная отрисовка — высокая производительность даже при больших объемах данных.
• Поддержка подсказок (tooltip) для детального анализа значений.
• Возможность включать или отключать колонки с агрегатами и графиками.

Идеально подходит для:
Финансовых и бизнес-отчетов, дашбордов руководителей, мониторинга KPI и анализа продаж.

Максимальная гибкость фильтрации данных
Виджет позволяет пользователю самостоятельно вводить условия фильтрации: от простых значений до сложных комбинаций. Удобный интерфейс с полем ввода и кнопкой делает аналитику более персонализированной и быстрой.

Основные возможности

• Ручной ввод значений через запятую или группами через «;».
• Мгновенное применение фильтра по кнопке или клавише Enter.
• Поддержка сброса фильтра клавишей Escape.
• Гибкая настройка дизайна: шрифты, цвета, скругления, отступы, оформление кнопки.
• Полная интеграция с дашбордом: фильтрация данных в реальном времени.
• Простой и понятный UX даже для пользователей без технических навыков.

Идеально подходит для:
Анализа больших массивов данных, BI-дэшбордов с интерактивным поиском, HR- и финансовых отчетов, где важно быстро находить нужную информацию.

Разновидность точечной диаграммы. Размер пузырьков служит дополнительным измерением данных. Отображает трехмерные данные в двумерном пространстве.

Помогает определить:

1. Корреляцию между несколькими величинами или аналогию в больших наборах данных;
2. «Сильное и слабое звено». Пример: наиболее и наименее успешные магазины сети, низкомаржинальные группы товаров с небольшим объемом продаж.

Добавлено в V2:

• Работа в нескольких контекстах одновременно с возможностью «горячей» смены;
• Фильтрация (множественный/единичный выбор и вкл/искл значения).

Просмотр данных в иерархическом виде с использованием сетки прямоугольников.

Помогает отображать:

1. Большие объемы иерархических данных;
2. Большое количестве значений, которые невозможно эффективно показать в линейчатой диаграмме;
3. Пропорции между каждой частью и целым;
4. Шаблон распределения мер по каждому уровню категорий в иерархии;
5. Атрибуты с помощью кода размера и цвета.

Добавлено в V2:

• Фильтрация (множественный/единичный выбор и вкл/искл значения);
• Раскраска в различных режимах;
• Сортировка.

Визуальный элемент фильтр. Может работать в трех режимах: Единичный выбор, Выбор двух значений, Выбор диапазона значений. Отображается как в горизонтальном, так и вертикальном отображении. Имеет возможность стилистической настройки под требования дизайн кода дашборда. (Опционально может потребоваться библиотека nouislider).

Может отображать: Показатель рассчитанный на уровне DAX без контекста. Позволяет выбрать в каком формате отобразить значения: абсолютное/относительной. Умеет сокращать значение для более удобного отображения млрд, млн, тыс. Показать направление прироста.

Может отображать:

• Один показатель, когда на дашборде нужно подчеркнуть важность одного числа. Пример: выручка компании за год, процент выполнения плана продаж;
• Несколько показателей для многих значений измерений, когда необходимо отследить несколько ключевых показателей и сравнить их для нескольких единиц. Пример: выручка и объем продаж для всех филиалов компании.

Подходит для

• Наглядного отображения динамики процесса во времени. Пример: движение денежных средств (cash flow), инвестиции;
• Визуализации выполнения плана;
• Демонстрации факторов, влияющих на определенный параметр. Пример: из чего складывается прибыль (факторный анализ).

Отображает ход достижения цели или значение ключевого показателя эффективности.

Подходит для демонстрации:

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

Разновидность точечной диаграммы. Размер пузырьков служит дополнительным измерением данных. Отображает трехмерные данные в двумерном пространстве.

Помогает определить:

• Корреляцию между несколькими величинами или аналогию в больших наборах данных;
• «Сильное и слабое звено». Пример: наиболее и наименее успешные магазины сети, низкомаржинальные группы товаров с небольшим объемом продаж.

Просмотр данных в иерархическом виде с использованием сетки прямоугольников.

Помогает отображать:

• Большие объемы иерархических данных;
• Большое количестве значений, которые невозможно эффективно показать в линейчатой диаграмме;
• Пропорции между каждой частью и целым;
• Шаблон распределения мер по каждому уровню категорий в иерархии;
• Атрибуты с помощью кода размера и цвета.

Мощный аналитический инструмент, который позволяет визуализировать распределение данных и выявлять ключевые тенденции и аномалии.

Box Plot, известный также как диаграмма размаха, идеально подходит для

• Анализа данных;
• Выявления выбросов;
• Понимания структуры данных.