Eunjae LeeandGitHub
3e299f9511
* refactor: update PopuplarEvents chart to use InsightsBookingService * use buildHashMapForUsers * refactor least booked * refactor charts * combine methods * refactor booking kpi cards * remove unused code * fix booking kpi cards * restore code that was removed accidentally * Revert "restore code that was removed accidentally" This reverts commit 0c0b444b02498b94fb29ef470da065bad3ad7ece. * Revert "fix booking kpi cards" This reverts commit b1e8e9afbd3632a5239495566551ae12bd926b66. * refactor booking kpi cards * revert method and remove unused code * fix previous period * fix metrics * clean up trpc call params * clean up Download.tsx * split utils * restructure folders for components * clean up imports * rename TotalUserFeedbackTable to UserStatsTable * add guide * use client * add curly braces to case * fix tests
77 lines
2.9 KiB
TypeScript
77 lines
2.9 KiB
TypeScript
"use client";
|
|
|
|
import { SkeletonText } from "@calcom/ui/components/skeleton";
|
|
|
|
export function RoutingFunnelSkeleton() {
|
|
return (
|
|
<div className="relative h-[300px] w-full">
|
|
{/* Chart container */}
|
|
<div className="h-full w-full p-4">
|
|
{/* Chart area */}
|
|
<div className="relative h-[220px]">
|
|
{/* Y-axis */}
|
|
<div className="text-muted-foreground absolute bottom-0 left-0 top-0 flex w-8 flex-col justify-between text-xs">
|
|
<SkeletonText className="h-3 w-6" />
|
|
<SkeletonText className="h-3 w-6" />
|
|
<SkeletonText className="h-3 w-6" />
|
|
<SkeletonText className="h-3 w-6" />
|
|
<SkeletonText className="h-3 w-6" />
|
|
</div>
|
|
|
|
{/* Chart content */}
|
|
<div className="ml-8 h-full">
|
|
{/* Grid lines */}
|
|
<div className="flex h-full flex-col justify-between">
|
|
{Array.from({ length: 5 }).map((_, i) => (
|
|
<div key={i} className="border-muted border-b" />
|
|
))}
|
|
</div>
|
|
|
|
{/* Stacked area chart skeleton */}
|
|
<div className="absolute inset-0 bottom-0 top-0 ml-0 flex items-end justify-between px-4">
|
|
{Array.from({ length: 7 }).map((_, i) => (
|
|
<div key={i} className="flex w-8 flex-col items-center">
|
|
{/* Stacked areas - simulating the three data series */}
|
|
<div
|
|
className="w-full rounded-t bg-[#8884d8] opacity-20"
|
|
style={{ height: `${Math.random() * 40 + 30}%` }}
|
|
/>
|
|
<div
|
|
className="w-full bg-[#83a6ed] opacity-20"
|
|
style={{ height: `${Math.random() * 30 + 20}%` }}
|
|
/>
|
|
<div
|
|
className="w-full rounded-b bg-[#82ca9d] opacity-20"
|
|
style={{ height: `${Math.random() * 20 + 10}%` }}
|
|
/>
|
|
|
|
{/* X-axis label */}
|
|
<SkeletonText className="mt-2 h-3 w-8" />
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Legend area */}
|
|
<div className="mt-4 flex justify-center">
|
|
<div className="flex gap-6">
|
|
<div className="flex items-center gap-2">
|
|
<div className="h-3 w-3 rounded-sm bg-[#8884d8]" />
|
|
<SkeletonText className="h-3 w-24" />
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<div className="h-3 w-3 rounded-sm bg-[#83a6ed]" />
|
|
<SkeletonText className="h-3 w-28" />
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<div className="h-3 w-3 rounded-sm bg-[#82ca9d]" />
|
|
<SkeletonText className="w-26 h-3" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|