Angular Pivot Table for MS Analysis Services

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: "microsoft analysis services",
      proxyUrl: "https://olap.flexmonster.com:8085/",
      catalog: "Adventure Works DW Standard Edition",
      cube: "Adventure Works",
      binary: true,
    },
    slice: {
      rows: [
        {
          uniqueName: "[Product].[Product Categories]",
        },
      ],
      columns: [
        {
          uniqueName: "[Customer].[Country]",
        },
        {
          uniqueName: "[Date].[Month of Year]",
          caption: "Month",
        },
        {
          uniqueName: "[Measures]",
        },
      ],
      measures: [
        {
          uniqueName: "[Measures].[Internet Total Product Cost]",
          format: "currency",
        },
        {
          uniqueName: "[Measures].[Internet Average Sales Amount]",
          active: false,
          format: "currency",
        },
        {
          uniqueName: "[Measures].[Gross Profit]",
          active: false,
          format: "currency",
        },
      ],
      drills: {
        rows: [
          {
            tuple: ["[Product].[Product Categories].[Category].&[4]"],
          },
          {
            tuple: ["[Product].[Product Categories].[Subcategory].&[28]"],
          },
          {
            tuple: ["[Product].[Product Categories].[Subcategory].&[25]"],
          },
        ],
      },
      memberProperties: [
        {
          levelName: "[Product].[Product Categories].[Product]",
          properties: ["List Price", "Start Date"],
        },
      ],
    },
    options: {
      showMemberProperties: true,
    },
    formats: [
      {
        name: "",
        thousandsSeparator: ",",
        decimalSeparator: ".",
        decimalPlaces: 2,
      },
      {
        name: "currency",
        currencySymbol: "$",
      },
    ],
  };

  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>

#fm-pivot-view .fm-grid-view div.fm-level-0.fm-cell,
#fm-pivot-view .fm-grid-view div.fm-level-0.fm-cell.fm-total {
  background-color: #a7d6ae;
}

#fm-pivot-view .fm-grid-view div.fm-level-1.fm-cell,
#fm-pivot-view .fm-grid-view div.fm-level-1.fm-cell.fm-header,
#fm-pivot-view .fm-grid-view div.fm-level-1.fm-cell.fm-total {
  background-color: #bee8c5;
}

#fm-pivot-view .fm-grid-view div.fm-level-2.fm-cell,
#fm-pivot-view .fm-grid-view div.fm-level-2.fm-cell.fm-header,
#fm-pivot-view .fm-grid-view div.fm-level-2.fm-cell.fm-total {
  background-color: #e1f7e4;
}

#fm-pivot-view .fm-grid-layout .fm-grand-total {
  background-color: #f5f5f5 !important;
}

#fm-pivot-view .fm-grid-layout span.fm-hierarchy-link {
  color:  #0d0d0d !important;
}