NgCatalyst

An Angular component library of data visualizations

Angular Compatibility

If using with Angular 7 run command npm install ngcatalyst@0.2.5 --save

How to Use

Install the package

npm install ngcatalyst --save

Import Module into your App

Add NgCatalystModule to imports in src/app/app.module.ts:

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { AppComponent } from "./app.component";
 
import { NgcatalystModule } from "ngcatalyst";
 
@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    NgcatalystModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

Include Styles

In your angular.json

// In angular.json under architect > build > options > styles
// add "node_modules/ngcatalyst/lib/styles.css"
{
    "projects": {
        "your-project": {
            "architect": {
                "build": {
                    "options": {
                        "styles": [
                            "src/styles.css", 
                            "node_modules/ngcatalyst/lib/styles.css"
                        ]
                    }
                }
            }
        }
    }
}

Use in your App

In your app.component.html

<!-- Example with a bar chart and props defined in app.component.ts -->
<eikos-bar-chart 
    [data]="barData" 
    [xAxisLabel]="xAxisLabel" 
    [yAxisLabel]="yAxisLabel" 
    [propID]="barPropID"
    [colors]="barColors" 
    [title]="barTitle"
    (clickEvent)="clickEventEmit($event)">
</eikos-bar-chart>

Local Development

In terminal, use npm run dev to watch for file edits, and automatically re-package the project for local development and change detection.

Check out the examples repo

A repo containing an example app with all of the visualizations availble can be found here. Please clone that repo, npm install and run ng serve.