thunderstrike/plane
thunderstrike/plane
2
0
Fork 0
forked from github/plane
Code Pull Requests Activity

chore: x-axis tick values for assignees (#1060)

Browse Source 
* style: new custom analytics ui

* fix: x-axis assignee tick values

* chore: assignee names in the custom analytics table
This commit is contained in:
Aaryan Khandelwal 2023-05-16 15:11:40 +05:30 committed by GitHub
parent c060f7db30
commit d575e8ec6b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 233 additions and 140 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
apps/app/components/analytics/custom-analytics/graph/index.tsx
View File

@ -68,7 +68,50 @@ export const AnalyticsGraph: React.FC<Props> = ({
customYAxisTickValues={generateYAxisTickValues()}
tooltip={(datum) => <CustomTooltip datum={datum} params={params} />}
height={fullScreen ? "400px" : "300px"}
margin={{ right: 20, bottom: longestXAxisLabel.length * 5 + 20 }}
margin={{
right: 20,
bottom: params.x_axis === "assignees__email" ? 50 : longestXAxisLabel.length * 5 + 20,
}}
axisBottom={{
tickSize: 0,
tickPadding: 10,
tickRotation: barGraphData.data.length > 7 ? -45 : 0,
renderTick:
params.x_axis === "assignees__email"
? (datum) => {
const avatar = analytics.extras.assignee_details?.find(
(a) => a.assignees__email === datum.value
)?.assignees__avatar;
console.log(avatar);
if (avatar && avatar !== "")
return (
<g transform={`translate(${datum.x},${datum.y})`}>
<image
x={-8}
y={10}
width={16}
height={16}
xlinkHref={avatar}
style={{ clipPath: "circle(50%)" }}
/>
</g>
);
else
return (
<g transform={`translate(${datum.x},${datum.y})`}>
<circle cy={18} r={8} fill="#374151" />
<text x={0} y={21} textAnchor="middle" fontSize={9} fill="#ffffff">
{datum.value && datum.value !== "None"
? `${datum.value}`.toUpperCase()[0]
: "?"}
</text>
</g>
);
}
: undefined,
}}
theme={{
background: "rgb(var(--color-bg-base))",
axis: {},

4
apps/app/components/analytics/custom-analytics/select-bar.tsx
View File

@ -23,9 +23,9 @@ export const AnalyticsSelectBar: React.FC<Props> = ({
isProjectLevel,
}) => (
<div
className={`grid items-center gap-4 p-5 pb-0.5 ${
className={`grid items-center gap-4 px-5 py-2.5 ${
isProjectLevel ? "grid-cols-3" : "grid-cols-2"
} ${fullScreen ? "lg:grid-cols-4" : ""}`}
} ${fullScreen ? "lg:grid-cols-4 md:py-5" : ""}`}
>
{!isProjectLevel && (
<div>

8
apps/app/components/analytics/custom-analytics/sidebar.tsx
View File

@ -108,9 +108,9 @@ export const AnalyticsSidebar: React.FC<Props> = ({
return (
<div
className={`p-5 pb-0 flex flex-col space-y-2 md:space-y-4 overflow-hidden ${
className={`p-5 pb-0 flex flex-col space-y-2 ${
fullScreen
? "pb-5 border-l border-brand-base md:h-full md:pb-5 md:border-l md:border-brand-base"
? "pb-5 border-l border-brand-base md:h-full md:pb-5 md:border-l md:border-brand-base md:space-y-4 overflow-hidden"
: ""
}`}
>
@ -176,7 +176,7 @@ export const AnalyticsSidebar: React.FC<Props> = ({
{projectId ? (
cycleId && cycleDetails ? (
<div className="hidden md:block h-full overflow-y-auto">
<h4 className="font-medium break-all">{cycleDetails.name}</h4>
<h4 className="font-medium break-all">Analytics for {cycleDetails.name}</h4>
<div className="space-y-4 mt-4">
<div className="flex items-center gap-2 text-xs">
<h6 className="text-brand-secondary">Lead</h6>
@ -204,7 +204,7 @@ export const AnalyticsSidebar: React.FC<Props> = ({
</div>
) : moduleId && moduleDetails ? (
<div className="hidden md:block h-full overflow-y-auto">
<h4 className="font-medium break-all">{moduleDetails.name}</h4>
<h4 className="font-medium break-all">Analytics for {moduleDetails.name}</h4>
<div className="space-y-4 mt-4">
<div className="flex items-center gap-2 text-xs">
<h6 className="text-brand-secondary">Lead</h6>

27
apps/app/components/analytics/custom-analytics/table.tsx
View File

@ -21,7 +21,19 @@ type Props = {
yAxisKey: "count" | "estimate";
};
export const AnalyticsTable: React.FC<Props> = ({ analytics, barGraphData, params, yAxisKey }) => (
export const AnalyticsTable: React.FC<Props> = ({ analytics, barGraphData, params, yAxisKey }) => {
const renderAssigneeName = (email: string): string => {
const assignee = analytics.extras.assignee_details.find((a) => a.assignees__email === email);
if (!assignee) return "No assignee";
if (assignee.assignees__first_name !== "")
return assignee.assignees__first_name + " " + assignee.assignees__last_name;
return email;
};
return (
<div className="flow-root">
<div className="overflow-x-auto">
<div className="inline-block min-w-full align-middle">
@ -53,7 +65,11 @@ export const AnalyticsTable: React.FC<Props> = ({ analytics, barGraphData, param
}}
/>
)}
{DATE_KEYS.includes(params.segment ?? "") ? renderMonthAndYear(key) : key}
{DATE_KEYS.includes(params.segment ?? "")
? renderMonthAndYear(key)
: params.segment === "assignees__email"
? renderAssigneeName(key)
: key}
</div>
</th>
))
@ -92,7 +108,9 @@ export const AnalyticsTable: React.FC<Props> = ({ analytics, barGraphData, param
}}
/>
)}
{addSpaceIfCamelCase(`${item.name}`)}
{params.x_axis === "assignees__email"
? renderAssigneeName(`${item.name}`)
: addSpaceIfCamelCase(`${item.name}`)}
</td>
{params.segment ? (
barGraphData.xAxisKeys.map((key, index) => (
@ -113,4 +131,5 @@ export const AnalyticsTable: React.FC<Props> = ({ analytics, barGraphData, param
</div>
</div>
</div>
);
);
};

2
apps/app/components/analytics/scope-and-demand/demand.tsx
View File

@ -37,7 +37,7 @@ export const AnalyticsDemand: React.FC<Props> = ({ defaultAnalytics }) => (
</div>
<p className="text-brand-secondary">{percentage}%</p>
</div>
<div className="bar relative h-1 w-full rounded bg-brand-base">
<div className="bar relative h-1 w-full rounded bg-brand-surface-2">
<div
className="absolute top-0 left-0 h-1 rounded duration-300"
style={{

7
apps/app/components/analytics/scope-and-demand/leaderboard.tsx
View File

@ -3,6 +3,7 @@ import Image from "next/image";
type Props = {
users: {
avatar: string | null;
email: string | null;
firstName: string;
lastName: string;
count: number;
@ -14,8 +15,8 @@ export const AnalyticsLeaderboard: React.FC<Props> = ({ users, title }) => (
<div className="p-3 border border-brand-base rounded-[10px]">
<h6 className="text-base font-medium">{title}</h6>
<div className="mt-3 space-y-3">
{users.map((user, index) => (
<div key={`user-${index}`} className="flex items-start justify-between gap-4 text-xs">
{users.map((user) => (
<div key={user.email ?? "None"} className="flex items-start justify-between gap-4 text-xs">
<div className="flex items-center gap-2">
{user && user.avatar && user.avatar !== "" ? (
<div className="rounded-full h-4 w-4 flex-shrink-0">
@ -24,7 +25,7 @@ export const AnalyticsLeaderboard: React.FC<Props> = ({ users, title }) => (
height="100%"
width="100%"
className="rounded-full"
alt={user.firstName + " " + user.lastName}
alt={user.email ?? "None"}
/>
</div>
) : (

2
apps/app/components/analytics/scope-and-demand/scope-and-demand.tsx
View File

@ -56,6 +56,7 @@ export const ScopeAndDemand: React.FC<Props> = ({ fullScreen = true }) => {
<AnalyticsLeaderboard
users={defaultAnalytics.most_issue_created_user.map((user) => ({
avatar: user.created_by__avatar,
email: user.created_by__email,
firstName: user.created_by__first_name,
lastName: user.created_by__last_name,
count: user.count,
@ -65,6 +66,7 @@ export const ScopeAndDemand: React.FC<Props> = ({ fullScreen = true }) => {
<AnalyticsLeaderboard
users={defaultAnalytics.most_issue_closed_user.map((user) => ({
avatar: user.assignees__avatar,
email: user.assignees__email,
firstName: user.assignees__first_name,
lastName: user.assignees__last_name,
count: user.count,

1
apps/app/components/analytics/select/project.tsx
View File

@ -30,7 +30,6 @@ export const SelectProject: React.FC<Props> = ({ value, onChange, projects }) =>
: "All projects"
}
optionsClassName="min-w-full"
position="right"
noChevron
multiple
/>

13
apps/app/components/analytics/select/segment.tsx
View File

@ -1,3 +1,5 @@
import { useRouter } from "next/router";
// ui
import { CustomSelect } from "components/ui";
// types
@ -11,7 +13,11 @@ type Props = {
params: IAnalyticsParams;
};
export const SelectSegment: React.FC<Props> = ({ value, onChange, params }) => (
export const SelectSegment: React.FC<Props> = ({ value, onChange, params }) => {
const router = useRouter();
const { cycleId, moduleId } = router.query;
return (
<CustomSelect
value={value}
label={
@ -28,6 +34,8 @@ export const SelectSegment: React.FC<Props> = ({ value, onChange, params }) => (
<CustomSelect.Option value={null}>No value</CustomSelect.Option>
{ANALYTICS_X_AXIS_VALUES.map((item) => {
if (params.x_axis === item.value) return null;
if (cycleId && item.value === "issue_cycle__cycle__name") return null;
if (moduleId && item.value === "issue_module__module__name") return null;
return (
<CustomSelect.Option key={item.value} value={item.value}>
@ -36,4 +44,5 @@ export const SelectSegment: React.FC<Props> = ({ value, onChange, params }) => (
);
})}
</CustomSelect>
);
);
};

24
apps/app/components/analytics/select/x-axis.tsx
View File

@ -1,16 +1,22 @@
import { useRouter } from "next/router";
// ui
import { CustomSelect } from "components/ui";
// types
import { IAnalyticsParams, TXAxisValues, TYAxisValues } from "types";
import { TXAxisValues } from "types";
// constants
import { ANALYTICS_X_AXIS_VALUES, ANALYTICS_Y_AXIS_VALUES } from "constants/analytics";
import { ANALYTICS_X_AXIS_VALUES } from "constants/analytics";
type Props = {
value: TXAxisValues;
onChange: (val: string) => void;
};
export const SelectXAxis: React.FC<Props> = ({ value, onChange }) => (
export const SelectXAxis: React.FC<Props> = ({ value, onChange }) => {
const router = useRouter();
const { cycleId, moduleId } = router.query;
return (
<CustomSelect
value={value}
label={<span>{ANALYTICS_X_AXIS_VALUES.find((v) => v.value === value)?.label}</span>}
@ -18,10 +24,16 @@ export const SelectXAxis: React.FC<Props> = ({ value, onChange }) => (
width="w-full"
maxHeight="lg"
>
{ANALYTICS_X_AXIS_VALUES.map((item) => (
{ANALYTICS_X_AXIS_VALUES.map((item) => {
if (cycleId && item.value === "issue_cycle__cycle__name") return null;
if (moduleId && item.value === "issue_module__module__name") return null;
return (
<CustomSelect.Option key={item.value} value={item.value}>
{item.label}
</CustomSelect.Option>
))}
);
})}
</CustomSelect>
);
);
};

2
apps/app/components/analytics/select/y-axis.tsx
View File

@ -1,7 +1,7 @@
// ui
import { CustomSelect } from "components/ui";
// types
import { IAnalyticsParams, TYAxisValues } from "types";
import { TYAxisValues } from "types";
// constants
import { ANALYTICS_Y_AXIS_VALUES } from "constants/analytics";

8
apps/app/types/analytics.d.ts vendored
View File

@ -3,6 +3,12 @@ export interface IAnalyticsResponse {
distribution: IAnalyticsData;
extras: {
colors: IAnalyticsExtra[];
assignee_details: {
assignees__avatar: string | null;
assignees__email: string;
assignees__first_name: string;
assignees__last_name: string;
}[];
};
}
@ -59,6 +65,7 @@ export interface IExportAnalyticsFormData {
export interface IDefaultAnalyticsUser {
assignees__avatar: string | null;
assignees__email: string | null;
assignees__first_name: string;
assignees__last_name: string;
count: number;
@ -69,6 +76,7 @@ export interface IDefaultAnalyticsResponse {
most_issue_closed_user: IDefaultAnalyticsUser[];
most_issue_created_user: {
created_by__avatar: string | null;
created_by__email: string | null;
created_by__first_name: string;
created_by__last_name: string;
count: number;