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

import React, { useState, useEffect } 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 WasteGraphics = ({
  wasteData,
  isPDFDownloading,
  hideTables,
  colors,
  hideComponents,
  handleCheckboxChange,
  areaName,
  year,
}) => {
  const { t } = useTranslation();

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

  const serverSideColumnsOfWaste = [
    {
      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.totalEmission,
      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>
      ),
    },
  ];

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

    setFilterSubSector(initialFilterSubSector);
  }, []);

  return (
    <div id="graphics-container-waste">
      {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"
        >
          Atık
        </h1>
      </div>
      <Row className="mx-0 mt-5 mb-50 justify-content-center">
        {!hideTables &&
          !(
            isPDFDownloading && hideComponents["waste-subSector-dataTable"]
          ) && (
            <Col sm="9" md="9">
              {!isPDFDownloading && (
                <input
                  type="checkbox"
                  checked={!hideComponents["waste-subSector-dataTable"]}
                  onChange={() =>
                    handleCheckboxChange("waste-subSector-dataTable")
                  }
                />
              )}
              <DataTable
                title={
                  wasteData != undefined && (
                    <h5
                      style={{
                        textAlign: "end",
                        fontWeight: "bold",
                        fontSize: `${isPDFDownloading ? "30px" : ""}`,
                      }}
                    >
                      Atık Sektörü Sera Gazı Emisyonları
                    </h5>
                  )
                }
                className="react-dataTable mt-1 border-black"
                columns={serverSideColumnsOfWaste}
                data={wasteData}
                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["waste-subSector-chart"]) && (
          <Col sm="9" md="7" className="mt-5">
            {!isPDFDownloading && (
              <input
                type="checkbox"
                checked={!hideComponents["waste-subSector-chart"]}
                onChange={() => handleCheckboxChange("waste-subSector-chart")}
              />
            )}
            <VerticalBarChart
              data={wasteData}
              filterSubSector={filterSubSector}
              colors={colors}
            />
          </Col>
        )}
        {!isPDFDownloading && (
          <Col sm="3" md="1" className="mt-5">
            <Label>{t("Filter")}</Label>
            {wasteData
              .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>
  );
};

export default WasteGraphics;