github/plane
0
0
Fork 1
mirror of https://github.com/makeplane/plane synced 2024-06-14 14:31:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore: project analytics improvement (#4457)

Browse Source
This commit is contained in:
Anmol Singh Bhatia 2024-05-15 18:43:07 +05:30 committed by GitHub
parent 69c9ae212b
commit 061d52727e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 26 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
web/components/analytics/scope-and-demand/demand.tsx
View File

@ -9,7 +9,6 @@ type Props = {
export const AnalyticsDemand: React.FC<Props> = ({ defaultAnalytics }) => (
<div className="space-y-3 rounded-[10px] border border-custom-border-200 p-3">
<h5 className="text-xs text-red-500">DEMAND</h5>
<div>
<h4 className="text-base font-medium text-custom-text-100">Total open tasks</h4>
<h3 className="mt-1 text-xl font-semibold">{defaultAnalytics.open_issues}</h3>

10
web/components/analytics/scope-and-demand/scope-and-demand.tsx
View File

@ -43,6 +43,11 @@ export const ScopeAndDemand: React.FC<Props> = (props) => {
workspaceSlug ? () => analyticsService.getDefaultAnalytics(workspaceSlug.toString(), params) : null
);
// scope data
const pendingIssues = defaultAnalytics?.pending_issue_user ?? [];
const pendingUnAssignedIssues = pendingIssues?.filter((issue) => issue.assignees__id === null);
const pendingAssignedIssues = pendingIssues?.filter((issue) => issue.assignees__id !== null);
return (
<>
{!defaultAnalyticsError ? (
@ -50,7 +55,10 @@ export const ScopeAndDemand: React.FC<Props> = (props) => {
<div className="h-full overflow-y-auto p-5 text-sm vertical-scrollbar scrollbar-lg">
<div className={`grid grid-cols-1 gap-5 ${fullScreen ? "md:grid-cols-2" : ""}`}>
<AnalyticsDemand defaultAnalytics={defaultAnalytics} />
<AnalyticsScope defaultAnalytics={defaultAnalytics} />
<AnalyticsScope
pendingUnAssignedIssues={pendingUnAssignedIssues}
pendingAssignedIssues={pendingAssignedIssues}
/>
<AnalyticsLeaderBoard
users={defaultAnalytics.most_issue_created_user?.map((user) => ({
avatar: user?.created_by__avatar,

30
web/components/analytics/scope-and-demand/scope.tsx
View File

@ -1,32 +1,36 @@
// ui
import { IDefaultAnalyticsResponse } from "@plane/types";
import { IDefaultAnalyticsUser } from "@plane/types";
import { BarGraph, ProfileEmptyState } from "@/components/ui";
// image
import emptyBarGraph from "public/empty-state/empty_bar_graph.svg";
// types
type Props = {
defaultAnalytics: IDefaultAnalyticsResponse;
pendingUnAssignedIssues: IDefaultAnalyticsUser[];
pendingAssignedIssues: IDefaultAnalyticsUser[];
};
export const AnalyticsScope: React.FC<Props> = ({ defaultAnalytics }) => (
<div className="rounded-[10px] border border-custom-border-200">
<h5 className="p-3 text-xs text-green-500">SCOPE</h5>
export const AnalyticsScope: React.FC<Props> = ({ pendingUnAssignedIssues, pendingAssignedIssues }) => (
<div className="rounded-[10px] border border-custom-border-200 p-3">
<div className="divide-y divide-custom-border-200">
<div>
<h6 className="px-3 text-base font-medium">Pending issues</h6>
{defaultAnalytics.pending_issue_user && defaultAnalytics.pending_issue_user.length > 0 ? (
<div className="flex items-center justify-between">
<h6 className=" text-base font-medium">Pending issues</h6>
<div className="relative flex items-center py-1 px-3 rounded-md gap-2 text-xs text-custom-primary-100 bg-custom-primary-100/10">
Unassigned: {pendingUnAssignedIssues.length}
</div>
</div>
{pendingAssignedIssues && pendingAssignedIssues.length > 0 ? (
<BarGraph
data={defaultAnalytics.pending_issue_user}
data={pendingAssignedIssues}
indexBy="assignees__id"
keys={["count"]}
height="250px"
colors={() => `#f97316`}
customYAxisTickValues={defaultAnalytics.pending_issue_user.map((d) => (d.count > 0 ? d.count : 50))}
customYAxisTickValues={pendingAssignedIssues.map((d) => (d.count > 0 ? d.count : 50))}
tooltip={(datum) => {
const assignee = defaultAnalytics.pending_issue_user.find(
(a) => a.assignees__id === `${datum.indexValue}`
);
const assignee = pendingAssignedIssues.find((a) => a.assignees__id === `${datum.indexValue}`);
return (
<div className="rounded-md border border-custom-border-200 bg-custom-background-80 p-2 text-xs">
@ -39,7 +43,7 @@ export const AnalyticsScope: React.FC<Props> = ({ defaultAnalytics }) => (
}}
axisBottom={{
renderTick: (datum) => {
const assignee = defaultAnalytics.pending_issue_user[datum.tickIndex] ?? "";
const assignee = pendingAssignedIssues[datum.tickIndex] ?? "";
if (assignee && assignee?.assignees__avatar && assignee?.assignees__avatar !== "")
return (