cameleer/cameleer-server
1
0
Fork 0
Code Issues 41 Pull Requests Actions Packages Projects Releases Wiki Activity

fix: side-by-side layout for treemap and punchcard heatmaps
Some checks failed
CI / cleanup-branch (push) Has been skipped
Details
CI / build (push) Failing after 29s
Details
CI / docker (push) Has been skipped
Details
CI / deploy (push) Has been skipped
Details
CI / deploy-feature (push) Has been skipped
Details

Browse Source 
Treemap on left (3fr), two punchcards stacked on right (2fr) using
new .vizRow grid layout. Replaces full-width stacked arrangement.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
hsiegeln
2026-03-30 10:32:23 +02:00
parent 7a1625c297
commit 6aeba1fe83
3 changed files with 47 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
ui/src/pages/DashboardTab/DashboardL1.tsx
View File

@@ -448,27 +448,25 @@ export default function DashboardL1() {
</div>
)}
{/* Treemap: app volume vs SLA compliance */}
{/* Treemap + Punchcard heatmaps side by side */}
{treemapItems.length > 0 && (
<Card title="Application Volume vs SLA Compliance">
<Treemap
items={treemapItems}
width={800}
height={250}
onItemClick={(id) => navigate(`/dashboard/${id}`)}
/>
</Card>
)}
{/* Punchcard heatmaps: transactions and errors by weekday x hour */}
{(punchcardData?.length ?? 0) > 0 && (
<div className={styles.chartGrid}>
<Card title="Transaction Volume (7-day pattern)">
<PunchcardHeatmap cells={punchcardData!} mode="transactions" width={380} height={300} />
</Card>
<Card title="Error Volume (7-day pattern)">
<PunchcardHeatmap cells={punchcardData!} mode="errors" width={380} height={300} />
<div className={styles.vizRow}>
<Card title="Application Volume vs SLA Compliance">
<Treemap
items={treemapItems}
width={600}
height={300}
onItemClick={(id) => navigate(`/dashboard/${id}`)}
/>
</Card>
<div className={styles.punchcardStack}>
<Card title="Transactions (7-day pattern)">
<PunchcardHeatmap cells={punchcardData ?? []} mode="transactions" width={400} height={140} />
</Card>
<Card title="Errors (7-day pattern)">
<PunchcardHeatmap cells={punchcardData ?? []} mode="errors" width={400} height={140} />
</Card>
</div>
</div>
)}
</div>

36
ui/src/pages/DashboardTab/DashboardL2.tsx
View File

@@ -427,27 +427,25 @@ export default function DashboardL2() {
</div>
)}
{/* Treemap: route volume vs SLA compliance */}
{/* Treemap + Punchcard heatmaps side by side */}
{treemapItems.length > 0 && (
<Card title="Route Volume vs SLA Compliance">
<Treemap
items={treemapItems}
width={800}
height={250}
onItemClick={(id) => navigate(`/dashboard/${appId}/${id}`)}
/>
</Card>
)}
{/* Punchcard heatmaps: transactions and errors by weekday x hour */}
{(punchcardData?.length ?? 0) > 0 && (
<div className={styles.chartGrid}>
<Card title="Transaction Volume (7-day pattern)">
<PunchcardHeatmap cells={punchcardData!} mode="transactions" width={380} height={300} />
</Card>
<Card title="Error Volume (7-day pattern)">
<PunchcardHeatmap cells={punchcardData!} mode="errors" width={380} height={300} />
<div className={styles.vizRow}>
<Card title="Route Volume vs SLA Compliance">
<Treemap
items={treemapItems}
width={600}
height={300}
onItemClick={(id) => navigate(`/dashboard/${appId}/${id}`)}
/>
</Card>
<div className={styles.punchcardStack}>
<Card title="Transactions (7-day pattern)">
<PunchcardHeatmap cells={punchcardData ?? []} mode="transactions" width={400} height={140} />
</Card>
<Card title="Errors (7-day pattern)">
<PunchcardHeatmap cells={punchcardData ?? []} mode="errors" width={400} height={140} />
</Card>
</div>
</div>
)}
</div>

13
ui/src/pages/DashboardTab/DashboardTab.module.css
View File

@@ -123,6 +123,19 @@
width: 100%;
}
/* Visualization row: treemap left (wider) + punchcards right (stacked) */
.vizRow {
display: grid;
grid-template-columns: 3fr 2fr;
gap: 16px;
}
.punchcardStack {
display: flex;
flex-direction: column;
gap: 16px;
}
/* Errors section */
.errorsSection {
background: var(--bg-surface);