app.component.ts

import { AfterViewInit, Component, ElementRef, ViewChild } from '@angular/core';
import { nshmpHaz} from '@ghsc/nshmp-web-utils';
import { DisaggGraphView, Disaggregation, DisaggResponse } from '@nshmp/disagg-d3/src/disagg';
import { Collection } from '@nshmp/disagg-d3/src/mvc';

import disagg from '../assets/disagg-response.json';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent implements AfterViewInit {
  title = 'Disaggregation';
  disaggCollection = new Collection<Disaggregation>([]);
  data = disagg.response as nshmpHaz.disaggService.DisaggResponseData;
  view: DisaggGraphView;

  @ViewChild('example')
  el: ElementRef<HTMLElement>;

  constructor() {}

  ngAfterViewInit(): void {
    const response = new DisaggResponse(this.data);
    const disaggs = response.get<Collection<Disaggregation>>('disaggregations').data();
    this.disaggCollection.addAll(disaggs);
    this.disaggCollection.select(this.disaggCollection.data()[0]);

    this.view = new DisaggGraphView({
      el: this.el.nativeElement,
      collection: this.disaggCollection,
      bounds: this.bounds(this.data),
    });
  }

  bounds(data: nshmpHaz.disaggService.DisaggResponseData): number[][]{
    const totalComponent = data.disaggs[0].data.find(d => d.component === 'Total');
    return DisaggGraphView.calculateBounds(totalComponent.data);
  }

  onComponentChange(component: string): void {
    const componentData = this.disaggCollection
      .data()
      .find(d => d.get('component') === component);

   this.disaggCollection.select(componentData);
  }

}