{% include 'BaitPollBundle:Poll:poll.html.twig' %}
{% if poll.displayType == 'onclick' and answerSaved is not defined %}
<section style="display:none" class="poll-showhide" data-pollid="{{poll.id}}">
{% endif %}
{% if ongoingResultAnswers is defined %}
{% for question in poll.questions %}
{% if ongoingResultQuestions[question.id] is defined %}
<canvas id="{{ question.id }}" style="margin-top: 30px"></canvas>
<component is="script">
var ctx = document.getElementById('{{ question.id }}').getContext('2d');
var bodyStyle = getComputedStyle(document.body);
var topBarStyle = getComputedStyle(document.querySelector('#top-bar'));
var fontFamily = bodyStyle.getPropertyValue('font-family');
var fontSize = bodyStyle.getPropertyValue('font-size');
var color = bodyStyle.getPropertyValue('color');
var webColor = window.location.href.includes('funradio') ? 'rgb(229, 0, 105)' : 'rgb(124, 194, 66)'; // background color for Funradio or Birdie
var backgroundColor = topBarStyle.getPropertyValue('background-color') === 'rgba(0, 0, 0, 0)' ? webColor : topBarStyle.getPropertyValue('background-color');
var labels = '{% for answer in question.answers %}{{answer.answer}};{% endfor %}'.slice(0, -1);
var data = '{% for answer in question.answers %}{{ ongoingResultAnswers[answer.id]|default(0) }};{% endfor %}'.slice(0, -1);
{# per-site colors #}
var defaultColors = [
backgroundColor,
backgroundColor.replace(")", ", 0.8)"),
backgroundColor.replace(")", ", 0.6)"),
backgroundColor.replace(")", ", 0.4)"),
backgroundColor.replace(")", ", 0.2)")
];
{# init with DB values #}
var chartColors = [
{%- for answer in question.answers -%}
{%- if answer.answerColor is not empty -%}
'{{ answer.answerColor }}'
{%- else -%}
null
{%- endif -%}
{%- if not loop.last -%},{%- endif -%}
{%- endfor -%}
];
{# merge custom colors with per-site fallbacks #}
for (let i = 0; i < chartColors.length; i++) {
chartColors[i] = (chartColors[i] !== null) ? chartColors[i] : defaultColors.shift();
}
Chart.defaults.global.defaultFontFamily = fontFamily;
Chart.defaults.global.defaultFontSize = Number(fontSize.slice(0, 2));
Chart.defaults.global.defaultFontColor = color;
var chart = new Chart(ctx, {
type: 'pie',
data: {
labels: labels.split(';'),
datasets: [{
label: '{{ question.title }}',
backgroundColor: chartColors,
data: data.split(';')
}]
},
options: {
title: {
display: true,
text: '{{question.title}}'.replace(/"/g, '"')
},
tooltips: {
callbacks: {
label: function(tooltipItem, data) {
var totalAnswers = {{ongoingResultQuestions[question.id]}};
var itemValue = Number(data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index]);
var percentValue = (Math.round((itemValue/totalAnswers*100)*10)/10).toFixed(1) + '%';
var label = data.labels[tooltipItem.index] + ': ' + percentValue;
return label;
}
}
}
}
});
</component>
{% endif %}
{% endfor %}
{% endif %}
{% if poll.displayType == 'onclick' and answerSaved is not defined %}
</section>
{% endif %}
{% if poll.multiEntry and poll.multiEntryInterval == 'without_limit' %}
<component is="script">
function onloadCallbackId{{poll.id}}() {
grecaptcha.render("recaptcha-{{poll.id}}", {
'sitekey': "{{recaptchaSiteKey}}",
'callback': function() { recaptchaSuccessId{{poll.id}}({{poll.id}}) },
'expired-callback': function() { recaptchaExpiresId{{poll.id}}({{poll.id}}) }
});
}
function recaptchaSuccessId{{poll.id}}(id) {
document.getElementById(id).removeAttribute('disabled');
}
function recaptchaExpiresId{{poll.id}}(id) {
document.getElementById(id).setAttribute('disabled', true);
}
</component>
<component is="script" src="https://www.google.com/recaptcha/api.js?onload=onloadCallbackId{{poll.id}}&render=explicit&hl=sk" async defer></component>
{% endif %}