mirror of
https://github.com/adnexus/luxr-prototype.git
synced 2026-07-26 22:08:52 +00:00
407 lines
12 KiB
HTML
407 lines
12 KiB
HTML
<!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/list.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>
|
|
<style type="text/css" media="screen">
|
|
.bad, .okay, .good { background: transparent; color: #000; }
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div id="container">
|
|
<!-- <form action="#" method="get" accept-charset="utf-8">
|
|
<fieldset style="display:none;">
|
|
<div class="check">
|
|
<label for="lorem_ipsum">Lorem ipsum</label>
|
|
<input type="checkbox" name="lorem_ipsum" value="" id="lorem_ipsum" />
|
|
</div>
|
|
<div class="check">
|
|
<label for="dolor_sit_amet">Dolor sit amet</label>
|
|
<input type="checkbox" name="dolor_sit_amet" value="" id="dolor_sit_amet" />
|
|
</div>
|
|
<div class="selectbox">
|
|
<select name="opts" id="opts">
|
|
<option value="option1">Option 1</option>
|
|
<option value="option2">Option 2</option>
|
|
<option value="option1">Option 3</option>
|
|
<option value="option2">Option 4</option>
|
|
<option value="option1">Option 5</option>
|
|
<option value="option2">Option 6</option>
|
|
</select>
|
|
</div>
|
|
<div class="radioset">
|
|
<label>Consectetur adipisicing elit in culpa qui officia?</label>
|
|
<input type="radio" name="pair" value="" id="yes" />
|
|
<input type="radio" name="pair" value="" id="no" />
|
|
</div>
|
|
</fieldset>
|
|
<ul class="clearfix">
|
|
<li><a href="trouble.html">Campaigns<br/>by Budget</a></li>
|
|
<li><a href="ending.html">Line Items<br/>by Budget</a></li>
|
|
<li><a href="setup.html">Impression<br/>Pacing</a></li>
|
|
<li><a href="#">Revenue<br/>Pacing</a></li>
|
|
<li><a href="#">Spend<br/>Pacing</a></li>
|
|
<li class="toggle"><a href="#">Edit<br/>Presets</a></li>
|
|
</ul>
|
|
</form> -->
|
|
<table id="campaigns">
|
|
<thead>
|
|
<tr>
|
|
<th class="summary">Summary</th>
|
|
<th>Imps</th>
|
|
<th>Clicks</th>
|
|
<th>Conversions</th>
|
|
<th>Revenue</th>
|
|
<th>Profit</th>
|
|
<th>Media Cost</th>
|
|
<th>Revenue eCPM</th>
|
|
<th>Cost eCPM</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td class="summary">
|
|
<div>
|
|
<img src="img/sparkline.png" class="sparkline" />
|
|
<h1 class="good">95</h1>
|
|
</div>
|
|
</td>
|
|
<td>18,225</td>
|
|
<td>0</td>
|
|
<td>0</td>
|
|
<td>$1,822.50</td>
|
|
<td>$1,822.48</td>
|
|
<td>$0.02</td>
|
|
<td>$100.00</td>
|
|
<td>$0.00</td>
|
|
</tr>
|
|
<tr class="detailed-summary">
|
|
<td class="expanded-detail-cell" colspan="9">
|
|
<div class="expanded-detail clearfix">
|
|
<div class="img-wrap">
|
|
<div id="cumulative" style="width:300px; height:200px;">
|
|
|
|
</div>
|
|
</div>
|
|
<div class="stats">
|
|
<dl>
|
|
<dt><h2>Average :</h2></dt>
|
|
<dd><h2>507,946</h2></dd>
|
|
</dl>
|
|
<dl>
|
|
<dt>Lifetime Budget:</dt>
|
|
<dd>$7000.00</dd>
|
|
<dt>Daily Budget:</dt>
|
|
<dd>$500.00</dd>
|
|
<dt>Advertiser Goal:</dt>
|
|
<dd>$6.50 CPC</dd>
|
|
<dt>Spend:</dt>
|
|
<dd class="bad">-$241</dd>
|
|
</dl>
|
|
</div>
|
|
<div class="actions">
|
|
<ul>
|
|
<li>Frequency cap is low <a href="#">Open up frequency cap</a></li>
|
|
<li>CPM is low relative to ECP <a href="#">Increase CPM</a></li>
|
|
<li>Targeting is narrow <a href="#">Change targeting</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="summary">
|
|
<div>
|
|
<div id="sparkline" style="width:80px; height:40px;">
|
|
|
|
</div>
|
|
<!-- <img src="img/sparkline.png" class="sparkline" /> -->
|
|
<h1 class="okay">85</h1>
|
|
</div>
|
|
</td>
|
|
<td>1,244</td>
|
|
<td>0</td>
|
|
<td>0</td>
|
|
<td>$10,490.79</td>
|
|
<td>$10,490.42</td>
|
|
<td>$0.36</td>
|
|
<td>$8,433.11</td>
|
|
<td>$0.29</td>
|
|
</tr>
|
|
<tr class="detailed-summary">
|
|
<td class="expanded-detail-cell" colspan="9">
|
|
<div class="expanded-detail clearfix">
|
|
<div class="img-wrap">
|
|
<img src="img/pacing-chart-fill.png" />
|
|
</div>
|
|
<div class="stats">
|
|
<dl>
|
|
<dt><h2>Pacing:</h2></dt>
|
|
<dd><h2>95</h2></dd>
|
|
</dl>
|
|
<dl>
|
|
<dt>Lifetime Budget:</dt>
|
|
<dd>$7000.00</dd>
|
|
<dt>Daily Budget:</dt>
|
|
<dd>$500.00</dd>
|
|
<dt>Advertiser Goal:</dt>
|
|
<dd>$6.50 CPC</dd>
|
|
<dt>Spend:</dt>
|
|
<dd class="bad">-$241</dd>
|
|
</dl>
|
|
</div>
|
|
<div class="actions">
|
|
<ul>
|
|
<li>Frequency cap is low <a href="#">Open up frequency cap</a></li>
|
|
<li>CPM is low relative to ECP <a href="#">Increase CPM</a></li>
|
|
<li>Targeting is narrow <a href="#">Change targeting</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="summary">
|
|
<div>
|
|
<div style="float:left;">
|
|
<h6><span class="bad">405,355</span> / 10,500,000</h6>
|
|
<div class="progress" style="width:80px; float:left;">
|
|
<div class="fill pc-3"></div>
|
|
</div>
|
|
</div>
|
|
<h1 class="bad">3%</h1>
|
|
</div>
|
|
</td>
|
|
<td>18,225</td>
|
|
<td>0</td>
|
|
<td>0</td>
|
|
<td>$1,822.50</td>
|
|
<td>$1,822.48</td>
|
|
<td>$0.02</td>
|
|
<td>$100.00</td>
|
|
<td>$0.00</td>
|
|
</tr>
|
|
<tr class="detailed-summary">
|
|
<td class="expanded-detail-cell" colspan="9">
|
|
<div class="expanded-detail clearfix">
|
|
<h3 class="obj-title">Campaign with no start and/or end date (238420)</h3>
|
|
<div class="img-wrap">
|
|
<h4>Target: 10,500,000 Impressions</h4>
|
|
<div class="progress">
|
|
<div class="fill pc-3"></div>
|
|
</div>
|
|
<h4>Actual: <span class="bad">405,355</span> Impressions</h4><br/>
|
|
<a href="#" class="btn">View Daily Breakdown</a>
|
|
</div>
|
|
<div class="stats">
|
|
<dl class="wide">
|
|
<dt><h3>Days Remaining:</h3></dt>
|
|
<dd><h3><span class="bad">4</span></h3></dd>
|
|
</dl>
|
|
<dl class="wide">
|
|
<dt>Delivery:</dt>
|
|
<dd class="bad">3% (Low)</dd>
|
|
<dt>Lifetime Budget:</dt>
|
|
<dd>10,500,000 Imps</dd>
|
|
<dt>Daily Budget:</dt>
|
|
<dd>338,888 Imps</dd>
|
|
</dl>
|
|
</div>
|
|
<div class="actions">
|
|
<h3>Recommendations:</h3>
|
|
<ul>
|
|
<li>Frequency cap is low <a href="#">Open up frequency cap</a></li>
|
|
<li>CPM is low relative to ECP <a href="#">Increase CPM</a></li>
|
|
<li>Targeting is narrow <a href="#">Change targeting</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="summary">
|
|
<div>
|
|
<img src="img/sparkline.png" class="sparkline" />
|
|
<h1 class="good">103</h1>
|
|
</div>
|
|
</td>
|
|
<td>1,244</td>
|
|
<td>0</td>
|
|
<td>0</td>
|
|
<td>$10,490.79</td>
|
|
<td>$10,490.42</td>
|
|
<td>$0.36</td>
|
|
<td>$8,433.11</td>
|
|
<td>$0.29</td>
|
|
</tr>
|
|
<tr class="detailed-summary">
|
|
<td class="expanded-detail-cell" colspan="9">
|
|
<div class="expanded-detail clearfix">
|
|
<div class="img-wrap"><img src="img/pacing-chart-fill.png" /></div>
|
|
<div class="stats">
|
|
<dl>
|
|
<dt><h2>Pacing:</h2></dt>
|
|
<dd><h2>103</h2></dd>
|
|
</dl>
|
|
<dl>
|
|
<dt>Lifetime Budget:</dt>
|
|
<dd>$7000.00</dd>
|
|
<dt>Daily Budget:</dt>
|
|
<dd>$500.00</dd>
|
|
<dt>Advertiser Goal:</dt>
|
|
<dd>$6.50 CPC</dd>
|
|
<dt>Spend:</dt>
|
|
<dd class="bad">-$241</dd>
|
|
</dl>
|
|
</div>
|
|
<div class="actions">
|
|
<ul>
|
|
<li>Frequency cap is low <a href="#">Open up frequency cap</a></li>
|
|
<li>CPM is low relative to ECP <a href="#">Increase CPM</a></li>
|
|
<li>Targeting is narrow <a href="#">Change targeting</a></li>
|
|
</ul>
|
|
<ul>
|
|
<li><a href="#">Show only campaigns on this line item (14032)</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<script type="text/javascript" charset="utf-8">
|
|
var sparkline, detail,
|
|
disabled = { enabled: false },
|
|
noText = { text: null };
|
|
|
|
function initFormToggle() {
|
|
var filters = $('form fieldset'),
|
|
open = filters.is(':visible');
|
|
$('li.toggle a').bind('click', function(){
|
|
if (open) {
|
|
filters.hide();
|
|
$(this).text('Edit presets');
|
|
open = false;
|
|
} else {
|
|
filters.show();
|
|
$(this).text('Save as preset');
|
|
open = true;
|
|
}
|
|
return false;
|
|
});
|
|
}
|
|
|
|
$(function(){
|
|
|
|
initFormToggle();
|
|
|
|
$('table tr').not('.detailed-summary').bind('click', function(){
|
|
$(this).toggleClass('open').next('tr.detailed-summary').toggleClass('open').toggle();
|
|
});
|
|
|
|
detail = Highcharts.Chart({
|
|
chart: {
|
|
renderTo: 'cumulative',
|
|
spacingTop: 5,
|
|
spacingBottom: 5,
|
|
spacingRight: 5,
|
|
spacingLeft: 0,
|
|
type: 'line'
|
|
},
|
|
credits: disabled,
|
|
legend: disabled,
|
|
plotOptions: {
|
|
series: {
|
|
marker: disabled,
|
|
pointStart: Date.UTC(2010, 2, 8),
|
|
pointInterval: 24 * 3600 * 1000 // one day
|
|
}
|
|
},
|
|
title: {
|
|
text: 'Daily Impressions'
|
|
},
|
|
xAxis: {
|
|
type: 'datetime'
|
|
},
|
|
yAxis: {
|
|
maxPadding: 0.01,
|
|
min: 0,
|
|
title: noText
|
|
},
|
|
series: [
|
|
// {
|
|
// name: 'Actual Daily Imps',
|
|
// data: [324408, 390123, 300898, 294214, 296976, 299419, 444364, 428526, 430260, 429835, 453412, 450110, 451488, 449928, 443420, 530261, 602479, 635945, 346298, 0, 706717, 1287493, 1261719, 932421]
|
|
// },
|
|
// {
|
|
// name: 'Daily Budget',
|
|
// data: [456522, 456522, 456522, 456522, 456522, 456522, 456522, 456522, 456522, 456522, 456522, 456522, 456522, 456522, 456522, 456522, 456522, 456522, 456522, 456522, 456522, 456522, 456522, 456522]
|
|
// }
|
|
{
|
|
name: 'Budgeted Imps',
|
|
data: [456522, 913043, 1369565, 1826087, 2282609, 2739130, 3195652, 3652174, 4108696, 4565217, 5021739, 5478261, 5934783, 6391304, 6847826, 7304348, 7760870, 8217391, 8673913, 9130435, 9586957, 10043478, 10500000, 10956522]
|
|
}
|
|
,{
|
|
name: 'Actual Imps',
|
|
data: [324408, 714531, 1015429, 1309643, 1606619, 1906038, 2350402, 2778928, 3209188, 3639023, 4092435, 4542545, 4994033, 5443961, 5887381, 6417642, 7020121, 7656066, 8002364, 8002364, 8709081, 9996574, 11258293, 12190714]
|
|
}
|
|
]
|
|
});
|
|
|
|
sparkline = Highcharts.Chart({
|
|
chart: {
|
|
renderTo: 'sparkline',
|
|
spacingTop: 0,
|
|
spacingBottom: 0,
|
|
spacingRight: 0,
|
|
spacingLeft: 0
|
|
},
|
|
credits: disabled,
|
|
legend: disabled,
|
|
plotOptions: {
|
|
series: { marker: disabled }
|
|
},
|
|
title: noText,
|
|
tooltip: disabled,
|
|
xAxis: {
|
|
labels: disabled,
|
|
title: noText
|
|
},
|
|
yAxis: {
|
|
labels: disabled,
|
|
// max: 20,
|
|
title: noText
|
|
},
|
|
series: [
|
|
{
|
|
name: 'Actual Daily Imps',
|
|
data: [324408, 390123, 300898, 294214, 296976, 299419, 444364, 428526, 430260, 429835, 453412, 450110, 451488, 449928, 443420, 530261, 602479, 635945, 346298, 0, 706717, 1287493, 1261719, 932421]
|
|
},
|
|
{
|
|
name: 'Daily Budget',
|
|
data: [456522, 456522, 456522, 456522, 456522, 456522, 456522, 456522, 456522, 456522, 456522, 456522, 456522, 456522, 456522, 456522, 456522, 456522, 456522, 456522, 456522, 456522, 456522, 456522]
|
|
}
|
|
// {
|
|
// name: 'Budgeted Imps',
|
|
// data: [456522, 913043, 1369565, 1826087, 2282609, 2739130, 3195652, 3652174, 4108696, 4565217, 5021739, 5478261, 5934783, 6391304, 6847826, 7304348, 7760870, 8217391, 8673913, 9130435, 9586957, 10043478, 10500000, 10956522]
|
|
// }
|
|
// ,{
|
|
// name: 'Actual Imps',
|
|
// data: [324408, 714531, 1015429, 1309643, 1606619, 1906038, 2350402, 2778928, 3209188, 3639023, 4092435, 4542545, 4994033, 5443961, 5887381, 6417642, 7020121, 7656066, 8002364, 8002364, 8709081, 9996574, 11258293, 12190714]
|
|
// }
|
|
]
|
|
});
|
|
})
|
|
</script>
|
|
</body>
|
|
</html>
|