День 8. Настройка оформления дашбордов
Всем привет! Сегодня день релакса. Поговорим о настройках визуальной части дашбордов. Большинство из вас уже обнаружило у диаграмм вкладки “Настройки”, где можно задать параметры внешнего вида объектов.
На финальный, десятый день, мы заготовили для вас большой мастер-класс по кастомным настройкам стилей. А сейчас разберем интересные подручные настройки, многие из которых уже применили некоторые участники марафона.
На финальный, десятый день, мы заготовили для вас большой мастер-класс по кастомным настройкам стилей. А сейчас разберем интересные подручные настройки, многие из которых уже применили некоторые участники марафона.
В целом элементы оформления можно разделить на функциональные и декоративные. Функциональные призваны улучшать юзабилити наших отчетов. Декоративные элементы нужны, чтобы веселить зрителя.
А что вы хотели?) Всё в этом мире – шоу, и аналитика – не исключение.
Но если серьезно, то дополнительные эстетические элементы, особенно в отчетах для топ-менеджмента, способны повлиять на желание пользоваться отчётом.
А что вы хотели?) Всё в этом мире – шоу, и аналитика – не исключение.
Но если серьезно, то дополнительные эстетические элементы, особенно в отчетах для топ-менеджмента, способны повлиять на желание пользоваться отчётом.
Функциональные настройки оформления
Цвета линий.
Настраиваются в самой последней секции –Цветовой палитре. Цвет присваивается элементу по порядку расположения в запросах.
Как можно использовать эти цвета?
✅ Раскрашивать показатели по корпоративным стандартам;
✅ Ускорить считывание информации с большого количества диаграмм.
Настраиваются в самой последней секции –Цветовой палитре. Цвет присваивается элементу по порядку расположения в запросах.
Как можно использовать эти цвета?
✅ Раскрашивать показатели по корпоративным стандартам;
✅ Ускорить считывание информации с большого количества диаграмм.
Например, если задать план желтым цветом, а факт – зеленым, то при наличии нескольких диаграмм на экране пользователь быстрее поймет, что к чему. Но не допускайте ошибки – когда один показатель на разных диаграммах покрашен в разные цвета.
Что случилось? Отдел продаж перевыполнил план в два раза, пора открывать шампанское? А нет, это аналитик перепутал цвета показателей на дашборде…
Что случилось? Отдел продаж перевыполнил план в два раза, пора открывать шампанское? А нет, это аналитик перепутал цвета показателей на дашборде…
Подписи значений.
Довольно часто нам требуется показывать значения показателей прямо на графике, без наведения мышки. Для этого есть раздел “Подписи”.
Довольно часто нам требуется показывать значения показателей прямо на графике, без наведения мышки. Для этого есть раздел “Подписи”.
Здесь, кстати, есть раздел, позволяющий скорректировать выводимый формат данных. Настраивается этот формат за счет синтаксиса JavaScript. Если вы не планируете нырять в его глубины, то вот вам заготовочка, которая будет сокращать длинные числа, подписывая к ним тыс, млн, млрд.
✅Подставьте в график продаж, он должен стать посимпатичнее.
✅Подставьте в график продаж, он должен стать посимпатичнее.
@value.y >= 1000 && @value.y < 1000000 ? Math.round(@value.y/1000)+ " тыс. руб." :
@value.y >= 1000000 && @value.y < 1000000000 ? Math.round(@value.y/1000000)+ " млн. руб." :
@value.y >= 1000000000 && @value.y < 1000000000000 ? Math.round(@value.y/1000000000)+ " млрд. руб." :
@value.y
Дополнительная ось.
Иногда на графике требуется вывести показатели разных порядков. Например, продажи в миллионах, и кол-во проданных единиц в тысячах.
Создайте график с суммой продаж и кол-вом проданной продукции.
Из-за разных масштабов чисел один из показателей будет едва различим на фоне другого. Чтобы исправить это, можно вывести дополнительную ось Y. Для этого нужно активировать ее в настройках.
Иногда на графике требуется вывести показатели разных порядков. Например, продажи в миллионах, и кол-во проданных единиц в тысячах.
Создайте график с суммой продаж и кол-вом проданной продукции.
Из-за разных масштабов чисел один из показателей будет едва различим на фоне другого. Чтобы исправить это, можно вывести дополнительную ось Y. Для этого нужно активировать ее в настройках.
Однако одной активации не достаточно. Нужно назначить вывод показателя на эту ось. Для этого перейдите в раздел “Настройка осей и сегментов”, а там откройте нужный показатель, и отправьте его на на дополнительную ось.
Теперь силуэты обоих графиков читаются, и можно отслеживать взаимосвязь этих показателей. Тут же можно настроить стиль линии, а именно: задать толщину, тип пунктира, сглаживание линии.
И даже преобразовать линии в столбцы, выбрав тип серии “Гистограмма”. Так мы можем сделать полноценную комбинированную диаграмму.
И даже преобразовать линии в столбцы, выбрав тип серии “Гистограмма”. Так мы можем сделать полноценную комбинированную диаграмму.
Рамки и фоны визуализаций.
Очень полезны тем, что позволяют оформить графики в хорошо различимые блоки, что в целом улучшает читабельность дашборда. Обязательно пользуйтесь.
Спасибо участнику спринта @deloKSerge!
Очень полезны тем, что позволяют оформить графики в хорошо различимые блоки, что в целом улучшает читабельность дашборда. Обязательно пользуйтесь.
Спасибо участнику спринта @deloKSerge!
ДЕКОРАТИВНЫЕ настройки оформления
Обозначим несколько полезных приемов улучшения восприятия дашборда за счет художественной составляющей.
Фон дашборда.
В качестве фона можно установить картинку, что автоматически добавляет +100 к престижу и премиальности вашего дашборда.
Особенно, если оставить фоны диаграмм прозрачными.
Картинку на фон можно добавить, вставив элемент Изображение, и переместив его на задний план.
Спасибо участнику спринта Виталию!
В качестве фона можно установить картинку, что автоматически добавляет +100 к престижу и премиальности вашего дашборда.
Особенно, если оставить фоны диаграмм прозрачными.
Картинку на фон можно добавить, вставив элемент Изображение, и переместив его на задний план.
Спасибо участнику спринта Виталию!
Однако, прежде пускать такой козырь в ход, стоит подумать о назначении дашборда. Такие вещи уместно смотрятся на “презентационных” дашбордах, которые выводятся на большом экране в холле, или на стенде на конференции – и не содержат нагруженных визуализаций.
Для обычных дашбордов будет уместно задать фон сплошным цветом, чуть темнее фона диаграмм, дабы добиться разбивки на блоки.
Спасибо участнику спринта @Darya Konovalova!
Для обычных дашбордов будет уместно задать фон сплошным цветом, чуть темнее фона диаграмм, дабы добиться разбивки на блоки.
Спасибо участнику спринта @Darya Konovalova!
Ну, а если уделить процессу оформления некоторое время, то вполне возможно собрать очень солидное оформление, причем за счет стандартных возможностей платформы.
Спасибо участнику спринта Николаю Соловьеву!
Спасибо участнику спринта Николаю Соловьеву!
Фон дашборда настраивается во вкладке Настройки верхней панели. В списке можно выбрать цвет или рисунок.
А также – загрузить файл с темой (об этом подробнее будет в десятом дне)
А также – загрузить файл с темой (об этом подробнее будет в десятом дне)
Элементы фирменного стиля.
Помимо фирменных цветов, не стесняйтесь использовать атрибуты компании – логотипы, принты из брендбука и т.д. Такие элементы очень важны при создании отчетов для топ-менджмента.
Кроме шуток, использование подобных элементов значительно улучшит восприятие ваших работ руководством – вплоть до влияния на вашу карьеру.
Спасибо участнику спринта @Irina Litus!
Помимо фирменных цветов, не стесняйтесь использовать атрибуты компании – логотипы, принты из брендбука и т.д. Такие элементы очень важны при создании отчетов для топ-менджмента.
Кроме шуток, использование подобных элементов значительно улучшит восприятие ваших работ руководством – вплоть до влияния на вашу карьеру.
Спасибо участнику спринта @Irina Litus!
Разместить такие элементы на листе можно с помощью блока “Изображение”, который находится в стандартной библиотеке визуализаций.
Текстовые сноски и пояснения.
Да, пример не из нашего спринта, но уж очень наглядный. Не стесняйтесь оставлять краткую справку прямо на дашборде. В ней можно кратко объяснить, что тут происходит, и зачем вообще этот дашборд нужен. Если конструкция получается объемной, можно оставить ссылку на документацию.
Не пренебрегайте справкой – в конце концов, спустя десятки сделанных отчетов она понадобится и вам :)
Спасибо участнице спринта Нине Ногтевой!
Да, пример не из нашего спринта, но уж очень наглядный. Не стесняйтесь оставлять краткую справку прямо на дашборде. В ней можно кратко объяснить, что тут происходит, и зачем вообще этот дашборд нужен. Если конструкция получается объемной, можно оставить ссылку на документацию.
Не пренебрегайте справкой – в конце концов, спустя десятки сделанных отчетов она понадобится и вам :)
Спасибо участнице спринта Нине Ногтевой!
Домашнее задание
- Создайте комбинированную диаграмму с двумя показателями разных порядков на разных осях
- Разместите изображение на вашем дашборде (например, лого)
- Попробуйте настроить красивые границы для визуализаций
- Сделайте дашборд с красивой фоновой картинкой и простой не перегруженной визуализацией.
Помните, что для самых активных участников чата заготовлены призы от Visiology! ;)