angular-crmMailingAB - Extract ReportCtrl as separate file
authorTim Otten <totten@civicrm.org>
Tue, 30 Sep 2014 14:20:11 +0000 (15:20 +0100)
committerTim Otten <totten@civicrm.org>
Tue, 30 Sep 2014 14:20:11 +0000 (15:20 +0100)
CRM/Core/Page/Angular.php
CRM/Mailing/Info.php
js/angular-crmMailingAB-ReportCtrl.js [new file with mode: 0644]
js/angular-crmMailingAB.js

index 0ccf1528f5162e143b0f4441b19c524c63cd9baf..35141c151741f570feed5dcde9859a602064c267 100644 (file)
@@ -42,15 +42,16 @@ class CRM_Core_Page_Angular extends CRM_Core_Page {
 
     $res->addScriptFile('civicrm', 'packages/bower_components/angular/angular.min.js', 100, 'html-header', FALSE);
     $res->addScriptFile('civicrm', 'packages/bower_components/angular-route/angular-route.min.js', 110, 'html-header', FALSE);
+    $headOffset = 0;
     foreach ($modules as $module) {
       if (!empty($module['css'])) {
         foreach ($module['css'] as $file) {
-          $res->addStyleFile($module['ext'], $file, self::DEFAULT_MODULE_WEIGHT, 'html-header', TRUE);
+          $res->addStyleFile($module['ext'], $file, self::DEFAULT_MODULE_WEIGHT + (++$headOffset), 'html-header', TRUE);
         }
       }
       if (!empty($module['js'])) {
         foreach ($module['js'] as $file) {
-          $res->addScriptFile($module['ext'], $file, self::DEFAULT_MODULE_WEIGHT, 'html-header', TRUE);
+          $res->addScriptFile($module['ext'], $file, self::DEFAULT_MODULE_WEIGHT  + (++$headOffset), 'html-header', TRUE);
         }
       }
     }
index a602917a2d144f56127161a99cca2c8dbba88adc..68134697685f2eae8649ef7d1f3f9098e2db0ae4 100644 (file)
@@ -59,7 +59,13 @@ class CRM_Mailing_Info extends CRM_Core_Component_Info {
     $result = array();
     $result['crmMailingAB'] = array(
       'ext' => 'civicrm',
-      'js' => array('js/angular-crmMailingAB.js','js/d3.min.js','js/angular-sanitize.js','packages/ckeditor/ckeditor.js'),
+      'js' => array(
+        'js/angular-crmMailingAB.js',
+        'js/angular-crmMailingAB-ReportCtrl.js',
+        'js/d3.min.js',
+        'js/angular-sanitize.js',
+        'packages/ckeditor/ckeditor.js',
+      ),
       'css' => array('css/angular-crmMailingAB.css'),
     );
 
diff --git a/js/angular-crmMailingAB-ReportCtrl.js b/js/angular-crmMailingAB-ReportCtrl.js
new file mode 100644 (file)
index 0000000..a8da475
--- /dev/null
@@ -0,0 +1,314 @@
+(function (angular, $, _) {
+
+  var partialUrl = function (relPath) {
+    return CRM.resourceUrls['civicrm'] + '/partials/abtesting/' + relPath;
+  };
+  var crmMailingAB = angular.module('crmMailingAB');
+
+  crmMailingAB.controller('ReportCtrl', function ($scope, crmApi, selectedABTest, $location) {
+    $scope.graph_data = [
+      {},
+      {},
+      {},
+      {},
+      {}
+    ];
+
+    $scope.graphload = false;
+    if (selectedABTest.winner_criteria_id == 1) {
+      $scope.winnercriteria = "Open";
+    }
+    else {
+      if (selectedABTest.winner_criteria_id == 2) {
+        $scope.winnercriteria = "Total Unique Clicks";
+      }
+      else {
+        if (selectedABTest.winner_criteria_id == 3) {
+          $scope.winnercriteria = "Total Clicks on a particular link";
+        }
+      }
+    }
+
+    $scope.copyatoc = function () {
+      var res = crmApi('Mailing', 'get', {id: selectedABTest.mailing_id_a});
+      res.success(function (data) {
+        for (var key in data.values) {
+          var mail = data.values[key];
+        }
+        mail.id = selectedABTest.mailing_id_c;
+        crmApi('Mailing', 'create', mail);
+      });
+      $location.path('mailing/abtesting');
+    };
+
+    $scope.sendc = function () {
+      var res = crmApi('Mailing', 'get', {id: selectedABTest.mailing_id_b});
+      res.success(function (data) {
+        for (var key in data.values) {
+          var mail = data.values[key];
+        }
+        mail.id = selectedABTest.mailing_id_c;
+        crmApi('Mailing', 'create', mail);
+      });
+      $location.path('mailing/abtesting');
+    };
+    var result = crmApi('Mailing', 'stats', {mailing_id: selectedABTest.mailing_id_a});
+    $scope.r = [];
+    result.success(function (data) {
+      $scope.rtt = data;
+      $scope.r.push(data.values[selectedABTest.mailing_id_a]["Delivered"].toString());
+      $scope.r.push(data.values[selectedABTest.mailing_id_a]["Bounces"].toString());
+      $scope.r.push(data.values[selectedABTest.mailing_id_a]["Unsubscribers"].toString());
+      $scope.r.push(data.values[selectedABTest.mailing_id_a]["Opened"].toString());
+      $scope.r.push(data.values[selectedABTest.mailing_id_a]["Unique Clicks"].toString());
+      $scope.$apply();
+    });
+
+    $scope.d = [];
+    result = crmApi('Mailing', 'stats', {mailing_id: selectedABTest.mailing_id_b});
+    result.success(function (data) {
+      $scope.d.push(data.values[selectedABTest.mailing_id_b]["Delivered"].toString());
+      $scope.d.push(data.values[selectedABTest.mailing_id_b]["Bounces"].toString());
+      $scope.d.push(data.values[selectedABTest.mailing_id_b]["Unsubscribers"].toString());
+      $scope.d.push(data.values[selectedABTest.mailing_id_b]["Opened"].toString());
+      $scope.d.push(data.values[selectedABTest.mailing_id_b]["Unique Clicks"].toString());
+      $scope.$apply();
+    });
+    $scope.aastop = false;
+    $scope.asure = function () {
+      $scope.aastop = true;
+    };
+    $scope.bbstop = false;
+    $scope.bsure = function () {
+      $scope.bbstop = true;
+    };
+
+    var numdiv = 5;
+    var keep_cnt = 0;
+    for (i = 1; i <= numdiv; i++) {
+      var result = crmApi('MailingAB', 'graph_stats', {id: selectedABTest.id, split_count: numdiv, split_count_select: i});
+      result.success(function (data) {
+        var temp = 0;
+        keep_cnt++;
+        for (var key in data.values.A) {
+          temp = key;
+        }
+        var t = data.values.A[temp].time.split(" ");
+        var m = t[0];
+        var year = t[2];
+        var day = t[1].substr(0, t[1].length - 3);
+        if (t[3] == "") {
+          var t1 = t[4].split(":");
+          var hur = t1[0];
+          if (t[5] == "AM") {
+            hour = hur;
+            if (hour == 12) {
+              hour = 0;
+            }
+          }
+          if (t[5] == "PM") {
+            hour = parseInt(hur) + 12;
+          }
+          var min = t1[1];
+        }
+        else {
+          var t1 = t[3].split(":");
+          var hur = t1[0];
+          if (t[4] == "AM") {
+            hour = hur;
+            if (hour == 12) {
+              hour = 0;
+            }
+          }
+          if (t[4] == "PM") {
+            hour = parseInt(hur) + 12;
+          }
+          var min = t1[1];
+        }
+        var month = 0;
+        switch (m) {
+          case "January":
+            month = 0;
+            break;
+          case "February":
+            month = 1;
+            break;
+          case "March":
+            month = 2;
+            break;
+          case "April":
+            month = 3;
+            break;
+          case "May":
+            month = 4;
+            break;
+          case "June":
+            month = 5;
+            break;
+          case "July":
+            month = 6;
+            break;
+          case "August":
+            month = 7;
+            break;
+          case "September":
+            month = 8;
+            break;
+          case "October":
+            month = 9;
+            break;
+          case "November":
+            month = 10;
+            break;
+          case "December":
+            month = 11;
+            break;
+
+        }
+        var tp = new Date(year, month, day, hour, min, 0, 0);
+        $scope.graph_data[temp - 1] = {
+          time: tp,
+          x: data.values.A[temp].count,
+          y: data.values.B[temp].count
+        };
+
+        if (keep_cnt == numdiv) {
+          $scope.graphload = true;
+          $scope.$apply();
+          var data = $scope.graph_data;
+
+          // set up a colour variable
+          var color = d3.scale.category10();
+
+          // map one colour each to x, y and z
+          // keys grabs the key value or heading of each key value pair in the json
+          // but not time
+          color.domain(d3.keys(data[0]).filter(function (key) {
+            return key !== "time";
+          }));
+
+          // create a nested series for passing to the line generator
+          // it's best understood by console logging the data
+          var series = color.domain().map(function (name) {
+            return {
+              name: name,
+              values: data.map(function (d) {
+                return {
+                  time: d.time,
+                  score: +d[name]
+                };
+              })
+            };
+          });
+
+          // Set the dimensions of the canvas / graph
+          var margin = {
+              top: 30,
+              right: 20,
+              bottom: 40,
+              left: 75
+            },
+            width = 550 - margin.left - margin.right,
+            height = 350 - margin.top - margin.bottom;
+
+          // Set the ranges
+          //var x = d3.time.scale().range([0, width]).domain([0,10]);
+          var x = d3.time.scale().range([0, width]);
+          var y = d3.scale.linear().range([height, 0]);
+
+          // Define the axes
+          var xAxis = d3.svg.axis().scale(x)
+            .orient("bottom").ticks(10);
+
+          var yAxis = d3.svg.axis().scale(y)
+            .orient("left").ticks(5);
+
+          // Define the line
+          // Note you plot the time / score pair from each key you created ealier
+          var valueline = d3.svg.line()
+            .x(function (d) {
+              return x(d.time);
+            })
+            .y(function (d) {
+              return y(d.score);
+            });
+
+          // Adds the svg canvas
+          var svg = d3.select("#linegraph")
+            .append("svg")
+            .attr("width", width + margin.left + margin.right)
+            .attr("height", height + margin.top + margin.bottom)
+            .append("g")
+            .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
+
+          // Scale the range of the data
+          x.domain(d3.extent(data, function (d) {
+            return d.time;
+          }));
+
+          // note the nested nature of this you need to dig an additional level
+          y.domain([
+            d3.min(series, function (c) {
+              return d3.min(c.values, function (v) {
+                return v.score;
+              });
+            }),
+            d3.max(series, function (c) {
+              return d3.max(c.values, function (v) {
+                return v.score;
+              });
+            })
+          ]);
+          svg.append("text")      // text label for the x axis
+            .attr("x", width / 2)
+            .attr("y", height + margin.bottom)
+            .style("text-anchor", "middle")
+            .text("Time");
+
+          svg.append("text")      // text label for the x axis
+            .style("text-anchor", "middle")
+            .text($scope.winnercriteria).attr("transform",function (d) {
+              return "rotate(-90)"
+            }).attr("x", -height / 2)
+            .attr("y", -30);
+
+          // create a variable called series and bind the date
+          // for each series append a g element and class it as series for css styling
+          var series = svg.selectAll(".series")
+            .data(series)
+            .enter().append("g")
+            .attr("class", "series");
+
+          // create the path for each series in the variable series i.e. x, y and z
+          // pass each object called x, y nad z to the lne generator
+          series.append("path")
+            .attr("class", "line")
+            .attr("d", function (d) {
+              // console.log(d); // to see how d3 iterates through series
+              return valueline(d.values);
+            })
+            .style("stroke", function (d) {
+              return color(d.name);
+            });
+
+          // Add the X Axis
+          svg.append("g") // Add the X Axis
+            .attr("class", "x axis")
+            .attr("transform", "translate(0," + height + ")")
+            .call(xAxis)
+            .selectAll("text")
+            .attr("transform", function (d) {
+              return "rotate(-30)";
+            });
+
+          // Add the Y Axis
+          svg.append("g") // Add the Y Axis
+            .attr("class", "y axis")
+            .call(yAxis);
+        }
+      });
+    }
+    console.log($scope.graph_data);
+  });
+
+})(angular, CRM.$, CRM._);
index 8993a0d223d81ce7616fed36c90a7be80f7ab4de..fce99c7b999b9e44e6f666d9147d9ebf830fb74a 100755 (executable)
     };
   });
 
-  crmMailingAB.controller('ReportCtrl', function ($scope, crmApi, selectedABTest, $location) {
-    $scope.graph_data = [
-      {},
-      {},
-      {},
-      {},
-      {}
-    ];
-
-    $scope.graphload = false;
-    if (selectedABTest.winner_criteria_id == 1) {
-      $scope.winnercriteria = "Open";
-    }
-    else {
-      if (selectedABTest.winner_criteria_id == 2) {
-        $scope.winnercriteria = "Total Unique Clicks";
-      }
-      else {
-        if (selectedABTest.winner_criteria_id == 3) {
-          $scope.winnercriteria = "Total Clicks on a particular link";
-        }
-      }
-    }
-
-    $scope.copyatoc = function () {
-      var res = crmApi('Mailing', 'get', {id: selectedABTest.mailing_id_a});
-      res.success(function (data) {
-        for (var key in data.values) {
-          var mail = data.values[key];
-        }
-        mail.id = selectedABTest.mailing_id_c;
-        crmApi('Mailing', 'create', mail);
-      });
-      $location.path('mailing/abtesting');
-    };
-
-    $scope.sendc = function () {
-      var res = crmApi('Mailing', 'get', {id: selectedABTest.mailing_id_b});
-      res.success(function (data) {
-        for (var key in data.values) {
-          var mail = data.values[key];
-        }
-        mail.id = selectedABTest.mailing_id_c;
-        crmApi('Mailing', 'create', mail);
-      });
-      $location.path('mailing/abtesting');
-    };
-    var result = crmApi('Mailing', 'stats', {mailing_id: selectedABTest.mailing_id_a});
-    $scope.r = [];
-    result.success(function (data) {
-      $scope.rtt = data;
-      $scope.r.push(data.values[selectedABTest.mailing_id_a]["Delivered"].toString());
-      $scope.r.push(data.values[selectedABTest.mailing_id_a]["Bounces"].toString());
-      $scope.r.push(data.values[selectedABTest.mailing_id_a]["Unsubscribers"].toString());
-      $scope.r.push(data.values[selectedABTest.mailing_id_a]["Opened"].toString());
-      $scope.r.push(data.values[selectedABTest.mailing_id_a]["Unique Clicks"].toString());
-      $scope.$apply();
-    });
-
-    $scope.d = [];
-    result = crmApi('Mailing', 'stats', {mailing_id: selectedABTest.mailing_id_b});
-    result.success(function (data) {
-      $scope.d.push(data.values[selectedABTest.mailing_id_b]["Delivered"].toString());
-      $scope.d.push(data.values[selectedABTest.mailing_id_b]["Bounces"].toString());
-      $scope.d.push(data.values[selectedABTest.mailing_id_b]["Unsubscribers"].toString());
-      $scope.d.push(data.values[selectedABTest.mailing_id_b]["Opened"].toString());
-      $scope.d.push(data.values[selectedABTest.mailing_id_b]["Unique Clicks"].toString());
-      $scope.$apply();
-    });
-    $scope.aastop = false;
-    $scope.asure = function () {
-      $scope.aastop = true;
-    };
-    $scope.bbstop = false;
-    $scope.bsure = function () {
-      $scope.bbstop = true;
-    };
-
-    var numdiv = 5;
-    var keep_cnt = 0;
-    for (i = 1; i <= numdiv; i++) {
-      var result = crmApi('MailingAB', 'graph_stats', {id: selectedABTest.id, split_count: numdiv, split_count_select: i});
-      result.success(function (data) {
-        var temp = 0;
-        keep_cnt++;
-        for (var key in data.values.A) {
-          temp = key;
-        }
-        var t = data.values.A[temp].time.split(" ");
-        var m = t[0];
-        var year = t[2];
-        var day = t[1].substr(0, t[1].length - 3);
-        if (t[3] == "") {
-          var t1 = t[4].split(":");
-          var hur = t1[0];
-          if (t[5] == "AM") {
-            hour = hur;
-            if (hour == 12) {
-              hour = 0;
-            }
-          }
-          if (t[5] == "PM") {
-            hour = parseInt(hur) + 12;
-          }
-          var min = t1[1];
-        }
-        else {
-          var t1 = t[3].split(":");
-          var hur = t1[0];
-          if (t[4] == "AM") {
-            hour = hur;
-            if (hour == 12) {
-              hour = 0;
-            }
-          }
-          if (t[4] == "PM") {
-            hour = parseInt(hur) + 12;
-          }
-          var min = t1[1];
-        }
-        var month = 0;
-        switch (m) {
-          case "January":
-            month = 0;
-            break;
-          case "February":
-            month = 1;
-            break;
-          case "March":
-            month = 2;
-            break;
-          case "April":
-            month = 3;
-            break;
-          case "May":
-            month = 4;
-            break;
-          case "June":
-            month = 5;
-            break;
-          case "July":
-            month = 6;
-            break;
-          case "August":
-            month = 7;
-            break;
-          case "September":
-            month = 8;
-            break;
-          case "October":
-            month = 9;
-            break;
-          case "November":
-            month = 10;
-            break;
-          case "December":
-            month = 11;
-            break;
-
-        }
-        var tp = new Date(year, month, day, hour, min, 0, 0);
-        $scope.graph_data[temp - 1] = {
-          time: tp,
-          x: data.values.A[temp].count,
-          y: data.values.B[temp].count
-        };
-
-        if (keep_cnt == numdiv) {
-          $scope.graphload = true;
-          $scope.$apply();
-          var data = $scope.graph_data;
-
-          // set up a colour variable
-          var color = d3.scale.category10();
-
-          // map one colour each to x, y and z
-          // keys grabs the key value or heading of each key value pair in the json
-          // but not time
-          color.domain(d3.keys(data[0]).filter(function (key) {
-            return key !== "time";
-          }));
-
-          // create a nested series for passing to the line generator
-          // it's best understood by console logging the data
-          var series = color.domain().map(function (name) {
-            return {
-              name: name,
-              values: data.map(function (d) {
-                return {
-                  time: d.time,
-                  score: +d[name]
-                };
-              })
-            };
-          });
-
-          // Set the dimensions of the canvas / graph
-          var margin = {
-              top: 30,
-              right: 20,
-              bottom: 40,
-              left: 75
-            },
-            width = 550 - margin.left - margin.right,
-            height = 350 - margin.top - margin.bottom;
-
-          // Set the ranges
-          //var x = d3.time.scale().range([0, width]).domain([0,10]);
-          var x = d3.time.scale().range([0, width]);
-          var y = d3.scale.linear().range([height, 0]);
-
-          // Define the axes
-          var xAxis = d3.svg.axis().scale(x)
-            .orient("bottom").ticks(10);
-
-          var yAxis = d3.svg.axis().scale(y)
-            .orient("left").ticks(5);
-
-          // Define the line
-          // Note you plot the time / score pair from each key you created ealier
-          var valueline = d3.svg.line()
-            .x(function (d) {
-              return x(d.time);
-            })
-            .y(function (d) {
-              return y(d.score);
-            });
-
-          // Adds the svg canvas
-          var svg = d3.select("#linegraph")
-            .append("svg")
-            .attr("width", width + margin.left + margin.right)
-            .attr("height", height + margin.top + margin.bottom)
-            .append("g")
-            .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
-
-          // Scale the range of the data
-          x.domain(d3.extent(data, function (d) {
-            return d.time;
-          }));
-
-          // note the nested nature of this you need to dig an additional level
-          y.domain([
-            d3.min(series, function (c) {
-              return d3.min(c.values, function (v) {
-                return v.score;
-              });
-            }),
-            d3.max(series, function (c) {
-              return d3.max(c.values, function (v) {
-                return v.score;
-              });
-            })
-          ]);
-          svg.append("text")      // text label for the x axis
-            .attr("x", width / 2)
-            .attr("y", height + margin.bottom)
-            .style("text-anchor", "middle")
-            .text("Time");
-
-          svg.append("text")      // text label for the x axis
-            .style("text-anchor", "middle")
-            .text($scope.winnercriteria).attr("transform",function (d) {
-              return "rotate(-90)"
-            }).attr("x", -height / 2)
-            .attr("y", -30);
-
-          // create a variable called series and bind the date
-          // for each series append a g element and class it as series for css styling
-          var series = svg.selectAll(".series")
-            .data(series)
-            .enter().append("g")
-            .attr("class", "series");
-
-          // create the path for each series in the variable series i.e. x, y and z
-          // pass each object called x, y nad z to the lne generator
-          series.append("path")
-            .attr("class", "line")
-            .attr("d", function (d) {
-              // console.log(d); // to see how d3 iterates through series
-              return valueline(d.values);
-            })
-            .style("stroke", function (d) {
-              return color(d.name);
-            });
-
-          // Add the X Axis
-          svg.append("g") // Add the X Axis
-            .attr("class", "x axis")
-            .attr("transform", "translate(0," + height + ")")
-            .call(xAxis)
-            .selectAll("text")
-            .attr("transform", function (d) {
-              return "rotate(-30)";
-            });
-
-          // Add the Y Axis
-          svg.append("g") // Add the Y Axis
-            .attr("class", "y axis")
-            .call(yAxis);
-        }
-      });
-    }
-    console.log($scope.graph_data);
-  });
-
   crmMailingAB.controller('crmABTestingTabsCtrl', function ($scope, crmApi, selectedABTest, $sce) {
     $scope.partialUrl = partialUrl;
     $scope.abId = "";
   });
 
 })(angular, CRM.$, CRM._);
-