Flexmonster - Themes

Demos

by Flexmonster Pivot Table

HTML

<link rel="stylesheet" type="text/css" href="https://cdn.flexmonster.com/theme/stripedblue/flexmonster.min.css" />
<script src="https://cdn.flexmonster.com/flexmonster.js"></script>

<div class="demo-toolbar" id="buttons-toolbar">
  <a class="btn-theme striped-lightblue btn-active" onclick="setTheme('https://cdn.flexmonster.com/theme/stripedblue/flexmonster.min.css', event)">
    <span class="theme-name-short">Sb</span>
    <span class="theme-name">Striped-Blue</span>
  </a>
  <a class="btn-theme striped-teal" onclick="setTheme('https://cdn.flexmonster.com/theme/stripedteal/flexmonster.min.css', event)">
    <span class="theme-name-short">ST</span>
    <span class="theme-name">Striped-Teal</span>
  </a>
  <a class="btn-theme purple" onclick="setTheme('https://cdn.flexmonster.com/theme/purple/flexmonster.min.css', event)">
    <span class="theme-name-short">Pu</span>
    <span class="theme-name">Purple</span>
  </a>
  <a class="btn-theme black-orange" onclick="setTheme('https://cdn.flexmonster.com/theme/blackorange/flexmonster.min.css', event)">
    <span class="theme-name-short">Bo</span>
    <span class="theme-name">Black-Orange</span>
  </a>
  <a class="btn-theme bright-orange" onclick="setTheme('https://cdn.flexmonster.com/theme/brightorange/flexmonster.min.css', event)">
    <span class="theme-name-short">Or</span>
    <span class="theme-name">Bright-Orange</span>
  </a>
  <a class="btn-theme yellow" onclick="setTheme('https://cdn.flexmonster.com/theme/yellow/flexmonster.min.css', event)">
    <span class="theme-name-short">Ye</span>
    <span class="theme-name">Yellow</span>
  </a>
  <a class="btn-theme green" onclick="setTheme('https://cdn.flexmonster.com/theme/green/flexmonster.min.css', event)">
    <span class="theme-name-short">Ge</span>
    <span class="theme-name">Green</span>
  </a>
  <a class="btn-theme midnight" onclick="setTheme('https://cdn.flexmonster.com/theme/midnight/flexmonster.min.css', event)">
    <span...

CSS

@import url(https://cdn.flexmonster.com/assets/jsfiddle-styles.css);

.demo-toolbar {
  padding: 7px;
}

.demo-toolbar .theme-name {
  margin-right: 7px;
  text-transform: none;
  display: none;
  color: #fff;
}

.demo-toolbar .btn-theme {
  width: 60px;
  margin: 7px 7px 7px 0px;
  border-radius: 5px;
  vertical-align: middle;
  padding: 7px;
  background-color: #F5F5F5;
  border: none;
  white-space: nowrap;
  text-transform: uppercase;
  cursor: pointer;
  display: inline-block;
  font-weight: normal;
  font-size: 14px;
  text-align: center;
  align-items: flex-start;
  box-sizing: border-box;
}

.demo-toolbar .btn-theme:hover {
  border: none;
}

.demo-toolbar .btn-theme.btn-active {
  width: 150px;
  position: relative;
}

.demo-toolbar .btn-theme.btn-active::after {
  content: '';
  position: absolute;
  top: 100%;
  left: calc(50% - 7px);
  width: 15px;
  height: 7px;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.demo-toolbar .btn-theme.btn-active .theme-name {
  display: inline-block;
}

.demo-toolbar .btn-theme .theme-name-short {
  color: #fff;
  display: inline-block;
  padding: 7px;
  border-radius: 5px;
}

.demo-toolbar .striped-lightblue .theme-name-short,
.demo-toolbar .striped-lightblue:hover,
.demo-toolbar .striped-lightblue.btn-active,
.demo-toolbar .striped-lightblue.btn-active::after {
  background: repeating-linear-gradient(to bottom,
      #0277BD,
      #0277BD 50%,
      #0090DE 50%,
      #0090DE);
}

.demo-toolbar .bright-orange .theme-name-short,
.demo-toolbar .bright-orange:hover,
.demo-toolbar .bright-orange.btn-active,
.demo-toolbar .bright-orange.btn-active::after {
  background: #FB7841;
}

.demo-toolbar .yellow .theme-name-short,
.demo-toolbar .yellow:hover,
.demo-toolbar .yellow.btn-active,
.demo-toolbar .yellow.btn-active::after {
  background: #FBC02D;
}

.demo-toolbar .green .theme-name-short,
.demo-toolbar .green:hover,
.demo-toolbar...

JavaScript

const pivot = new Flexmonster({
  container: "#pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  height: 600,
  toolbar: true,
  report: {
    dataSource: {
      type: "csv",
      filename: "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",
          format: "currency",
        },
      ],
      sorting: {
        column: {
          type: "desc",
          tuple: [],
          measure: {
            uniqueName: "Revenue",
            aggregation: "sum",
          },
        },
      },
      expands: {
        rows: [
          {
            tuple: ["salesperson.[laszlo horvath]"],
          },
        ],
      },
    },
    formats: [
      {
        name: "",
        thousandsSeparator: ",",
        decimalSeparator: ".",
        nullValue: "",
        textAlign: "right",
        isPercent: false
      },
      {
        name: "currency",
        decimalPlaces: 2,
        currencySymbol: "$",
        positiveCurrencyFormat: "$1"
      }
    ]
  },
  shareReportConnection: {
    url: "https://olap.flexmonster.com:9500",
  },
  beforetoolbarcreated: function (toolbar) {
    toolbar.showShareReportTab = true;
  },
});

function setTheme(cssUrl, event) {
  let prevThemeTags = getPrevTheme();
  
  let link = document.createElement("link");
  link.href = cssUrl;
  link.rel = "stylesheet";
  link.type = "text/css";
  link.onload = function () {
  ...