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>
<!-- Monitoramento em Tempo Real -->
{#if statusSistemaQuery.data}
{#if statusSistemaQuery?.data}
{@const status = statusSistemaQuery.data}
{@const atividade = atividadeBDQuery.data || {
{@const atividade = atividadeBDQuery?.data || {
historico: Array.from({ length: 30 }, () => ({ entradas: 0, saidas: 0 }))
}}
{@const distribuicao = distribuicaoQuery.data || {
{@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))
)}
{@const maxAtividade = atividade.historico && atividade.historico.length > 0
? Math.max(1, ...atividade.historico.map((p) => Math.max(p.entradas || 0, p.saidas || 0)))
: 1}
<div class="mb-6">
<div class="mb-4 flex items-center gap-3">
@@ -494,27 +493,29 @@
<!-- Barras de atividade -->
<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">
<!-- Entradas (verde) -->
<div
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;"
title="Entradas: {ponto.entradas}"
style="height: {(entradas / maxAtividade) * 100}%; min-height: 2px;"
title="Entradas: {entradas}"
></div>
<!-- Saídas (vermelho) -->
<div
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;"
title="Saídas: {ponto.saidas}"
style="height: {(saidas / maxAtividade) * 100}%; min-height: 2px;"
title="Saídas: {saidas}"
></div>
<!-- Tooltip no hover -->
<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"
>
<div>↑ {ponto.entradas} entradas</div>
<div>↓ {ponto.saidas} saídas</div>
<div>↑ {entradas} entradas</div>
<div>↓ {saidas} saídas</div>
</div>
</div>
{/each}
@@ -559,23 +560,23 @@
<div>
<div class="mb-1 flex justify-between text-sm">
<span>Queries (Leituras)</span>
<span class="text-primary font-bold">{distribuicao.queries}</span>
<span class="text-primary font-bold">{distribuicao?.queries ?? 0}</span>
</div>
<progress
class="progress progress-primary w-full"
value={distribuicao.queries}
max={Math.max(distribuicao.queries + distribuicao.mutations, 1)}
value={distribuicao?.queries ?? 0}
max={Math.max((distribuicao?.queries ?? 0) + (distribuicao?.mutations ?? 0), 1)}
></progress>
</div>
<div>
<div class="mb-1 flex justify-between text-sm">
<span>Mutations (Escritas)</span>
<span class="text-secondary font-bold">{distribuicao.mutations}</span>
<span class="text-secondary font-bold">{distribuicao?.mutations ?? 0}</span>
</div>
<progress
class="progress progress-secondary w-full"
value={distribuicao.mutations}
max={Math.max(distribuicao.queries + distribuicao.mutations, 1)}
value={distribuicao?.mutations ?? 0}
max={Math.max((distribuicao?.queries ?? 0) + (distribuicao?.mutations ?? 0), 1)}
></progress>
</div>
</div>
@@ -589,23 +590,23 @@
<div>
<div class="mb-1 flex justify-between text-sm">
<span>Leituras</span>
<span class="text-info font-bold">{distribuicao.leituras}</span>
<span class="text-info font-bold">{distribuicao?.leituras ?? 0}</span>
</div>
<progress
class="progress progress-info w-full"
value={distribuicao.leituras}
max={Math.max(distribuicao.leituras + distribuicao.escritas, 1)}
value={distribuicao?.leituras ?? 0}
max={Math.max((distribuicao?.leituras ?? 0) + (distribuicao?.escritas ?? 0), 1)}
></progress>
</div>
<div>
<div class="mb-1 flex justify-between text-sm">
<span>Escritas</span>
<span class="text-warning font-bold">{distribuicao.escritas}</span>
<span class="text-warning font-bold">{distribuicao?.escritas ?? 0}</span>
</div>
<progress
class="progress progress-warning w-full"
value={distribuicao.escritas}
max={Math.max(distribuicao.leituras + distribuicao.escritas, 1)}
value={distribuicao?.escritas ?? 0}
max={Math.max((distribuicao?.leituras ?? 0) + (distribuicao?.escritas ?? 0), 1)}
></progress>
</div>
</div>