Mirrors/plane
1
0
Fork 0
mirror of https://github.com/makeplane/plane.git synced 2026-07-12 21:40:18 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix: tooltip + onClick for states (#1449)

Browse Source
This commit is contained in:
Akshita Goyal
2024-10-11 16:17:26 +05:30
committed by GitHub
parent 8bf6a5a2b1
commit be8407ab41
3 changed files with 24 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
web/ee/components/cycles/active-cycle/cycle-chart/chart.tsx
View File

@@ -110,7 +110,7 @@ export const ActiveCycleChart = observer((props: Props) => {
</defs>
<Tooltip
isAnimationActive={false}
content={<CustomTooltip active payload={[]} label={""} plotType={plotType} />}
content={<CustomTooltip active payload={[]} label={""} plotType={plotType} endDate={endDate}/>}
/>
{/* Cartesian axis */}
<XAxis

4
web/ee/components/cycles/active-cycle/cycle-chart/tooltip.tsx
View File

@@ -5,12 +5,14 @@ type Props = {
payload: any; // TODO: fix type
label: string;
plotType: string;
endDate: string;
};
const CustomTooltip = ({ active, payload, label, plotType }: Props) => {
const CustomTooltip = ({ active, payload, label, plotType, endDate }: Props) => {
if (active && payload && payload.length) {
payload = payload[0]?.payload;
const [year, month, day] = label?.split("-");
const monthName = new Date(label).toLocaleString("default", { month: "short" });
if (payload.date > endDate) return null;
return (
<Card className="flex flex-col" spacing={ECardSpacing.SM}>
<p className="text-xs text-custom-text-400 border-b pb-2">{`${day} ${monthName}'${parseInt(year) % 100}`}</p>

30
web/ee/components/cycles/active-cycle/summary.tsx
View File

@@ -18,10 +18,9 @@ type Props = {
handleFiltersUpdate: (key: keyof IIssueFilterOptions, value: string[], redirect?: boolean) => void;
parentWidth?: number;
};
const states = ["completed", "started", "unstarted", "backlog"];
const Summary = observer((props: Props) => {
const { setAreaToHighlight, data, plotType, estimateType, progressLoader, handleFiltersUpdate, parentWidth } = props;
const { setAreaToHighlight, data, plotType, estimateType, handleFiltersUpdate, parentWidth } = props;
// store hooks
const { groupedProjectStates } = useProjectState();
@@ -61,18 +60,26 @@ const Summary = observer((props: Props) => {
key: "actual",
showBg: true,
color: colors.actual,
states: plotType === "burndown" ? ["started", "unstarted", "backlog", "cancelled"] : ["completed"],
},
{
group: "Started",
key: "started",
showBg: true,
color: colors.startedStroke,
states: ["started"],
},
{
group: "Scope",
key: "scope",
showBg: false,
color: colors.scopeStroke,
states: ["started", "unstarted", "backlog", "completed"],
},
{ group: "Scope", key: "scope", showBg: false, color: colors.scopeStroke },
],
secondaryStates: [
{ group: "Unstarted", key: "unstarted" },
{ group: "Backlog", key: "backlog" },
{ group: "Unstarted", key: "unstarted", states: ["unstarted"] },
{ group: "Backlog", key: "backlog", states: ["backlog"] },
],
};
@@ -120,9 +127,12 @@ const Summary = observer((props: Props) => {
onMouseEnter={() => setAreaToHighlight(group.key)}
onMouseLeave={() => setAreaToHighlight("")}
onClick={() => {
if (groupedProjectStates && states.includes(group.key)) {
const states = groupedProjectStates[group.key].map((state) => state.id);
handleFiltersUpdate("state", states, true);
if (groupedProjectStates) {
const states = group.states?.reduce(
(acc, state) => acc.concat(groupedProjectStates[state].map((state) => state.id)),
[] as string[]
);
handleFiltersUpdate("state", states || [], true);
}
}}
>
@@ -157,10 +167,10 @@ const Summary = observer((props: Props) => {
</div>
{stateGroups.secondaryStates.map((group, index) => (
<div
className="flex text-sm cursor-pointer p-2"
className="flex text-sm cursor-pointer p-2 rounded hover:bg-custom-background-90"
key={index}
onClick={() => {
if (groupedProjectStates && states.includes(group.key)) {
if (groupedProjectStates) {
const states = groupedProjectStates[group.key].map((state) => state.id);
handleFiltersUpdate("state", states, true);
}