fix: charts design and mutation (#1426)

* fix: pie chart overlap issue

* fix: burndown chart mutation

* fix: burndown chart mutation

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));
         });
     },
     [

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));
         });
     },
     [

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) => {

apps/app/components/workspace/issues-pie-chart.tsx

@@ -25,8 +25,12 @@ export const IssuesPieChart: React.FC<Props> = ({ groupedIssues }) => (
           })) ?? []
         }
         height="320px"
-        innerRadius={0.5}
+        innerRadius={0.6}
-        arcLinkLabel={(cell) => `${capitalizeFirstLetter(cell.label.toString())} (${cell.value})`}
+        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>