plane/apps/app/components/analytics/scope-and-demand/scope.tsx
Aaryan Khandelwal 1a534a3c19
feat: plane analytics (#1029)
* chore: global bar graph component

* chore: global pie graph component

* chore: global line graph component

* chore: removed unnecessary file

* chore: refactored global chart components to accept all props

* chore: function to convert response to chart data

* chore: global calendar graph component added

* chore: global scatter plot graph component

* feat: analytics boilerplate created

* chore: null value for segment and project

* chore: clean up file

* chore: change project query param key

* chore: export, refresh buttons, analytics table

* fix: analytics fetch key error

* chore: show only integer values in the y-axis

* chore: custom x-axis tick values and bar colors

* refactor: divide analytics page into granular components

* chore: convert analytics page to modal, save analytics modal

* fix: build error

* fix: modal overflow issues, analytics loading screen

* chore: custom tooltip, refactor: graphs folder structure

* refactor: folder structure, chore: x-axis tick values for larger data

* chore: code cleanup

* chore: remove unnecessary files

* fix: refresh analytics button on error

* feat: scope and demand analytics

* refactor: scope and demand and custom analytics folder structure

* fix: dynamic import type

* chore: minor updates

* feat: project, cycle and module level analytics

* style: project analytics modal

* fix: merge conflicts
2023-05-11 17:38:46 +05:30

99 lines
3.6 KiB
TypeScript

// ui
import { BarGraph, LineGraph } from "components/ui";
// types
import { IDefaultAnalyticsResponse } from "types";
// constants
import { MONTHS_LIST } from "constants/calendar";
type Props = {
defaultAnalytics: IDefaultAnalyticsResponse;
};
export const AnalyticsScope: React.FC<Props> = ({ defaultAnalytics }) => {
const currentMonth = new Date().getMonth();
const startMonth = Math.floor(currentMonth / 3) * 3 + 1;
const quarterMonthsList = [startMonth, startMonth + 1, startMonth + 2];
return (
<div className="rounded-[10px] border border-brand-base">
<h5 className="p-3 text-xs text-green-500">SCOPE</h5>
<div className="divide-y divide-brand-base">
<div>
<h6 className="px-3 text-base font-medium">Pending issues</h6>
<BarGraph
data={defaultAnalytics.pending_issue_user}
indexBy="assignees__email"
keys={["count"]}
height="250px"
colors={() => `#f97316`}
tooltip={(datum) => (
<div className="rounded-md border border-brand-base bg-brand-base p-2 text-xs">
<span className="font-medium text-brand-secondary">
Issue count- {datum.indexValue ?? "No assignee"}:{" "}
</span>
{datum.value}
</div>
)}
axisBottom={{
tickValues: [],
}}
margin={{ top: 20 }}
/>
</div>
<div className="grid grid-cols-1 divide-y divide-brand-base sm:grid-cols-2 sm:divide-x">
<div className="p-3">
<h6 className="text-base font-medium">Most issues created</h6>
<div className="mt-3 space-y-3">
{defaultAnalytics.most_issue_created_user.map((user) => (
<div
key={user.assignees__email}
className="flex items-start justify-between gap-4 text-xs"
>
<span className="break-all text-brand-secondary">{user.assignees__email}</span>
<span className="flex-shrink-0">{user.count}</span>
</div>
))}
</div>
</div>
<div className="p-3">
<h6 className="text-base font-medium">Most issues closed</h6>
<div className="mt-3 space-y-3">
{defaultAnalytics.most_issue_closed_user.map((user) => (
<div
key={user.assignees__email}
className="flex items-start justify-between gap-4 text-xs"
>
<span className="break-all text-brand-secondary">{user.assignees__email}</span>
<span className="flex-shrink-0">{user.count}</span>
</div>
))}
</div>
</div>
</div>
<div className="py-3">
<h1 className="px-3 text-base font-medium">Issues closed in a year</h1>
<LineGraph
data={[
{
id: "issues_closed",
color: "rgb(var(--color-accent))",
data: quarterMonthsList.map((month) => ({
x: MONTHS_LIST.find((m) => m.value === month)?.label.substring(0, 3),
y:
defaultAnalytics.issue_completed_month_wise.find((data) => data.month === month)
?.count || 0,
})),
},
]}
height="300px"
colors={(datum) => datum.color}
curve="monotoneX"
margin={{ top: 20 }}
enableArea
/>
</div>
</div>
</div>
);
};