SESP/sgse-app
2
0
Fork 0
Code Issues 3 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

refactor: enhance Sidebar and dashboard components for improved UI and functionality

Browse Source 
- Updated the Sidebar component to change the support link and improve modal styling for better user experience.
- Refined the dashboard page by optimizing data handling for real-time monitoring, ensuring fallback values for activity and distribution data.
- Improved progress bar calculations to prevent division by zero errors, enhancing stability and user feedback.
- Adjusted layout and styling for consistency and better visual appeal across components.
This commit is contained in:
deyvisonwanderley
2025-11-18 03:31:54 -03:00
parent 71550874ce
commit 3420872a37
2 changed files with 46 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
apps/web/src/routes/(dashboard)/+page.svelte
View File

@@ -373,10 +373,16 @@
</div>
<!-- Monitoramento em Tempo Real -->
{#if statusSistemaQuery.data && atividadeBDQuery.data && distribuicaoQuery.data}
{#if statusSistemaQuery.data}
{@const status = statusSistemaQuery.data}
{@const atividade = atividadeBDQuery.data}
{@const distribuicao = distribuicaoQuery.data}
{@const atividade = atividadeBDQuery.data || { historico: Array.from({ length: 30 }, () => ({ entradas: 0, saidas: 0 })) }}
{@const distribuicao = distribuicaoQuery.data || { queries: 0, mutations: 0, leituras: 0, escritas: 0 }}
{@const maxAtividade = Math.max(
1,
...atividade.historico.map((p) =>
Math.max(p.entradas, p.saidas),
),
)}
<div class="mb-6">
<div class="flex items-center gap-3 mb-4">
@@ -618,26 +624,17 @@
<!-- Barras de atividade -->
<div class="flex items-end justify-around h-full gap-1">
{#each atividade.historico as ponto, idx}
{@const maxAtividade = Math.max(
...atividade.historico.map((p) =>
Math.max(p.entradas, p.saidas),
),
)}
<div class="flex-1 flex items-end gap-0.5 h-full group">
<div class="flex-1 flex items-end gap-0.5 h-full group relative">
<!-- Entradas (verde) -->
<div
class="flex-1 bg-linear-to-t from-success to-success/70 rounded-t transition-all duration-300 hover:scale-110"
style="height: {(ponto.entradas /
Math.max(maxAtividade, 1)) *
100}%; min-height: 2px;"
style="height: {(ponto.entradas / maxAtividade) * 100}%; min-height: 2px;"
title="Entradas: {ponto.entradas}"
></div>
<!-- Saídas (vermelho) -->
<div
class="flex-1 bg-linear-to-t from-error to-error/70 rounded-t transition-all duration-300 hover:scale-110"
style="height: {(ponto.saidas /
Math.max(maxAtividade, 1)) *
100}%; min-height: 2px;"
style="height: {(ponto.saidas / maxAtividade) * 100}%; min-height: 2px;"
title="Saídas: {ponto.saidas}"
></div>
@@ -706,7 +703,7 @@
<progress
class="progress progress-primary w-full"
value={distribuicao.queries}
max={distribuicao.queries + distribuicao.mutations}
max={Math.max(distribuicao.queries + distribuicao.mutations, 1)}
></progress>
</div>
<div>
@@ -719,7 +716,7 @@
<progress
class="progress progress-secondary w-full"
value={distribuicao.mutations}
max={distribuicao.queries + distribuicao.mutations}
max={Math.max(distribuicao.queries + distribuicao.mutations, 1)}
></progress>
</div>
</div>
@@ -742,7 +739,7 @@
<progress
class="progress progress-info w-full"
value={distribuicao.leituras}
max={distribuicao.leituras + distribuicao.escritas}
max={Math.max(distribuicao.leituras + distribuicao.escritas, 1)}
></progress>
</div>
<div>
@@ -755,7 +752,7 @@
<progress
class="progress progress-warning w-full"
value={distribuicao.escritas}
max={distribuicao.leituras + distribuicao.escritas}
max={Math.max(distribuicao.leituras + distribuicao.escritas, 1)}
></progress>
</div>
</div>