296 lines
11 KiB
PHP
Executable File
296 lines
11 KiB
PHP
Executable File
<div>
|
|
{{-- Proxima implementacao --}}
|
|
{{-- <div class="row">
|
|
<div class="col-sm">
|
|
<button wire:click="showPercentageElementalTasks">Grafico em porcentagem</button>
|
|
</div>
|
|
</div> --}}
|
|
|
|
{{-- Botao de fazer reload ao grafico sem recarregar a pagina , Atualmente nao funciona --}}
|
|
{{-- <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">
|
|
<div class="col-sm d-flex justify-content-end">
|
|
<button class="btn btn-primary mr-2 mb-2" wire:click="showPercentageEquipments">
|
|
<i class="fa-solid fa-percent"></i>
|
|
</button>
|
|
<button class="btn btn-primary mr-2 mb-2" wire:click="updateTimeGrafics">
|
|
<i class=" fa fa-bar-chart fa-rotate-270"></i>
|
|
</button>
|
|
<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-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> --}}
|