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

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

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

    {{ $lastUpdated }}
    <button wire:click="updateTimeGrafics">Atualizar Gráfico</button>
</div>

<script>
    var elementalTasksCount = @json($receiveElementalTasks);

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

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

    var myPieChart2 = new Chart(grafico2, {
        type: 'bar',
        data: {
            labels: labels.map(label => label),
            datasets: [{
                data: data,
                backgroundColor: [
                    'rgba(0,80,0,0.5)', //green color
                    'rgb(9, 37, 92)', //Azul escuro ISPT
                    'rgb(0, 176, 234)', // Azull Claro ISPT
                    'rgb(5, 107, 163)', // Azul parecido 
                ],
                borderColor: [
                    'rgba(0,80,0,0.5)',
                    'rgba(255, 99, 132, 1)',
                    'rgba(54, 162, 235, 1)',
                    'rgba(255, 206, 86, 1)'
                    // ... (adicionar mais cores se necessário)
                ],
                borderWidth: 1
            }]
        },
        options: {
            animation: false,
            plugins: {
                legend: {
                    display: false
                },
                tooltip: {
                    enabled: false
                }
            }
        },
    });

    // Grafico de Script 2 
    var elementalTasksCountAll = @json($receiveElementalTasksAll);

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

    var labels = Object.keys(elementalTasksCountAll);
    var data = Object.values(elementalTasksCountAll);

    var myPieChart3 = new Chart(grafico3, {
        type: 'bar',
        data: {
            labels: labels.map(label => label),
            datasets: [{
                label: 'Total de Acções da Obra"',
                data: data,
                backgroundColor: [
                    '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 
                ],
                borderColor: [
                    'rgba(0,80,0,0.5)',
                    'rgba(255, 99, 132, 1)',
                    'rgba(54, 162, 235, 1)',
                    'rgba(255, 206, 86, 1)'
                    // ... (adicionar mais cores se necessário)
                ],
                borderWidth: 1
            }]
        },
        options: {
            animation: false,
            plugins: {
                legend: {
                    display: false
                },
                tooltip: {
                    enabled: false
                }
            }
        },
    });
</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: {
                events: [], // Desativa todos os eventos
            }
        });

        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: {
                events: [], // Desativa todos os eventos
                title: {
                    display: true, // Ativa a exibição do título
                    text: 'Total', // Define o texto do título
                    position: 'top' // Define a posição do título
                }
            }
        });
    });
</script>

{{-- Script de Gradico em porcentagem  --}}
<script>
    window.addEventListener('refreshPercentageElementalTasks', event => {



    });
</script>