AngularControls

Angular - Controls - NgxCharts

NgxCharts Component

This is a package used to create charts

Here’s a link to the vendor
https://www.npmjs.com/package/@swimlane/ngx-charts

Instructions are poor.

Installation
https://www.npmjs.com/package/@swimlane/ngx-charts

Sample
Chart.component.html

1
2
3
4
5
6
7
8
9
10
11
<ngx-charts-bar-vertical  *ngIf='isLoaded'
    [view]="[1000,400]"
    [results]="displayData"
    [legend]="false"
    [showXAxisLabel]="true"
    [showYAxisLabel]="true"
    [xAxis]="true"
    [yAxis]="true"
    [gradient]="true"
    >
</ngx-charts-bar-vertical>

Chart.component.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
import { Component, Input, OnInit } from '@angular/core';
import { Transaction } from '../transaction/transaction.model';
import { TransactionService } from '../transaction/transaction.service';

@Component({
  selector: 'app-chart',
  templateUrl: './chart.component.html',
  styleUrls: ['./chart.component.css']
})
export class ChartComponent implements OnInit {
  transactions: any[] | undefined; //This is the transactions coming from the API
  displayData: any[] = [];      // this is what I am graphing
  @Input() objectType: string | undefined;
  @Input() objectId: number | undefined; 
  isLoaded:boolean=false;

  options: any;

  constructor(
    private TransactionService: TransactionService,
  ) { 
  }

  ngOnInit(): void {
    this.getTransactions();
  }

  getTransactions() {
    this.TransactionService.getTransactionsByOidAndOtype(this.objectId!, this.objectType!)
      .subscribe(result => {
          this.transactions = result.model;
          //
          // we now have the transactions, build the graphic
          //
          this.buildGraphic();
      })
  }

  buildGraphic() {
    // here is how to map data coming from transactions
    // over to displayData with the correct names
    console.log ("transactions - ", this.transactions);
    this.transactions!.map(elem => this.displayData!.sort(this.order)
                                                    .push({name: elem.theDate.toLocaleString("en-US").substring(0,10), 
                                                          value: elem.amount})
                                                    )
 
    console.log ("displayData - ", this.displayData);
    this.isLoaded=true;
  }

  order(a:any, b:any) {
    return a.name < b.name ? -1 : (a.name > b.name ? 1 : 0);
  }

}

This is a basic component to create barcodes.

You pass it two variables: objectType and objectId

ngOnInit calls a function (getTransactions()) to get transactions based on objectType and objectId. This function will retrieve a set of transactions meant to be graphed.

Actually – ngx-chart will chart graphs {name, value), so an array has been setup {displayData: any[] = [];} to hold this data.

I use a statement like this

1
2
3
4
5
6
    this.transactions!.map(elem 
=> this.displayData!
.sort(this.order)
      		.push({name: elem.theDate.toLocaleString("en-US").substring(0,10), 
                    value: elem.amount})
                  )

This calls the map method – which does a loop – one per element.
The sort method is used to sort this elment.
The push method will convert the transaction into a {name, value} and add that into the displayData array.

After that I set {isLoaded = true} which populates the chart control

That’s the component, to integrate the component

vendor-details.component.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
:

import { BankAccountService } from 'src/app/bank-account/bank-account.service';

import { ChartComponent } from 'src/app/chart/chart.component';
:
export class VendorDetailsComponent implements OnInit {
:
  objectType: string;   // used by the chart control
:

  constructor(
:
  ) { 
:
    this.objectType="vendor";
  }

I think the BankAccountService contains integration hooks for the chart component. I needed it for other purposes.

Vendor-details.component.html

1
2
3
4
5
6
:
    <div class='theGrid'>
      <app-chart [objectType] ="objectType" [objectId]="id">
      </app-chart>
    </div>
:

That’s it! The html wants an objectType and objectId property – we pass it a couple of local properties. The control does the rest.

The Bank-account.module.ts had logic tieing it to the chart component. I have a task to centralize this, but for now this will work

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import { ChartComponent } from '../chart/chart.component';
import { NgxChartsModule } from '@swimlane/ngx-charts';
:

@NgModule({
  declarations: [
:
    ChartComponent,
  ],
  imports: [
:
    NgxChartsModule,
  ],
  exports: [
:
    ChartComponent,
  ]