phughk/ottyl
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Docs, ticks, working app

Browse Source
This commit is contained in:
Hugh Kaznowski
2026-09-05 15:05:39 +01:00
parent 41362aa3d8
commit 51e577f01e
41 changed files with 1039 additions and 683 deletions
Download Patch File Download Diff File Expand all files Collapse all files
webapp/src/components/PanelChart.tsx
+12 -12
View File
@@ -77,7 +77,7 @@ function sumValue(series: PromqlSeries): number {
export function PanelChart({ series, chartType }: { series: PromqlSeries[]; chartType: ChartType }) {
if (series.length === 0) {
return <div className="flex h-48 items-center justify-center text-xs text-neutral-600">No data in range.</div>
return <div className="flex h-48 items-center justify-center text-xs text-text-faint">No data in range.</div>
}
if (chartType === 'line') {
@@ -85,17 +85,17 @@ export function PanelChart({ series, chartType }: { series: PromqlSeries[]; char
return (
<ResponsiveContainer width="100%" height={220}>
<LineChart data={rows} margin={{ top: 8, right: 16, left: 0, bottom: 0 }}>
<CartesianGrid strokeDasharray="3 3" stroke="#262626" />
<CartesianGrid strokeDasharray="3 3" stroke="var(--c-border)" />
<XAxis
dataKey="timestamp_ms"
tickFormatter={formatTimestamp}
stroke="#737373"
tick={{ fontSize: 11, fill: '#a3a3a3' }}
stroke="var(--c-text-subtle)"
tick={{ fontSize: 11, fill: 'var(--c-text-muted)' }}
/>
<YAxis stroke="#737373" tick={{ fontSize: 11, fill: '#a3a3a3' }} width={48} />
<YAxis stroke="var(--c-text-subtle)" tick={{ fontSize: 11, fill: 'var(--c-text-muted)' }} width={48} />
<Tooltip
labelFormatter={(ts) => formatTimestamp(Number(ts))}
contentStyle={{ background: '#171717', border: '1px solid #404040', fontSize: 12 }}
contentStyle={{ background: 'var(--c-surface-1)', border: '1px solid var(--c-border-soft)', fontSize: 12 }}
/>
<Legend wrapperStyle={{ fontSize: 11 }} />
{keys.map((key, i) => (
@@ -119,10 +119,10 @@ export function PanelChart({ series, chartType }: { series: PromqlSeries[]; char
return (
<ResponsiveContainer width="100%" height={220}>
<BarChart data={rows} margin={{ top: 8, right: 16, left: 0, bottom: 0 }}>
<CartesianGrid strokeDasharray="3 3" stroke="#262626" />
<XAxis dataKey="name" stroke="#737373" tick={{ fontSize: 11, fill: '#a3a3a3' }} />
<YAxis stroke="#737373" tick={{ fontSize: 11, fill: '#a3a3a3' }} width={48} />
<Tooltip contentStyle={{ background: '#171717', border: '1px solid #404040', fontSize: 12 }} />
<CartesianGrid strokeDasharray="3 3" stroke="var(--c-border)" />
<XAxis dataKey="name" stroke="var(--c-text-subtle)" tick={{ fontSize: 11, fill: 'var(--c-text-muted)' }} />
<YAxis stroke="var(--c-text-subtle)" tick={{ fontSize: 11, fill: 'var(--c-text-muted)' }} width={48} />
<Tooltip contentStyle={{ background: 'var(--c-surface-1)', border: '1px solid var(--c-border-soft)', fontSize: 12 }} />
<Bar dataKey="value" isAnimationActive={false}>
{rows.map((_, i) => (
<Cell key={i} fill={COLORS[i % COLORS.length]} />
@@ -137,7 +137,7 @@ export function PanelChart({ series, chartType }: { series: PromqlSeries[]; char
const rows = series.map((s) => ({ name: seriesLabel(s.labels), value: sumValue(s) }))
const total = rows.reduce((sum, r) => sum + r.value, 0)
if (total === 0) {
return <div className="flex h-48 items-center justify-center text-xs text-neutral-600">No non-zero values in range.</div>
return <div className="flex h-48 items-center justify-center text-xs text-text-faint">No non-zero values in range.</div>
}
return (
<ResponsiveContainer width="100%" height={220}>
@@ -152,7 +152,7 @@ export function PanelChart({ series, chartType }: { series: PromqlSeries[]; char
const num = typeof value === 'number' ? value : Number(value ?? 0)
return `${num} (${((num / total) * 100).toFixed(1)}%)`
}}
contentStyle={{ background: '#171717', border: '1px solid #404040', fontSize: 12 }}
contentStyle={{ background: 'var(--c-surface-1)', border: '1px solid var(--c-border-soft)', fontSize: 12 }}
/>
<Legend wrapperStyle={{ fontSize: 11 }} />
</PieChart>