| 1533 |
richard |
1 |
<?php
|
|
|
2 |
//
|
|
|
3 |
// vnStat PHP frontend (c)2006-2010 Bjorge Dijkstra (bjd@jooz.net)
|
|
|
4 |
//
|
|
|
5 |
// This program is free software; you can redistribute it and/or modify
|
|
|
6 |
// it under the terms of the GNU General Public License as published by
|
|
|
7 |
// the Free Software Foundation; either version 2 of the License, or
|
|
|
8 |
// (at your option) any later version.
|
|
|
9 |
//
|
|
|
10 |
// This program is distributed in the hope that it will be useful,
|
|
|
11 |
// but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
|
12 |
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
|
13 |
// GNU General Public License for more details.
|
|
|
14 |
//
|
|
|
15 |
// You should have received a copy of the GNU General Public License
|
|
|
16 |
// along with this program; if not, write to the Free Software
|
|
|
17 |
// Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA 02111-1307 USA
|
|
|
18 |
//
|
|
|
19 |
//
|
| 1675 |
richard |
20 |
// see file COPYING or at http://www.gnu.org/licenses/gpl.html
|
| 1533 |
richard |
21 |
// for more information.
|
|
|
22 |
//
|
|
|
23 |
require 'config.php';
|
|
|
24 |
require 'localize.php';
|
|
|
25 |
require 'vnstat.php';
|
|
|
26 |
|
|
|
27 |
validate_input();
|
|
|
28 |
|
|
|
29 |
require "./themes/$style/theme.php";
|
|
|
30 |
|
|
|
31 |
function svg_create($width, $height)
|
|
|
32 |
{
|
|
|
33 |
header('Content-type: image/svg+xml');
|
|
|
34 |
print "<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\"?>\n";
|
|
|
35 |
print "<svg width=\"$width\" height=\"$height\" version=\"1.2\" baseProfile=\"tiny\" xmlns=\"http://www.w3.org/2000/svg\">\n";
|
|
|
36 |
print "<g style=\"shape-rendering: crispEdges\">\n";
|
|
|
37 |
}
|
|
|
38 |
|
|
|
39 |
function svg_end()
|
|
|
40 |
{
|
|
|
41 |
print "</g>\n";
|
|
|
42 |
print "</svg>\n";
|
|
|
43 |
}
|
|
|
44 |
|
|
|
45 |
function svg_options($options)
|
|
|
46 |
{
|
|
|
47 |
foreach ($options as $key => $value) {
|
|
|
48 |
print "$key=\"$value\" ";
|
|
|
49 |
}
|
|
|
50 |
}
|
|
|
51 |
|
|
|
52 |
function svg_group($options)
|
|
|
53 |
{
|
|
|
54 |
print "<g ";
|
|
|
55 |
svg_options($options);
|
|
|
56 |
print ">\n";
|
|
|
57 |
}
|
|
|
58 |
|
|
|
59 |
function svg_group_end()
|
|
|
60 |
{
|
|
|
61 |
print "</g>\n";
|
|
|
62 |
}
|
|
|
63 |
|
| 1675 |
richard |
64 |
function svg_text($x, $y, $text, $options = array())
|
|
|
65 |
{
|
| 1533 |
richard |
66 |
printf("<text x=\"%F\" y=\"%F\" ", $x, $y);
|
|
|
67 |
svg_options($options);
|
|
|
68 |
print ">$text</text>\n";
|
|
|
69 |
}
|
|
|
70 |
|
|
|
71 |
function svg_line($x1, $y1, $x2, $y2, $options = array())
|
|
|
72 |
{
|
|
|
73 |
printf("<line x1=\"%F\" y1=\"%F\" x2=\"%F\" y2=\"%F\" ", $x1, $y1, $x2, $y2);
|
|
|
74 |
svg_options($options);
|
|
|
75 |
print "/>\n";
|
|
|
76 |
}
|
|
|
77 |
|
| 1675 |
richard |
78 |
function svg_rect($x, $y, $w, $h, $options = array())
|
| 1533 |
richard |
79 |
{
|
|
|
80 |
printf("<rect x=\"%F\" y=\"%F\" width=\"%F\" height=\"%F\" ", $x, $y, $w, $h);
|
|
|
81 |
svg_options($options);
|
|
|
82 |
print "/>\n";
|
|
|
83 |
}
|
|
|
84 |
|
|
|
85 |
function svg_poly($points, $options = array())
|
|
|
86 |
{
|
|
|
87 |
print "<polygon points=\"";
|
|
|
88 |
for ($p = 0; $p < count($points); $p += 2) {
|
|
|
89 |
printf("%F,%F ", $points[$p], $points[$p+1]);
|
|
|
90 |
}
|
|
|
91 |
svg_options($options);
|
|
|
92 |
print "\"/>\n";
|
|
|
93 |
}
|
|
|
94 |
|
|
|
95 |
function allocate_color($colors)
|
|
|
96 |
{
|
|
|
97 |
$col['rgb'] = sprintf("#%02X%02X%02X", $colors[0], $colors[1], $colors[2]);
|
|
|
98 |
$col['opacity'] = sprintf("%F", (127 - $colors[3]) / 127);
|
|
|
99 |
return $col;
|
|
|
100 |
}
|
| 1675 |
richard |
101 |
|
| 1533 |
richard |
102 |
function init_image()
|
|
|
103 |
{
|
|
|
104 |
global $xlm, $xrm, $ytm, $ybm, $iw, $ih,$graph, $cl, $iface, $colorscheme, $style;
|
|
|
105 |
|
|
|
106 |
if ($graph == 'none')
|
|
|
107 |
return;
|
|
|
108 |
|
|
|
109 |
//
|
|
|
110 |
// image object
|
| 1675 |
richard |
111 |
//
|
| 1533 |
richard |
112 |
$xlm = 70;
|
|
|
113 |
$xrm = 20;
|
|
|
114 |
$ytm = 35;
|
|
|
115 |
$ybm = 60;
|
|
|
116 |
if ($graph == 'small')
|
|
|
117 |
{
|
|
|
118 |
$iw = 300 + $xrm + $xlm;
|
| 1675 |
richard |
119 |
$ih = 100 + $ytm + $ybm;
|
| 1533 |
richard |
120 |
}
|
|
|
121 |
else
|
|
|
122 |
{
|
|
|
123 |
$iw = 600 + $xrm + $xlm;
|
|
|
124 |
$ih = 200 + $ytm + $ybm;
|
|
|
125 |
}
|
| 1675 |
richard |
126 |
|
| 1533 |
richard |
127 |
svg_create($iw, $ih);
|
|
|
128 |
|
|
|
129 |
//
|
|
|
130 |
// colors
|
|
|
131 |
//
|
|
|
132 |
$cs = $colorscheme;
|
|
|
133 |
$cl['image_background'] = allocate_color($cs['image_background']);
|
|
|
134 |
$cl['background'] = allocate_color($cs['graph_background']);
|
|
|
135 |
$cl['background_2'] = allocate_color($cs['graph_background_2']);
|
|
|
136 |
$cl['grid_stipple_1'] = allocate_color($cs['grid_stipple_1']);
|
|
|
137 |
$cl['grid_stipple_2'] = allocate_color($cs['grid_stipple_2']);
|
|
|
138 |
$cl['text'] = allocate_color($cs['text']);
|
|
|
139 |
$cl['border'] = allocate_color($cs['border']);
|
|
|
140 |
$cl['rx'] = allocate_color($cs['rx']);
|
|
|
141 |
$cl['rx_border'] = allocate_color($cs['rx_border']);
|
|
|
142 |
$cl['tx'] = allocate_color($cs['tx']);
|
|
|
143 |
$cl['tx_border'] = allocate_color($cs['tx_border']);
|
| 1675 |
richard |
144 |
|
| 1533 |
richard |
145 |
svg_rect(0, 0, $iw, $ih, array( 'stroke' => 'none', 'stroke-width' => 0, 'fill' => $cl['image_background']['rgb']) );
|
|
|
146 |
svg_rect($xlm, $ytm, $iw-$xrm-$xlm, $ih-$ybm-$ytm, array( 'stroke' => 'none', 'stroke-width' => 0, 'fill' => $cl['background']['rgb']) );
|
| 1675 |
richard |
147 |
|
|
|
148 |
$depth = 12*SVG_DEPTH_SCALING;
|
| 1533 |
richard |
149 |
svg_group( array( 'stroke' => 'none', 'stroke-width' => 0, 'fill' => $cl['background_2']['rgb'], 'fill-opacity' => $cl['background_2']['opacity']) );
|
|
|
150 |
svg_poly(array($xlm, $ytm, $xlm, $ih - $ybm, $xlm - $depth, $ih - $ybm + $depth, $xlm - $depth, $ytm + $depth));
|
|
|
151 |
svg_poly(array($xlm, $ih - $ybm, $xlm - $depth, $ih - $ybm + $depth, $iw - $xrm - $depth, $ih - $ybm + $depth, $iw - $xrm, $ih - $ybm));
|
|
|
152 |
svg_group_end();
|
|
|
153 |
|
|
|
154 |
// draw title
|
|
|
155 |
$text = T('Traffic data for')." $iface";
|
| 1675 |
richard |
156 |
svg_text($iw / 2, ($ytm / 2), $text, array( 'stroke' => 'none', 'fill' => $cl['text']['rgb'],'stroke-width' => 0, 'font-family' => SVG_FONT, 'font-weight' => 'bold', 'text-anchor' => 'middle' ));
|
| 1533 |
richard |
157 |
}
|
|
|
158 |
|
|
|
159 |
function draw_border()
|
|
|
160 |
{
|
|
|
161 |
global $cl, $iw, $ih;
|
|
|
162 |
svg_rect(1, 1, $iw-2, $ih-2, array( 'stroke' => $cl['border']['rgb'], 'stroke-opacity' => $cl['border']['opacity'], 'stroke-width' => 1, 'fill' => 'none') );
|
|
|
163 |
}
|
| 1675 |
richard |
164 |
|
| 1533 |
richard |
165 |
function draw_grid($x_ticks, $y_ticks)
|
|
|
166 |
{
|
|
|
167 |
global $cl, $iw, $ih, $xlm, $xrm, $ytm, $ybm;
|
| 1675 |
richard |
168 |
$x_step = ($iw - $xlm - $xrm) / ($x_ticks ?: 1);
|
| 1533 |
richard |
169 |
$y_step = ($ih - $ytm - $ybm) / $y_ticks;
|
|
|
170 |
|
| 1675 |
richard |
171 |
$depth = 12*SVG_DEPTH_SCALING;
|
|
|
172 |
|
| 1533 |
richard |
173 |
svg_group( array( 'stroke' => $cl['grid_stipple_1']['rgb'], 'stroke-opacity' => $cl['grid_stipple_1']['opacity'], 'stroke-width' => '1px', 'stroke-dasharray' => '1,1' ) );
|
|
|
174 |
for ($i = $xlm; $i <= ($iw - $xrm); $i += $x_step)
|
|
|
175 |
{
|
|
|
176 |
svg_line($i, $ytm, $i, $ih-$ybm);
|
|
|
177 |
svg_line($i, $ih-$ybm, $i-$depth, $ih-$ybm+$depth);
|
|
|
178 |
}
|
|
|
179 |
for ($i = $ytm; $i <= ($ih - $ybm); $i += $y_step)
|
|
|
180 |
{
|
| 1675 |
richard |
181 |
svg_line($xlm, $i, $iw - $xrm, $i);
|
| 1533 |
richard |
182 |
svg_line($xlm, $i, $xlm - $depth, $i + $depth);
|
|
|
183 |
}
|
|
|
184 |
svg_group_end();
|
|
|
185 |
|
|
|
186 |
svg_group( array( 'stroke' => $cl['border']['rgb'], 'stroke-width' => '1px', 'stroke-opacity' => $cl['border']['opacity'] ) );
|
|
|
187 |
svg_line($xlm, $ytm, $xlm, $ih - $ybm);
|
|
|
188 |
svg_line($xlm, $ih - $ybm, $iw - $xrm, $ih - $ybm);
|
|
|
189 |
svg_group_end();
|
|
|
190 |
}
|
| 1675 |
richard |
191 |
|
|
|
192 |
|
| 1533 |
richard |
193 |
function draw_data($data)
|
|
|
194 |
{
|
|
|
195 |
global $cl,$iw,$ih,$xlm,$xrm,$ytm,$ybm;
|
|
|
196 |
|
|
|
197 |
sort($data);
|
|
|
198 |
|
|
|
199 |
$x_ticks = count($data);
|
|
|
200 |
$y_ticks = 10;
|
|
|
201 |
$y_scale = 1;
|
|
|
202 |
$prescale = 1;
|
|
|
203 |
$unit = 'K';
|
|
|
204 |
$offset = 0;
|
|
|
205 |
$gr_h = $ih - $ytm - $ybm;
|
| 1675 |
richard |
206 |
$x_step = ($iw - $xlm - $xrm) / ($x_ticks ?: 1);
|
| 1533 |
richard |
207 |
$y_step = ($ih - $ytm - $ybm) / $y_ticks;
|
|
|
208 |
$bar_w = ($x_step / 2) ;
|
|
|
209 |
|
|
|
210 |
//
|
|
|
211 |
// determine scale
|
|
|
212 |
//
|
|
|
213 |
$low = 99999999999;
|
|
|
214 |
$high = 0;
|
|
|
215 |
for ($i=0; $i<$x_ticks; $i++)
|
|
|
216 |
{
|
|
|
217 |
if ($data[$i]['rx'] < $low)
|
|
|
218 |
$low = $data[$i]['rx'];
|
|
|
219 |
if ($data[$i]['tx'] < $low)
|
|
|
220 |
$low = $data[$i]['tx'];
|
|
|
221 |
if ($data[$i]['rx'] > $high)
|
|
|
222 |
$high = $data[$i]['rx'];
|
|
|
223 |
if ($data[$i]['tx'] > $high)
|
|
|
224 |
$high = $data[$i]['tx'];
|
|
|
225 |
}
|
|
|
226 |
|
|
|
227 |
while ($high > ($prescale * $y_scale * $y_ticks))
|
|
|
228 |
{
|
|
|
229 |
$y_scale = $y_scale * 2;
|
|
|
230 |
if ($y_scale >= 1024)
|
|
|
231 |
{
|
|
|
232 |
$prescale = $prescale * 1024;
|
|
|
233 |
$y_scale = $y_scale / 1024;
|
| 1675 |
richard |
234 |
if ($unit == 'K')
|
| 1533 |
richard |
235 |
$unit = 'M';
|
|
|
236 |
else if ($unit == 'M')
|
|
|
237 |
$unit = 'G';
|
|
|
238 |
else if ($unit == 'G')
|
|
|
239 |
$unit = 'T';
|
|
|
240 |
}
|
|
|
241 |
}
|
|
|
242 |
|
|
|
243 |
draw_grid($x_ticks, $y_ticks);
|
| 1675 |
richard |
244 |
|
| 1533 |
richard |
245 |
//
|
|
|
246 |
// graph scale factor (per pixel)
|
|
|
247 |
//
|
|
|
248 |
$sf = ($prescale * $y_scale * $y_ticks) / $gr_h;
|
|
|
249 |
|
| 1675 |
richard |
250 |
if (count($data) == 0)
|
| 1533 |
richard |
251 |
{
|
|
|
252 |
$text = 'no data available';
|
|
|
253 |
svg_text($iw/2, $ytm + 80, $text, array( 'stroke' => $cl['text']['rgb'], 'fill' => $cl['text']['rgb'], 'stroke-width' => 0, 'font-family' => SVG_FONT, 'font-size' => '16pt', 'text-anchor' => 'middle') );
|
|
|
254 |
}
|
|
|
255 |
else
|
|
|
256 |
{
|
|
|
257 |
//
|
|
|
258 |
// draw bars
|
| 1675 |
richard |
259 |
//
|
| 1533 |
richard |
260 |
for ($i=0; $i<$x_ticks; $i++)
|
|
|
261 |
{
|
|
|
262 |
$x = $xlm + ($i * $x_step);
|
|
|
263 |
$y = $ytm + ($ih - $ytm - $ybm) - (($data[$i]['rx'] - $offset) / $sf);
|
| 1675 |
richard |
264 |
|
|
|
265 |
$depth = ($x_ticks < 20) ? 8*SVG_DEPTH_SCALING : 6*SVG_DEPTH_SCALING;
|
| 1533 |
richard |
266 |
$space = 0;
|
| 1675 |
richard |
267 |
|
| 1533 |
richard |
268 |
$x1 = (int)$x;
|
|
|
269 |
$y1 = (int)$y;
|
|
|
270 |
$w = (int)($bar_w - $space);
|
|
|
271 |
$h = (int)($ih - $ybm - $y);
|
|
|
272 |
$x2 = (int)($x + $bar_w - $space);
|
|
|
273 |
$y2 = (int)($ih - $ybm);
|
| 1675 |
richard |
274 |
|
| 1533 |
richard |
275 |
svg_group( array( 'stroke' => $cl['rx_border']['rgb'], 'stroke-opacity' => $cl['rx_border']['opacity'],
|
|
|
276 |
'stroke-width' => 1, 'stroke-linejoin' => 'round',
|
|
|
277 |
'fill' => $cl['rx']['rgb'], 'fill-opacity' => $cl['rx']['opacity'] ) );
|
|
|
278 |
svg_rect($x1, $y1, $w, $h);
|
|
|
279 |
svg_rect($x1 - $depth, $y1 + $depth, $w, $h);
|
|
|
280 |
svg_poly(array($x1, $y1, $x2, $y1, $x2 - $depth, $y1 + $depth, $x1 - $depth, $y1 + $depth));
|
|
|
281 |
svg_poly(array($x2, $y1, $x2, $y2, $x2 - $depth, $y2 + $depth, $x2 - $depth, $y1 + $depth));
|
|
|
282 |
svg_group_end();
|
|
|
283 |
|
|
|
284 |
$y1 = (int)($ytm + ($ih - $ytm - $ybm) - (($data[$i]['tx'] - $offset) / $sf));
|
|
|
285 |
$x1 = (int)($x1 + $bar_w);
|
|
|
286 |
$x2 = (int)($x2 + $bar_w);
|
|
|
287 |
$w = (int)($bar_w - $space);
|
|
|
288 |
$h = (int)($ih - $ybm - $y1 - 1);
|
|
|
289 |
|
| 1675 |
richard |
290 |
svg_group( array( 'stroke' => $cl['tx_border']['rgb'], 'stroke-opacity' => $cl['tx_border']['opacity'],
|
| 1533 |
richard |
291 |
'stroke-width' => 1, 'stroke-linejoin' => 'round',
|
|
|
292 |
'fill' => $cl['tx']['rgb'], 'fill-opacity' => $cl['tx']['opacity'] ) );
|
|
|
293 |
svg_rect($x1, $y1, $w, $h);
|
|
|
294 |
svg_rect($x1 - $depth, $y1 + $depth, $w, $h);
|
|
|
295 |
svg_poly(array($x1, $y1, $x2, $y1, $x2 - $depth, $y1 + $depth, $x1 - $depth, $y1 + $depth));
|
|
|
296 |
svg_poly(array($x2, $y1, $x2, $y2, $x2 - $depth, $y2 + $depth, $x2 - $depth, $y1 + $depth));
|
|
|
297 |
svg_group_end();
|
|
|
298 |
}
|
| 1675 |
richard |
299 |
|
| 1533 |
richard |
300 |
//
|
|
|
301 |
// axis labels
|
|
|
302 |
//
|
|
|
303 |
svg_group( array( 'fill' => $cl['text']['rgb'], 'fill-opacity' => $cl['text']['opacity'], 'stroke-width' => '0', 'font-family' => SVG_FONT, 'font-size' => '10pt', 'text-anchor' => 'end' ) );
|
|
|
304 |
for ($i=0; $i<=$y_ticks; $i++)
|
|
|
305 |
{
|
|
|
306 |
$label = ($i * $y_scale).$unit;
|
|
|
307 |
$tx = $xlm - 16;
|
|
|
308 |
$ty = (int)(($ih - $ybm) - ($i * $y_step) + 8 + $depth);
|
|
|
309 |
svg_text($tx, $ty, $label);
|
|
|
310 |
}
|
|
|
311 |
svg_group_end();
|
|
|
312 |
|
|
|
313 |
svg_group( array( 'fill' => $cl['text']['rgb'], 'fill-opacity' => $cl['text']['opacity'], 'stroke-width' => '0', 'font-family' => SVG_FONT, 'font-size' => '10pt', 'text-anchor' => 'middle' ) );
|
|
|
314 |
for ($i=0; $i<$x_ticks; $i++)
|
|
|
315 |
{
|
|
|
316 |
$label = $data[$i]['img_label'];
|
|
|
317 |
svg_text($xlm + ($i * $x_step) + ($x_step / 2) - $depth - 4, $ih - $ybm + 20 + $depth, $label);
|
|
|
318 |
}
|
|
|
319 |
svg_group_end();
|
|
|
320 |
}
|
|
|
321 |
|
|
|
322 |
draw_border();
|
|
|
323 |
|
|
|
324 |
|
|
|
325 |
//
|
|
|
326 |
// legend
|
|
|
327 |
//
|
|
|
328 |
svg_rect($xlm, $ih-$ybm+39, 8, 8, array( 'stroke' => $cl['text']['rgb'], 'stroke-width' => 1, 'fill' => $cl['rx']['rgb']) );
|
|
|
329 |
svg_text($xlm+14, $ih-$ybm+48, T('bytes in'), array( 'fill' => $cl['text']['rgb'], 'stroke-width' => 0, 'font-family' => SVG_FONT, 'font-size' => '8pt') );
|
|
|
330 |
|
|
|
331 |
svg_rect($xlm+120 , $ih-$ybm+39, 8, 8, array( 'stroke' => $cl['text']['rgb'], 'stroke-width' => 1, 'fill' => $cl['tx']['rgb']) );
|
|
|
332 |
svg_text($xlm+134, $ih-$ybm+48, T('bytes out'), array( 'fill' => $cl['text']['rgb'], 'stroke-width' => 0, 'font-family' => SVG_FONT, 'font-size' => '8pt') );
|
|
|
333 |
}
|
|
|
334 |
|
|
|
335 |
function output_image()
|
|
|
336 |
{
|
|
|
337 |
global $page,$hour,$day,$month,$iface;
|
|
|
338 |
|
|
|
339 |
if ($page == 'summary')
|
|
|
340 |
return;
|
|
|
341 |
|
|
|
342 |
init_image();
|
|
|
343 |
|
|
|
344 |
if ($page == 'h')
|
|
|
345 |
{
|
|
|
346 |
draw_data($hour);
|
|
|
347 |
}
|
|
|
348 |
else if ($page == 'd')
|
|
|
349 |
{
|
|
|
350 |
draw_data($day);
|
|
|
351 |
}
|
|
|
352 |
else if ($page == 'm')
|
|
|
353 |
{
|
|
|
354 |
draw_data($month);
|
|
|
355 |
}
|
|
|
356 |
|
|
|
357 |
svg_end();
|
|
|
358 |
}
|
|
|
359 |
|
|
|
360 |
get_vnstat_data();
|
|
|
361 |
output_image();
|
| 1675 |
richard |
362 |
?>
|