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

adding more charts

Browse Source
This commit is contained in:
philgran
2011-04-06 17:31:46 -04:00
parent e11b983e9a
commit 766863b2f3
3 changed files with 316 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/list.css
+48 -11
View File
@@ -5,10 +5,10 @@
body {
font: 75%/1.5 "Helvetica Neue", Helvetica, sans-serif;
}
/* h1, h2, h3, h4, h5, h6 {
h1, h2, h3, h4, h5, h6 {
margin: 0;
padding: 8px;
} */
padding: 0;
}
h1 {
font-size: 24px;
}
@@ -22,6 +22,16 @@ a {
padding: 20px 0 0;
width: 900px;
}
form {
margin-bottom: 1em;
}
form * {
/* border-color: #ccc !important; */
}
table {
border: 1px solid #ccc;
border-collapse: collapse;
@@ -74,6 +84,15 @@ 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;
}
@@ -83,21 +102,34 @@ div.expanded-detail > div.actions {
padding: 3px 10px 10px;
width: 273px;
}
.stats dl {
.img-wrap h4 {
text-align: right;
}
dl {
clear: both;
display: block;
}
.stats {
font-size: 13px;
}
.stats dl dt {
.stats dt {
float: left;
text-align: right;
width: 100px;
}
.stats dl dt h2 {
.stats dt h2 {
display: inline-block;
}
.stats dl dd {
.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;
@@ -105,7 +137,8 @@ div.expanded-detail > div.actions {
.actions ul li {
margin-bottom: 0.5em;
}
.actions ul li a {
.actions ul li a,
a.btn {
display: inline-block;
border: 1px solid;
background: #ccc;
@@ -114,9 +147,9 @@ div.expanded-detail > div.actions {
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
}
.bad { color: red; }
.okay { color: orange; }
.good { color: green; }
.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;
@@ -138,6 +171,10 @@ div.expanded-detail > div.actions {
.progress .fill {
height: 20px;
}
.progress .pc-3.fill {
background-color: red;
width: 3%;
}
.progress .pc-10.fill {
background-color: #d70101;
width: 10%;
list.html
+159 -45
View File
@@ -6,19 +6,50 @@
<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/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/highcharts.src.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<!-- <ul id="campaigns">
<li>
<img src="sparkline.png" />
<h1>85</h1>
</li>
</ul> -->
<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>
@@ -53,11 +84,15 @@
<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="img-wrap">
<div id="cumulative" style="width:300px; height:200px;">
</div>
</div>
<div class="stats">
<dl>
<dt><h2>Pacing:</h2></dt>
<dd><h2>95</h2></dd>
<dt><h2>Average :</h2></dt>
<dd><h2>507,946</h2></dd>
</dl>
<dl>
<dt>Lifetime Budget:</dt>
@@ -134,8 +169,13 @@
<tr>
<td class="summary">
<div>
<img src="img/sparkline.png" class="sparkline" />
<h1 class="bad">68</h1>
<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>
@@ -150,33 +190,31 @@
<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: 240,000 Impressions</h4>
<h4>Target: 10,500,000 Impressions</h4>
<div class="progress">
<div class="fill pc-75"></div>
</div>
<h4>Actual: <span class="bad">84,302</span> Impressions</h4>
<div class="progress">
<div class="fill pc-35"></div>
<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>
<dt><h2>Pacing:</h2></dt>
<dd><h2>95</h2></dd>
<dl class="wide">
<dt><h3>Days Remaining:</h3></dt>
<dd><h3><span class="bad">4</span></h3></dd>
</dl>
<dl>
<dl class="wide">
<dt>Delivery:</dt>
<dd class="bad">3% (Low)</dd>
<dt>Lifetime Budget:</dt>
<dd>$7000.00</dd>
<dd>10,500,000 Imps</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>
<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>
@@ -239,23 +277,91 @@
</table>
</div>
<script type="text/javascript" charset="utf-8">
var chart,
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).next('tr.detailed-summary').toggle();
$(this).toggleClass('open').next('tr.detailed-summary').toggleClass('open').toggle();
});
chart = Highcharts.Chart({
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',
defaultSeriesType: 'area',
spacingTop: 0,
spacingBottom: 0,
spacingRight: 0,
spacingLeft: 0,
type: 'area'
spacingLeft: 0
},
credits: disabled,
legend: disabled,
@@ -270,19 +376,27 @@
},
yAxis: {
labels: disabled,
max: 20,
// max: 20,
title: noText
},
series: [{
name: '',
data: [-15, -8, 4, 6, 2, 12, 25, 40, 31, 10, -1, -20, -55, -17, 20, 25, 40, 61, 30]
},{
name: '',
data: [31, 10, -1, -20, -55, -17, 20, 25, 40, 61, 30, -15, -8, 4, 6, 2, 12, 25, 40]
},{
name: '',
data: [4, 6, 2, 12, 25, -20, -55, -17, 20, 25, 40, 61, 30, 40, 10, 4, 5, -3, 4, 50]
}]
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>
presets.html
+109
View File
@@ -0,0 +1,109 @@
<!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>LUXr Prototype - Triage Screen</title>
<link rel="stylesheet" href="css/css.css" type="text/css" charset="utf-8" />
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/js.js" type="text/javascript" charset="utf-8"></script>
</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>
<div id="results">
<!-- <div class="campaign">
<h1>Pacing: 72</h1>
<h2><span class="okay"></span> Health: 83%</h2>
<ul>
<li>Targeting is narrow <a href="#">Change targeting</a></li>
</ul>
<a href="#" class="cta" title="Go to detailed campaign view">&#x27A1;</a>
</div>
<div class="campaign">
<h1><span class="bad"></span> Health: 61%</h1>
<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>
<a href="#" class="cta" title="Go to detailed campaign view">&#x27A1;</a>
</div>
<div class="campaign">
<h1>Pacing: 108</h1>
<h2><span class="good"></span> Health: 94%</h2>
<ul>
<li>CPM is good.</li>
<li>Targeting is good.</li>
</ul>
<a href="#" class="cta" title="Go to detailed campaign view">&#x27A1;</a>
</div>
<div class="campaign">
<h1>2 hours left</h1>
<h2><span class="bad"></span> Health: 54%</h2>
<ul>
<li>Targeting is narrow <a href="#">Change targeting</a></li>
</ul>
<a href="#" class="cta" title="Go to detailed campaign view">&#x27A1;</a>
</div> -->
</div>
</div>
<script type="text/javascript" charset="utf-8">
$(function(){
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;
});
});
</script>
</body>
</html>