sgeUpdated/sge-frontend/src/components/graphics/index.js

import { Bar, Pie, Doughnut } from "react-chartjs-2";
import {
  Chart as ChartJS,
  ArcElement,
  Tooltip,
  Legend,
  CategoryScale,
  LinearScale,
  BarElement,
  Title,
} from "chart.js";
import ChartDataLabels from "chartjs-plugin-datalabels";
import { editNumbers } from "../edit-numbers";

ChartJS.register(
  ArcElement,
  Tooltip,
  Legend,
  CategoryScale,
  LinearScale,
  BarElement,
  Title,
  ChartDataLabels
);

export const PieChart = ({
  data,
  setIndexNumber,
  indexNumber,
  type,
  colors,
}) => {
  if (type === "subSector") {
    data = data[indexNumber]?.filter((a) => a.subSector.tag != "Genel Toplam");
  }

  const subSectorColors = colors.slice(3);

  const chartData = {
    labels:
      type === "sector"
        ? data.map((item) => item.sector.tag)
        : data.map((item) => item.subSector.tag),
    datasets: [
      {
        data: data.map((item) => item.totalEmission),
        backgroundColor: type === "sector" ? colors : subSectorColors,
      },
    ],
  };

  const options = {
    onClick: function (evt, element) {
      if (element.length > 0 && type === "sector") {
        setIndexNumber(element[0].index);
        //console.log(chartData.labels[element[0].index]); // sector/subsector tag
      }
    },
    plugins: {
      title: {
        display: true,
        text:
          type === "sector"
            ? "Sektörlere Göre Sera Gazı Emisyonları"
            : "Alt Sektöre Göre Sera Gazı Emisyonları",
        font: {
          size: 30,
          family: "Montserrat",
          weight: "normal",
        },
      },
      legend: {
        position: "top",
        labels: {
          font: {
            size: 15,
            family: "Montserrat",
            weight: "normal",
          },
        },
      },
      datalabels: {
        formatter: function (value, context) {
          const percentage = (
            (value / context.chart.getDatasetMeta(0).total) *
            100
          ).toFixed(2);
          return percentage === "0.00"
            ? null
            : type === "sector"
            ? [context.chart.data.labels[context.dataIndex], percentage + "%"]
            : [percentage + "%"];
        },
        color: "white",
        anchor: "center",
        align: "center",
        font: {
          size: 23,
          family: "Montserrat",
          weight: "normal",
        },
      },
    },
  };

  return <Pie data={chartData} options={options} />;
};

export const VerticalBarChart = ({ data, filterSubSector, colors }) => {
  data = data?.filter((data) => data.subSector?.tag !== "Genel Toplam");
  let newData = data?.filter(
    (data) => filterSubSector?.[data.subSector.tag] != false
  );

  const totalEmission = newData?.reduce(
    (acc, item) => acc + item.totalEmission,
    0
  );
  const chartData = {
    labels: newData.map((item) => item.subSector?.tag || ""),
    datasets: [
      {
        data: newData.map((item) =>
          ((item.totalEmission / totalEmission) * 100).toFixed(2)
        ),
        backgroundColor: [colors[0]],
        totalEmission: newData.map((item) => editNumbers(item.totalEmission)),
      },
    ],
  };

  const options = {
    responsive: true,
    plugins: {
      legend: {
        display: false,
      },
      title: {
        display: true,
        text: `${newData?.[0]?.sector?.tag} SGE Dağılımı`,
        padding: {
          bottom: 50,
        },
        font: {
          size: 30,
          family: "Montserrat",
          weight: "normal",
        },
      },
      tooltip: {
        callbacks: {
          label: (context) =>
            `${context.dataset.totalEmission[context.dataIndex]} tCO₂e`,
        },
      },
      datalabels: {
        anchor: "end",
        align: "end",
        font: {
          size: 23,
          family: "Montserrat",
          weight: "normal",
        },
        formatter: (value, context) =>
          `${context.dataset.totalEmission[context.dataIndex]} tCO₂e`,
      },
    },
    scales: {
      y: {
        beginAtZero: true,
        ticks: {
          callback: (value) => `${value}%`,
          font: {
            size: 20,
            family: "Montserrat",
            weight: "normal",
          },
        },
      },
      x: {
        ticks: {
          font: {
            size: 20,
            family: "Montserrat",
            weight: "normal",
          },
        },
      },
    },
    barThickness: 70,
  };

  return <Bar data={chartData} options={options} />;
};

export const DoughnutChart = ({ data, colors }) => {
  const filteredData = data?.filter(
    (data) => data.emissionSource?.tag !== "Genel Toplam"
  );

  const chartData = {
    labels: filteredData.map((item) => item.emissionSource?.tag || ""),
    datasets: [
      {
        data: filteredData.map((item) => item.totalEmission),
        backgroundColor: colors,
      },
    ],
  };

  const options = {
    plugins: {
      title: {
        display: true,
        text: `${data[0].subSector.tag} Yakıt Bazlı Sera Gazı Emisyon Miktarları`,
        font: {
          size: 30,
          family: "Montserrat",
          weight: "normal",
        },
      },
      legend: {
        position: "top",
        labels: {
          font: {
            size: 15,
            family: "Montserrat",
            weight: "normal",
          },
        },
      },
      datalabels: {
        formatter: function (value, context) {
          const percentage = (
            (value / context.chart.getDatasetMeta(0).total) *
            100
          ).toFixed(2);
          return percentage === "0.00" ? null : [percentage + "%"];
        },
        color: "white",
        anchor: "center",
        align: "center",
        font: {
          size: 23,
          family: "Montserrat",
          weight: "normal",
        },
      },
    },
  };
  return <Doughnut data={chartData} options={options} />;
};