Track-chart NPM

track-chart

A Trackchart is a visual representation of the sequence of stages and decisions needed to perform a process. Each step in the sequence may contains child stages and each step is noted within a circle shape. Steps are linked by connecting lines.

Alt text

Installation

To install this library, run:

$ npm install track-chart --save

Consuming your library

Once you have installed the library, you can import Track-Chart library in your application through your Angular AppModule:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

// Import your library
import { TrackChartModule,TrackChartConfig } from 'track-chart';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,

    // Specify your library as an import
    TrackChartModule.forRoot({
      FillColor: "rgb(68, 64, 60)",
      TextColor: "#ffffff",
      TitleColor: "#356066",
      UnFillColor: '#dddddd',
      UnFillNodeColor: "#ffffff",
      Font: "Times"
    } as TrackChartConfig),
    LibraryModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Once library is imported, you can use its components, directives and pipes in your Angular application:

<!-- You can now use your library component in app.component.html -->
<h1>
  {{title}}
</h1>
<trackChartComponent [model]="chartModel"></trackChartComponent>

chartModel is a public variable of AppComponent of type "TrackChart" with property as below.

import { TrackChart, DisplayType, Node, NodeType } from 'track-project';

export const SimpleModel = {
    StartNode: true,
    EndNode: true,
    CurrentState: "End",
    ChildState: "",
    Nodes: [
        {
            Name: "One",
            Title: "One",
            Type: NodeType.Start,
            Childeren: [
                {
                    Title: "Child",
                    Name: "Child",
                    Type: NodeType.Child,
                    Childeren: [],
                    Display: DisplayType.Text,
                    ImageURL: "",
                    DisplayText: "(a)",
                } as Node
            ],
            Display: DisplayType.Text,
            ImageURL: "",
            DisplayText: "1",
        } as Node,
        {
            Name: "End",
            Title: "End",
            Type: NodeType.End,
            Childeren: [],
            Display: DisplayType.Text,
            ImageURL: "",
            DisplayText: "2",
        } as Node
    ] as Node[],
    Title: "Simple - Tracking",
    ShowTitle: true
} as TrackChart;