96 lines
3.3 KiB
Twig
96 lines
3.3 KiB
Twig
{% 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>
|