JSON/CSV-based Angular Pivot Table

import { Component, viewChild } from "@angular/core";
import { FlexmonsterPivot, FlexmonsterPivotModule } from "ngx-flexmonster";

@Component({
  selector: "pivot-table-demo",
  imports: [FlexmonsterPivotModule],
  templateUrl: "./pivot-table-demo.component.html"
})
export class PivotTableDemo {
  readonly pivot = viewChild.required<flexmonsterpivot>("pivot");

  public report: Object = {
    dataSource: {
      type: "csv",
      filename: "https://cdn.flexmonster.com/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: "Median 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
      }
    ]
  };

  customizeToolbar(toolbar: Flexmonster.Toolbar) {
    toolbar.showShareReportTab = true;
  }

  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) + " 😃";
      }
    }
  }
}

<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
  [height]="600"
  [toolbar]="true"
  [report]="report"
  [customizeCell]="customizeCellFunction"
  (beforetoolbarcreated)="customizeToolbar($event)"
  [shareReportConnection]="{url: 'https://olap.flexmonster.com:9500'}"
/>