В Части 1 этой серии мы говорили о том, чем полезны информационные панели, рассмотрели тип информационной панели, которую мы будем создавать, и настроили наше приложение информационной панели. В этом блоге мы будем внедрять наши информационные карточки в верхней части нашей панели инструментов, а также FlexCharts и Gauges, которые будут отображать информацию о количестве людей, посещающих наш сайт, и о том, как они получают к нему доступ.
Информационные карточки и всплывающая подсказка Wijmo
На многих информационных панелях важная информация отображается на карточках в верхней части страницы; для информационных панелей продаж это обычно может быть такая информация, как сделки в конвейере, процент конверсии, общий объем продаж, оставшийся доход до цели и т. д. Поскольку наша информационная панель будет отслеживать статистику пользователей, посещающих наш сайт, мы хотим отображать количество активные сеансы, время загрузки сайта, показатель APDEX и показатель отказов. Поскольку мы работаем в Angular, сгенерируем новый компонент, в котором будем отображать наши информационные карточки. Для этого выполните следующую команду:
ng g c current-infoТеперь, когда у нас есть компонент current-info, мы можем добавить HTML-код в файл current-info.component.html:
<div class="info-grid">
<div class="info">
<div class="info-session-header">ACTIVE SESSIONS (NOW) <i class="bi bi-question-circle" [wjTooltip]="activeSessionTooltip" [wjTooltipPosition]="6"></i></div>
<div class="info-session-count">{{ activeSession.current }}</div>
<div class="info-session previous-day">
<div class="previous-day-count">
<div>30 DAYS AGO</div>
<div class="previous-day-value">{{ activeSession.previous }}</div>
</div>
<div class="previous-day-change">
<div class="change-right">CHANGE</div><br>
<div class="change-right negative"><i class="bi bi-caret-down-fill"></i>{{ activeSession.change }}</div>
</div>
</div>
</div>
</div>Это будет код для нашей карточки Активные сеансы. Как и в случае с нашим файлом app.component.html, мы собираемся организовать наши четыре карточки с помощью сетки; это позволит нам переупорядочивать наши карточки в зависимости от ширины экрана, позволяя нашему приложению продолжать реагировать.
Здесь мы реализуем много классов, некоторые из которых я сейчас коснусь, но мы пройдемся немного дальше, когда перейдем к файлу current-info.component.css; важно знать, что это будет обрабатывать макет карты. Класс info-grid позаботится о расположении наших карточек, класс info обрабатывает основные стили, которые мы хотим применить ко всем карточкам, а классы Например, info-session-header будет использоваться во всех карточках для оформления каждого раздела карточки.
Прежде чем мы добавим остальную часть нашего HTML, нужно отметить еще одну вещь; использование иконок Bootstrap и класса всплывающей подсказки Wijmo. Если вы посмотрите на наши теги ‹i›, вы увидите, что мы используем несколько классов для этих элементов: bi, bi-question-circle и bi-caret- заполнить. Класс bi является базовым классом значков Bootstrap, а bi-question-circle и bi-caret-down-fill являются фактическими значками, которые мы хотите отобразить.
К тому же элементу ‹i›, к которому мы добавляем значок вопросительного знака, мы также добавляем всплывающую подсказку Wijmo. Подсказка будет служить для отображения дополнительной информации о карточке, когда пользователь наводит курсор на значок. Мы задаем текст, который хотим отобразить, назначая переменную activeSessionTooltip свойству wjTooltip, а положение всплывающей подсказки, присваивая числовое значение wjTooltipPositionсобственность. Вы можете увидеть значения перечисления, которые вы можете использовать для установки свойства здесь.
Мы также привязываем некоторые значения, которые хотим отображать на карточке, и эта информация хранится в файле current-info.component.ts. Обычно с такими значениями вы будете считывать их с сервера, но для целей этой панели мы просто устанавливаем эти значения в файле TypeScript.
С учетом сказанного, если вы посмотрите ниже, вы увидите полный HTML-код для нашего компонента current-info, который включает в себя карточки для времени загрузки сайта, оценки APDEX и показателя отказов:
<div class="info-grid">
<div class="info">
<div class="info-session-header">ACTIVE SESSIONS (NOW) <i class="bi bi-question-circle" [wjTooltip]="activeSessionTooltip" [wjTooltipPosition]="6"></i></div>
<div class="info-session-count">{{ activeSession.current }}</div>
<div class="info-session previous-day">
<div class="previous-day-count">
<div>30 DAYS AGO</div>
<div class="previous-day-value">{{ activeSession.previous }}</div>
</div>
<div class="previous-day-change">
<div class="change-right">CHANGE</div><br>
<div class="change-right negative"><i class="bi bi-caret-down-fill"></i>{{ activeSession.change }}</div>
</div>
</div>
</div>
<div class="info">
<div class="info-session-header">LOAD TIME (NOW) <i class="bi bi-question-circle" [wjTooltip]="loadTimeTooltip" [wjTooltipPosition]="6"></i></div>
<div class="info-session-count">{{ loadTime.current }}</div>
<div class="info-session previous-day">
<div class="previous-day-count">
<div>30 DAYS AGO</div>
<div class="previous-day-value">{{ loadTime.previous }}</div>
</div>
<div class="previous-day-change">
<div class="change-right">CHANGE</div><br>
<div class="change-right positive"><i class="bi bi-caret-up-fill"></i>{{ loadTime.change }}</div>
</div>
</div>
</div>
<div class="info">
<div class="info-session-header">APDEX SCORE (NOW) <i class="bi bi-question-circle" [wjTooltip]="apdexTooltip" [wjTooltipPosition]="6"></i></div>
<div class="info-session-count">{{ apdexScore.current }}</div>
<div class="info-session previous-day">
<div class="previous-day-count">
<div>30 DAYS AGO</div>
<div class="previous-day-value">{{ apdexScore.previous }}</div>
</div>
<div class="previous-day-change">
<div class="change-right">CHANGE</div><br>
<div class="change-right positive"><i class="bi bi-caret-up-fill"></i>{{ apdexScore.change }}</div>
</div>
</div>
</div>
<div class="info">
<div class="info-session-header">BOUNCE RATE (NOW) <i class="bi bi-question-circle" [wjTooltip]="bounceRateTooltip" [wjTooltipPosition]="6"></i></div>
<div class="info-session-count">{{ bounceRate.current }}</div>
<div class="info-session previous-day">
<div class="previous-day-count">
<div>30 DAYS AGO</div>
<div class="previous-day-value">{{ bounceRate.previous }}</div>
</div>
<div class="previous-day-change">
<div class="change-right">CHANGE</div><br>
<div class="change-right negative"><i class="bi bi-caret-down-fill"></i>{{ bounceRate.change }}</div>
</div>
</div>
</div>
</div>Затем мы перейдем к файлу current-info.component.css, чтобы посмотреть, как мы размещаем эти карточки:
.info-grid {
display: grid;
grid-auto-columns: 1fr;
grid-template-areas:
'one'
'two'
'three'
'four';
width: 100%;
margin-inline: auto;
box-shadow: 2px 2px 2px 2px hsl(0, 0%, 70%);
background-color: white;
}
.info {
padding: 1rem;
}
.info:nth-child(1) {
grid-area: one;
}
.info:nth-child(2) {
grid-area: two;
}
.info:nth-child(3) {
grid-area: three;
}
.info:nth-child(4) {
grid-area: four;
}
.info-session-header {
font-size: 1.05em;
color: gray;
}
.info-session-count {
font-size: 2.5em;
font-weight: 200;
}
.previous-day {
display: grid;
grid-auto-columns: 1fr;
grid-template-areas: 'one two';
color: gray;
}
.previous-day-value {
color: black;
font-weight: bold;
}
.change-right {
float: right;
}
.caret {
width: 0;
height: 0;
display: inline-block;
border: 9px solid transparent;
}
.positive {
color: green;
}
.negative {
color: red;
}
@media (max-width: 799px) {
.info:nth-child(1) {
border-bottom: 1px lightgray solid;
}
.info:nth-child(2) {
border-bottom: 1px lightgray solid;
}
.info:nth-child(3) {
border-bottom: 1px lightgray solid;
}
}
@media (min-width: 800px) {
.info-grid {
grid-template-areas:
'one two'
'three four';
}
.info:nth-child(1) {
border-bottom: 1px lightgray solid;
border-right: 1px lightgray solid;
}
.info:nth-child(2) {
border-bottom: 1px lightgray solid;
}
.info:nth-child(3) {
border-right: 1px lightgray solid;
}
}
@media (min-width: 1200px) {
.info-grid {
grid-template-areas:
'one two three four';
}
.info:nth-child(1) {
border-right: 1px lightgray solid;
}
.info:nth-child(2) {
border-right: 1px lightgray solid;
}
.info:nth-child(3) {
border-right: 1px lightgray solid;
}
}Как вы могли заметить, большая часть этого CSS очень похожа на CSS, который обрабатывает макет панели инструментов; карты размещаются с использованием сетки, и мы присваиваем каждой карте значение grid-area, которое мы можем использовать для их размещения в сетке. Мы также определяем некоторые параметры ширины, которые будут обрабатывать макет карты в зависимости от размера экрана.
Последнее, что нужно затронуть в CSS, это то, что в нижней части карт мы показываем статистику каждой карты за 30 дней назад, используя CSS для окрашивания статистики в красный цвет, если мы видели падение за последний месяц. и зеленый, если мы наблюдаем увеличение. С этим справляются классы предыдущего дня и значения предыдущего дня.
Прежде чем запустить приложение, мы перейдем к файлу current-info.component.ts, чтобы просмотреть данные, загружаемые в компонент:
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-current-info',
templateUrl: './current-info.component.html',
styleUrls: ['./current-info.component.css']
})
export class CurrentInfoComponent implements OnInit {
activeSessionTooltip = 'Number of current active sessions.';
loadTimeTooltip = 'Current average loadtime of the site.';
apdexTooltip = 'Ratio of tolerating requests to total requests made.';
bounceRateTooltip = 'Percentage of visitors who enter and then leave the site.';
activeSession = { current: 112, previous: 148, change: '24.32%' };
loadTime = { current: '2.08s', previous: '1.7s', change: '18.30%' };
apdexScore = { current: '1.00', previous: '0.96', change: '4.17%' };
bounceRate = { current: '10.2%', previous: '16.4%', change: '37.8%' }
constructor() { }
ngOnInit(): void {
}
}Это очень стандартный TypeScript; мы просто создаем некоторые данные, которые мы хотим отображать на каждой карточке, и определяем текст, который мы хотим отображать в каждой из всплывающих подсказок.
Когда мы запустим приложение, мы увидим следующее:
И если пользователь наведет курсор на один из значков вопросительного знака, он увидит всплывающую подсказку Wijmo, отображающую дополнительную информацию о карточке:
Статистика сеанса и FlexChart
Следующий раздел, который мы рассмотрим, посвящен включению FlexChart в нашу панель инструментов для отображения статистики сеансов пользователей. Для этого мы создадим три новых компонента, используя следующие команды:
ng g c session-info
ng g c top-platform-info
ng g c top-browserКомпонент session-info будет отображать информацию об общем количестве сеансов, top-platform-info предоставит нам информацию в зависимости от того, какие типы устройств используют наши пользователи для посещения. наш сайт, а основной браузер будет отображать информацию, основанную на различных браузерах, которые наши пользователи используют для доступа к сайту. Первый компонент, который мы рассмотрим, — это компонент session-info:
<div class="sessions-container">
<div class="sessions-info">
<div class="session-header">SESSIONS <i class="bi bi-question-circle" [wjTooltip]="sessionTooltip" [wjTooltipPosition]="6"></i></div>
</div>
<div class="sessions-info">
<div class="session-total">
<div class="session-total-value">
{{ totalSessions }}
</div>
<div class="session-total-annotation">
IN TOTAL
</div>
</div>
<wj-flex-pie class="session-chart" [itemsSource]="data" [bindingName]="'sessions'" [binding]="'number'" [innerRadius]="0.85" [palette]="['rgba(50, 50, 255, 1)', 'rgb(0, 200, 200, 1)']" style="margin-left: auto; margin-right: auto;">
<wj-flex-chart-legend [position]="'None'"></wj-flex-chart-legend>
</wj-flex-pie>
</div>
<div class="sessions-info sessions-breakdown">
<div style="display: flex; justify-content: space-between">
<div>NEW</div><div>RETURNING</div>
</div>
<div style="display: flex; justify-content: space-between">
<div class="session-value-bg">{{data[0].number}}</div><div class="session-value-bg">{{ data[1].number }}</div>
</div>
<hr>
<div>AVERAGE PAGEVIEWS/SESSION</div>
<div style="display: flex; justify-content: space-between">
<div class="session-value-bg">{{ pageViews.value }}</div><div class="session-value-sm"><i class="bi bi-caret-up-fill positive"></i>{{ pageViews.change }}</div>
</div>
<hr>
<div>AVERAGE SESSION DURATION</div>
<div style="display: flex; justify-content: space-between">
<div class="session-value-bg">{{ sessions.value }}</div><div class="session-value-sm"><i class="bi bi-caret-up-fill positive"></i>{{ sessions.change }}</div>
</div>
</div>
</div>HTML для этого компонента прост: у нас есть заголовок нашей карты, значок Bootstrap с прикрепленной всплывающей подсказкой Wijmo и основа карты, на которой мы отображаем статистику и форматируем ее с помощью flexbox. Однако часть этого компонента, на которой мы хотим сосредоточиться, — это Wijmo FlexPie, который мы включаем.
FlexPie от Wijmo — очень мощный компонент, который можно реализовать всего несколькими строками HTML. По сути, все, что нам нужно передать ему, чтобы он функционировал, — это источник данных (который мы привязываем к свойству itemsSource), значение привязки, которое мы привязываем к binding и значение имени, которое мы привязываем к свойству bindingName. Чтобы добавить немного больше стиля элементу управления, мы устанавливаем внутренний радиус для диаграммы FlexPie, чтобы мы могли отображать дополнительную информацию в центре, а также устанавливаем пользовательскую палитру (для этой диаграммы мы используем голубой и королевский синий в качестве двух цветов нашей палитры). Последнее, что мы сделаем, это отцентрируем элемент управления по горизонтали в элементе управления, чтобы все было хорошо выровнено.
Прежде чем мы перейдем к CSS, мы взглянем на файл session-info.component.ts, чтобы взглянуть на наши данные:
import { Component, OnInit } from '@angular/core';
import { DataService } from '../data.service';
@Component({
selector: 'app-session-info',
templateUrl: './session-info.component.html',
styleUrls: ['./session-info.component.css']
})
export class SessionInfoComponent implements OnInit {
data: any[];
sessionTooltip = 'User sessions breakdown.';
pageViews = { value: 3.54, change: '12.26%' };
sessions = { value: '4m 41s', change: '9.38%' };
totalSessions = '111.9k';
constructor(private dataService: DataService) {
this.data = dataService.getSessionData();
}
ngOnInit(): void {
}
}Здесь мы просто создаем некоторые фиктивные данные для отображения на карточке, а также вызываем службу данных, чтобы получить данные для нашего элемента управления FlexPie. Если мы перейдем к нашему файлу data.service.ts и посмотрим на метод getSessionData(), мы увидим данные, которые мы отправляем:
sessionData = [
{ sessions: 'New Users', number: 49120 },
{ sessions: 'Returning Users', number: 62780 }
];
getSessionData() {
return this.sessionData;
}Мы просто возвращаем массив объектов и будем использовать его для заполнения нашего элемента управления. Для простоты наше приложение просто создает некоторые фиктивные данные; на панели инструментов вы, скорее всего, будете вызывать API для получения данных с сервера.
Теперь, когда у нас есть HTML-код и мы увидели данные, которые будем использовать, мы перейдем к файлу session-info.component.css, чтобы посмотреть на немного стилей. что мы делаем:
.sessions-container {
padding: 1rem;
}
.session-header {
font-size: 1.05em;
color: gray;
}
.sessions-info {
position: relative;
}
.session-chart {
border: none;
height: 200px;
width: 200px;
}
.session-total {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.session-total-value {
font-size: 2em;
}
.session-total-annotation {
font-size: 1em;
font-weight: 600;
color: gray;
}
.sessions-breakdown {
color: gray;
}
.session-value-bg {
color: black;
font-weight: 500;
font-size: 1.75rem;
}
.session-value-sm {
padding-top: 0.75em;
}
.positive {
color: green;
}Здесь мы только устанавливаем некоторые отступы для разных div, чтобы все было правильно распределено, используя некоторое позиционирование, чтобы центрировать некоторые из наших статистических данных в центре нашего элемента управления FlexPie, и добавляем некоторые цвета, чтобы числа в компоненте стояли вне. Когда мы запустим наше приложение, компонент sessions-info будет выглядеть следующим образом:
Теперь, когда раздел сеансов на панели инструментов завершен, мы реализуем наши карточки «Лучшие платформы» и «Лучшие браузеры»; обе эти карточки панели управления будут работать одинаково, но отображать разные данные.
Во-первых, мы рассмотрим карточку «Лучшие платформы»:
<div class="platforms-container">
<div class="platforms-header">TOP PLATFORMS <i class="bi bi-question-circle" [wjTooltip]="platformTooltip" [wjTooltipPosition]="6"></i></div>
<div class="platforms-info">
<wj-flex-chart [header]="'Average Load Time'" [bindingX]="'platform'" [selectionMode]="'Point'" [itemsSource]="loadTimeData" [palette]="palette">
<wj-flex-chart-legend [position]="'None'"></wj-flex-chart-legend>
<wj-flex-chart-series [name]="'Previous Month'" [binding]="'prevMonth'"></wj-flex-chart-series>
<wj-flex-chart-series [name]="'Current Month'" [binding]="'curMonth'"></wj-flex-chart-series>
</wj-flex-chart>
<wj-flex-pie [header]="'Sessions by Platform'" [bindingName]="'platform'" [binding]="'sessions'" [itemsSource]="sessionData" [palette]="palette"></wj-flex-pie>
</div>
</div>Вы заметите, что у нас значительно меньше HTML, чем у любых других карточек, которые мы создали до сих пор. Это говорит о том, насколько легко использовать не только элементы управления FlexChart Wijmo, но и все элементы управления Wijmo. Мы добавили еще одну всплывающую подсказку Wijmo в заголовок карты, а также реализовали на этой карточке 2 FlexChart: линейчатую диаграмму FlexChart и диаграмму FlexPie.
Как видите, все, что нам нужно сделать, это установить несколько свойств. Для FlexPie мы устанавливаем те же свойства, за исключением внутреннего радиуса, что и в нашей карточке «Сеансы». Мы устанавливаем свойство itemsSource, свойство палитры и нашу привязку оси x со свойством bindingX для гистограммы. Мы также добавляем легенду к диаграмме и различные серии, которые мы хотим показать. В случае с этой гистограммой мы хотим отображать информацию как за текущий, так и за предыдущий месяц.
Теперь, когда мы реализовали HTML, мы перейдем к нашим файлам top-platform-info.component.ts и файлу data.service.ts, чтобы увидеть данные, которые мы связываем:
import { Component, OnInit } from '@angular/core';
import { DataService } from '../data.service';
import * as wjChart from '@grapecity/wijmo.chart';
@Component({
selector: 'app-top-platform-info',
templateUrl: './top-platform-info.component.html',
styleUrls: ['./top-platform-info.component.css']
})
export class TopPlatformInfoComponent implements OnInit {
loadTimeData: any[];
sessionData: any[];
platformTooltip = 'Breakdown of sessions by platform.';
palette = wjChart.Palettes.darkly;
constructor(private dataService: DataService) {
this.loadTimeData = dataService.getPlatformLoadTimeData();
this.sessionData = dataService.getPlatformSessionData();
}
ngOnInit(): void {
}
}В этом файле мы устанавливаем текст всплывающей подсказки, который мы хотим отобразить, настраиваем нашу палитру и вызываем нашу службу данных, чтобы получить данные для наших двух диаграмм:
platformLoadTimeData = [
{ platform: 'Desktop', prevMonth: 1.58, curMonth: 1.49 },
{ platform: 'Phone', prevMonth: 2.01, curMonth: 1.96 },
{ platform: 'Tablet', prevMonth: 2.16, curMonth: 2.41 },
{ platform: 'Other', prevMonth: 2.53, curMonth: 2.65 }
];
platformSessionData = [
{ platform: 'Desktop', sessions: 68379 },
{ platform: 'Phone', sessions: 21478 },
{ platform: 'Tablet', sessions: 14523 },
{ platform: 'Other', sessions: 7520 }
];
getPlatformLoadTimeData() {
return this.platformLoadTimeData;
}
getPlatformSessionData() {
return this.platformSessionData;
}Как и в прошлый раз, когда мы ссылались на извлечение данных из службы данных, мы используем фиктивные данные на нашей панели инструментов, но вы, скорее всего, будете вызывать API для получения данных из базы данных. На нашей панели управления мы отображаем время загрузки для каждой платформы (рабочий стол, телефон, планшет и другие) и количество сеансов для каждой платформы.
Наконец, нам нужно реализовать наш CSS:
.platforms-container {
padding: 1rem;
}
.platforms-header {
font-size: 1.05em;
color: gray;
}
.platforms-info {
display: flex;
flex-direction: row;
justify-content: space-evenly;
}
.wj-flexchart {
height: 300px;
border: none;
width: 50%;
}
@media (max-width: 799px) {
.platforms-info {
flex-direction: column;
}
.wj-flexchart {
width: 100%;
}
}CSS для этого компонента обрабатывает отступы, которые мы используем по краю карты, и то, как мы отображаем данные в зависимости от ширины экрана. Когда экран становится меньше, мы переключаемся с горизонтального расположения двух отображаемых диаграмм на вертикальное расположение.
Когда мы запустим приложение, вы увидите следующее:
Если вы наведете курсор на любую часть этих двух диаграмм, на диаграмме отобразится всплывающее окно, показывающее данные, которые представляются визуально:
Переходя к компоненту top-browser, этот компонент работает практически так же, как компонент top-platform-info. Элементы управления и макет CSS одинаковы; отличается только данные, которые будут переданы в элемент управления. Вы можете увидеть код для всех различных файлов ниже:
top-browser.component.html
<div class="browsers-container">
<div class="browsers-header">TOP BROWSERS <i class="bi bi-question-circle" [wjTooltip]="browserTooltip" [wjTooltipPosition]="6"></i></div>
<div class="browsers-info">
<wj-flex-chart [header]="'Average Load Time'" [bindingX]="'browser'" [selectionMode]="'Point'" [itemsSource]="loadTimeData" [palette]="palette">
<wj-flex-chart-legend [position]="'None'"></wj-flex-chart-legend>
<wj-flex-chart-series [name]="'Previous Month'" [binding]="'prevMonth'"></wj-flex-chart-series>
<wj-flex-chart-series [name]="'Current Month'" [binding]="'curMonth'"></wj-flex-chart-series>
</wj-flex-chart>
<wj-flex-pie [header]="'Sessions by Browser'" [bindingName]="'browser'" [binding]="'sessions'" [itemsSource]="sessionData" [palette]="palette"></wj-flex-pie>
</div>
</div>top-browser.component.ts
import { Component, OnInit } from '@angular/core';
import { DataService } from '../data.service';
import * as wjChart from '@grapecity/wijmo.chart';
@Component({
selector: 'app-top-browser',
templateUrl: './top-browser.component.html',
styleUrls: ['./top-browser.component.css']
})
export class TopBrowserComponent implements OnInit {
loadTimeData: any[];
sessionData: any[];
browserTooltip = 'Breakdown of sessions by browser.';
palette = wjChart.Palettes.darkly;
constructor(private dataService: DataService) {
this.loadTimeData = dataService.getBrowserLoadTimeData();
this.sessionData = dataService.getBrowserSessionData();
}
ngOnInit(): void {
}
}top-browser.component.css
.browsers-container {
padding: 1rem;
}
.browsers-header {
font-size: 1.05em;
color: gray;
}
.browsers-info {
display: flex;
flex-direction: row;
justify-content: space-evenly;
}
.wj-flexchart {
height: 300px;
border: none;
width: 50%;
}
@media (max-width: 799px) {
.browsers-info {
flex-direction: column;
}
.wj-flexchart {
width: 100%;
}
}data.service.ts
browserLoadTimeData = [
{ browser: 'Chrome', prevMonth: 1.68, curMonth: 1.52 },
{ browser: 'Firefox', prevMonth: 1.93, curMonth: 1.71 },
{ browser: 'Edge', prevMonth: 2.25, curMonth: 2.38 },
{ browser: 'Safari', prevMonth: 2.11, curMonth: 2.03 },
{ browser: 'Other', prevMonth: 2.56, curMonth: 2.49 }
];
browserSessionData = [
{ browser: 'Chrome', sessions: 34520 },
{ browser: 'Firefox', sessions: 29586 },
{ browser: 'Edge', sessions: 13793 },
{ browser: 'Safari', sessions: 22136 },
{ browser: 'Other', sessions: 11865 }
];
getBrowserLoadTimeData() {
return this.browserLoadTimeData;
}
getBrowserSessionData() {
return this.browserSessionData;
}Когда вы запустите приложение, вы увидите карточку с данными, заполненными для данных сеанса браузера:
Страновые сессии и линейная шкала
Последней частью информационной панели, которую мы создадим в этой статье, будет карта, которая отображает лучшие страны по сеансам, используя преимущества управления Linear Gauge от Wijmo. Первое, что нам нужно сделать, это сгенерировать компонент, который отображает карту вместе с данными, которые сопровождают ее:
ng g c top-country-infoТеперь мы перейдем к нашему файлу top-country-info.component.html, чтобы реализовать наш HTML:
<div class="top-countries">
<div class="countries">
<div class="countries-header">TOP COUNTRIES BY SESSION <i class="bi bi-question-circle" [wjTooltip]="countrySessionTooltip" [wjTooltipPosition]="6"></i></div>
</div>
<div class="countries countries-list">
<div *ngFor="let country of countryData" class="country-item">
<div><b>{{ country.name }}</b></div>
<div>Total Visits: {{ country.visits }}k</div>
<div>Percentage: {{ country.percentage }}%</div>
<div class="country-subtotal-gauge">
<wj-linear-gauge #theGauge [isReadOnly]="true" [min]="0" [max]="maxVisits" [value]="country.visits" [showRanges]="false">
</wj-linear-gauge>
</div>
</div>
</div>
</div>Как и во всех других наших карточках, вверху мы создадим заголовок, используем значок Bootstrap, чтобы добавить значок всплывающей подсказки, и привяжем всплывающую подсказку Wijmo к значку. Мы также будем перебирать 10 лучших стран на основе просмотров, отображая общее количество посетителей, процент посетителей по отношению к общему количеству посетителей нашего сайта и линейный датчик Wijmo, чтобы дать визуальное представление процента.
Как видите, линейный датчик Wijmo — это просто одна строка разметки, где мы установили элемент управления только для чтения с помощью свойств isReadOnly, установив min и >максимальноезначение (где максимальное значение — это количество посетителей из самой посещаемой страны) и значение посетителей для этой страны.
Теперь мы перейдем к файлу top-country-info.component.ts, чтобы увидеть данные, которые мы получаем для элемента управления Linear Gauge:
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-top-country-info',
templateUrl: './top-country-info.component.html',
styleUrls: ['./top-country-info.component.css']
})
export class TopCountryInfoComponent implements OnInit {
countryData = [
{ name: 'United States', visits: 21.9, percentage: 19.7 },
{ name: 'Japan', visits: 13.8, percentage: 12.4 },
{ name: 'Canada', visits: 12.7, percentage: 11.4 },
{ name: 'China', visits: 11.3, percentage: 10.2 },
{ name: 'United Kingdom', visits: 7.9, percentage: 7.1 },
{ name: 'Russia', visits: 5.9, percentage: 5.3 },
{ name: 'Germany', visits: 5.9, percentage: 5.3 },
{ name: 'Mexico', visits: 4.2, percentage: 3.8 },
{ name: 'France', visits: 3.4, percentage: 3.1 },
{ name: 'Ukraine', visits: 3.1, percentage: 2.8 }
];
maxVisits = 21.9;
countrySessionTooltip = 'Displays the top 10 countries by # of sessions.';
constructor() { }
ngOnInit(): void {
}
}В этом файле мы просто создаем некоторые фиктивные данные для передачи в файл HTML. Мы также устанавливаем для переменной maxVisits то же число, что и для страны с наибольшим количеством посещений, чтобы элементы управления выглядели более четко и имели лучшее визуальное представление о количестве посетителей в каждой стране. Мы также устанавливаем текст всплывающей подсказки в файле.
Наконец, мы посмотрим на файл top-country-info.component.css, чтобы увидеть, как мы размещаем карточку:
.top-countries {
width: 100%;
margin-inline: auto;
box-shadow: 2px 2px 2px 2px hsl(0, 0%, 70%);
background-color: white;
padding: 1rem;
height: 550px;
}
.countries-header {
font-size: 1.05em;
color: gray;
}
.countries-list {
height: 95%;
max-height: 95%;
overflow-y: scroll;
padding-right: 10px;
}
.country-item {
margin-top: 1em;
}
Здесь мы устанавливаем некоторый стиль для карточки (такой же, как и для других карточек на нашей панели инструментов) и некоторые отступы вокруг элементов управления и текста, которые мы отображаем.
Теперь, когда вы запустите приложение, вы увидите следующую карточку:
Теперь, когда у нас реализованы все карты, над которыми мы работали в этой статье, нам нужно добавить все компоненты в наш файл app.component.html:
‹main class="livemap-grid"›
‹div class="livemap load-info"›
‹app-current-info›‹/app-current-info›
‹/ div›
‹div class="livemap map"›
‹/div›
‹div class="livemap user-info"›
‹/div›
‹div class="сеансы livemap"›
‹app-session-info›‹/app-session-info›
‹/div›
‹div class="livemap issue-info" ›
‹/div›
‹div class="livemap top-countries"›
‹app-top-country-info›‹/app-top-country-info›
‹/div›
‹div class="livemap top-platforms"›
‹app-top-platform-info›‹/app-top-platform-info›
‹/div ›
‹div class="браузеры livemap"›
‹app-top-browser›‹/app-top-browser›
‹/div›
‹/main›
Когда мы запускаем наше приложение, уменьшаем масштаб и смотрим на всю панель инструментов, вот что мы видим:
Приборная панель прекрасно подходит! В следующей статье мы рассмотрим реализацию элементов управления FlexMap от Wijmo, элементов управления FlexGrid от Wijmo и того, как мы можем связать их вместе для создания интерактивной и отзывчивой комбинации карты и сетки. Увидимся там!
Первоначально опубликовано на https://www.grapecity.com 29 апреля 2022 г.
