arlas-wui-toolkit

Tool Kit Library for ARLAS wui web App

Usage no npm install needed!

<script type="module">
  import arlasWuiToolkit from 'https://cdn.skypack.dev/arlas-wui-toolkit';
</script>

README

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.

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.