How to Create Dashboard in Angular

Without Databrain: Building an Interactive Angular Reporting Dashboard

‍

Getting Started with Angular:

Let’s start the project by installing angular CLI and starter files by running the following commands on your terminal - 

npm install -g @angular/cli
ng new project-name

You can name the project to anything you like. For example, ng new first-dashboard. 

Make sure to choose routing and CSS when prompted during project creation.

Adding Font Awesome Icons:

We will be requiring a few icons for this project. So, Let’s install font awesome icons. 

ng add @fortawesome/angular-fontawesome

Import Font Awesome Icons:

Begin by importing the necessary icons from Font Awesome. In your component's TypeScript file (.ts), you'll want to bring in the icons you plan to use. This step sets the stage for displaying those icons in your component.

// Import Font Awesome icons
import { faUser } from '@fortawesome/free-solid-svg-icons';

// The icons have been imported successfully. To use them, they need to be exported from the component, like this:
export class YourComponent {
    // ...
    user = faUser; // Use the imported icon here
    // ...
}

HTML Rendering:

Now you can use the icons in the html as <fa-icon [icon]="user"></fa-icon>

Ensure that you use the exact same name as the icon that was exported in the previous code snippet. In this instance, the icon was exported under the name 'user'. 

To gain a clearer understanding, please proceed to the following section.

Creating The Sidebar:

Run ‘ng generate component sidebar’ (name of your component). It will create a folder and files required for that component

1. In the sidebar.component.ts we are importing the necessary icons from font awesome as below. 

import { Component } from '@angular/core';
import { 
  faHome,
  faChartBar,
  faComment,
  faBookmark,
  faUser,
} from '@fortawesome/free-solid-svg-icons';

@Component({
  selector: 'app-sidebar',
  templateUrl: './sidebar.component.html',
  styleUrls: ['./sidebar.component.css'],
})
export class SidebarComponent {
  home = faHome;
  chart = faChartBar;
  message = faComment;
  bookmark = faBookmark;
  user = faUser;
}

2. Add this html code to app/sidebar/sidebar.component.html

<nav class="vertical-navbar">
  <h1>Jessa</h1>
  <ul>
    <li>
      <a href="#">
        <fa-icon [icon]="home"></fa-icon>
        <span class="nav-text">Dashboard</span>
      </a>
    </li>
    <li>
      <a href="#">
        <fa-icon [icon]="chart"></fa-icon>
        <span class="nav-text">Analytics</span>
      </a>
    </li>
    <li>
      <a href="#">
        <fa-icon [icon]="message"></fa-icon>
        <span class="nav-text">Messages</span>
      </a>
    </li>
    <li>
      <a href="#">
        <fa-icon [icon]="bookmark"></fa-icon>
        <span class="nav-text">Collections</span>
      </a>
    </li>
  </ul>
</nav>

3. Add CSS to the app/sidebar/sidebar.component.css

ul {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 18px;
  font-weight: 300;
}

.nav-text {
  vertical-align: middle;
  margin-left: 10px;
}

.vertical-navbar {
  width: 250px;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  overflow-y: auto;
  background-color: white;
  box-shadow: 10px 0px 10px rgba(0, 0, 0, 0.2);
}

.vertical-navbar h1 {
  padding-left: 20px;
  font-weight: 400;
  color: black;
}

.vertical-navbar ul li {
  padding: 10px 0;
  padding-left: 20px;
}

.vertical-navbar ul li a {
  text-decoration: none;
  color: black;
  display: block;
}

.vertical-navbar ul li fa {
  margin-right: 10px; /* spacing between icon and text */
}

Now that we have completed the sidebar it looks like this:

Designing the Dashboard Component:

Run ‘ng generate component dashboard’( name of your component).it will create a folder and files required for that component

In the dashboard.component.ts we are importing the necessary icons from font awesome as below.

import { Component } from '@angular/core';
import {
  faPen,
  faPlus,
  faMoneyBill,
  faUsers,
  faClock,
  faBriefcase,
} from '@fortawesome/free-solid-svg-icons';

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.css'],
})
export class DashboardComponent {
  edit = faPen;
  create = faPlus;
  budget = faMoneyBill;
  project = faUsers;
  time = faClock;
  work = faBriefcase;
}

Add the below html code to app/dashboard/dashboard.component.html

<div class="dashboard">
  <!-- ######## Header #### -->
  <div class="header">
    <h1 class="dashboard-title">Application</h1>
    <div class="button-group">
      <button><fa-icon [icon]="edit"></fa-icon> Edit</button>
      <button class="blue_btn">
        <fa-icon [icon]="create"></fa-icon> Create
      </button>
    </div>
  </div>
  <!-- #### Header ##### -->

  <!-- ###### Tabs #### -->
  <div class="tabs">
    <div class="tab">All Files</div>
    <div class="tab">Shared</div>
    <div class="tab">File Requests</div>
  </div>
  <!-- ### Tabs #### -->

  <div class="wrapper">
    <div class="cards-container">
      <!-- Card 1 -->
      <app-card
        title="Budget"
        [value]="750.9"
        change="13%"
        iconName="budget"
      ></app-card>

      <!-- Card 2 -->
      <app-card
        title="New Projects"
        [value]="215"
        change="30%"
        iconName="project"
      ></app-card>

      <!-- Card 3 -->
      <app-card
        title="Total hours"
        [value]="1400"
        change="-5%"
        iconName="clock"
      ></app-card>

      <!-- Card 4 -->
      <app-card
        title="Work load"
        [value]="95"
        change="10%"
        iconName="briefcase"
      ></app-card>
    </div>

    <div class="applications-section">
      <h1>Applications</h1>
      <table>
        <tr>
          <th>Name</th>
          <th>Date</th>
          <th>Company</th>
          <th>Offer</th>
          <th>Meeting</th>
          <th></th>
        </tr>
      </table>
    </div>
  </div>
</div>

Add the below css code to the app/dashboard/dashboard.component.css

.dashboard {
  box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.2);
  padding: 20px;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.dashboard-title {
  margin: 0;
  font-size: 24px;
}

.button-group button {
  margin-left: 10px;
  padding: 10px 15px;
  border-radius: 12px;
  background: transparent;
  cursor: pointer;
}

.button-group button:nth-child(2) {
  background: blue;
  color: white;
}

.tabs {
  display: flex;
  gap: 20px;
  margin-bottom: 10px;
}

.tab {
  cursor: pointer;
  padding: 10px 15px;
  border-bottom: 2px solid transparent;
  font-weight: bold;
  color: #333;
}

.tab:hover {
  border-color: #007bff;
}

.tab.active {
  border-color: #007bff;
  color: #007bff;
}

.cards-container {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px;
}

.applications-section {
  background: white;
  box-shadow: 0px 5px 5px -5px rgba(0, 0, 0, 0.5);
  margin-top: 20px;
  padding: 20px;
}

.applications-section h1 {
  font-size: 24px;
  margin: 0;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px auto;
  background-color: #f5f5f5;
}

th, td {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

th {
  background-color: #4caf50;
  color: white;
}

tr:hover {
  background-color: #f2f2f2;
}

tr:nth-child(even) {
  background-color: #f2f2f2;
}

.action-cell {
  display: flex;
  align-items: center;
}

.action-cell button {
  background-color: #4caf50;
  color: white;
  border: none;
  padding: 5px 10px;
  cursor: pointer;
  margin-right: 15px;
}

.action-cell button:hover {
  background-color: #45a049;
}

.delete-icon {
  color: #f44336;
  font-size: 20px;
  cursor: pointer;
}

In the dashboard code, we've extracted the card section into a reusable component to reduce the code while improving the functionality and code readability.

Code for the Card Component

First, create a component named card with the following command

‘ng generate component card’. 

It will create a folder and files required for that component.

Add this code in the app/card/card.component.ts

// ts file
import { Component, Input } from '@angular/core';
import {
  IconDefinition,
  faMoneyBill,
  faUsers,
  faClock,
  faBriefcase,
} from '@fortawesome/free-solid-svg-icons';

@Component({
  selector: 'app-card',
  template: `
    <div class="card">
      <div class="card-header">
        {{title}}
      </div>
      <div class="card-body">
        <div class="card-value">
          {{value}}
        </div>
        <div class="card-change">
          {{change}} Since Last Month
        </div>
      </div>
      <div class="card-icon">
        <fa-icon [icon]="icon"></fa-icon>
      </div>
    </div>
  `,
  styleUrls: ['./card.component.css'],
})
export class CardComponent {
  @Input() title: string = '';
  @Input() value: number = 0;
  @Input() change: string = '';
  @Input() iconName: string = '';

  // Map the icon names to FontAwesome icons
  iconMappings: { [key: string]: IconDefinition } = {
    budget: faMoneyBill,
    project: faUsers,
    clock: faClock,
    briefcase: faBriefcase,
  };

  get icon(): IconDefinition {
    return this.iconMappings[this.iconName] || faMoneyBill; // Default to a specific icon if the name is not recognized
  }
}

If you are seeking clarification regarding the code provided above, please refer to the following explanations for a better understanding.

Component Decorator: This decorator, @Component, is used to define metadata for the component. It tells Angular how to create and use this component.

Selector: Specifies how this component is identified in HTML. In this case, it's <app-card>, meaning you can use this component in your HTML by placing <app-card></app-card>.

Template: Defines the HTML structure of the component. It contains a div with a title, value, change, and an icon.

StyleUrls: Points to an external CSS file for styling.

Class Definition: This is where the behavior and data for the component are defined.

@Input(): These are input properties. They allow data to be passed into the component from its parent component. In this component, there are four inputs: title, value, change, and iconName. These properties will be set when you use <app-card> in your HTML.

iconMappings: This is an object that maps iconName values to FontAwesome icons. It's used to associate the iconName input with a specific icon. For example, if you pass "budget" as iconName, it will use the faMoneyBill icon.

‍get icon(): This is a getter method. It returns the FontAwesome icon associated with the iconName. If the iconName is not recognized, it defaults to faMoneyBill.

Add the css code in the app/card/card.component.css

.card {
  display: flex;
  align-items: center;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  margin-right: 40px;
  border: 1px solid #ddd;
  width: 100%;
  max-width: 350px;
}

.card-content {
  flex: 1;
  padding: 16px;
}

.card-content h2 {
  font-size: 1.5rem;
  margin: 0;
}

.card-content h3 {
  font-size: 1.2rem;
  margin: 4px 0;
}

.card-content p {
  font-size: 1rem;
  margin: 8px 0;
}

/* Style for the card image */
.card-image {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 50%;
  margin-left: 20px;
  font-size: 48px;
}

.change {
  margin-right: 8px;
}

Now we have completed the dashboard component. Here’s how the sidebar and dashboard looks like:

Add this code to app.component.html

<div class="main-container">
  <app-sidebar></app-sidebar>
  <app-dashboard></app-dashboard>
</div>

The CSS for this component app.component.css - 

.main-container {
  display: flex;
}

app-sidebar {
  flex: 0 0 auto;
  width: 240px;
  background-color: #333;
  color: #fff;
}

app-dashboard {
  flex: 1;
  margin-left: 5px;
}

Hope you enjoyed this tutorial. See you in the next one!

‍

Related Read:

• What is Embedded Analytics? Types, Features & Tools
• A guide to building an embedded BI product in SaaS
• Best Javascript Chart Libraries to Try
• Best React Chart Libraries

Alternate Solution: With Databrain - Create Angular Dashboards in Minutes

1. Connecting DataBrain to Your Postgres Database:

To get the most out of your data, it's important to connect DataBrain to your active Postgres database. This ensures that you can seamlessly transfer and work with your data. 

Here's a simple guide to walk you through the process.

Step 1: Ensure Database Accessibility

Before connecting DataBrain to your Postgres database, make sure your database is active and can be accessed from the machine running DataBrain. 

The ability to access the database depends on your Postgres user privileges and network settings. 

You can easily check if DataBrain can connect to your database using the built-in check connection tool in the user interface(UI).

Step 2: Fill Up Connection Info

Now, let's provide the necessary information to establish the connection:

If you have multiple workspaces, choose one to work with. 

‍

• ‍Integration Name: Choose a name for this connection to help you identify it in DataBrain.
• Host: This is the hostname or IP address of your database server. You can usually find this information in your Postgres server's configuration file.
• Port: Postgres databases typically use port 5432, but it might be different based on your configuration. You can check the specific port in your Postgres configuration file.
• Database Name: This is the name of the Postgres database you want to connect to. You can find a list of databases by running the command "\\l" in the psql interface.
• Username: Provide the username used to access the database. If you're unsure, check with your database administrator or the person who set up the database.
• Password: This is the password associated with the provided username. Make sure to keep it secure.
• Schemas: By default, Postgres uses the "public" schema. If you're using other schemas, you can list them by running the command "\\dn" in the psql interface.
• Encryption: You have the option to enable SSL for secure connections. This is highly recommended for enhanced security. SSL encrypts data as it travels between DataBrain and your Postgres database.
• SSL Mode: Specify if you want to enable SSL. You can usually find the SSL mode setting in your Postgres configuration file. If your Postgres instance requires an extra layer of security, you may need to provide SSH details for secure connection.
• SSH Host: This is the SSH host endpoint, and DataBrain's IP should be whitelisted for access.
• ‍SSH Port: The default SSH port is 22.
• ‍Username: Provide the SSH username for authentication
• ‍Private Key: This is the private key used for SSH host authentication.

Make sure you have SSL/TLS set up for your Postgres database if encrypted connections are needed for DataBrain. 

By following these steps and providing the required information, you'll establish a secure and functional connection between DataBrain and your Postgres database. 

This connection empowers you to work with your data securely.

2. Create a Dashboard:

Creating a dashboard in Databrain is a straightforward process that helps you organize and present your data effectively. 

• ‍Create a Workspace: A workspace is like a project folder where you keep all your dashboards. With a Databrain account, you can have multiple workspaces to separate and manage different projects.
• ‍Create a Dashboard: Inside a workspace, you can create a dashboard. Think of a dashboard as a visual representation of your data. It's where you display information in a user-friendly way.
• ‍Create a Metric: Metrics are the building blocks of your dashboard. A metric can be a single value, a chart, or a table. You choose the type based on what your data needs to convey.

Here’s how to do it:

Creating a Metric in Databrain Dashboard: 

1. Access Your Databrain Workspace:

Log in to your Databrain account and navigate to the workspace where you want to create the dashboard. 

Workspaces are like project folders where you organize your dashboards and metrics.

2. Open or Create a Dashboard:

Inside your chosen workspace, you can either open an existing dashboard or create a new one. Dashboards are where you'll display your metrics.

3. Click on "Create Metric":

Within the selected dashboard, you'll find an option "Create Metric". Click on this to start creating your new metric.

4. Choose Metric Type:

Databrain offers different types of metrics. You can select from single values, charts, or tables based on what best suits your data presentation needs.

5. Define Metric Settings:

Depending on the type of metric you chose, you'll need to define settings like the title, data aggregation method (e.g., sum, average), and the specific data fields you want to display.

6. Data Visualization:

If you're creating a chart, you can further customize it by selecting the chart type (e.g., bar chart, line chart), and formatting options (e.g., colors, labels).

7. Apply Filters (If Needed):

You can add filters to the metric to display specific data subsets. For instance, you can filter data by date, category, or any relevant criteria.

8. Customize Appearance (If Desired):

You can customize the appearance of your metric to make it visually appealing. This might include adjusting fonts, colors, and other styling options.

9. Save Your Metric:

Once you've configured all the settings, make sure to save your metric. This ensures your work is stored and can be accessed later.

10. View Your Metric on the Dashboard:

Your newly created metric will now appear on the dashboard. You can arrange and organize it on the dashboard as needed.

By following these steps, you can easily create a metric in your Databrain dashboard, enabling you to visualize and present your data in a meaningful way.

3. Setup Angular:

Setting up Angular is important for integrating your Databrain dashboard. Here's what you need to do:

1. Install Angular CLI:

To get started with building your web application, you'll need the Angular CLI (Command Line Interface). 

If you haven't already installed it, run the command: `npm install -g @angular/cli`. This command installs Angular CLI on your computer.

2. Consider Permissions Errors:

If you encounter any permissions errors during installation, you might need to run the installation command with admin privileges. 

Use `sudo npm install -g @angular/cli` for that.

3. Create a New Angular Application:

Now, you can create a new Angular application by running: `ng new my-app`. 

This command initiates the process and will prompt you with several options. These options include whether to set up routing and your preferred styling choices. Choose the ones that suit your project and proceed.

This creates the foundation for your angular app.

4. Integrate Databrain Dashboard with Angular:

Integrating your Databrain dashboard into your Angular application is a crucial step in making your data accessible. Here's how:

‍Embed the Dashboard: Take the dashboard you created in Databrain and embed it into your Angular application. This allows users to see the dashboard live on your web app.

Here’s how to do it.

4. Integrating Databrain Dashboard into Your Angular Application:

1. Install the Required Package:

Start by running the command `npm install @databrainhq/plugin`. This command installs the package for Databrain into your project.

2. Update app.module.ts:

In your Angular project's `app.module.ts` file, add the following code to configure Databrain integration:

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA], // Add this line
})
export class AppModule { }

Here we have added the CUSTOM_ELEMENTS_SCHEMA in the first import and to the schemas as shown above

3. Update app.component.ts:

In your `app.component.ts` file, import the Databrain plugin with the following line of code:

import '@databrainhq/plugin/web';

4. Add Databrain Dashboard Component:

In your `app.component.html` file, include the Databrain Dashboard component by adding the following code:

<div>
  <dbn-dashboard
    token="d6862d6e-758e-4d7a-8d2a-8cecf8c5e9b6"
    dashboard-id="react-dashboard"
    disable-fullscreen
    is-hide-table-preview
    is-hide-chart-settings
    enable-download-csv
    enable-email-csv
    enable-multi-metric-filters
  ></dbn-dashboard>
</div>

Replace token and dashboard with actual values.

‍

5. Run the Application

After completing the integration, run your Angular application using the command `ng serve`. 

This command starts your application and ensures that your Databrain dashboard is up and running in your web browser.

By following these steps, you'll successfully integrate a Databrain dashboard into your Angular application, allowing you to present and interact with your data effectively.

5. Tweak the Dashboard:

Customizing your dashboard lets you tailor it to your specific needs and preferences. Here are few examples of customization you can do:

• ‍Drag and Drop: You can rearrange metrics on your dashboard by simply dragging and dropping them. This flexibility allows you to create a visually pleasing layout.
• ‍Change Colors: To match your brand or improve data visualization, you can change the colors of charts, including individual elements like bars in a bar chart.
• ‍User Permissions: You can choose whether users can modify the dashboard's metrics or not. This control ensures your data remains secure and that the dashboard serves its intended purpose.

6. Make The Dashboard Accessible:

Now that you've connected, created, integrated, and customized your dashboard, it's time to share it with your audience. Here's how:

While saving the dashboard to a workspace, you can select 'current user' or 'all users.' This decision determines who can access and view the dashboard.

By following these steps, you'll be able to create, customize, and share data-rich dashboards effectively, ensuring your data is both accessible and visually engaging.

I hope you like this tutorial and see you in the next one!

Make customer facing analytics your competitive advantage - Start Building

‍

Related Read:

• Self-Service Reporting: Benefits, Tools & How it Works
• Embedded Data Visualization: The What, Why, and Best Tools