Palantir Sales Dashboard Summary Table

by Michael Barros

HTML

<!-- <table class="summary-table">
    <thead>
        <tr>
            <th class="summary-table-category-column">Key Metric</th>
            <th colspan="2">30 Day</th>
            <th colspan="2">90 Day</th>
            <th colspan="2">12 Month</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="summary-table-category-name summary-table-category-column">Accounts Signed</td>
            <td colspan="2" id="accounts-signed-30"></td>
            <td colspan="2" id="accounts-signed-90"></td>
            <td colspan="2" id="accounts-signed-12"></td>
        </tr>
        <tr>
            <td class="summary-table-category-name summary-table-category-column">Accounts Approved</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td class="summary-table-category-name summary-table-category-column">Accounts Declined</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td class="summary-table-category-name summary-table-category-column">Accounts Terminated</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td class="summary-table-category-name summary-table-category-column">Total Negative Accounts</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td class="summary-table-category-name summary-table-category-column">Cumulative Net Risk (Range)</td>
            <td colspan="2"></td>
            <td colspan="2"></td>
            <td colspan="2"></td>
        </tr>
        <tr>
            <td class="summary-table-category-name...

CSS

/* 

td, th {
  border: 1px solid black;
}

th {
  background-color: #69676D;
  color: #ffffff;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 5px;
  padding-bottom: 5px;
}

.summary-table-category-column {
  width: 300px;
}

.summary-table-category-name {
  background-color: #7F7F7F;
  color: #ffffff;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 5px;
  padding-bottom: 5px;
}

.summary-table {
  width: 900px;
  border-collapse: collapse;
}

.summary-table-value-cell {
  text-align: center;
} */

/* tr {
    opacity: .5;
    transition: opacity .5s ease-out;
    -moz-transition: opacity .5s ease-out;
    -webkit-transition: opacity .5s ease-out;
    -o-transition: opacity .5s ease-out;
}

tr:hover {
    opacity: 1;
} */

tr {
background-color: hsl(0,0%,100%);
transition: background-color .2s ease-out;
    -moz-transition: background-color .2s ease-out;
    -webkit-transition: background-color .2s ease-out;
    -o-transition: background-color .2s ease-out;
}
tr:hover
{
background-color: hsl(0,0%,80%);
}

/* tr:hover {
  
} */

JavaScript

console.clear();

var summaryTableElem = htmlToElements(htmlString())[0];

var cellSetupDict = {
    'accounts-signed-30': 26,
    'accounts-signed-90': 93,
    'accounts-signed-12': 316,
    
    'accounts-approved-30-count': 20,
    'accounts-approved-30-perc': '77%',
    'accounts-approved-90-count': 72,
    'accounts-approved-90-perc': '77%',
    'accounts-approved-12-count': 232,
    'accounts-approved-12-perc': '73%',
    
    'accounts-declined-30-count': 6,
    'accounts-declined-30-perc': '23%',
    'accounts-declined-90-count': 21,
    'accounts-declined-90-perc': '23%',
    'accounts-declined-12-count': 84,
    'accounts-declined-12-perc': '27%',
    
    'accounts-terminated-30-count': 5,
    'accounts-terminated-30-perc': '19%',
    'accounts-terminated-90-count': 29,
    'accounts-terminated-90-perc': '31%',
    'accounts-terminated-12-count': 62,
    'accounts-terminated-12-perc': '20%',

    'total-negative-30-count': 11,
    'total-negative-30-perc': '42%',
    'total-negative-90-count': 50,
    'total-negative-90-perc': '54%',
    'total-negative-12-count': 146,
    'total-negative-12-perc': '46%',

    'escalations-911-30-count': 5,
    'escalations-911-30-perc': '5%',
    'escalations-911-90-count': 5
}

setCellValue(summaryTableElem, cellSetupDict);

document.getElementsByTagName('body')[0].appendChild(summaryTableElem);

// return summaryTableElem.outerHTML;















function setCellValue(tableElem, setupDict) {
    for (var key in setupDict) {
        var id = key;
				console.log((id.substring(0, 1) != '#'));
        if (id.substring(0, 1) != '#')
            id = '#' + id;

        tableElem.querySelector(id).innerText = setupDict[key];
    }
}

/**
 * @param {String} HTML representing a single element
 * @return {Element}
 */
function htmlToElement(html) {
    var template = document.createElement('template');
    html = html.trim(); // Never return a text node of whitespace as the result
    template.innerHTML = html;
    return...