cerebrate/templates/element/genericElements/IndexTable/Statistics/index_statistic_field_amoun...

141 lines
6.6 KiB
PHP

<?php
use Cake\Utility\Inflector;
$statisticsHtml = '';
$statistics_pie_amount = $this->request->getQuery('statistics_entry_amount', 5);
$statistics_pie_include_remaining = $this->request->getQuery('statistics_include_remainging', true);
if (is_string($statistics_pie_include_remaining)) {
$statistics_pie_include_remaining = $statistics_pie_include_remaining == 'true' ? true : false;
}
$statistics_pie_ignore_null = $this->request->getQuery('statistics_ignore_null', true);
if (is_string($statistics_pie_ignore_null)) {
$statistics_pie_ignore_null = $statistics_pie_ignore_null == 'true' ? true : false;
}
$seedPiechart = 's-' . mt_rand();
foreach ($statistics['usage'] as $scope => $graphData) {
$pieChart = $this->element('charts/pie', [
'data' => $graphData,
'chartOptions' => [
'chart' => [
'height' => '80px',
'sparkline' => [
'enabled' => true,
]
],
'plotOptions' => [
'pie' => [
'customScale' => 0.9,
]
],
],
]);
$titleHtml = sprintf(
'<span class="text-nowrap">%s%s</span>',
Inflector::Pluralize(Inflector::Humanize(h($scope))),
$this->Bootstrap->button([
'variant' => 'link',
'icon' => 'cog',
'size' => 'xs',
'nodeType' => 'a',
'onclick' => '',
'class' => ['btn-statistics-pie-configurator-' . $seedPiechart],
'params' => [
'data-bs-toggle' => 'popover',
]
])
);
$panelHtml = sprintf(
'<div class="d-flex flex-row">%s%s</div>',
$titleHtml,
$pieChart
);
$statPie = $this->Bootstrap->card([
'variant' => 'secondary',
'bodyHTML' => $panelHtml,
'bodyClass' => 'py-1 px-2',
'class' => ['shadow-sm', 'h-100']
]);
$statisticsHtml .= sprintf('<div class="col-sm-6 col-md-5 col-lg-4 col-xl-3 mb-1" style="height: 90px;">%s</div>', $statPie);
}
?>
<?= $statisticsHtml ?>
<script>
$(document).ready(function() {
let popoverTriggerList = [].slice.call(document.querySelectorAll('.btn-statistics-pie-configurator-<?= $seedPiechart ?>'))
let popoverList = popoverTriggerList.map(function(popoverTriggerEl) {
const popover = new bootstrap.Popover(popoverTriggerEl, {
container: 'body',
html: true,
sanitize: false,
title: () => {
return '<div class="d-flex align-items-center justify-content-between"> \
<?= __('Configure chart') ?> \
<button type = "button" class="btn-xs btn-close" aria-label="Close"></button> \
</div>'
},
content: () => {
return '<div class="popover-form-container"> \
<div class="input-group flex-nowrap"> \
<span class="input-group-text"><?= __('Amount') ?></span> \
<input type="number" min="1" class="form-control entry-amount" placeholder="7" aria-label="<?= __('Days') ?>" value="<?= h($statistics_pie_amount) ?>"> \
</div> \
<div class="form-check"> \
<input class="form-check-input cb-include-remaining" type="checkbox" value="" id="checkbox-include-remaining" <?= $statistics_pie_include_remaining ? 'checked' : '' ?>> \
<label class="form-check-label" for="checkbox-include-remaining"> \
<?= __('Merge skipped entries') ?> \
</label> \
</div> \
<div class="form-check"> \
<input class="form-check-input cb-ignore-null" type="checkbox" value="" id="checkbox-ignore-null" <?= $statistics_pie_ignore_null ? 'checked' : '' ?>> \
<label class="form-check-label" for="checkbox-ignore-null"> \
<?= __('Ignore NULL values') ?> \
</label> \
</div> \
<button class="btn btn-primary" type="button" onclick="statisticsPieConfigurationRedirect(this)"><?= __('Update chart') ?> </button> \
</div>'
}
})
popoverTriggerEl.addEventListener('shown.bs.popover', function(evt) {
const popover = bootstrap.Popover.getInstance(this)
const popoverEl = popover.getTipElement()
const popoverBtnCloseEl = popoverEl.querySelector('.popover-header button.btn-close')
popoverBtnCloseEl.addEventListener('click', function() {
popover.hide()
})
})
return popover
})
let popoverCloseBtnlist = [].slice.call(document.querySelectorAll('.popover .popover-header button.btn-close'))
popoverCloseBtnlist.map(function(popoverBtnCloseEl) {
return popoverBtnCloseEl.addEventListener('click', function() {
const popoverEl = this.closest('.popover')
const popover = bootstrap.Popover.getInstance(popoverEl)
if (popover !== null) {
popover.hide()
}
})
})
})
function statisticsPieConfigurationRedirect(clicked) {
const endpoint = window.location.pathname
const search = window.location.search
let entryAmount = $(clicked).closest('.popover-form-container').find('input.entry-amount').val()
let includeRemaining = $(clicked).closest('.popover-form-container').find('input.cb-include-remaining').prop('checked')
let ignoreNull = $(clicked).closest('.popover-form-container').find('input.cb-ignore-null').prop('checked')
entryAmount = entryAmount !== undefined ? entryAmount : 5
includeRemaining = includeRemaining !== undefined ? includeRemaining : true
ignoreNull = ignoreNull !== undefined ? ignoreNull : true
const searchParams = new URLSearchParams(window.location.search)
searchParams.set('statistics_entry_amount', entryAmount);
searchParams.set('statistics_include_remainging', includeRemaining);
searchParams.set('statistics_ignore_null', ignoreNull);
const url = endpoint + '?' + searchParams
window.location = url
}
</script>