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

    // only neccesary if keys get preselected
    //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;
        }
      });
    }
    const datasets = this.updateGraph();
  }

  // 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
  updateGraph() {
    let nameList: string[] = [];
    let dataList: number[] = [];

    this.keys.forEach(key => {
      if (key.active) {
        nameList.push(key.id);
        dataList.push(key.count);
      }
    })
    this.myChart.data.labels = nameList;
    this.myChart.data.datasets[0].data = dataList;
    this.myChart.update();
  }

  // draw graph
  async initChart() {
    this.myChart = new Chart("myChart", {
      type: 'bar',
      data: {
        labels: [],
        datasets: [{
          label: 'Number of samples per group',
          data: [],
          backgroundColor: 'rgba(0, 86, 145, 1)',
          pointRadius: 4,
          pointHoverRadius: 7
        }]
      },
      options: {
        scales: {
          yAxes: [{
            ticks: {
              beginAtZero: true
            }
          }]
        }
      }
    });
  }
}