maxamundsen/kjol
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update charts to include titles and legends

Browse Source
This commit is contained in:
Max Amundsen
2026-07-16 16:26:06 -04:00
parent 81f0c0624e
commit 530fdf6f75
4 changed files with 203 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
go/cmd/kjol-website/frontend/src/pages/Components.tsx
View File

@@ -1419,16 +1419,16 @@ function Charts() {
<Panel title="Grouped bars, a smooth area, a two-line series, and a donut — from one data set">
<div class="grid gap-6 lg:grid-cols-12">
<div class="lg:col-span-7">
<Chart kind="bar" labels={CHART_DAYS} series={[requests(), errors()]} height={260} threeD={threeD()} />
<Chart kind="bar" title="Requests & errors this week" labels={CHART_DAYS} series={[requests(), errors()]} height={260} threeD={threeD()} />
</div>
<div class="lg:col-span-5">
<Chart kind="donut" labels={pieLabels} series={[pieData()]} height={260} threeD={threeD()} />
<Chart kind="donut" title="Traffic by source" labels={pieLabels} series={[pieData()]} height={260} threeD={threeD()} />
</div>
<div class="lg:col-span-7">
<Chart kind="area" curve="smooth" labels={CHART_DAYS} series={[requests()]} height={220} />
<Chart kind="area" curve="smooth" title="Requests, smoothed" labels={CHART_DAYS} series={[requests()]} height={220} />
</div>
<div class="lg:col-span-5">
<Chart kind="line" labels={CHART_DAYS} series={[requests(), errors()]} height={220} />
<Chart kind="line" title="Requests & errors" labels={CHART_DAYS} series={[requests(), errors()]} height={220} />
</div>
</div>
<div class="mt-4 flex items-center gap-3">
@@ -1439,8 +1439,10 @@ function Charts() {
{threeD() ? "Flat" : "3D"}
</ButtonUI>
<span class="text-xs text-ink-muted">
The one <code class="font-mono">threeD</code> prop extrudes the bars and tilts the donut
(line and area stay flat — depth just reads as noise on a curve).
Each chart carries a <code class="font-mono">title</code>; a multi-series chart also draws a
legend. Click a legend key — say <em>Errors</em> or a donut slice — to hide it, and the scale
and marks recompute from what's left. The <code class="font-mono">threeD</code> prop extrudes
the bars and tilts the donut (line and area stay flat — depth reads as noise on a curve).
</span>
</div>
</Panel>
@@ -1450,8 +1452,10 @@ function Charts() {
<code class="font-mono">"line" | "area" | "bar" | "pie" | "donut"</code> — and{" "}
<code class="font-mono">stacked</code>, <code class="font-mono">horizontal</code>,{" "}
<code class="font-mono">curve</code>, <code class="font-mono">threeD</code>,{" "}
<code class="font-mono">palette</code> and <code class="font-mono">valueFormat</code> refine it.
The width is measured from the container, so a chart fills whatever column you give it.
<code class="font-mono">title</code>, <code class="font-mono">palette</code> and{" "}
<code class="font-mono">valueFormat</code> refine it. The legend it draws for a multi-series or
pie/donut chart is interactive — clicking a key toggles that series or slice. The width is measured
from the container, so a chart fills whatever column you give it.
</Prose>
<Panel title="Horizontal bars, and stacked — the same kind, transposed and layered">