Новый компонент для построения дашбордов - Карточки

Автор: Tim Crawford
В сегодняшней статье мы поговорим о новом элементе дашборда, который доступен в продуктах Stimulsoft начиная с релиза 2022.2 - Карточки (Cards). Этот элемент позволяет отображать сгруппированные данные в виде карточек. На каждой карточке можно вывести значения из колонок данных, в том числе изображения, а также применить графический анализ к этим значениям. Но, обо всем по порядку. Для начала надо прояснить, как формируются карточки в элементе.

Формирование карточек

Когда в элемент Карточки добавляется новая колонка данных, для каждого уникального значения из этой колонки создается собственная карточка. При добавлении других колонок данных, значения из них будут сопоставлены со значениями из первой колонки данных и добавлены в соответствующие карточки. Таким образом, данные группируются из источника и отображаются в определенной карточке. Обратите внимание!

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

Графический анализ в карточках

Тип колонки данных определяется автоматически как Показатель (Measure) и Измерение (Dimension) при добавлении. К колонкам типа Показатель всегда применяется функция анализа, а для Измерения – нет. В любой момент вы можете изменить тип поля данных. Здесь действует точно тот же принцип, что и для полей данных в элементе Таблица (Table). Помимо отображения значений в карточках, к ним можно применить различные типы графического анализа, такие как Гистограмма (Data Bars), Цветовая шкала (Color Scale), Индикатор (Indicator), Пузырьки (Bubble). Эти типы анализа позволяют отобразить относительную долю значения различными графическими средствами из суммы всех значений колонки данных. По значениям колонки данных в карточке также можно построить Спарклайны (Sparklines), которые представляют собой небольшую линейчатую или столбчатую диаграмму. Включение и выключение графического анализа осуществляется в редакторе элемента путем переключения типа для каждого поля данных.

Порядок вывода данных

Значения из колонок данных в карточке выводятся последовательно. Этот порядок определяется расположением колонок данных в редакторе элемента. Сначала в карточке отображается значение из самой верхней колонки данных в редакторе, затем из той, которая ниже и т.д. Таким образом, чтобы изменить порядок вывода данных в карточке, следует изменить порядок колонок данных в редакторе элемента. Кстати, каждое значение из колонки данных в карточке будет отображаться на новой строке. Однако, при необходимости, можно вывести значения и в одну строку. Для этого у колонки данных, значения после которой не стоит переносить, следует установить свойство Линия переноса (Wrap Line) в значение Нет (False).


Сами карточки выводятся в элементе последовательно. В зависимости от размера элемента, его высоты и ширины, будет рассчитано автоматически количество карточек, которое может быть отображено. Заполнение элемента карточками по умолчанию начинается слева направо, после чего осуществляется переход на следующую строку в элементе. Карточки можно выводить и сверху вниз, а затем в следующей колонке справа. Это поведение определяется значением свойства Ориентация (Orientation) у элемента. Лайфхак

Если необходимо вывести карточки строго в три колонки при горизонтальной ориентации или, например, три строки при вертикальной, то в нашем генераторе отчетов и дашбордов можно принудительно определить количество колонок в элементе в свойстве Количество колонок (Column Count). Здесь следует понимать, что размер самих карточек будет рассчитан таким образом, чтобы вместить необходимое количество в колонку или строку.

Оформление карточек

Оформление элемента и карточек в нем осуществляется с помощью свойств или через Стиль (Style). На момент написания статьи, стиль предоставляет доступ лишь к некоторым настройкам оформления элемента, таким как Цвет фона (Back Color), Цвет текста (Fore Color), Цвет линии (Line Color) и набор цветов для режима Цвет для каждого (Color Each). Все остальные настройки доступны в свойствах. И здесь следует четко разграничивать настройки элемента Карточки и настройки карточек в этом элементе. Дело в том, что некоторые свойства могут повторяться по названию, но быть различными по назначению. Например, вы можете определить радиус закругления как для элемента, так и для карточек в этом элементе. Все настройки оформления элемента располагаются на панели свойств, а все настройки оформления карточек расположены на панели свойств в отдельной группе - Карточки (Cards).


Отдельно хотелось бы упомянуть о режиме Цвет для каждого. При данном режиме карточка получает собственный цвет фона из определенной коллекции цветов в стиле элемента или в свойстве Цвета рядов (Series Colors). Сам режим включается или выключается в зависимости от значения свойства Цвет для каждого из группы Карточки.
Также мы подготовили для вас видео с описанием работы нового функционала. Этот и другие видеоуроки смотрите на нашем YouTube-канале.

Таким образом карточки как элемент дашборда обладает огромными возможностями визуализации и анализа данных. Надеемся, статья была полезной для вас.
Используя этот сайт, вы соглашаетесь на использование файлов Cookie для аналитики и персонализированного контента. Файлы Cookie хранят полезную информацию на вашем компьютере, чтобы помочь нам повысить эффективность и удобство использования. Для получения дополнительной информации, пожалуйста, прочтите Конфиденциальность и Использование Cookie.
Я согласен