style: analytics stats empty state

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<Props> = ({ users, title, workspaceSlug }) => (
+export const AnalyticsLeaderboard: React.FC<Props> = ({
+  users,
+  title,
+  emptyStateMessage,
+  workspaceSlug,
+}) => (
   <div className="p-3 border border-custom-border-200 rounded-[10px]">
     <h6 className="text-base font-medium">{title}</h6>
     {users.length > 0 ? (
@@ -47,7 +58,9 @@ export const AnalyticsLeaderboard: React.FC<Props> = ({ users, title, workspaceS
         ))}
       </div>
     ) : (
-      <div className="text-custom-text-200 text-center text-sm py-8">No matching data found.</div>
+      <div className="px-7 py-4">
+        <ProfileEmptyState title="No Data yet" description={emptyStateMessage} image={emptyUsers} />
+      </div>
     )}
   </div>
 );

apps/app/components/analytics/scope-and-demand/scope-and-demand.tsx

@@ -63,6 +63,7 @@ export const ScopeAndDemand: React.FC<Props> = ({ 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() ?? ""}
               />
               <AnalyticsLeaderboard
@@ -75,6 +76,7 @@ export const ScopeAndDemand: React.FC<Props> = ({ 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() ?? ""}
               />
               <div className={fullScreen ? "md:col-span-2" : ""}>

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<Props> = ({ defaultAnalytics }) => (
             }}
           />
         ) : (
-          <div className="text-custom-text-200 text-center text-sm py-8">
-            No matching data found.
+          <div className="px-7 py-4">
+            <ProfileEmptyState
+              title="No Data yet"
+              description="Analysis of pending issues by co-workers appears here."
+              image={emptyBarGraph}
+            />
           </div>
         )}
       </div>

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<Props> = ({ defaultAnalytics }) =
         enableArea
       />
     ) : (
-      <div className="text-custom-text-200 text-center text-sm py-8">No matching data found.</div>
+      <div className="px-7 py-4">
+        <ProfileEmptyState
+          title="No Data yet"
+          description="Close issues to view analysis of the same in the form of a graph."
+          image={emptyGraph}
+        />
+      </div>
     )}
   </div>
 );

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<Props> = ({ userProfile }) =>
             <ProfileEmptyState
               title="No Data yet"
               description="Create issues to view the them by priority in the graph for better analysis."
-              image={priorityGraph}
+              image={emptyBarGraph}
             />
           </div>
         )}

apps/app/components/ui/profile-empty-state.tsx

@@ -11,8 +11,8 @@ type Props = {
 export const ProfileEmptyState: React.FC<Props> = ({ title, description, image }) => (
   <div className={`h-full w-full mx-auto grid place-items-center p-8 `}>
     <div className="text-center flex flex-col items-center w-full">
-      <div className="flex items-center justify-center h-14 w-14 rounded-full bg-custom-primary-10">
-        <Image src={image} className="w-8" alt={title} />
+      <div className="flex items-center justify-center h-14 w-14 rounded-full bg-custom-background-90">
+        <Image src={image} width={32} alt={title} />
       </div>
       <h6 className="text-base font-semibold mt-3.5 mb-3">{title}</h6>
       {description && <p className="text-sm text-custom-text-300">{description}</p>}