mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-31 17:38:48 +00:00
#878 fix analytics component documentation and demo
This commit is contained in:
Mario Romano
@@ -1,4 +1,35 @@
|
|||||||
# Activiti Analytics Component for Angular 2
|
# Activiti Analytics Component for Angular 2
|
||||||
|
<p>
|
||||||
|
<a title='Build Status Travis' href="https://travis-ci.org/Alfresco/alfresco-ng2-components">
|
||||||
|
<img src='https://travis-ci.org/Alfresco/alfresco-ng2-components.svg?branch=master' alt='travis
|
||||||
|
Status' />
|
||||||
|
</a>
|
||||||
|
<a title='Build Status AppVeyor' href="https://ci.appveyor.com/project/alfresco/alfresco-ng2-components">
|
||||||
|
<img src='https://ci.appveyor.com/api/projects/status/github/Alfresco/alfresco-ng2-components' alt='travis
|
||||||
|
Status' />
|
||||||
|
</a>
|
||||||
|
<a href='https://codecov.io/gh/Alfresco/alfresco-ng2-components'>
|
||||||
|
<img src='https://img.shields.io/codecov/c/github/Alfresco/alfresco-ng2-components/master.svg?maxAge=2592000' alt='Coverage Status' />
|
||||||
|
</a>
|
||||||
|
<a href='https://www.npmjs.com/package/ng2-activiti-analytics'>
|
||||||
|
<img src='https://img.shields.io/npm/dt/ng2-activiti-analytics.svg' alt='npm downloads' />
|
||||||
|
</a>
|
||||||
|
<a href='https://github.com/Alfresco/alfresco-ng2-components/blob/master/LICENSE'>
|
||||||
|
<img src='https://img.shields.io/hexpm/l/plug.svg' alt='license' />
|
||||||
|
</a>
|
||||||
|
<a href='https://www.alfresco.com/'>
|
||||||
|
<img src='https://img.shields.io/badge/style-component-green.svg?label=alfresco' alt='alfresco component' />
|
||||||
|
</a>
|
||||||
|
<a href='https://angular.io/'>
|
||||||
|
<img src='https://img.shields.io/badge/style-2-red.svg?label=angular' alt='angular 2' />
|
||||||
|
</a>
|
||||||
|
<a href='https://www.typescriptlang.org/docs/tutorial.html'>
|
||||||
|
<img src='https://img.shields.io/badge/style-lang-blue.svg?label=typescript' alt='typescript' />
|
||||||
|
</a>
|
||||||
|
<a href='https://www.alfresco.com/'>
|
||||||
|
<img src='https://img.shields.io/badge/style-%3E5.0.0-blue.svg?label=node%20version' alt='node version' />
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
|
|
||||||
## Prerequisites
|
## Prerequisites
|
||||||
|
|
||||||
@@ -8,97 +39,168 @@ necessary configuration, see this [page](https://github.com/Alfresco/alfresco-ng
|
|||||||
## Install
|
## Install
|
||||||
|
|
||||||
```sh
|
```sh
|
||||||
npm install --save ng2-activiti-analytics
|
npm install ng2-activiti-analytics ng2-charts chart.js moment md-date-time-picker material-design-icons material-design-lite --save
|
||||||
```
|
|
||||||
|
|
||||||
#### Ng2-Charts
|
|
||||||
|
|
||||||
```sh
|
|
||||||
npm install ng2-charts chart.js --save
|
|
||||||
```
|
```
|
||||||
|
|
||||||
Also make sure you include these dependencies in your `index.html` file:
|
Also make sure you include these dependencies in your `index.html` file:
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<script src="node_modules/chart.js/dist/Chart.bundle.min.js"></script>
|
|
||||||
```
|
|
||||||
|
|
||||||
#### Moment
|
<!-- Charts -->
|
||||||
|
<script src="node_modules/chart.js/dist/Chart.bundle.min.js"></script>
|
||||||
|
|
||||||
```sh
|
<!-- Moment js -->
|
||||||
npm install moment --save
|
<script src="node_modules/moment/min/moment.min.js"></script>
|
||||||
```
|
|
||||||
|
|
||||||
Also make sure you include these dependencies in your `index.html` file:
|
<!-- Date picker -->
|
||||||
|
<script src="node_modules/md-date-time-picker/dist/js/mdDateTimePicker.min.js"></script>
|
||||||
|
|
||||||
```html
|
|
||||||
<script src="node_modules/moment/min/moment.min.js"></script>
|
|
||||||
```
|
|
||||||
|
|
||||||
|
|
||||||
#### Material Design Date picker
|
|
||||||
|
|
||||||
```sh
|
|
||||||
npm install md-date-time-picker --save
|
|
||||||
```
|
|
||||||
|
|
||||||
Also make sure you include these dependencies in your `index.html` file:
|
|
||||||
|
|
||||||
```html
|
|
||||||
<script src="node_modules/md-date-time-picker/dist/js/mdDateTimePicker.min.js"></script>
|
|
||||||
```
|
|
||||||
|
|
||||||
#### Material Design Lite
|
|
||||||
|
|
||||||
The style of this component is based on [material design](https://getmdl.io/), so if you want to visualize it correctly you have to add the material
|
|
||||||
design dependency to your project:
|
|
||||||
|
|
||||||
```sh
|
|
||||||
npm install --save material-design-icons material-design-lite
|
|
||||||
```
|
|
||||||
|
|
||||||
Also make sure you include these dependencies in your `index.html` file:
|
|
||||||
|
|
||||||
```html
|
|
||||||
<!-- Google Material Design Lite -->
|
<!-- Google Material Design Lite -->
|
||||||
<link rel="stylesheet" href="node_modules/material-design-lite/material.min.css">
|
<link rel="stylesheet" href="node_modules/material-design-lite/material.min.css">
|
||||||
<script src="node_modules/material-design-lite/material.min.js"></script>
|
<script src="node_modules/material-design-lite/material.min.js"></script>
|
||||||
<link rel="stylesheet" href="node_modules/material-design-icons/iconfont/material-icons.css">
|
<link rel="stylesheet" href="node_modules/material-design-icons/iconfont/material-icons.css">
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
|
*If you need to have a large cross-browser compatibility make sure you include the polyfill necessary to Angular 2. More info at this
|
||||||
|
[page](/BROWSER-SUPPORT.md) .*
|
||||||
|
|
||||||
|
## Dependencies
|
||||||
|
|
||||||
|
The following component needs to be added to your systemjs.config.js :
|
||||||
|
|
||||||
|
- ng2-charts
|
||||||
|
- ng2-translate
|
||||||
|
- alfresco-js-api
|
||||||
|
- ng2-alfresco-core
|
||||||
|
- ng2-activiti-diagrams
|
||||||
|
- ng2-activiti-analytics
|
||||||
|
|
||||||
|
Please refer to the following example to have an idea of how your systemjs.config should look [systemjs.config.js](demo/systemjs
|
||||||
|
.config.js) .
|
||||||
|
|
||||||
## Basic usage example Activiti Analytics List
|
## Basic usage example Activiti Analytics List
|
||||||
|
|
||||||
The component shows the list of all the available reports
|
The component shows the list of all the available reports
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<analytics-report-list></analytics-report-list>
|
<analytics-report-list></analytics-report-list>
|
||||||
```
|
```
|
||||||
|
|
||||||
|
Example of an App that use Activiti Analytics List component :
|
||||||
|
|
||||||
|
**main.ts**
|
||||||
|
```ts
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'activiti-analytics-demo',
|
||||||
|
template: `
|
||||||
|
<div class="page-content">
|
||||||
|
<div class="mdl-grid">
|
||||||
|
<div class="mdl-cell mdl-cell--8-col task-column mdl-shadow--2dp">
|
||||||
|
<analytics-report-list></analytics-report-list>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>`
|
||||||
|
})
|
||||||
|
|
||||||
|
export class AnalyticsDemoComponent {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
@NgModule({
|
||||||
|
imports: [
|
||||||
|
BrowserModule,
|
||||||
|
CoreModule.forRoot(),
|
||||||
|
AnalyticsModule
|
||||||
|
],
|
||||||
|
declarations: [ AnalyticsDemoComponent ],
|
||||||
|
bootstrap: [ AnalyticsDemoComponent ]
|
||||||
|
})
|
||||||
|
export class AppModule { }
|
||||||
|
|
||||||
|
platformBrowserDynamic().bootstrapModule(AppModule);
|
||||||
|
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
#### Events
|
#### Events
|
||||||
**onSuccess**: The event is emitted when the report list are loaded<br />
|
|
||||||
**onError**: The event is emitted when an error occur during the loading<br />
|
| Name | Description |
|
||||||
**reportClick**: The event is emitted when the report in the list is selected<br />
|
| --- | --- |
|
||||||
|
|`onSuccess`| The event is emitted when the report list are loaded |
|
||||||
|
|`onError`| The event is emitted when an error occur during the loading |
|
||||||
|
|`reportClick`| The event is emitted when the report in the list is selected |
|
||||||
|
|
||||||
#### Options
|
#### Options
|
||||||
|
|
||||||
No options.
|
No options.
|
||||||
|
|
||||||
## Basic usage example Activiti Analytics
|
## Basic usage example Activiti Analytics
|
||||||
|
|
||||||
The component shows the charts related to the reportId passed as input
|
The component shows the charts related to the reportId passed as input
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<activiti-analytics [appId]="appId" [reportId]="reportId"></activiti-analytics>
|
<activiti-analytics [appId]="appId" [reportId]="reportId"></activiti-analytics>
|
||||||
```
|
```
|
||||||
|
|
||||||
|
Example of an App that use Activiti Analytics component :
|
||||||
|
|
||||||
|
**main.ts**
|
||||||
|
```ts
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'activiti-analytics-demo',
|
||||||
|
template: `
|
||||||
|
<div class="page-content">
|
||||||
|
<div class="mdl-grid">
|
||||||
|
<div class="mdl-cell mdl-cell--8-col task-column mdl-shadow--2dp">
|
||||||
|
<activiti-analytics [appId]="123" *ngIf="report" [reportId]="123"></activiti-analytics>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>`
|
||||||
|
})
|
||||||
|
|
||||||
|
export class AnalyticsDemoComponent {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
@NgModule({
|
||||||
|
imports: [
|
||||||
|
BrowserModule,
|
||||||
|
CoreModule.forRoot(),
|
||||||
|
AnalyticsModule
|
||||||
|
],
|
||||||
|
declarations: [ AnalyticsDemoComponent ],
|
||||||
|
bootstrap: [ AnalyticsDemoComponent ]
|
||||||
|
})
|
||||||
|
export class AppModule { }
|
||||||
|
|
||||||
|
platformBrowserDynamic().bootstrapModule(AppModule);
|
||||||
|
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
#### Events
|
#### Events
|
||||||
**onSuccess**: The event is emitted when the report parameters are loaded<br />
|
|
||||||
**onError**: The event is emitted when an error occur during the loading<br />
|
| Name | Description |
|
||||||
|
| --- | --- |
|
||||||
|
|`onSuccess` | The event is emitted when the report parameters are loaded |
|
||||||
|
|`onError` | The event is emitted when an error occur during the loading |
|
||||||
|
|
||||||
#### Options
|
#### Options
|
||||||
**appId**: The application id<br />
|
|
||||||
**reportId**: The report id<br />
|
| Name | Description |
|
||||||
**debug**: Flag to enable or disable the Form values in the console log<br />
|
| --- | --- |
|
||||||
|
|`appId` | The application id |
|
||||||
|
|`reportId` | The report id |
|
||||||
|
|`debug` | Flag to enable or disable the Form values in the console log |
|
||||||
|
|
||||||
## Build from sources
|
## Build from sources
|
||||||
|
|
||||||
Alternatively you can build component from sources with the following commands:
|
Alternatively you can build component from sources with the following commands:
|
||||||
|
|
||||||
|
|
||||||
```sh
|
```sh
|
||||||
npm install
|
npm install
|
||||||
npm run build
|
npm run build
|
||||||
@@ -110,7 +212,7 @@ npm run build
|
|||||||
$ npm run build:w
|
$ npm run build:w
|
||||||
```
|
```
|
||||||
|
|
||||||
### Running unit tests
|
## Running unit tests
|
||||||
|
|
||||||
```sh
|
```sh
|
||||||
npm test
|
npm test
|
||||||
@@ -130,3 +232,17 @@ before performing unit testing.
|
|||||||
```sh
|
```sh
|
||||||
npm run coverage
|
npm run coverage
|
||||||
```
|
```
|
||||||
|
|
||||||
|
## Demo
|
||||||
|
|
||||||
|
If you want have a demo of how the component works, please check the demo folder :
|
||||||
|
|
||||||
|
```sh
|
||||||
|
cd demo
|
||||||
|
npm install
|
||||||
|
npm start
|
||||||
|
```
|
||||||
|
|
||||||
|
## License
|
||||||
|
|
||||||
|
[Apache Version 2.0](https://github.com/Alfresco/alfresco-ng2-components/blob/master/LICENSE)
|
||||||
|
|||||||
@@ -31,19 +31,30 @@
|
|||||||
</a>
|
</a>
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
### Node
|
## Prerequisites
|
||||||
To correctly use this component check that on your machine is running Node version 5.0.0 or higher.
|
|
||||||
|
Before you start using this development framework, make sure you have installed all required software and done all the
|
||||||
|
necessary configuration, see this [page](https://github.com/Alfresco/alfresco-ng2-components/blob/master/PREREQUISITES.md).
|
||||||
|
|
||||||
## Install
|
## Install
|
||||||
|
|
||||||
```sh
|
```sh
|
||||||
npm install --save ng2-alfresco-login
|
npm install ng2-alfresco-login material-design-icons material-design-lite --save
|
||||||
```
|
```
|
||||||
|
|
||||||
Components included:
|
Also make sure you include these dependencies in your .html page:
|
||||||
|
|
||||||
* Alfresco Login Component
|
```html
|
||||||
* Alfresco Authentication Service
|
|
||||||
|
<!-- Google Material Design Lite -->
|
||||||
|
<link rel="stylesheet" href="node_modules/material-design-lite/material.min.css">
|
||||||
|
<script src="node_modules/material-design-lite/material.min.js"></script>
|
||||||
|
<link rel="stylesheet" href="node_modules/material-design-icons/iconfont/material-icons.css">
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
*If you need to have a large cross-browser compatibility make sure you include the polyfill necessary to Angular 2. More info at this
|
||||||
|
[page](/BROWSER-SUPPORT.md) .*
|
||||||
|
|
||||||
## Dependencies
|
## Dependencies
|
||||||
|
|
||||||
@@ -56,28 +67,6 @@ The following component needs to be added to your systemjs.config.js :
|
|||||||
Please refer to the following example to have an idea of how your systemjs.config should look this [systemjs.config.js](demo/systemjs
|
Please refer to the following example to have an idea of how your systemjs.config should look this [systemjs.config.js](demo/systemjs
|
||||||
.config.js) .
|
.config.js) .
|
||||||
|
|
||||||
## Style
|
|
||||||
The style of this component is based on material design, so if you want to visualize it correctly you have to add the material
|
|
||||||
design dependency to your project:
|
|
||||||
|
|
||||||
```sh
|
|
||||||
npm install --save material-design-icons material-design-lite
|
|
||||||
```
|
|
||||||
|
|
||||||
Also make sure you include these dependencies in your .html page:
|
|
||||||
|
|
||||||
```html
|
|
||||||
<!-- Google Material Design Lite -->
|
|
||||||
<link rel="stylesheet" href="node_modules/material-design-lite/material.min.css">
|
|
||||||
<script src="node_modules/material-design-lite/material.min.js"></script>
|
|
||||||
<link rel="stylesheet" href="node_modules/material-design-icons/iconfont/material-icons.css">
|
|
||||||
```
|
|
||||||
|
|
||||||
## Browser support
|
|
||||||
|
|
||||||
If you need to have a large cross-browser compatibility make sure you include the polyfill necessary for Angular 2, more info at this
|
|
||||||
[page](/BROWSER-SUPPORT.md) .
|
|
||||||
|
|
||||||
## Basic usage
|
## Basic usage
|
||||||
|
|
||||||
```html
|
```html
|
||||||
@@ -141,8 +130,8 @@ platformBrowserDynamic().bootstrapModule(AppModule);
|
|||||||
|
|
||||||
| Name | Description |
|
| Name | Description |
|
||||||
| --- | --- |
|
| --- | --- |
|
||||||
| onSuccess | The event is emitted when the login is done |
|
| `onSuccess` | The event is emitted when the login is done |
|
||||||
| onError | The event is emitted when the login fails |
|
| `onError` | The event is emitted when the login fails |
|
||||||
|
|
||||||
Attribute | Description |
|
Attribute | Description |
|
||||||
--- | --- |
|
--- | --- |
|
||||||
@@ -182,6 +171,7 @@ Alternatively you can bind to your component properties and provide values dynam
|
|||||||
```
|
```
|
||||||
|
|
||||||
#### Customize Validation rules
|
#### Customize Validation rules
|
||||||
|
|
||||||
If needed it is possible customize the validation rules of the login
|
If needed it is possible customize the validation rules of the login
|
||||||
form. You can add/modify the default rules of the login form.
|
form. You can add/modify the default rules of the login form.
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user