adnexus/luxr-prototype
1
0
Fork 0
mirror of https://github.com/adnexus/luxr-prototype.git synced 2026-07-27 06:13:04 +00:00
Code Issues Packages Projects Releases Wiki Activity
Files
a9bcbcfec1770398cf63d51b708a83b53288f44f
luxr-prototype/matrix_li.html
T

480 lines
13 KiB
HTML
Raw Blame History

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>untitled</title>
<link rel="stylesheet" href="css/css.css" type="text/css" charset="utf-8" />
<link rel="stylesheet" href="css/matrix.css" type="text/css" charset="utf-8" />
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/highcharts.src.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="container">
<div class="breadcrumb"><b>Line Items</b></div>
<div class="content-wrap">
<table>
<thead>
<tr>
<th class="name">Line Item</th>
<th>Imps</th>
<th>Spend</th>
<th>Revenue</th>
<th>Clicks</th>
<th>Conversions</th>
<th>Days Into Flight</th>
<th>CTR</th>
<th class="go-to">Campaigns</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name" style="background:#fff;">
<div>
<div class="expandable">&#x25BE;<!-- &#x25BC; --></div>
<h4>Norwest Bank &mdash; March (26586)</h4>
</div>
</td>
<td>
<h3>8,101,365</h3>
<h5>/ 13,923,359</h5>
<div class="progress">
<div class="vr" style="left:60%" title="10,740,877 impressions budgeted"></div>
<div class="fill bad" style="width:42%" title="8,101,365 impressions served"></div>
</div>
</td>
<td>
<h3>$14,119.68</h3>
<h5>N/A</h5>
</td>
<td>
<h3>$27,266.72</h3>
<h5>/ $41,770.77</h5>
<div class="progress">
<div class="vr" style="left:60%" title="Revenue should be: $32,223.17"></div>
<div class="fill bad" style="width:42%" title="Revenue is: $27,266.72"></div>
</div>
</td>
<td>
<h3>2,567</h3>
<h5>N/A</h5>
</td>
<td>
<h3>0</h3>
<h5>N/A</h5>
</td>
<td>
<h3>27</h3>
<h5>/ 35</h5>
<div class="progress">
<div class="vr" style="left:77%"></div>
<div class="fill status" style="width:77%"></div>
</div>
</td>
<td>
<h3>0.028%</h3>
<h5>N/A</h5>
</td>
<td class="go-to">
<h3>2 <a href="matrix_camp.html" title="View campaigns on this line item"><img src="img/arrow.png" alt="&#x27A1;" /></a></h3>
</td>
</tr>
<tr class="summary" style="display:none;">
<td class="expanded-detail-cell" colspan="10">
<div class="expanded-detail clearfix">
<h2>Norwest Bank — March (26586)</h2>
<div class="stats">
<dl>
<dt>State:</dt>
<dd>Active</dd>
<dt>Flight dates:</dt>
<dd>03/17/2011 &mdash; 04/22/2011</dd>
<dt>Lifetime budget:</dt>
<dd>Unlimited (set on campaign)</dd>
<dt>Daily budget:</dt>
<dd>Unlimited (set on campaign)</dd>
<dt>Revenue:</dt>
<dd>$3.00 CPM</dd>
<dt>Advertiser goals:</dt>
<dd>N/A</dd>
<dt>User frequency:</dt>
<dd>1 imp per user per day</dd>
</dl>
</div>
<div class="graphic">
<label>
<select name="charted_metric" id="charted-metric">
<option value="imps">Impressions</option>
<option value="rev">Revenue</option>
</select> by Day
</label>
<div id="pacing" class="chart">
</div>
</div>
<div class="actions">
<h3>Alerts</h3>
<ul>
<li class="alert">1 creative has status <b>unauditable</b> &mdash; <a href="#">View creative</a></li>
<li class="alert">1 campaign is <b>underdelivering</b> &mdash; <a href="#">View campaign</a></li>
<li>Frequency cap is <b>very tight</b> <a href="#">Edit frequency cap</a></li>
</ul>
</div>
</div>
</td>
</tr>
<tr>
<td class="name">
<div>
<div class="expandable">&#x25BE;<!-- &#x25BC; --></div>
<h4>Slumberland Q4 2011 (928632)</h4>
</div>
</td>
<td>
<h3>9,479,766</h3>
<h5>/ 97,871,051</h5>
<div class="progress">
<div class="vr" style="left:10%"></div>
<div class="fill good" style="width:9%"></div>
</div>
</td>
<td>
<h3>$5,518.36</h3>
<h5>N/A</h5>
</td>
<td>
<h3>$7,583.81</h3>
<h5>/ $78,296.84</h5>
<div class="progress">
<div class="vr" style="left:10%"></div>
<div class="fill good" style="width:9%"></div>
</div>
</td>
<td>
<h3>860</h3>
<h5>/ 17,617</h5>
<div class="progress">
<div class="vr" style="left:10%"></div>
<div class="fill bad" style="width:5%"></div>
</div>
</td>
<td>
<h3>0</h3>
<h5>N/A</h5>
</td>
<td>
<h3>10</h3>
<h5>/ 91</h5>
<div class="progress">
<div class="vr" style="left:10%"></div>
<div class="fill status" style="width:10%"></div>
</div>
</td>
<td>
<h3 class="bad">0.009%</h3>
<h5>/ 0.018%</h5>
</td>
<td class="go-to">
<h3>3 <a href="matrix_camp.html" title="View campaigns on this line item"><img src="img/arrow.png" alt="&#x27A1;" /></a></h3>
</td>
</tr>
<tr>
<td class="name">
<div>
<div class="expandable">&#x25BE;<!-- &#x25BC; --></div>
<h4>Essilor (21196)</h4>
</div>
</td>
<td>
<h3>9,742,081</h3>
<h5>/ 15,618,748</h5>
<div class="progress">
<div class="vr" style="left:53%"></div>
<div class="fill okay" style="width:62%"></div>
</div>
</td>
<td>
<h3>$4,149.12</h3>
<h5>N/A</h5>
</td>
<td>
<h3>$8,767.87</h3>
<h5>/ $14,056.87</h5>
<div class="progress">
<div class="vr" style="left:53%"></div>
<div class="fill okay" style="width:62%"></div>
</div>
</td>
<td>
<h3>1,961</h3>
<h5>N/A</h5>
</td>
<td>
<h3>0</h3>
<h5>N/A</h5>
</td>
<td>
<h3>45</h3>
<h5>/ 90</h5>
<div class="progress">
<div class="vr" style="left:50%"></div>
<div class="fill status" style="width:50%"></div>
</div>
</td>
<td>
<h3>0.020%</h3>
<h5>N/A</h5>
</td>
<td class="go-to">
<h3>1 <a href="matrix_camp.html" title="View campaigns on this line item"><img src="img/arrow.png" alt="&#x27A1;" /></a></h3>
</td>
</tr>
<tr>
<td class="name">
<div>
<div class="expandable">&#x25BE;<!-- &#x25BC; --></div>
<h4>All Saints (22756)</h4>
</div>
</td>
<td>
<div>
<h3>12,596,029</h3>
<h5>N/A</h5>
</div>
</td>
<td>
<h3>$12,523.86</h3>
<h5>N/A</h5>
</td>
<td>
<h3>$713,450.00</h3>
<h5>/ $900,000</h5>
<div class="progress">
<div class="vr" style="left:81%"></div>
<div class="fill good" style="width:79%"></div>
</div>
</td>
<td>
<h3>30,312</h3>
<h5>N/A</h5>
</td>
<td>
<h3>14,269</h3>
<h5>18,000</h5>
<div class="progress">
<div class="vr" style="left:81%"></div>
<div class="fill good" style="width:79%"></div>
</div>
</td>
<td>
<h3>58</h3>
<h5>/ 72</h5>
<div class="progress">
<div class="vr" style="left:81%"></div>
<div class="fill status" style="width:81%"></div>
</div>
</td>
<td>
<h3>0.05%</h3>
<h5>N/A</h5>
</td>
<td class="go-to">
<h3>1 <a href="matrix_camp.html" title="View campaigns on this line item"><img src="img/arrow.png" alt="&#x27A1;" /></a></h3>
</td>
</tr>
<tr>
<td class="name">
<div>
<div class="expandable">&#x25BE;<!-- &#x25BC; --></div>
<h4>MattressLand (21194)</h4>
</div>
</td>
<td>
<div>
<h3>19,479,766</h3>
<h5>/ 97,871,051</h5>
<div class="progress">
<div class="vr" style="left:25%"></div>
<div class="fill okay" style="width:19%"></div>
</div>
</div>
</td>
<td>
<h3>$4,149.12</h3>
<h5>N/A</h5>
</td>
<td>
<div>
<h3>$14,876.40</h3>
<h5>/ $78,296.84</h5>
<div class="progress">
<div class="vr" style="left:25%"></div>
<div class="fill okay" style="width:19%"></div>
</div>
</div>
</td>
<td>
<h3>3,167</h3>
<h5>N/A</h5>
</td>
<td>
<h3>0</h3>
<h5>N/A</h5>
</td>
<td>
<h3>8</h3>
<h5>/ 30</h5>
<div class="progress">
<div class="vr" style="left:25%"></div>
<div class="fill status" style="width:25%"></div>
</div>
</td>
<td>
<h3 class="good">0.020%</h3>
<h5>/ 0.018%</h5>
</td>
<td class="go-to">
<h3>2 <a href="matrix_camp.html" title="View campaigns on this line item"><img src="img/arrow.png" alt="&#x27A1;" /></a></h3>
</td>
</tr>
<tr>
<td class="name">
<div>
<div class="expandable">&#x25BE;<!-- &#x25BC; --></div>
<h4>AT&amp;T (22754)</h4>
</div>
</td>
<td>
<div>
<h3>1,246,021</h3>
<h5>N/A</h5>
</div>
</td>
<td>
<h3>$1,131.86</h3>
<h5>N/A</h5>
</td>
<td>
<div>
<h3>$3,115.00</h3>
<h5>/ $3,900.00</h5>
<div class="progress">
<div class="vr" style="left:77%"></div>
<div class="fill good" style="width:80%"></div>
</div>
</div>
</td>
<td>
<h3>1,312</h3>
<h5>N/A</h5>
</td>
<td>
<h3>0</h3>
<h5>N/A</h5>
</td>
<td>
<h3>58</h3>
<h5>/ 72</h5>
<div class="progress">
<div class="vr" style="left:77%"></div>
<div class="fill status" style="width:77%"></div>
</div>
</td>
<td>
<h3>0.019%</h3>
<h5>N/A</h5>
</td>
<td class="go-to">
<h3>3 <a href="matrix_camp.html" title="View campaigns on this line item"><img src="img/arrow.png" alt="&#x27A1;" /></a></h3>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<script type="text/javascript" charset="utf-8">
var pacing,
disabled = { enabled: false },
noText = { text: null },
std = {
color: '#222',
fontSize: '11px',
fontFamily: 'Helvetica, Arial, sans-serif'
};
$(function(){
$('table tr td.name').not('.summary').bind('click', function(e){
$(this).closest('tr').toggleClass('open').next('tr.summary').toggleClass('open').toggle();
});
// $('div.progress [data-num-imps]').hover(
// function(){ $(this).data('') }
// )
pacing = new Highcharts.Chart({
chart: {
backgroundColor: 'transparent',
renderTo: 'pacing',
spacingTop: 5,
spacingBottom: 5,
spacingRight: 5,
spacingLeft: 0,
type: 'line'
},
credits: disabled,
legend: disabled,
plotOptions: {
series: {
marker: disabled,
pointStart: Date.UTC(2010, 2, 17),
pointInterval: 24 * 3600 * 1000 // one day
}
},
title: noText,
xAxis: {
labels: {
formatter: function() {
return Highcharts.dateFormat('%d-%b', this.value);
},
style: std
},
tickPixelInterval: 70,
type: 'datetime'
},
yAxis: {
labels: {
formatter: function() {
return this.value;
},
style: std
},
gridLineWidth: 0,
lineWidth: 1,
maxPadding: 0.01,
min: 0,
tickPixelInterval: 20,
tickWidth: 1,
title: noText
},
series: [
{
name: 'Budgeted Imps',
data: [397810, 795620, 1193430, 1591240, 1989050, 2386860, 2784670, 3182480, 3580290, 3978100, 4375910, 4773720, 5171530, 5569340, 5967150, 6364960, 6762770, 7160580, 7558390, 7956200, 8354010, 8751820, 9149630, 9547440, 9945250, 10343060, 10740870, 11138680, 11536490, 11934300, 12332110, 12729920, 13127730, 13525540, 13923350]
},
{
name: 'Actual Imps',
data: [324408, 1014531, 2155429, 2519643, 2606619, 2688038, 2800402, 3078928, 3209188, 3539023, 3892435, 4142545, 4494033, 4494033, 4773720, 5171530, 5269340, 5567150, 5964960, 6262770, 6660580, 7158390, 7456200, 7954010, 8101365, 8101365, 8101365]
}
]
});
});
</script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink