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:
@@ -10,7 +10,6 @@ import {
|
|||||||
CartesianGrid,
|
CartesianGrid,
|
||||||
Tooltip,
|
Tooltip,
|
||||||
ResponsiveContainer,
|
ResponsiveContainer,
|
||||||
ReferenceLine,
|
|
||||||
} from 'recharts'
|
} from 'recharts'
|
||||||
import type { TooltipProps } from 'recharts'
|
import type { TooltipProps } from 'recharts'
|
||||||
import { formatNumber, formatDuration, formatUpdatedAgo } from '@ciphera-net/ui'
|
import { formatNumber, formatDuration, formatUpdatedAgo } from '@ciphera-net/ui'
|
||||||
@@ -92,13 +91,6 @@ function formatAxisDuration(seconds: number): string {
|
|||||||
return `${s}s`
|
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 {
|
function getPrevDateRangeLabel(dateRange: { start: string; end: string }): string {
|
||||||
const startDate = new Date(dateRange.start)
|
const startDate = new Date(dateRange.start)
|
||||||
const endDate = new Date(dateRange.end)
|
const endDate = new Date(dateRange.end)
|
||||||
@@ -295,10 +287,6 @@ export default function Chart({
|
|||||||
const prevPeriodLabel = prevData?.length ? getPrevDateRangeLabel(dateRange) : ''
|
const prevPeriodLabel = prevData?.length ? getPrevDateRangeLabel(dateRange) : ''
|
||||||
const trendContext = getTrendContext(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 hasPrev = !!(prevData?.length && showComparison)
|
||||||
const hasData = data.length > 0
|
const hasData = data.length > 0
|
||||||
const hasAnyNonZero = hasData && chartData.some((d) => (d[metric] as number) > 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">
|
<span className="text-xs font-medium text-neutral-500 dark:text-neutral-400">
|
||||||
{metricLabel}
|
{metricLabel}
|
||||||
</span>
|
</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 && (
|
{hasPrev && (
|
||||||
<div className="hidden sm:flex items-center gap-3 text-[11px] font-medium text-neutral-400 dark:text-neutral-500 ml-2">
|
<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">
|
<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 }}
|
cursor={{ stroke: colors.axis, strokeOpacity: 0.3, strokeWidth: 1 }}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
{avg > 0 && (
|
|
||||||
<ReferenceLine
|
|
||||||
y={avg}
|
|
||||||
stroke={colors.axis}
|
|
||||||
strokeDasharray="4 4"
|
|
||||||
strokeOpacity={0.4}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{hasPrev && (
|
{hasPrev && (
|
||||||
<Area
|
<Area
|
||||||
|
|||||||
Reference in New Issue
Block a user