How to Build a Responsive Dashboard Application in Angular

Read the articles in this series:

How to Build a Responsive Dashboard Application in Angular

Responsive Angular Dashboards Part 2: How to Add Datagrids & Charts

Responsive Angular Dashboards Part 3: Show GeoData with Map Controls

Dashboards have become crucial to many businesses; the ability to get the information you need at a glance is invaluable. They improve the speed at which your business and employees operate and allow them to make better decisions based on the data that they are provided.

The data must be portrayed in an easy-to-understand format, allowing managers and executives to quickly understand it and make decisions based on the insights.

However, creating a dashboard that is both responsive and efficient is no small feat. There are many libraries available online that offer multiple features, and many developers use several UX/UI libraries when building their dashboards.

Fortunately, one library makes it easy to build a dashboard without needing a host of different packages to get it up and running: Wijmo's Angular UI component library.

Throughout this blog series, we'll walk you through the steps of creating a responsive dashboard that outlines information on users who visit our site based on the region they're in, using both Wijmo and CSS to provide easy-to-consume data with the ability to view it on any device. Check out this demo to see the project in its final form. 

In this article, we will review the following:

• Defining the Dashboard
• The Toolbox
• Setting Up the Project
• Setting Up the Dashboard CSS

Ready to Create Custom Dashboards? Download Wijmo Today!

Defining a Dashboard

Before we get into the weeds and start building our dashboard, let's define what we mean when we say "dashboard." Typically, a dashboard would look something like this:

It's nice, compact, and easy to read. This is what managers have in mind when they throw around the idea of having developers build a dashboard.

However, most developers pose a problem: they aren't graphic designers—they're developers. As developers, how close can we get to building something like this when we aren't experienced as graphic designers?

It turns out that when we choose the correct library, we can get very close. Using Wijmo, we can easily create a dashboard that is both aesthetically pleasing and provides all of the data that users will need. The dashboard above is what we'll be building throughout this blog series.

Let's take a look at the tools that we'll be using.

The Toolbox

Angular

If you're reading this blog, you're probably familiar with the Angular framework. If you aren't, Angular is a TypeScript framework developed by Google that allows developers to easily build and deploy web applications.

If you're new to Angular or it's been a while since you've used it, we recommend reviewing Angular's documentation before continuing. Instead of reviewing the basics of Angular, we'll focus on building our dashboard, so there may be concepts that, if you're new, you won't be familiar with.

Wijmo

Developed by MESCIUS, Wijmo is a feature-rich set of enterprise-ready JavaScript/TypeScript UI controls, available in JavaScript, Angular, React, Vue, and Web Components.

Wijmo is an all-in-one UX/UI library that is easy to incorporate into your web applications, allowing you to create excellent dashboards and reporting tools quickly. All of the tools that we'll be incorporating into our dashboard are available out of the box with Wijmo; they require no third-party libraries and are simple to implement, only requiring us to define the features of each control we'll be using, as well as supplying them with our data source.

Many other libraries require us to use fine-tuned DOM refs to work correctly, but with Wijmo, once we've imported our desired components, we can begin using them immediately. Below, you can see which Wijmo components we'll leverage when building our dashboard.

FlexGrid

Wijmo's Angular DataGrid, FlexGrid, is the answer to your boring HTML tables. It's a highly customizable grid that allows users to implement features such as custom cells, aggregates, virtualization, paging, and more! The best part is that incorporating many of these features is as simple as setting a property on the grid, allowing developers to implement highly complex datagrids quickly and easily.

FlexChart

Wijmo's Angular chart component, FlexChart, offers developers over 80 different chart types, meaning there are charts to fit all of your needs. These include charts such as column, bar, scatter, line, area, and spline. FlexChart also allows you to combine several of these chart types!

We'll be using FlexChart to implement attractive pie and bar charts to display our data in the dashboard.

FlexMap

Wijmo's FlexMap is built on top of our FlexChart controls, allowing us to incorporate many of the same features of FlexChart while using GeoJSON to build out an interactable choropleth map control. We can assign data to different regions of the map, set a palette scheme to color the regions based on the region's data, and assign tooltips to each region, allowing users to view data related to the region.

For this dashboard, we will use FlexMap to allow users to display data by region at the click of a button.

Linear Gauge

Wijmo's Linear Gauge will enable users to assess the data being displayed at a glance. In our dashboard, the linear gauge will show the percentage of users who visit the site for each country in relation to all the other countries where the site is available.

Setting Up the Project

Now that we've outlined the Wijmo components that we'll be using to build our dashboard, it's time to set up the project. For this, we'll use the Angular CLI and run the following commands:

ng new wijmo-dashboard --no-standalone
cd wijmo-dashboard

When prompted to choose stylesheet format, choose CSS:

When asked if you would like server-side rendering, choose "No":

After the project has been set up and you've navigated into the folder, we'll need to install Wijmo itself. We'll also install Bootstrap Icons for some styling. To install these packages, run the following commands:

npm i @mescius/wijmo.all
npm i bootstrap-icons

Your application will then use NPM to install all of Wijmo's packages.

Once Wijmo has been installed, we'll need to include all of the desired modules inside the app.module.ts file:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

import { WjCoreModule } from '@mescius/wijmo.angular2.core';
import { WjGridModule } from '@mescius/wijmo.angular2.grid';
import { WjChartModule } from '@mescius/wijmo.angular2.chart';
import { WjChartMapModule } from '@mescius/wijmo.angular2.chart.map';
import { WjGaugeModule } from '@mescius/wijmo.angular2.gauge';
import { WjInputModule } from '@mescius/wijmo.angular2.input';

@NgModule({
  declarations: [
    AppComponent
  ],

  imports: [
    BrowserModule,
    AppRoutingModule,
    WjCoreModule,
    WjGridModule,
    WjChartModule,
    WjChartMapModule,
    WjGaugeModule,
    WjInputModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})

export class AppModule { }

Below, we've also outlined what we'll use each of the Wijmo modules for:

• WjCoreModule: Wijmo's core module, which is required to be included to utilize Wijmo's other modules, as well as the Tooltip control
• WjGridModule: Required to use Wijmo's FlexGrid control
• WjChartModule: Required to use FlexChart's bar chart, as well as the pie chart
• WjChartMapModule: Required to use the FlexMap control
• WjGaugeModule: Required to use the Linear Gauge control
• WjInputModule: Required to use the Popup control

Setting Up the Dashboard CSS

Now that we've installed the packages that we'll be using and imported the modules that we want to use in our dashboard into our app.module.ts file, it's time to set up some of our core styles. Inside our project's styles.css file, include the following:

@import "@mescius/wijmo.styles/themes/wijmo.theme.material.css";
@import "bootstrap-icons/font/bootstrap-icons.css";

body {
  margin: 0;
  background-color: hsl(0, 0%, 95%);
}

.wj-flexgrid {
  border: none;
}

.wj-flexgrid .wj-cell {
  border-left: none;
  border-right: none;
  display: flex;
  align-items: center;
  padding: 6px 16px;
  background: hsl(0, 0%, 100%);
  font-weight: 400;
  height: 48px;
}

.wj-flexgrid .wj-colheaders .wj-header.wj-cell {
  height: 56px;
  font-weight: bold;
  font-size: 16px;
  background: hsl(0, 0%, 80%);
  border-right: 1px solid gray;
}

.wj-flexgrid .wj-colheaders .wj-header.wj-cell:last-child {
  border-right: none;
}

.wj-cell.wj-has-notes:after {
  position: absolute;
  content: "";
  width: 0;
  right: 0;
  top: -10px;
  border: 10px solid transparent;
  border-right: 10px solid red;
  opacity: 0.5;
}

.wj-cell.wj-has-notes:hover:after {
  opacity: 1;
}

Here, we're doing a couple of different things. The first is that we're importing both our Wijmo style sheet and our Bootstrap icons. These need to be included inside the styles.css file so that the rest of our application can use them.

Second, we're setting up some base styling for our dashboard's <body>. We're simply setting the margin to 0, which will allow us a little more control over the spacing of our components and changing the background color to a slight gray. Our components will stand out on the page a little more with the slight gray.

Finally, we're adding some styling changes to the FlexGrid itself. FlexGrid style changes must be included in the styles.css file. If you try to make any style changes directly in the component that utilizes FlexGrid's CSS file, the changes will not be applied.

Here, we'll add a little more space to the cells of the datagrid and make our column headers more defined. We're also adding some styling to cells that will have tooltips appended to them and enabling them to display when a user hovers over the cell.

Don't worry too much about that now. We'll touch on that once we implement our tooltips.

To round out our styling section, we will set up the layout for our dashboard. To do this, we'll be making use of a CSS grid. This will allow our dashboard to be responsive, formatting itself properly no matter the device it is opened on. Open up your app.component.css file and include the following:

.livemap-grid {
  display: grid;
  gap: 1.5rem;
  grid-auto-columns: minmax(0, 1fr);
  grid-template-areas:
    "one"
    "two"
    "three"
    "five"
    "four"
    "six"
    "seven"
    "eight";
  padding-block: 2rem;
  width: 95%;
  margin-inline: auto;
}

.map {
  height: 550px;
  box-shadow: 2px 2px 2px 2px hsl(0, 0%, 70%);
  width: 100%;
}

.sessions {
  height: 550px;
  box-shadow: 2px 2px 2px 2px hsl(0, 0%, 70%);
  width: 100%;
}

.user-info {
  height: 550px;
  box-shadow: 2px 2px 2px 2px hsl(0, 0%, 70%);
  width: 100%;
}

.issue-info {
  height: 550px;
  box-shadow: 2px 2px 2px 2px hsl(0, 0%, 70%);
  width: 100%;
}

.top-platforms {
  box-shadow: 2px 2px 2px 2px hsl(0, 0%, 70%);
  width: 100%;
}

.browsers {
  box-shadow: 2px 2px 2px 2px hsl(0, 0%, 70%);
  width: 100%;
}

.livemap:nth-child(1) {
  grid-area: one;
}

.livemap:nth-child(2) {
  grid-area: two;
}

.livemap:nth-child(3) {
  grid-area: three;
}

.livemap:nth-child(4) {
  grid-area: four;
}

.livemap:nth-child(5) {
  grid-area: five;
}

.livemap:nth-child(6) {
  grid-area: six;
}

.livemap:nth-child(7) {
  grid-area: seven;
}

.livemap:nth-child(8) {
  grid-area: eight;
}

@media (min-width: 800px) {
  .livemap-grid {
    grid-template-areas:
      "one one one one"
      "two two two two"
      "two two two two"
      "three three three three"
      "three three three three"
      "five five five five"
      "five five five five"
      "four four six six"
      "four four six six"
      "seven seven seven seven"
      "eight eight eight eight";
  }
}

@media (min-width: 1200px) {
  .livemap-grid {
    grid-template-areas:
      "one one one one"
      "two two two two"
      "two two two two"
      "three three three four"
      "three three three four"
      "five five five six"
      "five five five six"
      "seven seven eight eight";
  }

  .map {
    height: 550px;
  }
}

It's a fair amount of CSS, but what it manages to do is very simple. We create our livemap-grid class, which will handle the layout of our dashboard. We set its display property to grid, add some padding and margins to the grid, and designate how we want it to handle the column layout.

By default, it will display each element (of which there will be 8) in a single column. We also set the grid-auto-columns property to minmax(0, 1fr). We do this so that the Wijmo controls that will live inside each of the sections of our grid will expand and shrink properly on-screen resizing, maintaining the full width of their containers.

We then set styles for each of the different sections of our grid, making them distinguishable from the page background. We also assign each of the child elements of the grid to an area, ensuring they are properly situated within our grid.

The final section of code will handle resizing and formatting the grid based on the screen's width. This will handle the layout of the dashboard on different devices and will adjust if a user decides to resize the window.

The final task we'll complete in this blog is creating the HTML that will render our CSS grid. Open up your app.component.html file and include the following:

<main class="livemap-grid">
  <div class="livemap load-info"></div>

  <div class="livemap map"></div>

  <div class="livemap user-info"></div>

  <div class="livemap sessions"></div>

  <div class="livemap issue-info"></div>

  <div class="livemap top-countries"></div>

  <div class="livemap top-platforms"></div>

  <div class="livemap browsers"></div>
</main>

This makes use of all the CSS classes that we had outlined within our app.component.css file. If you run your application, you should see something like this:

Now, this isn't very visually appealing, but it does follow the grid outline that we had set up in our CSS file (the current size of our screen is greater than 1200px in width, so we're getting the last layout in our CSS file).

In the next blog in this series, we'll incorporate the code that will display some information at the top of the dashboard (within the div using the load-info class) as well as our charts and gauges. See you there!

Ready to Create Custom Dashboards? Download Wijmo Today!