Графики строятся на ECharts. Всего 28 типов диаграмм — от привычных линий и столбцов до воронок, карт и диаграмм связей. Данные берутся из SQL-запросов к подключённым источникам, а внешний вид настраивается переопределениями оформления.
Линии и столбцы
- Линейный график (
LineChartContent) — как величина меняется во времени: выручка, трафик, цена. Поддерживаются несколько серий, сглаживание, заливка области под линией, шаги для «стоит на месте, потом скачок» (тарифы, складские остатки) и приведение кривых разного масштаба к 100; - Столбчатая диаграмма (
BarChartContent) — сравнение категорий между собой: каналы, товары, регионы. Столбцы складываются в стеки, есть 100-процентный стек для состава, сортировка и топ-N для длинных списков; - Комбинированная диаграмма (
ComboChartContent) — столбцы одного показателя и линия другого на двух осях с подписями: расход и его доля, объём продаж и средний чек.
Сравнение: план против факта
- Гантельная диаграмма (
DumbbellChartContent) — две точки на одну сущность, соединённые линией: план и факт, «до» и «после», оценка и реальность. Длина и направление отрезка показывают разрыв, подписи — величину расхождения: удобно сравнивать поставщиков, менеджеров, площадки; - Пулевая диаграмма (
BulletChartContent) — полоса значения против отметки цели и цветных коридоров допуска: укладывается ли показатель в норму. Цвет сам зависит от того, что лучше — больше цели или меньше; - Наклонная диаграмма (
SlopeChartContent) — одна линия на сущность между двумя периодами: как изменился рейтинг или значение. Падающие линии красные, растущие зелёные, видно и обгон, и смену мест; - Диаграмма Парето (
ParetoChartContent) — категории по убыванию с линией накопленной доли: сколько немногих позиций дают большую часть потерь или выручки. Пунктир по умолчанию стоит на 80%.
Состав, доли и потоки
- Кольцевая диаграмма (
DoughnutChartContent) — доли целого: внутренний и внешний радиус, легенда, режим розовой диаграммы для наглядности мелких секторов; - Дерево (
TreemapChartContent) — доли целого прямоугольниками: честная замена кругу, когда частей много и секторы становятся неразличимы. Родительская колонка вкладывает категории друг в друга, режим «солнечные лучи» раскладывает то же дерево кольцами; - Диаграмма-водопад (
WaterfallChartContent) — из чего сложился итог: цена → скидки → комиссии → прибыль. Каждый столбец — шаг со знаком, последний показывает итог; - Диаграмма потоков (
SankeyChartContent) — куда перетекают деньги или товары: ширина ленты равна объёму. Если данные образуют кольцо, график честно предупредит вместо кривой картинки.
Распределения
- Гистограмма (
HistogramChartContent) — как распределены значения одной числовой колонки: где основная масса, а где длинный хвост. Расчёт идёт на сервере (POST /api/query/histogram) — данные не гоняются в браузер целиком; - Диаграмма размаха (
BoxPlotChartContent, box plot) — медиана, квартили и выбросы: сравнить разброс между группами. Квартили считаются на сервере (POST /api/query/boxplot); - Диаграмма-скрипка (
ViolinChartContent) — полная форма распределения по каждой группе: два горба, очередь, тяжёлый хвост, которых диаграмма размаха не показывает. Режим «пчелиный рой» рисует по точке на каждое наблюдение; - Тепловая карта (
HeatmapContent) — плотность значений по двум колонкам: каждая ячейка окрашена по величине; - Календарная тепловая карта (
CalendarHeatmapContent) — каждый день в клетке календаря, цвет — по значению: дневной ритм (всплески в будни, тихие выходные), который месячная сводка стирает.
Воронки, сроки и чувствительность
- Воронка (
FunnelChartContent) — этапы сужающимися полосами: сколько людей доходит до каждого шага и сколько теряется между ними (просмотры → корзина → заказ). Порядок этапов берётся из запроса; - Диаграмма Ганта (
GanttChartContent) — полосы «с даты по дату» на каждой строке, с вертикальной отметкой сегодняшнего дня: сезонные окна, планы поставок, сроки возвратов. Цвет полосы задаёт колонка состояния; - Диаграмма-торнадо (
TornadoChartContent) — какой фактор сильнее всего двигает результат: полоса на каждый фактор показывает исход при худшем и лучшем значении. Сверху — самый влиятельный.
Профили и география
- Лепестковая диаграмма (
RadarChartContent) — профиль объекта по 3–8 критериям: кандидаты сравниваются не строками таблицы, а формой. Область можно заливать цветом; - Параллельные координаты (
ParallelCoordinatesChartContent) — своя ось на каждый показатель, своя линия на каждый объект: сразу видно, у кого ровно хорошо, а у кого провал по одному показателю при хороших остальных; - Диаграмма Венна (
VennChartContent) — пересечение двух или трёх групп: сколько клиентов общие, сколько уникальны. Площадь круга — размер группы, линза — пересечение; - Карта регионов (
MapChartContent) — 85 субъектов России или 176 стран мира, окрашенных по значению: когда история географическая, картинка и есть ответ. Названия регионов сопоставляются с картой, нераспознанные перечисляются под ней.
Связи и состояния
- Граф связей (
NodeGraphChartContent) — узлы и рёбра по списку связей: кто с кем и насколько тесно (толщина ребра). Узлы можно перетаскивать; - Таймлайн состояний (
StateTimelineChartContent) — цветные интервалы по каждой метке: когда показатель был в каком состоянии; - История состояний (
StatusHistoryChartContent) — сетка ячеек по времени: дискретные периоды для каждой метки, вся лента состояний разом.
Оба хороши вместе с оповещениями: переходы правил «спокойно → ожидание → сработало → восстановилось» видны прямо в отчёте.
Финансовые ряды и зависимости
- Свечи (
CandlestickChartContent) — финансовые ряды open/high/low/close с объёмом торгов из ваших баз; - Точечная диаграмма (
ScatterChartContent) — связь двух числовых колонок: цена и спрос, конверсия и расход. Размер точки задаёт третья колонка (zValueColumn), цвет — колонка-разделитель (colorColumn); линия тренда показывает направление связи, опорные линии — пороги и границы.
Шкалы и приборы
- Гейдж (
GaugeContent) — метрика в виде спидометра с нижней и верхней границей шкалы; - Линейка-гейдж (
BarGaugeContent) — ранжированный ряд значений, каждый столбик окрашен по порогам: рейтинги, нормативы, светофор по списку.
Общие возможности
Общие возможности есть у всех графиков, независимо от типа:
- Опорные линии и коридоры — норма, цель, граница допуска: линия на фиксированном значении, на статистике по самим данным (медиана, 10-й и 90-й процентили) или на значении из колонки запроса. Коридор задаётся двумя границами. Проверка «укладываемся ли в норму» читается с картинки, а не считается в голове;
- Отмеченные события — вторая короткая таблица с датами и подписями: на графике появляются точки-метки и затенённые периоды — акции, сбои, праздники, смена тарифа. Причина провала или всплеска видна рядом с самим провалом;
- Интервалы — у столбцов и точек «усы» доверительного интервала, у линий — полоса по каждой серии: пессимистичный и оптимистичный сценарий вокруг основной кривой;
- Подписи значений и отмеченные точки — числа прямо на графике (когда их немного), а выбросы выделяются значком с пояснением: видно и сам скачок, и чем он вызван;
- Сравнение с прошлым — пунктирная линия-«призрак» того же показателя неделю, месяц или год назад и сглаживание скользящим средним: тренд виден, а недельный шум не мешает;
- Разрезы панелями — одна и та же картинка по каждому каналу, категории или складу: набор небольших графиков в общем масштабе, по которым ряды сравниваются честно;
- Настройка осей — своя подпись и формат оси, нижняя и верхняя граница, логарифмическая шкала, перевёрнутая ось для мест и рейтингов, сортировка и топ-N с честной пометкой, сколько категорий скрыто, а также временная ось, которая оставляет разрывы вместо сжатия пропущенных дней;
- Всплывающие подсказки — можно дополнить колонками запроса: при наведении видно не только значение, но и контекст (например, число клиентов рядом с суммой), а на точечной диаграмме точка подписывается именем.
Заголовки и легенды есть у каждого графика, а внешний вид меняется без правки запроса — переопределениями оформления: цвета по порогам, стили линий и точек, скрытие серий. Подробнее — в разделе Оформление.