diff --git a/apps/app/components/profile/overview/activity.tsx b/apps/app/components/profile/overview/activity.tsx index 78d5e2f64..045812363 100644 --- a/apps/app/components/profile/overview/activity.tsx +++ b/apps/app/components/profile/overview/activity.tsx @@ -7,7 +7,9 @@ import userService from "services/user.service"; // components import { ActivityMessage } from "components/core"; // ui -import { Icon, Loader } from "components/ui"; +import { ProfileEmptyState, Icon, Loader } from "components/ui"; +// image +import recentActivityEmptyState from "public/empty-state/recent_activity.svg"; // helpers import { timeAgo } from "helpers/date-time.helper"; // fetch-keys @@ -31,51 +33,59 @@ export const ProfileActivity = () => {

Recent Activity

{userProfileActivity ? ( -
- {userProfileActivity.results.map((activity) => ( -
-
- {activity.actor_detail.avatar && activity.actor_detail.avatar !== "" ? ( - {activity.actor_detail.display_name} - ) : ( -
- {activity.actor_detail.display_name?.charAt(0)} -
- )} -
-
-

- - {activity.actor_detail.display_name}{" "} - - {activity.field ? ( - + userProfileActivity.results.length > 0 ? ( +

+ {userProfileActivity.results.map((activity) => ( +
+
+ {activity.actor_detail.avatar && activity.actor_detail.avatar !== "" ? ( + {activity.actor_detail.display_name} ) : ( - - created this{" "} - - Issue - - - +
+ {activity.actor_detail.display_name?.charAt(0)} +
)} -

-

{timeAgo(activity.created_at)}

+
+
+

+ + {activity.actor_detail.display_name}{" "} + + {activity.field ? ( + + ) : ( + + created this{" "} + + Issue + + + + )} +

+

{timeAgo(activity.created_at)}

+
-
- ))} -
+ ))} +
+ ) : ( + + ) ) : ( diff --git a/apps/app/components/profile/overview/priority-distribution.tsx b/apps/app/components/profile/overview/priority-distribution.tsx index 28904596a..92114215c 100644 --- a/apps/app/components/profile/overview/priority-distribution.tsx +++ b/apps/app/components/profile/overview/priority-distribution.tsx @@ -1,5 +1,7 @@ // ui -import { BarGraph, Loader } from "components/ui"; +import { BarGraph, ProfileEmptyState, Loader } from "components/ui"; +// image +import priorityGraph from "public/empty-state/priority_graph.svg"; // helpers import { capitalizeFirstLetter } from "helpers/string.helper"; // types @@ -14,51 +16,61 @@ export const ProfilePriorityDistribution: React.FC = ({ userProfile }) =>

Issues by Priority

{userProfile ? (
- ({ - priority: capitalizeFirstLetter(priority.priority ?? "None"), - value: priority.priority_count, - }))} - height="300px" - indexBy="priority" - keys={["value"]} - borderRadius={4} - padding={0.7} - customYAxisTickValues={userProfile.priority_distribution.map((p) => p.priority_count)} - tooltip={(datum) => ( -
- - {datum.data.priority}: - {datum.value} -
- )} - colors={(datum) => { - if (datum.data.priority === "Urgent") return "#991b1b"; - else if (datum.data.priority === "High") return "#ef4444"; - else if (datum.data.priority === "Medium") return "#f59e0b"; - else if (datum.data.priority === "Low") return "#16a34a"; - else return "#e5e5e5"; - }} - theme={{ - axis: { - domain: { + {userProfile.priority_distribution.length > 0 ? ( + ({ + priority: capitalizeFirstLetter(priority.priority ?? "None"), + value: priority.priority_count, + }))} + height="300px" + indexBy="priority" + keys={["value"]} + borderRadius={4} + padding={0.7} + customYAxisTickValues={userProfile.priority_distribution.map((p) => p.priority_count)} + tooltip={(datum) => ( +
+ + {datum.data.priority}: + {datum.value} +
+ )} + colors={(datum) => { + if (datum.data.priority === "Urgent") return "#991b1b"; + else if (datum.data.priority === "High") return "#ef4444"; + else if (datum.data.priority === "Medium") return "#f59e0b"; + else if (datum.data.priority === "Low") return "#16a34a"; + else return "#e5e5e5"; + }} + theme={{ + axis: { + domain: { + line: { + stroke: "transparent", + }, + }, + }, + grid: { line: { stroke: "transparent", }, }, - }, - grid: { - line: { - stroke: "transparent", - }, - }, - }} - /> + }} + /> + ) : ( +
+ +
+ )}
) : (
diff --git a/apps/app/components/profile/overview/state-distribution.tsx b/apps/app/components/profile/overview/state-distribution.tsx index 903ef7c24..5d283aeec 100644 --- a/apps/app/components/profile/overview/state-distribution.tsx +++ b/apps/app/components/profile/overview/state-distribution.tsx @@ -1,5 +1,7 @@ // ui -import { PieGraph } from "components/ui"; +import { ProfileEmptyState, PieGraph } from "components/ui"; +// image +import stateGraph from "public/empty-state/state_graph.svg"; // types import { IUserProfileData, IUserStateDistribution } from "types"; // constants @@ -17,64 +19,72 @@ export const ProfileStateDistribution: React.FC = ({ stateDistribution, u

Issues by State

-
-
- ({ - id: group.state_group, - label: group.state_group, - value: group.state_count, - color: STATE_GROUP_COLORS[group.state_group], - })) ?? [] - } - height="250px" - innerRadius={0.6} - cornerRadius={5} - padAngle={2} - enableArcLabels - arcLabelsTextColor="#000000" - enableArcLinkLabels={false} - activeInnerRadiusOffset={5} - colors={(datum) => datum.data.color} - tooltip={(datum) => ( -
- - {datum.datum.label} issues: - {" "} - {datum.datum.value} -
- )} - margin={{ - top: 32, - right: 0, - bottom: 32, - left: 0, - }} - /> -
-
-
- {stateDistribution.map((group) => ( -
-
-
-
{group.state_group}
+ {userProfile.state_distribution.length > 0 ? ( +
+
+ ({ + id: group.state_group, + label: group.state_group, + value: group.state_count, + color: STATE_GROUP_COLORS[group.state_group], + })) ?? [] + } + height="250px" + innerRadius={0.6} + cornerRadius={5} + padAngle={2} + enableArcLabels + arcLabelsTextColor="#000000" + enableArcLinkLabels={false} + activeInnerRadiusOffset={5} + colors={(datum) => datum.data.color} + tooltip={(datum) => ( +
+ + {datum.datum.label} issues: + {" "} + {datum.datum.value}
-
{group.state_count}
-
- ))} + )} + margin={{ + top: 32, + right: 0, + bottom: 32, + left: 0, + }} + /> +
+
+
+ {stateDistribution.map((group) => ( +
+
+
+
{group.state_group}
+
+
{group.state_count}
+
+ ))} +
-
+ ) : ( + + )}
); diff --git a/apps/app/components/ui/index.ts b/apps/app/components/ui/index.ts index d887c7911..b75111b1e 100644 --- a/apps/app/components/ui/index.ts +++ b/apps/app/components/ui/index.ts @@ -23,3 +23,4 @@ export * from "./product-updates-modal"; export * from "./integration-and-import-export-banner"; export * from "./range-datepicker"; export * from "./circular-progress"; +export * from "./profile-empty-state"; \ No newline at end of file diff --git a/apps/app/components/ui/profile-empty-state.tsx b/apps/app/components/ui/profile-empty-state.tsx new file mode 100644 index 000000000..12af25794 --- /dev/null +++ b/apps/app/components/ui/profile-empty-state.tsx @@ -0,0 +1,21 @@ +import React from "react"; + +import Image from "next/image"; + +type Props = { + title: string; + description?: React.ReactNode; + image: any; +}; + +export const ProfileEmptyState: React.FC = ({ title, description, image }) => ( +
+
+
+ {title} +
+
{title}
+ {description &&

{description}

} +
+
+); diff --git a/apps/app/public/empty-state/priority_graph.svg b/apps/app/public/empty-state/priority_graph.svg new file mode 100644 index 000000000..15d8f9b4c --- /dev/null +++ b/apps/app/public/empty-state/priority_graph.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/apps/app/public/empty-state/recent_activity.svg b/apps/app/public/empty-state/recent_activity.svg new file mode 100644 index 000000000..48ea2277c --- /dev/null +++ b/apps/app/public/empty-state/recent_activity.svg @@ -0,0 +1,3 @@ + + + diff --git a/apps/app/public/empty-state/state_graph.svg b/apps/app/public/empty-state/state_graph.svg new file mode 100644 index 000000000..7265784a8 --- /dev/null +++ b/apps/app/public/empty-state/state_graph.svg @@ -0,0 +1,26 @@ + + + + + + + + + + + + + + + + + + + + + + + + + +