npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

arlas-wui-toolkit

v26.0.8

Published

Tool Kit Library for ARLAS wui web App

Downloads

2,116

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.