2018-05-30 21:50:20 -04:00
|
|
|
|
function getStatsChart(id, width, height) {
|
|
|
|
|
const data = $('#' + id).data('history');
|
|
|
|
|
let fixedData = [];
|
|
|
|
|
data.forEach(function (item, i) {
|
2018-06-01 20:55:26 -04:00
|
|
|
|
fixedData[i] = { x: i, y: Math.floor(item) };
|
2018-05-30 21:50:20 -04:00
|
|
|
|
});
|
|
|
|
|
|
2018-06-01 20:55:26 -04:00
|
|
|
|
let dataMin = Math.min(...data);
|
|
|
|
|
const dataMax = Math.max(...data);
|
|
|
|
|
|
|
|
|
|
if (dataMax - dataMin === 0) {
|
|
|
|
|
dataMin = 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const padding = (dataMax - dataMin) * 0.075;
|
|
|
|
|
const min = Math.max(0, dataMin - padding);
|
|
|
|
|
const max = dataMax + padding;
|
|
|
|
|
let interval = Math.floor((max - min) / 2);
|
|
|
|
|
|
|
|
|
|
if (interval < 1)
|
|
|
|
|
interval = 1;
|
|
|
|
|
|
2019-07-27 16:23:45 -04:00
|
|
|
|
let primaryColor = window.getComputedStyle(document.body).getPropertyValue('--primary').trim();
|
2019-07-27 09:18:49 -04:00
|
|
|
|
|
2018-05-30 21:50:20 -04:00
|
|
|
|
return new CanvasJS.Chart(id, {
|
|
|
|
|
backgroundColor: 'transparent',
|
|
|
|
|
height: height,
|
|
|
|
|
width: width,
|
|
|
|
|
animationEnabled: false,
|
|
|
|
|
toolTip: {
|
|
|
|
|
contentFormatter: function (e) {
|
2018-06-01 20:55:26 -04:00
|
|
|
|
return Math.round(e.entries[0].dataPoint.y, 1);
|
2018-05-30 21:50:20 -04:00
|
|
|
|
}
|
|
|
|
|
},
|
2018-06-01 20:55:26 -04:00
|
|
|
|
title: {
|
2019-05-17 10:02:09 -04:00
|
|
|
|
text: _localization['WEBFRONT_STATS_PERFORMANCE_HISTORY'],
|
2018-06-01 20:55:26 -04:00
|
|
|
|
fontSize: 14
|
|
|
|
|
},
|
2018-05-30 21:50:20 -04:00
|
|
|
|
axisX: {
|
|
|
|
|
gridThickness: 0,
|
|
|
|
|
lineThickness: 0,
|
|
|
|
|
tickThickness: 0,
|
|
|
|
|
margin: 0,
|
2019-07-19 15:54:39 -04:00
|
|
|
|
valueFormatString: ' '
|
2018-05-30 21:50:20 -04:00
|
|
|
|
},
|
|
|
|
|
axisY: {
|
2018-06-01 20:55:26 -04:00
|
|
|
|
labelFontSize: 12,
|
|
|
|
|
interval: interval,
|
2018-05-30 21:50:20 -04:00
|
|
|
|
gridThickness: 0,
|
2018-06-01 20:55:26 -04:00
|
|
|
|
lineThickness: 0.5,
|
2019-05-17 10:02:09 -04:00
|
|
|
|
valueFormatString: '#,##0',
|
2018-06-01 20:55:26 -04:00
|
|
|
|
minimum: min,
|
|
|
|
|
maximum: max
|
2018-05-30 21:50:20 -04:00
|
|
|
|
},
|
|
|
|
|
legend: {
|
|
|
|
|
dockInsidePlotArea: true
|
|
|
|
|
},
|
|
|
|
|
data: [{
|
2019-05-17 10:02:09 -04:00
|
|
|
|
type: 'splineArea',
|
2019-07-27 09:18:49 -04:00
|
|
|
|
color: primaryColor.endsWith('80') ? primaryColor : primaryColor + '40',
|
2018-06-01 20:55:26 -04:00
|
|
|
|
markerSize: 3.5,
|
2018-05-30 21:50:20 -04:00
|
|
|
|
dataPoints: fixedData
|
|
|
|
|
}]
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
$(document).ready(function () {
|
|
|
|
|
$('.client-rating-graph').each(function (i, element) {
|
|
|
|
|
getStatsChart($(element).attr('id'), $(element).width(), $(element).height()).render();
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
$(window).resize(function () {
|
|
|
|
|
$('.client-rating-graph').each(function (index, element) {
|
|
|
|
|
getStatsChart($(element).attr('id'), $(element).width(), $(element).height()).render();
|
|
|
|
|
});
|
|
|
|
|
});
|
2019-02-26 22:25:27 -05:00
|
|
|
|
|
|
|
|
|
$('.top-players-link').click(function (event) {
|
2019-02-27 21:13:15 -05:00
|
|
|
|
$($(this).attr('href')).html('');
|
|
|
|
|
initLoader('/Stats/GetTopPlayersAsync?serverId=' + $(this).data('serverid'), $(this).attr('href'), 10, 0);
|
|
|
|
|
loadMoreItems();
|
2019-02-26 22:25:27 -05:00
|
|
|
|
});
|
2018-05-30 21:50:20 -04:00
|
|
|
|
});
|
2018-05-31 20:17:52 -04:00
|
|
|
|
|
|
|
|
|
$(document).on("loaderFinished", function (event, response) {
|
|
|
|
|
const ids = $.map($(response).find('.client-rating-graph'), function (elem) { return $(elem).attr('id'); });
|
|
|
|
|
ids.forEach(function (item, index) {
|
|
|
|
|
getStatsChart(item, $(item).width(), $(item).height()).render();
|
|
|
|
|
});
|
|
|
|
|
});
|