JSFiddle - React, Tailwind, and code Playground
by Sundarapandiyan_pa
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>
JavaScript
var colorScheme = [
"#F8746D",
"#FA9172",
"#FBAE78",
"#FDD17F",
"#F7E683",
"#DBE081",
"#C3D980",
"#9FCF7E",
"#7DC57C",
"#68BF7B"
]
var minValue = -50;
var maxValue = 0;
function onReportComplete() {
pivot.getData({}, function(result) {
minValue = Number.MAX_VALUE;
maxValue = Number.MIN_VALUE;
result.data.forEach(function(item) {
if (item.r0 && item.c0 && item.v0) { // skip totals and empty values
minValue = Math.min(minValue, item.v0);
maxValue = Math.max(maxValue, item.v0);
}
});
alert(maxValue);
pivot.refresh();
});
}
function customizeCellFunction(cell, data) {
if (minValue == 0 && maxValue == 0) {
return;
}
if (data && data.type == "value" && !data.isTotal) {
cell.style["background-color"] = getColorFromRange(data.value);
}
}
function getColorFromRange(value) {
if (isNaN(value)) {
value = minValue;
}
value = Math.max(minValue, Math.min(value, maxValue));
var perc = (minValue + value) / maxValue;
var colorIdx = Math.round((colorScheme.length - 1) * perc);
return colorScheme[colorIdx];
}
alert( getColorFromRange(data.value));
return;
var pivot = new Flexmonster({
container: "pivot-container",
componentFolder: "https://cdn.flexmonster.com/",
width: "100%",
height: 600,
toolbar: true,
customizeCell: customizeCellFunction,
reportcomplete: onReportComplete,
report: {
dataSource: {
filename: "data/sales.json"
},
slice: {
rows: [{
uniqueName: "Month"
}, {
uniqueName: "[Measures]"
}],
columns: [{
uniqueName: "Category",
levelName: "Product Name",
filter: {
members: [
"category.[condiments].[bbq sauce]",
"category.[breakfast cereals].[corn flakes]",
"category.[confectionery]",
"category.[bakery].[chocolate biscuits]",
"category.[fruit preserves].[apple jam]",
"category.[bakery].[apple...