File "metrics.js"
Full Path: /home/amervokv/ecomlive.net/wp-content/mu-plugins/object-cache-pro/resources/js/metrics.js
File size: 17.69 KB
MIME-type: text/plain
Charset: utf-8
window.addEventListener('load', function () {
objectcache.analytics.init();
});
jQuery.extend(window.objectcache, {
analytics: {
charts: {},
comboCharts: window.objectcache.comboCharts,
options: {
series: [],
annotations: {
position: 'back',
},
stroke: {
width: 1,
curve: 'straight',
},
dataLabels: {
enabled: false,
},
legend: {
show: false,
},
grid: {
padding: {
top: -8,
right: 0,
left: 0,
bottom: -26,
}
},
fill: {
type: 'solid',
opacity: 0.1,
},
noData: {
text: 'Loading cache analytics...',
align: 'center',
verticalAlign: 'middle',
},
xaxis: {
type: 'datetime',
position: 'top',
tickAmount: 3,
tickPlacement: 'on',
labels: {
offsetY: -3,
formatter: this.formatTimeTime,
},
axisBorder: {
show: false,
},
crosshairs: {
position: 'front',
},
tooltip: {
enabled: false,
},
},
},
init: function () {
this.moveMetrics();
this.renderCharts();
this.fetchData();
jQuery(document).on('postbox-toggled', function (event, postbox) {
var $postbox = jQuery(postbox);
var name = $postbox.find('.objectcache\\:chart').first().data('chart');
if ($postbox.is(':visible')) {
this.charts[name].render();
}
}.bind(this));
if (objectcache.refresh) {
setInterval(
this.fetchData.bind(this),
objectcache.refresh * 1000
);
}
},
moveMetrics: function () {
var screenOptions = document.getElementById('screen-options-wrap');
if (! screenOptions) {
return;
}
var metricsGroup = screenOptions.querySelector('.metrics-prefs');
metricsGroup.classList.remove('hidden');
screenOptions.querySelectorAll(
'.metabox-prefs label[for*="objectcache_metric_"]'
).forEach(function (el) {
metricsGroup.append(el);
});
},
renderCharts: function () {
document.querySelectorAll(
'#dashboard-widgets .objectcache\\:chart'
).forEach(function (el) {
var name = el.dataset.chart;
var type = el.dataset.type;
if (! this.comboCharts.hasOwnProperty(name)) {
this.charts[name] = this.setUpChart(el, name, type);
} else {
this.charts[name] = this.setUpComboChart(el, name, JSON.parse(type));
}
this.charts[name].render();
}.bind(this));
},
updateChartsMessage: function (message) {
for (var chart in this.charts) {
this.charts[chart].updateOptions({ noData: { text: message } }, false, false, false);
}
},
setUpChart: function (el, id, type) {
var color = (function (id) {
switch (id.split('-')[0]) {
case 'redis':
return '#72d1a7';
case 'relay':
return '#7b90ff';
default:
return '#0096dd';
}
})(id);
return new ApexCharts(el, Object.assign(this.options, {
chart: {
id: id,
type: 'area',
group: 'analytics',
parentHeightOffset: 0,
toolbar: {
show: false,
},
animations: {
enabled: false,
},
zoom: {
enabled: false,
},
},
colors: [color],
markers: {
strokeColors: color,
colors: [color],
showNullDataPoints: false,
hover: {
sizeOffset: 3,
},
},
tooltip: {
marker: {
show: false,
},
custom: this.renderTooltip.bind({ id: id, type: type }),
},
yaxis: {
forceNiceScale: true,
tickAmount: 3,
tooltip: {
enabled: false,
},
floating: true,
opposite: true,
labels: {
offsetX: -5,
offsetY: -5,
align: 'left',
formatter: this.formatLabel.bind({ id: id, type: type, compact: true }),
},
min: 0,
max: function (max) {
return this.type === 'ratio' ? (max > 100 ? 100 : max) : max;
}.bind({ id: id, type: type }),
}
}));
},
setUpComboChart: function (el, id, types) {
var colors = (function (id) {
switch (id.split('-')[0]) {
case 'redis':
return ['#72d1a7', '#98debf', '#4cc48f'];
case 'relay':
return ['#7b90ff', '#95a5ff', '#aebbff'];
default:
return ['#0096dd', '#11b3ff', '#0073aa'];
}
})(id);
var type = types[function() { for (var key in types) return key; }()];
return new ApexCharts(el, Object.assign(this.options, {
chart: {
id: id,
type: 'line',
group: 'analytics',
parentHeightOffset: 0,
toolbar: {
show: false,
},
animations: {
enabled: false,
},
zoom: {
enabled: false,
},
},
colors: colors,
fill: {
type: 'solid',
opacity: [0.1, 1, 1],
},
markers: {
showNullDataPoints: false,
hover: {
sizeOffset: 4,
},
colors: colors,
},
tooltip: {
marker: {
show: true,
},
custom: this.renderTooltip.bind({ id: id, type: types }),
},
yaxis: {
forceNiceScale: true,
tickAmount: 3,
tooltip: {
enabled: false,
},
floating: true,
opposite: true,
labels: {
offsetX: -5,
offsetY: -5,
align: 'left',
formatter: this.formatLabel.bind({ id: id, type: type, compact: true }),
},
min: 0,
max: function (max) {
return this.type === 'ratio' ? (max > 100 ? 100 : max) : max;
}.bind({ id: id, type: type }),
}
}));
},
updateCharts: function (response) {
for (var chart in this.charts) {
if (! response[0].hasOwnProperty(chart)) {
if (this.comboCharts.hasOwnProperty(chart)) {
this.comboCharts[chart].chart = this.charts[chart];
}
continue;
}
var series = [];
objectcache.series.forEach(function (item) {
series.push({
name: item.name,
type: 'area',
data: response.map(function (interval) {
return {
x: interval.timestamp,
y: interval[chart][item.field],
date_display: interval.date_display,
};
}),
});
});
var measurements = series[0].data.filter(function (measurement) {
return measurement.y !== null;
}).length;
if (measurements < 2) {
this.charts[chart].updateOptions({ noData: { text: 'Waiting for more data...' } }, false, false, false);
continue;
}
this.charts[chart]
.updateSeries(series)
.then(function (chart) {
if (chart.annotations) {
chart.removeAnnotation('now');
chart.addXaxisAnnotation({
id: 'now',
x: response[0].timestamp,
x2: response[1].timestamp,
fillColor: '#e0e0e0',
borderColor: null,
});
}
});
}
this.updateComboCharts(response);
},
updateComboCharts: function (response) {
for (var chart in this.comboCharts) {
if (! this.charts.hasOwnProperty(chart)) {
continue;
}
var series = [];
this.comboCharts[chart].containers.forEach(function (comboChart, index) {
objectcache.series.forEach(function (item) {
series.push({
name: comboChart + ' - ' + item.name,
type: parseInt(index) === 0 ? 'area' : 'line',
data: response.map(function (interval) {
return {
x: interval.timestamp,
y: interval[comboChart][item.field],
date_display: interval.date_display,
};
}),
});
});
});
var measurements = series[0].data.filter(function (measurement) {
return measurement.y !== null;
}).length;
if (measurements < 2) {
this.comboCharts[chart].chart.updateOptions({ noData: { text: 'Waiting for more data...' } }, false, false, false);
continue;
}
this.charts[chart]
.updateSeries(series)
.then(function (chart) {
if (chart.annotations) {
chart.removeAnnotation('now');
chart.addXaxisAnnotation({
id: 'now',
x: response[0].timestamp,
x2: response[1].timestamp,
fillColor: '#e0e0e0',
borderColor: null,
});
}
});
}
},
fetchData: function () {
var fields = [
'timestamp',
'date_display',
];
for (var chart in this.charts) {
if (this.comboCharts.hasOwnProperty(chart)) {
this.comboCharts[chart].containers.forEach(function (container) {
objectcache.series.forEach(function (series) {
fields.push(container + '.' + series.field);
});
});
continue;
}
objectcache.series.forEach(function (series) {
fields.push(chart + '.' + series.field);
});
}
jQuery
.ajax({
url: objectcache.rest.url + 'objectcache/v1/analytics',
data: {
context: 'compute',
interval: objectcache.interval,
per_page: objectcache.per_page,
_fields: fields.filter(function (field, i) {
return fields.indexOf(field) == i;
}).join(','),
},
beforeSend: function (xhr) {
xhr.setRequestHeader('X-WP-Nonce', objectcache.rest.nonce);
},
})
.done(
this.updateCharts.bind(this)
)
.error(function (error) {
console.log(error);
objectcache.analytics.updateChartsMessage('Unable to load cache analytics');
});
},
formatTimeTime: function (value, timestamp, opts) {
if (value < 990748800) {
return;
}
var date = new Date(
(timestamp + (objectcache.gmt_offset * 3600)) * 1000
);
var dateOffset = new Date(
date.toISOString().substring(0, 19).replace('T', ' ') + ' GMT'
);
return opts.dateFormatter(dateOffset, 'HH:mm');
},
formatLabel: function (value) {
if (value === null || value === Number.MIN_VALUE) {
return 0;
}
if (this.id === 'ms-total' || this.id === 'response-times') {
return Math.round(value) + ' ms';
}
if (this.id === 'ms-cache-avg') {
return value.toFixed(2) + ' ms';
}
if (this.type === 'integer') {
if (value === 0) return value.toFixed(0);
if (value < 1) return value.toFixed(2);
if (value < 1e3) return value.toFixed(0);
if (value >= 1e3 && value < 1e6) return +(value / 1e3).toFixed(1) + 'k';
if (value >= 1e6 && value < 1e9) return +(value / 1e6).toFixed(1) + 'm';
if (value >= 1e9 && value < 1e12) return +(value / 1e9).toFixed(1) + 'b';
if (value >= 1e12) return +(value / 1e12).toFixed(1) + 't';
}
if (this.type === 'ratio') {
return Math.round((value + Number.EPSILON) * 100) / 100 + '%';
}
if (this.type === 'time') {
return Math.round((value + Number.EPSILON) * 100) / 100 + ' ms';
}
if (this.type === 'bytes') {
var i = value === 0 ? 0 : Math.floor(Math.log(value) / Math.log(1024));
return parseFloat((value / Math.pow(1024, i)).toFixed(this.compact ? 0 : 2)) + ' ' + ['B', 'KB', 'MB', 'GB', 'TB', 'PB'][i];
}
return value;
},
renderTooltip: function (opts) {
var w = opts.w;
var dataPointIndex = opts.dataPointIndex;
var context = this;
var analytics = objectcache.analytics;
var values = w.config.series.map(function (series, index) {
if (series.data[dataPointIndex].y === null) {
return '';
}
var marker = '';
var seriesName = series.name;
var label = analytics.formatLabel.call(context, series.data[dataPointIndex].y);
if (analytics.comboCharts.hasOwnProperty(context.id)) {
var comboContext = analytics.comboCharts[context.id].containers.map(function (chart) {
return { id: chart, type: context.type[chart] };
}).filter(function (chart) {
return series.name.indexOf(chart.id + ' - ') === 0;
})[0];
marker = '<span class="apexcharts-tooltip-marker" style="background-color: ' + w.config.colors[index] + ';"></span>';
label = analytics.formatLabel.call(comboContext, series.data[dataPointIndex].y);
seriesName = analytics.comboCharts[context.id].labels[comboContext.id] + ' ' + series.name.substr(series.name.lastIndexOf('-'));
}
return '<div>' + marker + '<em>' + seriesName + ': ' + label + '</em></div>';
});
var date = w.config.series[0].data[dataPointIndex].date_display.date;
var time = w.config.series[0].data[dataPointIndex].date_display.time;
return '<div class="objectcache:chart-tooltip">' +
'<div><small>' + date + '</small></div>' +
'<div><strong>' + time + '</strong></div>' +
values.join('') +
'</div>';
},
},
});