Skip to content

Instantly share code, notes, and snippets.

@biovisualize
Last active December 30, 2015 23:59
Show Gist options
  • Save biovisualize/7904516 to your computer and use it in GitHub Desktop.
Save biovisualize/7904516 to your computer and use it in GitHub Desktop.
Invoice using a minimalist d3 templating system
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title></title>
<script type='text/javascript' src="http://d3js.org/d3.v3.min.js"></script>
<script type='text/javascript' src="infos.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="container"></div>
<script id="main-tpl" type="text/html">
<div id="info-section">
<div id="consultant-info">
<span id="consultant-name">{consultantName}</span><br>
{consultantAddress}<br>
{consultantEmail}
</div>
<div id="client-info">
Attention To:<br>
{clientName}<br>
{clienAddress}<br>
{clientEmail}
</div>
<div id="bill-info">
{date}
</div>
</div>
<div id="description">
<table>
<tr><th>Description</th><th>Price</th></tr>
{jobs}
<tr><td id="payment-cell">Total:</td><td>{paymentTotal}</td></tr>
</table>
</div>
<div id="footnote">{note}</div>
</script>
<script id="description-partial" type="text/html">
<tr><td>{jobName}</td><td>{jobPrice}</td></tr>
</script>
<script>
var compileTemplate = function(_template, _values){
return [].concat(_values).map(function(d, i){
return _template.replace(/{([^}]*)}/g, function(s, key){return d[key] || '';});
}).join('\n');
};
var format = d3.format('>$,.2f');
var total = d3.sum(valuesPartial.map(function(d, i){ return d.jobPrice; }));
valuesPartial.forEach(function(d, i){ d.jobPrice = format(d.jobPrice); });
var compiledPartial = compileTemplate(d3.select('#description-partial').html(), valuesPartial);
values.jobs = compiledPartial;
values.paymentTotal = format(total);
var compiledTemplate = compileTemplate(d3.select('#main-tpl').html(), values);
d3.select('#container').html(compiledTemplate);
</script>
</body>
</html>
var valuesPartial = [
{jobName: 'Job description 1', jobPrice: 10},
{jobName: 'Job description 2', jobPrice: 10}
];
var values = {
consultantName: 'Name',
consultantAddress: 'Address',
consultantEmail: 'Email',
clientName: 'Client name',
clienAddress: 'Client Address',
clientEmail: 'Client email',
date: 'Date',
note: "Footnote"
};
div, table, td, th{
padding: 10px;
}
table{
border-collapse: collapse;
}
#description{
padding: 0;
border: 1px solid black;
}
#client-info, table, td, th{
border: 1px solid silver;
}
#container{
border: 1px solid black;
}
#footnote{
font-size: 14px;
}
#consultant-name{
font-size: 40px;
}
#payment-cell{
text-align: right;
}
table tr:last-child td:last-child{
border: 2px solid black;
}
*, *:before, *:after {
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
#container{
width: 800px;
}
#info-section{
height: 200px;
}
#consultant-info, #bill-info{
float: left;
width: 300px;
}
#client-info, #client-info, #bill-info{
float: right;
width: 300px;
}
#bill-info{
clear: both;
}
table{
width: 100%;
}
table td:first-child{
width: 90%;
}
table td:last-child{
width: 10%;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment