Customize the context menu to create new pivot in the pop-up

Customizing the context menu

by Flexmonster Pivot Table

HTML

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdn.flexmonster.com/flexmonster.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div id="pivot-container"></div>

<div id="dialog" title="Pivot details">
  <p>
    <b>Details</b>
    <br>
    Row: <span id="cell-row"></span><br>
    Column: <span id="cell-col"></span><br>
    <span id="cell-measure"></span>
  </p>
  <div id="pivot-container-1"></div>
</div>

CSS

@import url(https://cdn.flexmonster.com/assets/jsfiddle-styles.css);
@import url(https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css);

#dialog {
  width: 80%;
}

JavaScript

let pivot = new Flexmonster({
  container: "pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  width: "100%",
  height: 450,
  toolbar: true,
  customizeContextMenu: customizeFlexmonsterContextMenu,
  report: {
    dataSource: {
      filename: "data/data.csv"
    },
    slice: {
      rows: [{
        uniqueName: "Color"
      }, {
        uniqueName: "Country"
      }],
      columns: [{
        uniqueName: "Business Type"
      }, {
        uniqueName: "[Measures]"
      }],
      measures: [{
        uniqueName: "Price"
      }],
    },
    options: {
      configuratorActive: false
    }
  }
});

function customizeFlexmonsterContextMenu(items, data, viewType) {
  console.log(data);
  if (data.type == "value" && data.hierarchy !== null && data.measure !== null)
    items.push({
      label: "Open in New Pivot",
      handler: function() {
        openNewPivot(data);
      }
    });
  return items;
}

$("#dialog").dialog({
  width: document.body.clientWidth - 100,
  autoOpen: false,
  modal: true
});

let pivot1 = null;

let openNewPivot = function(cell) {
  console.log(">>", cell);

  let measure = cell.measure.uniqueName;
  let rowTuple = [];
  let rows = []
  for (let i = 0; i < cell.rows.length; i++) {
    rowTuple.push(cell.rows[i].uniqueName);
    rows.push(cell.rows[i].caption);
  }
  let columnTuple = [];
  let cols = [];
  for (let i = 0; i < cell.columns.length; i++) {
    columnTuple.push(cell.columns[i].uniqueName);
    cols.push(cell.columns[i].caption);
  }
  console.log(
    "Click on cell: " + "measure: " + measure + ", rows: " + rowTuple.join() + ", column: " + columnTuple.join()
  );

  $("#cell-row").text(rows.join(' / '));
  $("#cell-col").text(cols.join(' / '));
  $("#cell-measure").text(measure + ": " + cell.label);

  //the new pivot is created based on some new data in this sample
  //you can use info from cell to prepare the data set for...