Как создать интерактивную информационную панель для обновлений COVID-19 в JavaScript

Syncfusion предлагает множество компонентов пользовательского интерфейса, которые помогают разработчикам создавать очаровательные веб-приложения. В этом блоге мы увидим, как создать интерактивную информационную панель для отображения обновлений COVID-19, используя Макет информационной панели JavaScript и другие элементы управления пользовательского интерфейса JavaScript.

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

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

Примечание. Для получения данных мы используем бесплатный общедоступный API для COVID-19 от Всемирной организации здравоохранения (ВОЗ), https://www.who.int/emergencies/diseases/novel. -коронавирус-2019/советы-населению».

Как построить приборную панель

Шаг 1: Дизайн приборной панели

Во-первых, мы собираемся разработать базовый макет, используя компонент Syncfusion JavaScript Dashboard Layout. На этой панели у нас есть два способа инициализации компонентов:

  • Встроенная визуализация: добавление элемента панели мониторинга и определение свойства panels как атрибутов непосредственно в элементах HTML.
  • Визуализация свойств: добавление элемента панели мониторинга и определение свойства panels с помощью скрипта.

В следующем примере кода используется встроенная отрисовка.

HTML:

<div id="defaultLayout"> 
<div id="one" class="e-panel" data-row="0" data-col="0" data-sizeX="1" data-sizeY="1"> 
<span id="close" class="e-template-icon e-clear-icon"></span> 
<div class="e-panel-container"> 
</div> 
</div> 
<div id="two" class="e-panel" data-row="0" data-col="1" data-sizeX="1" data-sizeY="1"> 
<span id="close" class="e-template-icon e-clear-icon"></span> 
<div class="e-panel-container"> 
</div> 
</div> 
<div id="three" class="e-panel" data-row="0" data-col="2" data-sizeX="1" data-sizeY="1"> 
<span id="close" class="e-template-icon e-clear-icon"></span> 
<div class="e-panel-container"> 
</div> 
</div> 
<div id="four" class="e-panel" data-row="0" data-col="3" data-sizeX="1" data-sizeY="1"> 
<span id="close" class="e-template-icon e-clear-icon"></span> 
<div class="e-panel-container"> 
</div> 
</div> 
<div id="five" class="e-panel" data-row="1" data-col="0" data-sizeX="5" data-sizeY="3"> 
<span id="close" class="e-template-icon e-clear-icon"></span> 
<div class="e-panel-container"> 
</div> 
</div> 
<div id="six" class="e-panel" data-row="4" data-col="0" data-sizeX="2" data-sizeY="3"> 
<span id="close" class="e-template-icon e-clear-icon"></span> 
<div class="e-panel-container"> 
</div> 
</div> 
<div id="seven" class="e-panel" data-row="4" data-col="2" data-sizeX="2" data-sizeY="3"> 
<span id="close" class="e-template-icon e-clear-icon"></span> 
<div class="e-panel-container"> 
</div> 
</div> 
<div id="eight" class="e-panel" data-row="7" data-col="0" data-sizeX="6" data-sizeY="2"> 
<span id="close" class="e-template-icon e-clear-icon"></span> 
</div> 
</div>

JavaScript:

let dashboard: DashboardLayout = new DashboardLayout({
 cellSpacing: [10, 10],
 allowResizing: true,
 columns: 4,
 cellAspectRatio:2 
});

Посмотрите на нашу базовую компоновку панели инструментов на следующем снимке экрана.

Шаг 2. Добавление выпадающего списка для выбора стран

Далее мы добавим компонент Syncfusion Dropdown List для выбора конкретных стран из списка. После выбора страны ее данные о COVID-19 будут отображаться на панели инструментов.

См. следующий код.

// initialize DropDownList component 
let dropDownListObj: DropDownList = new DropDownList({ 
// bind the DataManager instance to dataSource property 
// bind the Query instance to query property 
// map the appropriate columns to fields property 
// set the placeholder to DropDownList input element 
placeholder: "Select a country", 
// sort the resulted items 
sortOrder: "Ascending", 
// set the height of the popup element 
popupHeight: "200px", 
change: onDateRangeChange 
}); 
dropDownListObj.appendTo("#country");

Шаг 3. Добавление фильтра даты на панель инструментов

Теперь мы включим фильтр даты в панель инструментов с помощью компонента Syncfusion DateRangePicker, который позволит нам визуализировать данные за определенный период времени.

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

См. следующий код.

import { DateRangePicker, RangeEventArgs } from "@syncfusion/ej2-calendars"; 
dateRangePickerObject = new DateRangePicker({ 
format: "MM/dd/yyyy", 
change: onDateRangeChange, 
startDate: window.startDate, 
endDate: window.endDate, 
showClearButton: false, 
allowEdit: false, 
presets: [ 
{ 
label: "Last Month", 
start: new Date("10/1/2017"), 
end: new Date("10/31/2017") 
}, 
{ 
label: "Last 3 Months", 
start: new Date("9/1/2017"), 
end: new Date("11/30/2017") 
}, 
{ 
label: "All Time", 
start: new Date("6/1/2017"), 
end: new Date("11/30/2017") 
} 
] 
}); 
dateRangePickerObject.appendTo("#daterange");

Шаг 4: Дизайн карт

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

axios 
.get( 
"https://api.covid19api.com/total/country/" + 
window.country + 
"" + 
"?from=" + 
window.startDate.toISOString() + 
"&to=" + 
window.endDate.toISOString() 
) 
.then(function(response: any) { 
var res = response["data"]; 
for (var i = 0; i < response.data.length; i++) { response.data[i].Date = new Date(response.data[i].Date); 
var Active = +response.data[i].Active; 
var Deaths = +response.data[i].Deaths; 
var Confirmed = +response.data[i].Confirmed; 
var Recovered = +response.data[i].Recovered; 
} 
if (document.getElementById("Active")) { document.getElementById("Active").textContent = Active.toString(); 
} 
if (document.getElementById("Confirmed")) { document.getElementById("Confirmed").textContent = Confirmed.toString(); 
} 
if (document.getElementById("Recovered")) { document.getElementById("Recovered").textContent = Recovered.toString(); 
} 
if (document.getElementById("Deaths")) { document.getElementById("Deaths").textContent = Deaths.toString(); 
} 
});

Шаг 5. Интеграция диаграмм и DataGrid с информационной панелью

Чтобы представить данные на информационной панели, мы добавим виджеты визуализации Charts и DataGrid в компонент «Макет информационной панели».

Мы собираемся использовать следующие компоненты пользовательского интерфейса Syncfusion для визуализации данных COVID-19:

  • Круговая диаграмма
  • Линейный график
  • Столбчатая диаграмма
  • DataGrid

Давайте посмотрим на каждый!

Круговая диаграмма

Для круговой диаграммы Syncfusion используйте API ВОЗ COVID-19 для отображения диаграммы на основе страны и диапазона дат начала и окончания.

Например, если мы выберем страну Индия, то запросы к API будут выглядеть так:

См. следующий пример кода.
JavaScript:

pie = new AccumulationChart({ 
enableSmartLabels: true, 
width: '100%', 
height: '350px', 
center: { x: '50%', y: '50%' }, 
legendSettings: { visible: true }, 
series: [ 
{ 
dataSource: piedata, 
xName: 'Status', 
yName: 'Cases', 
radius: '83%', 
startAngle: 0, 
endAngle: 360, 
innerRadius: '50%', 
dataLabel: { 
name: 'Cases', 
visible: true, 
position: 'Inside', 
font: { 
color: 'Black', 
size: '14px', 
fontFamily: 'Roboto' 
} 
}, 
palettes: ['#61EFCD', '#CDDE1F', '#FEC200', '#CA765A', '#2485FA', '#F57D7D', '#C152D2', '#8854D9', '#3D4EB8', '#00BCD7'] 
} 
] 
}); 
pie.appendTo('#total-expense');

Вывод:

Линейный график

В Линейной диаграмме Syncfusion используйте API для отображения диаграммы на основе активных и выздоровевших случаев в стране. Например, если мы выберем в качестве страны Индию, то запросы к API будут выглядеть так:

См. следующий пример кода.
JavaScript:

var content = '<p style="font-family:Roboto;font-size: 16px;font-weight: 400;font-weight: 400;letter-spacing: 0.02em;line-height: 16px;color: #797979 !important;">Active - Recovered</p>'; linechartObj = new Chart({ 
primaryXAxis: { 
valueType: 'DateTime', 
labelFormat: 'MMM', 
majorGridLines: { width: 0 }, 
intervalType: 'Months' 
}, 
primaryYAxis: {}, 
useGroupingSeparator: true, 
chartArea: {
 border: {
  width: 0
}
}, 
annotations: [{ 
content: content, 
x: '75px', y: '9%', coordinateUnits: 'Pixel', region: 'Chart' 
}], 
series: [ 
{ 
type: 'Area', 
dataSource: response.data, 
xName: 'Date', 
width: 2, 
yName: 'Active', 
name: 'Active', 
fill: '#b3d4f3', 
border: { width: 0.5, color: '#0470D8' }, 
marker: { 
visible: true, 
width: 10, 
height: 10, 
fill: 'white', 
border: { width: 2, color: '#0470D8' }, 
}, 
}, 
{ 
type: 'Area', 
dataSource: response.data, 
xName: 'Date', 
width: 2, 
yName: 'Recovered', 
name: 'Recovered', 
fill: '#4273f942', 
border: { width: 0.5, color: '#0470D8' }, 
marker: { 
visible: true, 
width: 10, 
height: 10, 
fill: 'white', 
border: { width: 2, color: '#0470D8' }, 
}, 
}, 
], 
margin: { top: 90 }, 
tooltip: { 
fill: '#707070', 
enable: true, shared: true, 
format: '${series.name} : ${point.y}', 
header: 'Month - ${point.x} ' 
} 
}); 
linechartObj.appendTo('#balance');

Вывод:

Столбчатая диаграмма

В Syncfusion Столбчатая диаграмма используйте API для отображения столбчатой ​​диаграммы на основе подтвержденных и выздоровевших случаев в стране. Например, если мы выберем страну Индия в панели инструментов, то запросы к API будут такими:

См. следующий пример кода.

JavaScript:

columnChartObj = new Chart({ 
primaryXAxis: { 
labelFormat: 'MMM', 
valueType: 'DateTime', 
intervalType: 'Months', 
}, 
primaryYAxis: {}, 
useGroupingSeparator: true, 
series: [ 
{ 
type: 'Column', 
dataSource: response.data, 
xName: 'Date', 
width: 2, 
yName: 'Confirmed', 
name: 'Confirmed', 
fill: '#00bdae', 
animation: { enable: false }, 
marker: { 
visible: true, height: 10, width: 10 
}, 
}, 
{ 
type: 'Column', 
dataSource: response.data, 
xName: 'Date', 
width: 2, 
yName: 'Recovered', 
name: 'Recovered', 
fill: '#357cd2', 
animation: { enable: false }, 
marker: { 
visible: true, height: 10, width: 10 
}, 
}, 
], 
annotations: [{ 
content: '<p style="font-family:Roboto;font-size: 16px;font-weight: 400;font-weight: 400;letter-spacing: 0.02em;line-height: 16px;color: #797979 !important;">Confirmed - Recovered</p>', 
x: '200px', y: '9%', coordinateUnits: 'Pixel', region: 'Chart' 
}], 
margin: { top: 90 }, 
legendSettings: { visible: true }, 
titleStyle: { 
textAlignment: 'Near', fontWeight: '500', size: '16', color: '#000' }, 
tooltip: { 
fill: '#707070', 
enable: true, 
shared: true, 
format: '${series.name} : ${point.y}', 
header: 'Month - ${point.x} ', 
} 
}); 
columnChartObj.appendTo('#account-balance');

Вывод:

DataGrid

Компонент DataGrid используется для отображения списков всех активных, выздоровевших, смертельных и подтвержденных случаев COVID-19 в таблице на основе диапазона дат, выбранного нами в DateRangePicker.

См. следующий пример кода.

JavaScript:

gridObj = new Grid({ 
dataSource: response.data, 
allowSorting: true, 
enableHover: false, 
allowKeyboard: true, 
allowPaging: true, 
width: '100%', 
pageSettings: { 
pageCount: 4, 
pageSize: 14 
}, 
columns: [ 
{ 
field: 'Date', 
headerText: 'Date', 
width: 120, 
format: 'yMd', 
hideAtMedia: '(min-width: 600px)', 
}, 
{ 
field: 'Active', 
headerText: 'Active', 
width: 170, 
}, 
{ 
field: 'Recovered', 
headerText: 'Recovered', 
width: 160, 
hideAtMedia: '(min-width: 600px)' 
}, 
{ 
field: 'Deaths', 
headerText: 'Deaths', 
hideAtMedia: '(min-width: 1050px)' 
}, 
{ 
field: 'Confirmed', 
headerText: 'Confirmed', 
width: 120, 
textAlign: 'Right', 
} 
] 
});
 gridObj.appendTo('#recentexpense-grid');

Вывод:

Шаг 6. Настройка данных REST API COVID-19 для информационной панели

Наконец, нам нужно настроить COVID-19 global REST API для компонента Dashboard Layout. COVID-19 API — это бесплатный API для визуализации данных о новом коронавирусе. Это помогает вам получать доступ к данным, создавать из них информационные панели и мобильные приложения или интегрировать их в другие приложения.

Примечание. Данные получены из Джонс Хопкинс CSSE.

Мы используем следующий API для получения данных: https://api.covid19api.com/.

См. следующий пример кода.

axios 
.get( 
"https://api.covid19api.com/total/country/" + 
window.country + 
"" + 
"?from=" + 
window.startDate.toISOString() + 
"&to=" + 
window.endDate.toISOString() 
) 
.then(function(response: any) { 
var res = response["data"]; 
for (var i = 0; i < response.data.length; i++) { response.data[i].Date = new Date(response.data[i].Date); 
var Active = +response.data[i].Active; 
var Deaths = +response.data[i].Deaths; 
var Confirmed = +response.data[i].Confirmed; 
var Recovered = +response.data[i].Recovered; 
} 
if (document.getElementById("Active")) { document.getElementById("Active").textContent = Active.toString(); 
} 
if (document.getElementById("Confirmed")) { document.getElementById("Confirmed").textContent = Confirmed.toString(); 
} 
if (document.getElementById("Recovered")) { document.getElementById("Recovered").textContent = Recovered.toString(); 
} 
if (document.getElementById("Deaths")) { document.getElementById("Deaths").textContent = Deaths.toString(); 
} 
});

После выполнения всех предыдущих примеров кода мы получим объединенный вывод, показанный на следующем снимке экрана.

Демонстрационная ссылка:

Вы можете получить полный исходный код панели инструментов по этой ссылке:

https://stackblitz.com/edit/4p1aej-piw6y1?file=index.ts

Вывод

Спасибо за чтение! В этом сообщении блога мы узнали, как создать интерактивную панель мониторинга для обновлений COVID-19, используя макет панели мониторинга Syncfusion и другие компоненты пользовательского интерфейса. С помощью этой панели вы можете легко найти обновления COVID-19 для любой страны.

Компонент Dashboard Layout доступен в наших комплектах Blazor, ASP.NET (Core, MVC), JavaScript, Angular, React и Vue. Используйте его для создания впечатляющих информационных панелей!

Чтобы узнать больше о компоненте Dashboard Layout, обратитесь к онлайн-примерам и документации Syncfusion. Мы с нетерпением ждем, когда вы попробуете этот компонент и оставите свой отзыв через наш портал обратной связи. Вы также можете связаться с нами через наши форумы поддержки или Direct-Trac. Мы всегда рады Вам помочь!

Если вам нравится этот пост в блоге, мы думаем, вам также понравятся следующие:

Первоначально опубликовано на https://www.syncfusion.com 18 февраля 2021 г.