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

templates/widget/widget-dailyworkingtimechart.html.twig

@@ -0,0 +1,95 @@
+{% set type = options.type|default('bar') %}
+{% set chart_id = options.id %}
+{% 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(';') %}
+{% if colors.0 is defined and not colors.0 is empty %}
+    {% set backgroundColor = colors.0 %}
+    {% set borderColor = colors.0 %}
+    {% if colors.1 is defined and not colors.1 is empty %}
+        {% set borderColor = colors.1 %}
+    {% endif %}
+{% endif %}
+
+{{ encore_entry_link_tags('chart') }}
+{{ encore_entry_script_tags('chart') }}
+
+{% if not title is empty %}
+<p class="text-center">
+    <strong>
+       {{ title|trans }}
+    </strong>
+</p>
+{% endif %}
+
+<div class="chart">
+    <canvas id="{{ chart_id }}" style="height: {{ kimai_context.chart.height }}px;"></canvas>
+</div>
+
+<script type="text/javascript">
+document.addEventListener('kimai.initialized', function() {
+    new Chart(
+        document.getElementById('{{ chart_id }}').getContext('2d'), {
+            type: '{{ type }}',
+            data: {
+                labels: [
+                    {% for day in data -%}
+                    moment('{{ day.day|date_format(constant('\DateTime::ISO8601')) }}').format('ll')
+                    {% if not loop.last %},{% endif -%}
+                    {%- endfor %}
+                ],
+                datasets: [
+                    {
+                        backgroundColor: '{{ backgroundColor }}',
+                        borderColor: '{{ borderColor }}',
+                        data: [
+                            {% for day in data -%}
+                            {{ (day.totalDuration / 3600)|number_format(2, '.', '') }}
+                            {%- if not loop.last %},{% endif -%}
+                            {%- endfor %}
+                        ],
+                        realData: [
+                            {% for day in data -%}
+                            '{{ day.totalDuration|duration }}'
+                            {%- if not loop.last %},{% endif -%}
+                            {%- endfor %}
+                        ]
+                    }
+                ]
+            },
+            options: {
+                maintainAspectRatio: true,
+                responsive: true,
+                legend: false,
+                barPercentage: 0.5,
+                categoryPercentage: 0.9,
+                scales: {
+                    xAxes: [{
+                        gridLines: {
+                            display: false
+                        },
+                    }],
+                    yAxes: [{
+                        ticks: {
+                            beginAtZero: true
+                        },
+                        gridLines: {
+                            display: true,
+                            color: '{{ gridColor }}',
+                            lineWidth: 1
+                        }
+                    }]
+                },
+                tooltips: {
+                    callbacks: {
+                        label: function(tooltipItem, data) {
+                            return data.datasets[tooltipItem.datasetIndex].realData[tooltipItem.index];
+                        }
+                    }
+                }
+            }
+        }
+    );
+});
+</script>