feat: add flow efficiency chart to status report

TallerWebSolutions · Dec 20, 2024 · da00637 · da00637
1 parent 000c4e0
commit da00637
Show file tree

Hide file tree

Showing 5 changed files with 124 additions and 101 deletions.
diff --git a/app/spa/package.json b/app/spa/package.json
@@ -90,7 +90,7 @@
       ],
       "max-statements": [
         "error",
-        44
+        27
       ]
     }
   },

diff --git a/app/spa/src/components/Projects/ProjectDemandsCharts.tsx b/app/spa/src/components/Projects/ProjectDemandsCharts.tsx
@@ -17,6 +17,7 @@ import ProjectLeadTimeControlChart from "../../pages/Projects/Charts/ProjectLead
 import ProjectBugsPercentage from "../../pages/Projects/Charts/ProjectBugsPercentage"
 import ProjectCumulativeFlowData from "../../pages/Projects/Charts/ProjectCumulativeFlowData"
 import ProjectOperationalRiskEvolution from "../../pages/Projects/Charts/ProjectOperationalRiskEvolution"
+import ProjectFlowEfficiency from "../../pages/Projects/Charts/ProjectFlowEfficiency"
 
 type ProjectDemandsChartsProps = {
   project: Project
@@ -117,21 +118,6 @@ const ProjectDemandsCharts = ({
     },
   ]
 
-  const flowEfficiencyChartData = [
-    {
-      id: project.name || "",
-      data:
-        projectConsolidationsWeekly?.map(
-          ({ consolidationDate, flowEfficiency }) => {
-            return {
-              x: consolidationDate,
-              y: flowEfficiency,
-            }
-          }
-        ) || [],
-    },
-  ]
-
   const hoursPerDemandChartData = [
     {
       id: project.name || "",
@@ -147,54 +133,51 @@ const ProjectDemandsCharts = ({
     },
   ]
 
-  const projectHoursConsumed =
-    projectConsolidationsWeekly?.map(
-      ({
-        consolidationDate,
-        projectThroughputHours,
-        projectThroughputHoursAdditional,
-        projectThroughputHoursUpstream,
-        projectThroughputHoursDownstream,
-      }) => {
-        return {
-          [t("chartsTab.projectCharts.hours_consumed_x_label")]:
-            consolidationDate || "",
-          [t("chartsTab.projectCharts.hours_consumed_upstream")]:
-            projectThroughputHoursUpstream?.toFixed(2) || 0,
-          [t("chartsTab.projectCharts.hours_consumed_downstream")]:
-            projectThroughputHoursDownstream?.toFixed(2) || 0,
-          [t("chartsTab.projectCharts.additional_hours_consumed")]:
-            projectThroughputHoursAdditional?.toFixed(2) || 0,
-          [t("chartsTab.projectCharts.hours_consumed_total_throughput")]:
-            projectThroughputHours?.toFixed(2) || 0,
-        }
+  const projectHoursConsumed = projectConsolidationsWeekly?.map(
+    ({
+      consolidationDate,
+      projectThroughputHours,
+      projectThroughputHoursAdditional,
+      projectThroughputHoursUpstream,
+      projectThroughputHoursDownstream,
+    }) => {
+      return {
+        [t("chartsTab.projectCharts.hours_consumed_x_label")]:
+          consolidationDate || "",
+        [t("chartsTab.projectCharts.hours_consumed_upstream")]:
+          projectThroughputHoursUpstream?.toFixed(2) || 0,
+        [t("chartsTab.projectCharts.hours_consumed_downstream")]:
+          projectThroughputHoursDownstream?.toFixed(2) || 0,
+        [t("chartsTab.projectCharts.additional_hours_consumed")]:
+          projectThroughputHoursAdditional?.toFixed(2) || 0,
+        [t("chartsTab.projectCharts.hours_consumed_total_throughput")]:
+          projectThroughputHours?.toFixed(2) || 0,
       }
-    ) || []
+    }
+  )
 
-  const projectConsumedHoursByRoleChartData =
-    projectConsolidationsWeekly?.map(
-      ({
-        consolidationDate,
-        projectThroughputHours,
-        projectThroughputHoursManagement,
-        projectThroughputHoursDevelopment,
-        projectThroughputHoursDesign,
-      }) => {
-        return {
-          period: consolidationDate || "",
-          [t("chartsTab.projectCharts.consumed_hours_by_role_design_effort")]:
-            projectThroughputHoursDesign?.toFixed(2) || 0,
-          [t(
-            "chartsTab.projectCharts.consumed_hours_by_role_development_effort"
-          )]: projectThroughputHoursDevelopment?.toFixed(2) || 0,
-          [t(
-            "chartsTab.projectCharts.consumed_hours_by_role_management_effort"
-          )]: projectThroughputHoursManagement?.toFixed(2) || 0,
-          [t("chartsTab.projectCharts.consumed_hours_by_role_total_effort")]:
-            projectThroughputHours?.toFixed(2) || 0,
-        }
+  const projectConsumedHoursByRoleChartData = projectConsolidationsWeekly?.map(
+    ({
+      consolidationDate,
+      projectThroughputHours,
+      projectThroughputHoursManagement,
+      projectThroughputHoursDevelopment,
+      projectThroughputHoursDesign,
+    }) => {
+      return {
+        period: consolidationDate || "",
+        [t("chartsTab.projectCharts.consumed_hours_by_role_design_effort")]:
+          projectThroughputHoursDesign?.toFixed(2) || 0,
+        [t(
+          "chartsTab.projectCharts.consumed_hours_by_role_development_effort"
+        )]: projectThroughputHoursDevelopment?.toFixed(2) || 0,
+        [t("chartsTab.projectCharts.consumed_hours_by_role_management_effort")]:
+          projectThroughputHoursManagement?.toFixed(2) || 0,
+        [t("chartsTab.projectCharts.consumed_hours_by_role_total_effort")]:
+          projectThroughputHours?.toFixed(2) || 0,
       }
-    ) || []
+    }
+  )
 
   const projectConsumedHoursByRoleInMonthChartData =
     projectConsolidationsLastMonth?.map(
@@ -221,15 +204,16 @@ const ProjectDemandsCharts = ({
           )]: projectThroughputHoursInMonth?.toFixed(2) || 0,
         }
       }
-    ) || []
+    )
 
-  const projectHoursPerStage =
-    hoursPerStageChartData?.xAxis?.map((xValue, index: number) => {
+  const projectHoursPerStage = hoursPerStageChartData?.xAxis?.map(
+    (xValue, index: number) => {
       return {
         index: index,
         [xValue]: hoursPerStageChartData.yAxis?.[index] || 0,
       }
-    }) || []
+    }
+  )
 
   const projectLeadTimeBreakdown = leadTimeBreakdownData
     ? leadTimeBreakdownData.xAxis.map((xValue, index: number) => {
@@ -246,7 +230,7 @@ const ProjectDemandsCharts = ({
         index: index,
         [xValue]: hoursPerCoordinationStageChartData.yAxis?.[index] || 0,
       }
-    }) || []
+    })
 
   return (
     <Grid container spacing={2} rowSpacing={8}>
@@ -404,33 +388,9 @@ const ProjectDemandsCharts = ({
           }}
         />
       </ChartGridItem>
-      <ChartGridItem title={t("chartsTab.projectCharts.flow_efficiency_chart")}>
-        <LineChart
-          data={flowEfficiencyChartData}
-          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.hours_consumed_x_label"),
-            },
-            yFormat: (value: number) => `${value}%`,
-            enableSlices: "x",
-            sliceTooltip: ({ slice }: SliceTooltipProps) => (
-              <LineChartTooltip
-                slice={slice}
-                xLabel={t(
-                  "chartsTab.projectCharts.flow_efficiency_tooltip_label"
-                )}
-              />
-            ),
-          }}
-        />
-      </ChartGridItem>
+
+      <ProjectFlowEfficiency project={project} />
+
       <ChartGridItem title={t("chartsTab.projectCharts.hoursPerDemandChart")}>
         <LineChart
           data={hoursPerDemandChartData}
@@ -459,7 +419,7 @@ const ProjectDemandsCharts = ({
       </ChartGridItem>
       <ChartGridItem title={t("chartsTab.projectCharts.hours_consumed_chart")}>
         <BarChart
-          data={projectHoursConsumed}
+          data={projectHoursConsumed || []}
           keys={[
             t("chartsTab.projectCharts.hours_consumed_upstream"),
             t("chartsTab.projectCharts.hours_consumed_downstream"),
@@ -476,7 +436,7 @@ const ProjectDemandsCharts = ({
         title={t("chartsTab.projectCharts.consumed_hours_by_role_chart")}
       >
         <BarChart
-          data={projectConsumedHoursByRoleChartData}
+          data={projectConsumedHoursByRoleChartData || []}
           keys={[
             t("chartsTab.projectCharts.consumed_hours_by_role_design_effort"),
             t(
@@ -503,7 +463,7 @@ const ProjectDemandsCharts = ({
         )}
       >
         <BarChart
-          data={projectConsumedHoursByRoleInMonthChartData}
+          data={projectConsumedHoursByRoleInMonthChartData || []}
           axisLeftLegend={t(
             "chartsTab.projectCharts.consumed_hours_by_role_in_month_y_label"
           )}
@@ -527,7 +487,7 @@ const ProjectDemandsCharts = ({
       </ChartGridItem>
       <ChartGridItem title={t("chartsTab.projectCharts.hours_per_stage_chart")}>
         <BarChart
-          data={projectHoursPerStage}
+          data={projectHoursPerStage || []}
           keys={hoursPerStageChartData?.xAxis?.map(String) || []}
           indexBy="index"
           axisLeftLegend={t("chartsTab.projectCharts.hours_per_stage_y_label")}
@@ -538,7 +498,7 @@ const ProjectDemandsCharts = ({
         title={t("chartsTab.projectCharts.hours_per_coordination_stage_chart")}
       >
         <BarChart
-          data={projectHoursPerCoordinationStage}
+          data={projectHoursPerCoordinationStage || []}
           keys={hoursPerCoordinationStageChartData?.xAxis?.map(String) || []}
           indexBy="index"
           axisLeftLegend={t(

diff --git a/app/spa/src/pages/Projects/Charts/ProjectFlowEfficiency.tsx b/app/spa/src/pages/Projects/Charts/ProjectFlowEfficiency.tsx
@@ -0,0 +1,62 @@
+import { ChartGridItem } from "../../../components/charts/ChartGridItem"
+import { LineChart } from "../../../components/charts/LineChart"
+import { Project } from "../../../modules/project/project.types"
+import { useTranslation } from "react-i18next"
+import { SliceTooltipProps } from "@nivo/line"
+import LineChartTooltip from "../../../components/charts/tooltips/LineChartTooltip"
+
+const ProjectFlowEfficiency = ({ project }: ProjectFlowEfficiencyProps) => {
+  const { t } = useTranslation(["projectChart"])
+
+  const projectConsolidationsWeekly = project.projectConsolidationsWeekly
+  const flowEfficiencyChartData = [
+    {
+      id: project.name || "",
+      data:
+        projectConsolidationsWeekly?.map(
+          ({ consolidationDate, flowEfficiency }) => {
+            return {
+              x: consolidationDate,
+              y: flowEfficiency,
+            }
+          }
+        ) || [],
+    },
+  ]
+
+  return (
+    <ChartGridItem title={t("chartsTab.projectCharts.flow_efficiency_chart")}>
+      <LineChart
+        data={flowEfficiencyChartData}
+        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.hours_consumed_x_label"),
+          },
+          yFormat: (value: number) => `${value}%`,
+          enableSlices: "x",
+          sliceTooltip: ({ slice }: SliceTooltipProps) => (
+            <LineChartTooltip
+              slice={slice}
+              xLabel={t(
+                "chartsTab.projectCharts.flow_efficiency_tooltip_label"
+              )}
+            />
+          ),
+        }}
+      />
+    </ChartGridItem>
+  )
+}
+
+type ProjectFlowEfficiencyProps = {
+  project: Project
+}
+
+export default ProjectFlowEfficiency
diff --git a/app/spa/src/pages/Projects/Charts/ProjectStatusReportCharts.tsx b/app/spa/src/pages/Projects/Charts/ProjectStatusReportCharts.tsx
@@ -8,6 +8,7 @@ import { Grid } from "@mui/material"
 import { Project } from "../../../modules/project/project.types"
 import ProjectOperationalRiskEvolution from "./ProjectOperationalRiskEvolution"
 import ProjectDeliveriesByClassOfService from "./ProjectDeliveriesByClassOfService"
+import ProjectFlowEfficiency from "./ProjectFlowEfficiency"
 
 const ProjectStatusReportCharts = ({
   project,
@@ -22,6 +23,7 @@ const ProjectStatusReportCharts = ({
       <ProjectCumulativeFlowData project={project} />
       <ProjectOperationalRiskEvolution project={project} />
       <ProjectDeliveriesByClassOfService project={project} />
+      <ProjectFlowEfficiency project={project} />
     </Grid>
   )
 }

diff --git a/app/spa/src/pages/Teams/TeamDashboard.tsx b/app/spa/src/pages/Teams/TeamDashboard.tsx
@@ -109,7 +109,7 @@ const TEAM_DASHBOARD_QUERY = gql`
 `
 
 type TeamDashboardDTO = {
-  team: Team
+  team?: Team
 }
 
 const TeamDashboard = () => {
@@ -132,8 +132,7 @@ const TeamDashboard = () => {
   })
   const { register } = useForm()
 
-  const company = me?.currentCompany
-  const companyName = company?.name
+  const companyName = me?.currentCompany?.name
   const companyUrl = `/companies/${companySlug}`
   const team = data?.team
   const breadcrumbsLinks = [
-Original file line number
+Diff line change
@@ Expand Up / @@ -90,7 +90,7 @@ @@
           ],
           "max-statements": [
             "error",
           ]
         }
       },
@@ Expand Down @@