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>
<div id="popupOverlay" class='hideCustomPopup fm-modal-overlay fm-popup-modal-overlay'></div>
<div id="custom-popup" class='hideCustomPopup fm-popup fm-panel fm-toolbar-ui fm-ui' role="dialog" labelledby="fm-popup-title-text">
  <div class="fm-panel-content">
    <div class="fm-title-bar fm-ui-row">
      <div class="fm-title-text fm-ui-col" id="fm-popup-title-text">Chart colors</div>
      <div class="fm-toolbox fm-ui-col" style="clear: both;"><button type="button" class="fm-ui-btn fm-ui-btn-dark" id="fm-btn-apply" onclick="changeChartColors()">Apply</button><button type="button" class="fm-ui-btn" id="fm-btn-cancel" onclick="closeChartColorsPopup()">Cancel</button></div>
    </div>
    <div class="fm-popup-content">
    </div>
  </div>
</div>

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

CSS

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

select {
  border: 2px solid #333;
  background: #fff;
  color: #333;
  margin: 5px 0;
  display: inline-block;
  transition: all .3s;
  font-weight: normal;
  padding: 10px 10px;
  font-size: 14px;
  text-transform: uppercase;
  cursor: pointer;
}

#pivot-container #custom-popup .fm-popup-content {
  display: flex !important;
  flex-direction: column !important;
}

#pivot-container .fm-popup-content .palette {
  display: grid;
  grid-template-columns: 15% 85%;
  margin-bottom: 15px;
  align-items: center;
  justify-items: start;
  justify-content: center;
  overflow: hidden;
}

#pivot-container .fm-popup-content .palette .palette-container:hover,
#pivot-container .fm-popup-content .palette .palette-container[current] {
  cursor: pointer;
  border-radius: 5px;
  background-color: #e0e0e0;
}

#pivot-container .fm-popup-content .palette p {
  grid-column: 1;
  text-transform: uppercase;
  user-select: none;
  font-size: 14px;
}

#pivot-container .fm-popup-content .palette .palette-container {
  grid-column: 2;
}


#pivot-container .fm-popup-content .palette-container {
  display: flex;
  flex-direction: row;
  padding: 7px;
  column-gap: 5px;
  font-size: 16px;
}

#pivot-container .fm-popup-content .color-square {
  display: inline-block;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 5px;

}

.hideCustomPopup {
  display: none !important;
}

#popupOverlay {
  z-index: 199;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.7);
}

#custom-popup {
  width: 60%;
  left: 20%;
  top: 20%;
}

.fm-charts-color-1 {
  fill: transparent !important;
}

.fm-charts-color-2 {
  fill: transparent !important;
}

.fm-charts-color-3 {
  fill: transparent !important;
}

.fm-charts-color-4 {
  fill: transparent !important;
}

.fm-charts-color-5 {
  fill: transparent !important;
}

.fm-charts-color-6 {
  fill: transparent...

JavaScript

const colors = {
  "default": ["#EE232c", "#478ec8", "#FF8F00", "#4DBF5A", "#E042A6", "#59bbab", "#B96Bdd", "#EDC200", "#24C0DE"],
  "candy": ["#f768b8", "#ffc0d3", "#ffe198", "#90e9d7", "#44d0cd", "#00ccff", "#aaafe7", "#7a6da1", "#cb99cc"],
  "euphoria": ["#2c2585", "#3c56b7", "#7587d9", "#c29ee6", "#a569cb", "#a8278b", "#8f309b", "#663795", "#4f1f5b"],
  "rose garden": ["#202811", "#445f34", "#437155", "#a19d7a", "#cea19b", "#c76862", "#9d002b", "#7a0021", "#580017"],
  "retro": ["#026273", "#115a43", "#649568", "#fcbf49", "#d48600", "#b94a02", "#662100", "#915300", "#6c6d07"],
}

let currentColorPalette;
let legendColors = {};
let pieLegendColors = {};

var pivot = new Flexmonster({
  container: "pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  height: 700,
  toolbar: true,
  beforetoolbarcreated: customizeToolbar,
  report: {
    dataSource: {
      data: getData(),
    },
    options: {
      viewType: "charts"
    },
    slice: {
      rows: [{
        uniqueName: "Status"
      }],
      columns: [{
          uniqueName: "City"
        },
        {
          uniqueName: "[Measures]"
        }
      ],
      measures: [{
          uniqueName: "Quantity",
          aggregation: "max"
        },
        {
          uniqueName: "Price",
          aggregation: "min"
        },
      ]
    }
  }
});

function customizeToolbar(toolbar) {
  let tabs = toolbar.getTabs();
  toolbar.getTabs = function() {
    tabs.splice(8, 0, {
      id: "fm-tab-chart-colors",
      title: "Colors",
      handler: showChartColorsPopup,
      icon: paletteIcon
    });
    return tabs;
  }
}

pivot.on('reportcomplete', function() {
  generateColorPalettesHTML();
  if (!currentColorPalette) {
    setCurrentColorPalette('default');
  }
  mapMemberLabelsToColors();
  pivot.customizeChartElement(customizeFunction);
});

function changeChartColors() {
  mapMemberLabelsToColors();
  pivot.customizeChartElement(customizeFunction);
  closeChartColorsPopup();
}

function...