How to Create a COVID-19 Dashboard with Ignite UI For Angular
One of the greatest challenges in the era of big data is making it easily accessible. Whether we need it to aid us in decision making, tracking new trends or price changes, it all boils down to extracting the proper set, and creating an effective visual representation.
While under normal circumstances this might take a while, sometimes it is critical to more rapidly build a visual dashboard. This is where Infragistics tools can help you to dramatically accelerate your build and deliver time.
In this blog post, we will review the steps we used to create the COVID-19-Dashboard (see full code here) from scratch using Ignite UI for Angular. So, if you don’t have an account, take a moment to sign-up for a free trial here.
First, let’s start with the visual design that is seen above. It is the first artifact that gives us an idea of what should be achieved
Go from Sketch-to-Code Quickly
As seen on the screen, data is represented in lists, charts, and geographic map. Fortunately, all of this is included with Ignite UI for Angular. And even better, this visual design can be implemented in Sketch with components from the Indigo.Design UI Kit! This is a prerequisite to cut time from design to HTML and CSS in minutes, see how: Publish this design to the Indigo.Design Cloud, then passes the link to the Indigo Design Code Generator, which will generate code from it. While this output may be flooded at first, doing a few iterations will allow you to achieve a simpler, yet powerful design, with less HTML and CSS directly coded into your app! This is how it works:
If you have gone through this Sketch-to-Code process properly, you would now have the layout and components of the app generated, where the Angular developer can start coding right away!
Even if you did not follow this approach and start from scratch, Infragistics still has you covered! Use the Angular Schematics for Ignite UI for Angular to build the boilerplate for the Angular app. Once you have the “Hello World” app running, let’s start adding the components for the dashboard! Run
ng @igniteui/angular-schematics:component list ListCasesand you have the igxList populated with data and beautifully styled! This is a huge time saver, as you don’t need to review documentation for the initial configuration. Put it wherever you need it in the application by using its selector tag: <app-list-cases></app-list-cases>. Let’s set that aside for now and continue working with the other components for the dashboard: a geographic map and a chart.
Angular Schematics for Ignite UI for Angular have preset for igxDataChart with financial series and igxCategoryChart (see demos here), but what is needed is an igxDataChart with column/line series, so let’s add It manually:
ng generate component Chart-CasesWe will edit the newly generated file just in a minute. Now do the same for the igxGeopraphicMap — generate a component and add the markup:
ng generate component Map-Cases<!-- map-cases.component.html -->
<igx-geographic-map #map zoomable="true"></igx-geographic-map>
Once you have all the components that you need, you can use them in your main layout and proceed with data processing. You are going to use the timely report's data from CSSEGISandData/COVID-19 (this source is operated by JHU CSSE and supported by ESRI Living Atlas Team and JHU APL ), which is being updated a few times daily.
The structure is suitable to feed all components on the page, which greatly facilitates the data service implementation — all the service does is fetch the data once and transforms it accordingly. After that, the main component passes the transformed data to each component in the app. Once this is done, let’s demonstrate how easy it is to bind the corresponding Ignite UI for Angular components to data:
igxList binds by adding igxListItem with ngFor and igxDataChart binds through its dataSource property. Please note that the chart series need to have their valueMemberPath property set too:
<!-- list-cases.component.html -->
<igx-list>
<igx-list-item #item *ngFor="let item of data">
<span igxListLineTitle>{{ item.country }}</span>
<span>{{ item.value | number }}</span>
</igx-list-item>
</igx-list> <!--timeline-chart.component.html -->
<igx-data-chart #chart [legend]="legend" [dataSource]="data">
<igx-numeric-y-axis #yAxis></igx-numeric-y-axis>
<igx-category-x-axis #xAxis></igx-category-x-axis>
<igx-column-series valueMemberPath="activeCases" labelMemberPath="date"
title="New Confirmed Cases" [xAxis]="xAxis" [yAxis]="yAxis">
</igx-column-series>
<igx-column-series valueMemberPath="recoveredCases" labelMemberPath="date"
title="Recovered Cases" [xAxis]="xAxis" [yAxis]="yAxis">
</igx-column-series>
</igx-data-chart>
The igxGeographyMap requires that the dataSource, fillMembePath, radiusMemberPath, latitudeMemerPath and longitudeMemberPath properties for the series for the are set:
// map-cases.component.ts // Geopraphic proportional symbol series
const symbolSeries = new IgxGeographicProportionalSymbolSeriesComponent();
symbolSeries.dataSource = data;
symbolSeries.fillMemberPath = 'value';
symbolSeries.radiusMemberPath = 'value';
symbolSeries.latitudeMemberPath = 'lat';
symbolSeries.longitudeMemberPath = 'lon';
this.map.series.add(symbolSeries);
Achieve Compelling Visualizations with Ignite UI Charts
After we have successfully bound the components to data, let’s design them properly to serve the dashboard needs.
Starting with charts, as they are definitely top-notch tools in the Ignite UI set. They vary enormously in type and series types. For the current dashboard, the proper choice is an igxDataChart with timeline series (and one with column series) to demonstrate how the number of infected, recovered, and lethal cases grow in time. One of the charts in the COVID-19-Dashboard is using logarithmic series, which provides a different insight into the data, compared to the non-logarithmic one. Play around with those to make the most out of it and achieve compelling data visualizations on the web!
Regarding the igxMap, you need to choose your map vendor (all major vendors supported — Bing, OpenStreetMaps, Esri) and then choose the correct series type to achieve your goal. For the COVID-19-Dashboard we went for the scatter symbol series. The symbol varies in size and color, making it obvious from the first look in which country has the most COVID-19 infection cases. The symbol opens a tooltip with even more numbers, making the whole experience true data storytelling! The map series are added/removed dynamically, which makes the presentation easy and really flexible.
Moving to the igxList, let’s pay more attention to the functional design instead of the visual one. A good tip is to sort the list data in advance and show your users the most relevant records on top. Depending on the scenario, you may also need to provide a filter and search UI as demonstrated on the IgxList help page.
The app also benefits from the igxTabs and igxBottomNavigation which are powerful UI tools for organizing content. Tabs are placed at the top and allow scrolling, while igxBottomNavigation places organizing buttons at the bottom.
In this blog, we covered the major milestones for building this functional and visually appealing COVID-19-Dashboard. What might have taken days before, can now be built in hours using Ignite UI for Angular and some of the tooling that Infragistics provides for developers, designers and others. We highlighted how designing in Sketch can greatly facilitate further development, as designers can use components from the Indigo.Design UI Kit for Sketch.
As an alternative, should your non-technical, business stakeholders need to build dashboards in minutes with no coding, they can do so leveraging our Reveal Business Intelligence. To help, we will be sharing a similar step-by-step blog, showing how to replicate this dashboard using Reveal.
Questions? Comments? Ideas? We want to hear from you! Share your ideas on how you iterated and improved this dashboard! For example, you might consider using a Grid or any other data visual component!
