ispt4.0_laravel/resources/views/livewire/execução/tasks-dashboard.blade.php

<div>
    {{-- Proxima implementacao --}}
    {{-- <div class="row">
        <div class="col-sm">
            <button wire:click="showPercentageElementalTasks">Grafico em porcentagem</button>
        </div>
    </div> --}}

    <div class="row">
        <div class="col-sm d-flex justify-content-end">
            <button class="btn btn-primary mb-2" wire:click="updateTimeGrafics">
                <i class="fa-solid fa-arrows-rotate"></i>
            </button>
            <div
                style="font-size: 15px; color:#09255C; margin-left:4px; display: flex; align-items: center; justify-content: center; height: 50px;">
                {{ $lastUpdated }}
            </div>
        </div>
    </div>

    {{-- <div class="row text-center">
        <div class="col-sm-6">
            <h6>Quantidade Tarefas Concluidas</h6>
            <p style="color:gray; font-size:13px">Total de acções já realizadas de acordo com a tarefa.</p>
            <canvas id="myPieChart2" width="50" height="50"></canvas>
        </div>
        <div class="col-sm-6">
            <h6>Quantidade tarefas Acumuladas</h6>
            <p style="color:gray; font-size:13px"> Total de acções a serem realizadas por tarefa.</p>
            <canvas id="myPieChart3" width="50" height="50"></canvas>
        </div>
    </div>
</div> --}}


    <div class="row text-center">
        <div class="col-sm-12">
            <h6>Quantidade Tarefas</h6>
            <p style="color:gray; font-size:13px">Total de ações realizadas e a serem realizadas por tarefa.</p>
            <canvas id="stackedBarChart" width="100" height="50"></canvas>
        </div>
    </div>


    <script>
        // Suponha que as variáveis abaixo estão corretamente definidas em PHP e passadas para o JavaScript
        var elementalTasksCountAll = @json($receiveElementalTasksAll);
        var elementalTasksCount = @json($receiveElementalTasks);

        // Inicializa as variáveis para os dados concluídos e restantes
        var dataConcluidas = [];
        var dataRestantes = [];
        var labels = Object.keys(elementalTasksCountAll);

        // Preenche os arrays de dados
        labels.forEach(function(label) {
            // Se existir um valor para a label em 'elementalTasksCount', usa-o, caso contrário, usa 0
            var valorConcluido = elementalTasksCount[label] || 0;
            dataConcluidas.push(valorConcluido);

            // Calcula o valor restante
            var valorTotal = elementalTasksCountAll[label];
            dataRestantes.push(valorTotal - valorConcluido);
        });

        // Elemento canvas onde o gráfico será renderizado
        var canvas = document.getElementById('stackedBarChart').getContext('2d');

        // Destrói o gráfico anterior se ele existir
        if (window.stackedBarChartInstance) {
            window.stackedBarChartInstance.destroy();
        }

        // Cria o gráfico de barras empilhadas
        window.stackedBarChartInstance = new Chart(canvas, {
            type: 'bar',
            data: {
                labels: labels,
                datasets: [{
                    label: 'Concluídas',
                    data: dataConcluidas,
                    backgroundColor: 'rgb(9,37,92)' // Cor para as concluídas
                }, {
                    label: 'Restantes',
                    data: dataRestantes,
                    backgroundColor: 'rgba(168,168,168)' // Cor para as restantes
                }]
            },
            options: {
                scales: {
                    x: {
                        stacked: true
                    },
                    y: {
                        stacked: true
                    }
                },
                plugins: {
                    legend: {
                        display: true
                    },
                    tooltip: {
                        enabled: true
                    }
                }
            }
        });
    </script>

    <script>
        window.addEventListener('refreshData', event => {
            // Obter os dados detalhados do evento
            var data = event.detail[0];
            var elementalTasksCount = data.receiveElementalTasks;
            var elementalTasksCountAll = data.receiveElementalTasksAll;

            // Inicializa as variáveis para os dados concluídos e restantes
            var dataConcluidas = [];
            var dataRestantes = [];
            var labels = Object.keys(elementalTasksCountAll);

            // Preenche os arrays de dados
            labels.forEach(function(label) {
                // Se existir um valor para a label em 'elementalTasksCount', usa-o, caso contrário, usa 0
                var valorConcluido = elementalTasksCount[label] || 0;
                dataConcluidas.push(valorConcluido);

                // Calcula o valor restante
                var valorTotal = elementalTasksCountAll[label] || 0;
                dataRestantes.push(valorTotal - valorConcluido);
            });

            // Elemento canvas onde o gráfico será renderizado
            var canvas = document.getElementById('stackedBarChart').getContext('2d');

            // Destrói o gráfico anterior se ele existir
            if (window.stackedBarChartInstance) {
                window.stackedBarChartInstance.destroy();
            }

            // Cria o gráfico de barras empilhadas com os novos dados
            window.stackedBarChartInstance = new Chart(canvas, {
                type: 'bar',
                data: {
                    labels: labels,
                    datasets: [{
                        label: 'Concluídas',
                        data: dataConcluidas,
                        backgroundColor: 'rgb(9,37,92)' // Cor para as concluídas
                    }, {
                        label: 'Restantes',
                        data: dataRestantes,
                        backgroundColor: 'rgba(168,168,168)' // Cor para as restantes
                    }]
                },
                options: {
                    scales: {
                        x: {
                            stacked: true
                        },
                        y: {
                            stacked: true
                        }
                    },
                    plugins: {
                        legend: {
                            display: true
                        },
                        tooltip: {
                            enabled: true
                        }
                    }
                }
            });
        });
    </script>






    {{-- Scrip de atualizacao da tabela --}}
    {{-- <script>
        window.addEventListener('refreshData', event => {

            var data = event.detail[0];
            var elementalTasksCount = data.receiveElementalTasks;

            var labels = Object.keys(elementalTasksCount);
            var dataValues = Object.values(elementalTasksCount);

            var baseColors = [
                'rgb(117,210,240)', //green color
                'rgb(9, 37, 92)', //Azul escuro ISPT
                'rgb(0, 176, 234)', // Azull Claro ISPT
                'rgb(5, 107, 163)', // Azul parecido 
            ];

            // Atribuir cores aos dados de forma cíclica
            var backgroundColors = dataValues.map((_, index) => baseColors[index % baseColors.length]);

            var grafico2 = document.getElementById('myPieChart2').getContext('2d');

            window.myPieChart2 = new Chart(grafico2, {
                type: 'bar',
                data: {
                    labels: labels,
                    datasets: [{
                        data: dataValues,
                        backgroundColor: backgroundColors, // Usar o array de cores gerado
                        borderColor: backgroundColors.map(color => color.replace('0.5',
                            '1')), // Ajustar a opacidade para as bordas
                        borderWidth: 1
                    }]
                },
                options: {
                    animation: false,
                    plugins: {
                        legend: {
                            display: false
                        },
                        tooltip: {
                            enabled: false
                        }
                    }
                },
            });

            var elementalTasksCountAll = data.receiveElementalTasksAll;



            var labelsTasksCountAll = Object.keys(elementalTasksCountAll);
            var dataValuesTasksCountAll = Object.values(elementalTasksCountAll);

            var grafico3 = document.getElementById('myPieChart3').getContext('2d');

            window.myPieChart3 = new Chart(grafico3, {
                type: 'bar',
                data: {
                    labels: labelsTasksCountAll,
                    datasets: [{
                        data: dataValuesTasksCountAll,
                        backgroundColor: backgroundColors, // Usar o array de cores gerado
                        borderColor: backgroundColors.map(color => color.replace('0.5',
                            '1')), // Ajustar a opacidade para as bordas
                        borderWidth: 1
                    }]
                },
                options: {
                    animation: false,
                    plugins: {
                        legend: {
                            display: false
                        },
                        tooltip: {
                            enabled: false
                        }
                    }
                },
            });
        });
    </script> --}}

    {{-- Script de Gradico em porcentagem , para proxima implementacao e ADD+ Esforco   --}}
    {{-- <script>
    window.addEventListener('refreshPercentageElementalTasks', event => {
        var data = event.detail[0];
        // Tarefas ja feitas
        if (myPieChart2) {
            myPieChart2.destroy(); // Destrua o gráfico antigo antes de criar um novo
        }
    });
</script> --}}