chg: [element:widget] Added support of condensed UI for highlight-panel

This could be later on refactored to be formed from smaller views

templates/element/widgets/highlight-panel.php

@@ -1,64 +1,123 @@
 <?php
-// debug($timeline);
+$seed = 's-' . mt_rand();
-// $chartData = $timeline['modified']['timeline'];
 $variationIcon = '';
 $variationClass = '';
-if ($variation == 0) {
+if (!empty($variation)) {
-    $variationIcon = $this->FontAwesome->getClass('minus');
+    if ($variation == 0) {
-} elseif ($variation > 0) {
+        $variationIcon = $this->FontAwesome->getClass('minus');
-    $variationIcon = 'trends-arrow-up-white fs-6';
+    } elseif ($variation > 0) {
-    $variationClass = 'bg-success';
+        $variationIcon = 'trends-arrow-up-white fs-6';
-} else {
+        $variationClass = 'bg-success';
-    $variationIcon = 'trends-arrow-up-white fs-6 fa-rotate-180 fa-flip-vertical';
+    } else {
-    $variationClass = 'bg-danger';
+        $variationIcon = 'trends-arrow-up-white fs-6 fa-rotate-180 fa-flip-vertical';
+        $variationClass = 'bg-danger';
+    }
 }
 
 $series = [];
+$statistics_day_number = '';
 if (!empty($timeline['created']['timeline'])) {
-    $series[0]['name'] = __('Created');
+    $statistics_day_number = $timeline['created']['days'];
-    $series[0]['type'] = 'column';
+    $i = count($series);
+    $series[$i]['name'] = __('Created');
+    $series[$i]['type'] = !empty($chartType) ? $chartType : 'column';
     foreach ($timeline['created']['timeline'] as $entry) {
-        $series[0]['data'][] = $entry['count'];
+        $series[$i]['data'][] = ['x' => $entry['time'], 'y' => $entry['count']];
     }
 }
 if (!empty($timeline['modified']['timeline'])) {
-    $series[1]['name'] = __('Modified');
+    $statistics_day_number = empty($statistics_day_number) ? $timeline['modified']['days'] : $statistics_day_number;
-    $series[1]['type'] = 'line';
+    $i = count($series);
+    $series[$i]['name'] = __('Modified');
+    $series[$i]['type'] = !empty($chartType) ? $chartType : 'line';
     foreach ($timeline['modified']['timeline'] as $entry) {
-        $series[1]['data'][] = $entry['count'];
+        $series[$i]['data'][] = ['x' => $entry['time'], 'y' => $entry['count']];
     }
 }
 
-$variationHtml = sprintf(
+$variationHtml = '';
-    '<div class="badge %s fw-bold"><span class="%s me-2 align-middle"></span>%s</div>',
+if (!empty($variation)) {
-    $variationClass,
+    $variationHtml = sprintf(
-    $variationIcon,
+        '<div class="badge %s fw-bold"><span class="%s me-2 align-middle"></span>%s</div>',
-    !empty($variation) ? h($variation) : ''
+        $variationClass,
-);
+        $variationIcon,
+        !empty($variation) ? h($variation) : ''
+    );
+}
 
 $titleHtml = isset($title) ? h($title) : ($titleHtml ?? '');
-$leftContent = sprintf('<div class="">%s</div><h2 class="my-2">%s</h2>%s',
+$leftContent = sprintf(
+    '<div class="">%s</div><%s class="%s">%s <span class="fs-8 fw-light">%s%s</span></%s>%s',
     $titleHtml,
+    (!empty($condensed) ? 'h3' : 'h2'),
+    (!empty($condensed) ? 'my-1' : 'my-2'),
     h($number ?? ''),
+    __('Past {0} days', $statistics_day_number),
+    empty($allowConfiguration) ? '' : $this->Bootstrap->button([
+        'variant' => 'link',
+        'icon' => 'cog',
+        'size' => 'xs',
+        'nodeType' => 'a',
+        'onclick' => '',
+        'class' => ['btn-statistics-days-configurator-' . $seed],
+        'params' => [
+            'data-bs-toggle' => 'popover',
+            'data-bs-title' => __('Set statistics spanning days'),
+        ]
+    ]),
+    (!empty($condensed) ? 'h3' : 'h2'),
     $variationHtml
 );
 $rightContent = sprintf('<div class="">%s</div>', $this->element('charts/bar', [
     'series' => $series,
-    'chartOptions' => [
+    'chartOptions' => array_merge(
-        // 'colors' => ['var(--bs-light)', 'var(--bs-primary)'],
+        [
-        'stroke' => [
+            'chart' => [
-          'width' => [0, 2]
+                'height' => '90px',
+            ],
+            'stroke' => [
+                'width' => [0, 2],
+                'curve' => 'smooth',
+            ],
         ],
-    ]
+        !empty($chartOptions) ? $chartOptions : []
+    )
 ]));
-
+$cardContent = sprintf('<div class="highlight-panel-container d-flex align-items-center justify-content-between %s" style="%s %s"><div class="number-container">%s</div><div class="chart-container w-50 %s">%s</div></div>', $panelClasses ?? '', (!empty($condensed) ? 'max-height: 100px' : ''), $panelStyle ?? '', $leftContent, (!empty($condensed) ? 'p-2' : ''), $rightContent);
-$cardContent = sprintf('<div class="highlight-panel-container d-flex align-items-center justify-content-between"><div class="number-container">%s</div><div class="chart-container w-50">%s</div></div>', $leftContent, $rightContent);
 
 echo $this->Bootstrap->card([
     'variant' => 'secondary',
     'bodyHTML' => $cardContent,
-    'bodyClass' => 'p-3',
+    'bodyClass' => (!empty($condensed) ? 'py-1 px-2' : 'p-3'),
-    'class' => 'grow-on-hover shadow-sm'
+    'class' => ['shadow-sm', (empty($panelNoGrow) ? 'grow-on-hover' : '')]
 ]);
 
 ?>
+
+<?php if (!empty($allowConfiguration)): ?>
+<script>
+    $(document).ready(function() {
+        let popovers = new bootstrap.Popover(document.querySelector('.btn-statistics-days-configurator-<?= $seed ?>'), {
+            container: 'body',
+            html: true,
+            sanitize: false,
+            content: () => {
+                return '<div class="input-group flex-nowrap"> \
+                            <span class="input-group-text" id="addon-wrapping-<?= $seed ?>"><?= __('Days') ?></span> \
+                            <input type="number" min="1" class="form-control" placeholder="7" aria-label="<?= __('Days') ?>" aria-describedby="addon-wrapping-<?= $seed ?>" value="<?= h($statistics_day_number) ?>"> \
+                            <button class="btn btn-primary" type="button" onclick="statisticsDaysRedirect(this)"><?= __('Get statistics') ?> </button> \
+                        </div>'
+            }
+        })
+    })
+
+    function statisticsDaysRedirect(clicked) {
+        const endpoint = window.location.pathname
+        const searchParams = new URLSearchParams({
+            statistics_days: $(clicked).closest('.input-group').find('input').val()
+        });
+        const url = endpoint + '?' + searchParams
+        window.location = url
+    }
+</script>
+<?php endif; ?>