users weekly stats as bar-chart in dashboard (#847)

templates/widget/widget-yearchart.html.twig

@@ -0,0 +1,98 @@
+{% set backgroundColor = kimai_context.chart.background_color %}
+{% set borderColor = kimai_context.chart.border_color %}
+{% set gridColor = kimai_context.chart.grid_color %}
+{% set colors = options.color|default('')|split(';') %}
+{% set type = options.type|default('line') %}
+{% if type not in ['line', 'bar'] %}
+    {% set type = 'line' %}
+{% endif %}
+
+{% if not title is empty %}
+<p class="text-center">
+    <strong>
+        {{ title|trans }}
+    </strong>
+</p>
+{% endif %}
+
+<div class="chart">
+    <canvas id="timeChart" style="height: {{ kimai_context.chart.height }}px;"></canvas>
+</div>
+
+<script type="text/javascript">
+document.addEventListener('kimai.initialized', function() {
+    new Chart(
+        document.getElementById('timeChart').getContext('2d'), {
+            type: '{{ type }}',
+            data: {
+                labels: moment.months(),
+                datasets: [
+                {% for yearName, year in data %}
+                    {% set yearBackgroundColor = backgroundColor %}
+                    {% set yearBorderColor = borderColor %}
+
+                    {% if colors[loop.index-1] is defined %}
+                    {% set yearColors = colors[loop.index-1]|split('|') %}
+                    {% if yearColors.0 is defined and not yearColors.0 is empty %}
+                    {% set yearBackgroundColor = yearColors.0 %}
+                    {% set yearBorderColor = yearColors.0 %}
+                    {% if yearColors.1 is defined and not yearColors.1 is empty %}
+                    {% set yearBorderColor = yearColors.1 %}
+                    {% endif %}
+                    {% endif %}
+                    {% endif %}
+
+                    {
+                        label           : '{{ yearName }}',
+                        backgroundColor : '{{ yearBackgroundColor }}',
+                        borderColor     : '{{ yearBorderColor }}',
+                        pointRadius     : 2,
+                        borderWidth     : 1,
+                        pointHitRadius  : 10,
+                        lineTension     : 0.3,
+                        data            : [
+                            {% for month in year.months %}
+                            {{ (month.totalDuration / 3600)|number_format(2, '.', '') }}
+                            {% if not loop.last %},{% endif %}
+                            {% endfor %}
+                        ],
+                        realData        : [
+                            {% for month in year.months %}
+                            '{{ month.totalDuration|duration }}'
+                            {% if not loop.last %},{% endif %}
+                            {% endfor %}
+                        ]
+                    }
+                    {% if not loop.last %},{% endif %}
+                {% endfor %}
+                ]
+            },
+            options: {
+                maintainAspectRatio: true,
+                responsive: true,
+                scales: {
+                    xAxes: [{
+                        gridLines: {
+                            display: false
+                        }
+                    }],
+                    yAxes: [{
+                        gridLines: {
+                            display: true,
+                            color: '{{ gridColor }}',
+                            lineWidth: 1
+                        }
+                    }]
+                },
+                tooltips: {
+                    callbacks: {
+                        label: function(tooltipItem, data) {
+                            return data.datasets[tooltipItem.datasetIndex].realData[tooltipItem.index];
+                        }
+                    }
+                }
+            }
+        }
+    );
+});
+</script>