js/angular-crmMailingAB-ReportCtrl.js

   1 (function (angular, $, _) {
   2
   3   var partialUrl = function (relPath) {
   4     return CRM.resourceUrls['civicrm'] + '/partials/crmMailingAB/' + relPath;
   5   };
   6   var crmMailingAB = angular.module('crmMailingAB');
   7
   8   crmMailingAB.controller('ReportCtrl', function ($scope, crmApi, selectedABTest, $location) {
   9     $scope.graph_data = [
  10       {},
  11       {},
  12       {},
  13       {},
  14       {}
  15     ];
  16
  17     $scope.graphload = false;
  18     if (selectedABTest.winner_criteria_id == 1) {
  19       $scope.winnercriteria = "Open";
  20     }
  21     else {
  22       if (selectedABTest.winner_criteria_id == 2) {
  23         $scope.winnercriteria = "Total Unique Clicks";
  24       }
  25       else {
  26         if (selectedABTest.winner_criteria_id == 3) {
  27           $scope.winnercriteria = "Total Clicks on a particular link";
  28         }
  29       }
  30     }
  31
  32     $scope.copyatoc = function () {
  33       var res = crmApi('Mailing', 'get', {id: selectedABTest.mailing_id_a});
  34       res.success(function (data) {
  35         for (var key in data.values) {
  36           var mail = data.values[key];
  37         }
  38         mail.id = selectedABTest.mailing_id_c;
  39         crmApi('Mailing', 'create', mail);
  40       });
  41       $location.path('abtest');
  42     };
  43
  44     $scope.sendc = function () {
  45       var res = crmApi('Mailing', 'get', {id: selectedABTest.mailing_id_b});
  46       res.success(function (data) {
  47         for (var key in data.values) {
  48           var mail = data.values[key];
  49         }
  50         mail.id = selectedABTest.mailing_id_c;
  51         crmApi('Mailing', 'create', mail);
  52       });
  53       $location.path('abtest');
  54     };
  55     var result = crmApi('Mailing', 'stats', {mailing_id: selectedABTest.mailing_id_a});
  56     $scope.r = [];
  57     result.success(function (data) {
  58       $scope.rtt = data;
  59       $scope.r.push(data.values[selectedABTest.mailing_id_a]["Delivered"].toString());
  60       $scope.r.push(data.values[selectedABTest.mailing_id_a]["Bounces"].toString());
  61       $scope.r.push(data.values[selectedABTest.mailing_id_a]["Unsubscribers"].toString());
  62       $scope.r.push(data.values[selectedABTest.mailing_id_a]["Opened"].toString());
  63       $scope.r.push(data.values[selectedABTest.mailing_id_a]["Unique Clicks"].toString());
  64       $scope.$apply();
  65     });
  66
  67     $scope.d = [];
  68     result = crmApi('Mailing', 'stats', {mailing_id: selectedABTest.mailing_id_b});
  69     result.success(function (data) {
  70       $scope.d.push(data.values[selectedABTest.mailing_id_b]["Delivered"].toString());
  71       $scope.d.push(data.values[selectedABTest.mailing_id_b]["Bounces"].toString());
  72       $scope.d.push(data.values[selectedABTest.mailing_id_b]["Unsubscribers"].toString());
  73       $scope.d.push(data.values[selectedABTest.mailing_id_b]["Opened"].toString());
  74       $scope.d.push(data.values[selectedABTest.mailing_id_b]["Unique Clicks"].toString());
  75       $scope.$apply();
  76     });
  77     $scope.aastop = false;
  78     $scope.asure = function () {
  79       $scope.aastop = true;
  80     };
  81     $scope.bbstop = false;
  82     $scope.bsure = function () {
  83       $scope.bbstop = true;
  84     };
  85
  86     var numdiv = 5;
  87     var keep_cnt = 0;
  88     for (i = 1; i <= numdiv; i++) {
  89       var result = crmApi('MailingAB', 'graph_stats', {id: selectedABTest.id, split_count: numdiv, split_count_select: i});
  90       result.success(function (data) {
  91         var temp = 0;
  92         keep_cnt++;
  93         for (var key in data.values.A) {
  94           temp = key;
  95         }
  96         var t = data.values.A[temp].time.split(" ");
  97         var m = t[0];
  98         var year = t[2];
  99         var day = t[1].substr(0, t[1].length - 3);
 100         if (t[3] == "") {
 101           var t1 = t[4].split(":");
 102           var hur = t1[0];
 103           if (t[5] == "AM") {
 104             hour = hur;
 105             if (hour == 12) {
 106               hour = 0;
 107             }
 108           }
 109           if (t[5] == "PM") {
 110             hour = parseInt(hur) + 12;
 111           }
 112           var min = t1[1];
 113         }
 114         else {
 115           var t1 = t[3].split(":");
 116           var hur = t1[0];
 117           if (t[4] == "AM") {
 118             hour = hur;
 119             if (hour == 12) {
 120               hour = 0;
 121             }
 122           }
 123           if (t[4] == "PM") {
 124             hour = parseInt(hur) + 12;
 125           }
 126           var min = t1[1];
 127         }
 128         var month = 0;
 129         switch (m) {
 130           case "January":
 131             month = 0;
 132             break;
 133           case "February":
 134             month = 1;
 135             break;
 136           case "March":
 137             month = 2;
 138             break;
 139           case "April":
 140             month = 3;
 141             break;
 142           case "May":
 143             month = 4;
 144             break;
 145           case "June":
 146             month = 5;
 147             break;
 148           case "July":
 149             month = 6;
 150             break;
 151           case "August":
 152             month = 7;
 153             break;
 154           case "September":
 155             month = 8;
 156             break;
 157           case "October":
 158             month = 9;
 159             break;
 160           case "November":
 161             month = 10;
 162             break;
 163           case "December":
 164             month = 11;
 165             break;
 166
 167         }
 168         var tp = new Date(year, month, day, hour, min, 0, 0);
 169         $scope.graph_data[temp - 1] = {
 170           time: tp,
 171           x: data.values.A[temp].count,
 172           y: data.values.B[temp].count
 173         };
 174
 175         if (keep_cnt == numdiv) {
 176           $scope.graphload = true;
 177           $scope.$apply();
 178           var data = $scope.graph_data;
 179
 180           // set up a colour variable
 181           var color = d3.scale.category10();
 182
 183           // map one colour each to x, y and z
 184           // keys grabs the key value or heading of each key value pair in the json
 185           // but not time
 186           color.domain(d3.keys(data[0]).filter(function (key) {
 187             return key !== "time";
 188           }));
 189
 190           // create a nested series for passing to the line generator
 191           // it's best understood by console logging the data
 192           var series = color.domain().map(function (name) {
 193             return {
 194               name: name,
 195               values: data.map(function (d) {
 196                 return {
 197                   time: d.time,
 198                   score: +d[name]
 199                 };
 200               })
 201             };
 202           });
 203
 204           // Set the dimensions of the canvas / graph
 205           var margin = {
 206               top: 30,
 207               right: 20,
 208               bottom: 40,
 209               left: 75
 210             },
 211             width = 550 - margin.left - margin.right,
 212             height = 350 - margin.top - margin.bottom;
 213
 214           // Set the ranges
 215           //var x = d3.time.scale().range([0, width]).domain([0,10]);
 216           var x = d3.time.scale().range([0, width]);
 217           var y = d3.scale.linear().range([height, 0]);
 218
 219           // Define the axes
 220           var xAxis = d3.svg.axis().scale(x)
 221             .orient("bottom").ticks(10);
 222
 223           var yAxis = d3.svg.axis().scale(y)
 224             .orient("left").ticks(5);
 225
 226           // Define the line
 227           // Note you plot the time / score pair from each key you created ealier
 228           var valueline = d3.svg.line()
 229             .x(function (d) {
 230               return x(d.time);
 231             })
 232             .y(function (d) {
 233               return y(d.score);
 234             });
 235
 236           // Adds the svg canvas
 237           var svg = d3.select("#linegraph")
 238             .append("svg")
 239             .attr("width", width + margin.left + margin.right)
 240             .attr("height", height + margin.top + margin.bottom)
 241             .append("g")
 242             .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
 243
 244           // Scale the range of the data
 245           x.domain(d3.extent(data, function (d) {
 246             return d.time;
 247           }));
 248
 249           // note the nested nature of this you need to dig an additional level
 250           y.domain([
 251             d3.min(series, function (c) {
 252               return d3.min(c.values, function (v) {
 253                 return v.score;
 254               });
 255             }),
 256             d3.max(series, function (c) {
 257               return d3.max(c.values, function (v) {
 258                 return v.score;
 259               });
 260             })
 261           ]);
 262           svg.append("text")      // text label for the x axis
 263             .attr("x", width / 2)
 264             .attr("y", height + margin.bottom)
 265             .style("text-anchor", "middle")
 266             .text("Time");
 267
 268           svg.append("text")      // text label for the x axis
 269             .style("text-anchor", "middle")
 270             .text($scope.winnercriteria).attr("transform",function (d) {
 271               return "rotate(-90)"
 272             }).attr("x", -height / 2)
 273             .attr("y", -30);
 274
 275           // create a variable called series and bind the date
 276           // for each series append a g element and class it as series for css styling
 277           var series = svg.selectAll(".series")
 278             .data(series)
 279             .enter().append("g")
 280             .attr("class", "series");
 281
 282           // create the path for each series in the variable series i.e. x, y and z
 283           // pass each object called x, y nad z to the lne generator
 284           series.append("path")
 285             .attr("class", "line")
 286             .attr("d", function (d) {
 287               // console.log(d); // to see how d3 iterates through series
 288               return valueline(d.values);
 289             })
 290             .style("stroke", function (d) {
 291               return color(d.name);
 292             });
 293
 294           // Add the X Axis
 295           svg.append("g") // Add the X Axis
 296             .attr("class", "x axis")
 297             .attr("transform", "translate(0," + height + ")")
 298             .call(xAxis)
 299             .selectAll("text")
 300             .attr("transform", function (d) {
 301               return "rotate(-30)";
 302             });
 303
 304           // Add the Y Axis
 305           svg.append("g") // Add the Y Axis
 306             .attr("class", "y axis")
 307             .call(yAxis);
 308         }
 309       });
 310     }
 311     console.log($scope.graph_data);
 312   });
 313
 314 })(angular, CRM.$, CRM._);