|
|
@@ -1,14 +1,39 @@
|
|
|
{% extends "base/base.html" %}
|
|
|
{% block content %}
|
|
|
|
|
|
-<div>
|
|
|
+<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>
|
|
|
- var CHART_COLORS = {
|
|
|
+ let CHART_COLORS = {
|
|
|
red: 'rgb(255, 99, 132)',
|
|
|
orange: 'rgb(255, 159, 64)',
|
|
|
yellow: 'rgb(255, 205, 86)',
|
|
|
@@ -18,45 +43,52 @@
|
|
|
grey: 'rgb(201, 203, 207)'
|
|
|
};
|
|
|
|
|
|
- var ctx = document.getElementById('myChart');
|
|
|
+ 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
|
|
|
+ }]
|
|
|
+ };
|
|
|
|
|
|
- new Chart(ctx, {
|
|
|
+ let myChart = document.getElementById('myChart')
|
|
|
+
|
|
|
+ let myBarChart = new Chart(myChart, {
|
|
|
type: 'bar',
|
|
|
data: {
|
|
|
- labels: [' < 2 Wochen',
|
|
|
- ' 2 - 4 Wochen',
|
|
|
- ' 4 - 6 Wochen',
|
|
|
- ' 6 - 12 Wochen',
|
|
|
- ' noch nicht fällig',
|
|
|
- '> 12 Wochen'],
|
|
|
- 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
|
|
|
- }]
|
|
|
+ labels: data.labels,
|
|
|
+ datasets: data.datasets
|
|
|
},
|
|
|
options: {
|
|
|
plugins: {
|
|
|
title: {
|
|
|
- display: true,
|
|
|
+ display: false,
|
|
|
text: 'Chart.js Bar Chart - Stacked'
|
|
|
},
|
|
|
},
|
|
|
@@ -71,6 +103,22 @@
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
+
|
|
|
+ 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 %}
|