reporting

app.js

'use strict';

// Declare app level module which depends on filters, and services
angular.module('myApp', [
    'ngRoute',
    'myApp.filters',
    'myApp.services',
    'myApp.directives',
    'myApp.controllers',
    'ngResource',
    'ui.bootstrap',
    'hmTouchEvents',
    'ui.bootstrap',
    'ngTouch',
    'angularCharts'
]).
config(['$routeProvider',
    function($routeProvider) {
        //this is all test / POC stuff, will be removed as we procceed.
        $routeProvider.when('/view2', {
            templateUrl: 'partials/partial2.html',
            controller: 'MyCtrl2'
        });

        //this is how we do reports now; definitions are in reports.js; in the resolve call you need to return the name of the report from the definition.
        $routeProvider.when('/testReport', {
            templateUrl: 'partials/report.html',
            controller: 'reportController',
            resolve: {
                reportName: function() {
                    return 'report1'
                }
            }
        });

        $routeProvider.when('/testReport2', {
            templateUrl: 'partials/report.html',
            controller: 'reportController',
            resolve: {
                reportName: function() {
                    return 'report2'
                }
            }
        });

        $routeProvider.otherwise({
            redirectTo: '/view1'
        });
    }
]);

controllers.js

//'use strict';

/* Controllers */

angular.module('myApp.controllers', [])
    .controller('reportController', ['$scope', 'gridRequest', 'reports', 'reportName', 'dragger',
        function($scope, gridRequest, reports, reportName, dragger) {
            //basic bindings / declaration
            var x2js = new X2JS();
            $scope.jsonObj = reports[reportName].context;
            $scope.header = reports[reportName].name;
            $scope.availableFilters = angular.copy(reports[reportName].filters);
            $scope.activeFilters = [];
            $scope.filterObj = {};
            $scope.dragz = dragger;
            $scope.charts = reports[reportName].charts;

            //FOR TESTING ONLY
            $scope.filterObj.priceRange = [0, 50, 100];
            $scope.priceRange = [0, 50, 100];

            //scope functions
            $scope.updateReport = function(){
                gridRequest($scope.jsonObj, function(response) {
                    console.log(response);
                    $scope.data = response;
                    //console.log($scope.data);
                });
            }
            $scope.removeFilter = function(item) {
                console.log(item);
                for (i = 0; i < $scope.activeFilters.length; i++) {
                    if ($scope.activeFilters[i].name === item.name) {
                        $scope.availableFilters.push($scope.activeFilters[i]);
                        $scope.activeFilters.splice(i, 1);
                    }
                }
                //$scope.filterObj[item.modelName] = undefined; ??
            };

            //misc events and watchers
            $scope.$on('dropped', function(event, dropped, target) {
                console.log(target);
                if (target.id === 'dragTarget') {
                    $scope.activeFilters.push(dropped.item);
                    $scope.availableFilters
                    for (i = 0; i < $scope.availableFilters.length; i++) {
                        if ($scope.availableFilters[i].name === dropped.item.name) {
                            $scope.availableFilters.splice(i, 1);
                        }
                    }
                }
            });

            //init report
            $scope.updateReport();
        }
    ])
    .controller('MyCtrl2', ['$scope', 'GetDimensions', 'GetMeasures',
        function($scope, GetDimensions, GetMeasures) {
            GetDimensions(function(result) {
                $scope.dimensions = result;
                //console.log($scope.dimensions);
            });
            GetMeasures(function(result) {
                $scope.measures = result;
            });

        }
    ]);

directives.js

'use strict';

/* Directives */


angular.module('myApp.directives', []).
  directive('appVersion', ['version', function(version) {
    return function(scope, elm, attrs) {
      elm.text(version);
    };
  }]).directive("slider", function($document, $timeout) {
    return {
      restrict: "E",
      scope: {
        model: "=",
        property: "@",
        step: "@"
      },
      replace: true,
      template: "<div class=\"slider-control\">\n<div class=\"slider\">\n</div>\n</div>",
      link: function(scope, element, attrs) {
        var getP, handles, i, mv, pTotal, setP, step, updatePositions, _fn, _i, _len, _ref;
        element = element.children();
        element.css('position', 'relative');
        handles = [];
        pTotal = 0;
        step = function() {
          if ((scope.step != null)) {
            return parseFloat(scope.step);
          } else {
            return 0;
          }
        };
        getP = function(i) {
          if (scope.property != null) {
            return scope.model[i][scope.property];
          } else {
            return scope.model[i];
          }
        };
        setP = function(i, p) {
          var s;
          s = step();
          if (s > 0) {
            p = Math.round(p / s) * s;
          }
          if (scope.property != null) {
            return scope.model[i][scope.property] = p;
          } else {
            return scope.model[i] = p;
          }
        };
        updatePositions = function() {
          var handle, i, p, pRunningTotal, x, _i, _len, _results, line, doopX, derpX;
          pTotal = scope.model.reduce(function(sum, item, i) {
            return sum + getP(i);
          }, 0);
          pRunningTotal = 0;
          _results = [];
          for (i = _i = 0, _len = handles.length; _i < _len; i = ++_i) {
            handle = handles[i];
            p = getP(i);
            pRunningTotal += p;
            x = pRunningTotal / pTotal * 100;
            if(i === 1){
                doopX = x;
            }
            if(i === 0 ){
                derpX = x;
            }
            if(handle[0].className === "imaline"){
                handle.css({
                    width: doopX - derpX + "%",
                    left: handles[0].css('left') + "%",
                    //right: handles[2][0].css('left') + "%"
                });
            }else{
                _results.push(handle.css({
                  left: x + "%",
                  top: "-" + handle.prop("clientHeight") / 2 + "px"
                }));
            }
          }

          for (i = _i = 0, _len = handles.length; _i < _len; i = ++_i) {
            //line = angular.element('imaLine');
            p = getP(i);
            pRunningTotal += p;
            x = pRunningTotal / pTotal * 100;
            /*_results.push(line.css({
              left: x + "%",
              top: "-" + handle.prop("clientHeight") / 2 + "px"
          }));*/
          }

          return _results;
        };
        _ref = scope.model;
        _fn = function(mv, i) {
          var handle, startPleft, startPright, startX, line;
          if (i === scope.model.length - 1) {
            return;
          }
          handle = angular.element('<div class="slider-handle"></div>');
          handle.css("position", "absolute");
          line = angular.element('<div class="imaline"></div>');
          line.css('position', 'absolute');
          //handles.push(line);
          handles.push(handle);
          element.append(handle);
          if(i === 1){element.prepend(line);handles.push(line);}

          startX = 0;
          startPleft = startPright = 0;
          return handle.on("mousedown", function(event) {
            var mousemove, mouseup;
            mousemove = (function(_this) {
              return function(event) {
                return scope.$apply(function() {
                  var dp;
                  dp = (event.screenX - startX) / element.prop("clientWidth") * pTotal;
                  if (dp < -startPleft || dp > startPright) {
                    return;
                  }
                  setP(i, startPleft + dp);
                  setP(i + 1, startPright - dp);
                  return updatePositions();
                });
              };
            })(this);
            mouseup = function() {
              $document.unbind("mousemove", mousemove);
              return $document.unbind("mouseup", mouseup);
            };
            event.preventDefault();
            startX = event.screenX;
            startPleft = getP(i);
            //console.log(startPright);
            startPright = getP(i + 1);
            //console.log(startPright);
            $document.on("mousemove", mousemove);
            return $document.on("mouseup", mouseup);
          });
        };
        for (i = _i = 0, _len = _ref.length; _i < _len; i = ++_i) {
          mv = _ref[i];
          _fn(mv, i);
        }
        return scope.$watch("model", updatePositions, true);

      }
    };
  });

navPartial.html

<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
        <ul class="nav navbar-nav">
            <!--<li ng-class="{'active': navActive == 1}"><a ng-click="navActive = 1" href="#/view1">Authentication return and drag / drop dev demo</a></li>-->
            <li ng-class="{'active': navActive == 1}"><a ng-click="navActive = 1" href="#/view2">GetDimensions and GetMeasures return</a></li>
            <li ng-class="{'active': navActive == 2}"><a ng-click="navActive = 2" href="#/testReport">Report Partial</a></li>
            <li ng-class="{'active': navActive == 3}"><a ng-click="navActive = 3" href="#/testReport2">Second Report (filters, no context)</a></li>
            <!--<li ng-class="{'active': navActive == 5}"><a ng-click="navActive = 4" href="#/view4">Threshold Slider demo</a></li>-->
        </ul>
    </div>
</nav>

report.html

<div class="row filters" ng-if="availableFilters">
    <div class="col-md-4 filtersAvailable">
        <h2>Available Filters</h2>
        <ul class="nav nav-pills nav-stacked">
            <li class="draggamuffin" ng-repeat="item in availableFilters" hm-dragend="dragz.dragEnd($event, this)" hm-dragstart="dragz.dragStart($event, this)" hm-drag="dragz.drag($event)" hm-options="{dragBlockHorizontal: true, dragBlockVertical:true}">{{item.name}}</li>
        </ul>
    </div>
    <div class="col-md-8" id="dragTarget" name="dragTarget">
        <h2>Active Filters</h2>
        <div ng-repeat="item in activeFilters" class="form-group">
            <label>{{item.name}}:</label>
            <input class="form-control" type="text" ng-model="filterObj[item.modelName]" ng-if="item.type === 'text'"></input>
            <slider model="filterObj[item.modelName]" ng-if="item.type === 'range'"></slider>
            <select class="form-control" type="select" ng-model="filterObj[item.modelName]" ng-if="item.type === 'select'" ng-options="c for c in item.options"></select>
            <span ng-click="removeFilter(item)">x</span>
        </div>
    </div>
    <div class="row row-centered">
        <div class="col-lg-1 col-md-4 col-sm-12 col-centered">
            <button class="btn btn-default" ng-click="updateReport()">Update Report</button>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-12">
        <h1>{{header}}</h1>
        <table class="table table-hover miWebGridView">
            <thead>
                <tr>
                    <th>{{data.Header.Key.Dimension}}</th>
                    <th class="right" ng-repeat="x in data.Header.Measures">{{x}}</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="x in data.hierarchyResponse">
                    <td>{{x.Key}}</td>
                    <td class="right" ng-repeat="y in x.Measures track by $index">{{y}}</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
<div class="panel panel-default"  ng-if="charts">
    <div class="panel-heading">
        <h3 class="panel-title">Visualizations</h3>
    </div>
    <div class="row charts">
        <div ng-repeat="item in charts" ac-chart="item.type" ac-data="item.data" ac-config="item.config" class="chart col-sm-6">{{item.name}}</div>
    </div>
</div>
<style>
    table.table {
        background-color: white;
        color: #666;
    }
    table.table * {
        color: #666;
    }
    table .right {
        text-align: right;
        max-width: 20%;
    }
    #dragTarget {
        min-height: 200px;
    }
    .filtersAvailable li {
        padding: 10px;
        border: 3px dashed #555;
        margin: 10px 0;
    }
    #dragTarget .form-control,
    #dragTarget .form-control,
    #dragTarget .slider-control {
        width: 96%;
        float: left
    }
    #dragTarget span {
        float: left;
        padding-left: 8px;
        position: relative;
        top: 3px;
    }
    .chart{
        min-height:200px;
    }
    .chart *{
        color: black!important;
    }
</style>

reports.js

app.factory('reports', function(){
    return {
        report1: {
            name: "First Test",
            type: "genericGrid",
            context: {
                DataContext : {
                    //'<DataContext Type=\"Data Grid\"><Dimension Name=\"GLAccount\"><Attribute Name=\"GLAccountDescription\" Value=\"*\"></Attribute></Dimension><Measure Name=\"Amount\"></Measure><Measure Name=\"Quantity\"></Measure><Measure Name=\"CompanyAmount\"></Measure></DataContext>'

                    _Type : "Data Grid",
                    Dimension : {
                        Attribute: {
                            _Name: "GLAccountDescription",
                            _Value: "*"
                        },
                        _Name: "GLAccount"
                    },
                    Measure: [
                        {
                            _Name: "Amount"
                        }, {
                            _Name: "Quantity"
                        }, {
                            _Name: "CompanyAmount"
                        }
                    ]
                },
            },
            filters: [],
            charts: [
                {
                    name:"chart1",
                    type:"bar",
                    config: {
                      "labels": true,
                      "title": "Products",
                      "legend": {
                        "display": true,
                        "position": "right"
                      },
                      "innerRadius": 0,
                      "lineLegend": "lineEnd"
                    },
                    series: [
                        "Sales",
                        "Income",
                        "Expense"
                    ],

                    data:{
                      "series": [
                        "Sales",
                        "Income",
                        "Expense"
                      ],
                      "data": [
                        {
                          "x": "Computers",
                          "y": [
                            54,
                            12,
                            100
                          ],
                          "tooltip": "This is a tooltip"
                        }
                      ]
                    }

                },
                {
                    name:"chart2",
                    type: "area",
                    config: {
                      "labels": true,
                      "title": "Products",
                      "legend": {
                        "display": true,
                        "position": "right"
                      },
                      "innerRadius": 0,
                      "lineLegend": "lineEnd"
                    },

                    data:{
                      "series": [
                        "Sales",
                        "Income",
                        "Expense"
                      ],
                      "data": [
                        {
                          "x": "Computers",
                          "y": [
                            54,
                            175,
                            200
                          ]
                      },
                      {
                        "x": "ipads",
                        "y": [
                          175,
                          150,
                          100
                        ]
                        },
                        {
                          "x": "misc",
                          "y": [
                            200,
                            100,
                            300
                          ]
                      },
                      {
                        "x": "foo",
                        "y": [
                          300,
                          90,
                          200
                        ]
                      }
                      ]
                    }
                }
            ]
        },
        report2: {
            name: "Report Will Fail | Blank Context",
            type: "genericGrid",
            context: {
                DataContext : {
                },
            },
            filters: [
                {
                    name: 'Date Range',
                    type: 'dateRange',
                    modelName: ['minDate', 'maxDate']
                },
                {
                    name: 'Broker',
                    type: 'select',
                    options: ['uno', 'dos', 'tres'],
                    modelName: "broker"
                },
                {
                    name: 'Test Slider',
                    type: 'range',
                    modelName: 'priceRange'
                },
                {
                    name: 'Test text',
                    type: 'text',
                    modelName: 'testingText'
                }
            ],
            charts: [
                {
                    name:"chart1",
                    type:"bar",
                    config: {
                      "labels": true,
                      "title": "Products",
                      "legend": {
                        "display": true,
                        "position": "right"
                      },
                      "innerRadius": 0,
                      "lineLegend": "lineEnd"
                    },
                    series: [
                        "Sales",
                        "Income",
                        "Expense"
                    ],

                    data:{
                      "series": [
                        "Sales",
                        "Income",
                        "Expense"
                      ],
                      "data": [
                        {
                          "x": "Computers",
                          "y": [
                            54,
                            12,
                            879
                          ],
                          "tooltip": "This is a tooltip"
                        }
                      ]
                    }

                },
                {
                    name:"chart2",
                    type: "area",
                    config: {
                      "labels": true,
                      "title": "Products",
                      "legend": {
                        "display": true,
                        "position": "right"
                      },
                      "innerRadius": 0,
                      "lineLegend": "lineEnd"
                    },

                    data:{
                      "series": [
                        "Sales",
                        "Income",
                        "Expense"
                      ],
                      "data": [
                        {
                          "x": "Computers",
                          "y": [
                            54,
                            175,
                            200
                          ]
                      },
                      {
                        "x": "ipads",
                        "y": [
                          175,
                          150,
                          100
                        ]
                        },
                        {
                          "x": "misc",
                          "y": [
                            200,
                            100,
                            300
                          ]
                      },
                      {
                        "x": "foo",
                        "y": [
                          300,
                          90,
                          200
                        ]
                      }
                      ]
                    }
                }
            ]
        }
    }
});

services.js

'use strict';

/* Services */
var app = angular.module('myApp.services', []);
    app.service('Authentication', function($http){
        /*$http({
            method: 'POST',
            url: 'http://www.imancip9.com/dev',
            headers: {
                'Content-type': 'application/json'
            }
        });*/
        return function(callback){
            return $http(
            {
                method: 'POST',
                url: '/miCore/StaticService/Authenticate',
                headers:{
                    'Content-Type': 'application/json'
                },
                data: {
                    'DeviceId': '11534D02-819D-45DE-9B34-6100B7F1F8EA',
                    'Password': 'Password1',
                    'AppId': 1,
                    'ClientId': 5,
                    'UserName': 'znoren@ivedix.com'
                }
            }).then(function(result){
                callback(result.data);
                //return result.data;
            });
        }
    });
app.service('GetDimensions', function($http){
    /*$http({
        method: 'POST',
        url: 'http://www.imancip9.com/dev',
        headers: {
            'Content-type': 'application/json'
        }
    });*/
    return function(callback){
        return $http(
        {
            method: 'POST',
            url: '/miCore/StaticService/GetDimensions',
            headers:{
                'Content-Type': 'application/json'
            },
            data: {
                'DeviceId': '11534D02-819D-45DE-9B34-6100B7F1F8EA',
                'Password': 'Password1',
                'AppId': 1,
                'ClientId': 5,
                'UserName': 'znoren@nothnagle.com'
            }
        }).then(function(result){
            callback(result.data);
            //return result.data;
        });
    }
});
app.service('GetMeasures', function($http){
    /*$http({
        method: 'POST',
        url: 'http://www.imancip9.com/dev',
        headers: {
            'Content-type': 'application/json'
        }
    });*/
    return function(callback){
        return $http(
        {
            method: 'POST',
            url: '/miCore/StaticService/GetMeasures',
            headers:{
                'Content-Type': 'application/json'
            },
            data: {
                'DeviceId': '11534D02-819D-45DE-9B34-6100B7F1F8EA',
                'Password': 'Password1',
                'AppId': 1,
                'ClientId': 5,
                'UserName': 'znoren@nothnagle.com'
            }
        }).then(function(result){
            callback(result.data);
            //return result.data;
        });
    }
});
app.service('gridRequest', function($http){
    return function(requestObj, callback){
        var x2js = new X2JS();
        var requestContext = x2js.json2xml_str(requestObj);
        return $http(
        {
            method: 'POST',
            url: '/miCore/DynamicService/ChartGridResponse',
            headers:{
                'Content-Type': 'application/json'
            },
            data: {
                'DeviceId': '2',
                'Password': 'Password1',
                'AppId': 1,
                'ClientId': 5,
                'UserName': 'znoren@ivedix.com',
                'RequestContext': requestContext
            }
        }).then(function(result){
            callback(result.data);
            //return result.data;
        });
    }
});

app.factory('dragger', function($rootScope){
    var dragADiv = document.createElement('div');
    var saveThing;
    dragADiv.setAttribute('class', 'dragHolder');

    return {
        dragEnd : function(event, thing){
            dragADiv.parentNode.removeChild(dragADiv);
            while(dragADiv.firstChild){
                dragADiv.removeChild(dragADiv.firstChild);
            }
            var target = document.elementFromPoint(event.gesture.center.clientX, event.gesture.center.clientY);
            console.log(target);
            $rootScope.$broadcast('dropped', saveThing, target);
        },
        dragStart : function(event, thing){
            while(dragADiv.firstChild){
                dragADiv.removeChild(dragADiv.firstChild);
            }
            var newContent = document.createTextNode(event.srcElement.innerText);
            dragADiv.appendChild(newContent);
            var insertDiv = document.getElementById(thing);
            document.body.insertBefore(dragADiv, insertDiv);
            saveThing = thing;
        },
        drag : function(event, thing){
            dragADiv.style.top = (event.gesture.center.clientY - dragADiv.offsetHeight / 2) + "px";
            dragADiv.style.left = (event.gesture.center.clientX - dragADiv.offsetWidth / 2) + "px";
        }
    }
});