FxLifeSheet/index.html

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

<script type="text/javascript">
    function getRequest(url, callback) {
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function() {
            if (xhr.readyState == 4 && xhr.status == 200) {
                callback(xhr.responseText);
            }
        }
        xhr.open("GET", url, true);
        xhr.send();
    }

    function updateData() {
        getRequest("https://where-is-felix-today-backend.herokuapp.com/api.json", function(data) {
            const overviewTable = JSON.parse(data)["otherFxLifeData"]["overviewTable"]["value"];
            const keys = [{
                "name": "weight",
                "customTitle": "Weight",
                "unit": "kg",
                "rounding": 2,
                "good": "down",
                "percentage": false
            }, {
                "name": "gym",
                "customTitle": "Gym",
                "unit": "",
                "rounding": 0,
                "good": "up",
                "percentage": true
            }, {
                "name": "minutesread",
                "customTitle": "Books Read",
                "unit": "minutes",
                "rounding": 1,
                "good": "up",
                "percentage": false
            }, {
                "name": "sleepdurationwithings",
                "customTitle": "Sleep Duration",
                "unit": "hours",
                "rounding": 1,
                "good": "up",
                "percentage": false
            }, {
                "name": "withingssleepinghr",
                "customTitle": "Sleeping HR",
                "unit": "beats/min",
                "rounding": 1,
                "good": "bad",
                "percentage": false
            }, {
                "name": "alcoholintake",
                "customTitle": "Alcohol Intake",
                "unit": "drinks/day",
                "rounding": 1,
                "good": "bad",
                "percentage": false
            }, {
                "name": "veggies",
                "customTitle": "Ate Vegetables",
                "unit": "",
                "rounding": 0,
                "good": "up",
                "percentage": true
            }, {
                "name": "meditated",
                "customTitle": "Meditated",
                "unit": "minutes",
                "rounding": 1,
                "good": "up",
                "percentage": false
            }, {
                "name": "healthy",
                "customTitle": "Healthy",
                "unit": "",
                "rounding": 1,
                "good": "up",
                "percentage": false
            }, {
                "name": "headache",
                "customTitle": "Headache",
                "unit": "",
                "rounding": 1,
                "good": "bad",
                "percentage": false
            }, {
                "name": "hoursdriving",
                "customTitle": "Hours Driven",
                "unit": "hours",
                "rounding": 1,
                "good": "up",
                "percentage": false
            }, {
                "name": "macroadherence",
                "customTitle": "Macro Counting Adherence",
                "unit": "",
                "rounding": 1,
                "good": "up",
                "percentage": false
            }];
            // Key have to be lower case
            const rows = ["week", "month", "quarter", "year"]
            for (var i = 0; i < keys.length; i++) {
                const keyData = keys[i];
                const key = keyData["name"]
                const value = overviewTable[key];
                const container = document.getElementById("table-container");
                const table = document.createElement("table");
                table.setAttribute("cellspacing", 0)
                table.setAttribute("cellpadding", 0)
                table.setAttribute("id", key);
                table.setAttribute("class", "metrics-table");
                const thead = document.createElement("thead");
                const tr = document.createElement("tr");
                const th = document.createElement("th");
                th.innerHTML = keyData["customTitle"];
                th.colSpan = "2"
                tr.appendChild(th);
                thead.appendChild(tr);
                table.appendChild(thead);
                const tbody = document.createElement("tbody");

                // Calculate the minimum and maximum value of each metric
                let minValue = null;
                let maxValue = null;
                for (var j = 0; j < rows.length; j++) {
                    let calculatedValue = overviewTable[key + rows[j]]
                    if (calculatedValue != null) {
                        if (minValue == null || calculatedValue < minValue) {
                            minValue = calculatedValue;
                        }
                        if (maxValue == null || calculatedValue > maxValue) {
                            maxValue = calculatedValue;
                        }
                    }
                }

                for (var j = 0; j < rows.length; j++) {
                    const tr = document.createElement("tr");
                    const td = document.createElement("td");
                    td.innerHTML = rows[j].charAt(0).toUpperCase() + rows[j].slice(1); // capitalize
                    tr.appendChild(td);
                    const td2 = document.createElement("td");
                    let calculatedValue = overviewTable[key + rows[j]]
                    if (calculatedValue == maxValue) {
                        if (keyData["good"] == "up") {
                            td2.setAttribute("class", "best-value");
                        } else {
                            td2.setAttribute("class", "worst-value");
                        }
                    } else if (calculatedValue == minValue) {
                        if (keyData["good"] == "up") {
                            td2.setAttribute("class", "worst-value");
                        } else {
                            td2.setAttribute("class", "best-value");
                        }
                    }
                    let suffix = "";
                    if (keyData["percentage"]) {
                        calculatedValue *= 100
                        suffix = "% of days"
                    }
                    calculatedValue = Math.round(calculatedValue * Math.pow(10, keyData["rounding"])) / Math.pow(10, keyData["rounding"]);

                    if (keyData["unit"]) {
                        suffix = " " + keyData["unit"];
                    }
                    td2.innerHTML = calculatedValue + suffix;
                    tr.appendChild(td2);
                    tbody.appendChild(tr);
                }
                table.appendChild(tbody);
                container.appendChild(table);
            }
        })
    }
    updateData();
</script>

<style type="text/css">
    * {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
        color: #353535;
    }
    
    .metrics-table tr:nth-child(odd) {
        background-color: #f7f7f7;
    }
    
    thead th {
        font-weight: bold;
        text-align: center;
    }
    
    .metrics-table td {
        border: 1px solid #e8e8e8;
    }
    
    .metrics-table th {
        border: 1px solid #e8e8e8;
    }
    
    .metrics-table th,
    .metrics-table td {
        padding: 10px 15px;
    }
    
    .metrics-table>*>tr>td:first-child {
        text-align: right;
        white-space: nowrap;
    }
    
    .metrics-table tr {
        line-height: 16px;
        font-size: 88%;
    }
    
    #table-container {
        margin-top: 20px;
        margin-left: auto;
        margin-right: auto;
        text-align: left;
    }
    
    .metrics-table {
        border: none;
        width: 250px;
        margin: 10px;
        display: inline;
    }
    
    .metrics-table>*>tr>td:first-child {
        text-align: right;
        white-space: nowrap;
        width: 50px;
    }
    
    .metrics-table tr {
        line-height: 16px;
        font-size: 88%;
        width: 100%;
    }
    
    .metrics-table tr .ago-subtle {
        font-size: 85%;
    }
    
    .metrics-table tr .highlighted {
        padding: 4px;
    }
    
    .best-value {
        color: green;
        border: 1px solid green !important;
    }
    
    .worst-value {
        color: red;
        border: 1px solid red !important;
    }
    
    @media screen and (max-width: 800px) {
        .metrics-table tr {
            line-height: 12px;
        }
    }
</style>