diff --git a/css/matrix.css b/css/matrix.css index e75a8b8..3598863 100644 --- a/css/matrix.css +++ b/css/matrix.css @@ -3,7 +3,7 @@ padding: 0; } body { - font: 75%/1.5 "Helvetica Neue", Helvetica, sans-serif; + font: 75%/1.3 "Helvetica Neue", Helvetica, sans-serif; } h1, h2, h3, h4, h5, h6 { margin: 0; @@ -21,10 +21,53 @@ a { font-weight: bold; text-decoration: none; } +ul, ul li { + margin: 0; + padding: 0; +} +dl { + clear: both; + display: block; +} +dd { + text-align: left; +} + +table { + border: 1px solid #ccc; + border-collapse: collapse; +} +table th, +table td { + background: #eee; + border: 1px solid #ccc; + padding: 3px 6px; +} +table th { + font-size: 0.92em; + text-align: left; +} +table td { + background: transparent; + text-align: right; + vertical-align: top; +} +/* table th[class] { + text-align: center; +} +table td[class] { + text-align: left; +} */ +table tbody tr.open td { + border-bottom: 1px dotted #ccc; + border-top: 1px dotted #ccc; +} + + #container { margin: 0 auto; padding: 20px 0 0; - width: 900px; + width: 1000px; } .left-col { @@ -35,232 +78,54 @@ a { margin-left: 190px; } -#collapsed-lis h3 { - line-height: 35px; +table tbody tr:nth-child(even) td { + background: #f9f9f9; } -ul.li-thumbs, -ul.li-thumbs li { - list-style-type: none; - margin: 0; - padding: 0; -} -ul.li-thumbs li { - background: #f6f6f6; - border: 1px solid #ddd; - cursor: pointer; - display: block; - font-size: 10px; - margin-bottom: 1em; - min-height: 35px; - padding: 10px; -} -ul.li-thumbs li.current { - border: 4px solid #aaa; - border-right-width: 0; - margin: -2px -18px 0.8em -2px; - padding: 9px; -} -ul.li-thumbs .progress { - width: 100%; -} -form { - margin-bottom: 1em; -} -form * { - /* border-color: #ccc !important; */ -} - -div#campaigns table { - border: 3px solid #aaa; - border-top-width: 4px; -} - -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; +table th.name, +table td.name { + border-right-width: 3px; + text-align: left; vertical-align: middle; } -table tbody tr.open td { - border-bottom: 1px dotted #ccc; - border-top: 1px dotted #ccc; +table td.name h4 { + font-weight: normal; + max-width: 140px; } -/* table tbody tr:nth-child(odd) td { - background: #f9f9f9; +table tbody h3 { + margin-left: 0.5em; } -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; -} - -div#campaigns .summary { - width: auto; -} -.summary h1 { - margin: 0 0.75em; -} -.summary h1 span { - font-size:14px; - font-weight:normal; -} -.summary h4 { - margin-bottom: 0.5em; +table tbody h5 { + color: #6d6d6d; + margin-bottom: 0.2em; } +table th.go-to, table td.go-to { - text-align: center; -} -table td.go-to a { - color: #930; - font-size: 11px; - font-weight: normal; - text-decoration: underline; -} -a.go-to { - font-size: 25px; - font-weight: normal; - margin-right: 8px; -} - -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; -} -div.expanded-detail > div.stats { - width: 323px; -} -div.expanded-detail > div.actions { - width: 223px; -} -.img-wrap h4 { text-align: right; } -dl { - clear: both; - display: block; -} -.stats { - font-size: 13px; -} -.stats dt { - float: left; - text-align: right; - width: 160px; -} -.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; +table td.go-to h3 a { + border: 1px solid #aaa; border-radius: 4px; - -moz-border-radius: 4px; - -webkit-border-radius: 4px; -} -.bad { background: transparent; color: #d70101; } -.okay { background: transparent; color: #f65405; } -.good { background: transparent; color: #009A00; } -.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; + display: inline-block; + font-size: 25px; + padding: 5px 6px; + background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, rgb(213, 214, 216)), color-stop(1, rgb(239, 241, 240))); + background-image: -moz-linear-gradient(center bottom, rgb(213, 214, 216) 0%, rgb(239, 241, 240) 100%); } +/* Progress indictators */ .progress { background: #eee; - border: 1px solid #ccc; - border-right-color: #014382; + border: 1px solid #999; float: left; - width: 100px; - height: 15px; + margin-bottom: 0.2em; position: relative; + width: 100px; + height: 8px; } .progress .fill { - height: 15px; + height: 8px; } .progress .pc-3.fill { background-color: red; @@ -287,13 +152,118 @@ a.btn { width: 100%; } .vr { - border-right: 1px solid #000; + border-right: 1px solid #989898; margin: -2px 0; - height: 19px; + height: 12px; width: 0; position: absolute; } .goal { color: #014382; text-align: right; -} \ No newline at end of file +} +.progress .fill.bad { background-color: #ff0000; } +.progress .fill.okay { background-color: #fdbf00; } +.progress .fill.good { background-color: #b6de6b; } +.progress .fill.status { background-color: #00a0f0; } + +.bad { background: transparent; color: #ff0000; } +.okay { background: transparent; color: #f65405; } +.good { background: transparent; color: #009A00; } +.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; +} + +.alert { + background: url(../img/error-sm.gif) no-repeat 2px center; + padding-left: 18px; +} + +table td.expanded-detail-cell { + padding: 0; + text-align: left; +} +div.expanded-detail { + padding: 6px 10px; +} +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 { + width: 313px; +} + +.stats, +.actions { + font-size: 11px; +} +.stats h2 { + margin-bottom: 0.5em; +} +.stats dt { + float: left; + text-align: right; + width: 90px; +} +.stats dt h2 { + display: inline-block; +} +.stats dd { + font-weight: bold; + margin: 0 0 10px 105px; +} + +.graphic label, +.graphic select { + font-weight: bold; +} + +.actions h3 { + border-bottom: 1px solid #ccc; + margin-bottom: 5px; + padding-bottom: 5px; +} +.actions ul { + margin-left: 0; + padding-left: 1.75em; +} +.actions ul li { + margin-bottom: 0.5em; +} +.actions ul li a { + color: #930; + text-decoration: underline; +} +a.btn { + display: inline-block; + border: 1px solid; + background: #ccc; + padding: 0 4px; + border-radius: 4px; + -moz-border-radius: 4px; + -webkit-border-radius: 4px; +} + +.chart { + width:300px; + height:200px; +} + diff --git a/img/arrow.png b/img/arrow.png new file mode 100644 index 0000000..109c108 Binary files /dev/null and b/img/arrow.png differ diff --git a/matrix_li.html b/matrix_li.html index 62aa635..9d298d4 100644 --- a/matrix_li.html +++ b/matrix_li.html @@ -18,320 +18,359 @@ - + + + - - - - + + + - + - - - - - - + + + + + + - + - - - - - - - + + + + + + + - + - - - - - - - + + + + + + + - + - - - - - - - + + + + + + + - + - - - - - - - + + + + + + + - + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SummaryLine Item ImpsSpendRevenue Clicks ConversionsRevenueProfitMedia CostDays Into FlightCTRCampaigns
-

2010 Q4 P&G Kitchen Products

-
-
-
4,494,033 / 6,391,304
-
-
-
-
-
10,500,000
-
-

70%

+
+

Bank of America — March (26586)

+ 		+

8,101,365

+
/ 13,923,359
+
+
+
4,494,0332,99324$11,333.27$3,138.35$8,194.92 +

$14,119.68

+
N/A
+ 		+

$27,266.72

+
/ $41,770,077
+
+
+
+
+ 		+

2,567

+
N/A
+ 		+

0

+
N/A
+ 		+

27

+
/ 35
+
+
+
+
+ 		+

0.028%

+
N/A
+ 		- - 5 Campaigns » +

2 ➡
-
+
+

Bank of America — March (26586)

+
+
State:
+
Active
+
Flight dates:
+
03/17/2011 — 04/22/2011
+
Lifetime budget:
+
10,500,000 imps
+
Daily budget:
+
456,522 imps
+
Revenue:
+
$3.00 CPM
+
Advertiser goals:
+
N/A
+
User frequency:
+
1 imp per user per day
+
+
+
+
-
-
-

Daily Average:

-

409,592

-
-
-
Lifetime Budget:
-
10,500,000 imps
-
Daily Budget:
-
456,522 imps
-
-
- +

Alerts and Suggestions

+
-
-
-
5,771,250 / 7,125,000
-
-
-
-
-
7,500,000
-
-

81%

+
+

Sleepy's Q4 2011 (28632)

+ 		+

9,479,766

+
/ 97,871,051
+
+
+
5,771,2502,83171$3,558.10$2,110.00$1,448.10➡ +

$5,518.36

+
N/A
+ 		+

$7,583.81

+
/ $78,296.84
+
+
+
+
+ 		+

860

+
/ 17,617
+
+
+
+
+ 		+

0

+
N/A
+ 		+

10

+
/ 91
+
+
+
+
+ 		+

0.009%

+
/ 0.018%
+ 		+

3 ➡

+
-
-
-
2,868,750 / 3,375,000
-
-
-
-
-
4,500,000
-
-

85%

+
+

Essilor (21196)

+ 		+

9,742,081

+
/ 15,618,748
+
+
+
2,868,750790108$7000.00$5,500.00$1,500.00➡ +

$4,149.12

+
N/A
+ 		+

$8,767.87

+
/ $14,056.87
+
+
+
+
+ 		+

1,961

+
N/A
+ 		+

0

+
N/A
+ 		+

45

+
/ 90
+
+
+
+
+ 		+

0.020%

+
N/A
+ 		+

1 ➡

+
+ +

All Saints (22756)

+
-
-
3,523,500 / 4,050,000
-
-
-
-
-
4,500,000
-
-

87%

+

12,596,029

+
N/A
3,523,50000$1,822.50$1,822.48$0.02➡ +

$12,523.86

+
N/A
+ 		+

$713,450.00

+
/ $900,000
+
+
+
+
+ 		+

30,312

+
N/A
+ 		+

14,269

+
18,000
+
+
+
+
+ 		+

58

+
/ 72
+
+
+
+
+ 		+

0.05%

+
N/A
+ 		+

1 ➡

+
+ +

MattressLand (21194)

+
-
-
-
190,574 / 200,000
-
-
-
-
-
3,000,000
-
-

95%

+

19,479,766

+
/ 97,871,051
+
+
+
190,5742110$930.00$657.96$272.04➡ +

$4,149.12

+
N/A
+ 		+
+

$14,876.40

+
/ $78,296.84
+
+
+
+
+
+ 		+

3,167

+
N/A
+ 		+

0

+
N/A
+ 		+

8

+
/ 30
+
+
+
+
+ 		+

0.020%

+
/ 0.018%
+ 		+

2 ➡

+
+ +

AT&T (22754)

+
-
-
558,921 / 550,000
-
-
-
-
-
550,000
-
-

103%

+

1,246,021

+
N/A
558,921335195$3,752.58$2,710.11$1,042.47➡
-
-
-
2,225,572 / 2,300,000
-
-
-
-
-
2,500,000
-
-

96%

-
+ 		+

$1,131.86

+
N/A
2,225,5721,12199$5,570.49$1,994.94$3,575.55➡
+
-
-
-
190,574 / 200,000
-
-
-
-
-
3,000,000
-
-

95%

+

$3,115.00

+
/ $3,900.00
+
+
+
190,5742110$930.00$657.96$272.04➡
-
-
-
2,225,572 / 2,300,000
-
-
-
-
-
2,500,000
-
-

96%

+
+

1,312

+
N/A
+ 		+

0

+
N/A
+ 		+

58

+
/ 72
+
+
+
2,225,5721,12199$5,570.49$1,994.94$3,575.55➡
-
-
-
-
190,574 / 200,000
-
-
-
-
-
3,000,000
-
-

95%

-
-
+ 		+

0.019%

+
N/A
190,5742110$930.00$657.96$272.04➡
-
-
-
558,921 / 550,000
-
-
-
-
-
550,000
-
-

103%

-
+ 		+

3 ➡

558,921335195$3,752.58$2,710.11$1,042.47➡
-
-
-
2,225,572 / 2,300,000
-
-
-
-
-
2,500,000
-
-

96%

-
- 		2,225,5721,12199$5,570.49$1,994.94$3,575.55➡
@@ -349,6 +388,7 @@ pacing = Highcharts.Chart({ chart: { + backgroundColor: 'transparent', renderTo: 'pacing', spacingTop: 5, spacingBottom: 5, @@ -361,19 +401,20 @@ plotOptions: { series: { marker: disabled, - pointStart: Date.UTC(2010, 2, 8), + pointStart: Date.UTC(2010, 2, 17), pointInterval: 24 * 3600 * 1000 // one day } }, - title: { - text: 'Daily Impressions' - }, + title: noText, xAxis: { type: 'datetime' }, yAxis: { + gridLineWidth: 0, + lineColor: '#ccc', maxPadding: 0.01, min: 0, + tickWidth: 1, title: noText }, series: [