JSFiddle - React, Tailwind, and code Playground

by saes

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.common.min.css">
<script src="http://cdn.kendostatic.com/2014.3.1411/js/kendo.all.min.js"></script>
<div id="chart" style="margin-right:50px;"></div>
<script id="jsTemplate">
    var nssFormatToStorageUnit = function(value, decimalValue) {

    if (value === null) {
        return 'N/A';
    }
    else {
        var b = parseInt(value);
        var s = ['byte', 'bytes', 'KB', 'MB', 'GB', 'TB', 'PB'];
        var toFixed = "n";
        if (decimalValue != null) {
            toFixed = toFixed + decimalValue;
        }

        if (isNaN(b) || b === 0) {
            return '0 ' + s[0];
        }
        if (Math.abs(b) == 1) {
            return kendo.toString(b, toFixed) + ' ' + s[0];
        }
        if (Math.abs(b) < 1024) {
            return kendo.toString(b, toFixed) + ' ' + s[1];
        }
        if (Math.abs(b) < 1048576) {
            return kendo.toString((b / 1024), toFixed) + ' ' + s[2];
        }
        if (Math.abs(b) < 1073741824) {
            return kendo.toString((b / 1048576), toFixed) + ' ' + s[3];
        }
        if (Math.abs(b) < 1099511627776) {
            return kendo.toString((b / 1073741824), toFixed) + ' ' + s[4];
        }
        if (Math.abs(b) < 1125899906842624) {
            return kendo.toString((b / 1099511627776), toFixed) + ' ' + s[5];
        }
        else {
            return kendo.toString((b / 1125899906842624), toFixed) + ' ' + s[6];
        }
    }
};
</script>

JavaScript

var dsData = 
    {
        "TopFTGHistory":[
		    {"Timestamp":"\/Date(1433253490173)\/","Usage":112866084310,"FileTypeGroup":"Archive Files"},
		    {"Timestamp":"\/Date(1433253490173)\/","Usage":53376969,"FileTypeGroup":"Audio Files"},
		    {"Timestamp":"\/Date(1433271912693)\/","Usage":112866084310,"FileTypeGroup":"Archive Files"},
		    {"Timestamp":"\/Date(1433271912693)\/","Usage":53376969,"FileTypeGroup":"Audio Files"},
		    {"Timestamp":"\/Date(1433358317100)\/","Usage":112866084310,"FileTypeGroup":"Archive Files"},
		    {"Timestamp":"\/Date(1433358317100)\/","Usage":53376969,"FileTypeGroup":"Audio Files"},
		    {"Timestamp":"\/Date(1433444726947)\/","Usage":112866084310,"FileTypeGroup":"Archive Files"},
		    {"Timestamp":"\/Date(1433444726947)\/","Usage":53376969,"FileTypeGroup":"Audio Files"},
		    {"Timestamp":"\/Date(1433534462110)\/","Usage":112866084310,"FileTypeGroup":"Archive Files"},
		    {"Timestamp":"\/Date(1433534462110)\/","Usage":53376969,"FileTypeGroup":"Audio Files"},
		    {"Timestamp":"\/Date(1433617513570)\/","Usage":112866084310,"FileTypeGroup":"Archive Files"},
		    {"Timestamp":"\/Date(1433617513570)\/","Usage":53376969,"FileTypeGroup":"Audio Files"},
		    {"Timestamp":"\/Date(1433703914950)\/","Usage":112866084310,"FileTypeGroup":"Archive Files"},
		    {"Timestamp":"\/Date(1433703914950)\/","Usage":53376969,"FileTypeGroup":"Audio Files"},
		    {"Timestamp":"\/Date(1433790360100)\/","Usage":112866084310,"FileTypeGroup":"Archive Files"},
		    {"Timestamp":"\/Date(1433790360100)\/","Usage":53376969,"FileTypeGroup":"Audio Files"},
		    {"Timestamp":"\/Date(1433876715260)\/","Usage":112866084310,"FileTypeGroup":"Archive Files"},
		    {"Timestamp":"\/Date(1433876715260)\/","Usage":53376969,"FileTypeGroup":"Audio Files"},
		    {"Timestamp":"\/Date(1433963143760)\/","Usage":112866084310,"FileTypeGroup":"Archive Files"},
		    {"Timestamp":"\/Date(1433963143760)\/","Usage":53376969,"FileTypeGroup":"Audio Files"},
		   ...