From de6501dea8bd081307117389bc447cc1ee2cf994 Mon Sep 17 00:00:00 2001 From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com> Date: Fri, 18 Aug 2023 13:23:51 +0530 Subject: [PATCH] style: analytics stats empty state --- .../scope-and-demand/leaderboard.tsx | 17 +++++++++++-- .../scope-and-demand/scope-and-demand.tsx | 2 ++ .../analytics/scope-and-demand/scope.tsx | 12 +++++++--- .../scope-and-demand/year-wise-issues.tsx | 12 ++++++++-- .../overview/priority-distribution.tsx | 4 ++-- .../app/components/ui/profile-empty-state.tsx | 4 ++-- ...priority_graph.svg => empty_bar_graph.svg} | 6 ++--- apps/app/public/empty-state/empty_graph.svg | 10 ++++++++ apps/app/public/empty-state/empty_users.svg | 3 +++ .../public/empty-state/recent_activity.svg | 2 +- apps/app/public/empty-state/state_graph.svg | 24 +++++++++---------- 11 files changed, 69 insertions(+), 27 deletions(-) rename apps/app/public/empty-state/{priority_graph.svg => empty_bar_graph.svg} (58%) create mode 100644 apps/app/public/empty-state/empty_graph.svg create mode 100644 apps/app/public/empty-state/empty_users.svg diff --git a/apps/app/components/analytics/scope-and-demand/leaderboard.tsx b/apps/app/components/analytics/scope-and-demand/leaderboard.tsx index 156c09d4c1b..e52657c03cc 100644 --- a/apps/app/components/analytics/scope-and-demand/leaderboard.tsx +++ b/apps/app/components/analytics/scope-and-demand/leaderboard.tsx @@ -1,3 +1,8 @@ +// ui +import { ProfileEmptyState } from "components/ui"; +// image +import emptyUsers from "public/empty-state/empty_users.svg"; + type Props = { users: { avatar: string | null; @@ -8,10 +13,16 @@ type Props = { id: string; }[]; title: string; + emptyStateMessage: string; workspaceSlug: string; }; -export const AnalyticsLeaderboard: React.FC = ({ users, title, workspaceSlug }) => ( +export const AnalyticsLeaderboard: React.FC = ({ + users, + title, + emptyStateMessage, + workspaceSlug, +}) => (
{title}
{users.length > 0 ? ( @@ -47,7 +58,9 @@ export const AnalyticsLeaderboard: React.FC = ({ users, title, workspaceS ))}
) : ( -
No matching data found.
+
+ +
)} ); diff --git a/apps/app/components/analytics/scope-and-demand/scope-and-demand.tsx b/apps/app/components/analytics/scope-and-demand/scope-and-demand.tsx index 7f40ee79a3f..dc7e6551589 100644 --- a/apps/app/components/analytics/scope-and-demand/scope-and-demand.tsx +++ b/apps/app/components/analytics/scope-and-demand/scope-and-demand.tsx @@ -63,6 +63,7 @@ export const ScopeAndDemand: React.FC = ({ fullScreen = true }) => { id: user?.created_by__id, }))} title="Most issues created" + emptyStateMessage="Co-workers and the number issues created by them appears here." workspaceSlug={workspaceSlug?.toString() ?? ""} /> = ({ fullScreen = true }) => { id: user?.assignees__id, }))} title="Most issues closed" + emptyStateMessage="Co-workers and the number issues closed by them appears here." workspaceSlug={workspaceSlug?.toString() ?? ""} />
diff --git a/apps/app/components/analytics/scope-and-demand/scope.tsx b/apps/app/components/analytics/scope-and-demand/scope.tsx index 15b9e18de5e..b01354b9306 100644 --- a/apps/app/components/analytics/scope-and-demand/scope.tsx +++ b/apps/app/components/analytics/scope-and-demand/scope.tsx @@ -1,5 +1,7 @@ // ui -import { BarGraph } from "components/ui"; +import { BarGraph, ProfileEmptyState } from "components/ui"; +// image +import emptyBarGraph from "public/empty-state/empty_bar_graph.svg"; // types import { IDefaultAnalyticsResponse } from "types"; @@ -70,8 +72,12 @@ export const AnalyticsScope: React.FC = ({ defaultAnalytics }) => ( }} /> ) : ( -
- No matching data found. +
+
)}
diff --git a/apps/app/components/analytics/scope-and-demand/year-wise-issues.tsx b/apps/app/components/analytics/scope-and-demand/year-wise-issues.tsx index 621706f0eaa..87127ed6086 100644 --- a/apps/app/components/analytics/scope-and-demand/year-wise-issues.tsx +++ b/apps/app/components/analytics/scope-and-demand/year-wise-issues.tsx @@ -1,5 +1,7 @@ // ui -import { LineGraph } from "components/ui"; +import { LineGraph, ProfileEmptyState } from "components/ui"; +// image +import emptyGraph from "public/empty-state/empty_graph.svg"; // types import { IDefaultAnalyticsResponse } from "types"; // constants @@ -48,7 +50,13 @@ export const AnalyticsYearWiseIssues: React.FC = ({ defaultAnalytics }) = enableArea /> ) : ( -
No matching data found.
+
+ +
)}
); diff --git a/apps/app/components/profile/overview/priority-distribution.tsx b/apps/app/components/profile/overview/priority-distribution.tsx index 92114215c7f..40acdedf550 100644 --- a/apps/app/components/profile/overview/priority-distribution.tsx +++ b/apps/app/components/profile/overview/priority-distribution.tsx @@ -1,7 +1,7 @@ // ui import { BarGraph, ProfileEmptyState, Loader } from "components/ui"; // image -import priorityGraph from "public/empty-state/priority_graph.svg"; +import emptyBarGraph from "public/empty-state/empty_bar_graph.svg"; // helpers import { capitalizeFirstLetter } from "helpers/string.helper"; // types @@ -67,7 +67,7 @@ export const ProfilePriorityDistribution: React.FC = ({ userProfile }) => )} diff --git a/apps/app/components/ui/profile-empty-state.tsx b/apps/app/components/ui/profile-empty-state.tsx index 12af257948f..35ac6685686 100644 --- a/apps/app/components/ui/profile-empty-state.tsx +++ b/apps/app/components/ui/profile-empty-state.tsx @@ -11,8 +11,8 @@ type Props = { export const ProfileEmptyState: React.FC = ({ title, description, image }) => (
-
- {title} +
+ {title}
{title}
{description &&

{description}

} diff --git a/apps/app/public/empty-state/priority_graph.svg b/apps/app/public/empty-state/empty_bar_graph.svg similarity index 58% rename from apps/app/public/empty-state/priority_graph.svg rename to apps/app/public/empty-state/empty_bar_graph.svg index 15d8f9b4c7d..7742a4238af 100644 --- a/apps/app/public/empty-state/priority_graph.svg +++ b/apps/app/public/empty-state/empty_bar_graph.svg @@ -1,5 +1,5 @@ - - - + + + diff --git a/apps/app/public/empty-state/empty_graph.svg b/apps/app/public/empty-state/empty_graph.svg new file mode 100644 index 00000000000..5eae523a520 --- /dev/null +++ b/apps/app/public/empty-state/empty_graph.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/apps/app/public/empty-state/empty_users.svg b/apps/app/public/empty-state/empty_users.svg new file mode 100644 index 00000000000..7298e9e8f9d --- /dev/null +++ b/apps/app/public/empty-state/empty_users.svg @@ -0,0 +1,3 @@ + + + diff --git a/apps/app/public/empty-state/recent_activity.svg b/apps/app/public/empty-state/recent_activity.svg index 48ea2277c03..bef318fae1d 100644 --- a/apps/app/public/empty-state/recent_activity.svg +++ b/apps/app/public/empty-state/recent_activity.svg @@ -1,3 +1,3 @@ - + diff --git a/apps/app/public/empty-state/state_graph.svg b/apps/app/public/empty-state/state_graph.svg index 7265784a8ec..07337991ee1 100644 --- a/apps/app/public/empty-state/state_graph.svg +++ b/apps/app/public/empty-state/state_graph.svg @@ -1,26 +1,26 @@ - + - - + + - - + + - - + + - - + + - - + + - +