Conditional filters for multilevel hierarchies

Mapping configuration

by Flexmonster Pivot Table

HTML

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

<div>
  <p>
    This example demonstrates how
    <a
      href="https://www.flexmonster.com/doc/filter-by-condition/#conditional-filters-for-multilevel-hierarchies"
      target="_blank"
    >conditional filters work for multilevel hierarchies</a> in Flexmonster.
  </p>
  <p>
    Click buttons below to apply a specific filter and reveal an explanation of
    how it affects the report.
  </p>
</div>

<button onclick="showDescription('A'); setNotBegin('A')">not begin: "a"</button>
<button onclick="showDescription('B'); setNotBegin('B')">not begin: "b"</button>
<button onclick="showDescription('C'); setNotBegin('C')">not begin: "c"</button>
<button onclick="showDescription(null); setNotBegin(null)">Reset filter</button>

<div id="descriptions">
  <p id="A" style="display: none;">
    The <code>Austria</code> level is hidden because all of its children start
    with <code>"a"</code>, which does not satisfy the filter condition.<br />
    The <code>Argentina</code> level remains visible because one of its children
    (<code>Córdoba</code>) does not begin with <code>"a"</code> and therefore
    matches the filter.
  </p>

  <p id="C" style="display: none;">
    Some cities under <code>Argentina</code> and <code>Belgium</code> begin with
    <code>"c"</code>, which does not match the condition.<br />
    However, their parent levels do not start with <code>"c"</code>, so the
    parents pass the filter and all their children are displayed.
  </p>

  <p id="B" style="display: none;">
    The <code>Belgium</code> level is visible because all its children do not
    begin with <code>"b"</code>, which matches the condition.
  </p>
</div>

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

CSS

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

JavaScript

let pivot = new Flexmonster({
  container: "pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  width: "100%",
  height: 650,
  toolbar: true,
  report: {
    dataSource: {
      data: getData(),
    },
    slice: {
      rows: [{ uniqueName: "Geography" }],
      columns: [{ uniqueName: "[Measures]" }],
      measures: [
        {
          uniqueName: "Salary",
          aggregation: "sum",
        },
      ],
      drills: {
        rows: [
          {
            tuple: ["geography.[argentina]"],
          },
          {
            tuple: ["geography.[austria]"],
          },
          {
            tuple: ["geography.[belgium]"],
          },
        ],
      },
    },
  },
});

function getData() {
  return [
    {
      Country: {
        type: "string",
        hierarchy: "Geography",
      },
      City: {
        type: "string",
        hierarchy: "Geography",
        parent: "Country",
      },
    },
    {
      Country: "Austria",
      City: "Alpbach",
      Salary: 3200,
      Population: 2600,
    },
    {
      Country: "Austria",
      City: "Amstetten",
      Salary: 3500,
      Population: 23000,
    },
    {
      Country: "Austria",
      City: "Anif",
      Salary: 3400,
      Population: 4100,
    },
    {
      Country: "Argentina",
      City: "Azul",
      Salary: 1800,
      Population: 63000,
    },
    {
      Country: "Argentina",
      City: "Arrecifes",
      Salary: 1950,
      Population: 28000,
    },
    {
      Country: "Argentina",
      City: "Córdoba",
      Salary: 2000,
      Population: 1390000,
    },
    {
      Country: "Belgium",
      City: "Charleroi",
      Salary: 3900,
      Population: 201000,
    },
    {
      Country: "Belgium",
      City: "Chimay",
      Salary: 3600,
      Population: 9500,
    },
    {
      Country: "Belgium",
      City: "Courtrai",
      Salary: 3800,
     ...