Viewing a simple dashboard

The simplest way you can use, is a flat and simple dashboard rendering.

1. Adding the dashboard1 component

To create a new component into your application, open a terminal and execute the following command from the root of your project.

ng g component dashboard1

This command creates the dashboard1 folder into app and setup the project to work with it.

Of course, you want your new page to be routed into your application, in this case on /dashboard1 path. To reach that goal, edit the app.module.ts file into the src/app path and the following routing.

const appRoutes: Routes = [
  ...,
  { path: 'dashboard1', component: Dashboard1Component }
];

In our basic case the main menu is defined directly into the app.component.html file into the src/app folder. To add the link, edit the html file and add the following source code in the menu area.

...<br/>
<a routerLink="/dashboard1">Login</a>

2. Developing the Dashboard1Component

Once done, it's time to develop the dashboard1 component.

2.1. Developing the HTML

Edit the dashboard1.component.html file into src/app/dashboard1 folder, as following.

<div>
  <pentaho-dashboard
    id = "dashboard1"
    pentahoPath = "/public/sample1.wcdf">
  </pentaho-dashboard>
</div>

Of course, the command above assumes you have a Pentaho dashboard deployed into the /public/sample1.wcdf path of your repository. If not, feel free to use the samples described into the appendix.

2.2. Developing the Typescript

Edit the dashboard1.component.ts file into src/app/dashboard1 folder, as following.

import { Router } from '@angular/router';
import { PentahoDashboardService } from 'pentaho-dashboard';

...

  constructor(
    private router: Router,
    private pentahoDashboardService: PentahoDashboardService) {

    if (this.pentahoDashboardService.isNotLoggedIn()) {
      this.router.navigate(['/login']);
    }

  }

3. Using the dashboard1

Once done, run the npm start command from a terminal and open a browser at http://localhost:4200. Clicking on the Dashboard1 link, this is what you are going to see.

Change the drop down menu to see the dashboard is updated as a regular Pentaho dashboard.

Try to change the /public/sample1.wcdf dashboard using Pentaho and refresh this page. You will see the application will change accordingly.