diff --git a/apps/app/components/core/sidebar/progress-chart.tsx b/apps/app/components/core/sidebar/progress-chart.tsx
index 9006b58fc..93e11f762 100644
--- a/apps/app/components/core/sidebar/progress-chart.tsx
+++ b/apps/app/components/core/sidebar/progress-chart.tsx
@@ -1,12 +1,11 @@
 import React from "react";
 
-import { XAxis, YAxis, Tooltip, AreaChart, Area, ReferenceLine, TooltipProps} from "recharts";
-
+// ui
+import { LineGraph } from "components/ui";
+// helpers
+import { getDatesInRange, renderShortNumericDateFormat } from "helpers/date-time.helper";
 //types
 import { IIssue } from "types";
-import { NameType, ValueType } from "recharts/types/component/DefaultTooltipContent";
-// helper
-import { getDatesInRange, renderShortNumericDateFormat } from "helpers/date-time.helper";
 
 type Props = {
   issues: IIssue[];
@@ -16,12 +15,40 @@ type Props = {
   height?: number;
 };
 
-const ProgressChart: React.FC<Props> = ({ issues, start, end, width = 360, height = 160  }) => {
+const styleById = {
+  ideal: {
+    strokeDasharray: "6, 3",
+    strokeWidth: 1,
+  },
+  default: {
+    strokeWidth: 1,
+  },
+};
+
+const DashedLine = ({ series, lineGenerator, xScale, yScale }: any) =>
+  series.map(({ id, data, color }: any) => (
+    <path
+      key={id}
+      d={lineGenerator(
+        data.map((d: any) => ({
+          x: xScale(d.data.x),
+          y: yScale(d.data.y),
+        }))
+      )}
+      fill="none"
+      stroke={color ?? "#ddd"}
+      style={styleById[id as keyof typeof styleById] || styleById.default}
+    />
+  ));
+
+const ProgressChart: React.FC<Props> = ({ issues, start, end }) => {
   const startDate = new Date(start);
   const endDate = new Date(end);
+
   const getChartData = () => {
     const dateRangeArray = getDatesInRange(startDate, endDate);
     let count = 0;
+
     const dateWiseData = dateRangeArray.map((d) => {
       const current = d.toISOString().split("T")[0];
       const total = issues.length;
@@ -39,56 +66,67 @@ const ProgressChart: React.FC<Props> = ({ issues, start, end, width = 360, heigh
     return dateWiseData;
   };
 
-  const CustomTooltip = ({ active, payload }: TooltipProps<ValueType, NameType>) => {
-    if (active && payload && payload.length) {
-      return (
-        <div className="rounded-sm bg-brand-surface-1 p-1 text-xs text-brand-base">
-          <p>{payload[0].payload.currentDate}</p>
-        </div>
-      );
-    }
-    return null;
-  };
-  const ChartData = getChartData();
+  const chartData = getChartData();
+
   return (
-    <div className="absolute -left-4  flex h-full w-full  items-center justify-center text-xs">
-      <AreaChart
-        width={width}
-        height={height}
-        data={ChartData}
-        margin={{
-          top: 12,
-          right: 12,
-          left: 0,
-          bottom: 12,
+    <div className="w-full flex justify-center items-center">
+      <LineGraph
+        animate
+        curve="monotoneX"
+        height="160px"
+        width="360px"
+        enableGridY={false}
+        lineWidth={1}
+        margin={{ top: 30, right: 30, bottom: 30, left: 30 }}
+        data={[
+          {
+            id: "pending",
+            color: "#3F76FF",
+            data: chartData.map((item, index) => ({
+              index,
+              x: item.currentDate,
+              y: item.pending,
+              color: "#3F76FF",
+            })),
+            enableArea: true,
+          },
+          {
+            id: "ideal",
+            color: "#a9bbd0",
+            fill: "transparent",
+            data: [
+              {
+                x: chartData[0].currentDate,
+                y: issues.length,
+              },
+              {
+                x: chartData[chartData.length - 1].currentDate,
+                y: 0,
+              },
+            ],
+          },
+        ]}
+        layers={["grid", "markers", "areas", DashedLine, "slices", "points", "axes", "legends"]}
+        axisBottom={{
+          tickValues: chartData.map((item, index) => (index % 2 === 0 ? item.currentDate : "")),
         }}
-      >
-        <defs>
-          <linearGradient id="linearblue" x1="0" y1="0" x2="0" y2="1">
-            <stop offset="0%" stopColor="#3F76FF" stopOpacity={0.7} />
-            <stop offset="50%" stopColor="#3F76FF" stopOpacity={0.1} />
-            <stop offset="100%" stopColor="#3F76FF" stopOpacity={0} />
-          </linearGradient>
-        </defs>
-        <XAxis dataKey="currentDate" tickSize={10} minTickGap={10} />
-        <YAxis tickSize={10} minTickGap={10} allowDecimals={false} />
-        <Tooltip content={<CustomTooltip />} />
-        <Area
-          type="monotone"
-          dataKey="pending"
-          stroke="#8884d8"
-          fill="url(#linearblue)"
-          activeDot={{ r: 8 }}
-        />
-        <ReferenceLine
-          stroke="#16a34a"
-          strokeDasharray="3 3"
-          segment={[
-            { x: `${renderShortNumericDateFormat(endDate)}`, y: 0 },
-            { x: `${renderShortNumericDateFormat(startDate)}`, y: issues.length },
-          ]}
-        />
-      </AreaChart>
+        enablePoints={false}
+        enableArea
+        colors={(datum) => datum.color ?? "#3F76FF"}
+        customYAxisTickValues={[0, issues.length]}
+        gridXValues={chartData.map((item, index) => (index % 2 === 0 ? item.currentDate : ""))}
+        theme={{
+          background: "rgb(var(--color-bg-sidebar))",
+          axis: {
+            domain: {
+              line: {
+                stroke: "rgb(var(--color-border))",
+                strokeWidth: 1,
+              },
+            },
+          },
+        }}
+      />
     </div>
   );
 };
diff --git a/apps/app/components/cycles/sidebar.tsx b/apps/app/components/cycles/sidebar.tsx
index 03747fc3b..2cb5b9fcb 100644
--- a/apps/app/components/cycles/sidebar.tsx
+++ b/apps/app/components/cycles/sidebar.tsx
@@ -485,7 +485,6 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
                 </div>
               </div>
             </div>
-
             <div className="flex w-full flex-col items-center justify-start gap-2 border-t border-brand-base p-6">
               <Disclosure defaultOpen>
                 {({ open }) => (
@@ -552,7 +551,7 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
                                 </div>
                               </div>
                             </div>
-                            <div className="relative h-40 w-80">
+                            <div className="relative">
                               <ProgressChart
                                 issues={issues ?? []}
                                 start={cycle?.start_date ?? ""}
@@ -569,7 +568,6 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
                 )}
               </Disclosure>
             </div>
-
             <div className="flex w-full flex-col items-center justify-start gap-2 border-t border-brand-base p-6">
               <Disclosure defaultOpen>
                 {({ open }) => (
@@ -604,7 +602,7 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
                     <Transition show={open}>
                       <Disclosure.Panel>
                         {cycle.total_issues > 0 ? (
-                          <div className=" h-full w-full py-4">
+                          <div className="h-full w-full py-4">
                             <SidebarProgressStats
                               issues={issues ?? []}
                               groupedIssues={{
diff --git a/apps/app/components/ui/progress-bar.tsx b/apps/app/components/ui/progress-bar.tsx
index 4ef06747e..8ac0b1e1e 100644
--- a/apps/app/components/ui/progress-bar.tsx
+++ b/apps/app/components/ui/progress-bar.tsx
@@ -63,7 +63,7 @@ export const ProgressBar: React.FC<Props> = ({
   return (
     <svg width={radius * 2} height={radius * 2}>
       {renderOuterCircle()}
-      <circle r={radius - strokeWidth} cx={radius} cy={radius} className="progress-bar"/>
+      <circle r={radius - strokeWidth} cx={radius} cy={radius} className="progress-bar" />
     </svg>
   );
 };
diff --git a/apps/app/components/workspace/activity-graph.tsx b/apps/app/components/workspace/activity-graph.tsx
index 1f9db203d..ec8e1dfd4 100644
--- a/apps/app/components/workspace/activity-graph.tsx
+++ b/apps/app/components/workspace/activity-graph.tsx
@@ -1,141 +1,34 @@
-import { useEffect, useRef, useState } from "react";
-
 // ui
-import { Tooltip } from "components/ui";
+import { CalendarGraph } from "components/ui";
 // helpers
-import { renderDateFormat, renderShortNumericDateFormat } from "helpers/date-time.helper";
+import { renderShortDateWithYearFormat } from "helpers/date-time.helper";
 // types
 import { IUserActivity } from "types";
-// constants
-import { DAYS, MONTHS } from "constants/project";
 
 type Props = {
   activities: IUserActivity[] | undefined;
 };
 
-export const ActivityGraph: React.FC<Props> = ({ activities }) => {
-  const ref = useRef<HTMLDivElement>(null);
-
-  const [width, setWidth] = useState(0);
-
-  const today = new Date();
-  const lastMonth = new Date(today.getFullYear(), today.getMonth() - 1, 1);
-  const twoMonthsAgo = new Date(today.getFullYear(), today.getMonth() - 2, 1);
-  const threeMonthsAgo = new Date(today.getFullYear(), today.getMonth() - 3, 1);
-  const fourMonthsAgo = new Date(today.getFullYear(), today.getMonth() - 4, 1);
-  const fiveMonthsAgo = new Date(today.getFullYear(), today.getMonth() - 5, 1);
-
-  const recentMonths = [
-    fiveMonthsAgo,
-    fourMonthsAgo,
-    threeMonthsAgo,
-    twoMonthsAgo,
-    lastMonth,
-    today,
-  ];
-
-  const getDatesOfMonth = (dateOfMonth: Date) => {
-    const month = dateOfMonth.getMonth();
-    const year = dateOfMonth.getFullYear();
-
-    const dates = [];
-    const date = new Date(year, month, 1);
-
-    while (date.getMonth() === month && date < new Date()) {
-      dates.push(renderDateFormat(new Date(date)));
-      date.setDate(date.getDate() + 1);
+export const ActivityGraph: React.FC<Props> = ({ activities }) => (
+  <CalendarGraph
+    data={
+      activities?.map((activity) => ({
+        day: activity.created_date,
+        value: activity.activity_count,
+      })) ?? []
     }
-
-    return dates;
-  };
-
-  const recentDates = [
-    ...getDatesOfMonth(recentMonths[0]),
-    ...getDatesOfMonth(recentMonths[1]),
-    ...getDatesOfMonth(recentMonths[2]),
-    ...getDatesOfMonth(recentMonths[3]),
-    ...getDatesOfMonth(recentMonths[4]),
-    ...getDatesOfMonth(recentMonths[5]),
-  ];
-
-  const activitiesIntensity = (activityCount: number) => {
-    if (activityCount <= 3) return "opacity-20";
-    else if (activityCount > 3 && activityCount <= 6) return "opacity-40";
-    else if (activityCount > 6 && activityCount <= 9) return "opacity-80";
-    else return "";
-  };
-
-  const addPaddingTiles = () => {
-    const firstDateDay = new Date(recentDates[0]).getDay();
-
-    for (let i = 0; i < firstDateDay; i++) recentDates.unshift("");
-  };
-  addPaddingTiles();
-
-  useEffect(() => {
-    if (!ref.current) return;
-
-    setWidth(ref.current.offsetWidth);
-  }, [ref]);
-
-  return (
-    <div className="grid place-items-center overflow-x-scroll">
-      <div className="flex items-start gap-4">
-        <div className="flex flex-col gap-2 pt-6">
-          {DAYS.map((day, index) => (
-            <h6 key={day} className="h-4 text-xs">
-              {index % 2 === 0 && day.substring(0, 3)}
-            </h6>
-          ))}
-        </div>
-        <div>
-          <div className="flex items-center justify-between" style={{ width: `${width}px` }}>
-            {recentMonths.map((month, index) => (
-              <h6 key={index} className="w-full text-xs">
-                {MONTHS[month.getMonth()].substring(0, 3)}
-              </h6>
-            ))}
-          </div>
-          <div
-            className="mt-2 grid w-full grid-flow-col gap-2"
-            style={{ gridTemplateRows: "repeat(7, minmax(0, 1fr))" }}
-            ref={ref}
-          >
-            {recentDates.map((date, index) => {
-              const isActive = activities?.find((a) => a.created_date === date);
-
-              return (
-                <Tooltip
-                  key={`${date}-${index}`}
-                  tooltipContent={`${
-                    isActive ? isActive.activity_count : 0
-                  } activities on ${renderShortNumericDateFormat(date)}`}
-                  theme="dark"
-                >
-                  <div
-                    className={`${
-                      date === "" ? "pointer-events-none opacity-0" : ""
-                    } h-4 w-4 rounded ${
-                      isActive
-                        ? `bg-brand-accent ${activitiesIntensity(isActive.activity_count)}`
-                        : "bg-brand-surface-2"
-                    }`}
-                  />
-                </Tooltip>
-              );
-            })}
-          </div>
-          <div className="mt-8 flex items-center gap-2 text-xs">
-            <span>Less</span>
-            <span className="h-4 w-4 rounded bg-brand-surface-2" />
-            <span className="h-4 w-4 rounded bg-brand-accent opacity-20" />
-            <span className="h-4 w-4 rounded bg-brand-accent opacity-40" />
-            <span className="h-4 w-4 rounded bg-brand-accent opacity-80" />
-            <span className="h-4 w-4 rounded bg-brand-accent" />
-            <span>More</span>
-          </div>
-        </div>
+    from={activities?.length ? activities[0].created_date : new Date()}
+    to={activities?.length ? activities[activities.length - 1].created_date : new Date()}
+    height="200px"
+    margin={{ bottom: 0, left: 10, right: 10, top: 0 }}
+    tooltip={(datum) => (
+      <div className="rounded-md border border-brand-base bg-brand-surface-2 p-2 text-xs">
+        <span className="text-brand-secondary">{renderShortDateWithYearFormat(datum.day)}:</span>{" "}
+        {datum.value}
       </div>
-    </div>
-  );
-};
+    )}
+    theme={{
+      background: "rgb(var(--color-bg-base))",
+    }}
+  />
+);
diff --git a/apps/app/components/workspace/completed-issues-graph.tsx b/apps/app/components/workspace/completed-issues-graph.tsx
index e34f1a939..9a1ada618 100644
--- a/apps/app/components/workspace/completed-issues-graph.tsx
+++ b/apps/app/components/workspace/completed-issues-graph.tsx
@@ -1,15 +1,5 @@
-// recharts
-import {
-  CartesianGrid,
-  Line,
-  LineChart,
-  ResponsiveContainer,
-  Tooltip,
-  XAxis,
-  YAxis,
-} from "recharts";
 // ui
-import { CustomMenu } from "components/ui";
+import { CustomMenu, LineGraph } from "components/ui";
 // constants
 import { MONTHS } from "constants/project";
 
@@ -36,13 +26,6 @@ export const CompletedIssuesGraph: React.FC<Props> = ({ month, issues, setMonth
     });
   }
 
-  const CustomTooltip = ({ payload, label }: any) => (
-    <div className="space-y-1 rounded bg-brand-surface-1 p-3 text-sm shadow-md">
-      <h4 className="text-brand-secondary">{label}</h4>
-      <h5>Completed issues: {payload[0]?.value}</h5>
-    </div>
-  );
-
   return (
     <div>
       <div className="mb-0.5 flex justify-between">
@@ -56,25 +39,37 @@ export const CompletedIssuesGraph: React.FC<Props> = ({ month, issues, setMonth
         </CustomMenu>
       </div>
       <div className="rounded-[10px] border border-brand-base bg-brand-base p-8 pl-4">
-        <ResponsiveContainer width="100%" height={250}>
-          <LineChart data={data}>
-            <CartesianGrid stroke="#858e9660" />
-            <XAxis dataKey="week_in_month" padding={{ left: 48, right: 48 }} />
-            <YAxis dataKey="completed_count" allowDecimals={false} />
-            <Tooltip content={<CustomTooltip />} />
-            <Line
-              type="monotone"
-              dataKey="completed_count"
-              stroke="#d687ff"
-              strokeWidth={3}
-              fill="#8e2de2"
+        {data.every((item) => item.completed_count === 0) ? (
+          <div className="flex items-center justify-center h-72">
+            <h4 className="text-[#d687ff]">No issues closed this month</h4>
+          </div>
+        ) : (
+          <>
+            <LineGraph
+              height="250px"
+              data={[
+                {
+                  id: "completed_issues",
+                  color: "#d687ff",
+                  data: data.map((item) => ({
+                    x: item.week_in_month,
+                    y: item.completed_count,
+                  })),
+                },
+              ]}
+              margin={{ top: 20, right: 20, bottom: 20, left: 20 }}
+              customYAxisTickValues={data.map((item) => item.completed_count)}
+              colors={(datum) => datum.color}
+              theme={{
+                background: "rgb(var(--color-bg-base))",
+              }}
             />
-          </LineChart>
-        </ResponsiveContainer>
-        <h4 className="mt-4 flex items-center justify-center gap-2 text-[#d687ff]">
-          <span className="h-2 w-2 bg-[#d687ff]" />
-          Completed Issues
-        </h4>
+            <h4 className="mt-4 flex items-center justify-center gap-2 text-[#d687ff]">
+              <span className="h-2 w-2 bg-[#d687ff]" />
+              Completed Issues
+            </h4>
+          </>
+        )}
       </div>
     </div>
   );
diff --git a/apps/app/components/workspace/issues-pie-chart.tsx b/apps/app/components/workspace/issues-pie-chart.tsx
index d65e80c4a..ada35d080 100644
--- a/apps/app/components/workspace/issues-pie-chart.tsx
+++ b/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>
+);
diff --git a/apps/app/components/workspace/issues-stats.tsx b/apps/app/components/workspace/issues-stats.tsx
index 6117ec2a1..bc7f0364f 100644
--- a/apps/app/components/workspace/issues-stats.tsx
+++ b/apps/app/components/workspace/issues-stats.tsx
@@ -1,8 +1,7 @@
 // components
-import { Loader } from "components/ui";
 import { ActivityGraph } from "components/workspace";
-// helpers
-import { groupBy } from "helpers/array.helper";
+// ui
+import { Loader } from "components/ui";
 // types
 import { IUserWorkspaceDashboard } from "types";
 
diff --git a/apps/app/package.json b/apps/app/package.json
index 01287f068..64eb1aa99 100644
--- a/apps/app/package.json
+++ b/apps/app/package.json
@@ -46,7 +46,6 @@
     "react-dropzone": "^14.2.3",
     "react-hook-form": "^7.38.0",
     "react-markdown": "^8.0.7",
-    "recharts": "^2.3.2",
     "remirror": "^2.0.23",
     "swr": "^2.1.3",
     "tlds": "^1.238.0",
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/[cycleId].tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/[cycleId].tsx
index 718a8bd3a..af9f073a8 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/[cycleId].tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/[cycleId].tsx
@@ -75,11 +75,6 @@ const SingleCycle: React.FC = () => {
       : null
   );
 
-  const cycleStatus =
-    cycleDetails?.start_date && cycleDetails?.end_date
-      ? getDateRangeStatus(cycleDetails?.start_date, cycleDetails?.end_date)
-      : "draft";
-
   const { data: issues } = useSWR(
     workspaceSlug && projectId
       ? PROJECT_ISSUES_LIST(workspaceSlug as string, projectId as string)
@@ -89,6 +84,11 @@ const SingleCycle: React.FC = () => {
       : null
   );
 
+  const cycleStatus =
+    cycleDetails?.start_date && cycleDetails?.end_date
+      ? getDateRangeStatus(cycleDetails?.start_date, cycleDetails?.end_date)
+      : "draft";
+
   const openIssuesListModal = () => {
     setCycleIssuesListModal(true);
   };
diff --git a/yarn.lock b/yarn.lock
index 5fb2c1578..652df3ed8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3035,57 +3035,6 @@
   dependencies:
     "@types/tern" "*"
 
-"@types/d3-array@^3.0.3":
-  version "3.0.4"
-  resolved "https://registry.yarnpkg.com/@types/d3-array/-/d3-array-3.0.4.tgz#44eebe40be57476cad6a0cd6a85b0f57d54185a2"
-  integrity sha512-nwvEkG9vYOc0Ic7G7kwgviY4AQlTfYGIZ0fqB7CQHXGyYM6nO7kJh5EguSNA3jfh4rq7Sb7eMVq8isuvg2/miQ==
-
-"@types/d3-color@*":
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/@types/d3-color/-/d3-color-3.1.0.tgz#6594da178ded6c7c3842f3cc0ac84b156f12f2d4"
-  integrity sha512-HKuicPHJuvPgCD+np6Se9MQvS6OCbJmOjGvylzMJRlDwUXjKTTXs6Pwgk79O09Vj/ho3u1ofXnhFOaEWWPrlwA==
-
-"@types/d3-ease@^3.0.0":
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/@types/d3-ease/-/d3-ease-3.0.0.tgz#c29926f8b596f9dadaeca062a32a45365681eae0"
-  integrity sha512-aMo4eaAOijJjA6uU+GIeW018dvy9+oH5Y2VPPzjjfxevvGQ/oRDs+tfYC9b50Q4BygRR8yE2QCLsrT0WtAVseA==
-
-"@types/d3-interpolate@^3.0.1":
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/@types/d3-interpolate/-/d3-interpolate-3.0.1.tgz#e7d17fa4a5830ad56fe22ce3b4fac8541a9572dc"
-  integrity sha512-jx5leotSeac3jr0RePOH1KdR9rISG91QIE4Q2PYTu4OymLTZfA3SrnURSLzKH48HmXVUru50b8nje4E79oQSQw==
-  dependencies:
-    "@types/d3-color" "*"
-
-"@types/d3-path@*":
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/@types/d3-path/-/d3-path-3.0.0.tgz#939e3a784ae4f80b1fde8098b91af1776ff1312b"
-  integrity sha512-0g/A+mZXgFkQxN3HniRDbXMN79K3CdTpLsevj+PXiTcb2hVyvkZUBg37StmgCQkaD84cUJ4uaDAWq7UJOQy2Tg==
-
-"@types/d3-scale@^4.0.2":
-  version "4.0.3"
-  resolved "https://registry.yarnpkg.com/@types/d3-scale/-/d3-scale-4.0.3.tgz#7a5780e934e52b6f63ad9c24b105e33dd58102b5"
-  integrity sha512-PATBiMCpvHJSMtZAMEhc2WyL+hnzarKzI6wAHYjhsonjWJYGq5BXTzQjv4l8m2jO183/4wZ90rKvSeT7o72xNQ==
-  dependencies:
-    "@types/d3-time" "*"
-
-"@types/d3-shape@^3.1.0":
-  version "3.1.1"
-  resolved "https://registry.yarnpkg.com/@types/d3-shape/-/d3-shape-3.1.1.tgz#15cc497751dac31192d7aef4e67a8d2c62354b95"
-  integrity sha512-6Uh86YFF7LGg4PQkuO2oG6EMBRLuW9cbavUW46zkIO5kuS2PfTqo2o9SkgtQzguBHbLgNnU90UNsITpsX1My+A==
-  dependencies:
-    "@types/d3-path" "*"
-
-"@types/d3-time@*", "@types/d3-time@^3.0.0":
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/@types/d3-time/-/d3-time-3.0.0.tgz#e1ac0f3e9e195135361fa1a1d62f795d87e6e819"
-  integrity sha512-sZLCdHvBUcNby1cB6Fd3ZBrABbjz3v1Vm90nysCQ6Vt7vd6e/h9Lt7SiJUoEX0l4Dzc7P5llKyhqSi1ycSf1Hg==
-
-"@types/d3-timer@^3.0.0":
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/@types/d3-timer/-/d3-timer-3.0.0.tgz#e2505f1c21ec08bda8915238e397fb71d2fc54ce"
-  integrity sha512-HNB/9GHqu7Fo8AQiugyJbv6ZxYz58wef0esl4Mv828w1ZKpAshw/uFWVDUcIB9KKFeFKoxS3cHY07FFgtTRZ1g==
-
 "@types/debug@^4.0.0":
   version "4.1.7"
   resolved "https://registry.yarnpkg.com/@types/debug/-/debug-4.1.7.tgz#7cc0ea761509124709b8b2d1090d8f6c17aadb82"
@@ -3972,7 +3921,7 @@ chokidar@^3.5.3:
   optionalDependencies:
     fsevents "~2.3.2"
 
-classnames@^2.2.5, classnames@^2.2.6, classnames@^2.3.1, classnames@^2.3.2:
+classnames@^2.2.6, classnames@^2.3.1, classnames@^2.3.2:
   version "2.3.2"
   resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.2.tgz#351d813bf0137fcc6a76a16b88208d2560a0d924"
   integrity sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==
@@ -4165,11 +4114,6 @@ css-in-js-utils@^3.1.0:
   dependencies:
     hyphenate-style-name "^1.0.3"
 
-css-unit-converter@^1.1.1:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/css-unit-converter/-/css-unit-converter-1.1.2.tgz#4c77f5a1954e6dbff60695ecb214e3270436ab21"
-  integrity sha512-IiJwMC8rdZE0+xiEZHeru6YoONC4rfPMqGm2W85jMIbkFvv5nFTwJVFHam2eFrN6txmoUYFAFXiv8ICVeTO0MA==
-
 cssesc@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee"
@@ -4187,23 +4131,11 @@ d3-array@2, d3-array@^2.3.0:
   dependencies:
     internmap "^1.0.0"
 
-"d3-array@2 - 3", "d3-array@2.10.0 - 3", d3-array@^3.1.6:
-  version "3.2.3"
-  resolved "https://registry.yarnpkg.com/d3-array/-/d3-array-3.2.3.tgz#39f1f4954e4a09ff69ac597c2d61906b04e84740"
-  integrity sha512-JRHwbQQ84XuAESWhvIPaUV4/1UYTBOLiOPGWqgFDHZS1D5QN9c57FbH3QpEnQMYiOXNzKUQyGTZf+EVO7RT5TQ==
-  dependencies:
-    internmap "1 - 2"
-
 "d3-color@1 - 2", d3-color@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/d3-color/-/d3-color-2.0.0.tgz#8d625cab42ed9b8f601a1760a389f7ea9189d62e"
   integrity sha512-SPXi0TSKPD4g9tw0NMZFnR95XVgUZiBH+uUTqQuDu1OsE2zomHU7ho0FISciaPvosimixwHFl3WHLGabv6dDgQ==
 
-"d3-color@1 - 3":
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/d3-color/-/d3-color-3.1.0.tgz#395b2833dfac71507f12ac2f7af23bf819de24e2"
-  integrity sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==
-
 d3-delaunay@^5.3.0:
   version "5.3.0"
   resolved "https://registry.yarnpkg.com/d3-delaunay/-/d3-delaunay-5.3.0.tgz#b47f05c38f854a4e7b3cea80e0bb12e57398772d"
@@ -4211,21 +4143,11 @@ d3-delaunay@^5.3.0:
   dependencies:
     delaunator "4"
 
-d3-ease@^3.0.1:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/d3-ease/-/d3-ease-3.0.1.tgz#9658ac38a2140d59d346160f1f6c30fda0bd12f4"
-  integrity sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==
-
 "d3-format@1 - 2":
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/d3-format/-/d3-format-2.0.0.tgz#a10bcc0f986c372b729ba447382413aabf5b0767"
   integrity sha512-Ab3S6XuE/Q+flY96HXT0jOXcM4EAClYFnRGY5zsjRGNy6qCYrQsMffs7cV5Q9xejb35zxW5hf/guKw34kvIKsA==
 
-"d3-format@1 - 3":
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/d3-format/-/d3-format-3.1.0.tgz#9260e23a28ea5cb109e93b21a06e24e2ebd55641"
-  integrity sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA==
-
 d3-format@^1.4.4:
   version "1.4.5"
   resolved "https://registry.yarnpkg.com/d3-format/-/d3-format-1.4.5.tgz#374f2ba1320e3717eb74a9356c67daee17a7edb4"
@@ -4238,23 +4160,11 @@ d3-format@^1.4.4:
   dependencies:
     d3-color "1 - 2"
 
-"d3-interpolate@1.2.0 - 3", d3-interpolate@^3.0.1:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/d3-interpolate/-/d3-interpolate-3.0.1.tgz#3c47aa5b32c5b3dfb56ef3fd4342078a632b400d"
-  integrity sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==
-  dependencies:
-    d3-color "1 - 3"
-
 d3-path@1:
   version "1.0.9"
   resolved "https://registry.yarnpkg.com/d3-path/-/d3-path-1.0.9.tgz#48c050bb1fe8c262493a8caf5524e3e9591701cf"
   integrity sha512-VLaYcn81dtHVTjEHd8B+pbe9yHWpXKZUC87PzoFmsFrJqgFwDe/qxfp5MlfsfM1V5E/iVt0MmEbWQ7FVIXh/bg==
 
-d3-path@^3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/d3-path/-/d3-path-3.1.0.tgz#22df939032fb5a71ae8b1800d61ddb7851c42526"
-  integrity sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==
-
 d3-scale-chromatic@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/d3-scale-chromatic/-/d3-scale-chromatic-2.0.0.tgz#c13f3af86685ff91323dc2f0ebd2dabbd72d8bab"
@@ -4274,17 +4184,6 @@ d3-scale@^3.2.3:
     d3-time "^2.1.1"
     d3-time-format "2 - 3"
 
-d3-scale@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/d3-scale/-/d3-scale-4.0.2.tgz#82b38e8e8ff7080764f8dcec77bd4be393689396"
-  integrity sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==
-  dependencies:
-    d3-array "2.10.0 - 3"
-    d3-format "1 - 3"
-    d3-interpolate "1.2.0 - 3"
-    d3-time "2.1.1 - 3"
-    d3-time-format "2 - 4"
-
 d3-shape@^1.3.5:
   version "1.3.7"
   resolved "https://registry.yarnpkg.com/d3-shape/-/d3-shape-1.3.7.tgz#df63801be07bc986bc54f63789b4fe502992b5d7"
@@ -4292,13 +4191,6 @@ d3-shape@^1.3.5:
   dependencies:
     d3-path "1"
 
-d3-shape@^3.1.0:
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/d3-shape/-/d3-shape-3.2.0.tgz#a1a839cbd9ba45f28674c69d7f855bcf91dfc6a5"
-  integrity sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==
-  dependencies:
-    d3-path "^3.1.0"
-
 "d3-time-format@2 - 3", d3-time-format@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/d3-time-format/-/d3-time-format-3.0.0.tgz#df8056c83659e01f20ac5da5fdeae7c08d5f1bb6"
@@ -4306,13 +4198,6 @@ d3-shape@^3.1.0:
   dependencies:
     d3-time "1 - 2"
 
-"d3-time-format@2 - 4":
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/d3-time-format/-/d3-time-format-4.1.0.tgz#7ab5257a5041d11ecb4fe70a5c7d16a195bb408a"
-  integrity sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==
-  dependencies:
-    d3-time "1 - 3"
-
 "d3-time@1 - 2", d3-time@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/d3-time/-/d3-time-2.1.1.tgz#e9d8a8a88691f4548e68ca085e5ff956724a6682"
@@ -4320,23 +4205,11 @@ d3-shape@^3.1.0:
   dependencies:
     d3-array "2"
 
-"d3-time@1 - 3", "d3-time@2.1.1 - 3", d3-time@^3.0.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/d3-time/-/d3-time-3.1.0.tgz#9310db56e992e3c0175e1ef385e545e48a9bb5c7"
-  integrity sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==
-  dependencies:
-    d3-array "2 - 3"
-
 d3-time@^1.0.10, d3-time@^1.0.11:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/d3-time/-/d3-time-1.1.0.tgz#b1e19d307dae9c900b7e5b25ffc5dcc249a8a0f1"
   integrity sha512-Xh0isrZ5rPYYdqhAVk8VLnMEidhz5aP7htAADH6MfzgmmicPkTo8LhkLxci61/lCB7n7UmE3bN0leRt+qvkLxA==
 
-d3-timer@^3.0.1:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/d3-timer/-/d3-timer-3.0.1.tgz#6284d2a2708285b1abb7e201eda4380af35e63b0"
-  integrity sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==
-
 damerau-levenshtein@^1.0.8:
   version "1.0.8"
   resolved "https://registry.yarnpkg.com/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz#b43d286ccbd36bc5b2f7ed41caf2d0aba1f8a6e7"
@@ -4368,11 +4241,6 @@ debug@^3.2.7:
   dependencies:
     ms "^2.1.1"
 
-decimal.js-light@^2.4.1:
-  version "2.5.1"
-  resolved "https://registry.yarnpkg.com/decimal.js-light/-/decimal.js-light-2.5.1.tgz#134fd32508f19e208f4fb2f8dac0d2626a867934"
-  integrity sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg==
-
 decode-named-character-reference@^1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/decode-named-character-reference/-/decode-named-character-reference-1.0.2.tgz#daabac9690874c394c81e4162a0304b35d824f0e"
@@ -4513,13 +4381,6 @@ doctrine@^3.0.0:
   dependencies:
     esutils "^2.0.2"
 
-dom-helpers@^3.4.0:
-  version "3.4.0"
-  resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-3.4.0.tgz#e9b369700f959f62ecde5a6babde4bccd9169af8"
-  integrity sha512-LnuPJ+dwqKDIyotW1VzmOZ5TONUN7CwkCR5hrgawTUbkBGYdeoNLZo6nNfGkCrjtE1nXXaj7iMMpDa8/d9WoIA==
-  dependencies:
-    "@babel/runtime" "^7.1.2"
-
 dom-helpers@^5.0.1:
   version "5.2.1"
   resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-5.2.1.tgz#d9400536b2bf8225ad98fe052e029451ac40e902"
@@ -5072,11 +4933,6 @@ esutils@^2.0.2:
   resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.3.tgz#74d2eb4de0b8da1293711910d50775b9b710ef64"
   integrity sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==
 
-eventemitter3@^4.0.1:
-  version "4.0.7"
-  resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-4.0.7.tgz#2de9b68f6528d5644ef5c59526a1b4a07306169f"
-  integrity sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==
-
 extend@^3.0.0:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.2.tgz#f8b1136b4071fbd8eb140aff858b1019ec2915fa"
@@ -5092,11 +4948,6 @@ fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
   resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
   integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
 
-fast-equals@^4.0.3:
-  version "4.0.3"
-  resolved "https://registry.yarnpkg.com/fast-equals/-/fast-equals-4.0.3.tgz#72884cc805ec3c6679b99875f6b7654f39f0e8c7"
-  integrity sha512-G3BSX9cfKttjr+2o1O22tYMLq0DPluZnYtq1rXumE1SpL/F/SLIfHx08WYQoWSIpeMYf8sRbJ8++71+v6Pnxfg==
-
 fast-glob@^3.2.12, fast-glob@^3.2.9:
   version "3.2.12"
   resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.2.12.tgz#7f39ec99c2e6ab030337142da9e0c18f37afae80"
@@ -5591,11 +5442,6 @@ internal-slot@^1.0.3, internal-slot@^1.0.4, internal-slot@^1.0.5:
     has "^1.0.3"
     side-channel "^1.0.4"
 
-"internmap@1 - 2":
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/internmap/-/internmap-2.0.3.tgz#6685f23755e43c524e251d29cbc97248e3061009"
-  integrity sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==
-
 internmap@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/internmap/-/internmap-1.0.1.tgz#0017cc8a3b99605f0302f2b198d272e015e5df95"
@@ -6170,7 +6016,7 @@ lodash.truncate@^4.4.2:
   resolved "https://registry.yarnpkg.com/lodash.truncate/-/lodash.truncate-4.4.2.tgz#5a350da0b1113b837ecfffd5812cbe58d6eae193"
   integrity sha512-jttmRe7bRse52OsWIMDLaXxWqRAmtIUccAQ3garviCqJjafXOfNMO0yMfNpdD6zbGaTU0P5Nz7e7gAT6cKmJRw==
 
-lodash@^4.0.1, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.21:
+lodash@^4.0.1, lodash@^4.17.15, lodash@^4.17.20, lodash@^4.17.21:
   version "4.17.21"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
@@ -7057,11 +6903,6 @@ postcss-selector-parser@^6.0.11:
     cssesc "^3.0.0"
     util-deprecate "^1.0.2"
 
-postcss-value-parser@^3.3.0:
-  version "3.3.1"
-  resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz#9ff822547e2893213cf1c30efa51ac5fd1ba8281"
-  integrity sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==
-
 postcss-value-parser@^4.0.0, postcss-value-parser@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514"
@@ -7391,7 +7232,7 @@ react-hook-form@^7.38.0:
   resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.43.9.tgz#84b56ac2f38f8e946c6032ccb760e13a1037c66d"
   integrity sha512-AUDN3Pz2NSeoxQ7Hs6OhQhDr6gtF9YRuutGDwPQqhSUAHJSgGl2VeY3qN19MG0SucpjgDiuMJ4iC5T5uB+eaNQ==
 
-react-is@^16.10.2, react-is@^16.13.1, react-is@^16.7.0:
+react-is@^16.13.1, react-is@^16.7.0:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
@@ -7489,21 +7330,6 @@ react-remove-scroll@2.5.4:
     use-callback-ref "^1.3.0"
     use-sidecar "^1.1.2"
 
-react-resize-detector@^8.0.4:
-  version "8.1.0"
-  resolved "https://registry.yarnpkg.com/react-resize-detector/-/react-resize-detector-8.1.0.tgz#1c7817db8bc886e2dbd3fbe3b26ea8e56be0524a"
-  integrity sha512-S7szxlaIuiy5UqLhLL1KY3aoyGHbZzsTpYal9eYMwCyKqoqoVLCmIgAgNyIM1FhnP2KyBygASJxdhejrzjMb+w==
-  dependencies:
-    lodash "^4.17.21"
-
-react-smooth@^2.0.2:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/react-smooth/-/react-smooth-2.0.2.tgz#0ef24213628cb13bf4305194a050e1db4302a3a1"
-  integrity sha512-pgqSp1q8rAGtF1bXQE0m3CHGLNfZZh5oA5o1tsPLXRHnKtkujMIJ8Ws5nO1mTySZf1c4vgwlEk+pHi3Ln6eYLw==
-  dependencies:
-    fast-equals "^4.0.3"
-    react-transition-group "2.9.0"
-
 react-style-singleton@^2.2.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/react-style-singleton/-/react-style-singleton-2.2.1.tgz#f99e420492b2d8f34d38308ff660b60d0b1205b4"
@@ -7513,16 +7339,6 @@ react-style-singleton@^2.2.1:
     invariant "^2.2.4"
     tslib "^2.0.0"
 
-react-transition-group@2.9.0:
-  version "2.9.0"
-  resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-2.9.0.tgz#df9cdb025796211151a436c69a8f3b97b5b07c8d"
-  integrity sha512-+HzNTCHpeQyl4MJ/bdE0u6XRMe9+XG/+aL4mCxVN4DnPBQ0/5bfHWPDuOZUzYdMj94daZaZdCCc1Dzt9R/xSSg==
-  dependencies:
-    dom-helpers "^3.4.0"
-    loose-envify "^1.4.0"
-    prop-types "^15.6.2"
-    react-lifecycles-compat "^3.0.4"
-
 react-transition-group@^4.4.5:
   version "4.4.5"
   resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.5.tgz#e53d4e3f3344da8521489fbef8f2581d42becdd1"
@@ -7561,36 +7377,6 @@ readdirp@~3.6.0:
   dependencies:
     picomatch "^2.2.1"
 
-recharts-scale@^0.4.4:
-  version "0.4.5"
-  resolved "https://registry.yarnpkg.com/recharts-scale/-/recharts-scale-0.4.5.tgz#0969271f14e732e642fcc5bd4ab270d6e87dd1d9"
-  integrity sha512-kivNFO+0OcUNu7jQquLXAxz1FIwZj8nrj+YkOKc5694NbjCvcT6aSZiIzNzd2Kul4o4rTto8QVR9lMNtxD4G1w==
-  dependencies:
-    decimal.js-light "^2.4.1"
-
-recharts@^2.3.2:
-  version "2.5.0"
-  resolved "https://registry.yarnpkg.com/recharts/-/recharts-2.5.0.tgz#34452852509099502690f9d2a72bde1d4cd65648"
-  integrity sha512-0EQYz3iA18r1Uq8VqGZ4dABW52AKBnio37kJgnztIqprELJXpOEsa0SzkqU1vjAhpCXCv52Dx1hiL9119xsqsQ==
-  dependencies:
-    classnames "^2.2.5"
-    eventemitter3 "^4.0.1"
-    lodash "^4.17.19"
-    react-is "^16.10.2"
-    react-resize-detector "^8.0.4"
-    react-smooth "^2.0.2"
-    recharts-scale "^0.4.4"
-    reduce-css-calc "^2.1.8"
-    victory-vendor "^36.6.8"
-
-reduce-css-calc@^2.1.8:
-  version "2.1.8"
-  resolved "https://registry.yarnpkg.com/reduce-css-calc/-/reduce-css-calc-2.1.8.tgz#7ef8761a28d614980dc0c982f772c93f7a99de03"
-  integrity sha512-8liAVezDmUcH+tdzoEGrhfbGcP7nOV4NkGE3a74+qqvE7nt9i4sKLGBuZNOnpI4WiGksiNPklZxva80061QiPg==
-  dependencies:
-    css-unit-converter "^1.1.1"
-    postcss-value-parser "^3.3.0"
-
 redux@^4.0.0, redux@^4.0.4:
   version "4.2.1"
   resolved "https://registry.yarnpkg.com/redux/-/redux-4.2.1.tgz#c08f4306826c49b5e9dc901dee0452ea8fce6197"
@@ -8730,26 +8516,6 @@ vfile@^5.0.0:
     unist-util-stringify-position "^3.0.0"
     vfile-message "^3.0.0"
 
-victory-vendor@^36.6.8:
-  version "36.6.10"
-  resolved "https://registry.yarnpkg.com/victory-vendor/-/victory-vendor-36.6.10.tgz#e7e3646deaf0e850bc60dffdad6d7a4abee40632"
-  integrity sha512-7YqYGtsA4mByokBhCjk+ewwPhUfzhR1I3Da6/ZsZUv/31ceT77RKoaqrxRq5Ki+9we4uzf7+A+7aG2sfYhm7nA==
-  dependencies:
-    "@types/d3-array" "^3.0.3"
-    "@types/d3-ease" "^3.0.0"
-    "@types/d3-interpolate" "^3.0.1"
-    "@types/d3-scale" "^4.0.2"
-    "@types/d3-shape" "^3.1.0"
-    "@types/d3-time" "^3.0.0"
-    "@types/d3-timer" "^3.0.0"
-    d3-array "^3.1.6"
-    d3-ease "^3.0.1"
-    d3-interpolate "^3.0.1"
-    d3-scale "^4.0.2"
-    d3-shape "^3.1.0"
-    d3-time "^3.0.0"
-    d3-timer "^3.0.1"
-
 w3c-keyname@^2.2.0, w3c-keyname@^2.2.6:
   version "2.2.6"
   resolved "https://registry.yarnpkg.com/w3c-keyname/-/w3c-keyname-2.2.6.tgz#8412046116bc16c5d73d4e612053ea10a189c85f"