htdocs/cacher: fix hits graph

git-svn-id: svn://svn.lighttpd.net/xcache/trunk@1084 c26eb9a1-5813-0410-bd6c-c2e55f420ca7

htdocs/cacher/cacher.css

@@ -5,18 +5,15 @@ td, th { white-space: pre; }
 .pvalue { background: limegreen; }
 
 .blocksgraph { height: 13px; }
-.blocksgraph div { float: left; height: 3px; width: 4px; border: solid gray; border-width: 0 0 1px 0; }
+.blocksgraph div { float: left; height: 3px; width: 4px; border: 0 solid gray; border-width: 0 0 1px 0; }
 .blocksgraph { border: 1px solid gray; border-bottom: 0; }
 .percent *, .blocksgraph *, .hitsgraph * { font-size: 1px; font-height: 1px; }
 
 .hitsgraph { margin: auto; }
-.hitsgraph div { float: left; width: 2px; height: 100%; }
-.hitsgraph div:hover { background: gray; }
-.hitsgraph div div { float: none; width: 100%; }
-.hitsgraph div div.barf { border: 0 solid gray; border-width: 1px 0 0 0; }
-.hitsgraph div div.barv { border: 0 solid gray; border-width: 0 0 1px 0; }
-.hitsgraph div div.barf.active { border-color: yellow; }
-.hitsgraph div div.barv.active { border-color: yellow; }
+.hitsgraph a { float: left; border: 0 solid gray; }
+.hitsgraph a.active { border-top-color: yellow; }
+.hitsgraph a:hover { background: gray; }
+.hitsgraph a div { float: none; }
 
 dl { overflow: hidden; }
 dt { font-weight: bold; clear: both; float: left; width: 100px; text-align: right; margin: 0; }

htdocs/cacher/index.php

@@ -84,16 +84,16 @@ function bar_hits_percent($v, $percent, $active) // {{{
 	$r = 220 + (int) ($percent * 25);
 	$g = $b = 220 - (int) ($percent * 220);
 	$percent = (int) ($percent * 100);
-	$a = $active ? ' active' : '';
-	$height = 20;
+	$a = $active ? ' class="active"' : '';
+	$height = 20 - 1 * 2;
 	$valueHeight = ceil($height * $percent / 100);
 	$paddingHeight = $height - $valueHeight;
 	$valueHeight = $valueHeight ? $valueHeight . "px" : 0;
 	$paddingHeight = $paddingHeight ? $paddingHeight . "px" : 0;
-	return '<div title="' . $v . '">'
-		. '<div class="barf' . $a . '" style="height: ' . $paddingHeight . '"></div>'
-		. '<div class="barv' . $a . '" style="background: rgb(' . "$r,$g,$b" . '); height: ' . $valueHeight . '"></div>'
-		. '</div>';
+	return '<a title="' . $v . '" href="javascript:;"' . $a . '>'
+		. ($paddingHeight ? '<div style="height: ' . $paddingHeight . '"></div>' : '')
+		. ($valueHeight ? '<div style="background: rgb(' . "$r,$g,$b" . '); height: ' . $valueHeight . '"></div>' : '')
+		. '</a>';
 }
 // }}}
 function get_cache_hits_graph($ci, $key) // {{{
@@ -109,10 +109,22 @@ function get_cache_hits_graph($ci, $key) // {{{
 		$max = 1;
 	}
 	$t = (time() / (60 * 60)) % 24;
+
 	$html = array();
+	static $cssOut = false;
+	if (!$cssOut) {
+		$cssOut = true;
+		$html[] = '<style type="text/css">';
+		$html[] = '.hitsgraph a { width: 2px; height: 20px; border-top-width: 1px; border-bottom-width: 1px; }';
+		$html[] = '</style>';
+	}
+
+	$width = count($ci[$key]) * 2;
+	$html[] = '<div class="hitsgraph" style="width: ' . $width . 'px">';
 	foreach ($ci[$key] as $i => $v) {
 		$html[] = bar_hits_percent($v, $v / $max, $i == $t);
 	}
+	$html[] = "</div>";
 	return implode('', $html);
 }
 // }}}

htdocs/cacher/sub/summary.tpl.php

@@ -66,7 +66,6 @@ TR;
 		$hits_avg_h     = number_format(array_avg($ci['hits_by_hour']), 2);
 		$hits_avg_s     = number_format(array_avg($ci['hits_by_second']), 2);
 		$hits_graph_h   = get_cache_hits_graph($ci, 'hits_by_hour');
-		$hits_graph_h_w = count($ci['hits_by_hour']) * 2;
 
 		if (!empty($ci['istotal'])) {
 			$ci['status']       = '-';
@@ -112,7 +111,7 @@ TR;
 		></td>
 		<td>{$ci['status']}</td>
 		<td align="right">{$ci['hits']}</td>
-		<td><div class="hitsgraph" style="width: {$hits_graph_h_w}px">{$hits_graph_h}</div></td>
+		<td>{$hits_graph_h}</td>
 		<td align="right">{$hits_avg_h}</td>
 		<td align="right">{$hits_avg_s}</td>
 		<td align="right">{$ci['updates']}</td>