Я создаю сайт-панель для внутреннего пользования в моей компании. У нас есть телевизор в нашем офисе, и я хочу показать некоторые статистические данные наших 8 самых популярных веб-сайтов. Он должен содержать 8 графиков пользователей / сессий за последние недели для каждого сайта. Я также хочу отображать активных пользователей для каждого сайта.
Мне удалось придумать скрипт и написать (с некоторой помощью) функцию, чтобы я мог легко вызывать разные сайты, просто меняя идентификаторы представления соответствующих свойств, вместо того, чтобы копировать один и тот же код восемь раз.
Проблема, с которой я сталкиваюсь, - «Ошибка квоты: превышен предел скорости пользователя». ошибка в консоли, из-за 8 сайтов. Работает нормально с 2 или 3, но 8 кажется слишком много. Я уже поднял запросов за 100 секунд на пользователя. слишком 1000.
Можно ли как-нибудь уменьшить количество вызовов API, переписав часть своего кода? Или есть какой-то другой способ добиться такого рода панелей управления?
`
<div class="container-fluid">
<div class="row">
<div id="auth-button"></div>
<div class="col-lg-4 dashitem">
<h1>name</h1>
<figure class="Chartjs-figure" id="-container"></figure>
<ol class="Chartjs-legend" id="legend-1-container"></ol>
<div id="active-users-container1"></div>
</div>
<div class="col-lg-4 dashitem">
<h1>name</h1>
<figure class="Chartjs-figure" id="[name]-container"></figure>
<ol class="Chartjs-legend" id="legend-2-container"></ol>
<div id="active-users-container2"></div>
</div>
<div class="col-lg-4 dashitem">
<h1>name</h1>
<figure class="Chartjs-figure" id="[name]-container"></figure>
<ol class="Chartjs-legend" id="legend-3-container"></ol>
<div id="active-users-container3"></div>
</div>
<div class="col-lg-4 dashitem">
<h1>name</h1>
<figure class="Chartjs-figure" id="[name]-container"></figure>
<ol class="Chartjs-legend" id="legend-4-container"></ol>
<div id="active-users-container4"></div>
</div>
<div class="col-lg-4 dashitem">
<h1>name</h1>
<figure class="Chartjs-figure" id="[name]-container"></figure>
<ol class="Chartjs-legend" id="legend-5-container"></ol>
<div id="active-users-container5"></div>
</div>
<div class="col-lg-4 dashitem">
<h1>name</h1>
<figure class="Chartjs-figure" id="[name]-container"></figure>
<ol class="Chartjs-legend" id="legend-6-container"></ol>
<div id="active-users-container6"></div>
</div>
<div class="col-lg-4 dashitem">
<h1>name</h1>
<figure class="Chartjs-figure" id="[name]-container"></figure>
<ol class="Chartjs-legend" id="legend-7-container"></ol>
<div id="active-users-container7"></div>
</div>
<div class="col-lg-4 dashitem">
<h1>name</h1>
<figure class="Chartjs-figure" id="[name]-container"></figure>
<ol class="Chartjs-legend" id="legend-8-container"></ol>
<div id="active-users-container8"></div>
</div>
</div>
</div>
{literal}
<script>
gapi.analytics.ready(function() {
var CLIENT_ID = '[client-id]';
gapi.analytics.auth.authorize({
container: 'auth-button',
clientid: CLIENT_ID,
userInfoLabel:""
});
gapi.analytics.auth.on('success', function(response) {
//hide the auth-button
document.querySelector("#auth-button").style.display='none';
});
function renderIndividualChart(id, chartId, legendId, activeUsersId) {
// Adjust `now` to experiment with different days, for testing only...
var now = moment(); // .subtract(3, 'day');
var thisWeek = query({
'ids': "ga:" + id,
'dimensions': 'ga:date,ga:nthDay',
'metrics': 'ga:users',
'start-date': moment(now).subtract(1, 'day').day(0).format('YYYY-MM-DD'),
'end-date': moment(now).format('YYYY-MM-DD')
});
var lastWeek = query({
'ids': "ga:" + id,
'dimensions': 'ga:date,ga:nthDay',
'metrics': 'ga:users',
'start-date': moment(now).subtract(1, 'day').day(0).subtract(1, 'week')
.format('YYYY-MM-DD'),
'end-date': moment(now).subtract(1, 'day').day(6).subtract(1, 'week')
.format('YYYY-MM-DD')
});
Promise.all([thisWeek, lastWeek]).then(function(results) {
var data1 = results[0].rows.map(function(row) { return +row[2]; });
var data2 = results[1].rows.map(function(row) { return +row[2]; });
var labels = results[1].rows.map(function(row) { return +row[0]; });
labels = labels.map(function(label) {
return moment(label, 'YYYYMMDD').format('ddd');
});
var data = {
labels : labels,
datasets : [
{
label: 'Vorige Week',
fillColor : 'rgba(220,220,220,0.5)',
strokeColor : 'rgba(220,220,220,1)',
pointColor : 'rgba(220,220,220,1)',
pointStrokeColor : '#fff',
data : data2
},
{
label: 'Deze Week',
fillColor : 'rgba(151,187,205,0.5)',
strokeColor : 'rgba(151,187,205,1)',
pointColor : 'rgba(151,187,205,1)',
pointStrokeColor : '#fff',
data : data1
}
]
};
new Chart(makeCanvas(chartId)).Line(data);
generateLegend(legendId, data.datasets);
});
var activeUsers = new gapi.analytics.ext.ActiveUsers({
ids: "ga:" + id,
container: activeUsersId,
pollingInterval: 5
});
//activeUsers.execute();
}
function query(params) {
return new Promise(function(resolve, reject) {
var data = new gapi.analytics.report.Data({query: params});
data.once('success', function(response) { resolve(response); })
.once('error', function(response) { reject(response); })
.execute();
});
}
function makeCanvas(id) {
var container = document.getElementById(id);
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
container.innerHTML = '';
canvas.width = container.offsetWidth;
canvas.height = container.offsetHeight;
container.appendChild(canvas);
return ctx;
}
function generateLegend(id, items) {
var legend = document.getElementById(id);
legend.innerHTML = items.map(function(item) {
var color = item.color || item.fillColor;
var label = item.label;
return '<li><i style="background:' + color + '"></i>' +
escapeHtml(label) + '</li>';
}).join('');
}
// Set some global Chart.js defaults.
Chart.defaults.global.animationSteps = 60;
Chart.defaults.global.animationEasing = 'easeInOutQuart';
Chart.defaults.global.responsive = true;
Chart.defaults.global.maintainAspectRatio = false;
function escapeHtml(str) {
var div = document.createElement('div');
div.appendChild(document.createTextNode(str));
return div.innerHTML;
}
renderIndividualChart(xxx9412, '[name]-container', 'legend-1-container', 'active-users-container1');
renderIndividualChart(xxx11510, '[name]-container', 'legend-2-container', 'active-users-container2');
renderIndividualChart(xxx8011, '[name]-container', 'legend-3-container', 'active-users-container3');
renderIndividualChart(xxx4711, '[name]-container', 'legend-4-container', 'active-users-container4');
renderIndividualChart(xxx4009, '[name]-container', 'legend-5-container', 'active-users-container5');
renderIndividualChart(xxx61037, '[name]-container', 'legend-6-container', 'active-users-container6');
renderIndividualChart(xxx0969, '[name]-container', 'legend-7-container', 'active-users-container7');
renderIndividualChart(xxx5362, '[name]-container', 'legend-8-container', 'active-users-container8');
});
</script>
`