awesomemotive /
google-analytics-for-wordpress
| Total Complexity | 44 |
| Total Lines | 965 |
| Duplicated Lines | 0 % |
| Changes | 1 | ||
| Bugs | 0 | Features | 0 |
Complex classes like MonsterInsights_Report_Overview often do a lot of different things. To break such a class down, we need to identify a cohesive component within that class. A common approach to find such a component is to look for fields/methods that share the same prefixes, or suffixes.
Once you have determined the fields that belong together, you can apply the Extract Class refactoring. If the component makes sense as a sub-class, Extract Subclass is also a candidate, and is often faster.
While breaking up the class, it is a good idea to analyze how other classes use MonsterInsights_Report_Overview, and based on these observations, apply Extract Interface, too.
| 1 | <?php |
||
| 19 | final class MonsterInsights_Report_Overview extends MonsterInsights_Report { |
||
| 20 | |||
| 21 | public $title; |
||
| 22 | public $class = 'MonsterInsights_Report_Overview'; |
||
| 23 | public $name = 'overview'; |
||
| 24 | public $version = '1.0.0'; |
||
| 25 | public $level = 'lite'; |
||
| 26 | |||
| 27 | /** |
||
| 28 | * Primary class constructor. |
||
| 29 | * |
||
| 30 | * @access public |
||
| 31 | * @since 6.0.0 |
||
| 32 | */ |
||
| 33 | public function __construct() { |
||
| 36 | } |
||
| 37 | |||
| 38 | // Outputs the report. |
||
| 39 | protected function get_report_html( $data = array() ) { |
||
| 40 | ob_start(); |
||
| 41 | |||
| 42 | $this->get_overview_top( $data ); |
||
| 43 | |||
| 44 | if ( ! empty( $data['newvsreturn'] ) && ! empty( $data['devices'] ) ) { ?> |
||
| 45 | <div class="monsterinsights-reports-2-column-container row"> |
||
| 46 | <div class="monsterinsights-reports-2-column-item col-md-6"> |
||
| 47 | <?php $this->get_newvsreturn( $data ); ?> |
||
| 48 | </div> |
||
| 49 | <div class="monsterinsights-reports-2-column-item col-md-6"> |
||
| 50 | <?php $this->get_devices( $data ); ?> |
||
| 51 | </div> |
||
| 52 | </div> |
||
| 53 | <?php |
||
| 54 | } |
||
| 55 | |||
| 56 | if ( ! empty( $data['countries'] ) && ! empty( $data['referrals'] ) ) { |
||
| 57 | ?> |
||
| 58 | <div class="monsterinsights-reports-2-column-container row"> |
||
| 59 | <div class="monsterinsights-reports-2-column-item col-md-6 list-has-icons"> |
||
| 60 | <?php $this->get_countries( $data ); ?> |
||
| 61 | </div> |
||
| 62 | <div class="monsterinsights-reports-2-column-item col-md-6 list-has-icons"> |
||
| 63 | <?php $this->get_referrals( $data ); ?> |
||
| 64 | </div> |
||
| 65 | </div> |
||
| 66 | <?php |
||
| 67 | } |
||
| 68 | |||
| 69 | $this->get_toppages( $data ); |
||
| 70 | |||
| 71 | $html = ob_get_clean(); |
||
| 72 | |||
| 73 | return $html; |
||
| 74 | } |
||
| 75 | |||
| 76 | public function get_overview_report_js( $class = 'sessions', $data ) { |
||
| 77 | $up = MONSTERINSIGHTS_PLUGIN_URL . 'assets/images/up.png'; |
||
| 78 | $up2x = MONSTERINSIGHTS_PLUGIN_URL . 'assets/images/[email protected]'; |
||
| 79 | $down = MONSTERINSIGHTS_PLUGIN_URL . 'assets/images/down.png'; |
||
| 80 | $down2x = MONSTERINSIGHTS_PLUGIN_URL . 'assets/images/[email protected]'; |
||
| 81 | $uplabel = esc_attr__( 'UP', 'google-analytics-for-wordpress' ); |
||
| 82 | $downlabel = esc_attr__( 'DOWN', 'google-analytics-for-wordpress' ); |
||
| 83 | $descriptor = 'sessions' === $class ? esc_js( __( 'Unique', 'google-analytics-for-wordpress' ) ) . '<br />' . esc_js( __( 'Sessions', 'google-analytics-for-wordpress' ) ) : esc_js( __( 'Unique', 'google-analytics-for-wordpress' ) ) . '<br />' . esc_js( __( 'Pageviews', 'google-analytics-for-wordpress' ) ); |
||
| 84 | $descriptor = "'" . $descriptor . "'"; |
||
| 85 | |||
| 86 | $labels = array(); |
||
| 87 | foreach ( $data['timestamps'] as $timestamp ) { |
||
| 88 | $labels[] = "'" . esc_js( date_i18n( 'j M', $timestamp ) ) . "'"; |
||
| 89 | } |
||
| 90 | |||
| 91 | $datapoints = array(); |
||
| 92 | foreach ( $data[ $class ]['datapoints'] as $datapoint ) { |
||
| 93 | $datapoints[] = esc_js( $datapoint ); |
||
| 94 | } |
||
| 95 | |||
| 96 | $trendpoints = array(); |
||
| 97 | foreach ( $data[ $class ]['trendpoints'] as $trendpoint ) { |
||
| 98 | $trendpoints[] = esc_js( $trendpoint ); |
||
| 99 | } |
||
| 100 | |||
| 101 | |||
| 102 | ob_start(); ?> |
||
| 103 | <div class="monsterinsights-reports-box-datagraph" style="position:relative;"> |
||
| 104 | <canvas id="monsterinsights-overview-<?php echo $class; ?>" width="400px" height="400px"></canvas> |
||
| 105 | <script> |
||
| 106 | jQuery( document ).ready( function () { |
||
| 107 | if ( window.uorigindetected != null ) { |
||
| 108 | |||
| 109 | Chart.defaults.LineWithLine = Chart.defaults.line; |
||
| 110 | Chart.controllers.LineWithLine = Chart.controllers.line.extend( { |
||
| 111 | draw: function ( ease ) { |
||
| 112 | Chart.controllers.line.prototype.draw.call( this, ease ); |
||
| 113 | |||
| 114 | if ( this.chart.tooltip._active && this.chart.tooltip._active.length ) { |
||
| 115 | var activePoint = this.chart.tooltip._active[0], |
||
| 116 | ctx = this.chart.ctx, |
||
| 117 | x = activePoint.tooltipPosition().x, |
||
| 118 | topY = this.chart.scales['y-axis-0'].top, |
||
| 119 | bottomY = this.chart.scales['y-axis-0'].bottom; |
||
| 120 | |||
| 121 | // draw line |
||
| 122 | ctx.save(); |
||
| 123 | ctx.beginPath(); |
||
| 124 | ctx.moveTo( x, topY ); |
||
| 125 | ctx.lineTo( x, bottomY ); |
||
| 126 | ctx.lineWidth = 1; |
||
| 127 | ctx.strokeStyle = '#6db0e9'; |
||
| 128 | ctx.setLineDash( [10, 10] ); |
||
| 129 | ctx.stroke(); |
||
| 130 | ctx.restore(); |
||
| 131 | } |
||
| 132 | } |
||
| 133 | } ); |
||
| 134 | |||
| 135 | var ctx = document.getElementById( "monsterinsights-overview-<?php echo $class;?>" ); |
||
| 136 | var data = { |
||
| 137 | labels: [<?php echo implode( ', ', $labels ); ?>], |
||
| 138 | datasets: [ |
||
| 139 | { |
||
| 140 | lineTension: 0, // ChartJS doesn't make nice curves like in the PSD so for now leaving straight on |
||
| 141 | borderColor: '#5fa6e7', |
||
| 142 | |||
| 143 | backgroundColor: 'rgba( 109, 176, 233, 0.2)', |
||
| 144 | fillOpacity: 0.2, |
||
| 145 | fillColor: 'rgba( 109, 176, 233, 0.2)', |
||
| 146 | |||
| 147 | pointRadius: 4, |
||
| 148 | pointBorderColor: '#3783c4', |
||
| 149 | pointBackgroundColor: '#FFF', |
||
| 150 | |||
| 151 | |||
| 152 | hoverRadius: 1, |
||
| 153 | |||
| 154 | pointHoverBackgroundColor: '#FFF',// Point background color when hovered. |
||
| 155 | pointHoverBorderColor: '#3783c4',//Point border color when hovered. |
||
| 156 | pointHoverBorderWidth: 4,//Border width of point when hovered. |
||
| 157 | pointHoverRadius: 6,//The radius of the point when hovered. |
||
| 158 | |||
| 159 | |||
| 160 | labels: [<?php echo implode( ', ', $labels ); ?>], |
||
| 161 | data: [<?php echo implode( ', ', $datapoints ); ?>], |
||
| 162 | trend: [<?php echo implode( ', ', $trendpoints ); ?>], |
||
| 163 | }, |
||
| 164 | ] |
||
| 165 | }; |
||
| 166 | |||
| 167 | var overviewTooltips = function ( tooltip ) { |
||
| 168 | // Tooltip Element |
||
| 169 | var tooltipEl = jQuery( '#monsterinsights-chartjs-tooltip' ); |
||
| 170 | if ( ! tooltipEl[0] ) { |
||
| 171 | jQuery( 'body' ).append( '<div id="monsterinsights-chartjs-tooltip" style="padding:10px;"></div>' ); |
||
| 172 | tooltipEl = jQuery( '#monsterinsights-chartjs-tooltip' ); |
||
| 173 | } |
||
| 174 | // Hide if no tooltip |
||
| 175 | if ( ! tooltip.opacity ) { |
||
| 176 | tooltipEl.css( { |
||
| 177 | opacity: 0 |
||
| 178 | } ); |
||
| 179 | jQuery( '.chartjs-wrap canvas' ).each( function ( index, el ) { |
||
| 180 | jQuery( el ).css( 'cursor', 'default' ); |
||
| 181 | } ); |
||
| 182 | return; |
||
| 183 | } |
||
| 184 | jQuery( this._chart.canvas ).css( 'cursor', 'pointer' ); |
||
| 185 | |||
| 186 | // Set caret Position |
||
| 187 | tooltipEl.removeClass( 'above below no-transform' ); |
||
| 188 | if ( tooltip.yAlign ) { |
||
| 189 | tooltipEl.addClass( tooltip.yAlign ); |
||
| 190 | } else { |
||
| 191 | tooltipEl.addClass( 'no-transform' ); |
||
| 192 | } |
||
| 193 | |||
| 194 | var label = tooltip.title[0]; |
||
| 195 | var value = tooltip.title[1]; |
||
| 196 | var change = tooltip.title[2]; |
||
| 197 | var trend = ''; |
||
| 198 | if ( change == 0 ) { |
||
| 199 | trend += '0%'; |
||
| 200 | } else if ( change > 0 ) { |
||
| 201 | trend += '<img src="<?php echo esc_url( $up ); ?>"'; |
||
| 202 | trend += 'srcset="<?php echo esc_url( $up2x ); ?> 2x"'; |
||
| 203 | trend += 'alt="<?php echo esc_attr( $uplabel ); ?>" style="margin-right:6px"/>' + change + '%'; |
||
| 204 | } else { |
||
| 205 | trend += '<img src="<?php echo esc_url( $down ); ?>"'; |
||
| 206 | trend += 'srcset="<?php echo esc_url( $down2x ); ?> 2x"'; |
||
| 207 | trend += 'alt="<?php echo esc_attr( $downlabel ); ?>" style="margin-right:6px"/>' + Math.abs( change ) + '%'; |
||
| 208 | } |
||
| 209 | |||
| 210 | var html = '<div class="monsterinsights-reports-overview-datagraph-tooltip-container">'; |
||
| 211 | html += '<div class="monsterinsights-reports-overview-datagraph-tooltip-title">' + label + '</div>'; |
||
| 212 | html += '<div class="monsterinsights-reports-overview-datagraph-tooltip-number">' + value + '</div>'; |
||
| 213 | html += '<div class="monsterinsights-reports-overview-datagraph-tooltip-descriptor">' + <?php echo wp_kses_post( $descriptor ); ?> + '</div>'; |
||
| 214 | html += '<div class="monsterinsights-reports-overview-datagraph-tooltip-trend">' + trend + '</div>'; |
||
| 215 | html += '</div>'; |
||
| 216 | |||
| 217 | tooltipEl.html( html ); |
||
| 218 | |||
| 219 | // Find Y Location on page |
||
| 220 | var top = 0; |
||
| 221 | |||
| 222 | if ( tooltip.yAlign ) { |
||
| 223 | var ch = 0; |
||
| 224 | if ( tooltip.caretHeight ) { |
||
| 225 | ch = tooltip.caretHeight; |
||
| 226 | } |
||
| 227 | if ( tooltip.yAlign == 'above' ) { |
||
| 228 | top = tooltip.y - ch - tooltip.caretPadding; |
||
| 229 | } else { |
||
| 230 | top = tooltip.y + ch + tooltip.caretPadding; |
||
| 231 | } |
||
| 232 | } |
||
| 233 | // Display, position, and set styles for font |
||
| 234 | tooltipEl.css( { |
||
| 235 | opacity: 1, |
||
| 236 | width: tooltip.width ? ( |
||
| 237 | tooltip.width + 'px' |
||
| 238 | ) : 'auto', |
||
| 239 | left: tooltip.x - 50 + 'px', |
||
| 240 | top: top + 68 + 'px', |
||
| 241 | fontFamily: tooltip._fontFamily, |
||
| 242 | fontSize: tooltip.fontSize, |
||
| 243 | fontStyle: tooltip._fontStyle, |
||
| 244 | padding: tooltip.yPadding + 'px ' + tooltip.xPadding + 'px', |
||
| 245 | 'z-index': 99999, |
||
| 246 | } ); |
||
| 247 | }; |
||
| 248 | |||
| 249 | var MonsterInsightsOverview<?php echo time();?> = new Chart( ctx, { |
||
| 250 | type: 'LineWithLine', |
||
| 251 | data: data, |
||
| 252 | plugins: [ |
||
| 253 | { |
||
| 254 | afterRender: function () { |
||
| 255 | var parent = jQuery( '.monsterinsights-overview-report-overview-graph-panel .monsterinsights-tabbed-nav-tab-title[data-tab=\'pageviews-tab\']' ).hasClass( 'active' ); |
||
| 256 | if ( ! parent && '<?php echo $class; ?>' == 'pageviews' ) { |
||
| 257 | jQuery( '.monsterinsights-tabbed-nav-panel.pageviews-tab' ).hide(); |
||
| 258 | } |
||
| 259 | }, |
||
| 260 | } |
||
| 261 | ], |
||
| 262 | options: { |
||
| 263 | legend: { |
||
| 264 | display: false, |
||
| 265 | }, |
||
| 266 | hover: { |
||
| 267 | intersect: true, |
||
| 268 | }, |
||
| 269 | tooltips: { |
||
| 270 | enabled: false, |
||
| 271 | yAlign: 'top', |
||
| 272 | xAlign: 'top', |
||
| 273 | intersect: false, |
||
| 274 | custom: overviewTooltips, |
||
| 275 | callbacks: { |
||
| 276 | title: function ( tooltipItem, data ) { |
||
| 277 | tooltipItem = tooltipItem[0]; |
||
| 278 | var label = data.datasets[0].labels[tooltipItem.index]; |
||
| 279 | var value = data.datasets[0].data[tooltipItem.index]; |
||
| 280 | var change = data.datasets[0].trend[tooltipItem.index]; |
||
| 281 | return [label, value, change]; |
||
| 282 | }, |
||
| 283 | label: function ( tooltipItem, data ) { |
||
| 284 | return ''; |
||
| 285 | } |
||
| 286 | } |
||
| 287 | }, |
||
| 288 | scales: { |
||
| 289 | xAxes: [ |
||
| 290 | { |
||
| 291 | spanGaps: true, |
||
| 292 | position: 'bottom', |
||
| 293 | gridLines: { |
||
| 294 | show: true, |
||
| 295 | color: '#f2f6fa', |
||
| 296 | }, |
||
| 297 | ticks: { |
||
| 298 | fontColor: '#7f8591', |
||
| 299 | } |
||
| 300 | } |
||
| 301 | ], |
||
| 302 | yAxes: [ |
||
| 303 | { |
||
| 304 | gridLines: { |
||
| 305 | show: true, |
||
| 306 | color: '#d4e2ef', |
||
| 307 | }, |
||
| 308 | ticks: { |
||
| 309 | fontColor: '#7f8591', |
||
| 310 | callback: function ( value ) { |
||
| 311 | if ( value % 1 === 0 ) { |
||
| 312 | return value; |
||
| 313 | } |
||
| 314 | } |
||
| 315 | } |
||
| 316 | } |
||
| 317 | ] |
||
| 318 | }, |
||
| 319 | animation: false, |
||
| 320 | legend: { |
||
| 321 | display: false, |
||
| 322 | }, |
||
| 323 | responsive: true, |
||
| 324 | maintainAspectRatio: false, |
||
| 325 | borderWidth: 1, |
||
| 326 | } |
||
| 327 | } ); |
||
| 328 | } |
||
| 329 | } ); |
||
| 330 | </script> |
||
| 331 | </div> |
||
| 332 | <?php |
||
| 333 | $html = ob_get_clean(); |
||
| 334 | |||
| 335 | return $html; |
||
| 336 | } |
||
| 337 | |||
| 338 | /** |
||
| 339 | * Merge the 2 top reports into one for easier grabbing in the dashboard widget. |
||
| 340 | * |
||
| 341 | * @param array $data The data from GA. |
||
| 342 | */ |
||
| 343 | public function get_overview_top( $data ) { |
||
| 344 | $this->get_overviewgraph( $data ); |
||
| 345 | $this->get_infobox( $data ); |
||
| 346 | } |
||
| 347 | |||
| 348 | public function get_overviewgraph( $data ) { |
||
| 349 | if ( ! empty( $data['overviewgraph']['count'] ) && $data['overviewgraph']['count'] > 0 ) { |
||
| 350 | ?> |
||
| 351 | <div class="monsterinsights-overview-report-overview-graph-panel panel panel-default chart-panel"> |
||
| 352 | <ul class="monsterinsights-tabbed-nav nav nav-tabs nav-justified"> |
||
| 353 | <li role="presentation" class="monsterinsights-tabbed-nav-tab-title monsterinsights-clear active" data-tab="sessions-tab"> |
||
| 354 | <a href="#sessions-tab"><span class="monsterinsights-user-icon"></span> |
||
| 355 | <?php echo esc_html__( 'Sessions', 'google-analytics-for-wordpress' ); ?> |
||
| 356 | </a> |
||
| 357 | </li> |
||
| 358 | <li role="presentation" class="monsterinsights-tabbed-nav-tab-title monsterinsights-clear" data-tab="pageviews-tab"> |
||
| 359 | <a href="#pageviews-tab"><span class="monsterinsights-eye-icon"> </span> |
||
| 360 | <?php echo esc_html__( 'Pageviews', 'google-analytics-for-wordpress' ); ?> |
||
| 361 | </a> |
||
| 362 | </ul> |
||
| 363 | |||
| 364 | <div class="monsterinsights-tabbed-nav-panel sessions-tab"> |
||
| 365 | <div class="panel-body"> |
||
| 366 | <?php echo $this->get_overview_report_js( 'sessions', $data['overviewgraph'] ); ?> |
||
| 367 | </div> |
||
| 368 | </div> |
||
| 369 | <div class="monsterinsights-tabbed-nav-panel pageviews-tab"> |
||
| 370 | <div class="panel-body"> |
||
| 371 | <?php echo $this->get_overview_report_js( 'pageviews', $data['overviewgraph'] ); ?> |
||
| 372 | </div> |
||
| 373 | </div> |
||
| 374 | <div id="monsterinsights-chartjs-tooltip" style="opacity: 0"></div> |
||
| 375 | </div> |
||
| 376 | <?php } |
||
| 377 | } |
||
| 378 | |||
| 379 | public function get_infobox( $data ) { |
||
| 380 | if ( ! empty( $data['infobox'] ) ) { |
||
| 381 | $up = MONSTERINSIGHTS_PLUGIN_URL . 'assets/images/up.png'; |
||
| 382 | $up2x = MONSTERINSIGHTS_PLUGIN_URL . 'assets/images/[email protected]'; |
||
| 383 | $down = MONSTERINSIGHTS_PLUGIN_URL . 'assets/images/down.png'; |
||
| 384 | $down2x = MONSTERINSIGHTS_PLUGIN_URL . 'assets/images/[email protected]'; |
||
| 385 | $upred = MONSTERINSIGHTS_PLUGIN_URL . 'assets/images/up-red.png'; |
||
| 386 | $upred2x = MONSTERINSIGHTS_PLUGIN_URL . 'assets/images/[email protected]'; |
||
| 387 | $downgrn = MONSTERINSIGHTS_PLUGIN_URL . 'assets/images/down-green.png'; |
||
| 388 | $downgrn2x = MONSTERINSIGHTS_PLUGIN_URL . 'assets/images/[email protected]'; |
||
| 389 | $uplabel = esc_attr__( 'Up', 'google-analytics-for-wordpress' ); |
||
| 390 | $downlabel = esc_attr__( 'Down', 'google-analytics-for-wordpress' ); |
||
| 391 | ?> |
||
| 392 | <div class="monsterinsights-overview-report-infobox-panel panel row container-fluid"> |
||
| 393 | <div class="monsterinsights-reports-infobox col-md-3 col-xs-6"> |
||
| 394 | <div class="monsterinsights-reports-infobox-title"> |
||
| 395 | <?php echo esc_html__( 'Sessions', 'google-analytics-for-wordpress' ); ?> |
||
| 396 | </div> |
||
| 397 | <div class="monsterinsights-reports-uright-tooltip" data-tooltip-title="<?php echo esc_attr( __( 'Session', 'google-analytics-for-wordpress' ) ); ?>" data-tooltip-description="<?php echo esc_attr( __( 'A session is the browsing session of a single user to your site.', 'google-analytics-for-wordpress' ) ); ?>"></div> |
||
| 398 | <div class="monsterinsights-reports-infobox-number"> |
||
| 399 | <?php echo esc_html( number_format_i18n( $data['infobox']['sessions']['value'] ) ); ?> |
||
| 400 | </div> |
||
| 401 | <?php if ( empty( $data['infobox']['sessions']['prev'] ) ) { ?> |
||
| 402 | <div class="monsterinsights-reports-infobox-prev"> |
||
| 403 | <?php echo esc_html__( 'No change', 'google-analytics-for-wordpress' ); ?> |
||
| 404 | </div> |
||
| 405 | <?php } else if ( $data['infobox']['sessions']['prev'] > 0 ) { ?> |
||
| 406 | <div class="monsterinsights-reports-infobox-prev monsterinsights-reports-infobox-up"> |
||
| 407 | <img src="<?php echo $up; ?>" srcset="<?php echo $up2x; ?> 2x" alt="<?php echo $uplabel; ?>"/> |
||
| 408 | <?php echo esc_html( $data['infobox']['sessions']['prev'] ) . '%'; ?> |
||
| 409 | </div> |
||
| 410 | <?php } else { ?> |
||
| 411 | <div class="monsterinsights-reports-infobox-prev monsterinsights-reports-infobox-down"> |
||
| 412 | <img src="<?php echo $down; ?>" srcset="<?php echo $down2x; ?> 2x" alt="<?php echo $downlabel; ?>"/> |
||
| 413 | <?php echo esc_html( absint( $data['infobox']['sessions']['prev'] ) ) . '%'; ?> |
||
| 414 | </div> |
||
| 415 | <?php } ?> |
||
| 416 | <div class="monsterinsights-reports-infobox-compare"> |
||
| 417 | <?php echo sprintf( esc_html__( 'vs. Previous %s Days', 'google-analytics-for-wordpress' ), $data['infobox']['range'] ); ?> |
||
| 418 | </div> |
||
| 419 | </div> |
||
| 420 | <div class="monsterinsights-reports-infobox col-md-3 col-xs-6"> |
||
| 421 | <div class="monsterinsights-reports-infobox-title"> |
||
| 422 | <?php echo esc_html__( 'Pageviews', 'google-analytics-for-wordpress' ); ?> |
||
| 423 | </div> |
||
| 424 | <div class="monsterinsights-reports-uright-tooltip" data-tooltip-title="<?php echo esc_attr( __( 'Pageviews', 'google-analytics-for-wordpress' ) ); ?>" data-tooltip-description="<?php echo esc_attr( __( 'A pageview is defined as a view of a page on your site that is being tracked by the Analytics tracking code. Each refresh of a page is also a new pageview.', 'google-analytics-for-wordpress' ) ); ?>"></div> |
||
| 425 | <div class="monsterinsights-reports-infobox-number"> |
||
| 426 | <?php echo esc_html( number_format_i18n( $data['infobox']['pageviews']['value'] ) ); ?> |
||
| 427 | </div> |
||
| 428 | <?php if ( empty( $data['infobox']['pageviews']['prev'] ) ) { ?> |
||
| 429 | <div class="monsterinsights-reports-infobox-prev"> |
||
| 430 | <?php echo esc_html__( 'No change', 'google-analytics-for-wordpress' ); ?> |
||
| 431 | </div> |
||
| 432 | <?php } else if ( $data['infobox']['pageviews']['prev'] > 0 ) { ?> |
||
| 433 | <div class="monsterinsights-reports-infobox-prev monsterinsights-reports-infobox-up"> |
||
| 434 | <img src="<?php echo $up; ?>" srcset="<?php echo $up2x; ?> 2x" alt="<?php echo $uplabel; ?>"/> |
||
| 435 | <?php echo esc_html( $data['infobox']['pageviews']['prev'] ) . '%'; ?> |
||
| 436 | </div> |
||
| 437 | <?php } else { ?> |
||
| 438 | <div class="monsterinsights-reports-infobox-prev monsterinsights-reports-infobox-down"> |
||
| 439 | <img src="<?php echo $down; ?>" srcset="<?php echo $down2x; ?> 2x" alt="<?php echo $downlabel; ?>"/> |
||
| 440 | <?php echo esc_html( absint( $data['infobox']['pageviews']['prev'] ) ) . '%'; ?> |
||
| 441 | </div> |
||
| 442 | <?php } ?> |
||
| 443 | <div class="monsterinsights-reports-infobox-compare"> |
||
| 444 | <?php echo sprintf( esc_html__( 'vs. Previous %s Days', 'google-analytics-for-wordpress' ), $data['infobox']['range'] ); ?> |
||
| 445 | </div> |
||
| 446 | </div> |
||
| 447 | <div class="monsterinsights-reports-infobox col-md-3 col-xs-6"> |
||
| 448 | <div class="monsterinsights-reports-infobox-title"> |
||
| 449 | <?php echo esc_html__( 'Avg. Session Duration', 'google-analytics-for-wordpress' ); ?> |
||
| 450 | </div> |
||
| 451 | <div class="monsterinsights-reports-uright-tooltip" data-tooltip-title="<?php echo esc_attr( __( 'Average Session Duration', 'google-analytics-for-wordpress' ) ); ?>" data-tooltip-description="<?php echo esc_attr( __( 'Total duration of all sessions (in seconds) / number of sessions.', 'google-analytics-for-wordpress' ) ); ?>"></div> |
||
| 452 | <div class="monsterinsights-reports-infobox-number"> |
||
| 453 | <?php echo esc_html( $data['infobox']['duration']['value'] ); ?> |
||
| 454 | </div> |
||
| 455 | <?php if ( empty( $data['infobox']['duration']['prev'] ) ) { ?> |
||
| 456 | <div class="monsterinsights-reports-infobox-prev"> |
||
| 457 | <?php echo esc_html__( 'No change', 'google-analytics-for-wordpress' ); ?> |
||
| 458 | </div> |
||
| 459 | <?php } else if ( $data['infobox']['duration']['prev'] > 0 ) { ?> |
||
| 460 | <div class="monsterinsights-reports-infobox-prev monsterinsights-reports-infobox-up"> |
||
| 461 | <img src="<?php echo $up; ?>" srcset="<?php echo $up2x; ?> 2x" alt="<?php echo $uplabel; ?>"/> |
||
| 462 | <?php echo esc_html( $data['infobox']['duration']['prev'] ) . '%'; ?> |
||
| 463 | </div> |
||
| 464 | <?php } else { ?> |
||
| 465 | <div class="monsterinsights-reports-infobox-prev monsterinsights-reports-infobox-down"> |
||
| 466 | <img src="<?php echo $down; ?>" srcset="<?php echo $down2x; ?> 2x" alt="<?php echo $downlabel; ?>"/> |
||
| 467 | <?php echo esc_html( absint( $data['infobox']['duration']['prev'] ) ) . '%'; ?> |
||
| 468 | </div> |
||
| 469 | <?php } ?> |
||
| 470 | <div class="monsterinsights-reports-infobox-compare"> |
||
| 471 | <?php echo sprintf( esc_html__( 'vs. Previous %s Days', 'google-analytics-for-wordpress' ), $data['infobox']['range'] ); ?> |
||
| 472 | </div> |
||
| 473 | </div> |
||
| 474 | <div class="monsterinsights-reports-infobox col-md-3 col-xs-6"> |
||
| 475 | <div class="monsterinsights-reports-infobox-title"> |
||
| 476 | <?php echo esc_html__( 'Bounce Rate', 'google-analytics-for-wordpress' ); ?> |
||
| 477 | </div> |
||
| 478 | <div class="monsterinsights-reports-uright-tooltip" data-tooltip-title="<?php echo esc_attr( __( 'Bounce Rate', 'google-analytics-for-wordpress' ) ); ?>" data-tooltip-description="<?php echo esc_attr( __( 'Percentage of single page visits (or web sessions). It is the number of visits in which a person leaves your website from the landing page without browsing any further.', 'google-analytics-for-wordpress' ) ); ?>"></div> |
||
| 479 | <div class="monsterinsights-reports-infobox-number"> |
||
| 480 | <?php echo esc_html( $data['infobox']['bounce']['value'] ) . '%'; ?> |
||
| 481 | </div> |
||
| 482 | <?php if ( empty( $data['infobox']['bounce']['prev'] ) ) { ?> |
||
| 483 | <div class="monsterinsights-reports-infobox-prev"> |
||
| 484 | <?php echo esc_html__( 'No change', 'google-analytics-for-wordpress' ); ?> |
||
| 485 | </div> |
||
| 486 | <?php } else if ( $data['infobox']['bounce']['prev'] > 0 ) { ?> |
||
| 487 | <div class="monsterinsights-reports-infobox-prev monsterinsights-reports-infobox-up monsterinsights-reports-infobox-red"> |
||
| 488 | <img src="<?php echo $upred; ?>" srcset="<?php echo $upred2x; ?> 2x" alt="<?php echo $uplabel; ?>"/> |
||
| 489 | <?php echo esc_html( $data['infobox']['bounce']['prev'] ) . '%'; ?> |
||
| 490 | </div> |
||
| 491 | <?php } else { ?> |
||
| 492 | <div class="monsterinsights-reports-infobox-prev monsterinsights-reports-infobox-down monsterinsights-reports-infobox-green"> |
||
| 493 | <img src="<?php echo $downgrn; ?>" srcset="<?php echo $downgrn2x; ?> 2x" alt="<?php echo $downlabel; ?>"/> |
||
| 494 | <?php echo esc_html( absint( $data['infobox']['bounce']['prev'] ) ) . '%'; ?> |
||
| 495 | </div> |
||
| 496 | <?php } ?> |
||
| 497 | <div class="monsterinsights-reports-infobox-compare"> |
||
| 498 | <?php echo sprintf( esc_html__( 'vs. Previous %s Days', 'google-analytics-for-wordpress' ), $data['infobox']['range'] ); ?> |
||
| 499 | </div> |
||
| 500 | </div> |
||
| 501 | </div> |
||
| 502 | <?php } |
||
| 503 | } |
||
| 504 | |||
| 505 | public function get_newvsreturn( $data ) { |
||
| 506 | if ( ! empty( $data['newvsreturn'] ) ) { |
||
| 507 | ?> |
||
| 508 | <div class="monsterinsights-reports-2-column-panel panel monsterinsights-pie-chart-panel chart-panel"> |
||
| 509 | <div class="monsterinsights-reports-panel-title"> |
||
| 510 | <?php echo esc_html__( 'New vs. Returning Visitors', 'google-analytics-for-wordpress' ); ?> |
||
| 511 | </div> |
||
| 512 | <div class="monsterinsights-reports-uright-tooltip" data-tooltip-title="<?php echo esc_attr( __( 'New vs. Returning Visitors', 'google-analytics-for-wordpress' ) ); ?>" data-tooltip-description="<?php echo esc_attr( __( 'This graph shows what percent of your user sessions come from new versus repeat visitors.', 'google-analytics-for-wordpress' ) ); ?>"></div> |
||
| 513 | <div class="monsterinsights-reports-pie-graph monsterinsights-clear"> |
||
| 514 | <div id="monsterinsights-chartjs-pie-returning-tooltip" style="opacity: 0"></div> |
||
| 515 | <canvas id="monsterinsights-reports-returning-visitor-chart" width="200px" height="200px" style="max-width:200px;max-height:200px"></canvas> |
||
| 516 | <script type="text/javascript"> |
||
| 517 | jQuery( document ).ready( function () { |
||
| 518 | if ( window.uorigindetected != null ) { |
||
| 519 | |||
| 520 | var pieTooltips = function ( tooltip ) { |
||
| 521 | // Tooltip Element |
||
| 522 | var tooltipEl = jQuery( '#monsterinsights-chartjs-pie-returning-tooltip' ); |
||
| 523 | if ( ! tooltipEl[0] ) { |
||
| 524 | jQuery( 'body' ).append( '<div id="monsterinsights-chartjs-pie-returning-tooltip" style="padding:10px;"></div>' ); |
||
| 525 | tooltipEl = jQuery( '#monsterinsights-chartjs-pie-returning-tooltip' ); |
||
| 526 | } |
||
| 527 | // Hide if no tooltip |
||
| 528 | if ( ! tooltip.opacity ) { |
||
| 529 | tooltipEl.css( { |
||
| 530 | opacity: 0 |
||
| 531 | } ); |
||
| 532 | jQuery( '.chartjs-wrap canvas' ).each( function ( index, el ) { |
||
| 533 | jQuery( el ).css( 'cursor', 'default' ); |
||
| 534 | } ); |
||
| 535 | return; |
||
| 536 | } |
||
| 537 | jQuery( this._chart.canvas ).css( 'cursor', 'pointer' ); |
||
| 538 | |||
| 539 | // Set caret Position |
||
| 540 | tooltipEl.removeClass( 'above below no-transform' ); |
||
| 541 | if ( tooltip.yAlign ) { |
||
| 542 | tooltipEl.addClass( tooltip.yAlign ); |
||
| 543 | } else { |
||
| 544 | tooltipEl.addClass( 'no-transform' ); |
||
| 545 | } |
||
| 546 | |||
| 547 | var label = tooltip.title[0]; |
||
| 548 | var value = tooltip.title[1]; |
||
| 549 | |||
| 550 | var html = '<div class="monsterinsights-reports-overview-datagraph-tooltip-container">'; |
||
| 551 | html += '<div class="monsterinsights-reports-overview-datagraph-tooltip-title">' + label + '</div>'; |
||
| 552 | html += '<div class="monsterinsights-reports-overview-datagraph-tooltip-number">' + value + '%</div>'; |
||
| 553 | html += '</div>'; |
||
| 554 | |||
| 555 | tooltipEl.html( html ); |
||
| 556 | |||
| 557 | // Find Y Location on page |
||
| 558 | var top = 0; |
||
| 559 | |||
| 560 | if ( tooltip.yAlign ) { |
||
| 561 | var ch = 0; |
||
| 562 | if ( tooltip.caretHeight ) { |
||
| 563 | ch = tooltip.caretHeight; |
||
| 564 | } |
||
| 565 | if ( tooltip.yAlign == 'above' ) { |
||
| 566 | top = tooltip.y - ch - tooltip.caretPadding; |
||
| 567 | } else { |
||
| 568 | top = tooltip.y + ch + tooltip.caretPadding; |
||
| 569 | } |
||
| 570 | } |
||
| 571 | // Display, position, and set styles for font |
||
| 572 | tooltipEl.css( { |
||
| 573 | opacity: 1, |
||
| 574 | width: tooltip.width ? ( |
||
| 575 | tooltip.width + 'px' |
||
| 576 | ) : 'auto', |
||
| 577 | left: tooltip.x - 50 + 'px', |
||
| 578 | top: top - 40 + 'px', |
||
| 579 | fontFamily: tooltip._fontFamily, |
||
| 580 | fontSize: tooltip.fontSize, |
||
| 581 | fontStyle: tooltip._fontStyle, |
||
| 582 | padding: tooltip.yPadding + 'px ' + tooltip.xPadding + 'px', |
||
| 583 | 'z-index': 99999, |
||
| 584 | } ); |
||
| 585 | }; |
||
| 586 | |||
| 587 | var config = { |
||
| 588 | type: 'doughnut', |
||
| 589 | data: { |
||
| 590 | datasets: [ |
||
| 591 | { |
||
| 592 | data: [ |
||
| 593 | <?php echo esc_js( $data['newvsreturn']['new'] ); ?>, |
||
| 594 | <?php echo esc_js( $data['newvsreturn']['returning'] ); ?>, |
||
| 595 | ], |
||
| 596 | backgroundColor: [ |
||
| 597 | '#2077c4', |
||
| 598 | '#52a7f4' |
||
| 599 | ], |
||
| 600 | } |
||
| 601 | ], |
||
| 602 | values: [<?php echo esc_js( $data['newvsreturn']['new'] ); ?>,<?php echo esc_js( $data['newvsreturn']['returning'] ); ?> ], |
||
| 603 | labels: [ |
||
| 604 | "<?php echo esc_js( __( 'New', 'google-analytics-for-wordpress' ) ); ?>", |
||
| 605 | "<?php echo esc_js( __( 'Returning', 'google-analytics-for-wordpress' ) ); ?>", |
||
| 606 | ] |
||
| 607 | }, |
||
| 608 | options: { |
||
| 609 | responsive: true, |
||
| 610 | maintainAspectRatio: false, |
||
| 611 | tooltips: { |
||
| 612 | enabled: false, |
||
| 613 | yAlign: 'top', |
||
| 614 | xAlign: 'top', |
||
| 615 | intersect: true, |
||
| 616 | custom: pieTooltips, |
||
| 617 | callbacks: { |
||
| 618 | title: function ( tooltipItem, data ) { |
||
| 619 | tooltipItem = tooltipItem[0]; |
||
| 620 | var label = data.labels[tooltipItem.index]; |
||
| 621 | var value = data.datasets[0].data[tooltipItem.index]; |
||
| 622 | return [label, value]; |
||
| 623 | }, |
||
| 624 | label: function ( tooltipItem, data ) { |
||
| 625 | return ''; |
||
| 626 | } |
||
| 627 | } |
||
| 628 | }, |
||
| 629 | animation: false, |
||
| 630 | legendCallback: function ( chart ) { |
||
| 631 | var text = []; |
||
| 632 | text.push( '<ul class="' + chart.id + '-legend" style="list-style:none">' ); |
||
| 633 | for ( var i = 0; i < chart.data.datasets[0].data.length; i ++ ) { |
||
| 634 | text.push( '<li style="color: #23282d;font-size: 16px;font-weight: 400;"><div style="color: #23282d;width:12px;height:12px;display:inline-block;background:' + chart.data.datasets[0].backgroundColor[i] + '" /> ' ); |
||
| 635 | if ( typeof( |
||
| 636 | chart |
||
| 637 | ) != 'undefined' && typeof( |
||
| 638 | chart.data |
||
| 639 | ) != 'undefined' && typeof( |
||
| 640 | chart.data.labels |
||
| 641 | ) != 'undefined' && typeof( |
||
| 642 | chart.data.labels[i] |
||
| 643 | ) != 'undefined' ) { |
||
| 644 | text.push( chart.data.labels[i] ); |
||
| 645 | } |
||
| 646 | |||
| 647 | if ( typeof( |
||
| 648 | chart |
||
| 649 | ) != 'undefined' && typeof( |
||
| 650 | chart.data |
||
| 651 | ) != 'undefined' && typeof( |
||
| 652 | chart.data.values |
||
| 653 | ) != 'undefined' && typeof( |
||
| 654 | chart.data.values[i] |
||
| 655 | ) != 'undefined' ) { |
||
| 656 | text.push( '<span class="monsterinsights-pie-chart-legend-number">' + chart.data.values[i] + '%</span>' ); |
||
| 657 | } |
||
| 658 | text.push( '</li>' ); |
||
| 659 | } |
||
| 660 | text.push( '</ul>' ); |
||
| 661 | |||
| 662 | return text.join( '' ); |
||
| 663 | }, |
||
| 664 | legend: {display: false}, |
||
| 665 | } |
||
| 666 | }; |
||
| 667 | var overviewreturning = new Chart( document.getElementById( 'monsterinsights-reports-returning-visitor-chart' ).getContext( '2d' ), config ); |
||
| 668 | jQuery( '.monsterinsights-reports-pie-graph-key' ).html( overviewreturning.generateLegend() ); |
||
| 669 | } |
||
| 670 | } ); |
||
| 671 | </script> |
||
| 672 | </div> |
||
| 673 | <div class="monsterinsights-reports-pie-graph-key"></div> |
||
| 674 | </div> |
||
| 675 | <?php |
||
| 676 | } |
||
| 677 | } |
||
| 678 | |||
| 679 | public function get_devices( $data ) { |
||
| 783 | ] |
||
| 784 | }, |
||
| 785 | options: { |
||
| 786 | responsive: true, |
||
| 787 | maintainAspectRatio: false, |
||
| 788 | tooltips: { |
||
| 789 | enabled: false, |
||
| 790 | yAlign: 'top', |
||
| 791 | xAlign: 'top', |
||
| 792 | intersect: true, |
||
| 793 | custom: pieTooltips, |
||
| 794 | callbacks: { |
||
| 795 | title: function ( tooltipItem, data ) { |
||
| 796 | tooltipItem = tooltipItem[0]; |
||
| 797 | var label = data.labels[tooltipItem.index]; |
||
| 798 | var value = data.datasets[0].data[tooltipItem.index]; |
||
| 799 | return [label, value]; |
||
| 800 | }, |
||
| 801 | label: function ( tooltipItem, data ) { |
||
| 802 | return ''; |
||
| 803 | } |
||
| 804 | } |
||
| 805 | }, |
||
| 806 | animation: false, |
||
| 807 | legendCallback: function ( chart ) { |
||
| 808 | var text = []; |
||
| 809 | text.push( '<ul class="' + chart.id + '-legend" style="list-style:none">' ); |
||
| 810 | for ( var i = 0; i < chart.data.datasets[0].data.length; i ++ ) { |
||
| 811 | text.push( '<li style="color: #23282d;font-size: 16px;font-weight: 400;"><div style="color: #23282d;width:12px;height:12px;display:inline-block;background:' + chart.data.datasets[0].backgroundColor[i] + '" /> ' ); |
||
| 812 | if ( typeof( |
||
| 813 | chart |
||
| 814 | ) != 'undefined' && typeof( |
||
| 815 | chart.data |
||
| 816 | ) != 'undefined' && typeof( |
||
| 817 | chart.data.labels |
||
| 818 | ) != 'undefined' && typeof( |
||
| 819 | chart.data.labels[i] |
||
| 820 | ) != 'undefined' ) { |
||
| 821 | text.push( chart.data.labels[i] ); |
||
| 822 | } |
||
| 823 | |||
| 824 | if ( typeof( |
||
| 825 | chart |
||
| 826 | ) != 'undefined' && typeof( |
||
| 827 | chart.data |
||
| 828 | ) != 'undefined' && typeof( |
||
| 829 | chart.data.values |
||
| 830 | ) != 'undefined' && typeof( |
||
| 831 | chart.data.values[i] |
||
| 832 | ) != 'undefined' ) { |
||
| 833 | text.push( '<span class="monsterinsights-pie-chart-legend-number">' + chart.data.values[i] + '%</span>' ); |
||
| 834 | } |
||
| 835 | text.push( '</li>' ); |
||
| 836 | } |
||
| 837 | text.push( '</ul>' ); |
||
| 838 | |||
| 839 | return text.join( '' ); |
||
| 840 | }, |
||
| 841 | legend: {display: false}, |
||
| 842 | } |
||
| 843 | }; |
||
| 844 | var devicebreakdown = new Chart( document.getElementById( 'monsterinsights-reports-devices-chart' ).getContext( '2d' ), config ); |
||
| 845 | jQuery( '.monsterinsights-reports-pie-visitors-graph-key' ).html( devicebreakdown.generateLegend() ); |
||
| 846 | } |
||
| 847 | } ); |
||
| 848 | </script> |
||
| 849 | </div> |
||
| 850 | <div class="monsterinsights-reports-pie-visitors-graph-key"></div> |
||
| 851 | </div> |
||
| 852 | <?php |
||
| 853 | } |
||
| 854 | } |
||
| 855 | |||
| 856 | public function get_countries( $data ) { |
||
| 885 | </div> |
||
| 886 | </div> |
||
| 887 | <?php |
||
| 888 | } |
||
| 889 | } |
||
| 890 | |||
| 891 | public function get_referrals( $data ) { |
||
| 892 | if ( ! empty( $data['referrals'] ) ) { |
||
| 893 | ?> |
||
| 894 | <div class="monsterinsights-reports-2-column-panel panel nopadding"> |
||
| 895 | <div class="monsterinsights-reports-panel-title"> |
||
| 896 | <?php echo esc_html__( 'Referrals', 'google-analytics-for-wordpress' ); ?> |
||
| 897 | </div> |
||
| 898 | <div class="monsterinsights-reports-uright-tooltip" data-tooltip-title="<?php echo esc_attr( __( 'Referrals', 'google-analytics-for-wordpress' ) ); ?>" data-tooltip-description="<?php echo esc_attr( __( 'This list shows the top websites that send your website traffic, known as "referral traffic".', 'google-analytics-for-wordpress' ) ); ?>"></div> |
||
| 899 | <div class="monsterinsights-reports-list"> |
||
| 900 | <ul class="monsterinsights-reports-referral-list list-group"> |
||
| 901 | <?php |
||
| 902 | $i = 1; |
||
| 903 | foreach ( $data['referrals'] as $ireferrals => $referralsdata ) { |
||
| 904 | echo '<li class="list-group-item">' . |
||
| 905 | '<span class="monsterinsights-reports-list-count">' |
||
| 906 | . $i . |
||
| 907 | '</span>' . |
||
| 908 | '<img class="monsterinsights-reports-referral-icon" src="https://www.google.com/s2/favicons?domain=' . $referralsdata['url'] . '" width="16px" height="16px" />' . |
||
| 909 | '<span class="monsterinsights-reports-list-text">' |
||
| 910 | . $referralsdata['url'] . |
||
| 911 | '</span> |
||
| 912 | <span class="monsterinsights-reports-list-number">' |
||
| 913 | . number_format_i18n( $referralsdata['sessions'] ) . |
||
| 914 | '</span>' . |
||
| 915 | '</li>'; |
||
| 916 | $i ++; |
||
| 917 | } |
||
| 918 | ?> |
||
| 919 | </ul> |
||
| 920 | </div> |
||
| 921 | <?php |
||
| 922 | $referral_url = 'https://analytics.google.com/analytics/web/#report/trafficsources-referrals/' . MonsterInsights()->auth->get_referral_url() . $this->get_ga_report_range( $data ); |
||
| 923 | ?> |
||
| 924 | <div class="monsterinsights-reports-panel-footer"> |
||
| 925 | <a href="<?php echo $referral_url; ?>" target="_blank" title="<?php echo esc_html__( 'View All Referral Sources', 'google-analytics-for-wordpress' ); ?>" class="monsterinsights-reports-panel-footer-button"><?php echo esc_html__( 'View All Referral Sources', 'google-analytics-for-wordpress' ); ?></a> |
||
| 926 | </div> |
||
| 927 | </div> |
||
| 928 | <?php |
||
| 929 | } |
||
| 930 | } |
||
| 931 | |||
| 932 | public function get_toppages( $data ) { |
||
| 984 | </div> |
||
| 985 | </div> |
||
| 986 | <?php } |
||
| 987 | } |
||
| 989 |
Loading history...