JSFiddle - React, Tailwind, and code Playground

by Subigya Panta

HTML

<table class="table table-striped table-hover"></table>

JavaScript

function generateChartData() {
    var chartData = [];
    for (var i = 0; i < 5; i++) {
        var file_id = Math.floor(Math.random() * 90000) + 10000,
            file_name = 'Dummy File ' + Math.floor(Math.random() * 20) + 30 + '.zip',
            file_clicks = Math.round(Math.random() * 480) + 820,
            file_downloads = Math.round(Math.random() * 160) + 420,
            file_conversion = (file_clicks / file_downloads).toFixed(2),
            file_profit = Math.round(Math.random() * 120) + 310,
            file_cpa = (file_profit / file_downloads).toFixed(2),
            file_epc = (file_profit / file_clicks).toFixed(2);

        chartData.push({
            file_id: file_id,
            file_name: file_name,
            file_clicks: file_clicks,
            file_downloads: file_downloads,
            file_conversion: file_conversion,
            file_cpa: file_cpa,
            file_epc: file_epc,
            file_profit: file_profit,
            total_clicks: "",
            total_downloads: "",
            total_conversion: "",
            total_profit: "",
            total_cpa: "",
            total_epc: ""
        });
    }

    // create variables but no values
    var total_clicks, total_downloads, total_conversion, total_profit, total_cpa, total_epc;
    return chartData;
}

var template = "\"<thead id=\"json-head\">\r\n    <tr>\r\n        <th>ID<\/th>\r\n        <th>File Name<\/th>\r\n        <th>Clicks<\/th>\r\n        <th>Downloads<\/th>\r\n        <th>Conversion<\/th>\r\n        <th>Average CPA<\/th>\r\n        <th>EPC<\/th>\r\n        <th>Profit<\/th>\r\n    <\/tr>\r\n<\/thead>\r\n\r\n<tbody id=\"json-body\">\r\n    <tr>\r\n        <td>${file_id}<\/td>\r\n        <td>${file_name}<\/td>\r\n        <td>${file_clicks}<\/td>\r\n        <td>${file_downloads}<\/td>\r\n        <td>${file_conversion}<\/td>\r\n        <td>${file_cpa}<\/td>\r\n        <td>${file_epc}<\/td>\r\n        <td>${file_profit}<\/td>\r\n    <\/tr>\r\n<\/tbody>\r\n\r\n<tfoot...