finlabsindia/wp-content/plugins/google-analytics-for-wordpress/includes/admin/reports/overview.php

<?php
/**
 * Overview Report
 *
 * Ensures all of the reports have a uniform class with helper functions.
 *
 * @since 6.0.0
 *
 * @package MonsterInsights
 * @subpackage Reports
 * @author  Chris Christoff
 */

// Exit if accessed directly
if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

final class MonsterInsights_Report_Overview extends MonsterInsights_Report {

	public $title;
	public $class = 'MonsterInsights_Report_Overview';
	public $name = 'overview';
	public $version = '1.0.0';
	public $level = 'lite';

	/**
	 * Primary class constructor.
	 *
	 * @access public
	 * @since 6.0.0
	 */
	public function __construct() {
		$this->title = __( 'Overview', 'google-analytics-for-wordpress' );
		parent::__construct();
	}

	// Outputs the report.
	protected function get_report_html( $data = array() ) {
		ob_start();

		$this->get_overview_top( $data );

		if ( ! empty( $data['newvsreturn'] ) && ! empty( $data['devices'] ) ) { ?>
			<div class="monsterinsights-reports-2-column-container row">
				<div class="monsterinsights-reports-2-column-item col-md-6">
					<?php $this->get_newvsreturn( $data ); ?>
				</div>
				<div class="monsterinsights-reports-2-column-item col-md-6">
					<?php $this->get_devices( $data ); ?>
				</div>
			</div>
			<?php
		}

		if ( ! empty( $data['countries'] ) && ! empty( $data['referrals'] ) ) {
			?>
			<div class="monsterinsights-reports-2-column-container row">
				<div class="monsterinsights-reports-2-column-item col-md-6 list-has-icons">
					<?php $this->get_countries( $data ); ?>
				</div>
				<div class="monsterinsights-reports-2-column-item col-md-6 list-has-icons">
					<?php $this->get_referrals( $data ); ?>
				</div>
			</div>
			<?php
		}

		$this->get_toppages( $data );

		$html = ob_get_clean();

		return $html;
	}

	public function get_overview_report_js( $class = 'sessions', $data ) {
		$up         = MONSTERINSIGHTS_PLUGIN_URL . 'assets/images/up.png';
		$up2x       = MONSTERINSIGHTS_PLUGIN_URL . 'assets/images/up@2x.png';
		$down       = MONSTERINSIGHTS_PLUGIN_URL . 'assets/images/down.png';
		$down2x     = MONSTERINSIGHTS_PLUGIN_URL . 'assets/images/down@2x.png';
		$uplabel    = esc_attr__( 'UP', 'google-analytics-for-wordpress' );
		$downlabel  = esc_attr__( 'DOWN', 'google-analytics-for-wordpress' );
		$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' ) );
		$descriptor = "'" . $descriptor . "'";

		$labels = array();
		foreach ( $data['timestamps'] as $timestamp ) {
			$labels[] = "'" . esc_js( date_i18n( 'j M', $timestamp ) ) . "'";
		}

		$datapoints = array();
		foreach ( $data[ $class ]['datapoints'] as $datapoint ) {
			$datapoints[] = esc_js( $datapoint );
		}

		$trendpoints = array();
		foreach ( $data[ $class ]['trendpoints'] as $trendpoint ) {
			$trendpoints[] = esc_js( $trendpoint );
		}


		ob_start(); ?>
		<div class="monsterinsights-reports-box-datagraph" style="position:relative;">
			<canvas id="monsterinsights-overview-<?php echo $class; ?>" width="400px" height="400px"></canvas>
			<script>
				jQuery( document ).ready( function () {
					if ( window.uorigindetected != null ) {

						Chart.defaults.LineWithLine = Chart.defaults.line;
						Chart.controllers.LineWithLine = Chart.controllers.line.extend( {
							draw: function ( ease ) {
								Chart.controllers.line.prototype.draw.call( this, ease );

								if ( this.chart.tooltip._active && this.chart.tooltip._active.length ) {
									var activePoint = this.chart.tooltip._active[0],
										ctx = this.chart.ctx,
										x = activePoint.tooltipPosition().x,
										topY = this.chart.scales['y-axis-0'].top,
										bottomY = this.chart.scales['y-axis-0'].bottom;

									// draw line
									ctx.save();
									ctx.beginPath();
									ctx.moveTo( x, topY );
									ctx.lineTo( x, bottomY );
									ctx.lineWidth = 1;
									ctx.strokeStyle = '#6db0e9';
									ctx.setLineDash( [10, 10] );
									ctx.stroke();
									ctx.restore();
								}
							}
						} );

						var ctx = document.getElementById( "monsterinsights-overview-<?php echo $class;?>" );
						var data = {
							labels: [<?php echo implode( ', ', $labels ); ?>],
							datasets: [
								{
									lineTension: 0, // ChartJS doesn't make nice curves like in the PSD so for now leaving straight on
									borderColor: '#5fa6e7',

									backgroundColor: 'rgba(	109, 176, 233, 0.2)',
									fillOpacity: 0.2,
									fillColor: 'rgba(	109, 176, 233, 0.2)',

									pointRadius: 4,
									pointBorderColor: '#3783c4',
									pointBackgroundColor: '#FFF',


									hoverRadius: 1,

									pointHoverBackgroundColor: '#FFF',// Point background color when hovered.
									pointHoverBorderColor: '#3783c4',//Point border color when hovered.
									pointHoverBorderWidth: 4,//Border width of point when hovered.
									pointHoverRadius: 6,//The radius of the point when hovered.


									labels: [<?php echo implode( ', ', $labels );   ?>],
									data: [<?php echo implode( ', ', $datapoints );   ?>],
									trend: [<?php echo implode( ', ', $trendpoints ); ?>],
								},
							]
						};

						var overviewTooltips = function ( tooltip ) {
							// Tooltip Element
							var tooltipEl = jQuery( '#monsterinsights-chartjs-tooltip' );
							if ( ! tooltipEl[0] ) {
								jQuery( 'body' ).append( '<div id="monsterinsights-chartjs-tooltip" style="padding:10px;"></div>' );
								tooltipEl = jQuery( '#monsterinsights-chartjs-tooltip' );
							}
							// Hide if no tooltip
							if ( ! tooltip.opacity ) {
								tooltipEl.css( {
									opacity: 0
								} );
								jQuery( '.chartjs-wrap canvas' ).each( function ( index, el ) {
									jQuery( el ).css( 'cursor', 'default' );
								} );
								return;
							}
							jQuery( this._chart.canvas ).css( 'cursor', 'pointer' );

							// Set caret Position
							tooltipEl.removeClass( 'above below no-transform' );
							if ( tooltip.yAlign ) {
								tooltipEl.addClass( tooltip.yAlign );
							} else {
								tooltipEl.addClass( 'no-transform' );
							}

							var label = tooltip.title[0];
							var value = tooltip.title[1];
							var change = tooltip.title[2];
							var trend = '';
							if ( change == 0 ) {
								trend += '0%';
							} else if ( change > 0 ) {
								trend += '<img src="<?php echo esc_url( $up ); ?>"';
								trend += 'srcset="<?php echo esc_url( $up2x ); ?> 2x"';
								trend += 'alt="<?php echo esc_attr( $uplabel ); ?>" style="margin-right:6px"/>' + change + '%';
							} else {
								trend += '<img src="<?php echo esc_url( $down ); ?>"';
								trend += 'srcset="<?php echo esc_url( $down2x ); ?> 2x"';
								trend += 'alt="<?php echo esc_attr( $downlabel ); ?>" style="margin-right:6px"/>' + Math.abs( change ) + '%';
							}

							var html = '<div class="monsterinsights-reports-overview-datagraph-tooltip-container">';
							html += '<div class="monsterinsights-reports-overview-datagraph-tooltip-title">' + label + '</div>';
							html += '<div class="monsterinsights-reports-overview-datagraph-tooltip-number">' + value + '</div>';
							html += '<div class="monsterinsights-reports-overview-datagraph-tooltip-descriptor">' + <?php echo wp_kses_post( $descriptor ); ?> + '</div>';
							html += '<div class="monsterinsights-reports-overview-datagraph-tooltip-trend">' + trend + '</div>';
							html += '</div>';

							tooltipEl.html( html );

							// Find Y Location on page
							var top = 0;

							if ( tooltip.yAlign ) {
								var ch = 0;
								if ( tooltip.caretHeight ) {
									ch = tooltip.caretHeight;
								}
								if ( tooltip.yAlign == 'above' ) {
									top = tooltip.y - ch - tooltip.caretPadding;
								} else {
									top = tooltip.y + ch + tooltip.caretPadding;
								}
							}
							// Display, position, and set styles for font
							tooltipEl.css( {
								opacity: 1,
								width: tooltip.width ? (
									tooltip.width + 'px'
								) : 'auto',
								left: tooltip.x - 50 + 'px',
								top: top + 68 + 'px',
								fontFamily: tooltip._fontFamily,
								fontSize: tooltip.fontSize,
								fontStyle: tooltip._fontStyle,
								padding: tooltip.yPadding + 'px ' + tooltip.xPadding + 'px',
								'z-index': 99999,
							} );
						};

						var MonsterInsightsOverview<?php echo time();?> = new Chart( ctx, {
							type: 'LineWithLine',
							data: data,
							plugins: [
								{
									afterRender: function () {
										var parent = jQuery( '.monsterinsights-overview-report-overview-graph-panel .monsterinsights-tabbed-nav-tab-title[data-tab=\'pageviews-tab\']' ).hasClass( 'active' );
										if ( ! parent && '<?php echo $class; ?>' == 'pageviews' ) {
											jQuery( '.monsterinsights-tabbed-nav-panel.pageviews-tab' ).hide();
										}
									},
								}
							],
							options: {
								legend: {
									display: false,
								},
								hover: {
									intersect: true,
								},
								tooltips: {
									enabled: false,
									yAlign: 'top',
									xAlign: 'top',
									intersect: false,
									custom: overviewTooltips,
									callbacks: {
										title: function ( tooltipItem, data ) {
											tooltipItem = tooltipItem[0];
											var label = data.datasets[0].labels[tooltipItem.index];
											var value = data.datasets[0].data[tooltipItem.index];
											var change = data.datasets[0].trend[tooltipItem.index];
											return [label, value, change];
										},
										label: function ( tooltipItem, data ) {
											return '';
										}
									}
								},
								scales: {
									xAxes: [
										{
											spanGaps: true,
											position: 'bottom',
											gridLines: {
												show: true,
												color: '#f2f6fa',
											},
											ticks: {
												fontColor: '#7f8591',
											}
										}
									],
									yAxes: [
										{
											gridLines: {
												show: true,
												color: '#d4e2ef',
											},
											ticks: {
												fontColor: '#7f8591',
												callback: function ( value ) {
													if ( value % 1 === 0 ) {
														return value;
													}
												}
											}
										}
									]
								},
								animation: false,
								legend: {
									display: false,
								},
								responsive: true,
								maintainAspectRatio: false,
								borderWidth: 1,
							}
						} );
					}
				} );
			</script>
		</div>
		<?php
		$html = ob_get_clean();

		return $html;
	}

	/**
	 * Merge the 2 top reports into one for easier grabbing in the dashboard widget.
	 *
	 * @param array $data The data from GA.
	 */
	public function get_overview_top( $data ) {
		$this->get_overviewgraph( $data );
		$this->get_infobox( $data );
	}

	public function get_overviewgraph( $data ) {
		if ( ! empty( $data['overviewgraph']['count'] ) && $data['overviewgraph']['count'] > 0 ) {
			?>
			<div class="monsterinsights-overview-report-overview-graph-panel panel panel-default chart-panel">
				<ul class="monsterinsights-tabbed-nav nav nav-tabs nav-justified">
					<li role="presentation" class="monsterinsights-tabbed-nav-tab-title monsterinsights-clear active" data-tab="sessions-tab">
						<a href="#sessions-tab"><span class="monsterinsights-user-icon"></span>
							<?php echo esc_html__( 'Sessions', 'google-analytics-for-wordpress' ); ?>
						</a>
					</li>
					<li role="presentation" class="monsterinsights-tabbed-nav-tab-title monsterinsights-clear" data-tab="pageviews-tab">
						<a href="#pageviews-tab"><span class="monsterinsights-eye-icon"> </span>
							<?php echo esc_html__( 'Pageviews', 'google-analytics-for-wordpress' ); ?>
						</a>
				</ul>

				<div class="monsterinsights-tabbed-nav-panel sessions-tab">
					<div class="panel-body">
						<?php echo $this->get_overview_report_js( 'sessions', $data['overviewgraph'] ); ?>
					</div>
				</div>
				<div class="monsterinsights-tabbed-nav-panel pageviews-tab">
					<div class="panel-body">
						<?php echo $this->get_overview_report_js( 'pageviews', $data['overviewgraph'] ); ?>
					</div>
				</div>
				<div id="monsterinsights-chartjs-tooltip" style="opacity: 0"></div>
			</div>
		<?php }
	}

	public function get_infobox( $data ) {
		if ( ! empty( $data['infobox'] ) ) {
			$up        = MONSTERINSIGHTS_PLUGIN_URL . 'assets/images/up.png';
			$up2x      = MONSTERINSIGHTS_PLUGIN_URL . 'assets/images/up@2x.png';
			$down      = MONSTERINSIGHTS_PLUGIN_URL . 'assets/images/down.png';
			$down2x    = MONSTERINSIGHTS_PLUGIN_URL . 'assets/images/down@2x.png';
			$upred     = MONSTERINSIGHTS_PLUGIN_URL . 'assets/images/up-red.png';
			$upred2x   = MONSTERINSIGHTS_PLUGIN_URL . 'assets/images/up-red@2x.png';
			$downgrn   = MONSTERINSIGHTS_PLUGIN_URL . 'assets/images/down-green.png';
			$downgrn2x = MONSTERINSIGHTS_PLUGIN_URL . 'assets/images/down-green@2x.png';
			$uplabel   = esc_attr__( 'Up', 'google-analytics-for-wordpress' );
			$downlabel = esc_attr__( 'Down', 'google-analytics-for-wordpress' );
			?>
			<div class="monsterinsights-overview-report-infobox-panel panel row container-fluid">
				<div class="monsterinsights-reports-infobox col-md-3 col-xs-6">
					<div class="monsterinsights-reports-infobox-title">
						<?php echo esc_html__( 'Sessions', 'google-analytics-for-wordpress' ); ?>
					</div>
					<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>
					<div class="monsterinsights-reports-infobox-number" title="<?php echo esc_attr( number_format_i18n( $data['infobox']['sessions']['value'] ) ); ?>">
						<?php echo esc_html( monsterinsights_round_number( $data['infobox']['sessions']['value'] ) ); ?>
					</div>
					<?php if ( empty( $data['infobox']['sessions']['prev'] ) ) { ?>
						<div class="monsterinsights-reports-infobox-prev">
							<?php echo esc_html__( 'No change', 'google-analytics-for-wordpress' ); ?>
						</div>
					<?php } else if ( $data['infobox']['sessions']['prev'] > 0 ) { ?>
						<div class="monsterinsights-reports-infobox-prev monsterinsights-reports-infobox-up">
							<img src="<?php echo $up; ?>" srcset="<?php echo $up2x; ?> 2x" alt="<?php echo $uplabel; ?>"/>
							<?php echo esc_html( $data['infobox']['sessions']['prev'] ) . '%'; ?>
						</div>
					<?php } else { ?>
						<div class="monsterinsights-reports-infobox-prev monsterinsights-reports-infobox-down">
							<img src="<?php echo $down; ?>" srcset="<?php echo $down2x; ?> 2x" alt="<?php echo $downlabel; ?>"/>
							<?php echo esc_html( absint( $data['infobox']['sessions']['prev'] ) ) . '%'; ?>
						</div>
					<?php } ?>
					<div class="monsterinsights-reports-infobox-compare">
						<?php echo sprintf( esc_html__( 'vs. Previous %s Days', 'google-analytics-for-wordpress' ), $data['infobox']['range'] ); ?>
					</div>
				</div>
				<div class="monsterinsights-reports-infobox col-md-3 col-xs-6">
					<div class="monsterinsights-reports-infobox-title">
						<?php echo esc_html__( 'Pageviews', 'google-analytics-for-wordpress' ); ?>
					</div>
					<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>
					<div class="monsterinsights-reports-infobox-number" title="<?php echo esc_attr( number_format_i18n( $data['infobox']['pageviews']['value'] ) ); ?>">
						<?php echo esc_html( monsterinsights_round_number( $data['infobox']['pageviews']['value'] ) ); ?>
					</div>
					<?php if ( empty( $data['infobox']['pageviews']['prev'] ) ) { ?>
						<div class="monsterinsights-reports-infobox-prev">
							<?php echo esc_html__( 'No change', 'google-analytics-for-wordpress' ); ?>
						</div>
					<?php } else if ( $data['infobox']['pageviews']['prev'] > 0 ) { ?>
						<div class="monsterinsights-reports-infobox-prev monsterinsights-reports-infobox-up">
							<img src="<?php echo $up; ?>" srcset="<?php echo $up2x; ?> 2x" alt="<?php echo $uplabel; ?>"/>
							<?php echo esc_html( $data['infobox']['pageviews']['prev'] ) . '%'; ?>
						</div>
					<?php } else { ?>
						<div class="monsterinsights-reports-infobox-prev monsterinsights-reports-infobox-down">
							<img src="<?php echo $down; ?>" srcset="<?php echo $down2x; ?> 2x" alt="<?php echo $downlabel; ?>"/>
							<?php echo esc_html( absint( $data['infobox']['pageviews']['prev'] ) ) . '%'; ?>
						</div>
					<?php } ?>
					<div class="monsterinsights-reports-infobox-compare">
						<?php echo sprintf( esc_html__( 'vs. Previous %s Days', 'google-analytics-for-wordpress' ), $data['infobox']['range'] ); ?>
					</div>
				</div>
				<div class="monsterinsights-reports-infobox col-md-3 col-xs-6">
					<div class="monsterinsights-reports-infobox-title">
						<?php echo esc_html__( 'Avg. Session Duration', 'google-analytics-for-wordpress' ); ?>
					</div>
					<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>
					<div class="monsterinsights-reports-infobox-number">
						<?php echo esc_html( $data['infobox']['duration']['value'] ); ?>
					</div>
					<?php if ( empty( $data['infobox']['duration']['prev'] ) ) { ?>
						<div class="monsterinsights-reports-infobox-prev">
							<?php echo esc_html__( 'No change', 'google-analytics-for-wordpress' ); ?>
						</div>
					<?php } else if ( $data['infobox']['duration']['prev'] > 0 ) { ?>
						<div class="monsterinsights-reports-infobox-prev monsterinsights-reports-infobox-up">
							<img src="<?php echo $up; ?>" srcset="<?php echo $up2x; ?> 2x" alt="<?php echo $uplabel; ?>"/>
							<?php echo esc_html( $data['infobox']['duration']['prev'] ) . '%'; ?>
						</div>
					<?php } else { ?>
						<div class="monsterinsights-reports-infobox-prev monsterinsights-reports-infobox-down">
							<img src="<?php echo $down; ?>" srcset="<?php echo $down2x; ?> 2x" alt="<?php echo $downlabel; ?>"/>
							<?php echo esc_html( absint( $data['infobox']['duration']['prev'] ) ) . '%'; ?>
						</div>
					<?php } ?>
					<div class="monsterinsights-reports-infobox-compare">
						<?php echo sprintf( esc_html__( 'vs. Previous %s Days', 'google-analytics-for-wordpress' ), $data['infobox']['range'] ); ?>
					</div>
				</div>
				<div class="monsterinsights-reports-infobox col-md-3 col-xs-6">
					<div class="monsterinsights-reports-infobox-title">
						<?php echo esc_html__( 'Bounce Rate', 'google-analytics-for-wordpress' ); ?>
					</div>
					<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>
					<div class="monsterinsights-reports-infobox-number">
						<?php echo esc_html( $data['infobox']['bounce']['value'] ) . '%'; ?>
					</div>
					<?php if ( empty( $data['infobox']['bounce']['prev'] ) ) { ?>
						<div class="monsterinsights-reports-infobox-prev">
							<?php echo esc_html__( 'No change', 'google-analytics-for-wordpress' ); ?>
						</div>
					<?php } else if ( $data['infobox']['bounce']['prev'] > 0 ) { ?>
						<div class="monsterinsights-reports-infobox-prev monsterinsights-reports-infobox-up monsterinsights-reports-infobox-red">
							<img src="<?php echo $upred; ?>" srcset="<?php echo $upred2x; ?> 2x" alt="<?php echo $uplabel; ?>"/>
							<?php echo esc_html( $data['infobox']['bounce']['prev'] ) . '%'; ?>
						</div>
					<?php } else { ?>
						<div class="monsterinsights-reports-infobox-prev monsterinsights-reports-infobox-down monsterinsights-reports-infobox-green">
							<img src="<?php echo $downgrn; ?>" srcset="<?php echo $downgrn2x; ?> 2x" alt="<?php echo $downlabel; ?>"/>
							<?php echo esc_html( absint( $data['infobox']['bounce']['prev'] ) ) . '%'; ?>
						</div>
					<?php } ?>
					<div class="monsterinsights-reports-infobox-compare">
						<?php echo sprintf( esc_html__( 'vs. Previous %s Days', 'google-analytics-for-wordpress' ), $data['infobox']['range'] ); ?>
					</div>
				</div>
			</div>
		<?php }
	}

	public function get_newvsreturn( $data ) {
		if ( ! empty( $data['newvsreturn'] ) ) {
			?>
			<div class="monsterinsights-reports-2-column-panel panel monsterinsights-pie-chart-panel chart-panel">
				<div class="monsterinsights-reports-panel-title">
					<?php echo esc_html__( 'New vs. Returning Visitors', 'google-analytics-for-wordpress' ); ?>
				</div>
				<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>
				<div class="monsterinsights-reports-pie-graph monsterinsights-clear">
					<div id="monsterinsights-chartjs-pie-returning-tooltip" style="opacity: 0"></div>
					<canvas id="monsterinsights-reports-returning-visitor-chart" width="200px" height="200px" style="max-width:200px;max-height:200px"></canvas>
					<script type="text/javascript">
						jQuery( document ).ready( function () {
							if ( window.uorigindetected != null ) {

								var pieTooltips = function ( tooltip ) {
									// Tooltip Element
									var tooltipEl = jQuery( '#monsterinsights-chartjs-pie-returning-tooltip' );
									if ( ! tooltipEl[0] ) {
										jQuery( 'body' ).append( '<div id="monsterinsights-chartjs-pie-returning-tooltip" style="padding:10px;"></div>' );
										tooltipEl = jQuery( '#monsterinsights-chartjs-pie-returning-tooltip' );
									}
									// Hide if no tooltip
									if ( ! tooltip.opacity ) {
										tooltipEl.css( {
											opacity: 0
										} );
										jQuery( '.chartjs-wrap canvas' ).each( function ( index, el ) {
											jQuery( el ).css( 'cursor', 'default' );
										} );
										return;
									}
									jQuery( this._chart.canvas ).css( 'cursor', 'pointer' );

									// Set caret Position
									tooltipEl.removeClass( 'above below no-transform' );
									if ( tooltip.yAlign ) {
										tooltipEl.addClass( tooltip.yAlign );
									} else {
										tooltipEl.addClass( 'no-transform' );
									}

									var label = tooltip.title[0];
									var value = tooltip.title[1];

									var html = '<div class="monsterinsights-reports-overview-datagraph-tooltip-container">';
									html += '<div class="monsterinsights-reports-overview-datagraph-tooltip-title">' + label + '</div>';
									html += '<div class="monsterinsights-reports-overview-datagraph-tooltip-number">' + value + '%</div>';
									html += '</div>';

									tooltipEl.html( html );

									// Find Y Location on page
									var top = 0;

									if ( tooltip.yAlign ) {
										var ch = 0;
										if ( tooltip.caretHeight ) {
											ch = tooltip.caretHeight;
										}
										if ( tooltip.yAlign == 'above' ) {
											top = tooltip.y - ch - tooltip.caretPadding;
										} else {
											top = tooltip.y + ch + tooltip.caretPadding;
										}
									}
									// Display, position, and set styles for font
									tooltipEl.css( {
										opacity: 1,
										width: tooltip.width ? (
											tooltip.width + 'px'
										) : 'auto',
										left: tooltip.x - 50 + 'px',
										top: top - 40 + 'px',
										fontFamily: tooltip._fontFamily,
										fontSize: tooltip.fontSize,
										fontStyle: tooltip._fontStyle,
										padding: tooltip.yPadding + 'px ' + tooltip.xPadding + 'px',
										'z-index': 99999,
									} );
								};

								var config = {
									type: 'doughnut',
									data: {
										datasets: [
											{
												data: [
													<?php echo esc_js( $data['newvsreturn']['new'] ); ?>,
													<?php echo esc_js( $data['newvsreturn']['returning'] ); ?>,
												],
												backgroundColor: [
													'#2077c4',
													'#52a7f4'
												],
											}
										],
										values: [<?php echo esc_js( $data['newvsreturn']['new'] ); ?>,<?php echo esc_js( $data['newvsreturn']['returning'] ); ?> ],
										labels: [
											"<?php echo esc_js( __( 'New', 'google-analytics-for-wordpress' ) ); ?>",
											"<?php echo esc_js( __( 'Returning', 'google-analytics-for-wordpress' ) ); ?>",
										]
									},
									options: {
										responsive: true,
										maintainAspectRatio: false,
										tooltips: {
											enabled: false,
											yAlign: 'top',
											xAlign: 'top',
											intersect: true,
											custom: pieTooltips,
											callbacks: {
												title: function ( tooltipItem, data ) {
													tooltipItem = tooltipItem[0];
													var label = data.labels[tooltipItem.index];
													var value = data.datasets[0].data[tooltipItem.index];
													return [label, value];
												},
												label: function ( tooltipItem, data ) {
													return '';
												}
											}
										},
										animation: false,
										legendCallback: function ( chart ) {
											var text = [];
											text.push( '<ul class="' + chart.id + '-legend" style="list-style:none">' );
											for ( var i = 0; i < chart.data.datasets[0].data.length; i ++ ) {
												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] + '" />&nbsp;' );
												if ( typeof(
													chart
												) != 'undefined' && typeof(
													chart.data
												) != 'undefined' && typeof(
													chart.data.labels
												) != 'undefined' && typeof(
													chart.data.labels[i]
												) != 'undefined' ) {
													text.push( chart.data.labels[i] );
												}

												if ( typeof(
													chart
												) != 'undefined' && typeof(
													chart.data
												) != 'undefined' && typeof(
													chart.data.values
												) != 'undefined' && typeof(
													chart.data.values[i]
												) != 'undefined' ) {
													text.push( '<span class="monsterinsights-pie-chart-legend-number">' + chart.data.values[i] + '%</span>' );
												}
												text.push( '</li>' );
											}
											text.push( '</ul>' );

											return text.join( '' );
										},
										legend: {display: false},
									}
								};
								var overviewreturning = new Chart( document.getElementById( 'monsterinsights-reports-returning-visitor-chart' ).getContext( '2d' ), config );
								jQuery( '.monsterinsights-reports-pie-graph-key' ).html( overviewreturning.generateLegend() );
							}
						} );
					</script>
				</div>
				<div class="monsterinsights-reports-pie-graph-key"></div>
			</div>
			<?php
		}
	}

	public function get_devices( $data ) {
		if ( ! empty( $data['devices'] ) ) {
			?>
			<div class="monsterinsights-reports-2-column-panel panel monsterinsights-pie-chart-panel chart-panel">
				<div class="monsterinsights-reports-panel-title">
					<?php echo esc_html__( 'Device Breakdown', 'google-analytics-for-wordpress' ); ?>
				</div>
				<div class="monsterinsights-reports-uright-tooltip" data-tooltip-title="<?php echo esc_attr( __( 'Device Breakdown', 'google-analytics-for-wordpress' ) ); ?>" data-tooltip-description="<?php echo esc_attr( __( 'This graph shows what percent of your visitor sessions are done using a traditional computer or laptop, tablet or mobile device to view your site.', 'google-analytics-for-wordpress' ) ); ?>"></div>
				<div class="monsterinsights-reports-pie-graph monsterinsights-clear">
					<div id="monsterinsights-chartjs-pie-devices-tooltip" style="opacity: 0"></div>
					<canvas id="monsterinsights-reports-devices-chart" width="200px" height="200px" style="max-width:200px;max-height:200px"></canvas>
					<script type="text/javascript">
						jQuery( document ).ready( function () {
							if ( window.uorigindetected != null ) {

								var pieTooltips = function ( tooltip ) {
									// Tooltip Element
									var tooltipEl = jQuery( '#monsterinsights-chartjs-pie-devices-tooltip' );
									if ( ! tooltipEl[0] ) {
										jQuery( 'body' ).append( '<div id="monsterinsights-chartjs-pie-devices-tooltip" style="padding:10px;"></div>' );
										tooltipEl = jQuery( '#monsterinsights-chartjs-pie-devices-tooltip' );
									}
									// Hide if no tooltip
									if ( ! tooltip.opacity ) {
										tooltipEl.css( {
											opacity: 0
										} );
										jQuery( '.chartjs-wrap canvas' ).each( function ( index, el ) {
											jQuery( el ).css( 'cursor', 'default' );
										} );
										return;
									}
									jQuery( this._chart.canvas ).css( 'cursor', 'pointer' );

									// Set caret Position
									tooltipEl.removeClass( 'above below no-transform' );
									if ( tooltip.yAlign ) {
										tooltipEl.addClass( tooltip.yAlign );
									} else {
										tooltipEl.addClass( 'no-transform' );
									}

									var label = tooltip.title[0];
									var value = tooltip.title[1];

									var html = '<div class="monsterinsights-reports-overview-datagraph-tooltip-container">';
									html += '<div class="monsterinsights-reports-overview-datagraph-tooltip-title">' + label + '</div>';
									html += '<div class="monsterinsights-reports-overview-datagraph-tooltip-number">' + value + '%</div>';
									html += '</div>';

									tooltipEl.html( html );

									// Find Y Location on page
									var top = 0;

									if ( tooltip.yAlign ) {
										var ch = 0;
										if ( tooltip.caretHeight ) {
											ch = tooltip.caretHeight;
										}
										if ( tooltip.yAlign == 'above' ) {
											top = tooltip.y - ch - tooltip.caretPadding;
										} else {
											top = tooltip.y + ch + tooltip.caretPadding;
										}
									}
									// Display, position, and set styles for font
									tooltipEl.css( {
										opacity: 1,
										width: tooltip.width ? (
											tooltip.width + 'px'
										) : 'auto',
										left: tooltip.x - 50 + 'px',
										top: top - 40 + 'px',
										fontFamily: tooltip._fontFamily,
										fontSize: tooltip.fontSize,
										fontStyle: tooltip._fontStyle,
										padding: tooltip.yPadding + 'px ' + tooltip.xPadding + 'px',
										'z-index': 99999,
									} );
								};

								var config = {
									type: 'doughnut',
									data: {
										datasets: [
											{
												data: [
													<?php echo esc_js( $data['devices']['desktop'] ); ?>,
													<?php echo esc_js( $data['devices']['tablet'] ); ?>,
													<?php echo esc_js( $data['devices']['mobile'] ); ?>,
												],
												backgroundColor: [
													'#2077c4',
													'#52a7f4',
													'#afd9ff'
												],
											}
										],
										values: [<?php echo esc_js( $data['devices']['desktop'] ); ?>,<?php echo esc_js( $data['devices']['tablet'] ); ?>,<?php echo esc_js( $data['devices']['mobile'] ); ?>  ],
										labels: [
											"<?php echo esc_js( __( 'Desktop', 'google-analytics-for-wordpress' ) ); ?>",
											"<?php echo esc_js( __( 'Tablet', 'google-analytics-for-wordpress' ) ); ?>",
											"<?php echo esc_js( __( 'Mobile', 'google-analytics-for-wordpress' ) ); ?>",
										]
									},
									options: {
										responsive: true,
										maintainAspectRatio: false,
										tooltips: {
											enabled: false,
											yAlign: 'top',
											xAlign: 'top',
											intersect: true,
											custom: pieTooltips,
											callbacks: {
												title: function ( tooltipItem, data ) {
													tooltipItem = tooltipItem[0];
													var label = data.labels[tooltipItem.index];
													var value = data.datasets[0].data[tooltipItem.index];
													return [label, value];
												},
												label: function ( tooltipItem, data ) {
													return '';
												}
											}
										},
										animation: false,
										legendCallback: function ( chart ) {
											var text = [];
											text.push( '<ul class="' + chart.id + '-legend" style="list-style:none">' );
											for ( var i = 0; i < chart.data.datasets[0].data.length; i ++ ) {
												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] + '" />&nbsp;' );
												if ( typeof(
													chart
												) != 'undefined' && typeof(
													chart.data
												) != 'undefined' && typeof(
													chart.data.labels
												) != 'undefined' && typeof(
													chart.data.labels[i]
												) != 'undefined' ) {
													text.push( chart.data.labels[i] );
												}

												if ( typeof(
													chart
												) != 'undefined' && typeof(
													chart.data
												) != 'undefined' && typeof(
													chart.data.values
												) != 'undefined' && typeof(
													chart.data.values[i]
												) != 'undefined' ) {
													text.push( '<span class="monsterinsights-pie-chart-legend-number">' + chart.data.values[i] + '%</span>' );
												}
												text.push( '</li>' );
											}
											text.push( '</ul>' );

											return text.join( '' );
										},
										legend: {display: false},
									}
								};
								var devicebreakdown = new Chart( document.getElementById( 'monsterinsights-reports-devices-chart' ).getContext( '2d' ), config );
								jQuery( '.monsterinsights-reports-pie-visitors-graph-key' ).html( devicebreakdown.generateLegend() );
							}
						} );
					</script>
				</div>
				<div class="monsterinsights-reports-pie-visitors-graph-key"></div>
			</div>
			<?php
		}
	}

	public function get_countries( $data ) {
		if ( ! empty( $data['newvsreturn'] ) ) {
			?>
			<div class="monsterinsights-reports-2-column-panel panel nopadding">
				<div class="monsterinsights-reports-panel-title">
					<?php echo esc_html__( 'Top 10 Countries', 'google-analytics-for-wordpress' ); ?>
				</div>
				<div class="monsterinsights-reports-uright-tooltip" data-tooltip-title="<?php echo esc_attr( __( 'Top 10 Countries', 'google-analytics-for-wordpress' ) ); ?>" data-tooltip-description="<?php echo esc_attr( __( 'This list shows the top countries your website visitors are from.', 'google-analytics-for-wordpress' ) ); ?>"></div>
				<div class="monsterinsights-reports-list">
					<ul class="monsterinsights-reports-country-list list-group">
						<?php
						$countries = monsterinsights_get_country_list( true );
						$i         = 1;
						foreach ( $data['countries'] as $icountry => $countrydata ) {
							if ( ! empty( $countries[ $countrydata['iso'] ] ) ) {
								echo '<li class="list-group-item"><span class="monsterinsights-reports-list-count">' . $i . '.</span><span class="monsterinsights-reports-country-flag monsterinsights-flag-icon monsterinsights-flag-icon-' . strtolower( $countrydata['iso'] ) . ' "></span><span class="monsterinsights-reports-list-text">' . $countries[ $countrydata['iso'] ] . '</span><span class="monsterinsights-reports-list-number">' . number_format_i18n( $countrydata['sessions'] ) . '</span></li>';
							} else {
								echo '<li class="list-group-item"><span class="monsterinsights-reports-list-count">' . $i . '</span><span class="monsterinsights-flag-icon monsterinsights-flag-icon-' . strtolower( $countrydata['iso'] ) . ' "></span><span class="monsterinsights-reports-list-text">' . $countrydata['iso'] . '</span><span class="monsterinsights-reports-list-number">' . number_format_i18n( $countrydata['sessions'] ) . '</span></li>';
							}
							$i ++;
						}
						?>
					</ul>
				</div>
				<?php
				$referral_url = 'https://analytics.google.com/analytics/web/#report/visitors-geo/' . MonsterInsights()->auth->get_referral_url() . $this->get_ga_report_range( $data );
				?>
				<div class="monsterinsights-reports-panel-footer">
					<a href="<?php echo $referral_url; ?>" target="_blank" title="<?php echo esc_html__( 'View Full Countries Report', 'google-analytics-for-wordpress' ); ?>" class="monsterinsights-reports-panel-footer-button"><?php echo esc_html__( 'View All Countries Report', 'google-analytics-for-wordpress' ); ?></a>
				</div>
			</div>
			<?php
		}
	}

	public function get_referrals( $data ) {
		if ( ! empty( $data['referrals'] ) ) {
			?>
			<div class="monsterinsights-reports-2-column-panel panel nopadding">
				<div class="monsterinsights-reports-panel-title">
					<?php echo esc_html__( 'Referrals', 'google-analytics-for-wordpress' ); ?>
				</div>
				<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>
				<div class="monsterinsights-reports-list">
					<ul class="monsterinsights-reports-referral-list list-group">
						<?php
						$i = 1;
						foreach ( $data['referrals'] as $ireferrals => $referralsdata ) {
							echo '<li class="list-group-item">' .
							     '<span class="monsterinsights-reports-list-count">'
							     . $i .
							     '</span>' .
							     '<img class="monsterinsights-reports-referral-icon"  src="https://www.google.com/s2/favicons?domain=' . $referralsdata['url'] . '" width="16px" height="16px" />' .
							     '<span class="monsterinsights-reports-list-text">'
							     . $referralsdata['url'] .
							     '</span>
										<span class="monsterinsights-reports-list-number">'
							     . number_format_i18n( $referralsdata['sessions'] ) .
							     '</span>' .
							     '</li>';
							$i ++;
						}
						?>
					</ul>
				</div>
				<?php
				$referral_url = 'https://analytics.google.com/analytics/web/#report/trafficsources-referrals/' . MonsterInsights()->auth->get_referral_url() . $this->get_ga_report_range( $data );
				?>
				<div class="monsterinsights-reports-panel-footer">
					<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>
				</div>
			</div>
			<?php
		}
	}

	public function get_toppages( $data ) {
		if ( ! empty( $data['toppages'] ) ) { ?>
			<div class="monsterinsights-reports-1-column-row panel row container-fluid nopadding list-no-icons" style="position: relative;">
				<div class="monsterinsights-reports-panel-title">
					<?php echo esc_html__( 'Top Posts / Pages', 'google-analytics-for-wordpress' ); ?>
				</div>

				<div class="monsterinsights-reports-uright-tooltip" data-tooltip-title="<?php echo esc_attr( __( 'Top Posts / Pages', 'google-analytics-for-wordpress' ) ); ?>" data-tooltip-description="<?php echo esc_attr( __( 'This list shows the most viewed posts and pages on your website.', 'google-analytics-for-wordpress' ) ); ?>"></div>
				<div id="monsterinsights-report-top-page-list" class="monsterinsights-reports-list">
					<ul class="monsterinsights-reports-pages-list list-group">
						<?php
						$i = 1;
						foreach ( $data['toppages'] as $itoppages => $toppagesdata ) {
							$hide     = $i > 10 ? ' style="display: none;" ' : '';
							$protocol = is_ssl() ? 'https://' : 'http://';
							$opening  = ! empty( $toppagesdata['url'] ) && ! empty( $toppagesdata['hostname'] ) ? '<a href="' . $protocol . esc_attr( $toppagesdata['hostname'] . $toppagesdata['url'] ) . '" target="_blank">' : '';
							$closing  = ! empty( $opening ) ? '</a>' : '';
							echo '<li class="list-group-item  monsterinsights-listing-table-row"' . $hide . '>' .
							     '<span class="monsterinsights-reports-list-count">'
							     . $i .
							     '. </span>&nbsp;' .
							     '<span class="monsterinsights-reports-list-text">'
							     . $opening
							     . $toppagesdata['title']
							     . $closing .
							     '</span>' .
							     '<span class="monsterinsights-reports-list-number">' .
							     number_format_i18n( $toppagesdata['sessions'] ) .
							     '</span>' .
							     '</li>';
							$i ++;
						}
						?>
					</ul>
				</div>
				<?php
				$referral_url = 'https://analytics.google.com/analytics/web/#report/content-pages/' . MonsterInsights()->auth->get_referral_url() . $this->get_ga_report_range( $data );
				?>
				<div class="monsterinsights-reports-panel-footer monsterinsights-reports-panel-footer-large">
					<?php echo esc_html__( 'Show', 'google-analytics-for-wordpress' ); ?>&nbsp;
					<div class="monsterinsights-reports-show-selector-group btn-group" role="group" aria-label="<?php echo esc_html__( 'How many to show', 'google-analytics-for-wordpress' ); ?>">
						<button type="button" data-tid="monsterinsights-report-top-page-list" class="monsterinsights-reports-show-selector-button ten btn btn-default active" disabled="disabled">
							10
						</button>
						<button type="button" data-tid="monsterinsights-report-top-page-list" class="monsterinsights-reports-show-selector-button twentyfive btn btn-default">
							25
						</button>
						<button type="button" data-tid="monsterinsights-report-top-page-list" class="monsterinsights-reports-show-selector-button fifty btn btn-default">
							50
						</button>
					</div>
					<a href="<?php echo $referral_url; ?>" target="_blank" title="<?php echo esc_html__( 'View Full Post/Page Report', 'google-analytics-for-wordpress' ); ?>" class="monsterinsights-reports-panel-footer-button alignright" style="margin-right: 20px;"><?php echo esc_html__( 'View Full Post/Page Report', 'google-analytics-for-wordpress' ); ?></a>
				</div>
			</div>
		<?php }
	}
}