style: remove avg reference line and badge from chart

Remove the dashed average line from the chart area and the Avg badge
from the toolbar for a cleaner look.
This commit is contained in:
Usman Baig
2026-03-07 00:54:11 +01:00
parent 74ee64a560
commit ece8cda334

View File

@@ -10,7 +10,6 @@ import {
CartesianGrid,
Tooltip,
ResponsiveContainer,
ReferenceLine,
} from 'recharts'
import type { TooltipProps } from 'recharts'
import { formatNumber, formatDuration, formatUpdatedAgo } from '@ciphera-net/ui'
@@ -92,13 +91,6 @@ function formatAxisDuration(seconds: number): string {
return `${s}s`
}
function formatAvgLabel(value: number, metric: MetricType): string {
if (metric === 'bounce_rate') return `${Math.round(value)}%`
if (metric === 'avg_duration') return formatAxisDuration(value)
if (metric === 'visitors' || metric === 'pageviews') return formatAxisValue(Math.round(value))
return formatAxisValue(value)
}
function getPrevDateRangeLabel(dateRange: { start: string; end: string }): string {
const startDate = new Date(dateRange.start)
const endDate = new Date(dateRange.end)
@@ -295,10 +287,6 @@ export default function Chart({
const prevPeriodLabel = prevData?.length ? getPrevDateRangeLabel(dateRange) : ''
const trendContext = getTrendContext(dateRange)
const avg = chartData.length
? chartData.reduce((s, d) => s + (d[metric] as number), 0) / chartData.length
: 0
const hasPrev = !!(prevData?.length && showComparison)
const hasData = data.length > 0
const hasAnyNonZero = hasData && chartData.some((d) => (d[metric] as number) > 0)
@@ -383,11 +371,6 @@ export default function Chart({
<span className="text-xs font-medium text-neutral-500 dark:text-neutral-400">
{metricLabel}
</span>
{hasAnyNonZero && avg > 0 && (
<span className="text-[11px] font-medium text-neutral-400 dark:text-neutral-500 bg-neutral-100 dark:bg-neutral-800 px-2 py-0.5 rounded-full">
Avg: {formatAvgLabel(avg, metric)}
</span>
)}
{hasPrev && (
<div className="hidden sm:flex items-center gap-3 text-[11px] font-medium text-neutral-400 dark:text-neutral-500 ml-2">
<span className="flex items-center gap-1.5">
@@ -511,14 +494,6 @@ export default function Chart({
cursor={{ stroke: colors.axis, strokeOpacity: 0.3, strokeWidth: 1 }}
/>
{avg > 0 && (
<ReferenceLine
y={avg}
stroke={colors.axis}
strokeDasharray="4 4"
strokeOpacity={0.4}
/>
)}
{hasPrev && (
<Area