adding link to campaigns, changing some numbers

This commit is contained in:
philgran
2011-04-13 15:02:43 -04:00
parent 1637683ea6
commit 06e897a1f4
3 changed files with 519 additions and 76 deletions
+6 -2
View File
@@ -85,6 +85,11 @@ table h1 {
font-size:14px;
font-weight:normal;
}
.go-to {
font-size: 25px;
font-weight: normal;
margin-right: 8px;
}
img.sparkline,
#sparkline {
@@ -234,5 +239,4 @@ a.btn {
.goal {
color: #014382;
text-align: right;
}
}
+87 -74
View File
@@ -25,6 +25,7 @@
<th>Revenue</th>
<th>Profit</th>
<th>Media Cost</th>
<th></th>
</tr>
</thead>
<tbody>
@@ -48,6 +49,7 @@
<td>$11,333.27</td>
<td>$3,138.35</td>
<td>$8,194.92</td>
<td><a href="#" class="go-to" title="View campaigns on this line item">&#x27A1;</a></td>
</tr>
<tr class="detailed-summary">
<td class="expanded-detail-cell" colspan="9">
@@ -79,6 +81,72 @@
</div>
</td>
</tr>
<tr>
<td class="summary">
<div>
<div style="float:left;">
<h6><span class="okay">5,771,250</span> / 7,125,000</h6>
<div class="progress">
<div class="vr" style="left:95%"></div>
<div class="fill pc-35" style="width:76%;"></div>
</div>
<h6 class="goal">7,500,000</h6>
</div>
<h1>81% <span>1 Day Remaining</span></h1>
</div>
</td>
<td>5,771,250</td>
<td>2,831</td>
<td>71</td>
<td>$3,558.10</td>
<td>$2,110.00</td>
<td>$1,448.10</td>
<td><a href="#" class="go-to" title="View campaigns on this line item">&#x27A1;</a></td>
</tr>
<tr>
<td class="summary">
<div>
<div style="float:left;">
<h6><span class="okay">2,868,750</span> / 3,375,000</h6>
<div class="progress">
<div class="vr" style="left:75%"></div>
<div class="fill pc-35" style="width:63%;"></div>
</div>
<h6 class="goal">4,500,000</h6>
</div>
<h1>85% <span>5 Days Remaining</span></h1>
</div>
</td>
<td>2,868,750</td>
<td>790</td>
<td>108</td>
<td>$7000.00</td>
<td>$5,500.00</td>
<td>$1,500.00</td>
<td><a href="#" class="go-to" title="View campaigns on this line item">&#x27A1;</a></td>
</tr>
<tr>
<td class="summary">
<div>
<div style="float:left;">
<h6><span class="okay">3,523,500</span> / 4,050,000</h6>
<div class="progress">
<div class="vr" style="left:90%"></div>
<div class="fill pc-35" style="width:78%;"></div>
</div>
<h6 class="goal">4,500,000</h6>
</div>
<h1>87% <span>2 Days Remaining</span></h1>
</div>
</td>
<td>3,523,500</td>
<td>0</td>
<td>0</td>
<td>$1,822.50</td>
<td>$1,822.48</td>
<td>$0.02</td>
<td><a href="#" class="go-to" title="View campaigns on this line item">&#x27A1;</a></td>
</tr>
<tr>
<td class="summary">
<div>
@@ -101,6 +169,7 @@
<td>$930.00</td>
<td>$657.96</td>
<td>$272.04</td>
<td><a href="#" class="go-to" title="View campaigns on this line item">&#x27A1;</a></td>
</tr>
<tr>
<td class="summary">
@@ -122,6 +191,7 @@
<td>$3,752.58</td>
<td>$2,710.11</td>
<td>$1,042.47</td>
<td><a href="#" class="go-to" title="View campaigns on this line item">&#x27A1;</a></td>
</tr>
<tr>
<td class="summary">
@@ -143,48 +213,7 @@
<td>$5,570.49</td>
<td>$1,994.94</td>
<td>$3,575.55</td>
</tr>
<tr>
<td class="summary">
<div>
<div style="float:left;">
<h6><span class="okay">2,868,750</span> / 3,375,000</h6>
<div class="progress">
<div class="vr" style="left:75%"></div>
<div class="fill pc-35" style="width:63%;"></div>
</div>
<h6 class="goal">4,500,000</h6>
</div>
<h1>85% <span>5 Days Remaining</span></h1>
</div>
</td>
<td>4,500,000</td>
<td>0</td>
<td>0</td>
<td>$1,822.50</td>
<td>$1,822.48</td>
<td>$0.02</td>
</tr>
<tr>
<td class="summary">
<div>
<div style="float:left;">
<h6><span class="good">2,225,572</span> / 2,300,000</h6>
<div class="progress">
<div class="vr" style="left:92%"></div>
<div class="fill pc-100" style="width:89%;"></div>
</div>
<h6 class="goal">2,500,000</h6>
</div>
<h1>96% <span>2 Days Remaining</span></h1>
</div>
</td>
<td>2,225,572</td>
<td>1,121</td>
<td>99</td>
<td>$5,570.49</td>
<td>$1,994.94</td>
<td>$3,575.55</td>
<td><a href="#" class="go-to" title="View campaigns on this line item">&#x27A1;</a></td>
</tr>
<tr>
<td class="summary">
@@ -208,27 +237,29 @@
<td>$930.00</td>
<td>$657.96</td>
<td>$272.04</td>
<td><a href="#" class="go-to" title="View campaigns on this line item">&#x27A1;</a></td>
</tr>
<tr>
<td class="summary">
<div>
<div style="float:left;">
<h6><span class="okay">2,868,750</span> / 3,375,000</h6>
<h6><span class="good">2,225,572</span> / 2,300,000</h6>
<div class="progress">
<div class="vr" style="left:75%"></div>
<div class="fill pc-35" style="width:63%;"></div>
<div class="vr" style="left:92%"></div>
<div class="fill pc-100" style="width:89%;"></div>
</div>
<h6 class="goal">4,500,000</h6>
<h6 class="goal">2,500,000</h6>
</div>
<h1>85% <span>5 Days Remaining</span></h1>
<h1>96% <span>2 Days Remaining</span></h1>
</div>
</td>
<td>4,500,000</td>
<td>0</td>
<td>0</td>
<td>$1,822.50</td>
<td>$1,822.48</td>
<td>$0.02</td>
<td>2,225,572</td>
<td>1,121</td>
<td>99</td>
<td>$5,570.49</td>
<td>$1,994.94</td>
<td>$3,575.55</td>
<td><a href="#" class="go-to" title="View campaigns on this line item">&#x27A1;</a></td>
</tr>
<tr>
<td class="summary">
@@ -252,6 +283,7 @@
<td>$930.00</td>
<td>$657.96</td>
<td>$272.04</td>
<td><a href="#" class="go-to" title="View campaigns on this line item">&#x27A1;</a></td>
</tr>
<tr>
<td class="summary">
@@ -273,6 +305,7 @@
<td>$3,752.58</td>
<td>$2,710.11</td>
<td>$1,042.47</td>
<td><a href="#" class="go-to" title="View campaigns on this line item">&#x27A1;</a></td>
</tr>
<tr>
<td class="summary">
@@ -294,27 +327,7 @@
<td>$5,570.49</td>
<td>$1,994.94</td>
<td>$3,575.55</td>
</tr>
<tr>
<td class="summary">
<div>
<div style="float:left;">
<h6><span class="okay">2,868,750</span> / 3,375,000</h6>
<div class="progress">
<div class="vr" style="left:75%"></div>
<div class="fill pc-35" style="width:63%;"></div>
</div>
<h6 class="goal">4,500,000</h6>
</div>
<h1>85% <span>5 Days Remaining</span></h1>
</div>
</td>
<td>4,500,000</td>
<td>0</td>
<td>0</td>
<td>$1,822.50</td>
<td>$1,822.48</td>
<td>$0.02</td>
<td><a href="#" class="go-to" title="View campaigns on this line item">&#x27A1;</a></td>
</tr>
</tbody>
</table>
+426
View File
@@ -0,0 +1,426 @@
<!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">
<h1>Line Items</h1>
<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></th>
</tr>
</thead>
<tbody>
<tr>
<td class="summary" style="width:340px">
<div>
<div style="float:left;">
<h6><span class="bad">4,494,033</span> / 6,391,304</h6>
<div class="progress">
<div class="vr" style="left:60%"></div>
<div class="fill pc-10" style="width:42%"></div>
</div>
<h6 class="goal">10,500,000</h6>
</div>
<h1>70% &nbsp;<span>10 Days Remaining</span></h1>
</div>
</td>
<td>4,494,033</td>
<td>2,993</td>
<td>24</td>
<td>$11,333.27</td>
<td>$3,138.35</td>
<td>$8,194.92</td>
<td><a href="#" class="go-to" title="View campaigns on this line item">&#x27A1;</a></td>
</tr>
<tr class="detailed-summary">
<td class="expanded-detail-cell" colspan="9">
<div class="expanded-detail clearfix">
<div class="img-wrap">
<div id="pacing" class="chart">
</div>
</div>
<div class="stats">
<dl>
<dt><h2>Daily Average:</h2></dt>
<dd><h2>409,592</h2></dd>
</dl>
<dl>
<dt>Lifetime Budget:</dt>
<dd>10,500,000 imps</dd>
<dt>Daily Budget:</dt>
<dd>456,522 imps</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="okay">5,771,250</span> / 7,125,000</h6>
<div class="progress">
<div class="vr" style="left:95%"></div>
<div class="fill pc-35" style="width:76%;"></div>
</div>
<h6 class="goal">7,500,000</h6>
</div>
<h1>81% <span>1 Day Remaining</span></h1>
</div>
</td>
<td>5,771,250</td>
<td>2,831</td>
<td>71</td>
<td>$3,558.10</td>
<td>$2,110.00</td>
<td>$1,448.10</td>
<td><a href="#" class="go-to" title="View campaigns on this line item">&#x27A1;</a></td>
</tr>
<tr>
<td class="summary">
<div>
<div style="float:left;">
<h6><span class="okay">2,868,750</span> / 3,375,000</h6>
<div class="progress">
<div class="vr" style="left:75%"></div>
<div class="fill pc-35" style="width:63%;"></div>
</div>
<h6 class="goal">4,500,000</h6>
</div>
<h1>85% <span>5 Days Remaining</span></h1>
</div>
</td>
<td>2,868,750</td>
<td>790</td>
<td>108</td>
<td>$7000.00</td>
<td>$5,500.00</td>
<td>$1,500.00</td>
<td><a href="#" class="go-to" title="View campaigns on this line item">&#x27A1;</a></td>
</tr>
<tr>
<td class="summary">
<div>
<div style="float:left;">
<h6><span class="okay">3,523,500</span> / 4,050,000</h6>
<div class="progress">
<div class="vr" style="left:90%"></div>
<div class="fill pc-35" style="width:78%;"></div>
</div>
<h6 class="goal">4,500,000</h6>
</div>
<h1>87% <span>2 Days Remaining</span></h1>
</div>
</td>
<td>3,523,500</td>
<td>0</td>
<td>0</td>
<td>$1,822.50</td>
<td>$1,822.48</td>
<td>$0.02</td>
<td><a href="#" class="go-to" title="View campaigns on this line item">&#x27A1;</a></td>
</tr>
<tr>
<td class="summary">
<div>
<div>
<div style="float:left;">
<h6><span class="good">190,574</span> / 200,000</h6>
<div class="progress">
<div class="vr" style="left:6.6%"></div>
<div class="fill pc-100" style="width:6%;"></div>
</div>
<h6 class="goal">3,000,000</h6>
</div>
<h1>95% &nbsp;<span>28 Days Remaining</span></h1>
</div>
</div>
</td>
<td>190,574</td>
<td>211</td>
<td>0</td>
<td>$930.00</td>
<td>$657.96</td>
<td>$272.04</td>
<td><a href="#" class="go-to" title="View campaigns on this line item">&#x27A1;</a></td>
</tr>
<tr>
<td class="summary">
<div>
<div style="float:left;">
<h6><span class="good">558,921</span> / 550,000</h6>
<div class="progress">
<div class="vr" style="left:100%"></div>
<div class="fill pc-100" style="width:103%;"></div>
</div>
<h6 class="goal">550,000</h6>
</div>
<h1>103% <span>Ended</span></h1>
</div>
</td>
<td>558,921</td>
<td>335</td>
<td>195</td>
<td>$3,752.58</td>
<td>$2,710.11</td>
<td>$1,042.47</td>
<td><a href="#" class="go-to" title="View campaigns on this line item">&#x27A1;</a></td>
</tr>
<tr>
<td class="summary">
<div>
<div style="float:left;">
<h6><span class="good">2,225,572</span> / 2,300,000</h6>
<div class="progress">
<div class="vr" style="left:92%"></div>
<div class="fill pc-100" style="width:89%;"></div>
</div>
<h6 class="goal">2,500,000</h6>
</div>
<h1>96% <span>2 Days Remaining</span></h1>
</div>
</td>
<td>2,225,572</td>
<td>1,121</td>
<td>99</td>
<td>$5,570.49</td>
<td>$1,994.94</td>
<td>$3,575.55</td>
<td><a href="#" class="go-to" title="View campaigns on this line item">&#x27A1;</a></td>
</tr>
<tr>
<td class="summary">
<div>
<div>
<div style="float:left;">
<h6><span class="good">190,574</span> / 200,000</h6>
<div class="progress">
<div class="vr" style="left:6.6%"></div>
<div class="fill pc-100" style="width:6%;"></div>
</div>
<h6 class="goal">3,000,000</h6>
</div>
<h1>95% &nbsp;<span>28 Days Remaining</span></h1>
</div>
</div>
</td>
<td>190,574</td>
<td>211</td>
<td>0</td>
<td>$930.00</td>
<td>$657.96</td>
<td>$272.04</td>
<td><a href="#" class="go-to" title="View campaigns on this line item">&#x27A1;</a></td>
</tr>
<tr>
<td class="summary">
<div>
<div style="float:left;">
<h6><span class="good">2,225,572</span> / 2,300,000</h6>
<div class="progress">
<div class="vr" style="left:92%"></div>
<div class="fill pc-100" style="width:89%;"></div>
</div>
<h6 class="goal">2,500,000</h6>
</div>
<h1>96% <span>2 Days Remaining</span></h1>
</div>
</td>
<td>2,225,572</td>
<td>1,121</td>
<td>99</td>
<td>$5,570.49</td>
<td>$1,994.94</td>
<td>$3,575.55</td>
<td><a href="#" class="go-to" title="View campaigns on this line item">&#x27A1;</a></td>
</tr>
<tr>
<td class="summary">
<div>
<div>
<div style="float:left;">
<h6><span class="good">190,574</span> / 200,000</h6>
<div class="progress">
<div class="vr" style="left:6.6%"></div>
<div class="fill pc-100" style="width:6%;"></div>
</div>
<h6 class="goal">3,000,000</h6>
</div>
<h1>95% &nbsp;<span>28 Days Remaining</span></h1>
</div>
</div>
</td>
<td>190,574</td>
<td>211</td>
<td>0</td>
<td>$930.00</td>
<td>$657.96</td>
<td>$272.04</td>
<td><a href="#" class="go-to" title="View campaigns on this line item">&#x27A1;</a></td>
</tr>
<tr>
<td class="summary">
<div>
<div style="float:left;">
<h6><span class="good">558,921</span> / 550,000</h6>
<div class="progress">
<div class="vr" style="left:100%"></div>
<div class="fill pc-100" style="width:103%;"></div>
</div>
<h6 class="goal">550,000</h6>
</div>
<h1>103% <span>Ended</span></h1>
</div>
</td>
<td>558,921</td>
<td>335</td>
<td>195</td>
<td>$3,752.58</td>
<td>$2,710.11</td>
<td>$1,042.47</td>
<td><a href="#" class="go-to" title="View campaigns on this line item">&#x27A1;</a></td>
</tr>
<tr>
<td class="summary">
<div>
<div style="float:left;">
<h6><span class="good">2,225,572</span> / 2,300,000</h6>
<div class="progress">
<div class="vr" style="left:92%"></div>
<div class="fill pc-100" style="width:89%;"></div>
</div>
<h6 class="goal">2,500,000</h6>
</div>
<h1>96% <span>2 Days Remaining</span></h1>
</div>
</td>
<td>2,225,572</td>
<td>1,121</td>
<td>99</td>
<td>$5,570.49</td>
<td>$1,994.94</td>
<td>$3,575.55</td>
<td><a href="#" class="go-to" title="View campaigns on this line item">&#x27A1;</a></td>
</tr>
</tbody>
</table>
</div>
<script type="text/javascript" charset="utf-8">
var pacing,
disabled = { enabled: false },
noText = { text: null };
$(function(){
$('table tr').not('.detailed-summary').bind('click', function(){
$(this).toggleClass('open').next('tr.detailed-summary').toggleClass('open').toggle();
});
pacing = Highcharts.Chart({
chart: {
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, 8),
pointInterval: 24 * 3600 * 1000 // one day
}
},
title: {
text: 'Daily Impressions'
},
xAxis: {
type: 'datetime'
},
yAxis: {
maxPadding: 0.01,
min: 0,
title: noText
},
series: [
{
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, 1014531, 2155429, 2519643, 2606619, 2688038, 2800402, 3078928, 3209188, 3539023, 3892435, 4142545, 4494033, 4494033]
// data: [324408, 1014531, 2155429, 2519643, 2606619, 2688038, 2800402, 3078928, 3209188, 3539023, 3892435, 4142545, 4494033, 5443961, 5887381, 6417642, 7020121, 7656066, 8002364, 8002364, 8199081]
}
]
});
// 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: '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, 1014531, 1015429, 1309643, 1606619, 1906038, 2350402, 2778928, 3209188, 3639023, 4092435, 4542545, 4994033, 5443961, 5887381, 6417642, 7020121, 7656066, 8002364, 8002364, 8199081]
// }
// ]
// });
});
</script>
</body>
</html>