Skip to content

Analytics UI Empty States #5121

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Oct 22, 2024
Merged

Analytics UI Empty States #5121

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
46 changes: 45 additions & 1 deletion ...am/[team_slug]/[project_slug]/connect/analytics/_components/DailyConnectionsChartCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,12 @@ import {
SelectValue,
} from "@/components/ui/select";
import type { WalletStats } from "@3rdweb-sdk/react/hooks/useApi";
import { DotNetIcon } from "components/icons/brand-icons/DotNetIcon";
import { ReactIcon } from "components/icons/brand-icons/ReactIcon";
import { TypeScriptIcon } from "components/icons/brand-icons/TypeScriptIcon";
import { UnityIcon } from "components/icons/brand-icons/UnityIcon";
import { UnrealIcon } from "components/icons/brand-icons/UnrealIcon";
import { DocLink } from "components/shared/DocLink";
import { format } from "date-fns";
import { useMemo, useState } from "react";
import { Bar, BarChart, CartesianGrid, LabelList, XAxis } from "recharts";
Expand Down Expand Up @@ -129,7 +135,45 @@ export function DailyConnectionsChartCard(props: {
{props.isPending ? (
<LoadingChartState />
) : barChartData.length === 0 ? (
<EmptyChartState />
<EmptyChartState>
<div className="flex flex-col items-center justify-center">
<span className="mb-6 text-lg">
Send your first connect event
</span>
<div className="flex max-w-md flex-wrap items-center justify-center gap-x-6 gap-y-4">
<DocLink
link="https://portal.thirdweb.com/typescript/v5/getting-started"
label="TypeScript"
icon={TypeScriptIcon}
/>
<DocLink
link="https://portal.thirdweb.com/react/v5"
label="React"
icon={ReactIcon}
/>
<DocLink
link="https://portal.thirdweb.com/react-native/v5"
label="React Native"
icon={ReactIcon}
/>
<DocLink
link="https://portal.thirdweb.com/dotnet/getting-started"
label="Unity"
icon={UnityIcon}
/>
<DocLink
link="https://portal.thirdweb.com/unreal-engine/getting-started"
label="Unreal Engine"
icon={UnrealIcon}
/>
<DocLink
link="https://portal.thirdweb.com/dotnet/getting-started"
label=".NET"
icon={DotNetIcon}
/>
</div>
</div>
</EmptyChartState>
) : (
<BarChart
accessibilityLayer
Expand Down
8 changes: 4 additions & 4 deletions ...src/app/team/[team_slug]/[project_slug]/connect/analytics/_components/EmptyChartState.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,14 +22,14 @@ const skeletonChartConfig = {
},
} satisfies ChartConfig;

export function EmptyChartState() {
export function EmptyChartState({ children }: { children?: React.ReactNode }) {
const barChartData = useMemo(() => generateRandomData(), []);

return (
<div className="relative z-0 h-full w-full">
<span className="absolute inset-0 z-[1] flex items-center justify-center font-semibold text-base text-muted-foreground">
No data available
</span>
<div className="absolute inset-0 z-[1] flex flex-col items-center justify-center font-semibold text-base text-muted-foreground">
{children ?? "No data available"}
</div>
<SkeletonBarChart data={barChartData} />
</div>
);
Expand Down
54 changes: 49 additions & 5 deletions ...eam_slug]/[project_slug]/connect/analytics/_components/SponsoredTransactionsChartCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,12 @@ import {
ChartTooltipContent,
} from "@/components/ui/chart";
import type { UserOpStats } from "@3rdweb-sdk/react/hooks/useApi";
import { DotNetIcon } from "components/icons/brand-icons/DotNetIcon";
import { ReactIcon } from "components/icons/brand-icons/ReactIcon";
import { TypeScriptIcon } from "components/icons/brand-icons/TypeScriptIcon";
import { UnityIcon } from "components/icons/brand-icons/UnityIcon";
import { UnrealIcon } from "components/icons/brand-icons/UnrealIcon";
import { DocLink } from "components/shared/DocLink";
import { format } from "date-fns";
import { useMemo } from "react";
import { Bar, BarChart, CartesianGrid, XAxis } from "recharts";
Expand Down Expand Up @@ -41,13 +47,13 @@ export function SponsoredTransactionsChartCard(props: {

for (const data of userOpStats) {
const chartData = chartDataMap.get(data.date);
if (!chartData) {
if (!chartData && data.sponsoredUsd > 0) {
chartDataMap.set(data.date, {
time: format(new Date(data.date), "MMM dd"),
successful: data.successful,
failed: data.failed,
});
} else {
} else if (chartData && data.sponsoredUsd > 0) {
chartData.successful += data.successful;
chartData.failed += data.failed;
}
Expand All @@ -60,11 +66,11 @@ export function SponsoredTransactionsChartCard(props: {

return (
<div className="relative w-full rounded-lg border border-border bg-muted/50 p-4 md:p-6">
<h3 className="mb-1 font-semibold text-xl tracking-tight md:text-2xl">
<h3 className="mb-4 font-semibold text-xl tracking-tight md:text-2xl">
Sponsored Transactions
</h3>

<div className="top-6 right-6 mb-4 grid grid-cols-2 items-center gap-2 md:absolute md:mb-0 md:flex">
<div className="top-6 right-6 mb-8 grid grid-cols-2 items-center gap-2 md:absolute md:mb-0 md:flex">
<ExportToCSVButton
className="bg-background"
fileName="Sponsored Transactions"
Expand All @@ -85,7 +91,45 @@ export function SponsoredTransactionsChartCard(props: {
{props.isPending ? (
<LoadingChartState />
) : barChartData.length === 0 ? (
<EmptyChartState />
<EmptyChartState>
<div className="flex flex-col items-center justify-center">
<span className="mb-6 text-lg">
Send your first sponsored transaction
</span>
<div className="flex max-w-md flex-wrap items-center justify-center gap-x-6 gap-y-4">
<DocLink
link="https://portal.thirdweb.com/typescript/v5/account-abstraction/batching-transactions"
label="TypeScript"
icon={TypeScriptIcon}
/>
<DocLink
link="https://portal.thirdweb.com/react/v5/account-abstraction/batching-transactions"
label="React"
icon={ReactIcon}
/>
<DocLink
link="https://portal.thirdweb.com/react/v5/account-abstraction/get-started"
label="React Native"
icon={ReactIcon}
/>
<DocLink
link="https://portal.thirdweb.com/unity/v5/wallets/account-abstraction"
label="Unity"
icon={UnityIcon}
/>
<DocLink
link="https://portal.thirdweb.com/unreal-engine/blueprints/smart-wallet"
label="Unreal Engine"
icon={UnrealIcon}
/>
<DocLink
link="https://portal.thirdweb.com/dotnet/wallets/providers/account-abstraction"
label=".NET"
icon={DotNetIcon}
/>
</div>
</div>
</EmptyChartState>
) : (
<BarChart
accessibilityLayer
Expand Down
48 changes: 45 additions & 3 deletions ...team/[team_slug]/[project_slug]/connect/analytics/_components/TotalSponsoredChartCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,12 @@ import {
ChartTooltipContent,
} from "@/components/ui/chart";
import type { UserOpStats } from "@3rdweb-sdk/react/hooks/useApi";
import { DotNetIcon } from "components/icons/brand-icons/DotNetIcon";
import { ReactIcon } from "components/icons/brand-icons/ReactIcon";
import { TypeScriptIcon } from "components/icons/brand-icons/TypeScriptIcon";
import { UnityIcon } from "components/icons/brand-icons/UnityIcon";
import { UnrealIcon } from "components/icons/brand-icons/UnrealIcon";
import { DocLink } from "components/shared/DocLink";
import { format } from "date-fns";
import { useMemo } from "react";
import { Bar, BarChart, CartesianGrid, LabelList, XAxis } from "recharts";
Expand Down Expand Up @@ -35,12 +41,12 @@ export function TotalSponsoredChartCard(props: {

for (const data of userOpStats) {
const chartData = chartDataMap.get(data.date);
if (!chartData) {
if (!chartData && data.sponsoredUsd > 0) {
chartDataMap.set(data.date, {
time: format(new Date(data.date), "MMM dd"),
sponsoredUsd: data.sponsoredUsd,
});
} else {
} else if (chartData && data.sponsoredUsd > 0) {
chartData.sponsoredUsd += data.sponsoredUsd;
}
}
Expand Down Expand Up @@ -83,7 +89,43 @@ export function TotalSponsoredChartCard(props: {
{props.isPending ? (
<LoadingChartState />
) : barChartData.length === 0 ? (
<EmptyChartState />
<EmptyChartState>
<div className="flex flex-col items-center justify-center">
<span className="mb-6 text-lg">Sponsor gas for your users</span>
<div className="flex max-w-md flex-wrap items-center justify-center gap-x-6 gap-y-4">
<DocLink
link="https://portal.thirdweb.com/typescript/v5/account-abstraction/get-started"
label="TypeScript"
icon={TypeScriptIcon}
/>
<DocLink
link="https://portal.thirdweb.com/react/v5/account-abstraction/get-started"
label="React"
icon={ReactIcon}
/>
<DocLink
link="https://portal.thirdweb.com/react/v5/account-abstraction/get-started"
label="React Native"
icon={ReactIcon}
/>
<DocLink
link="https://portal.thirdweb.com/unity/v5/wallets/account-abstraction"
label="Unity"
icon={UnityIcon}
/>
<DocLink
link="https://portal.thirdweb.com/unreal-engine/blueprints/smart-wallet"
label="Unreal Engine"
icon={UnrealIcon}
/>
<DocLink
link="https://portal.thirdweb.com/dotnet/wallets/providers/account-abstraction"
label=".NET"
icon={DotNetIcon}
/>
</div>
</div>
</EmptyChartState>
) : (
<BarChart
accessibilityLayer
Expand Down
28 changes: 27 additions & 1 deletion ...am/[team_slug]/[project_slug]/connect/analytics/_components/WalletConnectorsChartCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,9 @@ import {
SelectValue,
} from "@/components/ui/select";
import type { WalletStats } from "@3rdweb-sdk/react/hooks/useApi";
import { ReactIcon } from "components/icons/brand-icons/ReactIcon";
import { TypeScriptIcon } from "components/icons/brand-icons/TypeScriptIcon";
import { DocLink } from "components/shared/DocLink";
import { format } from "date-fns";
import { useMemo, useState } from "react";
import { Bar, BarChart, CartesianGrid, XAxis } from "recharts";
Expand Down Expand Up @@ -166,7 +169,30 @@ export function WalletConnectorsChartCard(props: {
{props.isPending ? (
<LoadingChartState />
) : chartData.length === 0 ? (
<EmptyChartState />
<EmptyChartState>
<div className="flex flex-col items-center justify-center">
<span className="mb-6 text-lg">
Connect any wallet to your app
</span>
<div className="flex max-w-md flex-wrap items-center justify-center gap-x-6 gap-y-4">
<DocLink
link="https://portal.thirdweb.com/typescript/v5/supported-wallets"
label="TypeScript"
icon={TypeScriptIcon}
/>
<DocLink
link="https://portal.thirdweb.com/typescript/v5/supported-wallets"
label="React"
icon={ReactIcon}
/>
<DocLink
link="https://portal.thirdweb.com/typescript/v5/supported-wallets"
label="React Native"
Copy link
Member

@joaquim-verges joaquim-verges Oct 22, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No unity / DotNet / unreal links for this one?

Copy link
Contributor Author

@gregfromstl gregfromstl Oct 22, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Didn't see anything that might correspond in their docs since they only have in-app wallets

icon={ReactIcon}
/>
</div>
</div>
</EmptyChartState>
) : (
<BarChart
accessibilityLayer
Expand Down
28 changes: 27 additions & 1 deletion .../[team_slug]/[project_slug]/connect/analytics/_components/WalletDistributionChartCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,9 @@ import {
SelectValue,
} from "@/components/ui/select";
import type { WalletStats } from "@3rdweb-sdk/react/hooks/useApi";
import { ReactIcon } from "components/icons/brand-icons/ReactIcon";
import { TypeScriptIcon } from "components/icons/brand-icons/TypeScriptIcon";
import { DocLink } from "components/shared/DocLink";
import { useMemo, useState } from "react";
import { Pie, PieChart } from "recharts";
import { EmptyChartState, LoadingChartState } from "./EmptyChartState";
Expand Down Expand Up @@ -192,7 +195,30 @@ export function WalletDistributionChartCard(props: {
{props.isPending ? (
<LoadingChartState />
) : chartData.length === 0 ? (
<EmptyChartState />
<EmptyChartState>
<div className="flex flex-col items-center justify-center">
<span className="mb-6 text-lg">
Connect any wallet to your app
</span>
<div className="flex max-w-md flex-wrap items-center justify-center gap-x-6 gap-y-4">
<DocLink
link="https://portal.thirdweb.com/typescript/v5/supported-wallets"
label="TypeScript"
icon={TypeScriptIcon}
/>
<DocLink
link="https://portal.thirdweb.com/typescript/v5/supported-wallets"
label="React"
icon={ReactIcon}
/>
<DocLink
link="https://portal.thirdweb.com/typescript/v5/supported-wallets"
label="React Native"
icon={ReactIcon}
/>
</div>
</div>
</EmptyChartState>
) : (
<PieChart>
<ChartTooltip
Expand Down
19 changes: 1 addition & 18 deletions apps/dashboard/src/components/shared/ConnectSDKCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { ReactIcon } from "components/icons/brand-icons/ReactIcon";
import { TypeScriptIcon } from "components/icons/brand-icons/TypeScriptIcon";
import { UnityIcon } from "components/icons/brand-icons/UnityIcon";
import { UnrealIcon } from "components/icons/brand-icons/UnrealIcon";
import Link from "next/link";
import { DocLink } from "./DocLink";

export function ConnectSDKCard({
title,
Expand Down Expand Up @@ -69,20 +69,3 @@ function BackgroundPattern() {
/>
);
}

function DocLink(props: {
link: string;
label: string;
icon: React.FC<{ className?: string }>;
}) {
return (
<Link
href={props.link}
target="_blank"
className="flex items-center gap-2 text-muted-foreground text-sm hover:text-foreground"
>
<props.icon className="size-4" />
{props.label}
</Link>
);
}
18 changes: 18 additions & 0 deletions apps/dashboard/src/components/shared/DocLink.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
import Link from "next/link";

export function DocLink(props: {
link: string;
label: string;
icon: React.FC<{ className?: string }>;
}) {
return (
<Link
href={props.link}
target="_blank"
className="flex items-center gap-2 whitespace-nowrap text-muted-foreground text-sm hover:text-foreground"
>
<props.icon className="size-4" />
{props.label}
</Link>
);
}
Loading