definma-ui/src/app/home/home.component.ts

import { Component, OnInit } from '@angular/core';
import { LoginService } from '../services/login.service';
import { ApiService } from '../services/api.service';
import { Chart } from 'chart.js';


interface KeyInterface {
  id: string;
  count: number;
  active: boolean;
}

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {

  keys: KeyInterface[] = [];
  isActiveKey: { [key: string]: boolean } = {};  // object to check if key is currently active
  myChart: Chart;

  constructor(
    public login: LoginService,
    public api: ApiService
  ) { }

  ngOnInit() {
    // fetch all available groups  
    this.fetchData('/material/groups', data => this.createGroup(data));
    //console.log(this.login.username);
  }

  // api access with callback
  async fetchData(URL: string, processor: any) {
    this.api.get(URL, (sData, err, headers) => {
      processor(sData);
    });
  }

  // Fill interface with data
  createGroup(data: any) {
    let temp: KeyInterface[] = [];

    for (var i = 0; i < data.length; i++) {
      temp.push({ id: data[i], count: 0, active: true });
    }
    this.keys = temp; // invoke update in rb-multiselect
    this.calcFieldSelectKeys();
    // fetch all samples populated with according group
    this.fetchData('/samples?status%5B%5D=validated&status=new&sort=_id-asc&fields%5B%5D=material.group', data => this.countSamples(data));
  }

  // loop through samples and count
  countSamples(data: any) {
    for (var i = 0; i < data.length; i++) {
      this.keys.forEach(key => {
        if (key.id === data[i].material.group) {
          key.count += 1;
        }
      });
    }
    this.initChart();
  }

  // preset select
  calcFieldSelectKeys() {
    this.keys.forEach(key => {
      this.isActiveKey[key.id] = key.active;
    });
  }

  // update keys based on select
  updateGroups(event: any) {
    this.keys.forEach(key => {
      if (event.hasOwnProperty(key.id)) {
        key.active = event[key.id];
      }
    });
    this.myChart.destroy();
    this.initChart();
  }

  // get data for graph based on active keys
  async getData() {
    let nameList: string[] = [];
    let dataList: number[] = [];

    this.keys.forEach(key => {
      if (key.active) {
        nameList.push(key.id);
        dataList.push(key.count);
      }
    })
    return { names: nameList, count: dataList };
  }

  // draw graph
  async initChart() {
    const data = await this.getData();

    const canvas = document.getElementById('myChart') as HTMLCanvasElement;
    const width = canvas.clientWidth;
    const height = canvas.clientHeight;
    const ctx = canvas.getContext('2d');

    var img = new Image(width, height);
    img.src = "/assets/imgs/supergraphic.svg";
    img.onload = () => {
      const fillPattern = ctx.createPattern(img, 'no-repeat');

      this.myChart = new Chart("myChart", {
        type: 'line',
        data: {
          labels: data.names,
          datasets: [{
            label: 'Number of samples per group',
            data: data.count,
            backgroundColor: fillPattern,
            pointRadius: 4,
            pointHoverRadius: 7
          }]
        },
        options: {
          scales: {
            yAxes: [{
              ticks: {
                beginAtZero: true
              }
            }]
          }
        }
      });
    }
  }
}