pizza.html

---
layout: page
styles:
  - /css/type.css
  - /css/pizzas.css
---

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <!-- Chart.js CDN included-->
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-labels@1.1.0/src/chartjs-plugin-labels.min.js"></script> <!-- Plugin for chart.js -->

<div id="pizzaMainContent">
  <h1>CSS Pizza Statistics</h2>

  {% for years in site.data.pizza %}
    {% assign year = years[1] %}
    {% if year.current %}
      {% assign current_year = year %}
    {% endif %}
  {% endfor %}
  {% assign total_pizzas = 0 %}
  {% for years in site.data.pizza %}
    {% if years[1].current %} 
      {% assign year = years[1] %} 
      {% for flavour in year.statistics %} 
        {% assign total_pizzas = total_pizzas | plus: flavour[1] %}
      {% endfor %}
    {% endif %} 
  {% endfor %}
  <h3>In {{ current_year.academic_year }}, CSS has so far eaten {{ total_pizzas
  }} pizzas!</h3>
  
  <div id="pizzaCharts">
    <!-- scripting for current year statistics -->
    {% assign current_labels = "" | split: ',' %}
    {% assign current_figures = "" | split: ',' %}
    {% for flavour in current_year.statistics %}
      {% assign current_labels = current_labels | push: flavour[0] %}
      {% assign current_labels = current_labels | push: ", " %}
      {% assign current_figures = current_figures | push: flavour[1] %}
      {% assign current_figures = current_figures | push: ", " %}
    {% endfor %}

    <!-- build text for ARIA -->
    {% assign aria_text = "" %}
    {% for flavour in current_year.statistics %}
      {% assign aria_text = aria_text | append: flavour[0] %}
      {% assign aria_text = aria_text | append: ": " %}
      {% assign aria_text = aria_text | append: flavour[1] %}
      {% assign aria_text = aria_text | append: ", " %}
    {% endfor %}
   
    <div class="annualChartHolder">
      <canvas id="annualBarChart" role="img" aria-label="{{ aria_text }}"></canvas>
    </div>
    <div class="annualChartHolder">
      <canvas id="annualPieChart" role= "img" aria-label="{{ aria_text }}"></canvas>
    </div>
  </div>
</div>

<!-- Annual pie chart scripting -->
<script>
  const chartBackgroundColors = [
                'rgba(255, 23, 45, 0.7)',
                'rgba(24, 12, 235, 0.7)',
                'rgba(255, 235, 12, 0.7)',
                'rgba(10, 240, 47, 0.7)',
                'rgba(240, 50, 255, 0.7)',
                'rgba(255, 145, 0, 0.7)',
                'rgba(23, 43, 250, 0.7)'
            ];
  const chartBorderColors = [
                'rgba(255, 23, 45, 1)',
                'rgba(24, 12, 235, 1)',
                'rgba(255, 235, 12, 1)',
                'rgba(10, 240, 47, 1)',
                'rgba(240, 50, 255, 1)',
                'rgba(255, 145, 0, 1)',
                'rgba(23, 43, 250, 1)'
            ];
  
  var pizzaPieLabels = '{{current_labels}}'.split(", ");
  var pizzaFigures = '{{current_figures}}'.split(", ");
  var ctx = document.getElementById("annualPieChart").getContext("2d");
  var annualChart = new Chart(ctx, {
    type: 'pie',
    data: {
        labels: pizzaPieLabels,
        datasets: [{
            data: pizzaFigures,
            backgroundColor: chartBackgroundColors,
            borderColor: chartBorderColors,
            borderWidth: 1
        }]
    },
    options: {
      maintainAspectRatio: false,
      plugins: {
        labels: {
          render: 'label',
          fontColor: "white",
        },
        title: {
          display: true,
          text: "Scroll Over Me To See Data!",
          color: "rgba(255, 255, 255, 1)",
        },
        legend: {
          display: false,
          labels: {
            fontColor: "white",
          }
        }
      },
    }
})
</script> 

<!-- Annual bar chart scripting -->
<script>
  var pizzaLabels = '{{current_labels}}'.split(", ");
  pizzaLabels.pop();
  var pizzaFigures = '{{current_figures}}'.split(", ");
  pizzaFigures = pizzaFigures.map((figure) => {
    return parseInt(figure);
  })
  var ctx = document.getElementById("annualBarChart").getContext("2d");
  var annualChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: pizzaLabels,
        datasets: [{
            data: pizzaFigures,
            backgroundColor: chartBackgroundColors,
            borderColor: chartBorderColors,
            borderWidth: 1
        }]
    },
    options: {
      scales: {
          y: {
              beginAtZero: true
          },
          x: {
            ticks: {
              color: "white",
            }
          }
      },
      maintainAspectRatio: false,
      plugins: {
        title: {
          display: true,
          text: "{{current_year.academic_year}}",
          color: "rgba(255, 255, 255, 1)",
        },
        legend: {
          display: false,
          labels: {
            fontColor: "white",
          }
        }
      }
    }
  });

</script>