React Pivot Table for MS Analysis Services

import React from "react";
import * as FlexmonsterReact from "react-flexmonster";

class PivotTableDemo extends React.Component {
  render() {
    return (
      <>
        <div className="App">
          <FlexmonsterReact.Pivot
            componentFolder="https://cdn.flexmonster.com/"
            height={600}
            toolbar={true}
            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: "$",
                },
              ],
            }}
            shareReportConnection={{
              url: "https://olap.flexmonster.com:9500",
            }}
            beforetoolbarcreated={(toolbar) => {
              toolbar.showShareReportTab = true;
            }}
          />
        </div>
      </>
    );
  }
}

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