From e58a5e721aa02a85c4e230525c929a476a7a6082 Mon Sep 17 00:00:00 2001 From: Mario Romano Date: Thu, 3 Nov 2016 18:13:01 +0000 Subject: [PATCH] #878 fix analytics component documentation and demo --- .../ng2-activiti-analytics/README.md | 220 +++++++++++++----- ng2-components/ng2-alfresco-login/README.md | 50 ++-- 2 files changed, 188 insertions(+), 82 deletions(-) diff --git a/ng2-components/ng2-activiti-analytics/README.md b/ng2-components/ng2-activiti-analytics/README.md index ad7db61552..133858421e 100644 --- a/ng2-components/ng2-activiti-analytics/README.md +++ b/ng2-components/ng2-activiti-analytics/README.md @@ -1,4 +1,35 @@ # Activiti Analytics Component for Angular 2 +

+ + travis + Status + + + travis + Status + + + Coverage Status + + + npm downloads + + + license + + + alfresco component + + + angular 2 + + + typescript + + + node version + +

## 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 - -``` -#### Moment + + -```sh -npm install moment --save -``` + + -Also make sure you include these dependencies in your `index.html` file: + + -```html - -``` - - -#### 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 - -``` - -#### 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 + ``` +*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 ``` +Example of an App that use Activiti Analytics List component : + +**main.ts** +```ts + +@Component({ + selector: 'activiti-analytics-demo', + template: ` +
+
+
+ +
+
+
` +}) + +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
-**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
+ +| 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 ``` +Example of an App that use Activiti Analytics component : + +**main.ts** +```ts + +@Component({ + selector: 'activiti-analytics-demo', + template: ` +
+
+
+ +
+
+
` +}) + +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
-**onError**: The event is emitted when an error occur during the loading
+ +| 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
-**reportId**: The report id
-**debug**: Flag to enable or disable the Form values in the console log
+ +| 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) diff --git a/ng2-components/ng2-alfresco-login/README.md b/ng2-components/ng2-alfresco-login/README.md index 86a1667861..dc98a2f6c4 100644 --- a/ng2-components/ng2-alfresco-login/README.md +++ b/ng2-components/ng2-alfresco-login/README.md @@ -31,19 +31,30 @@

-### 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 + + + + + + +``` + +*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 - - - - -``` - -## 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.