Adding filters by Daily/Weekly/Monthly etc.

[backpack-operations]

Hello Team, I just received this on email "We are using the backpack pro charts, however,
my developers faced an issue with adding filters by Daily/Weekly/Monthly etc.
I want to filter the charts by some X period... Is there some written documentation that will help?"

[jcastroa87]

Hi @backpack-operations

There is not official documents about this, but lucky i made this early in a project.

I will explain my way:

DashboardController.php

<?php

namespace App\Http\Controllers\Admin;

use Backpack\CRUD\app\Library\Widget;
use Backpack\CRUD\app\Http\Controllers\CrudController;

class DashboardController extends CrudController
{
    public function index()
    {
        $this->widgetFilters();

        return view('dashboard');
    }

    public function widgetFilters()
    {
        Widget::add()->to('before_content')
            ->type('div')
            ->class('row')
            ->content([
                [
                    'type' => 'dashboard_filter',
                ],
            ]);
    }

    public function charts()
    {
        return Widget::add()->to('before_content')
            ->type('div')
            ->class('row')
            ->content([
                [
                    'type' => 'chart',
                    'wrapperClass' => 'col-md-12',
                    'controller' => CustomerWithMoreSamplesChartChartController::class,
                    'content' => [
                        'header' => 'Top 10 clientes con más muestras',
                    ],
                    'wrapper' => [
                        'id' => 'customer-with-more-samples-chart',
                    ],
                ],
                [
                    'type' => 'chart',
                    'wrapperClass' => 'col-md-6',
                    'controller' => SamplesByProductChartChartController::class,
                    'content' => [
                        'header' => 'Muestras por producto',
                    ],
                    'wrapper' => [
                        'id' => 'samples-by-product-chart',
                    ],
                ],
                [
                    'type' => 'chart',
                    'wrapperClass' => 'col-md-6',
                    'controller' => SamplesByObjectiveChartChartController::class,
                    'content' => [
                        'header' => 'Muestras por tipo',
                    ],
                    'wrapper' => [
                        'id' => 'samples-by-objective-chart',
                    ],
                ],
            ]);
    }

    public function scripts()
    {
        return Widget::add()->to('before_content')
            ->type('dashboard_script');
    }
}

dashboard_filter.blade.php

<div class="form-group col-md-6">
    <span>Proyecto</span>
    <select class="custom-select" id="filter-project"></select>
</div>

<div class="form-group col-md-6">
    <span>Vendedor</span>
    <select class="custom-select" id="filter-seller"></select>
</div>

@push('after_scripts')
<script>
    $(document).ready(function () {
        const projects = document.getElementById('filter-project');
        const sellers = document.getElementById('filter-seller');

        function changeProject() {
            const value = projects.value;
            const text = projects.options[projects.selectedIndex].text;

            loadSellers(value);
        }

        function changeSeller() {
            const value = sellers.value;
            const text = sellers.options[sellers.selectedIndex].text;

            //const chartRoute = ""

            console.log('Valor seleccionado:', value);
            console.log('Texto seleccionado:', text);
            //loadSellers(value);
            //Trigger charts
            //getDataAndUpdateChart(chartRoute + value, 'customer-with-more-samples-chart')
        }

        projects.addEventListener('change', changeProject);
        sellers.addEventListener('change', changeSeller);

        function loadProjects() {
            const apiUrl = "{{ url('api/project') }}";

            emptySelect(projects);

            fetch(apiUrl)
                .then(response => response.json())
                .then(payload => {
                    payload.data.forEach(item => {
                        const option = document.createElement('option');

                        option.value = item.id;
                        option.text = item.name;

                        projects.appendChild(option);
                    });

                    if (payload.length > 0) {
                        const value = projects.value;
                        const text = projects.options[projects.selectedIndex].text;

                        loadSellers(value);
                    }
                })
                .catch(error => {
                    console.error('Error al cargar los datos:', error);
                });
        }

        function loadSellers(project_id) {
            const apiUrl = "{{ url('api/seller-by-project') }}" + '/' + project_id;

            emptySelect(sellers);

            fetch(apiUrl)
                .then(response => response.json())
                .then(payload => {
                    payload.forEach(item => {
                        const option = document.createElement('option');

                        option.value = item.id;
                        option.text = item.name;

                        sellers.appendChild(option);
                    });

                    if (payload.length > 0) {
                        const value = sellers.value;
                        const text = sellers.options[sellers.selectedIndex].text;

                        //Trigger charts
                    }
                })
                .catch(error => {
                    console.error('Error al cargar los datos:', error);
                });
        }

        function emptySelect(select) {
            while (select.options.length > 0) {
                select.remove(0);
            }
        }

        loadProjects();
        //loadSellers(10);
    })
</script>
@endpush

dashboard_script.blade.php

@push('after_scripts')
<script>
    function updateChart(data, ctx) {
        console.log(data), console.log(ctx);
    }

    async function getDataAndUpdateChart(route, idChart = '') {
        let headers = {
            'Accept': 'application/json',
            'Content-Type': 'application/json'
        };

        let response = await fetch(route, {
            headers: headers,
        });

        let data = await response.json();

        let ctx = $('#' + idChart).find('canvas')[0].getContext('2d');

        updateChart(data, ctx);
    }
</script>
@endpush

So this is the basic way, from this you can start to play loading data to any chart you need.

This could be improved more, but is a start point to working with filters.

Cheers

[jcastroa87]

Due to not activity i will close the issue, but feel free to reopen or create a new one.

Cheers.