This repository has been archived by the owner on Jan 5, 2025. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 401
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #586 from openchatai/ui/analytics-2
Real Analytics
- Loading branch information
Showing
11 changed files
with
282 additions
and
113 deletions.
There are no files selected for viewing
38 changes: 38 additions & 0 deletions
38
dashboard/app/(copilot)/copilot/[copilot_id]/analytics/AnalyticsActions.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,38 @@ | ||
| 'use client'; | ||
|
|
||
| import { SimpleCard } from "@/components/domain/simple-card"; | ||
| import { getMostCalledActions } from "@/data/analytics"; | ||
| import { EChart } from "@kbox-labs/react-echarts"; | ||
| import useSWR from "swr"; | ||
|
|
||
| type Props = { | ||
| copilot_id: string | ||
| } | ||
|
|
||
| export function AnalyticsActions({ copilot_id }: Props) { | ||
| const { | ||
| data: mostCalledActions, | ||
| } = useSWR([copilot_id, 'copilot-mostCalledActions'], () => getMostCalledActions(copilot_id)); | ||
| const noMostCalledActions = mostCalledActions?.length === 0 || !mostCalledActions; | ||
| return ( | ||
| <SimpleCard title="Most Called Actions" className="relative overflow-hidden"> | ||
| {noMostCalledActions ? <div className="h-full flex-center"> | ||
| <p className="text-center text-xl">No actions called yet</p> | ||
| </div> : <EChart | ||
| renderer='svg' | ||
| className='size-full' | ||
| xAxis={{ | ||
| type: 'category', | ||
| data: mostCalledActions?.map((action) => action.operation_id) ?? [], | ||
| }} | ||
| yAxis={{ | ||
| type: 'value', | ||
| }} | ||
| series={{ | ||
| data: mostCalledActions?.map((action) => (action.count)) ?? [], | ||
| type: 'bar', | ||
| }} | ||
| />} | ||
| </SimpleCard> | ||
| ) | ||
| } |
43 changes: 43 additions & 0 deletions
43
dashboard/app/(copilot)/copilot/[copilot_id]/analytics/AnalyticsCards.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,43 @@ | ||
| "use client"; | ||
| import { SimpleCard } from "@/components/domain/simple-card"; | ||
| import useSWR from "swr"; | ||
| import { getAnalyticsData } from "@/data/analytics"; | ||
| import { Skeleton } from "@/components/ui/skeleton"; | ||
| import { Counter } from "@/components/ui/Counter"; | ||
|
|
||
| export function SimpleAnalyticsCards({ copilot_id }: { | ||
| copilot_id: string | ||
| }) { | ||
| const { | ||
| data: analyticsData, | ||
| isLoading | ||
| } = useSWR([copilot_id, 'copilot-analytics'], () => getAnalyticsData(copilot_id)) | ||
| return ( | ||
| <div className="grid grid-cols-3 gap-4"> | ||
| <SimpleCard title="Number of api calls"> | ||
| <Skeleton isLoading={isLoading}> | ||
| <h2 className="text-lg font-bold"> | ||
| <Counter value={analyticsData?.api_called_count} /> | ||
| </h2> | ||
| </Skeleton> | ||
| </SimpleCard> | ||
|
|
||
| <SimpleCard title="Knowledge Base Queries"> | ||
| <Skeleton isLoading={isLoading}> | ||
| <h2 className="text-lg font-bold"> | ||
| <Counter value={analyticsData?.knowledgebase_called_count} /> | ||
| </h2> | ||
| </Skeleton> | ||
| </SimpleCard> | ||
|
|
||
| <SimpleCard title="Misc Queries"> | ||
| <Skeleton isLoading={isLoading}> | ||
| <h2 className="text-lg font-bold"> | ||
| <Counter value={analyticsData?.other_count} /> | ||
| </h2> | ||
| </Skeleton> | ||
| </SimpleCard> | ||
|
|
||
| </div> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,59 @@ | ||
| import { Stack } from "@/components/ui/Stack"; | ||
| import { CopilotType } from "@/data/copilot"; | ||
| import { Link } from "@/lib/router-events"; | ||
| import { motion } from "framer-motion"; | ||
| import { GalleryHorizontalEnd } from "lucide-react"; | ||
| import { format } from "timeago.js"; | ||
|
|
||
| const IsoMorphicAnimatedLink = (animated:boolean) => animated ? motion(Link) : Link; | ||
|
|
||
| export function CopilotCard( | ||
| { | ||
| copilot, | ||
| index, | ||
| animated = true | ||
| }:{ | ||
| copilot: CopilotType, | ||
| index: number | ||
| animated?: boolean | ||
| } | ||
| ) { | ||
| const copilotUrl = `/copilot/${copilot.id}`; | ||
| const AnimatedLink = IsoMorphicAnimatedLink(animated); | ||
| return ( | ||
| <AnimatedLink | ||
| key={copilot.id} | ||
| href={copilotUrl} | ||
| animate={{ opacity: 1, y: 0, filter: "blur(0px)" }} | ||
| initial={{ | ||
| opacity: 0, y: 50, | ||
| filter: "blur(10px)" | ||
| }} | ||
| exit={{ | ||
| opacity: 0, y: 50, | ||
| filter: "blur(10px)" | ||
| }} | ||
| transition={{ duration: 0.2, delay: 0.1 * index }} | ||
| className="group col-span-full lg:col-span-6 xl:col-span-3 copilot" | ||
| > | ||
| <div | ||
| style={{ | ||
| transitionDelay: `max(0.1s, ${0.1 * index}ms)`, | ||
| }} | ||
| className="group relative flex h-56 items-center justify-center rounded-lg border-2 transition-colors box"> | ||
| <div className="flex-center size-20 shadow-lg group-hover:scale-95 transition-transform rounded-lg bg-primary text-gray-100"> | ||
| <GalleryHorizontalEnd className="size-12" /> | ||
| </div> | ||
| </div> | ||
| <Stack className="mt-1.5 ps-1 justify-between" gap={10} fluid> | ||
| <h2 className="flex-1 text-sm font-semibold line-clamp-1" title={copilot.name}> | ||
| {copilot.name} | ||
| </h2> | ||
| <p className="text-xs text-black"> | ||
| Created{" "} | ||
| <span className="font-semibold">{format(copilot.created_at)}</span> | ||
| </p> | ||
| </Stack> | ||
| </AnimatedLink> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.