-
-
Save adg29/7934872 to your computer and use it in GitHub Desktop.
Invoice using a minimalist d3 templating system
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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" | |
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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