PgiPentahoDashboards

Library generated with Angular CLI version 16.1.0.

About

Embed pentaho dashboards using Pentaho CTools into angular project using cde-embed.js and RequireJS.

Supported use cases

• Public dashboards
• Input interaction with dashboards
• Simple url authentication via userid and password query parameters.
• Pending: interaction cross graphs.

Requierements

• Pentaho dashboard file .wcdf configured with the desire params.
• Pentaho public user with the following Operation Permissions enabled: -- Read Content
• Pentaho server with CORS configured

How to install

Run npm install -s @proginnova/pgi-pentaho-dashboards

Getting Started

In module.ts import the library:

imports: [
    ...
    PgiPentahoDashboardsModule
]

Using the library

Append the following script tag in the index.html to call the cde-embed.js script in order to establish communication with the Pentaho server.

<script type="text/javascript" src="<yourPentahoServerPath>/pentaho/plugin/pentaho-cdf-dd/api/renderer/cde-embed.js?userid=userName&amp;password=userPassword&amp;secure=true&amp;port=443"></script>

This allows authentication to the Pentaho Server and append more scripts from the cde-embed.js to use RequireJS.

How to use

In the component.html add the selector:

<pgi-pentaho-dashboards [id]="'content1'" [path]="'your/pentaho/path/dash.wcdf'" [params]="[IParamsPentaho]">
</pgi-pentaho-dashboards>

Inputs

Required:

• id: Id of the div element to render the dashboard, for every dashboard it should have a different name.
• path: The path of the dashboard in your Pentaho server from the root, example public/example/dash.wcdf.

Optional: The input params are optional, they're used in cases when one wants to apply filters to the dashboards outside of the Pentaho CTools components, and would permit the usage of elements like pure HTML, CSS, Javascript or external libraries like Angular Material, amongst others.

• params: An array of IParamsPentaho interface objects, the IParamsPentaho described as follows:

{
	paramName: string,
	params: any[]
}

For development usage

Proxy

Use a proxy configuration in developer mode, it won't work in production. To avoid CORS error in production, you must allow them in your Pentaho server.

{
    "/pentaho/*" : {
        "target": "http://<yourPentahoServer>:<port>/",
        "secure": false,
        "changeOrigin": false
    }
}

Set the proxy configuration in package.json: "start-proxy": "ng serve --proxy-config proxy-conf.json"

Change the path of the cde-embed.js script in the index.html to:

<script type="text/javascript" src="/pentaho/plugin/pentaho-cdf-dd/api/renderer/cde-embed.js?userid=userName&amp;password=userPassword&amp;port=433"></script>

Contact

• Website: http://www.proginnova.com/
• E-mail: [email protected]
• Jira: https://proginnova.atlassian.net/jira/software/c/projects/PPD/issues