JSFiddle - React, Tailwind, and code Playground

by Flexmonster Pivot Table

HTML

<link rel="stylesheet" href="https://s3.amazonaws.com/flexmonster/2.3/demo.css">
<script src="https://cdn.flexmonster.com/flexmonster.js"></script>
<script src="https://cdn.amcharts.com/lib/5/index.js"></script>
<script src="https://cdn.amcharts.com/lib/5/map.js"></script>
<script src="https://cdn.amcharts.com/lib/5/geodata/usaLow.js"></script>
<script src="https://cdn.amcharts.com/lib/5/themes/Animated.js"></script>
<h1>Most popular names in different states</h1>
<p>Hint: filter Flexmonster data by year to check different generations</p>
<div style="display: flex; margin: 0 15px">
  <div id="amchart-container"></div>
  <div id="fm-container"></div>
</div>

CSS

#amchart-container {
  width: 80%;
  height: 550px;
}

h1 {
  text-align: center;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  margin-top: 10px;
  margin-bottom: 3px;
}

p {
  text-align: center;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  font-size: 14px;
  color: #767676;
}

JavaScript

var pivot = new Flexmonster({
  container: "fm-container",
  componentFolder: "https://cdn.flexmonster.com/",
  height: 550,
  width:"30%",
  licenseFilePath: "https://cdn.flexmonster.com/jsfiddle.charts.key",
  report: {
    dataSource: {
      type: "api",
      url: "https://olap.flexmonster.com:9500",
      index: "StateNames",
    },
    options: {
      showHeaders: false,
      grid: {
        showTotals: "off",
      },
    },
    slice: {
      reportFilters: [
        {
          uniqueName: "Year",
        },
      ],
      rows: [
        {
          uniqueName: "State",
        },
        {
          uniqueName: "Name",
        },
      ],
      columns: [
        {
          uniqueName: "[Measures]",
        },
      ],
      measures: [
        {
          uniqueName: "Id",
          aggregation: "distinctcount",
        },
      ],
      sorting: {
        column: {
          type: "desc",
          tuple: [],
          measure: {
            uniqueName: "Id",
            aggregation: "distinctcount",
          },
        },
      },
      expands: {
        expandAll: true,
      },
    },
    formats: [
      {
        name: "",
        thousandsSeparator: ",",
        decimalPlaces: 0,
      },
    ],
  },
  customizeCell: customizeCellFunction,
  reportcomplete: function () {
    pivot.off("reportcomplete")
    createChart()
  },
})

let root
function createChart() {
  pivot.getData({}, drawChart, updateChart)
}

function updateChart(rawData) {
  root.dispose()
  drawChart(rawData)
}

function prepareDataFunction(rawData) {
  let result = []
  const stateRecords = {}

  rawData.data.forEach((item) => {
    if (item.r1) {
      if (!stateRecords[item.r0]) {
        stateRecords[item.r0] = {
          id: `US-${item.r0}`,
          topName: item.r1,
          secondName: null,
          value: item.v0,
          value2: null,
        }
        result.push(stateRecords[item.r0])
      } else if (!stateRecords[item.r0].secondName) {
       ...