sgeUpdated/sge-frontend/src/components/subSector-graphics/ConstantEnergyGraphics.js

import React, { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import { Col, Label, Row } from "reactstrap";
import DataTable from "react-data-table-component";
import { editNumbers } from "../edit-numbers";
import { VerticalBarChart } from "../graphics";
import PdfHeader from "../pdf-header";

const ConstantEnergyGraphics = ({
  mainDataTablesFilterByYear,
  constantEnergyData,
  isPDFDownloading,
  hideTables,
  colors,
  hideComponents,
  handleCheckboxChange,
  areaName,
  year,
}) => {
  const { t } = useTranslation();

  const [scopeOfConstantEnergyData, setScopeOfConstantEnergyData] = useState(
    []
  );
  const [filterSubSector, setFilterSubSector] = useState({});

  const serverSideColumnsOfConstantEmergy = [
    {
      name: t("EmissionSources.subSector"),
      selector: (row) => row.subSector,
      sortable: false,
      cell: (row) => (
        <span
          style={{
            fontWeight:
              row?.subSector?.tag === "Genel Toplam" ? "bold" : "initial",
          }}
        >
          {row.subSector?.tag || "-"}
        </span>
      ),
    },
    {
      name: `Sera Gazı Miktarı (${t("DataInput.total")} tCO₂e)`,
      selector: (row) => row.selector,
      sortable: false,
      cell: (row) => (
        <span
          style={{
            fontWeight:
              row?.subSector?.tag === "Genel Toplam" ? "bold" : "initial",
          }}
        >
          {editNumbers(row.totalEmission) || "-"}
        </span>
      ),
    },
    {
      name: `${t("Oransal Dağılım")} %`,
      selector: (row) => row.percentage,
      sortable: false,
      cell: (row) => (
        <span
          style={{
            fontWeight:
              row?.subSector?.tag === "Genel Toplam" ? "bold" : "initial",
          }}
        >
          {row.percentage + "%" || "-"}
        </span>
      ),
    },
  ];

  const serverSideColumnsOfScopeOfConstantEmergy = [
    {
      name: t("EmissionSources.subSector"),
      selector: (row) => row.subSector,
      sortable: false,
      cell: (row) => (
        <span
          style={{
            fontWeight: !row?.emissionSource?.tag ? "bold" : "initial",
          }}
        >
          {row.subSector?.tag || "-"}
        </span>
      ),
    },
    {
      name: t("EmissionSources.emissionSource"),
      selector: (row) => row.emissionSource,
      sortable: false,
      cell: (row) => <span>{row.emissionSource?.tag || ""}</span>,
    },
    {
      name: `Sera Gazı Miktarı (${t("DataInput.total")} tCO₂e)`,
      selector: (row) => row.totalEmission,
      sortable: false,
      cell: (row) => (
        <span
          style={{
            fontWeight: !row?.emissionSource?.tag ? "bold" : "initial",
          }}
        >
          {editNumbers(row.totalEmission) || "-"}
        </span>
      ),
    },
    {
      name: t("EmissionSources.emissionScopes"),
      selector: (row) => row.emissionScopes,
      sortable: false,
      cell: (row) => <span>{row.emissionScope?.tag || "-"}</span>,
    },
  ];

  const calculateScopeData = (filteredData) => {
    if (!filteredData || filteredData.length === 0) {
      return [];
    }

    const reduceByEmissionSourceData = filteredData.reduce((result, item) => {
      const existingItem = result.find(
        (resultItem) => resultItem.emissionSource.id === item.emissionSource.id
      );
      if (existingItem) {
        existingItem.totalEmission += item.totalEmission;
      } else {
        result.push({
          emissionSource: item.emissionSource,
          subSector: item.subSector,
          emissionScope: item.emissionScope,
          totalEmission: item.totalEmission,
        });
      }
      return result;
    }, []);

    let totalEmission = 0;
    for (let i = 0; i < reduceByEmissionSourceData.length; i++) {
      totalEmission += reduceByEmissionSourceData[i].totalEmission;
    }

    const lastItem = {
      subSector: {
        tag: `${reduceByEmissionSourceData[0]?.subSector.tag} Toplamı`,
      },
      totalEmission: `${editNumbers(totalEmission)}`,
    };

    return [...reduceByEmissionSourceData, lastItem];
  };

  useEffect(() => {
    if (
      mainDataTablesFilterByYear?.length > 0 &&
      constantEnergyData?.length > 0
    ) {
      const newConstantEnergyData = mainDataTablesFilterByYear.filter(
        (data) => data.sector?.tag === "Sabit Enerji"
      );

      const groupedArray = newConstantEnergyData.reduce((result, item) => {
        const subSectorId = item.subSector.id;
        if (result[subSectorId]) {
          result[subSectorId].push(item);
        } else {
          result[subSectorId] = [item];
        }
        return result;
      }, {});

      const groupedArrayValues = Object.values(groupedArray);
      const newData = groupedArrayValues.flatMap((group) =>
        calculateScopeData(group)
      );

      setScopeOfConstantEnergyData([
        ...newData,
        constantEnergyData[constantEnergyData.length - 1],
      ]);
    }
  }, [constantEnergyData]);

  useEffect(() => {
    const initialFilterSubSector = constantEnergyData
      .filter((data) => data.subSector.tag !== "Genel Toplam")
      .reduce((acc, data) => {
        return {
          ...acc,
          [data.subSector.tag]: true,
        };
      }, {});

    setFilterSubSector(initialFilterSubSector);
  }, []);

  return (
    <>
      <div id="graphics-container2">
        {isPDFDownloading && <PdfHeader areaName={areaName} year={year} />}
        <div
          style={{
            display: "flex",
            justifyContent: "center",
            marginTop: "20px",
            boxShadow: !isPDFDownloading
              ? "rgba(2, 138, 74, 0.1) 0px 0px 19px 0px"
              : "",
          }}
        >
          <h1
            style={{
              fontSize: `${isPDFDownloading ? "45px" : ""}`,
            }}
            className="text-center p-2"
          >
            Sabit Enerji
          </h1>
        </div>
        <Row className="mx-0 mt-2 mb-50 justify-content-center">
          {!hideTables &&
            !(
              isPDFDownloading &&
              hideComponents["constant-energy-subSector-dataTable"]
            ) && (
              <Col sm="9" md="9">
                {!isPDFDownloading && (
                  <input
                    type="checkbox"
                    checked={
                      !hideComponents["constant-energy-subSector-dataTable"]
                    }
                    onChange={() =>
                      handleCheckboxChange(
                        "constant-energy-subSector-dataTable"
                      )
                    }
                  />
                )}
                <DataTable
                  title={
                    <h5
                      style={{
                        textAlign: "end",
                        fontWeight: "bold",
                        fontSize: `${isPDFDownloading ? "30px" : ""}`,
                      }}
                    >
                      Sabit Enerji Sektörü Sera Gazı Emisyonları
                    </h5>
                  }
                  className="react-dataTable mt-1 border-black"
                  columns={serverSideColumnsOfConstantEmergy}
                  data={constantEnergyData}
                  noDataComponent={
                    <p className="p-2">
                      {t("DataInput.report")}
                      {t("Warnings.notFound")}
                    </p>
                  }
                  customStyles={
                    isPDFDownloading
                      ? {
                          rows: {
                            fontSize: "25px",
                          },
                          headCells: {
                            style: {
                              fontSize: "23px",
                            },
                          },
                        }
                      : ""
                  }
                />
              </Col>
            )}
        </Row>
        <Row className="mt-5 justify-content-center">
          {!(
            isPDFDownloading &&
            hideComponents["constant-energy-subSector-chart"]
          ) && (
            <Col sm="9" md="9" className="mt-5">
              {!isPDFDownloading && (
                <input
                  type="checkbox"
                  checked={!hideComponents["constant-energy-subSector-chart"]}
                  onChange={() =>
                    handleCheckboxChange("constant-energy-subSector-chart")
                  }
                />
              )}
              <VerticalBarChart
                data={constantEnergyData}
                filterSubSector={filterSubSector}
                colors={colors}
              />
            </Col>
          )}
          {!isPDFDownloading && (
            <Col sm="1" md="1" className="mt-5">
              <Label>{t("Show")}</Label>
              {constantEnergyData
                .filter((data) => data.subSector.tag != "Genel Toplam")
                .map((data, index) => (
                  <div className="form-check form-switch mb-2" key={index}>
                    <input
                      className="form-check-input"
                      type="checkbox"
                      role="switch"
                      id={data.subSector.tag}
                      checked={
                        filterSubSector?.[data.subSector.tag] === true
                          ? true
                          : false
                      }
                      onChange={(e) => {
                        setFilterSubSector({
                          ...filterSubSector,
                          [data.subSector.tag]: e.target.checked,
                        });
                      }}
                    />
                    <label
                      className="form-check-label h6"
                      htmlFor={data.subSector.tag}
                    >
                      {data.subSector.tag}
                    </label>
                  </div>
                ))}
            </Col>
          )}
        </Row>
      </div>

      <div id="graphics-container3">
        {isPDFDownloading && <PdfHeader areaName={areaName} year={year} />}
        <Row className="mt-2 justify-content-center">
          {!hideTables &&
            !(
              isPDFDownloading &&
              hideComponents["constant-energy-scope-dataTable"]
            ) && (
              <Col sm="9" md="9">
                {!isPDFDownloading && (
                  <input
                    type="checkbox"
                    checked={!hideComponents["constant-energy-scope-dataTable"]}
                    onChange={() =>
                      handleCheckboxChange("constant-energy-scope-dataTable")
                    }
                  />
                )}
                <DataTable
                  title={
                    <h5
                      style={{
                        textAlign: "end",
                        fontWeight: "bold",
                        fontSize: `${isPDFDownloading ? "30px" : ""}`,
                      }}
                    >
                      Sabit Enerji SGE Kapsam Sınıflandırması
                    </h5>
                  }
                  className="react-dataTable mt-1 border-black"
                  columns={serverSideColumnsOfScopeOfConstantEmergy}
                  data={scopeOfConstantEnergyData}
                  noDataComponent={
                    <p className="p-2">
                      {t("DataInput.report")}
                      {t("Warnings.notFound")}
                    </p>
                  }
                  customStyles={
                    isPDFDownloading
                      ? {
                          rows: {
                            fontSize: "25px",
                          },
                          headCells: {
                            style: {
                              fontSize: "23px",
                            },
                          },
                        }
                      : ""
                  }
                />
              </Col>
            )}
        </Row>
      </div>
    </>
  );
};

export default ConstantEnergyGraphics;