Distinct Count

Data source

by soso

HTML

<link rel="stylesheet" href="https://s3.amazonaws.com/flexmonster/2.3/demo.css">
<link rel="stylesheet" type="text/css" href="https://cdn.flexmonster.com/theme/orange/flexmonster.min.css" />
<script src="https://cdn.flexmonster.com/flexmonster.js"></script>

<button onclick="addDataBasicTypes()">Basic</button>
<button onclick="addDataPropertyTypes()">Property</button>
<button onclick="addDataHierarchyTypes()">Hierarchy</button>

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

JavaScript

let basicSlice = {
    rows: [
      { uniqueName: "Color" },
      { uniqueName: "City" },
      { uniqueName: "[Measures]" }
   ],
    columns: [
      { uniqueName: "Country" },
    ],
    measures: [
      {
        uniqueName: "Price",
        aggregation: "sum",
        active: false,
      }, 
      {
        uniqueName: "City",
        aggregation: "distinct count",
        active: true,
      },
      {
        uniqueName: "City Code",
        aggregation: "distinct count",
        active: true,
      }    ,
    ],
    expands: {
      expandAll: false,
      rows: [
        {
          tuple: [
            "color.[green]"
          ]
        },
      ]
    }
}
let propertySlice = {
  rows: [
    { uniqueName: "Color" },
    { uniqueName: "City" },
    { uniqueName: "[Measures]" }
  ],
  columns: [{
    uniqueName: "Country"
  }],
  measures: [{
    uniqueName: "Price",
    aggregation: "sum",
    active: false,
  }, 
             {
               uniqueName: "City",
               aggregation: "distinct count",
               active: true,
             },
             {
               uniqueName: "City Code",
               aggregation: "distinct count",
               active: true,
             },
            ]
};
let hierarchySlice = {
  rows: [
    { uniqueName: "Color" },
    //{ uniqueName: "City" },
  ],
  columns: [
    { uniqueName: "Geography" },
    { uniqueName: "[Measures]" }
  ],
  measures: [
    {
      uniqueName: "Price",
      aggregation: "sum",
      active: false,
    }, 
    {
      uniqueName: "City",
      aggregation: "distinct count",
      active: true,
    },
    {
      uniqueName: "City Code",
      aggregation: "distinct count",
      active: true,
    },
  ]
};
let pivot = new Flexmonster({
  container: "pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  toolbar: true,
  report: {
    dataSource: {
      data: getData()
    },
    slice: basicSlice
  }
});

function addDataHierarchyTypes() {
 ...