108 lines
4.0 KiB
Twig
108 lines
4.0 KiB
Twig
{% extends 'user/layout.html.twig' %}
|
|
{% import "macros/actions.html.twig" as actions %}
|
|
{% import "macros/widgets.html.twig" as widgets %}
|
|
|
|
{% block stylesheets %}
|
|
{{ parent() }}
|
|
{{ encore_entry_link_tags('chart') }}
|
|
{% endblock %}
|
|
|
|
{% block head %}
|
|
{{ parent() }}
|
|
{{ encore_entry_script_tags('chart') }}
|
|
{% endblock %}
|
|
|
|
{% block profile_content %}
|
|
|
|
{% if years is empty %}
|
|
{{ widgets.callout('warning', 'error.no_entries_found') }}
|
|
{% endif %}
|
|
|
|
<script type="text/javascript">
|
|
function userProfileChartOptions() {
|
|
return {
|
|
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: '{{ kimai_context.chart.grid_color }}',
|
|
lineWidth: 1
|
|
}
|
|
}]
|
|
},
|
|
tooltips: {
|
|
callbacks: {
|
|
label: function(tooltipItem, data) {
|
|
return data.datasets[tooltipItem.datasetIndex].realData[tooltipItem.index];
|
|
}
|
|
}
|
|
}
|
|
};
|
|
}
|
|
</script>
|
|
|
|
{% for year,yearStat in years %}
|
|
|
|
{% embed '@AdminLTE/Widgets/box-widget.html.twig' %}
|
|
{% block box_title %}{{ year }}{% endblock %}
|
|
{% block box_body %}
|
|
|
|
<div class="chart">
|
|
<canvas id="userProfileChart{{ year }}" style="height: {{ kimai_context.chart.height }}px;"></canvas>
|
|
</div>
|
|
<script type="text/javascript">
|
|
document.addEventListener('kimai.initialized', function() {
|
|
var userProfileChartData{{ year }} = {
|
|
labels: moment.months(),
|
|
datasets: [
|
|
{
|
|
label: '{{ year }}',
|
|
backgroundColor: '{{ kimai_context.chart.background_color }}',
|
|
borderColor: '{{ kimai_context.chart.border_color }}',
|
|
data: [
|
|
{% for month in yearStat.months %}
|
|
{{ (month.totalDuration / 3600)|number_format(2, '.', '') }}
|
|
{% if not loop.last %},{% endif %}
|
|
{% endfor %}
|
|
],
|
|
realData : [
|
|
{% for month in yearStat.months %}
|
|
'{{ month.totalDuration|duration }}'
|
|
{% if not loop.last %},{% endif %}
|
|
{% endfor %}
|
|
]
|
|
}
|
|
]
|
|
};
|
|
|
|
var userProfileChartCanvas{{ year }} = $("#userProfileChart{{ year }}").get(0).getContext("2d");
|
|
|
|
var userProfileChart{{ year }} = new Chart(
|
|
userProfileChartCanvas{{ year }}, {
|
|
type: 'bar',
|
|
data: userProfileChartData{{ year }},
|
|
options: userProfileChartOptions()
|
|
}
|
|
);
|
|
});
|
|
</script>
|
|
{% endblock %}
|
|
{% endembed %}
|
|
|
|
{% endfor %}
|
|
|
|
{% endblock %}
|