Viewing two interacting dashboards
In this example you will learn how to render two Pentaho dashboards in one Angular component. The magic here is that you will make them interactive: changing one filter of the first dashboard you will change the second accordingly. The development is similar to the initial example and the only changes is on the HTML of the component.
1. Adding the dashboard3
component
To create a new component into your application, follow the same instructions described in paragraph 1 for the simpler example. Of course, replacing dashboard1
with dashboard3
.
2. Developing the Dashboard3Component
Once done, it's time to develop the dashboard3
component.
2.1. Developing the HTML
Edit the dashboard3.component.html
file into src/app/dashboard3
folder, as following.
<div>
<pentaho-dashboard
id = "dashboard3"
pentahoPath = "/public/sample1.wcdf">
</pentaho-dashboard>
<pentaho-dashboard
id = "dashboard4"
pentahoPath = "/public/sample2.wcdf"
[params] = "['param2']"
masterDashboardId = "dashboard3"
[masterDashboardParams] = "['param1']">
</pentaho-dashboard>
</div>
2.2. Developing the Typescript
Edit the dashboard3.component.ts
file into src/app/dashboard3
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 dashboard3
Once done, run the npm start
command from a terminal and open a browser at http://localhost:4200
. Clicking on the Dashboard3
link, this is what you are going to see.
To see the interaction between the two dashboards, try to change the upper filter and you will see the two dashboards will change accordingly.
Try to change the /public/sample1.wcdf
dashboard or /public/sample2.wcdf
using Pentaho and refresh this page. You will see the application will change accordingly.