|
Server : Apache System : Linux srv.rainic.com 4.18.0-553.47.1.el8_10.x86_64 #1 SMP Wed Apr 2 05:45:37 EDT 2025 x86_64 User : rainic ( 1014) PHP Version : 7.4.33 Disable Function : exec,passthru,shell_exec,system Directory : /home/stando/www/wp-content/plugins/google-analytics-premium/includes/admin/reports/ |
Upload File : |
<?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] + '" /> ' );
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] + '" /> ' );
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> ' .
'<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' ); ?>
<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 }
}
}