Как создавать эффективные тепловые карты в Blazor

Тепловые карты позволяют отображать информацию с помощью трех значений вместо двух. Узнайте, как добавить такую карту в свое приложение Blazor.

Сталкивались ли ваши пользователи с трудностями при интерпретации или поиске закономерностей в двумерных данных? Например, когда в магазине больше всего покупателей? В какое время лучше всего публиковать видео на YouTube? В какие дни наблюдается схожая активность? Тепловая карта поможет ответить на эти вопросы.

В этой статье мы рассмотрим, как компонент Heatmap из состава Progress Telerik UI for Blazor поможет вам быстро и легко интегрировать тепловые карты в ваши приложения Blazor. Давайте взглянем!

Почему тепловая карта так эффективна?

Тепловая карта позволяет легко отображать информацию с помощью трех значений. Например, если мы хотим узнать, в какие дни недели наблюдается наибольшая активность в истории коммитов репозитория GitHub за последние 12 недель, мы будем использовать следующие данные:

• Горизонтальная категория, которая будет представлять недели
• Вертикальная категория, которая будет представлять день недели
• Количественное значение, представляющее количество коммитов, которое определяет интенсивность цвета

Вы можете заметить, что использование такого типа диаграмм позволяет быстро показать, где сосредоточена наибольшая активность с течением времени. Кроме того, визуальные элементы, такие как всплывающие подсказки и цвета, помогают детально понять значения — это то, с чем элемент управления Heatmap справляется очень хорошо.

Реализация элемента управления Blazor Heatmap

Давайте посмотрим, как можно создавать эффективные тепловые карты с помощью Blazor. Для этого мы создадим проект Blazor, который позволит нам проанализировать посещаемость магазина.

Начните с создания проекта Blazor, выбрав готовый шаблон Telerik или добавив компонент в существующий проект, что можно сделать с помощью следующего руководства по установке.

Создание модели данных для тепловой карты

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

Идея заключается в том, что тепловая карта будет рисовать сетку ячеек, где каждое пересечение представляет день и временной интервал, а количество посетителей отображается в соответствии с интенсивностью цвета.

В нашем случае мы сделаем это, создав запись (record) в новом файле с именем TrafficPoint.cs:

В этой записи Day будет категорией вертикальной оси, TimeSlot — категорией горизонтальной оси, а Visitors — количественным значением, используемым для определения интенсивности цвета в каждой ячейке.

Аналогичным образом мы создадим еще одну запись под названием WeekOption, которая позволит переключаться между наборами данных, имитируя данные за текущую неделю, предыдущую неделю и неделю с акциями в магазине. Мы сделаем это с помощью Blazor DropDownList, привязанного к коллекции объектов типа WeekOption, представленной следующим образом:

В этом случае Value идентифицирует каждый набор данных, а Label — это текст, который пользователи увидят в выпадающем списке.

Добавление службы данных для тепловой карты

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

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

Для этого мы создаем класс TrafficDataService:

Давайте рассмотрим наиболее важные моменты приведенного выше кода:

• Мы создаем пару коллекций, называемых Days и TimeSlots, которые определяют хронологический порядок. В реальном мире данные поступали бы из источника данных, упорядоченного по датам

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

• _trafficByWeek предварительно вычисляет три списка с информацией для разных недель в соответствии с опцией, выбранной в выпадающем списке

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

• GetTrafficData возвращает список на основе предоставленного ключа

GetTrafficData возвращает список на основе предоставленного ключа

• GetTrafficLevel — это статический метод, который классифицирует значение по трем диапазонам, и мы будем использовать его во всплывающей подсказке диаграммы

GetTrafficLevel — это статический метод, который классифицирует значение по трем диапазонам, и мы будем использовать его во всплывающей подсказке диаграммы

Эта служба послужит основой для данных приложения.

Регистрация службы

После создания службы мы должны зарегистрировать ее, чтобы использовать из любого компонента. Мы сделаем это в Program.cs следующим образом:

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

Создание компонента для размещения тепловой карты

Когда служба готова к внедрению, давайте создадим страницу компонента, которую мы назовем StoreHeatmap.razor. При инициализации страницы, помимо импорта некоторых необходимых пространств имен, мы добавим свойства для хранения данных, таких как выбранная неделя, опции выпадающего списка, категории и т. д.

Мы также настраиваем метод OnInitialized для получения информации из службы:

В приведенном выше коде вы также можете заметить некоторые интересные вещи, такие как объявление свойств TotalVisitors, PeakPeriod и QuietestPeriod, которые будут питать пользовательский интерфейс и рассчитываются автоматически при каждом рендеринге.

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

В приведенном выше коде мы реализовали пользовательский интерфейс с использованием компонентов Telerik TelerikDropDownList и TelerikCheckBox, которые предлагают множество вариантов настройки, помимо того, что являются очень надежными и простыми в настройке элементами управления.

Под этими компонентами мы добавим метки, которые информируют пользователя об общем количестве посетителей за неделю, а также о точках с самой высокой и самой низкой посещаемостью:

Результат выглядит следующим образом:

Теперь, когда приложение обретает форму, давайте перейдем к следующему шагу — реализации тепловой карты в приложении.

Реализация тепловой карты в Blazor

Вы должны знать, что тепловая карта в Blazor не реализуется с помощью специального тега для этой цели. Вместо этого используется компонент TelerikChart с серией типа Heatmap:

В приведенном выше коде мы указываем ось X через XField, ось Y через YField и количественное поле с помощью параметра Field. Рендеринг по умолчанию с минимальной информацией выглядит так:

Дизайн выглядит эффектно, однако вам может потребоваться немного больше настроек. Например, одна из таких настроек — возможность решить, показывать скругленные углы или нет, а также наложение числового значения. Мы делаем это благодаря тегам ChartSeriesMarkers и ChartSeriesLabels:

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

Еще одна вещь, которую мы можем сделать — это показать всплывающую подсказку, чтобы пользователь знал точное количество посетителей для ячейки. Мы можем добиться этого благодаря ChartSeriesTooltip:

В примере выше мы используем тег Template для определения визуального макета, используя context и DataItem, которые содержат экземпляр модели, связанный с выбранной ячейкой. Результат выглядит следующим образом:

С помощью этих параметров настройки мы предоставляем пользователю больше обратной связи, чтобы он мог выполнить более качественный анализ тепловой карты.

Заключение

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

Без сомнения, компоненты такого типа облегчают жизнь разработчикам и пользователям. Я приглашаю вас попробовать этот компонент и обеспечить лучший пользовательский интерфейс в составе ваших приложений Blazor.

Telerik UI for Blazor поставляется с бесплатной 30-дневной пробной версией.

Попробовать