mirror of
https://github.com/makeplane/plane
synced 2024-06-14 14:31:34 +00:00
style: workspace dashboard (#460)
* style: workspace dashboard * feat: activity graph * chore: change tile colors for activity graph * fix: activity graph tiles order, color * style: activity intensity
This commit is contained in:
parent
27324ddd93
commit
a84abc60b2
@ -52,7 +52,7 @@ export const ActivityGraph = () => {
|
|||||||
const date = new Date(year, month, 1);
|
const date = new Date(year, month, 1);
|
||||||
|
|
||||||
while (date.getMonth() === month && date < new Date()) {
|
while (date.getMonth() === month && date < new Date()) {
|
||||||
dates.push(new Date(date));
|
dates.push(renderDateFormat(new Date(date)));
|
||||||
date.setDate(date.getDate() + 1);
|
date.setDate(date.getDate() + 1);
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -68,22 +68,20 @@ export const ActivityGraph = () => {
|
|||||||
...getDatesOfMonth(recentMonths[5]),
|
...getDatesOfMonth(recentMonths[5]),
|
||||||
];
|
];
|
||||||
|
|
||||||
const getDatesOnDay = (dates: Date[], day: number) => {
|
|
||||||
const datesOnDay = [];
|
|
||||||
|
|
||||||
for (let i = 0; i < dates.length; i++)
|
|
||||||
if (dates[i].getDay() === day) datesOnDay.push(renderDateFormat(new Date(dates[i])));
|
|
||||||
|
|
||||||
return datesOnDay;
|
|
||||||
};
|
|
||||||
|
|
||||||
const activitiesIntensity = (activityCount: number) => {
|
const activitiesIntensity = (activityCount: number) => {
|
||||||
if (activityCount <= 3) return "opacity-50";
|
if (activityCount <= 3) return "opacity-20";
|
||||||
else if (activityCount > 3 && activityCount <= 6) return "opacity-70";
|
else if (activityCount > 3 && activityCount <= 6) return "opacity-40";
|
||||||
else if (activityCount > 6 && activityCount <= 9) return "opacity-90";
|
else if (activityCount > 6 && activityCount <= 9) return "opacity-80";
|
||||||
else return "";
|
else return "";
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const addPaddingTiles = () => {
|
||||||
|
const firstDateDay = new Date(recentDates[0]).getDay();
|
||||||
|
|
||||||
|
for (let i = 0; i < firstDateDay; i++) recentDates.unshift("");
|
||||||
|
};
|
||||||
|
addPaddingTiles();
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!ref.current) return;
|
if (!ref.current) return;
|
||||||
|
|
||||||
@ -91,7 +89,7 @@ export const ActivityGraph = () => {
|
|||||||
}, [ref]);
|
}, [ref]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="grid place-items-center">
|
<div className="grid place-items-center overflow-x-scroll">
|
||||||
<div className="flex items-start gap-4">
|
<div className="flex items-start gap-4">
|
||||||
<div className="flex flex-col gap-2 pt-6">
|
<div className="flex flex-col gap-2 pt-6">
|
||||||
{DAYS.map((day, index) => (
|
{DAYS.map((day, index) => (
|
||||||
@ -100,53 +98,50 @@ export const ActivityGraph = () => {
|
|||||||
</h6>
|
</h6>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
<div className="w-full">
|
<div>
|
||||||
<div className="flex items-center justify-between" style={{ width: `${width}px` }}>
|
<div className="flex items-center justify-between" style={{ width: `${width}px` }}>
|
||||||
{recentMonths.map((month) => (
|
{recentMonths.map((month, index) => (
|
||||||
<h6 key={month.getMonth()} className="w-full text-xs">
|
<h6 key={index} className="w-full text-xs">
|
||||||
{MONTHS[month.getMonth()].substring(0, 3)}
|
{MONTHS[month.getMonth()].substring(0, 3)}
|
||||||
</h6>
|
</h6>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
<div className="mt-1.5 space-y-2" ref={ref}>
|
<div
|
||||||
{DAYS.map((day, index) => (
|
className="mt-2 grid w-full grid-flow-col gap-2"
|
||||||
<div key={day} className="flex items-start gap-2">
|
style={{ gridTemplateRows: "repeat(7, minmax(0, 1fr))" }}
|
||||||
{getDatesOnDay(recentDates, index).map((date) => {
|
ref={ref}
|
||||||
const isActive = userActivity?.find((a) => a.created_date === date);
|
>
|
||||||
|
{recentDates.map((date) => {
|
||||||
|
const isActive = userActivity?.find((a) => a.created_date === date);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Tooltip
|
<Tooltip
|
||||||
key={date}
|
key={date}
|
||||||
tooltipContent={`${
|
tooltipContent={`${
|
||||||
isActive ? isActive.activity_count : 0
|
isActive ? isActive.activity_count : 0
|
||||||
} activities on ${renderShortNumericDateFormat(date)}`}
|
} activities on ${renderShortNumericDateFormat(date)}`}
|
||||||
theme="dark"
|
theme="dark"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
className={`h-4 w-4 rounded ${
|
className={`${
|
||||||
isActive
|
date === "" ? "pointer-events-none opacity-0" : ""
|
||||||
? `bg-green-500 ${activitiesIntensity(isActive.activity_count)}`
|
} h-4 w-4 rounded ${
|
||||||
: "bg-gray-100"
|
isActive
|
||||||
}`}
|
? `bg-blue-500 ${activitiesIntensity(isActive.activity_count)}`
|
||||||
/>
|
: "bg-gray-100"
|
||||||
</Tooltip>
|
}`}
|
||||||
);
|
/>
|
||||||
})}
|
</Tooltip>
|
||||||
</div>
|
);
|
||||||
))}
|
})}
|
||||||
</div>
|
</div>
|
||||||
{/* <div className="mt-4 grid w-full grid-flow-row grid-rows-6 gap-2">
|
|
||||||
{recentDates.map((date) => (
|
|
||||||
<div className="h-4 w-4 rounded bg-gray-100" />
|
|
||||||
))}
|
|
||||||
</div> */}
|
|
||||||
<div className="mt-8 flex items-center gap-2 text-xs">
|
<div className="mt-8 flex items-center gap-2 text-xs">
|
||||||
<span>Less</span>
|
<span>Less</span>
|
||||||
<span className="h-4 w-4 rounded bg-gray-100" />
|
<span className="h-4 w-4 rounded bg-gray-100" />
|
||||||
<span className="h-4 w-4 rounded bg-green-500 opacity-50" />
|
<span className="h-4 w-4 rounded bg-blue-500 opacity-20" />
|
||||||
<span className="h-4 w-4 rounded bg-green-500 opacity-70" />
|
<span className="h-4 w-4 rounded bg-blue-500 opacity-40" />
|
||||||
<span className="h-4 w-4 rounded bg-green-500 opacity-90" />
|
<span className="h-4 w-4 rounded bg-blue-500 opacity-80" />
|
||||||
<span className="h-4 w-4 rounded bg-green-500" />
|
<span className="h-4 w-4 rounded bg-blue-500" />
|
||||||
<span>More</span>
|
<span>More</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
Loading…
Reference in New Issue
Block a user