Vue Pivot Table themes

<template>
  <Pivot
    componentFolder="https://cdn.flexmonster.com/"
    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/theme/stripedblue/flexmonster.css";

// More themes:
// import "flexmonster/theme/stripedteal/flexmonster.min.css";
// import "flexmonster/theme/purple/flexmonster.min.css";
// import "flexmonster/theme/blackorange/flexmonster.min.css";
// import "flexmonster/theme/brightorange/flexmonster.min.css";
// import "flexmonster/theme/yellow/flexmonster.min.css";
// import "flexmonster/theme/green/flexmonster.min.css";
// import "flexmonster/theme/midnight/flexmonster.min.css";
// import "flexmonster/theme/macos/flexmonster.min.css";
// import "flexmonster/theme/softdefault/flexmonster.min.css";
// import "flexmonster/theme/lightblue/flexmonster.min.css";
// import "flexmonster/theme/dark/flexmonster.min.css";
// import "flexmonster/theme/teal/flexmonster.min.css";
// import "flexmonster/theme/orange/flexmonster.min.css";
// import "flexmonster/theme/old/flexmonster.min.css";

export default {
  name: "PivotComponent",
  components: {
    Pivot,
  },
  data() {
    return {
      report: {
        dataSource: {
          type: "csv",
          filename: "https://cdn.flexmonster.com/data/sales.csv",
        },
        slice: {
          rows: [
            {
              uniqueName: "Salesperson",
            },
            {
              uniqueName: "Payment Method",
            },
          ],
          columns: [
            {
              uniqueName: "Month",
              filter: {
                members: [
                  "month.[june]",
                  "month.[july]",
                  "month.[august]"
                ],
              },
            },
            {
              uniqueName: "[Measures]",
            },
          ],
          measures: [
            {
              uniqueName: "Revenue",
              aggregation: "sum",
            },
          ],
          sorting: {
            column: {
              type: "desc",
              tuple: [],
              measure: {
                uniqueName: "Revenue",
                aggregation: "sum",
              },
            },
          },
          expands: {
            rows: [
              {
                tuple: ["salesperson.[laszlo horvath]"],
              },
            ],
          },
        },
        formats: [
          {
            name: "",
            thousandsSeparator: ",",
            decimalSeparator: ".",
            decimalPlaces: 2,
            currencySymbol: "$",
            positiveCurrencyFormat: "$1",
            nullValue: "",
            textAlign: "right",
            isPercent: false,
          },
        ],
      },
    };
  },
  methods: {
    customizeToolbar(toolbar) {
      toolbar.showShareReportTab = true;
    },
  },
};
</script>