MT#5103 Add date picker to call distribution graph

lib/NGCP/Panel/Controller/Calls.pm

@@ -1,5 +1,6 @@
 package NGCP::Panel::Controller::Calls;
 use Sipwise::Base;
+use DateTime::Format::Strptime;
 
 BEGIN { extends 'Catalyst::Controller'; }
 
@@ -29,7 +30,31 @@ sub calls_matrix_ajax :Chained('/') :PathPart('calls/ajax') :Args(0) {
      my $matrix = [];
      my $countries = [];
 
-     my $rs = $c->model('DB')->resultset('cdr')->search({}, {
+     my $from = $c->req->params->{from};
+     my $to = $c->req->params->{to};
+     my $parse_time = DateTime::Format::Strptime->new(pattern => '%F');
+
+     my $from_epoch;
+     if($from) {
+        $from_epoch = $parse_time->parse_datetime($from)->epoch();
+     } else {
+        $from_epoch = NGCP::Panel::Utils::DateTime::current_local->truncate(to => 'day')->epoch();
+     }
+     my $to_epoch; 
+     if($to) {
+        $to_epoch = $parse_time->parse_datetime($to)->add(days => 1)->epoch();
+     } else {
+        $to_epoch = NGCP::Panel::Utils::DateTime::current_local->truncate(to => 'day')->add(days => 1)->epoch();
+     }
+
+     use Data::Printer; p $from_epoch; p $to_epoch;
+
+     my $rs = $c->model('DB')->resultset('cdr')->search({
+        -and => [
+            start_time => { '>=' => $from_epoch },
+            start_time => { '<=' => $to_epoch },
+        ],
+     }, {
         select => [qw/source_cli destination_user_in/],
      });
 

share/static/js/libs/ngcp-chord.js

@@ -1,26 +1,40 @@
-console.log("foo bar");
 var chord;
-jQuery.ajax({
+function loadChord() {
-    url: "/calls/ajax",
+
-    type: "post",
+$("#ngcp-cdr-chord-loading").remove();
+$("#ngcp-cdr-chord").append(
+    '<div id="ngcp-cdr-chord-loading" style="margin-top:30px">' +
+    '  <img src="/img/loader.gif" alt="loading" style="margin-right: 10px;"/>' +
+    '  <span><i>crunching data, please be patient - it might take a while...</i></span>' +
+    '</div>'
+);
+
+$.ajax({
+    url: "/calls/ajax?from=" + $("#datepicker_start").val() + "&to=" + $("#datepicker_end").val(),
+    type: "get",
     async: true,
     datatype: "json",
     error: function(xhr, textStatus, errorThrown) {
         $("#ngcp-cdr-chord-loading").remove();
-        $("#ngcp-cdr-chord").append('<div class="error">Failed to load call data</div>');
+        $("#ngcp-cdr-chord").append('<div id="ngcp-cdr-chord-loading">Failed to load call data</div>');
     },
     success: function(resjson, textStatus, XMLHttpRequest) {
         $("#ngcp-cdr-chord-loading").remove();
         var json = $.parseJSON(resjson);
     	var countries = json.countries;
 	    var matrix = json.calls;
+
+        if(matrix.length == 0) {
+            $("#ngcp-cdr-chord").append('<div id="ngcp-cdr-chord-loading">No call data for the specified date range found</div>');
+            return;
+        }
+
+
         var width = 720,
             height = 720,
             outerRadius = Math.min(width, height) / 2 - 10,
             innerRadius = outerRadius - 24;
 
-        console.log(json);
-
         //var formatPercent = d3.format(".1%");
         var formatPercent = function(v) {
           return Math.floor(v);
@@ -38,7 +52,6 @@ jQuery.ajax({
         var path = d3.svg.chord()
             .radius(innerRadius);
 
-        console.log("appending svg");
         var svg = d3.select("#ngcp-cdr-chord").append("svg")
             .attr("width", width)
             .attr("height", height)
@@ -105,6 +118,8 @@ jQuery.ajax({
     }
 });
 
+}
+
 function mouseover(d, i) {
   chord.classed("fade", function(p) {
     return p.source.index != i

share/templates/calls/chord.tt

@@ -32,6 +32,8 @@
     </style>
 
     <script type="text/javascript" src="/js/libs/d3.v2.min-2.8.1.js"></script>
+    <script type="text/javascript" src="/js/libs/ngcp-chord.js"></script>
+
     <div class="row">
         <span>
             <a class="btn btn-primary btn-large" href="[% c.uri_for('/back') %]"><i class="icon-arrow-left"></i> Back</a>
@@ -43,14 +45,34 @@
     <p>Mouseover on a country name to focus on calls to or from a single country. The thickness of links between countries encodes the relative frequency of calls between two countries: thicker links represent more calls.</p>
     <p>Links are colored by the more frequent origin. Mouseover on a link to see the direction details.</p>
 
-    <div class="offset2 span6" id="ngcp-cdr-chord" style="margin-top:20px">
+    <div class="row-fluid" style="margin-top:50px">
-        <div id="ngcp-cdr-chord-loading" style="margin-top:30px">
+        <div class="span3">
-            <img src="/img/loader.gif" alt="loading" style="margin-right: 10px;"/>
+            <label>From Date: <input type="text" id="datepicker_start" class="ngcp-datepicker" rel="tooltip" data-original-title="YYYY-MM-DD" value="2013-11-27"/></label>
-            <span><i>crunching data, please be patient - it might take a while...</i></span>
         </div>
+        <div class="span3">
+            <label>To Date: <input type="text" id="datepicker_end" class="ngcp-datepicker" rel="tooltip" data-original-title="YYYY-MM-DD" value="2013-11-27"/></label>
         </div>
+        <div class="span2">
+            <a href="#" id="load-chord" class="btn btn-primary"><i class="icon-repeat" style="padding-top:3px"></i> Reload</a>
+        </div>
+    </div>
+    <script>
+        $('#datepicker_start').datepicker({
+            "dateFormat": "yy-mm-dd",
+        });
+        $('#datepicker_end').datepicker({
+            "dateFormat": "yy-mm-dd"
+        });
+        $('#load-chord').click(function(e) {
+            $('svg').remove();
+            loadChord();
+        });
+        // load diagram after document is ready
+        $(function() {
+            loadChord();
+        });
+    </script>
 
-    <script type="text/javascript" src="/js/libs/ngcp-chord.js"></script>
+    <div class="offset2 span6" id="ngcp-cdr-chord" style="margin-top:20px">
-
+    </div>
-
 [% # vim: set tabstop=4 syntax=html expandtab: -%]