konnosDashboard
ReportChartUpsell.tsx82 lines · main
1import Link from 'next/link'
2import { useRef, useState } from 'react'
3import { Button, Card, cn } from 'ui'
4
5import { LazyComposedChartHandler } from '@/components/ui/Charts/ComposedChartHandler'
6
7interface ReportsChartUpsellProps {
8 report: {
9 label: string
10 requiredPlan?: string
11 }
12 orgSlug: string
13}
14
15export const ReportChartUpsell = ({ report, orgSlug }: ReportsChartUpsellProps) => {
16 const startDate = '2025-01-01'
17 const endDate = '2025-01-02'
18
19 const [isHoveringUpgrade, setIsHoveringUpgrade] = useState(false)
20
21 const getExpDemoChartData = () =>
22 new Array(20).fill(0).map((_, index) => ({
23 period_start: new Date(startDate).getTime() + index * 1000,
24 demo: Math.floor(Math.pow(1.25, index) * 10),
25 max_demo: 1000,
26 }))
27
28 const getDemoChartData = () =>
29 new Array(20).fill(0).map((_, index) => ({
30 period_start: new Date(startDate).getTime() + index * 1000,
31 demo: Math.floor(Math.random() * 10) + 1,
32 max_demo: 1000,
33 }))
34
35 const demoChartData = useRef(getDemoChartData())
36 const exponentialChartData = useRef(getExpDemoChartData())
37
38 const demoData = isHoveringUpgrade ? exponentialChartData.current : demoChartData.current
39
40 return (
41 <Card className={cn('h-[280px] relative')}>
42 <div className="z-10 flex flex-col items-center justify-center space-y-2 h-full absolute top-0 left-0 w-full bg-surface-100/70 backdrop-blur-md">
43 <h2 className="text-sm">{report.label}</h2>
44 <p className="text-sm text-foreground-light">
45 {report.requiredPlan
46 ? `Available on the ${report.requiredPlan} Plan and above`
47 : `Your plan does not include access to ${report.label}`}
48 </p>
49 <Button
50 asChild
51 type="primary"
52 onMouseEnter={() => setIsHoveringUpgrade(true)}
53 onMouseLeave={() => setIsHoveringUpgrade(false)}
54 className="mt-4"
55 >
56 <Link href={`/org/${orgSlug || '_'}/billing?panel=subscriptionPlan&source=reports`}>
57 {report.requiredPlan ? `Upgrade to ${report.requiredPlan}` : 'Upgrade'}
58 </Link>
59 </Button>
60 </div>
61 <div className="absolute top-0 left-0 w-full h-full z-0">
62 <LazyComposedChartHandler
63 attributes={[
64 {
65 attribute: 'demo',
66 enabled: true,
67 label: 'Demo',
68 provider: 'logs',
69 },
70 ]}
71 label="Sample Report"
72 startDate={startDate}
73 endDate={endDate}
74 data={demoData as any}
75 isLoading={false}
76 highlightedValue={0}
77 updateDateRange={() => {}}
78 />
79 </div>
80 </Card>
81 )
82}