Frey/jQuery/flot.pm

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

extends 'Frey';
with 'Frey::Web';
#with 'Frey::Storage';
with 'Frey::jQuery';

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()->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 $data_js;
        my @names;
        foreach my $nr ( keys %$by_col ) {
                my $name = 'd' . $nr;
                push @names, $name;
                $data_js .= qq|var $name = |  . to_json( $by_col->{$nr} ) . qq|;\n|;
        }

        warn "# $data_js";

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

                <script id="source" language="javascript" type="text/javascript">
                $(function () {
                        var options = {
                                xaxis: { mode: "time" },
                                selection: { mode: "x" }
                        };
        | . $data_js . q|
                        $.plot($("#placeholder"), [
        | . join(',',@names) . q|               
                        ], options);
                });
                </script>
        |;
}

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