Vue Pivot Table for MS Analysis Services

<template>
  <Pivot
    height="600"
    toolbar
    v-bind:report="report"
    v-bind:shareReportConnection="{
      url: 'https://olap.flexmonster.com:9500',
    }"
    v-bind:beforetoolbarcreated="customizeToolbar"
  />
</template>

<script>
import Pivot from "vue-flexmonster/vue3";
import "flexmonster/flexmonster.css";

export default {
  name: "PivotComponent",
  components: {
    Pivot,
  },
  data() {
    return {
      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: "$",
          },
        ],
      },
    };
  },
  methods: {
    customizeToolbar(toolbar) {
      toolbar.showShareReportTab = true;
    },
  },
};
</script>

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