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

fix: add optional chaining and default values to prevent errors in dashboard page data rendering

Browse Source
This commit is contained in:
deyvisonwanderley
2025-12-06 09:55:46 -03:00
parent 14127a7977
commit 1ceef73847
1 changed files with 27 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -299,21 +299,20 @@
</div> </div>
<!-- Monitoramento em Tempo Real --> <!-- Monitoramento em Tempo Real -->
{#if statusSistemaQuery.data} {#if statusSistemaQuery?.data}
{@const status = statusSistemaQuery.data} {@const status = statusSistemaQuery.data}
{@const atividade = atividadeBDQuery.data || { {@const atividade = atividadeBDQuery?.data || {
historico: Array.from({ length: 30 }, () => ({ entradas: 0, saidas: 0 })) historico: Array.from({ length: 30 }, () => ({ entradas: 0, saidas: 0 }))
}} }}
{@const distribuicao = distribuicaoQuery.data || { {@const distribuicao = distribuicaoQuery?.data || {
queries: 0, queries: 0,
mutations: 0, mutations: 0,
leituras: 0, leituras: 0,
escritas: 0 escritas: 0
}} }}
{@const maxAtividade = Math.max( {@const maxAtividade = atividade.historico && atividade.historico.length > 0
1, ? Math.max(1, ...atividade.historico.map((p) => Math.max(p.entradas || 0, p.saidas || 0)))
...atividade.historico.map((p) => Math.max(p.entradas, p.saidas)) : 1}
)}
<div class="mb-6"> <div class="mb-6">
<div class="mb-4 flex items-center gap-3"> <div class="mb-4 flex items-center gap-3">
@@ -494,27 +493,29 @@
<!-- Barras de atividade --> <!-- Barras de atividade -->
<div class="flex h-full items-end justify-around gap-1"> <div class="flex h-full items-end justify-around gap-1">
{#each atividade.historico as ponto, idx (idx)} {#each atividade.historico || [] as ponto, idx (idx)}
{@const entradas = ponto?.entradas || 0}
{@const saidas = ponto?.saidas || 0}
<div class="group relative flex h-full flex-1 items-end gap-0.5"> <div class="group relative flex h-full flex-1 items-end gap-0.5">
<!-- Entradas (verde) --> <!-- Entradas (verde) -->
<div <div
class="from-success to-success/70 flex-1 rounded-t bg-linear-to-t transition-all duration-300 hover:scale-110" class="from-success to-success/70 flex-1 rounded-t bg-linear-to-t transition-all duration-300 hover:scale-110"
style="height: {(ponto.entradas / maxAtividade) * 100}%; min-height: 2px;" style="height: {(entradas / maxAtividade) * 100}%; min-height: 2px;"
title="Entradas: {ponto.entradas}" title="Entradas: {entradas}"
></div> ></div>
<!-- Saídas (vermelho) --> <!-- Saídas (vermelho) -->
<div <div
class="from-error to-error/70 flex-1 rounded-t bg-linear-to-t transition-all duration-300 hover:scale-110" class="from-error to-error/70 flex-1 rounded-t bg-linear-to-t transition-all duration-300 hover:scale-110"
style="height: {(ponto.saidas / maxAtividade) * 100}%; min-height: 2px;" style="height: {(saidas / maxAtividade) * 100}%; min-height: 2px;"
title="Saídas: {ponto.saidas}" title="Saídas: {saidas}"
></div> ></div>
<!-- Tooltip no hover --> <!-- Tooltip no hover -->
<div <div
class="bg-base-300 text-base-content absolute bottom-full left-1/2 z-10 mb-2 -translate-x-1/2 rounded px-2 py-1 text-xs whitespace-nowrap opacity-0 shadow-lg transition-opacity group-hover:opacity-100" class="bg-base-300 text-base-content absolute bottom-full left-1/2 z-10 mb-2 -translate-x-1/2 rounded px-2 py-1 text-xs whitespace-nowrap opacity-0 shadow-lg transition-opacity group-hover:opacity-100"
> >
<div>↑ {ponto.entradas} entradas</div> <div>↑ {entradas} entradas</div>
<div>↓ {ponto.saidas} saídas</div> <div>↓ {saidas} saídas</div>
</div> </div>
</div> </div>
{/each} {/each}
@@ -559,23 +560,23 @@
<div> <div>
<div class="mb-1 flex justify-between text-sm"> <div class="mb-1 flex justify-between text-sm">
<span>Queries (Leituras)</span> <span>Queries (Leituras)</span>
<span class="text-primary font-bold">{distribuicao.queries}</span> <span class="text-primary font-bold">{distribuicao?.queries ?? 0}</span>
</div> </div>
<progress <progress
class="progress progress-primary w-full" class="progress progress-primary w-full"
value={distribuicao.queries} value={distribuicao?.queries ?? 0}
max={Math.max(distribuicao.queries + distribuicao.mutations, 1)} max={Math.max((distribuicao?.queries ?? 0) + (distribuicao?.mutations ?? 0), 1)}
></progress> ></progress>
</div> </div>
<div> <div>
<div class="mb-1 flex justify-between text-sm"> <div class="mb-1 flex justify-between text-sm">
<span>Mutations (Escritas)</span> <span>Mutations (Escritas)</span>
<span class="text-secondary font-bold">{distribuicao.mutations}</span> <span class="text-secondary font-bold">{distribuicao?.mutations ?? 0}</span>
</div> </div>
<progress <progress
class="progress progress-secondary w-full" class="progress progress-secondary w-full"
value={distribuicao.mutations} value={distribuicao?.mutations ?? 0}
max={Math.max(distribuicao.queries + distribuicao.mutations, 1)} max={Math.max((distribuicao?.queries ?? 0) + (distribuicao?.mutations ?? 0), 1)}
></progress> ></progress>
</div> </div>
</div> </div>
@@ -589,23 +590,23 @@
<div> <div>
<div class="mb-1 flex justify-between text-sm"> <div class="mb-1 flex justify-between text-sm">
<span>Leituras</span> <span>Leituras</span>
<span class="text-info font-bold">{distribuicao.leituras}</span> <span class="text-info font-bold">{distribuicao?.leituras ?? 0}</span>
</div> </div>
<progress <progress
class="progress progress-info w-full" class="progress progress-info w-full"
value={distribuicao.leituras} value={distribuicao?.leituras ?? 0}
max={Math.max(distribuicao.leituras + distribuicao.escritas, 1)} max={Math.max((distribuicao?.leituras ?? 0) + (distribuicao?.escritas ?? 0), 1)}
></progress> ></progress>
</div> </div>
<div> <div>
<div class="mb-1 flex justify-between text-sm"> <div class="mb-1 flex justify-between text-sm">
<span>Escritas</span> <span>Escritas</span>
<span class="text-warning font-bold">{distribuicao.escritas}</span> <span class="text-warning font-bold">{distribuicao?.escritas ?? 0}</span>
</div> </div>
<progress <progress
class="progress progress-warning w-full" class="progress progress-warning w-full"
value={distribuicao.escritas} value={distribuicao?.escritas ?? 0}
max={Math.max(distribuicao.leituras + distribuicao.escritas, 1)} max={Math.max((distribuicao?.leituras ?? 0) + (distribuicao?.escritas ?? 0), 1)}
></progress> ></progress>
</div> </div>
</div> </div>