From 379d258375f667fbf01d267cc414b844f1177bb7 Mon Sep 17 00:00:00 2001
From: pablohashescobar <118773738+pablohashescobar@users.noreply.github.com>
Date: Wed, 28 Jun 2023 19:09:44 +0530
Subject: [PATCH] fix: charts design and mutation (#1426) (#1427)

* fix: pie chart overlap issue

* fix: burndown chart mutation

* fix: burndown chart mutation

Co-authored-by: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com>
---
 .../components/core/board-view/single-issue.tsx  |  3 +++
 .../components/core/list-view/single-issue.tsx   |  3 +++
 .../core/spreadsheet-view/single-issue.tsx       |  5 +++++
 .../components/workspace/issues-pie-chart.tsx    | 16 +++++++++++++---
 4 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/apps/app/components/core/board-view/single-issue.tsx b/apps/app/components/core/board-view/single-issue.tsx
index 24a3e35a7..6753e84cd 100644
--- a/apps/app/components/core/board-view/single-issue.tsx
+++ b/apps/app/components/core/board-view/single-issue.tsx
@@ -173,6 +173,9 @@ export const SingleBoardIssue: React.FC<Props> = ({
         .patchIssue(workspaceSlug as string, projectId as string, issue.id, formData, user)
         .then(() => {
           mutate(fetchKey);
+
+          if (cycleId) mutate(CYCLE_DETAILS(cycleId as string));
+          if (moduleId) mutate(MODULE_DETAILS(moduleId as string));
         });
     },
     [
diff --git a/apps/app/components/core/list-view/single-issue.tsx b/apps/app/components/core/list-view/single-issue.tsx
index f4d749452..774fbb02d 100644
--- a/apps/app/components/core/list-view/single-issue.tsx
+++ b/apps/app/components/core/list-view/single-issue.tsx
@@ -147,6 +147,9 @@ export const SingleListIssue: React.FC<Props> = ({
         .patchIssue(workspaceSlug as string, projectId as string, issue.id, formData, user)
         .then(() => {
           mutate(fetchKey);
+
+          if (cycleId) mutate(CYCLE_DETAILS(cycleId as string));
+          if (moduleId) mutate(MODULE_DETAILS(moduleId as string));
         });
     },
     [
diff --git a/apps/app/components/core/spreadsheet-view/single-issue.tsx b/apps/app/components/core/spreadsheet-view/single-issue.tsx
index 22ffb0fb4..ada1e3689 100644
--- a/apps/app/components/core/spreadsheet-view/single-issue.tsx
+++ b/apps/app/components/core/spreadsheet-view/single-issue.tsx
@@ -30,7 +30,9 @@ import useToast from "hooks/use-toast";
 import issuesService from "services/issues.service";
 // constant
 import {
+  CYCLE_DETAILS,
   CYCLE_ISSUES_WITH_PARAMS,
+  MODULE_DETAILS,
   MODULE_ISSUES_WITH_PARAMS,
   PROJECT_ISSUES_LIST_WITH_PARAMS,
   SUB_ISSUES,
@@ -142,6 +144,9 @@ export const SingleSpreadsheetIssue: React.FC<Props> = ({
             mutate(SUB_ISSUES(issue.parent as string));
           } else {
             mutate(fetchKey);
+
+            if (cycleId) mutate(CYCLE_DETAILS(cycleId as string));
+            if (moduleId) mutate(MODULE_DETAILS(moduleId as string));
           }
         })
         .catch((error) => {
diff --git a/apps/app/components/workspace/issues-pie-chart.tsx b/apps/app/components/workspace/issues-pie-chart.tsx
index ada35d080..c83ef1de2 100644
--- a/apps/app/components/workspace/issues-pie-chart.tsx
+++ b/apps/app/components/workspace/issues-pie-chart.tsx
@@ -25,8 +25,12 @@ export const IssuesPieChart: React.FC<Props> = ({ groupedIssues }) => (
           })) ?? []
         }
         height="320px"
-        innerRadius={0.5}
-        arcLinkLabel={(cell) => `${capitalizeFirstLetter(cell.label.toString())} (${cell.value})`}
+        innerRadius={0.6}
+        cornerRadius={5}
+        padAngle={2}
+        enableArcLabels
+        arcLabelsTextColor="#000000"
+        enableArcLinkLabels={false}
         legends={[
           {
             anchor: "right",
@@ -53,8 +57,14 @@ export const IssuesPieChart: React.FC<Props> = ({ groupedIssues }) => (
         ]}
         activeInnerRadiusOffset={5}
         colors={(datum) => datum.data.color}
+        tooltip={(datum) => (
+          <div className="flex items-center gap-2 rounded-md border border-brand-base bg-brand-surface-2 p-2 text-xs">
+            <span className="text-brand-secondary capitalize">{datum.datum.label} issues:</span>{" "}
+            {datum.datum.value}
+          </div>
+        )}
         theme={{
-          background: "rgb(var(--color-bg-base))",
+          background: "transparent",
         }}
       />
     </div>