mirror of
https://github.com/adnexus/luxr-prototype.git
synced 2026-07-26 22:08:52 +00:00
kfksf
This commit is contained in:
@@ -0,0 +1,204 @@
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
body {
|
||||
font: 75%/1.5 "Helvetica Neue", Helvetica, sans-serif;
|
||||
}
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
h1 {
|
||||
font-size: 24px;
|
||||
}
|
||||
a {
|
||||
color: #000;
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
}
|
||||
#container {
|
||||
margin: 0 auto;
|
||||
padding: 20px 0 0;
|
||||
width: 900px;
|
||||
}
|
||||
|
||||
|
||||
form {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
form * {
|
||||
/* border-color: #ccc !important; */
|
||||
}
|
||||
|
||||
|
||||
table {
|
||||
border: 1px solid #ccc;
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
}
|
||||
table th,
|
||||
table td {
|
||||
background: #eee;
|
||||
border: 1px solid #ccc;
|
||||
padding: 3px 6px;
|
||||
text-align: right;
|
||||
}
|
||||
table td {
|
||||
background: transparent;
|
||||
border-left: 0 none;
|
||||
border-right: 0 none;
|
||||
vertical-align: middle;
|
||||
}
|
||||
table tbody tr.open td {
|
||||
border-bottom: 1px dotted #ccc;
|
||||
border-top: 1px dotted #ccc;
|
||||
}
|
||||
/* table tbody tr:nth-child(odd) td {
|
||||
background: #f9f9f9;
|
||||
}
|
||||
table tbody tr:nth-child(even) td.expanded-detail-cell {
|
||||
background: #f9f9f9;
|
||||
} */
|
||||
table th[class] {
|
||||
text-align: center;
|
||||
}
|
||||
table td[class] {
|
||||
text-align: left;
|
||||
}
|
||||
table td div.summary {
|
||||
height: 43px;
|
||||
}
|
||||
table h1 {
|
||||
display: inline-block;
|
||||
line-height: 43px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
img.sparkline,
|
||||
#sparkline {
|
||||
float: left;
|
||||
}
|
||||
img.sparkline {
|
||||
margin-right: 1em;
|
||||
}
|
||||
|
||||
table tbody tr.detailed-summary {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
|
||||
div.expanded-detail .obj-title {
|
||||
background: #eee;
|
||||
margin: 4px 0;
|
||||
padding: 2px 4px;
|
||||
/* color: #999;
|
||||
text-decoration: underline; */
|
||||
}
|
||||
div.expanded-detail > div {
|
||||
float: left;
|
||||
}
|
||||
div.expanded-detail > div,
|
||||
div.expanded-detail > div.stats,
|
||||
div.expanded-detail > div.actions {
|
||||
padding: 3px 10px 10px;
|
||||
width: 273px;
|
||||
}
|
||||
.img-wrap h4 {
|
||||
text-align: right;
|
||||
}
|
||||
dl {
|
||||
clear: both;
|
||||
display: block;
|
||||
}
|
||||
.stats {
|
||||
font-size: 13px;
|
||||
}
|
||||
.stats dt {
|
||||
float: left;
|
||||
text-align: right;
|
||||
width: 100px;
|
||||
}
|
||||
.stats dt h2 {
|
||||
display: inline-block;
|
||||
}
|
||||
.stats dd {
|
||||
font-weight: bold;
|
||||
margin: 0 0 5px 110px;
|
||||
}
|
||||
.stats dl.wide dt {
|
||||
width: 140px;
|
||||
}
|
||||
.stats dl.wide dd {
|
||||
margin-left: 130px;
|
||||
}
|
||||
.actions ul {
|
||||
margin-left: 0;
|
||||
padding-left: 1.75em;
|
||||
}
|
||||
.actions ul li {
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
.actions ul li a,
|
||||
a.btn {
|
||||
display: inline-block;
|
||||
border: 1px solid;
|
||||
background: #ccc;
|
||||
padding: 0 4px;
|
||||
border-radius: 4px;
|
||||
-moz-border-radius: 4px;
|
||||
-webkit-border-radius: 4px;
|
||||
}
|
||||
.bad { background: transparent; color: red; }
|
||||
.okay { background: transparent; color: orange; }
|
||||
.good { background: transparent; color: green; }
|
||||
.warn {
|
||||
background: url(img/error-sm.gif) no-repeat 2px center;
|
||||
color: red;
|
||||
font-weight: bold;
|
||||
padding-left: 18px;
|
||||
/* background-color: #ff9292;
|
||||
margin-right: 10px;
|
||||
padding: 2px 0 2px 20px; */
|
||||
}
|
||||
.warn a {
|
||||
background: red !important;
|
||||
}
|
||||
|
||||
.chart {
|
||||
width:300px;
|
||||
height:200px;
|
||||
}
|
||||
|
||||
.progress {
|
||||
background: #eee;
|
||||
border: 1px solid #ccc;
|
||||
height: 20px;
|
||||
}
|
||||
.progress .fill {
|
||||
height: 20px;
|
||||
}
|
||||
.progress .pc-3.fill {
|
||||
background-color: red;
|
||||
width: 3%;
|
||||
}
|
||||
.progress .pc-10.fill {
|
||||
background-color: #d70101;
|
||||
width: 10%;
|
||||
}
|
||||
.progress .pc-35.fill {
|
||||
background-color: #f65405;
|
||||
width: 35%;
|
||||
}
|
||||
.progress .pc-75.fill {
|
||||
background-color: #becf00;
|
||||
width: 75%;
|
||||
}
|
||||
.progress .pc-100.fill {
|
||||
background-color: #009A00;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -8,9 +8,11 @@
|
||||
<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="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript" charset="utf-8"></script>
|
||||
<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>
|
||||
|
||||
+405
@@ -0,0 +1,405 @@
|
||||
<!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/realdata.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">
|
||||
<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>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="summary">
|
||||
<div>
|
||||
<h1 class="good">507,946 <span style="font-size:10px">Average Daily Imps</span></h1>
|
||||
</div>
|
||||
</td>
|
||||
<td>11,333,269</td>
|
||||
<td>2,993</td>
|
||||
<td>0</td>
|
||||
<td>$11,333.27</td>
|
||||
<td>$3,138.35</td>
|
||||
<td>$8,194.92</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" class="chart">
|
||||
|
||||
</div>
|
||||
<!-- <div id="performance" class="chart">
|
||||
|
||||
</div> -->
|
||||
</div>
|
||||
<div class="stats">
|
||||
<dl>
|
||||
<dt><h2>Average:</h2></dt>
|
||||
<dd><h2>507,946</h2></dd>
|
||||
</dl>
|
||||
<dl>
|
||||
<dt>Lifetime Budget:</dt>
|
||||
<dd>10,500,000 imps</dd>
|
||||
<dt>Daily Budget:</dt>
|
||||
<dd>388,888 imps</dd>
|
||||
<dt>Advertiser Goal:</dt>
|
||||
<dd>$6.50 CPC</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>
|
||||
</tr>
|
||||
<tr class="detailed-summary">
|
||||
<td class="expanded-detail-cell" colspan="9">
|
||||
<div class="expanded-detail clearfix">
|
||||
<div class="img-wrap">
|
||||
<div id="" class="chart">
|
||||
<img src="img/pacing-chart-fill.png" />
|
||||
</div>
|
||||
<div id="" class="chart" style="display:none;">
|
||||
|
||||
</div>
|
||||
</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>
|
||||
<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>
|
||||
</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>
|
||||
<!-- <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>
|
||||
</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> -->
|
||||
</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();
|
||||
});
|
||||
|
||||
// performance = Highcharts.Chart({
|
||||
// chart: {
|
||||
// renderTo: 'performance',
|
||||
// spacingTop: 5,
|
||||
// spacingBottom: 5,
|
||||
// spacingRight: 5,
|
||||
// spacingLeft: 0
|
||||
// },
|
||||
// credits: disabled,
|
||||
// legend: disabled,
|
||||
// plotOptions: {
|
||||
// series: {
|
||||
// marker: disabled,
|
||||
// pointStart: Date.UTC(2010, 2, 8),
|
||||
// pointInterval: 24 * 3600 * 1000 // one day
|
||||
// }
|
||||
// },
|
||||
// title: {
|
||||
// text: 'Daily CTR'
|
||||
// },
|
||||
// xAxis: {
|
||||
// type: 'datetime'
|
||||
// },
|
||||
// yAxis: {
|
||||
// maxPadding: 0.01,
|
||||
// title: noText
|
||||
// },
|
||||
// series: [
|
||||
// {
|
||||
// name: 'Expected',
|
||||
// data: [0.04, 0.04, 0.04, 0.04, 0.04, 0.04, 0.04, 0.04, 0.04, 0.04, 0.04, 0.04, 0.04, 0.04, 0.04, 0.04, 0.04, 0.04, 0.04, 0.04, 0.04, 0.04, 0.04, 0.04]
|
||||
// },
|
||||
// {
|
||||
// name: 'Actual',
|
||||
// data: [0.07, 0.05, 0.04, 0.03, 0.02, 0.02, 0.02, 0.04, 0.04, 0.04, 0.04, 0.04, 0.04, 0.04, 0.04, 0.04, 0.03, 0.03, 0.03, 0.03, 0.03, 0.03, 0.03, 0.03]
|
||||
// }
|
||||
// ]
|
||||
// });
|
||||
|
||||
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>
|
||||
Reference in New Issue
Block a user