JSFiddle - React, Tailwind, and code Playground

by Iryna Kulchytska

HTML

<script src="http://www.flexmonster.com/flexmonster/flexmonster.js"></script>
<div id="pivot-content"></div>

JavaScript

flexmonster.embedPivotComponent("http://flexmonster.com/flexmonster/", "pivot-content", "100%", "600", {
    jsPivotCreationCompleteHandler: configureReport, 
    licenseKey: "Z557-0G1V94-4C1E-293S-0L1V-5H2T-0V4T-2W"
}, "html5", true);

function configureReport() {
	var report = {
    	dataSourceType: "csv",
        filename: "http://www.flexmonster.com/download/data.csv",
        rows: [
            { uniqueName: getUniqueName("Destination") },
            { uniqueName: getUniqueName("Color") },
            { uniqueName: "[Measures]"  }
        ],
        columns: [
            { uniqueName: getUniqueName("Category") },
            { uniqueName: getUniqueName("Country") }
        ],
    	measures: [
            { uniqueName: getUniqueName("Price", true), active: true, format: "currency" },
            { uniqueName: getUniqueName("Discount", true), active: true, format: "numleft"  }
        ],
        pages: [],
        formats: [{name: "currency", currencySymbol: "$", decimalPlaces: 2}, {name: "numleft", textAlign: "left"}]
    }
    flexmonster.setReport(report);
}

function getUniqueName(name, isMeasure, isYear, isMonth, isDay) {
    var uniqueName;
    if (isYear) {
        uniqueName = "[" + name + "].[Year]";
    }
    else if (isMonth) {
        uniqueName = "[" + name + "].[Month]";
    }
    else if (isDay) {
        uniqueName = "[" + name + "].[Day]";
    }
    else if (isMeasure) {
        uniqueName = "[" + name + "]";
    }
    else {
        uniqueName = "[" + name + "].[" + name + "]";
    }
    if(isMeasure) {
        uniqueName = "[Measures]." + uniqueName;
    }
    return uniqueName;
}