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));
  }

  // 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: false });
    }
    this.keys = temp; // invoke update in rb-multiselect
    this.initChart();

    this.calcFieldSelectKeys();
    // fetch all samples populated with according group
    this.getSamples();
  }

  getSamples(){
    let query = '/samples?status%5B%5D=validated&status=new&filters%5B%5D=%7B%22mode%22%3A%22in%22%2C%22field%22%3A%22material.group%22%2C%22values%22%3A%5B';
    let temp = '';
    this.keys.forEach(key =>{
      temp += key.active ? '%22' + key.id.split("%").join("%25") + '%22%2C': ""; // replace split().join() with replaceAll() 
    });
    if (temp === ''){
      this.countSamples('');
    }else{
      query = query + temp.substr(0, temp.length-3) + '%5D%7D&fields%5B%5D=material.group'; 
      this.fetchData(query, data => this.countSamples(data));
    }
  }

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

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

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

  // 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
              }
            }]
          }
        }
      });
    }
  }
}