| 1 | (function (angular, $, _) { |
| 2 | |
| 3 | |
| 4 | // FIXME: This code is long and hasn't been fully working for me, but I've moved it into a spot |
| 5 | // where it at least fits in a bit better. |
| 6 | |
| 7 | // example: <div crm-mailing-ab-stats="{split_count: 6, criteria:'Open'}" crm-abtest="myabtest" /> |
| 8 | // options (see also: Mailing.graph_stats API) |
| 9 | // - split_count: int |
| 10 | // - criteria: string |
| 11 | // - target_date: string, date |
| 12 | // - target_url: string |
| 13 | angular.module('crmMailingAB').directive('crmMailingAbStats', function (crmApi, $parse) { |
| 14 | return { |
| 15 | scope: { |
| 16 | crmMailingAbStats: '@', |
| 17 | crmAbtest: '@' |
| 18 | }, |
| 19 | template: '<div class="crm-mailing-ab-stats"></div>', |
| 20 | link: function (scope, element, attrs) { |
| 21 | var abtestModel = $parse(attrs.crmAbtest); |
| 22 | var optionModel = $parse(attrs.crmMailingAbStats); |
| 23 | var options = angular.extend({}, optionModel(scope.$parent), { |
| 24 | criteria: 'Open', // e.g. 'Open', 'Total Unique Clicks' |
| 25 | split_count: 5 |
| 26 | }); |
| 27 | |
| 28 | scope.$watch(attrs.crmAbtest, refresh); |
| 29 | function refresh() { |
| 30 | var abtest = abtestModel(scope.$parent); |
| 31 | if (!abtest) { |
| 32 | console.log('failed to draw stats - missing abtest'); |
| 33 | return; |
| 34 | } |
| 35 | |
| 36 | scope.graph_data = [ |
| 37 | {}, |
| 38 | {}, |
| 39 | {}, |
| 40 | {}, |
| 41 | {} |
| 42 | ]; |
| 43 | var keep_cnt = 0; |
| 44 | |
| 45 | for (var i = 1; i <= options.split_count; i++) { |
| 46 | var result = crmApi('MailingAB', 'graph_stats', { |
| 47 | id: abtest.ab.id, |
| 48 | target_date: abtest.ab.declare_winning_time ? abtest.ab.declare_winning_time : 'now', |
| 49 | target_url: null, // FIXME |
| 50 | criteria: options.criteria, |
| 51 | split_count: options.split_count, |
| 52 | split_count_select: i |
| 53 | }); |
| 54 | /*jshint -W083 */ |
| 55 | result.then(function (data) { |
| 56 | var temp = 0; |
| 57 | keep_cnt++; |
| 58 | for (var key in data.values.A) { |
| 59 | temp = key; |
| 60 | } |
| 61 | var t = data.values.A[temp].time.split(" "); |
| 62 | var m = t[0]; |
| 63 | var year = t[2]; |
| 64 | var day = t[1].substr(0, t[1].length - 3); |
| 65 | var t1, hur, hour, min; |
| 66 | if (_.isEmpty(t[3])) { |
| 67 | t1 = t[4].split(":"); |
| 68 | hur = t1[0]; |
| 69 | if (t[5] == "AM") { |
| 70 | hour = hur; |
| 71 | if (hour == 12) { |
| 72 | hour = 0; |
| 73 | } |
| 74 | } |
| 75 | if (t[5] == "PM") { |
| 76 | hour = parseInt(hur) + 12; |
| 77 | } |
| 78 | min = t1[1]; |
| 79 | } |
| 80 | else { |
| 81 | t1 = t[3].split(":"); |
| 82 | hur = t1[0]; |
| 83 | if (t[4] == "AM") { |
| 84 | hour = hur; |
| 85 | if (hour == 12) { |
| 86 | hour = 0; |
| 87 | } |
| 88 | } |
| 89 | if (t[4] == "PM") { |
| 90 | hour = parseInt(hur) + 12; |
| 91 | } |
| 92 | min = t1[1]; |
| 93 | } |
| 94 | var month = 0; |
| 95 | switch (m) { |
| 96 | case "January": |
| 97 | month = 0; |
| 98 | break; |
| 99 | case "February": |
| 100 | month = 1; |
| 101 | break; |
| 102 | case "March": |
| 103 | month = 2; |
| 104 | break; |
| 105 | case "April": |
| 106 | month = 3; |
| 107 | break; |
| 108 | case "May": |
| 109 | month = 4; |
| 110 | break; |
| 111 | case "June": |
| 112 | month = 5; |
| 113 | break; |
| 114 | case "July": |
| 115 | month = 6; |
| 116 | break; |
| 117 | case "August": |
| 118 | month = 7; |
| 119 | break; |
| 120 | case "September": |
| 121 | month = 8; |
| 122 | break; |
| 123 | case "October": |
| 124 | month = 9; |
| 125 | break; |
| 126 | case "November": |
| 127 | month = 10; |
| 128 | break; |
| 129 | case "December": |
| 130 | month = 11; |
| 131 | break; |
| 132 | |
| 133 | } |
| 134 | var tp = new Date(year, month, day, hour, min, 0, 0); |
| 135 | scope.graph_data[temp - 1] = { |
| 136 | time: tp, |
| 137 | x: data.values.A[temp].count, |
| 138 | y: data.values.B[temp].count |
| 139 | }; |
| 140 | |
| 141 | if (keep_cnt == options.split_count) { |
| 142 | scope.graphload = true; |
| 143 | data = scope.graph_data; |
| 144 | |
| 145 | // set up a colour variable |
| 146 | var color = d3.scale.category10(); |
| 147 | |
| 148 | // map one colour each to x, y and z |
| 149 | // keys grabs the key value or heading of each key value pair in the json |
| 150 | // but not time |
| 151 | color.domain(d3.keys(data[0]).filter(function (key) { |
| 152 | return key !== "time"; |
| 153 | })); |
| 154 | |
| 155 | // create a nested series for passing to the line generator |
| 156 | // it's best understood by console logging the data |
| 157 | var series = color.domain().map(function (name) { |
| 158 | return { |
| 159 | name: name, |
| 160 | values: data.map(function (d) { |
| 161 | return { |
| 162 | time: d.time, |
| 163 | score: +d[name] |
| 164 | }; |
| 165 | }) |
| 166 | }; |
| 167 | }); |
| 168 | |
| 169 | // Set the dimensions of the canvas / graph |
| 170 | var margin = { |
| 171 | top: 30, |
| 172 | right: 20, |
| 173 | bottom: 40, |
| 174 | left: 75 |
| 175 | }, |
| 176 | width = 550 - margin.left - margin.right, |
| 177 | height = 350 - margin.top - margin.bottom; |
| 178 | |
| 179 | // Set the ranges |
| 180 | //var x = d3.time.scale().range([0, width]).domain([0,10]); |
| 181 | var x = d3.time.scale().range([0, width]); |
| 182 | var y = d3.scale.linear().range([height, 0]); |
| 183 | |
| 184 | // Define the axes |
| 185 | var xAxis = d3.svg.axis().scale(x) |
| 186 | .orient("bottom").ticks(10); |
| 187 | |
| 188 | var yAxis = d3.svg.axis().scale(y) |
| 189 | .orient("left").ticks(5); |
| 190 | |
| 191 | // Define the line |
| 192 | // Note you plot the time / score pair from each key you created earlier |
| 193 | var valueline = d3.svg.line() |
| 194 | .x(function (d) { |
| 195 | return x(d.time); |
| 196 | }) |
| 197 | .y(function (d) { |
| 198 | return y(d.score); |
| 199 | }); |
| 200 | |
| 201 | // Adds the svg canvas |
| 202 | var svg = d3.select($('.crm-mailing-ab-stats', element)[0]) |
| 203 | .append("svg") |
| 204 | .attr("width", width + margin.left + margin.right) |
| 205 | .attr("height", height + margin.top + margin.bottom) |
| 206 | .append("g") |
| 207 | .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); |
| 208 | |
| 209 | // Scale the range of the data |
| 210 | x.domain(d3.extent(data, function (d) { |
| 211 | return d.time; |
| 212 | })); |
| 213 | |
| 214 | // note the nested nature of this you need to dig an additional level |
| 215 | y.domain([ |
| 216 | d3.min(series, function (c) { |
| 217 | return d3.min(c.values, function (v) { |
| 218 | return v.score; |
| 219 | }); |
| 220 | }), |
| 221 | d3.max(series, function (c) { |
| 222 | return d3.max(c.values, function (v) { |
| 223 | return v.score; |
| 224 | }); |
| 225 | }) |
| 226 | ]); |
| 227 | svg.append("text") // text label for the x axis |
| 228 | .attr("x", width / 2) |
| 229 | .attr("y", height + margin.bottom) |
| 230 | .style("text-anchor", "middle") |
| 231 | .text("Time"); |
| 232 | |
| 233 | svg.append("text") // text label for the x axis |
| 234 | .style("text-anchor", "middle") |
| 235 | .text(scope.winnercriteria).attr("transform",function (d) { |
| 236 | return "rotate(-90)"; |
| 237 | }).attr("x", -height / 2) |
| 238 | .attr("y", -30); |
| 239 | |
| 240 | // create a variable called series and bind the date |
| 241 | // for each series append a g element and class it as series for css styling |
| 242 | series = svg.selectAll(".series") |
| 243 | .data(series) |
| 244 | .enter().append("g") |
| 245 | .attr("class", "series"); |
| 246 | |
| 247 | // create the path for each series in the variable series i.e. x, y and z |
| 248 | // pass each object called x, y nad z to the lne generator |
| 249 | series.append("path") |
| 250 | .attr("class", "line") |
| 251 | .attr("d", function (d) { |
| 252 | // console.log(d); // to see how d3 iterates through series |
| 253 | return valueline(d.values); |
| 254 | }) |
| 255 | .style("stroke", function (d) { |
| 256 | return color(d.name); |
| 257 | }); |
| 258 | |
| 259 | // Add the X Axis |
| 260 | svg.append("g") // Add the X Axis |
| 261 | .attr("class", "x axis") |
| 262 | .attr("transform", "translate(0," + height + ")") |
| 263 | .call(xAxis) |
| 264 | .selectAll("text") |
| 265 | .attr("transform", function (d) { |
| 266 | return "rotate(-30)"; |
| 267 | }); |
| 268 | |
| 269 | // Add the Y Axis |
| 270 | svg.append("g") // Add the Y Axis |
| 271 | .attr("class", "y axis") |
| 272 | .call(yAxis); |
| 273 | } |
| 274 | }); |
| 275 | } |
| 276 | } |
| 277 | } // link() |
| 278 | }; |
| 279 | }); |
| 280 | })(angular, CRM.$, CRM._); |