bodyshop/client/src/components/dashboard-components/monthly-employee-efficiency/monthly-employee-efficiency.component.jsx

import { Card } from "antd";
import _ from "lodash";
import moment from "moment";
import React from "react";
import { useTranslation } from "react-i18next";
import {
  Bar,
  CartesianGrid,
  ComposedChart,
  Legend,
  Line,
  ResponsiveContainer,
  Tooltip,
  XAxis,
  YAxis,
} from "recharts";
import * as Utils from "../../scoreboard-targets-table/scoreboard-targets-table.util";
import DashboardRefreshRequired from "../refresh-required.component";

export default function DashboardMonthlyEmployeeEfficiency({
  data,
  ...cardProps
}) {
  const { t } = useTranslation();
  if (!data) return null;
  if (!data.monthly_employee_efficiency)
    return <DashboardRefreshRequired {...cardProps} />;

  const ticketsByDate = _.groupBy(data.monthly_employee_efficiency, (item) =>
    moment(item.date).format("YYYY-MM-DD")
  );

  const listOfDays = Utils.ListOfDaysInCurrentMonth();

  const chartData = listOfDays.reduce((acc, val) => {
    //Sum up the current day.
    let dailyHrs;
    if (!!ticketsByDate[val]) {
      dailyHrs = ticketsByDate[val].reduce(
        (dayAcc, dayVal) => {
          return {
            actual: dayAcc.actual + dayVal.actualhrs,
            productive: dayAcc.productive + dayVal.productivehrs,
          };
        },
        { actual: 0, productive: 0 }
      );
    } else {
      dailyHrs = { actual: 0, productive: 0 };
    }

    const dailyEfficiency =
      ((dailyHrs.productive - dailyHrs.actual) / dailyHrs.actual + 1) * 100;

    const theValue = {
      date: moment(val).format("DD"),
      ...dailyHrs,
      dailyEfficiency: isNaN(dailyEfficiency) ? 0 : dailyEfficiency.toFixed(1),
      accActual:
        acc.length > 0
          ? acc[acc.length - 1].accActual + dailyHrs.actual
          : dailyHrs.actual,

      accProductive:
        acc.length > 0
          ? acc[acc.length - 1].accProductive + dailyHrs.productive
          : dailyHrs.productive,
      accEfficiency: 0,
    };
    theValue.accEfficiency = (
      ((theValue.accProductive - theValue.accActual) /
        (theValue.accActual || 1) +
        1) *
      100
    ).toFixed(1);

    return [...acc, theValue];
  }, []);

  return (
    <Card
      title={t("dashboard.titles.monthlyemployeeefficiency")}
      {...cardProps}
    >
      <div style={{ height: "100%" }}>
        <ResponsiveContainer width="100%" height="100%">
          <ComposedChart
            data={chartData}
            margin={{ top: 20, right: 20, bottom: 20, left: 20 }}
          >
            <CartesianGrid stroke="#f5f5f5" />
            <XAxis dataKey="date" />
            <YAxis
              yAxisId="left"
              orientation="left"
              stroke="#8884d8"
              unit=" hrs"
            />
            <YAxis
              yAxisId="right"
              orientation="right"
              stroke="#82ca9d"
              unit="%"
            />
            <Tooltip />
            <Legend />
            <Line
              yAxisId="right"
              name="Accumulated Efficiency"
              type="monotone"
              unit="%"
              dataKey="accEfficiency"
              stroke="#152228"
              connectNulls
              //    activeDot={{ r: 8 }}
            />
            <Line
              name="Daily Efficiency"
              yAxisId="right"
              unit="%"
              type="monotone"
              connectNulls
              dataKey="dailyEfficiency"
              stroke="#d31717"
            />
            <Bar
              name="Actual Hours"
              dataKey="actual"
              yAxisId="left"
              unit=" hrs"
              //stackId="day"
              barSize={20}
              fill="#102568"
            />
            <Bar
              name="Productive Hours"
              dataKey="productive"
              yAxisId="left"
              unit=" hrs"
              //stackId="day"
              barSize={20}
              fill="#017664"
            />
          </ComposedChart>
        </ResponsiveContainer>
      </div>
    </Card>
  );
}

export const DashboardMonthlyEmployeeEfficiencyGql = `
  monthly_employee_efficiency: timetickets(where: {_and: [{date: {_gte: "${moment()
    .startOf("month")
    .format("YYYY-MM-DD")}"}},{date: {_lte: "${moment()
  .endOf("month")
  .format("YYYY-MM-DD")}"}} ]}) {
    actualhrs
    productivehrs
    employeeid
    employee {
      first_name
      last_name
    }
    date
  }
`;