{% block content %}

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<p style="font-size: 40px">
    <b>
        Here's a chart showing where you stand
    </b>
</p>


<div>
  <canvas id="feedback-chart"></canvas>
</div>

<script>
  Chart.defaults.font.size = 18;

  const themes = ['Animal', 'Food', 'Summer']
  const lineData = new Array(3);
  lineData[themes.findIndex((i) => i === '{{player_selection}}')] = {{player_theme_average}};

  var bubbleData = [];

  {{others_animal_feedback}}.forEach((i) => {
    bubbleData.push({ x: 'Animal', y: i, r: 10 });
  });

  {{others_food_feedback}}.forEach((i) => {
    bubbleData.push({ x: 'Food', y: i, r: 10 });
  });

  {{others_summer_feedback}}.forEach((i) => {
    bubbleData.push({ x: 'Summer', y: i, r: 10 });
  });



  const mixedChart = new Chart(document.getElementById('feedback-chart'), {
    data: {
        datasets: [
             {
                type: 'bar',
                label: 'Themes',
                backgroundColor: 'rgb(10, 10, 10)',
                borderColor: 'rgb(10, 10, 10)',
                data: [30, 30, 30],
                barThickness: 1,
            },
            {
                type: 'line',
                label: 'Your period score average',
                borderColor: 'rgb(255, 99, 99)',
                backgroundColor: 'rgb(255, 70, 70)',
                pointRadius: 16,
                data: lineData,
                pointStyle: 'line',
                borderWidth: 10,
                borderRadius: 30,
                borderColor: 'rgb(255, 99, 99, 0.8)',
                backgroundColor: 'rgb(255, 99, 99, 0.8)',
                hoverBorderWidth: 12,
                hoverRadius: 32
            },
            {
                type: 'bubble',
                label: 'Other players score average',
                backgroundColor: 'rgb(142, 159, 212, 0.3)',
                borderColor: 'rgb(73, 89, 140, 0.7)',
                data: bubbleData,
                options: {
                    xAxes: [{
                          ticks: {
                            callback: function(value, index, values) {
                                return themes[index];
                            }
                          }
                    }]
                }
            }
        ],
        labels: themes
    },
    options: {
        responsive: true,
        scales: {
          y: {
            beginAtZero: true,
            max: {{maximum_y_value}}
          }
        },
        plugins: {
            tooltip: {
             enabled: true,
             callbacks: {
                title: function(dataItem) {
                    if (dataItem[0].dataset.type === 'line') {
                        return dataItem[0].dataset.label;
                    }
                    return 'Score ' + dataItem[0].parsed.y + ' in '+ (dataItem[0].raw && dataItem[0].raw.x);
                },
                label: function(dataItem) {
                    if (dataItem.dataset.type === 'line') {
                        return 'Score ' + dataItem.formattedValue + ' in '+ dataItem.label;
                    }
                    return 'Player ' + dataItem.dataIndex + ' Period Score Average ' + dataItem.parsed.y;
                }
             }
            }
        }
    }
  });
</script>

{% next_button %}

{% endblock %}