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

style: use CartesianGrid for horizontal lines aligned with Y-axis ticks

Browse Source 
Replace the CSS overlay with Recharts CartesianGrid (horizontal only)
so lines align perfectly with the Y-axis values.
This commit is contained in:
Usman Baig
2026-03-13 13:08:28 +01:00
parent 453a596eaf
commit 969887cc67
1 changed files with 9 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
components/dashboard/Chart.tsx
View File

@@ -2,7 +2,7 @@
import { useState, useMemo, useRef, useCallback, useEffect } from 'react' import { useState, useMemo, useRef, useCallback, useEffect } from 'react'
import { useTheme } from '@ciphera-net/ui' import { useTheme } from '@ciphera-net/ui'
import { Line, LineChart, XAxis, YAxis, ReferenceLine } from 'recharts' import { CartesianGrid, Line, LineChart, XAxis, YAxis, ReferenceLine } from 'recharts'
import { ChartContainer, ChartTooltip, type ChartConfig } from '@/components/ui/line-charts-6' import { ChartContainer, ChartTooltip, type ChartConfig } from '@/components/ui/line-charts-6'
import { Card, CardContent, CardHeader } from '@/components/ui/card' import { Card, CardContent, CardHeader } from '@/components/ui/card'
import { formatNumber, formatDuration, formatUpdatedAgo, DatePicker } from '@ciphera-net/ui' import { formatNumber, formatDuration, formatUpdatedAgo, DatePicker } from '@ciphera-net/ui'
@@ -384,17 +384,7 @@ export default function Chart({
</div> </div>
</CardHeader> </CardHeader>
<CardContent className="px-2.5 py-4 relative overflow-hidden"> <CardContent className="px-2.5 py-4">
{/* Subtle horizontal lines background */}
<div
className="pointer-events-none absolute inset-0"
style={{
backgroundImage: 'repeating-linear-gradient(to bottom, transparent, transparent 39px, var(--chart-grid) 39px, var(--chart-grid) 40px)',
opacity: 0.5,
maskImage: 'linear-gradient(to bottom, transparent, black 15%, black 85%, transparent)',
WebkitMaskImage: 'linear-gradient(to bottom, transparent, black 15%, black 85%, transparent)',
}}
/>
{/* Toolbar */} {/* Toolbar */}
<div className="flex items-center justify-between gap-3 mb-4 px-2"> <div className="flex items-center justify-between gap-3 mb-4 px-2">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
@@ -485,6 +475,13 @@ export default function Chart({
</filter> </filter>
</defs> </defs>
<CartesianGrid
horizontal={true}
vertical={false}
stroke="var(--chart-grid)"
strokeOpacity={0.7}
/>
<XAxis <XAxis
dataKey="date" dataKey="date"
axisLine={false} axisLine={false}