From d1d291ee38fb4c205b178f337d1f3084b7e43bfb Mon Sep 17 00:00:00 2001
From: Luiz Henrique Guerra <lhguerra@gmail.com>
Date: Fri, 13 Dec 2024 12:51:22 -0300
Subject: [PATCH] feat: add bugs chart to status report

---
 .../Projects/ProjectDemandsCharts.tsx         | 41 +------------
 .../Projects/Charts/ProjectBugsPercentage.tsx | 58 +++++++++++++++++++
 app/spa/src/pages/Projects/Statistics.tsx     | 11 ++--
 app/spa/src/pages/Projects/StatusReport.tsx   |  2 +
 4 files changed, 67 insertions(+), 45 deletions(-)
 create mode 100644 app/spa/src/pages/Projects/Charts/ProjectBugsPercentage.tsx

diff --git a/app/spa/src/components/Projects/ProjectDemandsCharts.tsx b/app/spa/src/components/Projects/ProjectDemandsCharts.tsx
index f0a0d6021..2dadc92fd 100644
--- a/app/spa/src/components/Projects/ProjectDemandsCharts.tsx
+++ b/app/spa/src/components/Projects/ProjectDemandsCharts.tsx
@@ -15,6 +15,7 @@ import { buildBurnupData } from "../../utils/charts"
 import ProjectBurnup from "../../pages/Projects/Charts/ProjectBurnup"
 import ProjectLeadTime from "../../pages/Projects/Charts/ProjectLeadTime"
 import ProjectLeadTimeControlChart from "../../pages/Projects/Charts/ProjectLeadTimeControlChart"
+import ProjectBugsPercentage from "../../pages/Projects/Charts/ProjectBugsPercentage"
 
 type ProjectDemandsChartsProps = {
   project: Project
@@ -120,19 +121,6 @@ const ProjectDemandsCharts = ({
     project.hoursBurnup
   )
 
-  const projectQualityChartData = [
-    {
-      id: project.name || "",
-      data:
-        projectConsolidationsWeekly?.map(
-          ({ consolidationDate, projectQuality }) => ({
-            x: consolidationDate,
-            y: (1 - projectQuality) * 100,
-          })
-        ) || [],
-    },
-  ]
-
   const projectQualityForCodingChartData = [
     {
       id: project.name || "",
@@ -443,31 +431,8 @@ const ProjectDemandsCharts = ({
         </ChartGridItem>
       )}
 
-      <ChartGridItem title={t("chartsTab.projectCharts.quality_bugs_chart")}>
-        <LineChart
-          data={projectQualityChartData}
-          axisLeftLegend="%"
-          props={{
-            margin: { left: 80, right: 20, top: 25, bottom: 65 },
-            axisBottom: {
-              tickSize: 5,
-              tickPadding: 5,
-              legendPosition: "middle",
-              legendOffset: 60,
-              tickRotation: -40,
-              legend: t("chartsTab.projectCharts.quality_bugs_x_label"),
-            },
-            yFormat: (value: number) => `${value.toFixed(2)}%`,
-            enableSlices: "x",
-            sliceTooltip: ({ slice }: SliceTooltipProps) => (
-              <LineChartTooltip
-                slice={slice}
-                xLabel={t("chartsTab.projectCharts.quality_bugs_tooltip_label")}
-              />
-            ),
-          }}
-        />
-      </ChartGridItem>
+      <ProjectBugsPercentage project={project} />
+
       <ChartGridItem
         title={t("chartsTab.projectCharts.quality_bugs_for_coding_chart")}
       >
diff --git a/app/spa/src/pages/Projects/Charts/ProjectBugsPercentage.tsx b/app/spa/src/pages/Projects/Charts/ProjectBugsPercentage.tsx
new file mode 100644
index 000000000..b4800fdcf
--- /dev/null
+++ b/app/spa/src/pages/Projects/Charts/ProjectBugsPercentage.tsx
@@ -0,0 +1,58 @@
+import { LineChart } from "../../../components/charts/LineChart"
+import { SliceTooltipProps } from "@nivo/line"
+import LineChartTooltip from "../../../components/charts/tooltips/LineChartTooltip"
+import { ChartGridItem } from "../../../components/charts/ChartGridItem"
+import { Project } from "../../../modules/project/project.types"
+import { useTranslation } from "react-i18next"
+
+const ProjectBugsPercentage = ({ project }: ProjectBugsPercentageProps) => {
+  const { t } = useTranslation(["projectChart"])
+
+  const projectConsolidationsWeekly = project.projectConsolidationsWeekly
+  const projectQualityChartData = [
+    {
+      id: project.name || "",
+      data:
+        projectConsolidationsWeekly?.map(
+          ({ consolidationDate, projectQuality }) => ({
+            x: consolidationDate,
+            y: (1 - projectQuality) * 100,
+          })
+        ) || [],
+    },
+  ]
+
+  return (
+    <ChartGridItem title={t("chartsTab.projectCharts.quality_bugs_chart")}>
+      <LineChart
+        data={projectQualityChartData}
+        axisLeftLegend="%"
+        props={{
+          margin: { left: 80, right: 20, top: 25, bottom: 65 },
+          axisBottom: {
+            tickSize: 5,
+            tickPadding: 5,
+            legendPosition: "middle",
+            legendOffset: 60,
+            tickRotation: -40,
+            legend: t("chartsTab.projectCharts.quality_bugs_x_label"),
+          },
+          yFormat: (value: number) => `${value.toFixed(2)}%`,
+          enableSlices: "x",
+          sliceTooltip: ({ slice }: SliceTooltipProps) => (
+            <LineChartTooltip
+              slice={slice}
+              xLabel={t("chartsTab.projectCharts.quality_bugs_tooltip_label")}
+            />
+          ),
+        }}
+      />
+    </ChartGridItem>
+  )
+}
+
+type ProjectBugsPercentageProps = {
+  project: Project
+}
+
+export default ProjectBugsPercentage
diff --git a/app/spa/src/pages/Projects/Statistics.tsx b/app/spa/src/pages/Projects/Statistics.tsx
index 8732f4fa1..d405c3a88 100644
--- a/app/spa/src/pages/Projects/Statistics.tsx
+++ b/app/spa/src/pages/Projects/Statistics.tsx
@@ -4,15 +4,14 @@ import { ReactElement } from "react"
 import { useParams } from "react-router-dom"
 import { LineChart } from "../../components/charts/LineChart"
 import {
-  ProjectPage,
   PROJECT_STANDARD_FRAGMENT,
+  ProjectPage,
 } from "../../components/Projects/ProjectPage"
 import { Project } from "../../modules/project/project.types"
 import { ProjectConsolidation } from "../../modules/project/projectConsolidation.types"
 
 const ONE_DAY_IN_SECONDS = 60 * 60 * 24
 
-// @TODO: projectConsolidations should exist inside project field.
 export const PROJECT_STATISTICS_QUERY = gql`
   query ProjectStatistics($id: ID!) {
     project(id: $id) {
@@ -39,13 +38,11 @@ export const PROJECT_STATISTICS_QUERY = gql`
   ${PROJECT_STANDARD_FRAGMENT}
 `
 
-type ProjectStatisticsResult = {
-  project: Project
-  projectConsolidations: ProjectConsolidation[]
+type ProjectStatisticsDTO = {
+  project?: Project
+  projectConsolidations?: ProjectConsolidation[]
 }
 
-type ProjectStatisticsDTO = ProjectStatisticsResult | undefined
-
 type GraphBoxProps = {
   title: string
   children: ReactElement | ReactElement[]
diff --git a/app/spa/src/pages/Projects/StatusReport.tsx b/app/spa/src/pages/Projects/StatusReport.tsx
index 9455422b6..9b30fcab2 100644
--- a/app/spa/src/pages/Projects/StatusReport.tsx
+++ b/app/spa/src/pages/Projects/StatusReport.tsx
@@ -11,6 +11,7 @@ import ProjectBurnup from "./Charts/ProjectBurnup"
 import ProjectHoursBurnup from "./Charts/ProjectHoursBurnup"
 import ProjectLeadTime from "./Charts/ProjectLeadTime"
 import ProjectLeadTimeControlChart from "./Charts/ProjectLeadTimeControlChart"
+import ProjectBugsPercentage from "./Charts/ProjectBugsPercentage"
 
 export const QUERY = gql`
   query ProjectStatusReport($id: ID!) {
@@ -98,6 +99,7 @@ const StatusReport = () => {
               <ProjectHoursBurnup project={project} />
               <ProjectLeadTime project={project} />
               <ProjectLeadTimeControlChart project={project} />
+              <ProjectBugsPercentage project={project} />
             </Grid>
           </Box>
         )}