Measures on different positions

by Flexmonster Pivot Table

HTML

<script src="https://cdn.flexmonster.com/flexmonster.js"></script>

<div class="select-container compact">
  <span class="text">Show measures: </span>
  <select id="select">
    <option selected value="first">on the first position in columns</option>
    <option value="between">in between fields</option>
    <option value="last">on the last position in columns</option>
  </select>
</div>

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

CSS

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

JavaScript

const pivot = new Flexmonster({
  container: "pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  toolbar: true,
  report: {
    dataSource: {
      filename: "data/data.csv",
    },
    slice: {
      rows: [
        {
          uniqueName: "Category",
        },
      ],
      columns: [
        {
          uniqueName: "[Measures]",
        },
        {
          uniqueName: "Country",
          filter: {
            members: ["France", "Germany"],
          },
        },
        {
          uniqueName: "Color",
          filter: {
            members: ["red", "white"],
          },
        },
      ],
      measures: [
        {
          uniqueName: "Price",
          aggregation: "sum",
          format: "currency",
        },
        {
          uniqueName: "Quantity",
          aggregation: "sum",
        },
      ],
      expands: {
        columns: [
          {
            tuple: ["country.[france]"],
            measure: {
              uniqueName: "Price",
              aggregation: "sum",
            },
          },
        ],
      },
    },
    formats: [
      {
        name: "currency",
        currencySymbol: "$",
        decimalPlaces: 2,
      },
    ],
  },
});

document.getElementById("select").addEventListener("change", function () {
  const report = pivot.getReport();

  const measurePositions = {
    first: [
      {
        uniqueName: "[Measures]",
      },
      {
        uniqueName: "Country",
        filter: {
          members: ["France", "Germany"],
        },
      },
      {
        uniqueName: "Color",
        filter: {
          members: ["red", "white"],
        },
      },
    ],
    between: [
      {
        uniqueName: "Country",
        filter: {
          members: ["France", "Germany"],
        },
      },
      {
        uniqueName: "[Measures]",
      },
      {
        uniqueName: "Color",
       ...