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
|
||||
<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
|
||||
|
||||
@@ -8,97 +39,168 @@ necessary configuration, see this [page](https://github.com/Alfresco/alfresco-ng
|
||||
## Install
|
||||
|
||||
```sh
|
||||
npm install --save ng2-activiti-analytics
|
||||
```
|
||||
|
||||
#### Ng2-Charts
|
||||
|
||||
```sh
|
||||
npm install ng2-charts chart.js --save
|
||||
npm install ng2-activiti-analytics ng2-charts chart.js moment md-date-time-picker material-design-icons material-design-lite --save
|
||||
```
|
||||
|
||||
Also make sure you include these dependencies in your `index.html` file:
|
||||
|
||||
```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
|
||||
npm install moment --save
|
||||
```
|
||||
<!-- Moment js -->
|
||||
<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 -->
|
||||
<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
|
||||
|
||||
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
|
||||
|
||||
The component shows the list of all the available reports
|
||||
|
||||
```html
|
||||
<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
|
||||
**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 />
|
||||
**reportClick**: The event is emitted when the report in the list is selected<br />
|
||||
|
||||
| Name | Description |
|
||||
| --- | --- |
|
||||
|`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
|
||||
|
||||
No options.
|
||||
|
||||
## Basic usage example Activiti Analytics
|
||||
|
||||
The component shows the charts related to the reportId passed as input
|
||||
|
||||
```html
|
||||
<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
|
||||
**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
|
||||
**appId**: The application id<br />
|
||||
**reportId**: The report id<br />
|
||||
**debug**: Flag to enable or disable the Form values in the console log<br />
|
||||
|
||||
| Name | Description |
|
||||
| --- | --- |
|
||||
|`appId` | The application id |
|
||||
|`reportId` | The report id |
|
||||
|`debug` | Flag to enable or disable the Form values in the console log |
|
||||
|
||||
## Build from sources
|
||||
|
||||
Alternatively you can build component from sources with the following commands:
|
||||
|
||||
|
||||
```sh
|
||||
npm install
|
||||
npm run build
|
||||
@@ -110,7 +212,7 @@ npm run build
|
||||
$ npm run build:w
|
||||
```
|
||||
|
||||
### Running unit tests
|
||||
## Running unit tests
|
||||
|
||||
```sh
|
||||
npm test
|
||||
@@ -130,3 +232,17 @@ before performing unit testing.
|
||||
```sh
|
||||
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>
|
||||
</p>
|
||||
|
||||
### Node
|
||||
To correctly use this component check that on your machine is running Node version 5.0.0 or higher.
|
||||
## Prerequisites
|
||||
|
||||
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
|
||||
|
||||
```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
|
||||
* Alfresco Authentication Service
|
||||
```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">
|
||||
|
||||
```
|
||||
|
||||
*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
|
||||
|
||||
@@ -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
|
||||
.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
|
||||
|
||||
```html
|
||||
@@ -141,8 +130,8 @@ platformBrowserDynamic().bootstrapModule(AppModule);
|
||||
|
||||
| Name | Description |
|
||||
| --- | --- |
|
||||
| onSuccess | The event is emitted when the login is done |
|
||||
| onError | The event is emitted when the login fails |
|
||||
| `onSuccess` | The event is emitted when the login is done |
|
||||
| `onError` | The event is emitted when the login fails |
|
||||
|
||||
Attribute | Description |
|
||||
--- | --- |
|
||||
@@ -182,6 +171,7 @@ Alternatively you can bind to your component properties and provide values dynam
|
||||
```
|
||||
|
||||
#### Customize Validation rules
|
||||
|
||||
If needed it is possible customize the validation rules of the login
|
||||
form. You can add/modify the default rules of the login form.
|
||||
|
||||
|
||||
Reference in New Issue
Block a user