Динамические виджеты статистики в контроллер админки

OctoberCms Backend list filter dynamic ajax widget

Предположим что у нас уже есть фильтры. Если нет, сначала добавляем.

Шаг 1. Добавить виджет в контроллер

Далее добавляем виджет куда-нибудь на страницу контроллера. Для этого создаем в контроллере файл _list_container.htm в папке контроллера (там где config_list.yaml) со следующим содержимым:

<div class="report-container" id="stat">
    <?= $this->makePartial('$/site21/myplugin/partials/stat.php'); ?>
</div>

<?php if ($toolbar): ?>
    <?= $toolbar->render() ?>
<?php endif ?>

<?php if ($filter): ?>
    <?= $filter->render() ?>
<?php endif ?>

<div class="row row-flush">
    <?= $list->render() ?>
</div>

В своем плагине я создал файл по пути partials/stat.php. Его содержимое будет примерно таким:

    <ul>
        <li class="item width-6">
            <div class="report-widget">
                <h5>Заголовок</h5>
                <div
                        data-control="chart-line"
                        data-time-mode="datetime"
                        data-chart-options="
                                xaxis: {
                                    mode: 'time',
                                },
                                yaxis: {
                                    min: 0,
                                },
                                series: {
                                    lines: {show: true},
                                    points: {show: true},
                                },
                                legend: {
                                    show: false
                                }
                            "
                        class="height-200"
                >
                        <span
                                data-chart="dataset"
                                data-set-color="#34495e"
                                data-set-data="<?=$items ?>"
                                data-set-label="Заголовок"
                        ></span>
                </div>
            </div>
        </li>
        <li class="item width-6">
            <!-- еще виджеты при необходимости-->
        </li>
    </ul>

Другие примеры фильтров можно посмотреть здесь.

Теперь чтобы при открытии страницы контроллера над списком и фильтром появился виджет с графиком chart-line нужно передать парамер $items странице. Для этого переопределяем index в своем контроллере следующим образом:

    public function index()
    {
        // Я использую разметку виджетов с dashboard, пожтому добавляю css
        $this->addCss('/modules/backend/widgets/reportcontainer/assets/css/reportcontainer.css');
        $this->pageTitle = 'Заголовок страницы';

        $this->makeLists();
        $listWidget = $this->asExtension('ListController')->listGetWidget();

        $data = $this->getStatistics($listWidget);
        $items = '';
        foreach ($data as $key => $value) {
            $items .= '[' . $key . ',' . $value. '],';
        }
        $this->vars['items'] = rtrim($items, ',');
    }
    private function getStatistics($listWidget)
    {
        $q = $listWidget->prepareQuery()->get();
        $count = $q->mapToGroups(function ($item, $key) {
                $month = Carbon::parse($item['time'])->endOfMonth()->timestamp * 1000;
                return [
                    $month => $item
                ];
            })->map(function ($group) {
                return $group->count();  
            });

        return $count;
    }

Колонку time нужно переименовать под свой случай. Например created_at.

Шаг 2. Обновляем график со статистики при изменении фильтра.

Теперь у нас появился общий график. Но нужно его оживить при изменении фильтров.

В свой контроллер добавим действие на событие изменения фильтров:

    public function listFilterExtendScopes($filter)
    {
        $filter->bindEvent('filter.update', function ()  {
            $listWidget = $this->asExtension('ListController')->listGetWidget();
            $data = $this->getStatistics($listWidget);
            $items = '';
            foreach ($data as $key => $value) {
                $items .= '[' . $key . ',' . $value. '],';
            }
            $this->vars['items'] = rtrim($items, ',');
            return [
                '#stat' => $this->makePartial('$/site21/myplugin/partials/stat.php'),
            ];
        });
    }

Теперь у нас обновляется наш partial stat.php в наш id stat.

Опубликовано 5 мая 2024 г. в категориях: Winter CMS October CMS

Если Вам необходимо внедрить данную разработку на свой проект, свяжитесь со мной, обсудим цену и срок.

Связаться со мной