Treports-dashboard NPM

TReportsDashboard

Componente que disponibiliza a funcionalidade de dashboard do TReports em modo de visualizaão (viewer) de dashboards.

Passo a passo

Para utilizar o treports-dashboard criando uma nova aplicação angular, os seguintes comandos terão de ser executados por linha de comando:

1. Criação da nova aplicação angular

ng new test-app

>Would you like to add Angular routing? Y
>CSS

Obs: O projeto deve contar com um módulo de rotas (app-routing.module.ts),

2. Instalação das dependências

cd test-app
npm i treports-dashboard --registry https://npm.totvs.io/
npm i

3. Edição dos arquivos

Para que o componente tenha o comportamento esperado, alguns arquivos do projeto terão de ser alterados conforme explicitado abaixo.

app.component.html: O html que realiza a chamada do componente deverá referenciá-lo da seguinte forma:

	```html
	<div  style="height:600px">
		<tr-treports-dashboard
			[apiHost] = 'getApiHost()'
			[idDashboard] = 'getIdDash()'
			[accessTokenFn] = 'getAccessToken'
			(notifyError) = 'notifyError($event)'>
		</tr-treports-dashboard>
	</div>
	```

	 *apiHost*: Endereço do backEnd do TReports.

	*idDashboard*: Identificador do dashboard salvo no banco

	*accessToken*: função para recuperar o token de acesso aos serviços do dashboard (gerado pelo Rac).

	*notifyError*: Evento de manipulação de erros ocorridos na carga do dashboard.

app.component.ts: Os métodos que alimentam as diretivas do componente terão de ser implementados:

	```typescript
	import { Component, ViewEncapsulation } from '@angular/core';

	@Component({
		selector: 'app-root',
		encapsulation: ViewEncapsulation.None,
		templateUrl: './app.component.html',
		styleUrls: ['./app.component.css']
	})

	export class AppComponent {

		title = 'test-app';

		public getApiHost() {
			return 'http://localhost:7017';
		}
	
		public getIdDash() {
			return '1';
		}

		/*Esse método será chamado pelo componente TReports-Dashboard portanto se quiser
		que o contexto de execução seja do próprio TReports-Dashboard chame da forma con
		vencional utilizando o exemplo como abaixo:
		*/
		public getAccessToken() {
			return '';
		}

		/*Caso o método chamado pelo componente TReports-Dashboard necessite do contexto
		do componente pai, ou seja, do componente que instanciou e configurou o TReports-
		Dashboard, utilize o exemplo abaixo:
	
		public getAccessToken = () => {
			return '';
		}
		*/
	
		public notifyError(event) {
			alert('Erro ao carregar dash'); // Levantamento do erro.
		}

	}

	```

app.module.ts: O componente terá de ser referenciado no módulo da aplicação:

	```typescript
	import { BrowserModule } from '@angular/platform-browser';
	import { NgModule } from '@angular/core';
	import { TReportsDashboardModule } from 'treports-dashboard';
	import { AppRoutingModule } from './app-routing.module';
	import { AppComponent } from './app.component';

	@NgModule({
		declarations: [
			AppComponent
		],

		imports: [
			BrowserModule,
			AppRoutingModule,
			TReportsDashboardModule
		],
		providers: [],
		bootstrap: [AppComponent]
	})

	export class AppModule { }
	```

styles.css: Os do dashboard e do portinari devem ser importados pela aplicação, no arquivo styles.css, dentro da pasta src

	```css dashboard
	@import  url("../node_modules/treports-dashboard/styles/treports-dashboard.css");
	```
	```css Portinari
	@import  url("../node_modules/@portinari/style/css/po-theme-core.min.css");
	@import  url("../node_modules/@portinari/style/css/po-theme-default.min.css");
	@import  url("../node_modules/@portinari/style/css/po-theme-default-variables.min.css");
	```

Estilizando os itens do dashboard

	Utilizar o arquivo **styles.css**, dentro da pasta **src**
	```
	COMPONENTE TCARD

	Estilos do Portinari: 
	- Container mais externo do cartão:
		-- po-lg-12 
		-- po-mt-12 
		-- po-p-0
	- Corpo do cartão: 
		-- po-widget-xl
		-- po-p-2 
		-- po-widget-body
	- Título do cartão:
		-- po-widget-xl 
		-- po-text-left 
		-- po-info-label 
	- Tooltip do cartão:
		-- po-ml-1 
		-- po-font-text-large 
		-- po-icon 
		-- po-icon-info 
		-- po-field-icon
	- Subtítulo do cartão:
		-- po-mb-2 
		-- po-font-text 
		-- po-text-left
	- Dado calculado do cartão:
		-- po-mt-2 
		-- po-text-left 
		-- po-font-subtitle

	Estilos próprios do cartão:
	- Container mais externo do cartão:
		-- tcard-outer-div 
	- Título do cartão:
		-- tcard-title
	- Container do subtítulo do cartão:
		-- tcard-subtitle-wrapper
	- Subtítulo do cartão:
		-- tcard-subtitle
	```
	```
	COMPONENTE PIVOTGRID

	Estilos do Portinari: 
	- Container mais externo do PivotGrid
		-- po-grid-wrapper
	- Tabela do topo:
		-- po-grid
	- Cabeçalho da tabela do topo:
		-- po-grid-header-group
	- Linhas da tabela do topo:
		-- po-grid-row
	- Colunas da tabela do topo: 
		-- po-grid-title 
		-- po-grid-head-content

	- Tabela da esquerda:
		-- po-grid
	- Cabeçalho da tabela da esquerda:
		-- po-grid-header-group
	- Linhas da tabela da esquerda:
		-- po-grid-row
	- Colunas da tabela da esquerda: 
		-- po-grid-title 
		-- po-grid-head-content
		-- po-grid-head-right
	- Container da tabela da esquerda:
		-- po-grid-cell-freeze

	- Tabela referente aos dados:
		-- po-grid
	- Linhas da tabela referente aos dados:
		-- po-grid-row
	- Colunas da tabela referente aos dados:
		-- po-grid-cell 
		-- po-grid-cell-content

	- Célula de descrição
		-- po-grid-cell-freeze

	Estilos próprios do PivotGrid:
	- Container da barra de rolagem:
		-- tdashboard-pivot-scroll
	- Trilho da barra de rolagem:
		-- tdashboard-pivot-scroll-track
	- Barra de rolagem
		-- tdashboard-pivot-scroll-thumb
	```

tsconfig.json:

	Acesse o arquivo **tsconfig.json** na raiz de sua aplicação angular e adicione o mapeamento abaixo (dentro da tag **compilerOptions**) conforme exemplo abaixo:
  
	```
	"paths": {

		"globalize": [
			"node_modules/globalize/dist/globalize"
		],
	
		"globalize/*": [
			"node_modules/globalize/dist/globalize/*"
		],

		"cldr": [
			"node_modules/cldrjs/dist/cldr"
		],

		"cldr/*": [
			"node_modules/cldrjs/dist/cldr/*"
		],

		"jszip": [
			"node_modules/jszip/dist/jszip.min.js"
		]

	}
	```