Skip to content

arlas-wui-toolkit / Exports

ARLAS-wui-Toolkit

Build Status npm version

ARLAS-wui-toolkit is the glue that brings the components and their contributors together in an Analytics board.

It's an Angular application that provides one configuration file where to declare : - the ARLAS-server collection - the analytics (components and contributors) - the timeline with shortcuts and datepicker - the share component - the tag component.

How to use in your Angular web application

  1. Install arlas-wui-toolkit in your Angular web application 

    $ npm install --save arlas-wui-toolkit

  2. Declare a config.json file in the src folder. Here an example of a config.json file.

  3. Import the ArlasToolKitModule in your application module

    @NgModule({imports: [ArlasToolKitModule]})
export class AppModule {}

    Once imported, this module will launch the ArlasStartupService that parses your config.json file and emits an event arlasIsUp if the configuration file is valid. Otherwise, a list of errors on this file will be plotted in a dialog window.

  4. In your bootstrap component you can inject the ArlasStartupService and subscribe to the arlasIsUp event.

    constructor(private arlasStartUpService: ArlasStartupService) {
    this.arlasStartUpService.arlasIsUp.subscribe(isUp => {
        if (isUp) {
        /* your code*/
        }
    });
}

  5. You can add your own component in your application and feed it with data using an arlas-web-contributor. Let's say a search bar. To do so, you need to register your contributor to a ArlasCollaborativeSearchService and a ArlasConfigService that are provided by the ArlasToolKitModule.

    Inject ArlasCollaborativeSearchService and ArlasConfigService in your bootstrap component and wait for arlasIsUp event to declare your contributor :

    constructor(private arlasStartUpService: ArlasStartupService, private collaborativeService: ArlasCollaborativeSearchService, private configService: ArlasConfigService) {
    this.arlasStartUpService.arlasIsUp.subscribe(isUp => {
        if (isUp) {
            const chipsSearchContributor = new ChipsSearchContributor('contributorId',
              sizeOnBackspaceBus,
              this.collaborativeService,
              this.configService);
            /* your code*/
        }
    });
}

  6. In your bootstrap component, add the html tags.

    <!-- Analytic board [groups] input is fed from the `config.json` file-->
<arlas-analytics-board [groups]="this.configService.getValue('arlas.web.analytics')"></arlas-analytics-board>

<!-- [timelineComponent] input is fed from the `config.json` file -->
<arlas-timeline [timelineComponent]="this.configService.getValue('arlas.web.components.timeline')"></arlas-timeline>

<!-- ... -->

Documentation

Check the documentation of components and services of ARLAS-wui-toolkit out.

Build

To build the project you need to have installed - Node version >= 16.3.0 - npm version >= 8.3.0 - Angular CLI version 13.1.2

$ npm install -g @angular/cli@13.1.2

Then, clone the project

$ git clone https://github.com/gisaia/ARLAS-wui-toolkit

Move to the folder

$ cd ARLAS-wui-toolkit

Install all the project's dependencies

$ npm install

Build the project with ng :

$ npm run build-release

The build library will be generated in the dist/arlas-wui-toolkit directory.

Versioning

We use our own x.y.z versioning schema, where :

  • x : Incremented as soon as the ARLAS-server API changes
  • y : Incremented as soon as a component inputs or outputs change or a new service is proposed.
  • z : Incremented as soon as the toolkit implementation receives a fix or an enhancement.

Authors

See also the list of contributors who participated in this project.

LICENSE

This project is licensed under the Apache License, Version 2.0 - see the LICENSE.txt file for details.