({ item }: { item: z.infer<typeof schema> })
| 648 | } satisfies ChartConfig |
| 649 | |
| 650 | function TableCellViewer({ item }: { item: z.infer<typeof schema> }) { |
| 651 | const isMobile = useIsMobile() |
| 652 | |
| 653 | return ( |
| 654 | <Drawer direction={isMobile ? "bottom" : "right"}> |
| 655 | <DrawerTrigger asChild> |
| 656 | <Button variant="link" className="text-foreground w-fit px-0 text-left"> |
| 657 | {item.header} |
| 658 | </Button> |
| 659 | </DrawerTrigger> |
| 660 | <DrawerContent> |
| 661 | <DrawerHeader className="gap-1"> |
| 662 | <DrawerTitle>{item.header}</DrawerTitle> |
| 663 | <DrawerDescription> |
| 664 | Showing total visitors for the last 6 months |
| 665 | </DrawerDescription> |
| 666 | </DrawerHeader> |
| 667 | <div className="flex flex-col gap-4 overflow-y-auto px-4 text-sm"> |
| 668 | {!isMobile && ( |
| 669 | <> |
| 670 | <ChartContainer config={chartConfig}> |
| 671 | <AreaChart |
| 672 | accessibilityLayer |
| 673 | data={chartData} |
| 674 | margin={{ |
| 675 | left: 0, |
| 676 | right: 10, |
| 677 | }} |
| 678 | > |
| 679 | <CartesianGrid vertical={false} /> |
| 680 | <XAxis |
| 681 | dataKey="month" |
| 682 | tickLine={false} |
| 683 | axisLine={false} |
| 684 | tickMargin={8} |
| 685 | tickFormatter={(value) => value.slice(0, 3)} |
| 686 | hide |
| 687 | /> |
| 688 | <ChartTooltip |
| 689 | cursor={false} |
| 690 | content={<ChartTooltipContent indicator="dot" />} |
| 691 | /> |
| 692 | <Area |
| 693 | dataKey="mobile" |
| 694 | type="natural" |
| 695 | fill="var(--color-mobile)" |
| 696 | fillOpacity={0.6} |
| 697 | stroke="var(--color-mobile)" |
| 698 | stackId="a" |
| 699 | /> |
| 700 | <Area |
| 701 | dataKey="desktop" |
| 702 | type="natural" |
| 703 | fill="var(--color-desktop)" |
| 704 | fillOpacity={0.4} |
| 705 | stroke="var(--color-desktop)" |
| 706 | stackId="a" |
| 707 | /> |
nothing calls this directly
no test coverage detected