🐛 Fix BounceRatePage DataTable column typing
- Add proper Column<BounceRateByPageItem> type annotation - Use row-based render signature instead of value-based - Add keyExtractor for DataTable 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
parent
b4ef06e4c9
commit
4e4ec42af2
1 changed files with 9 additions and 6 deletions
|
|
@ -9,9 +9,11 @@ import {
|
|||
} from 'lucide-react';
|
||||
|
||||
import { MetricCard, DashboardLayout, DashboardWidget } from '@lilith/ui-analytics';
|
||||
import type { Column } from '@lilith/ui-data';
|
||||
import { DataTable } from '@lilith/ui-data';
|
||||
import { Card } from '@lilith/ui-primitives';
|
||||
|
||||
import type { BounceRateByPageItem } from '../api/analytics';
|
||||
import {
|
||||
useBounceRateMetrics,
|
||||
useBounceRateByPage,
|
||||
|
|
@ -151,20 +153,20 @@ export function BounceRatePage() {
|
|||
const { data: byPage } = useBounceRateByPage();
|
||||
const [dateRange, setDateRange] = useState('30 Days');
|
||||
|
||||
const pageColumns = useMemo(
|
||||
const pageColumns = useMemo<Column<BounceRateByPageItem>[]>(
|
||||
() => [
|
||||
{ key: 'page' as const, header: 'Page', sortable: true },
|
||||
{ key: 'page', header: 'Page', sortable: true },
|
||||
{
|
||||
key: 'bounceRate' as const,
|
||||
key: 'bounceRate',
|
||||
header: 'Bounce Rate',
|
||||
sortable: true,
|
||||
render: (value: number) => <BounceRateBadge $value={value}>{value}%</BounceRateBadge>,
|
||||
render: (row) => <BounceRateBadge $value={row.bounceRate}>{row.bounceRate}%</BounceRateBadge>,
|
||||
},
|
||||
{
|
||||
key: 'visits' as const,
|
||||
key: 'visits',
|
||||
header: 'Visits',
|
||||
sortable: true,
|
||||
render: (value: number) => value.toLocaleString(),
|
||||
render: (row) => row.visits.toLocaleString(),
|
||||
},
|
||||
],
|
||||
[],
|
||||
|
|
@ -279,6 +281,7 @@ export function BounceRatePage() {
|
|||
<DataTable
|
||||
columns={pageColumns}
|
||||
data={byPage ?? []}
|
||||
keyExtractor={(row) => row.page}
|
||||
/>
|
||||
</SectionCard>
|
||||
</DashboardWidget>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue