chore: change charts library (#1305)

* fix: dashboard charts

* fix: cycles new charts

* chore: sidebar burn down chart and calendar graph

* chore: update dashboard line and pie graph

* chore: update axes width of burndown chart

---------

Co-authored-by: Dakshesh Jain <dakshesh.jain14@gmail.com>

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

@@ -1,7 +1,7 @@
-import { useCallback, useState } from "react";
-
-// recharts
-import { Cell, Legend, Pie, PieChart, ResponsiveContainer, Sector } from "recharts";
+// ui
+import { PieGraph } from "components/ui";
+// helpers
+import { capitalizeFirstLetter } from "helpers/string.helper";
 // types
 import { IUserStateDistribution } from "types";
 // constants
@@ -11,113 +11,52 @@ type Props = {
   groupedIssues: IUserStateDistribution[] | undefined;
 };
 
-export const IssuesPieChart: React.FC<Props> = ({ groupedIssues }) => {
-  const [activeIndex, setActiveIndex] = useState(0);
-
-  const onPieEnter = useCallback(
-    (_: any, index: number) => {
-      setActiveIndex(index);
-    },
-    [setActiveIndex]
-  );
-
-  const renderActiveShape = ({
-    cx,
-    cy,
-    midAngle,
-    innerRadius,
-    outerRadius,
-    startAngle,
-    endAngle,
-    fill,
-    payload,
-    value,
-  }: any) => {
-    const RADIAN = Math.PI / 180;
-    const sin = Math.sin(-RADIAN * midAngle);
-    const cos = Math.cos(-RADIAN * midAngle);
-    const sx = cx + (outerRadius + 10) * cos;
-    const sy = cy + (outerRadius + 10) * sin;
-    const mx = cx + (outerRadius + 30) * cos;
-    const my = cy + (outerRadius + 30) * sin;
-    const ex = mx + (cos >= 0 ? 1 : -1) * 22;
-    const ey = my;
-    const textAnchor = cos >= 0 ? "start" : "end";
-
-    return (
-      <g>
-        <text x={cx} y={cy} dy={8} className="capitalize" textAnchor="middle" fill={fill}>
-          {payload.state_group}
-        </text>
-        <Sector
-          cx={cx}
-          cy={cy}
-          innerRadius={innerRadius}
-          outerRadius={outerRadius}
-          startAngle={startAngle}
-          endAngle={endAngle}
-          fill={fill}
-        />
-        <Sector
-          cx={cx}
-          cy={cy}
-          startAngle={startAngle}
-          endAngle={endAngle}
-          innerRadius={outerRadius + 6}
-          outerRadius={outerRadius + 10}
-          fill={fill}
-        />
-        <path d={`M${sx},${sy}L${mx},${my}L${ex},${ey}`} stroke={fill} fill="none" />
-        <circle cx={ex} cy={ey} r={2} fill={fill} stroke="none" />
-        <text x={ex + (cos >= 0 ? 1 : -1) * 12} y={ey} textAnchor={textAnchor} fill="#858e96">
-          {value} issues
-        </text>
-      </g>
-    );
-  };
-
-  return (
-    <div>
-      <h3 className="mb-2 font-semibold">Issues by States</h3>
-      <div className="rounded-[10px] border border-brand-base bg-brand-base p-4">
-        <ResponsiveContainer width="100%" height={320}>
-          <PieChart>
-            <Pie
-              data={groupedIssues}
-              dataKey="state_count"
-              nameKey="state_group"
-              cx="50%"
-              cy="50%"
-              fill="#8884d8"
-              innerRadius={70}
-              outerRadius={90}
-              activeIndex={activeIndex}
-              activeShape={renderActiveShape}
-              onMouseEnter={onPieEnter}
-            >
-              {groupedIssues?.map((cell) => (
-                <Cell
-                  key={cell.state_group}
-                  fill={STATE_GROUP_COLORS[cell.state_group.toLowerCase()]}
-                />
-              ))}
-            </Pie>
-            <Legend
-              layout="vertical"
-              verticalAlign="middle"
-              align="right"
-              height={36}
-              payload={[
-                { value: "Backlog", type: "square", color: STATE_GROUP_COLORS.backlog },
-                { value: "Unstarted", type: "square", color: STATE_GROUP_COLORS.unstarted },
-                { value: "Started", type: "square", color: STATE_GROUP_COLORS.started },
-                { value: "Completed", type: "square", color: STATE_GROUP_COLORS.completed },
-                { value: "Cancelled", type: "square", color: STATE_GROUP_COLORS.cancelled },
-              ]}
-            />
-          </PieChart>
-        </ResponsiveContainer>
-      </div>
+export const IssuesPieChart: React.FC<Props> = ({ groupedIssues }) => (
+  <div>
+    <h3 className="mb-2 font-semibold">Issues by States</h3>
+    <div className="rounded-[10px] border border-brand-base bg-brand-base p-4">
+      <PieGraph
+        data={
+          groupedIssues?.map((cell) => ({
+            id: cell.state_group,
+            label: cell.state_group,
+            value: cell.state_count,
+            color: STATE_GROUP_COLORS[cell.state_group.toLowerCase()],
+          })) ?? []
+        }
+        height="320px"
+        innerRadius={0.5}
+        arcLinkLabel={(cell) => `${capitalizeFirstLetter(cell.label.toString())} (${cell.value})`}
+        legends={[
+          {
+            anchor: "right",
+            direction: "column",
+            justify: false,
+            translateX: 0,
+            translateY: 56,
+            itemsSpacing: 10,
+            itemWidth: 100,
+            itemHeight: 18,
+            itemTextColor: "rgb(var(--color-text-secondary))",
+            itemDirection: "left-to-right",
+            itemOpacity: 1,
+            symbolSize: 12,
+            symbolShape: "square",
+            data:
+              groupedIssues?.map((cell) => ({
+                id: cell.state_group,
+                label: capitalizeFirstLetter(cell.state_group),
+                value: cell.state_count,
+                color: STATE_GROUP_COLORS[cell.state_group.toLowerCase()],
+              })) ?? [],
+          },
+        ]}
+        activeInnerRadiusOffset={5}
+        colors={(datum) => datum.data.color}
+        theme={{
+          background: "rgb(var(--color-bg-base))",
+        }}
+      />
     </div>
-  );
-};
+  </div>
+);