Member properties in JSON

Mapping configuration

HTML

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


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

CSS

.output {
  width: 80%;
  height: 300px;
  margin-left: auto;
  margin-right: auto;
  padding: 20px;
  background: rgba(242, 242, 242, 1);
  font-family: Menlo, Monaco, "Courier New", Courier, monospace;
  white-space: pre-wrap;
  font-size: 16px;
  font-weight: 400;
  overflow-y: scroll;
  margin-top: 20px;
}

p {
  font-size: 15px;
  line-height: 1.5;
  padding-right: 10px;
  padding-left: 10px;
}

a {
  color: #00a45a;
  text-decoration: none;
}

JavaScript

let pivot = new Flexmonster({
  container: "pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  toolbar: true,
  report: {
    options: {
      configuratorActive: true,
    },
    dataSource: {
      data: getData(),
      mapping: {
        "services.service.service_name": {
          caption: "Service name",
          folder: "Service",
        },
        "services.service.service_time": {
          caption: "Service time",
          folder: "Service",
        },
      },
    },
    slice: {
      rows: [{ uniqueName: "service.service_name" }],
      columns: [{ uniqueName: "[Measures]" }],
      measures: [{ uniqueName: "service.service_time" }],
    },
  },
})

function getData() {
  return [
  	{
      "company_id": 42,
      "unit_group_id": 664,
      "services": [
        {
          "service.service_name": "Abertura de conta",
          "service.service_time": 8,
        },
        {
          "service.service_name": "ConsĂłrcio",
          "service.service_time": 9,
        },
      ]
    }
  ]
}