Flexmonster - Pivot Table demo

Demos with toogles

by dpnminh

HTML

<link rel="stylesheet" href="https://s3.amazonaws.com/flexmonster/2.3/demo.css">
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdn.flexmonster.com/2.3/flexmonster.js"></script>
<div class="options-wrapper">
<div class="flex-options-container">
    <div class="header">
    Grid Toogles
    </div>
    <div class="flex-options" id="grid">
      <div class="flex-option">
        <div>showHeaders</div>
        <div class="actions" data="showHeaders">
          <button onclick="change(true)">ON</button>
          <button onclick="change(false)">OFF</button>
        </div>
      </div>
      <div class="flex-option">
        <div>fitGridlines</div>
        <div class="actions" data="fitGridlines">
          <button onclick="change(true)">ON</button>
          <button onclick="change(false)">OFF</button>
        </div>
      </div>
      <div class="flex-option">
        <div>showHierarchyCaptions</div>
        <div class="actions" data="showHierarchyCaptions">
          <button onclick="change(true)">ON</button>
          <button onclick="change(false)">OFF</button>
        </div>
      </div>
      <div class="flex-option">
        <div>showHierarchies</div>
        <div class="actions" data="showHierarchies">
          <button onclick="change(true)">ON</button>
          <button onclick="change(false)">OFF</button>
        </div>
      </div>
      <div class="flex-option">
        <div>showReportFiltersArea</div>
        <div class="actions" data="showReportFiltersArea">
          <button onclick="change(true)">ON</button>
          <button onclick="change(false)">OFF</button>
        </div>
      </div>
      <div class="flex-option">
        <div>showFilter</div>
        <div class="actions" data="showFilter">
          <button onclick="change(true)">ON</button>
          <button onclick="change(false)">OFF</button>
        </div>
      </div>
    </div>
  </div>
  <div class="flex-options-container">
    <div...

CSS

.header{
    text-transform: upper-case;
    font-size:14px;
}

.hide{
  visibility:hidden;
}

.flex-option{
  display:flex;
  align-items: center;
  padding: 0px 5px;
}

.flex-option .actions{
  padding-left: 3px;
}

.actions button{
  padding: 2px;
  font-size: 12px;
}

.options-wrapper{
  display:flex;
}

JavaScript

var pivot = $("#pivot-container").flexmonster({
  componentFolder: "https://cdn.flexmonster.com/2.3/",
  width: "100%",
  height: 430,
  toolbar: true,
  report: {
    dataSource: {
      filename: "data/data.csv"
    },
    slice: {
      columns: [{
        uniqueName: "Color"
      }],
      rows: [{
        uniqueName: "Country"
      }, {
        uniqueName: "[Measures]"
      }],
      measures: [{
        uniqueName: "Price",
        format: "currency"
      }, {
        uniqueName: "Discount",
        format: "currency"
      }],
    },
    formats: [{
      name: "currency",
      currencySymbol: "$",
      currencySymbolAlign: "left",
      thousandsSeparator: ",",
      decimalPlaces: 2
    }],
    conditions: [{
      formula: "if(#value < 2000, 'trueStyle')",
      measure: "Discount",
      trueStyle: {
        backgroundColor: "#CCFFCC",
      }
    }, {
      formula: "if(AND(#value > 2000, #value < 4000), 'trueStyle')",
      measure: "Discount",
      trueStyle: {
        backgroundColor: "#FFFF99",
      }
    }],
    options: {
      configuratorActive: false
    }
  }
});

function change(value, $event){

	var currTarget = this.event.currentTarget;
  var option = currTarget.parentElement.getAttribute('data');
  var category = currTarget.parentElement.parentElement.parentElement.getAttribute('id');  

    
  var otherBtn = (currTarget.innerText === "ON") ? currTarget.nextElementSibling : currTarget.previousElementSibling;
  currTarget.classList.add('hide');
  otherBtn.classList.remove('hide');
  var currOptions = pivot.getOptions() || {};
  console.log("option clicked: ", option);
  
  if (category !== "general"){
  	if (!currOptions[category]){
    	currOptions[category] = {};
    }
    currOptions[category][option] = value; 
  }
  else{
  	currOptions[option] = value; 
  }
  
  pivot.setOptions(currOptions);
  pivot.refresh();   
}