dashboard.html

Home / osgi-bundles / bundles / analytics / src / main / resources / static / dashboard.html
125 lines | 5.289 kB Blame History Raw Download
<!DOCTYPE html>
<!--
  ~ Copyright 2010-2013 Ning, Inc.
  ~
  ~ Ning licenses this file to you under the Apache License, version 2.0
  ~ (the "License"); you may not use this file except in compliance with the
  ~ License.  You may obtain a copy of the License at:
  ~
  ~    http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
  ~ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.  See the
  ~ License for the specific language governing permissions and limitations
  ~ under the License.
  -->

<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>D3 Test</title>
        <script type="text/javascript" src="javascript/d3.js"></script>
        <script type="text/javascript" src="javascript/jquery-1.9.0.min.js"></script>
        <script type="text/javascript" src="javascript/killbill.js"></script>

        <link rel="stylesheet" type="text/css" href="styles/dashboard.css" media="screen" />

    </head>
    <body>
        <div id="chartAnchor"></div>

        <script type="text/javascript">

            function doGetData(server, port, analyticsPrefix, endpoint, queryParams, fn) {

                var request_url = "http://" + server + ":" + port + analyticsPrefix + endpoint;
                var first = true;

                if (queryParams) {
                   var queryKeys = Object.keys(queryParams);
                   for (var i = 0; i < queryKeys.length; i++) {
                       var curKey = queryKeys[i];
                       var delim = first ? "?" : "&";
                       request_url = request_url + "?" + curKey + "=" +  queryParams[curKey]
                       first = false;
                   }
                }

                console.log("request_url " + request_url);

                return $.ajax({
                   type: "GET",
                   contentType: "application/json",
                   url: request_url
                }).done(function(data) {
                   console.log("Done " + request_url + " with data " + data.length);
                   fn(data);
                });
             }

            function drawAll(input) {

                var canvasHeigthWithMargins = input.canvasHeigth + input.topMargin + input.betweenGraphMargin + input.bottomMargin;
                var canvasHeigthGraph = input.canvasHeigth / 2;

                var translateX = input.leftMargin;

                var graphStructure = new killbillGraph.GraphStructure();


                graphStructure.setupDomStructure();
                var canvas = graphStructure.createCanvas([input.topMargin, input.rightMargin, input.bottomMargin, input.leftMargin],
                input.canvasWidth, canvasHeigthWithMargins);

                var curTranslateY = input.topMargin;
                var curTranslateLabelY = curTranslateY + (canvasHeigthGraph / 2);
                var lineCanvas = graphStructure.createCanvasGroup(canvas, translateX, curTranslateY);
                var linesGraph = new killbillGraph.KBLinesGraph(lineCanvas, input.linesData, input.canvasWidth, canvasHeigthGraph, d3.scale.category20b());
                linesGraph.drawLines();
                linesGraph.addLabels("labelsLine", curTranslateLabelY);

                curTranslateY = curTranslateY + canvasHeigthGraph + input.betweenGraphMargin;
                curTranslateLabelY = curTranslateLabelY + input.betweenGraphMargin;
                var stackCanvas = graphStructure.createCanvasGroup(canvas, translateX, curTranslateY);
                var layersGraph = new killbillGraph.KBLayersGraph(stackCanvas, input.layersData, input.canvasWidth, canvasHeigthGraph, d3.scale.category20c());
                layersGraph.drawStackLayers();
                layersGraph.addLabels("labelsLayer", curTranslateLabelY);


                curTranslateY = curTranslateY + canvasHeigthGraph + input.betweenGraphMargin;
                var xAxisCanvaGroup = graphStructure.createCanvasGroup(canvas, translateX, curTranslateY);
                layersGraph.createXAxis(xAxisCanvaGroup, 2 * (canvasHeigthGraph + input.betweenGraphMargin));

                layersGraph.addMouseOverCircleForValue();
            }

             function fetchDataAndDrawAll(server, port) {

                 $().ready(function() {

                     var layersData;
                     var linesData;

                     $.when(doGetData(server, port, "/plugins/killbill-analytics", "/planTransitionsOverTime", null, function(data) {
                         linesData = data;
                     }), doGetData(server, port, "/plugins/killbill-analytics", "/recurringRevenueOverTime", null, function(data) {
                         layersData = data;
                     })).done(function() {
                         console.log( 'I fire once BOTH ajax requests have completed...');

                         var input = new killbillGraph.KBInputGraphs(800, 600, 80, 80, 80, 80, 30, [linesData, layersData]);
                         drawAll(input);
                     }) .fail(function() {
                        console.log( 'I fire if one or more requests failed.' );
                     });
                 });
            }



            fetchDataAndDrawAll($VAR_SERVER, $VAR_PORT);
        </script>
    </body>
</html>