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

Switch main dashboard chart from AreaChart to BarChart

Browse Source 
ShadCN-style bar chart with rounded corners, solid fill,
clean grid, and translucent comparison bars.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Usman Baig
2026-03-09 13:31:07 +01:00
parent 3f81cb0e48
commit ad747b1772
1 changed files with 12 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
components/dashboard/Chart.tsx
View File

@@ -3,8 +3,8 @@
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 { import {
AreaChart, BarChart,
Area, Bar,
XAxis, XAxis,
YAxis, YAxis,
CartesianGrid, CartesianGrid,
@@ -567,15 +567,8 @@ export default function Chart({
) : ( ) : (
<div className="h-[320px] w-full" onContextMenu={handleChartContextMenu}> <div className="h-[320px] w-full" onContextMenu={handleChartContextMenu}>
<ChartContainer config={dashboardChartConfig} className="h-full w-full"> <ChartContainer config={dashboardChartConfig} className="h-full w-full">
<AreaChart accessibilityLayer data={chartData} margin={{ top: 8, right: 8, left: 0, bottom: 8 }}> <BarChart accessibilityLayer data={chartData} margin={{ top: 8, right: 8, left: 0, bottom: 8 }}>
<defs>
<linearGradient id={`gradient-${metric}`} x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stopColor={COLORS.brand} stopOpacity={0.25} />
<stop offset="100%" stopColor={COLORS.brand} stopOpacity={0} />
</linearGradient>
</defs>
<CartesianGrid <CartesianGrid
strokeDasharray="3 3"
vertical={false} vertical={false}
stroke="var(--chart-grid)" stroke="var(--chart-grid)"
strokeOpacity={0.5} strokeOpacity={0.5}
@@ -614,43 +607,25 @@ export default function Chart({
prevPeriodLabel={prevPeriodLabel} prevPeriodLabel={prevPeriodLabel}
/> />
} }
cursor={{ stroke: 'var(--chart-axis)', strokeOpacity: 0.3, strokeWidth: 1 }} cursor={false}
/> />
{hasPrev && ( {hasPrev && (
<Area <Bar
type="monotone"
dataKey={metric === 'visitors' ? 'prevVisitors' : metric === 'pageviews' ? 'prevPageviews' : metric === 'bounce_rate' ? 'prevBounceRate' : 'prevAvgDuration'} dataKey={metric === 'visitors' ? 'prevVisitors' : metric === 'pageviews' ? 'prevPageviews' : metric === 'bounce_rate' ? 'prevBounceRate' : 'prevAvgDuration'}
stroke="var(--chart-axis)" fill="var(--chart-axis)"
strokeWidth={1.5} fillOpacity={0.2}
strokeDasharray="4 4" radius={[4, 4, 0, 0]}
strokeLinecap="round"
strokeLinejoin="round"
fill="none"
dot={false}
isAnimationActive isAnimationActive
animationDuration={400} animationDuration={400}
animationEasing="ease-out" animationEasing="ease-out"
/> />
)} )}
<Area <Bar
type="monotone"
baseValue={0}
dataKey={metric} dataKey={metric}
stroke={COLORS.brand} fill={COLORS.brand}
strokeWidth={2} radius={[4, 4, 0, 0]}
strokeLinecap="round"
strokeLinejoin="round"
fillOpacity={1}
fill={`url(#gradient-${metric})`}
dot={false}
activeDot={{
r: 4,
strokeWidth: 2,
fill: resolvedTheme === 'dark' ? 'var(--color-neutral-900)' : '#ffffff',
stroke: COLORS.brand,
}}
isAnimationActive isAnimationActive
animationDuration={400} animationDuration={400}
animationEasing="ease-out" animationEasing="ease-out"
@@ -670,7 +645,7 @@ export default function Chart({
/> />
) )
})} })}
</AreaChart> </BarChart>
</ChartContainer> </ChartContainer>
</div> </div>
)} )}