React Pivot Table for MS Analysis Services

import * as FlexmonsterReact from "react-flexmonster";
import "flexmonster/flexmonster.css";

function PivotTableDemo() {
  const report = {
    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: "$"
      }
    ]
  };

  return (
    <>
      <FlexmonsterReact.Pivot
        height={600}
        toolbar={true}
        report={report}
        beforetoolbarcreated={(toolbar) => {
          toolbar.showShareReportTab = true;
        }}
        shareReportConnection={{
          url: "https://olap.flexmonster.com:9500"
        }}
      />
    </>
  );
}

export default PivotTableDemo;

#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;
}