У меня есть задача — сделать стандартный формат для графиков типа «План-Факт». Основная загвоздка произошла для графиков, когда нужно показать как значения плана и факта менялись во времени. Я придумал показывать факт линией, а план заливкой (ареа чартом), но это вызвало разночтение у моих коллег. Я разработал детальные разные варианты и собрал для каждого из них плюсы и минусы.

Понимание задачи

В компании часто выставляются плановые значения метрик. Их нужно сравнивать с фактическими или прогнозными значениями.

У нас чаще всего следят за значением на определённый момент времени, а не накопительно. То есть важнее всего значение на последнюю дату, а не за сумму всех дат. Однако важно понимать выполнялись ли планы за предыдущие периоды, так как план по-сути являлся прогнозом, который мы сделали раньше и важно понимать насколько точно мы его делаем. Поэтому нужно смотреть и планы, и факт в динамике и отчетливо видеть их динамику. Если будет подсветка в какие даты не выполняется план — хорошо, но не критично. Чаще всего план — это положительное число, факт может быть как положительным, так и отрицательным.

График будет использоваться в разных дашбордах, поэтому чем универсальнее получится решение, тем лучше. Либо нужно сделать набор правил под разные задачи. Нужно разработать набор графиков: большой график во времени план/факт, график отклонения план/факт, спарклайны план/факт во времени, сравнение план/факт по разным разрезам, фактоид план/факт. Нужно, чтобы эти графики были «срифмованы» между собой и с остальными графиками темплейта. Обычные графики фактов, если нет установленного плана — это линии.

Данные для графиков хранятся в формате «дата | значение факта | значение плана». Чем проще и надежнее будет реализация в Табло, тем лучше.

Возможные решения

Не найдя best practice по этому вопросу и не получив каких-то научных обоснований от коллег по цеху, решил подойти к задаче методом перебора решений.

Часть графиков придумал сам, часть посоветовали коллеги и читатели блога. Варианты:
— Линия факт — Ареа план
— Линия факт — Бары план
— Линия факт — Засечки план
— Бары факт — Засечки план
— Ареа факт — Линия план
— Линия факт — Линия план
— Линия факт — Линия план + заливка между линиями
— Линия факт — Ареа план + заливка между линиями

Дисклеймер
В основном делал упор именно на разработку таймсерий. На остальные графики уделял меньше внимания, фактоиды совсем не делал. Цветовое кодирование тоже пока условное и не финальное. Ещё не докручивал подписи для самих графиков — так как важна последняя дата, то на неё ещё можно будет сделать акцент на самих графиках. Эти вещи докручу отдельно.

Линия факт — Ареа план

Больше всего в это варианте мне нравится, что линия остается фактом, как и обычные графики, где нет плана.

Плюсы:
— Срифмован с остальными графиками, для которых нет плана. Они просто линии, а тут мы добавляем «фон в виде» плана.
— Физично отображает выражение «факт идёт выше плана». План как гора на фоне, которую мы хотим достичь, факт выше «горы» или «ниже».
— Легко считывается динамика плана и факта по отдельности.
— Легко можно продолжить рисовать прогноз линией другого цвета.
— Легко реализуется и масштабируется в Табло.
— Можно заменять план на другие форматы «фона» — прошлый год, среднее по рынку и т. п.

Минусы:
— Много акцента на план, так как занимает большую площадь заливки.
— Нет подсветки проблемных и хороших дат.
— Не «срифмовано» с буллет-чартом, где бар (заливка) тянется к линии.

Линия факт — Бары план

Очень похож на предыдущие график, по-сути просто делаем дискретным ареа. Поэтому все те же самые плюсы-минусы, но есть и дополнительные:

Плюсы:
— Можно подсвечивать конкретные даты по выполнению плана.

Минусы:
— «Рябит» малёк, когда много дат.
— Техническая заморочка с шириной баров при изменении скейла (Табло оно иногда такое Таблё).

Линия факт — Засечки план

Плюсы:
— Классно «зарифмован» основной график и график отклонений.
— Может работать с отрицательным планом.

Минусы:
— «Рябит», когда много дат.
— Настройка ширины тиков только ручная и будет плыть для разной ширины экрана.
— Хуже считывается сама линия плана.

Бары факт — Засечки план

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

Плюсы:
— Классно «зарифмован» с буллет-чартами и выглядит «физично» (похоже на заполнение прогресс-бара).
— Довольно классический и понятный формат.
— Можно делать акцент на «плохих» и «хороших» барах.

Минусы:
— «Рябит» малёк, когда много дат или спарклайны.
— Настройка ширины тиков только ручная и будет плыть для разной ширины экрана.

Ареа факт — Линия план

Это тот вариант, который мне мало нравится. Самая большая претензия к этому варианту, что по сравнению с теми графиками, где есть только факт (линия), почему-то меняется отображение факта на ареа-чарт.

Плюсы:
— «Зарифмован» с буллет-чартами, так как тоже заполняется как прогресс-бар.
— Довольно классический и понятный формат.

Минусы:
— Меня прям передергивает, что в обычных графиках (без плана), факт — линия, а тут бац — и стал ареа. Тогда надо менять и в остальных графиках на ареа, а это уже совсем не правильно.
— Ареа можно воспринять как что-то накопительное (площадь под интегралом).

Линия факт — Линия план

На мой вкус самый беззубый вариант из всех. Вроде просто, но контраст между планом и фактом маленький и никаких особо преимуществ нет.

Плюсы:
— Просто.
— Хорошо считывать отдельно динамику плана и факта.

Минусы:
— Сложно отслеживать положение линий относительно друг-друга.

Такой вариант, кстати, предлагает стандарт IBCS, но с отметками в виде заполненных и не заполненных точек. Что-то как-то не айс. Для спарклайнов точно не подойдет.

Линия факт — Линия план + заливка между линиями

Этот вариант предложил один из читателей канала и показал вот такую ссылку на Натана Яу. Вообще вариант прикольный, но мне лично, очень сложно тут считывать само значение плана.

Плюсы:
— Аккуратный, мало чернил. Классно смотрится спраклайном.
— Акцент на «хорошие» и «плохие» даты.

Минусы:
— Сложно отследить линию плана из-за «перекручивания».
— Чтобы сделать «линию» плана, которая очерчивает область заливки, используется неприятный лайфхак в Табло.

Линия факт — Ареа план + заливка между линиями

Аналог предыдущего графика, но с заполнением ниже нижней границы. Кажется, что это помогает считывать отдельно линию плана.

Плюсы:
— Довольно хорошо считывается.
— Акцент на «хорошие» и «плохие» даты.
— «Зарифмован» с графиком отклонений.
— «Зарифмован» с обычными графиками фактов.
— «Зарифмован» с буллет-чартами.

Минусы:
— Нормально считывается динамика линии плана, но не идеально.

Анализ

Я сделал все эти скрины и пошёл советоваться к эксперту по графикам — Саше Богачеву. Он согласился со мной, что важно будет сохранить факт линией, чтобы это сочеталось с остальными графиками, где нет планов. Самым «классическим» ему показался вариант факт — барами, план — засечками, но! чтобы при этом не было графиков факта линиями на соседних графиках.

Составил табличку сравнений вариантов и проставил плюсики.

Итого, решил взять последний вариант «Линия факт — Ареа план + заливка между линиями». Кажется, что это самый сбалансированный вариант из всех. Хотя не могу сказать, что он идеальный. У каждого из вариантов есть куча плюсов и минусов и этот показался мне наиболее робастным: он сохраняет факт линией, а подсветка сразу даёт понимание, что есть план, а что факт. При этом, легко увидеть, в какие периоды было отставание от плана, и такой вариант удобно реализовать в Табло.

П. С. Спасибо большое Саше Богачеву за обсуждения. И ещё многие написали в личку с идеями, тоже большое спасибо: Роман Зубарев, Егор Ларин и Павел.