Tatati Hiring Homework

Tatari_assets_rotations.csv

Tatari_assets_spots.csv

Tatari_css_main.css

body{
    font-family: Tahoma, Verdana, Segoe, sans-serif;
}
.content {
    background-color: #f9fbfd;
    width: 95%;
    height: 800px;
    margin: auto;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, .1);
}
table{
    width:80%;
    padding-left: 2%;
    margin: 10px 0px 10px 0px;
    margin: 0 auto;
    background-color: white;
    border-collapse: collapse;
}
tr{
    border: solid #f9fbfd;
    border-width: 3px 0;
}
td{
    padding: 15px;
    cellspacing: 4;
}
th{
   color: gray;
    font-size: 16px;
    font-weight: lighter;
    text-align: left;
    padding-top: 3%;
    padding-left: 10px;
}
#spotReport, #rotationReport{
    padding-top: 2%;
}
#overalView{
    margin: 0 auto;
    text-align: center;
    width: 80%;
}
.column {
    float: left;
    width: 30%;
    padding: 10px;
}
.row{
    margin-left: 5%;
    padding-bottom: 3%;
}
.row:after {
    content: "";
    display: table;
    clear: both;
}

Tatari_js_util.js

/**
 * this function converts a csv string to a json array
 * @param csv
 * @returns {Array}
 */
function csvToJsonArray(csv) {
    csv = csv.replace(/["]/g, ""); // csv is a string here, so we should get rid of double quotes
    let jsonArray = [];
    csv = csv.split("\n"); // split csv string using return TODO: file might have empty lines at the end => fix
    let headers = csv[0].split(',');
    for (let i = 1, length = csv.length; i < length; i++) {
        let row = csv[i].split(',');
        let temp = {};
        for (let x = 0; x < row.length; x++) {
            temp[headers[x]] = row[x];
        }
        jsonArray.push(temp);
    }
    return jsonArray;
}

/**
 * this function reads a human readable time string am/pm format and sets it in a date object
 * this will help us to find if spots fall in a rotation
 * @param date
 * @param timeString
 */
function setTimeToDate(date, timeString) {
    // if time is pm I am adding 12 hours
    if (timeString.includes("PM")) {
        let time = timeString.replace("PM",""); // remove pm from string
        time = time.trim(); // remove white space
        date.setHours(Number(time.split(":")[0]) % 12 + 12); // get hour
        date.setMinutes(Number(time.split(":")[1])); // get min
    } else if (timeString.includes("AM")) {
        let time = timeString.replace("AM","");
        time = time.trim();
        date.setHours(Number(time.split(":")[0]));
        date.setMinutes(Number(time.split(":")[1]));
    } else {
        console.log("File format error!");
    }
}

/**
 * this will help us to find if spots fall in a rotation
 * @param rotations
 */
function buildRotationMap(rotations) {
    let map = {};
    $.each(rotations, function (ind, row) {
        let name = row["Name"];
        map[name] = {};
        map[name]["start"] = new Date();
        map[name]["end"] = new Date();
        setTimeToDate(map[name]["start"], row["Start"]);
        setTimeToDate(map[name]["end"], row["End"]);
    });
    return map;
}

/**
 *
 * @param rotationTable
 * @param time
 * @returns {Array}
 */
function getMatchedRotations(rotationTable, time) {
    let date = new Date();
    setTimeToDate(date, time);
    let matchedRotations = [];
    $.each(rotationTable, function (key, rotation) {
        if (date >= rotation['start'] && date <= rotation['end']) {
            matchedRotations.push(key);
        }
    });
    return matchedRotations;
}

function buildTableFromObject(object, where, header) {
    var table = "<table>";
    table += "<tr>";
    $.each(header, function (idx, item) {
            table += "<th>";
            table += item;
            table += "</th>";
    });
    table += "</tr>";
    $.each(object, function (key, value) {
        table += "<tr><td>";
        table += key + "</td>";
        $.each(value, function (k, v) {
            table += "<td>";
            table += v;
            table += "</td>";
        });
        table += "</tr>";
    });
    table += "</tr>";
    table += "</table>";
    $(where).html(table);
}

Tatari_report.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<div id="overalView">
    <div class="row">
        <div class="column" id="totalSpots"></div>
        <div class="column" id="totalSpend"></div>
        <div class="column" id="totalView"></div>
    </div>
</div>

<div class="content">
    <div id="spotReport"><h1>By Creative</h1></div>
    <div id="rotationReport"><h1>By Day - Rotation</h1></div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript" src="js/util.js"></script>
<script>
    // assumption is made that spots.csv and rotations.csv will be accessed by a ajax call
    // for the purpose of this homework I put them in asset folder and I get them using jquery get function
    const spotsPath = "assets/spots.csv";
    const rotationsPath = "assets/rotations.csv";
    let rotationTable = {};

    $.get(spotsPath, function (spotsTextFile) {
        let spotsText = spotsTextFile;
        $.get(rotationsPath, function (rotationTextFile) {
            let rotationText = rotationTextFile;
            let spots = csvToJsonArray(spotsText);
            let rotations = csvToJsonArray(rotationText);
            rotationTable = buildRotationMap(rotations);

            // Overall view
            let totalSpots = spots.length;
            console.log(totalSpots);
            $("#totalSpots").html("<h3> Total Spots </h3>").append(totalSpots);

            let totalSpend;
            $("#totalSpend").html("<h3> Total Spend </h3>").append(totalSpend);

            let totalView;
            $("#totalView").html("<h3> Total Views </h3>").append(totalView);


            // Logic to generate by-creative view
            let byCreativeView = {};

            $.each(spots, function (ind, spot) {
                var name = spot["Creative"];
                if (!byCreativeView[name]) {
                    byCreativeView[name] = {};
                    byCreativeView[name]["spent"] = Number(spot["Spend"]);
                    byCreativeView[name]["view"] = Number(spot["Views"]);
                } else {
                    byCreativeView[name]["spent"] += Number(spot["Spend"]);
                    byCreativeView[name]["view"] += Number(spot["Views"]);
                }
                byCreativeView[name]["cpv"] = Number(byCreativeView[name]["spent"]/byCreativeView[name]["view"]).toFixed(2);
                totalSpend += Number(byCreativeView[name]["spent"]);
            });
            console.log(totalSpend)

            buildTableFromObject(byCreativeView, "#spotReport", ["Creative", "Spend", "Views", "CPV"]);


            // Logic to generate day-rotation view
            let byDayRotationView = {};

            $.each(spots, function (ind, spot) {
                $.each(getMatchedRotations(rotationTable, spot["Time"]), function (ind, rotationName) {
                    let key = spot["Date"] +" "+ rotationName;
                    if (!byDayRotationView[key]) {
                        byDayRotationView[key] = {};
                        byDayRotationView[key]["time"] = key;
                        byDayRotationView[key]["spent"] = Number(spot["Spend"]);
                        byDayRotationView[key]["view"] = Number(spot["Views"]);
                    } else {
                        byDayRotationView[key]["spent"] += Number(spot["Spend"]);
                        byDayRotationView[key]["view"] += Number(spot["Views"]);
                    }
                    byDayRotationView[key]["CPV"] = Number(byDayRotationView[key]["spent"] / byDayRotationView[key]["view"]).toFixed(2);
                });
            });

            buildTableFromObject(byDayRotationView, "#rotationReport", ["Day - Duration", "Spend", "Views", "CPV"]);
        });



    });


</script>
</body>
</html>