Add 'sge-frontend/' from commit '5fa787e054b25ac53edc7ff0275ea7960a709401'

git-subtree-dir: sge-frontend
git-subtree-mainline: 876c278ac4
git-subtree-split: 5fa787e054

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

@@ -0,0 +1,252 @@
+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} />;
+};