JSON/CSV based Angular Pivot Table

import { Component, OnInit, ViewChild } from "@angular/core";
import { FlexmonsterPivot } from "ng-flexmonster";

@Component({
  selector: "pivotComponent",
  templateUrl: "./pivot.component.html",
  styleUrls: ["./pivot.component.css"],
})
export class PivotComponent implements OnInit {
  @ViewChild("pivot") pivot!: FlexmonsterPivot;

  public report: Object = {
    dataSource: {
      type: "csv",
      filename: "data/happiness.csv",
      mapping: {
        "Year": {
          type: "string"
        }
      }
    },
    slice: {
      rows: [
        {
          uniqueName: "Region",
        },
        {
          uniqueName: "Country or region",
        },
      ],
      columns: [
        {
          uniqueName: "[Measures]",
        },
        {
          uniqueName: "Year",
        },
      ],
      measures: [
        {
          uniqueName: "Score",
          aggregation: "median",
          grandTotalCaption: "Average Happiness",
        },
      ],
    },
    conditions: [
      {
        formula: "AND(#value > 7.3, #value < 10)",
        format: {
          backgroundColor: "#f0c63e",
          color: "#000000",
          fontFamily: "Arial",
          fontSize: "12px",
        },
      },
      {
        formula: "AND(#value > 0, #value < 4.5)",
        format: {
          backgroundColor: "#f29c8d",
          color: "#000000",
          fontFamily: "Arial",
          fontSize: "12px",
        },
      },
    ],
    formats: [
      {
        name: "",
        decimalPlaces: 2,
      },
    ],
  };

  constructor() {}

  ngOnInit(): void {}

  onOpenLocalCSV() {
    this.pivot.flexmonster.connectTo({
      type: "csv",
      browseForFile: true,
    });
  }

  onLoadRemoteCSV() {
    let filename = prompt("Open remote CSV", "https://cdn.flexmonster.com/data/data.csv");
    if (filename != null) {
      this.pivot.flexmonster.connectTo({
        type: "csv",
        filename: filename,
      });
    }
  }

  onOpenLocalJSON() {
    this.pivot.flexmonster.connectTo({
      type: "json",
      browseForFile: true,
    });
  }

  onLoadRemoteJSON() {
    let filename = prompt("Open remote JSON", "https://cdn.flexmonster.com/data/data.json");
    if (filename != null) {
      this.pivot.flexmonster.connectTo({
        type: "json",
        filename: filename,
      });
    }
  }

  customizeCellFunction(cell: Flexmonster.CellBuilder, data: Flexmonster.CellData) {
    if (data.isGrandTotalColumn) {
      if ((data.value as number) < 5 && (data.value as number) >= 0) {
        cell.text = (data.value as number).toPrecision(3) + " ☹️";
      } else if ((data.value as number) >= 5 && (data.value as number) < 7) {
        cell.text = (data.value as number).toPrecision(3) + " 🙂";
      } else if ((data.value as number) >= 7 && (data.value as number) < 10) {
        cell.text = (data.value as number).toPrecision(3) + " 😃";
      }
    }
  }
}
[/file_snippet_language]
[/file_snippet]

[file_snippet extension=".html"]
[file_snippet_language language="html"]
<button (click)="onOpenLocalCSV()">Open local CSV</button>
<button (click)="onLoadRemoteCSV()">Load remote CSV</button>
<button (click)="onOpenLocalJSON()">Open local JSON</button>
<button (click)="onLoadRemoteJSON()">Load remote JSON</button>

<fm-pivot
  #pivot
  [componentFolder]="'https://cdn.flexmonster.com/'"
  [report]="report"
  [customizeCell]="customizeCellFunction">
</fm-pivot>