open-science-observatory-ui/src/app/chart-components/treemap-highcharts/treemap-highcharts.component.ts

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

import * as  Highcharts from 'highcharts';
import More from 'highcharts/highcharts-more';
import Tree from 'highcharts/modules/treemap';
import Heatmap from 'highcharts/modules/heatmap';
import { TreemapHighchartsData } from '../../domain/treemap-highcharts-data';

More(Highcharts);
Tree(Highcharts);
Heatmap(Highcharts);

@Component({
  selector: 'app-treemap-highchart',
  templateUrl: './treemap-highcharts.component.html',
})

export class TreemapHighchartsComponent implements OnInit {

  @Input() chartTitle: string;
  @Input() chartData: TreemapHighchartsData[];
  @Input() color: string;

  Highcharts: typeof Highcharts = Highcharts;

  treeMapChartOptions = {};

  constructor() {}

  ngOnInit(): void {

    this.treeMapChartOptions = {
      chart: {
        type: 'treemap'
      },
      title: {
        text: this.chartTitle
      },
      tooltip: {
        enabled: true
      },
      credits: {
        enabled: false
      },
      colorAxis: {
        minColor: '#FFFFFF',
        maxColor: this.color,
        // maxColor: Highcharts.getOptions().colors[0]
      },
      series: [
        {
          type: 'treemap',
          layoutAlgorithm: 'squarified',
          data: this.chartData
        }
      ]
    };
  }

}