npm package: @proginnova/pgi-pentaho-dashboards
Description: Library generated with [Angular CLI](https://github.com/angular/angular-cli) version 16.1.0.
Latest version: 1.0.0-alpha

# PgiPentahoDashboards

Library generated with [Angular CLI](https://github.com/angular/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:
```javascript
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.
```html
<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:
```html
<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: 
```javascript
{
	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.

```javascript
{
    "/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:
```html
<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/](http://www.proginnova.com/ "http://www.proginnova.com/")
- E-mail: [info@proginnova.com](mailto:info@proginnova.com)
- Jira: [https://proginnova.atlassian.net/jira/software/c/projects/PPD/issues](https://proginnova.atlassian.net/jira/software/c/projects/PPD/issues "https://proginnova.atlassian.net/jira/software/c/projects/PPD/issues")