diff --git a/src/app/(main)/reports/[reportId]/Report.tsx b/src/app/(main)/reports/[reportId]/Report.tsx index 76f73595..d6de9d42 100644 --- a/src/app/(main)/reports/[reportId]/Report.tsx +++ b/src/app/(main)/reports/[reportId]/Report.tsx @@ -13,7 +13,7 @@ export function Report({ className, }: { reportId: string; - defaultParameters: { [key: string]: any }; + defaultParameters: { type: string; parameters: { [key: string]: any } }; children: ReactNode; className?: string; }) { diff --git a/src/app/(main)/reports/funnel/FunnelChart.module.css b/src/app/(main)/reports/funnel/FunnelChart.module.css index 0279ea03..be2a9cdc 100644 --- a/src/app/(main)/reports/funnel/FunnelChart.module.css +++ b/src/app/(main)/reports/funnel/FunnelChart.module.css @@ -51,7 +51,7 @@ align-items: center; justify-content: flex-end; background: var(--base900); - height: 50px; + height: 30px; border-radius: 5px; overflow: hidden; position: relative; @@ -61,19 +61,12 @@ color: var(--base700); } -.value { - color: var(--base50); - margin-inline-end: 20px; -} - .track { background-color: var(--base100); border-radius: 5px; } .info { - display: flex; - justify-content: space-between; text-transform: lowercase; } @@ -82,3 +75,24 @@ border-radius: 4px; border: 1px solid var(--base300); } + +.metric { + color: var(--base700); + display: flex; + justify-content: space-between; + gap: 10px; + font-size: 24px; + margin: 10px 0; + text-transform: lowercase; +} + +.visitors { + color: var(--base900); + font-weight: 900; + margin-right: 10px; +} + +.percent { + font-weight: 700; + align-self: flex-end; +} diff --git a/src/app/(main)/reports/funnel/FunnelChart.tsx b/src/app/(main)/reports/funnel/FunnelChart.tsx index 6207a177..70076354 100644 --- a/src/app/(main)/reports/funnel/FunnelChart.tsx +++ b/src/app/(main)/reports/funnel/FunnelChart.tsx @@ -2,8 +2,8 @@ import { useContext } from 'react'; import classNames from 'classnames'; import { useMessages } from 'components/hooks'; import { ReportContext } from '../[reportId]/Report'; -import styles from './FunnelChart.module.css'; import { formatLongNumber } from 'lib/format'; +import styles from './FunnelChart.module.css'; export interface FunnelChartProps { className?: string; @@ -18,35 +18,33 @@ export function FunnelChart({ className }: FunnelChartProps) { return (