sdm-dih-bridge/src/app/dots-chart/all-in-one-graph/all-in-one-graph.component.ts

import {Component, OnInit} from '@angular/core';

import {SdmDihService} from '../../sdm-dih.service';

@Component({
  selector: 'all-in-one-graph',
  templateUrl: './all-in-one-graph.component.html',
  styleUrls: ['./all-in-one-graph.component.scss'],
})
export class AllInOneGraphComponent implements OnInit {
  dataLoaded = false;
  data = [];
  layout = {
    height: '20rem',
    //width: '100%',
  };

  constructor(public sdmDihService: SdmDihService) {
    this.sdmDihService.dataLoads.subscribe(() => {
      this.processData();
      this.dataLoaded = true;
    });
  }

  ngOnInit(): void {
    this.processData();
    this.dataLoaded = true;
  }

  processData() {
    //TODO: parametrize the PARAM_TO_COMPARE
    const PARAM_TO_COMPARE = 'aggregated';
    const years = [];
    const regions = [];
    const colors = [];
    for (const yearData of Object.values<any[]>(this.sdmDihService.sdmData)) {
      for (const regionData of yearData) {
        years.push(regionData['TIME_STEP']);
        regions.push(regionData['MODEL']);
        colors.push(regionData[PARAM_TO_COMPARE]);
      }
    }
    const trace1 = {
      x: years,
      y: regions,
      mode: 'markers',
      marker: {
        size: 10,
        color: colors,
        colorscale: [0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1].map(
          (perc) => {
            return [perc, this.sdmDihService.perc2color(perc)];
          }
        ),
      },
      type: 'scatter',
    };
    this.data = [trace1];
  }
}