ciphera-net/pulse
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 15 Wiki Activity

feat: adopt ShadCN chart primitives

Browse Source 
Add ChartContainer, ChartConfig, ChartTooltip, ChartTooltipContent
primitives ported from ShadCN's chart pattern. Refactor all 3 chart
locations (dashboard, funnels, uptime) to use CSS variable-driven
theming instead of duplicated CHART_COLORS_LIGHT/DARK objects.

- Add --chart-1 through --chart-5, --chart-grid, --chart-axis CSS vars
- Remove duplicated color objects from 3 files (-223 lines)
- Add accessibilityLayer to all charts
- Rounded bar corners on funnel chart
- Tooltips use Tailwind dark classes instead of imperative style props

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Usman Baig
2026-03-09 13:24:29 +01:00
parent 86c11dc16f
commit 3f81cb0e48
6 changed files with 497 additions and 223 deletions
Download Patch File Download Diff File Expand all files Collapse all files

137
app/sites/[id]/uptime/page.tsx
View File

@@ -29,28 +29,15 @@ import {
XAxis,
YAxis,
CartesianGrid,
Tooltip as RechartsTooltip,
ResponsiveContainer,
} from 'recharts'
import type { TooltipProps } from 'recharts'
import { ChartContainer, ChartTooltip, ChartTooltipContent, type ChartConfig } from '@/components/charts'
// * Chart theme colors (consistent with main Pulse chart)
const CHART_COLORS_LIGHT = {
border: 'var(--color-neutral-200)',
text: 'var(--color-neutral-900)',
textMuted: 'var(--color-neutral-500)',
axis: 'var(--color-neutral-400)',
tooltipBg: '#ffffff',
tooltipBorder: 'var(--color-neutral-200)',
}
const CHART_COLORS_DARK = {
border: 'var(--color-neutral-700)',
text: 'var(--color-neutral-50)',
textMuted: 'var(--color-neutral-400)',
axis: 'var(--color-neutral-500)',
tooltipBg: 'var(--color-neutral-800)',
tooltipBorder: 'var(--color-neutral-700)',
}
const responseTimeChartConfig = {
ms: {
label: 'Response Time',
color: 'var(--chart-1)',
},
} satisfies ChartConfig
// * Status color mapping
function getStatusColor(status: string): string {
@@ -285,9 +272,6 @@ function UptimeStatusBar({
// * Component: Response time chart (Recharts area chart)
function ResponseTimeChart({ checks }: { checks: UptimeCheck[] }) {
const { resolvedTheme } = useTheme()
const colors = resolvedTheme === 'dark' ? CHART_COLORS_DARK : CHART_COLORS_LIGHT
// * Prepare data in chronological order (oldest first)
const data = [...checks]
.reverse()
@@ -303,71 +287,58 @@ function ResponseTimeChart({ checks }: { checks: UptimeCheck[] }) {
if (data.length < 2) return null
const CustomTooltip = ({ active, payload, label }: TooltipProps<number, string>) => {
if (!active || !payload?.length) return null
return (
<div
className="rounded-xl px-3 py-2 text-xs shadow-lg border transition-shadow duration-300"
style={{
background: colors.tooltipBg,
borderColor: colors.tooltipBorder,
color: colors.text,
}}
>
<div className="font-medium mb-0.5">{label}</div>
<div style={{ color: 'var(--color-brand-orange)' }} className="font-semibold">
{payload[0].value}ms
</div>
</div>
)
}
return (
<div className="mt-4">
<h4 className="text-xs font-semibold text-neutral-500 dark:text-neutral-400 uppercase tracking-wider mb-3">
Response Time
</h4>
<div className="h-40">
<ResponsiveContainer width="100%" height="100%">
<AreaChart data={data} margin={{ top: 5, right: 5, left: -20, bottom: 0 }}>
<defs>
<linearGradient id="responseTimeGradient" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stopColor="var(--color-brand-orange)" stopOpacity={0.3} />
<stop offset="100%" stopColor="var(--color-brand-orange)" stopOpacity={0.02} />
</linearGradient>
</defs>
<CartesianGrid
strokeDasharray="3 3"
stroke={colors.border}
strokeOpacity={0.5}
vertical={false}
/>
<XAxis
dataKey="time"
tick={{ fontSize: 10, fill: colors.axis }}
tickLine={false}
axisLine={false}
interval="preserveStartEnd"
/>
<YAxis
tick={{ fontSize: 10, fill: colors.axis }}
tickLine={false}
axisLine={false}
tickFormatter={(v: number) => `${v}ms`}
/>
<RechartsTooltip content={<CustomTooltip />} />
<Area
type="monotone"
dataKey="ms"
stroke="var(--color-brand-orange)"
strokeWidth={2}
fill="url(#responseTimeGradient)"
dot={false}
activeDot={{ r: 4, fill: 'var(--color-brand-orange)', strokeWidth: 0 }}
/>
</AreaChart>
</ResponsiveContainer>
</div>
<ChartContainer config={responseTimeChartConfig} className="h-40">
<AreaChart accessibilityLayer data={data} margin={{ top: 5, right: 5, left: -20, bottom: 0 }}>
<defs>
<linearGradient id="responseTimeGradient" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stopColor="var(--color-ms)" stopOpacity={0.3} />
<stop offset="100%" stopColor="var(--color-ms)" stopOpacity={0.02} />
</linearGradient>
</defs>
<CartesianGrid
strokeDasharray="3 3"
stroke="var(--chart-grid)"
strokeOpacity={0.5}
vertical={false}
/>
<XAxis
dataKey="time"
tick={{ fontSize: 10, fill: 'var(--chart-axis)' }}
tickLine={false}
axisLine={false}
interval="preserveStartEnd"
/>
<YAxis
tick={{ fontSize: 10, fill: 'var(--chart-axis)' }}
tickLine={false}
axisLine={false}
tickFormatter={(v: number) => `${v}ms`}
/>
<ChartTooltip
content={
<ChartTooltipContent
className="text-xs"
labelKey="time"
formatter={(value) => <span className="font-semibold">{value}ms</span>}
/>
}
/>
<Area
type="monotone"
dataKey="ms"
stroke="var(--color-ms)"
strokeWidth={2}
fill="url(#responseTimeGradient)"
dot={false}
activeDot={{ r: 4, fill: 'var(--color-ms)', strokeWidth: 0 }}
/>
</AreaChart>
</ChartContainer>
</div>
)
}