Frey/jQuery/flot.pm

package Frey::jQuery::flot;
use Moose;

extends 'Frey';
with 'Frey::Web';
#with 'Frey::Storage';
with 'Frey::jQuery';
with 'Frey::File'; # FIXME inline on demand?

use DateTimeX::Easy;

use lib 'lib';
use Frey::Shell::sar;
use JSON;

has skeleton => (
        is => 'rw',
        isa => 'Str',
        required => 1,
        default => 'skeleton',
);

sub as_markup {
        my ($self) = @_;

        my $path = 'static/js/flot';

        $self->add_js(qq|
                <!--[if IE]><script language="javascript" type="text/javascript" src="/$path/excanvas.pack.js"></script><![endif]-->
                <script language="javascript" type="text/javascript" src="/$path/jquery.flot.js"></script>
        |);

        $self->add_css("$path/layout.css");

        my $sponge = Frey::Shell::sar->new( sar_command => 'sar -n 1' )->as_sponge;
        warn $self->dump( $sponge );

        my $by_col;

        foreach my $row ( @{ $sponge->{rows} } ) {
                my $x = DateTimeX::Easy->new( $row->[0] )->epoch * 1000; # ms
                foreach my $col ( 2 .. 8 ) {
                        push @{ $by_col->{$col} }, [ $x, $row->[$col] ];
                }
        }

        my $dataset;
        my @names;
        foreach my $nr ( keys %$by_col ) {
                my $name = $sponge->{NAME}->[$nr];
                $dataset->{ $name }->{label} ||= $name;
                $dataset->{ $name }->{data} = $by_col->{$nr};
        }

        my $data_js = 'var datasets = ' . to_json( $dataset ) . ';';

        warn "# $data_js";

        q|
        <div id="placeholder" style="width:600px;height:300px;"></div>

                <div id="choices">Show:</div>

                <script id="source" language="javascript" type="text/javascript">
                $(function () {
                        var options = {
                                //selection: { mode: "x" },
                                //yaxis: { min: 0, max: 100 },
                                xaxis: { mode: "time" }
                        };

                        |
                        . $data_js
                        . $self->read_file('static/Frey/jQuery/flot/dataset_checkboxes.js')
                        . 
                        q|

                });
                </script>
        |;
}

1;
1	package Frey::jQuery::flot;
2	use Moose;
3
4	extends 'Frey';
5	with 'Frey::Web';
6	#with 'Frey::Storage';
7	with 'Frey::jQuery';
8	with 'Frey::File'; # FIXME inline on demand?
9
10	use DateTimeX::Easy;
11
12	use lib 'lib';
13	use Frey::Shell::sar;
14	use JSON;
15
16	has skeleton => (
17	is => 'rw',
18	isa => 'Str',
19	required => 1,
20	default => 'skeleton',
21	);
22
23	sub as_markup {
24	my ($self) = @_;
25
26	my $path = 'static/js/flot';
27
28	$self->add_js(qq\|
29	<!--[if IE]><script language="javascript" type="text/javascript" src="/$path/excanvas.pack.js"></script><![endif]-->
30	<script language="javascript" type="text/javascript" src="/$path/jquery.flot.js"></script>
31	\|);
32
33	$self->add_css("$path/layout.css");
34
35	my $sponge = Frey::Shell::sar->new( sar_command => 'sar -n 1' )->as_sponge;
36	warn $self->dump( $sponge );
37
38	my $by_col;
39
40	foreach my $row ( @{ $sponge->{rows} } ) {
41	my $x = DateTimeX::Easy->new( $row->[0] )->epoch * 1000; # ms
42	foreach my $col ( 2 .. 8 ) {
43	push @{ $by_col->{$col} }, [ $x, $row->[$col] ];
44	}
45	}
46
47	my $dataset;
48	my @names;
49	foreach my $nr ( keys %$by_col ) {
50	my $name = $sponge->{NAME}->[$nr];
51	$dataset->{ $name }->{label} \|\|= $name;
52	$dataset->{ $name }->{data} = $by_col->{$nr};
53	}
54
55	my $data_js = 'var datasets = ' . to_json( $dataset ) . ';';
56
57	warn "# $data_js";
58
59	q\|
60	<div id="placeholder" style="width:600px;height:300px;"></div>
61
62	<div id="choices">Show:</div>
63
64	<script id="source" language="javascript" type="text/javascript">
65	$(function () {
66	var options = {
67	//selection: { mode: "x" },
68	//yaxis: { min: 0, max: 100 },
69	xaxis: { mode: "time" }
70	};
71
72	\|
73	. $data_js
74	. $self->read_file('static/Frey/jQuery/flot/dataset_checkboxes.js')
75	.
76	q\|
77
78	});
79	</script>
80	\|;
81	}
82
83	1;