Reisacher-Forderung/templates/forderungen/dashboard/dashboard.html

{% extends "base/base.html" %}
{% block content %}

<br>
<br>

<h3>Forderungen</h3>

<br>

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link" aria-current="page" href="?page=Altersstaffel">nach Altersstaffel</a>
  </li>
  <li class="nav-item">
    <a class="nav-link active" href="?page=Standort">nach Standort</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="?page=Verursacher">nach Verursacher</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" aria-disabled="true">nach Wiedervorlage</a>
  </li>
</ul>

<br>
<br>

<div class="col-8">
  <canvas id="myChart"></canvas>
</div>

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

<script>
  let CHART_COLORS = {
    red: 'rgb(255, 99, 132)',
    orange: 'rgb(255, 159, 64)',
    yellow: 'rgb(255, 205, 86)',
    green: 'rgb(75, 192, 192)',
    blue: 'rgb(54, 162, 235)',
    purple: 'rgb(153, 102, 255)',
    grey: 'rgb(201, 203, 207)'
  };

  let data = {
    labels: [
      'MM',
      'KRU',
      'ULM',
      'LL',
      'GZ',
      'AAM',
    ],
    datasets: [{
      label: 'Verkauf',
      data: [12, 19, 3, 5, 2, 3],
      borderWidth: 1,
      backgroundColor: CHART_COLORS.red
    },
    {
      label: 'Service',
      data: [12, 19, 3, 5, 2, 3],
      borderWidth: 1,
      backgroundColor: CHART_COLORS.blue
    },
    {
      label: 'TZ',
      data: [12, 19, 3, 5, 2, 3],
      borderWidth: 1,
      backgroundColor: CHART_COLORS.green
    }, {
      label: 'Sonstige',
      data: [12, 19, 3, 5, 2, 3],
      borderWidth: 1,
      backgroundColor: CHART_COLORS.yellow
    }]
  };

  let myChart = document.getElementById('myChart')

  let myBarChart = new Chart(myChart, {
    type: 'bar',
    data: {
      labels: data.labels,
      datasets: data.datasets
    },
    options: {
      plugins: {
        title: {
          display: false,
          text: 'Chart.js Bar Chart - Stacked'
        },
      },
      responsive: true,
      scales: {
        x: {
          stacked: true,
        },
        y: {
          stacked: true
        }
      }
    }
  });

  myChart.onclick = function (e) {
    var slice = myBarChart.getElementsAtEventForMode(e, 'nearest', { intersect: true }, true);
    if (!slice.length) return; // return if not clicked on slice
    console.log(slice);
    var label = myBarChart.data.labels[slice[0].index];
    var ids = {
      'MM': '10',
      'KRU': '30',
      'ULM': '40',
      'LL': '50',
      'GZ': '55',
      'AAM': '60',
    };
    window.open('/app/forderungen/liste/?Standort=' + ids[label]);
  }
</script>

{% endblock %}