ngcp-panel/share/templates/calls/chord.tt

[% META title = 'Call Distribution' -%]

    <style>
        #circle circle {
          fill: none;
          pointer-events: all;
        }

        .group path {
          fill-opacity: .5;
        }

        path.chord {
          stroke: #000;
          stroke-width: .25px;
        }

        #circle:hover path.fade {
          display: none;
        }

        svg {
          font: 10px sans-serif;
        }

        .axis path, .axis line {
          fill: none;
          stroke: #000;
          shape-rendering: crispEdges;
        }

    </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>
        </span>
    </div>
    [% back_created = 1 -%]
    <div class="ngcp-separator"></div>

    <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="row-fluid" style="margin-top:50px">
        <div class="span3">
            <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>
        </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>

    <div class="offset2 span6" id="ngcp-cdr-chord" style="margin-top:20px">
    </div>
[% # vim: set tabstop=4 syntax=html expandtab: -%]