Angular Pivot Table with Elasticsearch

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

@Component({
  selector: "pivotComponent",
  templateUrl: "./pivot.component.html",
  styleUrls: ["./pivot.component.css"],
})
export class PivotComponent implements OnInit {
  public report: Object = {
    dataSource: {
      type: "elasticsearch",
      node: "https://olap.flexmonster.com:9200",
      index: "australian_weather",
      mapping: {
        "Date": {
          caption: "Date",
          format: "yyyy",
          interval: "1y",
        },
        "Location": {
          caption: "Location",
        },
        "Min Temperature": {
          caption: "Min Temp",
        },
        "Max Temperature": {
          caption: "Max Temp",
        },
        "Rainfall": {
          caption: "Rainfall",
        },
        "Evaporation": {
          caption: "Evaporation",
        },
        "Sunshine": {
          caption: "Sunshine",
        },
        "Wind Speed": {
          caption: "Wind Speed",
        },
        "Rain Today": {
          caption: "Rain Today",
        },
        "Rain Tomorrow": {
          caption: "Rain Tomorrow",
        },
        "State.keyword": {
          caption: "State",
        },
        "Location.keyword": {
          caption: "Location",
        },
      },
    },
    slice: {
      rows: [
        {
          uniqueName: "State.keyword",
        },
        {
          uniqueName: "Location.keyword",
        },
      ],
      columns: [
        {
          uniqueName: "Date",
          filter: {
            query: {
              after: "2008-12-31",
            },
          },
        },
        {
          uniqueName: "[Measures]",
        },
      ],
      measures: [
        {
          uniqueName: "Min Temperature",
          aggregation: "min",
          grandTotalCaption: "Min Temp",
          format: "-10ws2q1oviodoa",
        },
        {
          uniqueName: "Max Temperature",
          aggregation: "max",
          grandTotalCaption: "Max Temp",
          format: "-10mkdp0yjbxs4e",
        },
        {
          uniqueName: "Wind Speed",
          aggregation: "average",
          grandTotalCaption: "Wind Speed",
          format: "-12d55123ugyhur",
        },
      ],
    },
    options: {
      grid: {
        showTotals: "off",
        showGrandTotals: "off",
      },
      showAggregationLabels: false,
    },
    conditions: [
      {
        formula: "#value > 42",
        measure: "Max Temperature",
        aggregation: "max",
        format: {
          backgroundColor: "#FFB74D",
          color: "#000000",
          fontFamily: "Arial",
          fontSize: "12px",
        },
      },
      {
        formula: "#value < 0",
        measure: "Min Temperature",
        aggregation: "min",
        format: {
          backgroundColor: "#81D4FA",
          color: "#000000",
          fontFamily: "Arial",
          fontSize: "12px",
        },
      },
    ],
    formats: [
      {
        name: "",
        decimalPlaces: 1,
      },
      {
        name: "-12d55123ugyhur",
        currencySymbol: " km/h",
        positiveCurrencyFormat: "1$",
        negativeCurrencyFormat: "-1$",
      },
      {
        name: "-10ws2q1oviodoa",
        currencySymbol: " °C",
        positiveCurrencyFormat: "1$",
        negativeCurrencyFormat: "-1$",
      },
      {
        name: "-10mkdp0yjbxs4e",
        currencySymbol: " °C",
        positiveCurrencyFormat: "1$",
        negativeCurrencyFormat: "-1$",
      },
    ],
  };

  constructor() {}

  ngOnInit(): void {}

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

<fm-pivot
  [height]="600"
  [toolbar]="true"
  [report]="report"
  [shareReportConnection]="{url: 'https://olap.flexmonster.com:9500'}"
  (beforetoolbarcreated)="customizeToolbar($event)">
</fm-pivot>