Skip to main content

Introduction

ProvenanceWidgets is a Javascript library of UI control elements that track and dynamically overlay a user's analytic provenance in situ and out of the box. These enhanced widgets track how often (frequently) and how recently a user has interacted with them and display this information in a visual overlay. The in situ overlays not only save screen space but also minimize the amount of time and effort needed to access the same information from elsewhere in the UI.

Getting Started​

What you'll need​

  • Node.js version 20.0 or above and npm version 10.0 or above:
    • When installing Node.js, you are recommended to check all checkboxes related to dependencies.

Quick Start​

For getting started quickly, clone one of our starter code repositories:

git clone https://github.com/ProvenanceWidgets/provenance-widgets-starter

Then, navigate to the project directory and install the dependencies:

cd provenance-widgets-starter

Finally, install the dependencies and start the development server:

npm install
npm run start

Manual Setup​

Installation​

npm install provenance-widgets

Configuration​

Add the following to your projects's angular.json file to apply PrimeNG's styles:

{
    "projects": {
        "<your-project>": {
            "architect": {
                "build": {
                    "options": {
                        // Add the following:

                        // Used by Provenance Widgets for deep object comparisons
                        "allowedCommonJsDependencies": [
                            // Your allowedCommonJsDependencies here
                            "lodash.isequal"
                        ],

                        // Provenance Widgets builds up on PrimeNG's components. Hence, it relies on PrimeNG, PrimeFlex and PrimeIcons for styling.
                        "styles": [
                            // Your styles here
                            "node_modules/primeicons/primeicons.css",
                            "node_modules/primeng/resources/themes/lara-light-blue/theme.css",
                            "node_modules/primeng/resources/primeng.min.css",
                            "node_modules/primeflex/primeflex.css"
                            ]
                    }
                }
            }
        }        
    }
}

Then, import the ProvenanceWidgetsModule in your app.module.ts file:

import { ProvenanceWidgetsModule } from 'provenance-widgets';
@NgModule({
  declarations: [
    // Your declarations here
  ],
  imports: [
    // Your imports here
    ProvenanceWidgetsModule
  ],
  providers: [
    // Your providers here
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }