1026 lines
32 KiB
JavaScript
1026 lines
32 KiB
JavaScript
|
||
import React, { useState, useEffect } from "react";
|
||
import {
|
||
Button,
|
||
Card,
|
||
CardHeader,
|
||
CardTitle,
|
||
Col,
|
||
Dropdown,
|
||
DropdownToggle,
|
||
DropdownMenu,
|
||
DropdownItem,
|
||
Label,
|
||
Row,
|
||
} from "reactstrap";
|
||
import Select from "react-select";
|
||
import { useSelector, useDispatch } from "react-redux";
|
||
import { useTranslation } from "react-i18next";
|
||
import DataTable from "react-data-table-component";
|
||
import {
|
||
getDataCenters,
|
||
getDataCenterVMs,
|
||
} from "../redux/actions/dataCenter";
|
||
import { getAreasByDataCenter } from "../redux/actions/areas";
|
||
import { getMainDataTablesByVMs, testMainDataTables } from "../redux/actions/mainDataTables";
|
||
import { editNumbers } from "../components/edit-numbers";
|
||
import { PieChart } from "../components/graphics";
|
||
import ConstantEnergyGraphics from "../components/subSector-graphics/ConstantEnergyGraphics";
|
||
import TransportGraphics from "../components/subSector-graphics/TransportGraphics";
|
||
import WasteGraphics from "../components/subSector-graphics/WasteGraphics";
|
||
import { Download } from "react-feather";
|
||
import html2canvas from "html2canvas";
|
||
import jsPDF from "jspdf";
|
||
import { default as SweetAlert } from "sweetalert2";
|
||
import withReactContent from "sweetalert2-react-content";
|
||
import { ChromePicker } from "react-color";
|
||
import { customFilterForSelect } from "../utility/Utils";
|
||
import PdfHeader from "../components/pdf-header";
|
||
|
||
const Swal = withReactContent(SweetAlert);
|
||
|
||
const ColorPicker = ({ selectedColors, setSelectedColors }) => {
|
||
const [showColorPicker, setShowColorPicker] = useState(false);
|
||
const [currentColorIndex, setCurrentColorIndex] = useState(null);
|
||
|
||
useEffect(() => {
|
||
const storedColors = localStorage.getItem("selectedColors");
|
||
if (storedColors) {
|
||
setSelectedColors(JSON.parse(storedColors));
|
||
}
|
||
}, []);
|
||
|
||
useEffect(() => {
|
||
localStorage.setItem("selectedColors", JSON.stringify(selectedColors));
|
||
}, [selectedColors]);
|
||
|
||
const handleColorChange = (color) => {
|
||
const newColor = color.hex;
|
||
const updatedColors = [...selectedColors];
|
||
updatedColors[currentColorIndex] = newColor;
|
||
setSelectedColors(updatedColors);
|
||
};
|
||
|
||
const handleColorClick = (index) => {
|
||
setCurrentColorIndex(index);
|
||
setShowColorPicker(true);
|
||
};
|
||
|
||
const handleCloseColorPicker = () => {
|
||
setCurrentColorIndex(null);
|
||
setShowColorPicker(false);
|
||
};
|
||
|
||
const handlePickerOutsideClick = (event) => {
|
||
// Renk seçici dışına tıklama kontrolü
|
||
if (
|
||
event.target.closest(".color-picker-container") === null &&
|
||
event.target.closest(".color-box") === null
|
||
) {
|
||
handleCloseColorPicker();
|
||
}
|
||
};
|
||
|
||
useEffect(() => {
|
||
// Tüm belgeye tıklama olayını dinle
|
||
document.addEventListener("click", handlePickerOutsideClick);
|
||
|
||
return () => {
|
||
// Bileşen kaldırıldığında tıklama olayının dinlemesini kaldır
|
||
document.removeEventListener("click", handlePickerOutsideClick);
|
||
};
|
||
}, []);
|
||
|
||
return (
|
||
<div className="color-picker-container">
|
||
<h5>Grafik Renkleri</h5>
|
||
{selectedColors.map((color, index) => (
|
||
<div
|
||
key={index}
|
||
className="color-box"
|
||
style={{
|
||
backgroundColor: color,
|
||
width: "30px",
|
||
height: "15px",
|
||
display: "inline-block",
|
||
marginRight: "10px",
|
||
cursor: "pointer",
|
||
}}
|
||
onClick={() => handleColorClick(index)}
|
||
></div>
|
||
))}
|
||
{showColorPicker && (
|
||
<div style={{ position: "absolute", zIndex: 1 }}>
|
||
<ChromePicker
|
||
color={selectedColors[currentColorIndex]}
|
||
onChange={handleColorChange}
|
||
//onChangeComplete={handleCloseColorPicker}
|
||
/>
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
};
|
||
|
||
const Graphics = () => {
|
||
const { t } = useTranslation();
|
||
const dispatch = useDispatch();
|
||
|
||
const dataCenterStore = useSelector((state) => state.dataCenter);
|
||
const areasStore = useSelector((state) => state.areas);
|
||
const mainDataTablesStore = useSelector((state) => state.mainDataTables);
|
||
|
||
const [bringGraphics, setBringGraphics] = useState(false);
|
||
const [mainDataTables, setMainDataTables] = useState([]);
|
||
const [mainDataTablesFilterByYear, setMainDataTablesFilterByYear] = useState(
|
||
[]
|
||
);
|
||
const [summaryData, setSummaryData] = useState([]);
|
||
const [pieChartData, setPieChartData] = useState([]);
|
||
const [constantEnergyData, setConstantEnergyData] = useState([]);
|
||
const [transportData, setTransportData] = useState([]);
|
||
const [transportSubSectorData, setTransportSubSectorData] = useState([]);
|
||
const [wasteData, setWasteData] = useState([]);
|
||
|
||
const [dataCenterOptions, setDataCenterOptions] = useState([]);
|
||
const [areasOptions, setAreasOptions] = useState([]);
|
||
const [filter, setFilter] = useState(false);
|
||
const [filterOptions, setFilterOptions] = useState({
|
||
sector: "",
|
||
area: "",
|
||
city: "",
|
||
district: "",
|
||
neighborhood: "",
|
||
year: "",
|
||
});
|
||
|
||
const [selectedDataCenter, setSelectedDataCenter] = useState("");
|
||
const [dataCenterVMs, setDataCenterVMs] = useState([]);
|
||
const roleTag = localStorage.getItem("roleTag");
|
||
|
||
const currentYear = new Date().getFullYear();
|
||
const renderYearOptions = () => {
|
||
const years = [];
|
||
for (let year = currentYear; year >= 1990; year--) {
|
||
years.push({ label: year, value: year });
|
||
}
|
||
return years;
|
||
};
|
||
|
||
const [showConstantEnergy, setShowConstantEnergy] = useState(false);
|
||
const [showTransport, setShowTransport] = useState(false);
|
||
const [showWaste, setShowWaste] = useState(false);
|
||
|
||
const [indexNumber, setIndexNumber] = useState(null);
|
||
|
||
const [dropdownOpen, setDropdownOpen] = useState(false);
|
||
const [selectedOption, setSelectedOption] = useState("");
|
||
|
||
const [isPDFDownloading, setIsPDFDownloading] = useState(false);
|
||
const [hideTables, setHideTables] = useState(false);
|
||
const [hideComponents, setHideComponents] = useState({});
|
||
|
||
const initialColors = [
|
||
"orange",
|
||
"gray",
|
||
"#028a4a",
|
||
"blue",
|
||
"pink",
|
||
"brown",
|
||
"purple",
|
||
];
|
||
const [selectedColors, setSelectedColors] = useState(initialColors);
|
||
|
||
const serverSideColumnsOfMain = [
|
||
{
|
||
name: t("EmissionSources.sector"),
|
||
selector: (row) => row.sector,
|
||
sortable: false,
|
||
cell: (row) => (
|
||
<span
|
||
style={{
|
||
fontWeight:
|
||
row?.sector?.tag === "Genel Toplam" ? "bold" : "initial",
|
||
}}
|
||
>
|
||
{row.sector?.tag || "-"}
|
||
</span>
|
||
),
|
||
},
|
||
{
|
||
name: `Sera Gazı Miktarı (${t("DataInput.total")} tCO₂e)`,
|
||
selector: (row) => row.totalEmission,
|
||
sortable: false,
|
||
cell: (row) => (
|
||
<span
|
||
style={{
|
||
fontWeight:
|
||
row?.sector?.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?.sector?.tag === "Genel Toplam" ? "bold" : "initial",
|
||
}}
|
||
>
|
||
{row.percentage || "-"}
|
||
</span>
|
||
),
|
||
},
|
||
];
|
||
|
||
useEffect(() => {
|
||
dispatch(getDataCenters());
|
||
}, []);
|
||
|
||
useEffect(() => {
|
||
console.log('Data center selection changed:', selectedDataCenter);
|
||
if (selectedDataCenter?.value) {
|
||
console.log('Fetching data for data center:', selectedDataCenter.value);
|
||
// Get areas for the selected data center
|
||
dispatch(
|
||
getAreasByDataCenter(selectedDataCenter.value)
|
||
);
|
||
|
||
// Get VMs for the selected data center
|
||
getDataCenterVMs(selectedDataCenter.value).then(vms => {
|
||
console.log('VMs received for data center:', vms);
|
||
setDataCenterVMs(vms);
|
||
});
|
||
} else {
|
||
console.log('No data center selected');
|
||
setDataCenterVMs([]);
|
||
}
|
||
}, [selectedDataCenter]);
|
||
|
||
useEffect(() => {
|
||
console.log('Debug useEffect:', {
|
||
filterOptionsYear: filterOptions?.year,
|
||
selectedDataCenter: selectedDataCenter,
|
||
dataCenterVMsLength: dataCenterVMs.length,
|
||
filter: filter
|
||
});
|
||
|
||
if (filterOptions?.year && selectedDataCenter && dataCenterVMs.length > 0) {
|
||
const vmIds = dataCenterVMs.map(vm => vm.id);
|
||
console.log('Fetching main data tables with VM IDs:', vmIds);
|
||
console.log('Filter options:', filterOptions);
|
||
dispatch(
|
||
getMainDataTablesByVMs({
|
||
vmIds,
|
||
filterOptions,
|
||
})
|
||
);
|
||
} else {
|
||
console.log('Conditions not met for fetching data:', {
|
||
hasYear: !!filterOptions?.year,
|
||
hasSelectedDataCenter: !!selectedDataCenter,
|
||
vmCount: dataCenterVMs.length
|
||
});
|
||
}
|
||
}, [filter, dataCenterVMs, dispatch, filterOptions, selectedDataCenter]);
|
||
|
||
useEffect(() => {
|
||
let dataCenterOptions = [];
|
||
|
||
if (dataCenterStore?.dataCenters && dataCenterStore.dataCenters.length > 0) {
|
||
dataCenterOptions = dataCenterStore.dataCenters.map((dataCenter) => ({
|
||
value: dataCenter.id,
|
||
label: dataCenter.dataCenter,
|
||
externalId: dataCenter.externalId,
|
||
}));
|
||
}
|
||
|
||
setDataCenterOptions(dataCenterOptions);
|
||
}, [dataCenterStore]);
|
||
|
||
useEffect(() => {
|
||
setAreasOptions([]);
|
||
|
||
const citiesOptions =
|
||
areasStore?.areasWithCriteria
|
||
?.map((area) =>
|
||
Array.isArray(area?.cities) // cities'in bir dizi olup olmadığını kontrol edin
|
||
? area.cities.map((city) => ({
|
||
value: city?.id,
|
||
label: city?.name,
|
||
type: "city",
|
||
}))
|
||
: []
|
||
)
|
||
.flat() || []; // Eğer map boş dönerse, `flat` sonrası boş bir dizi kullan
|
||
|
||
|
||
const districtsOptions = areasStore?.areasWithCriteria
|
||
?.map((area) => {
|
||
return area?.districts?.map((district) => {
|
||
return {
|
||
value: district?.id,
|
||
label: district?.name + " (" + district?.city?.name + ")",
|
||
type: "district",
|
||
};
|
||
});
|
||
})
|
||
.flat();
|
||
|
||
const neighborhoodsOptions = areasStore?.areasWithCriteria
|
||
?.map((area) => {
|
||
return area?.neighborhoods?.map((neighborhood) => {
|
||
return {
|
||
value: neighborhood?.id,
|
||
label:
|
||
neighborhood?.name +
|
||
" (" +
|
||
neighborhood?.district?.name +
|
||
" / " +
|
||
neighborhood?.district?.city?.name +
|
||
")",
|
||
type: "neighborhood",
|
||
};
|
||
});
|
||
})
|
||
.flat();
|
||
|
||
setAreasOptions([
|
||
...citiesOptions || [],
|
||
...districtsOptions || [],
|
||
...neighborhoodsOptions || [],
|
||
]);
|
||
}, [areasStore]);
|
||
|
||
useEffect(() => {
|
||
console.log('mainDataTablesStore changed:', mainDataTablesStore?.mainDataTables);
|
||
console.log('mainDataTablesStore full state:', mainDataTablesStore);
|
||
if (mainDataTablesStore?.mainDataTables) {
|
||
console.log('Setting mainDataTablesFilterByYear from store:', mainDataTablesStore.mainDataTables);
|
||
setMainDataTablesFilterByYear(mainDataTablesStore?.mainDataTables);
|
||
} else {
|
||
console.log('No mainDataTables in store');
|
||
}
|
||
}, [mainDataTablesStore.mainDataTables]);
|
||
|
||
useEffect(() => {
|
||
console.log('mainDataTablesFilterByYear changed:', mainDataTablesFilterByYear);
|
||
console.log('mainDataTablesFilterByYear length:', mainDataTablesFilterByYear?.length);
|
||
console.log('mainDataTablesFilterByYear data:', mainDataTablesFilterByYear);
|
||
|
||
if (mainDataTablesFilterByYear?.length > 0) {
|
||
let totalConstantEnergy = 0;
|
||
let totalTransport = 0;
|
||
let totalWaste = 0;
|
||
|
||
for (let i = 0; i < mainDataTablesFilterByYear?.length; i++) {
|
||
console.log('Processing record:', mainDataTablesFilterByYear[i]);
|
||
if (mainDataTablesFilterByYear[i].sector?.tag === "Sabit Enerji") {
|
||
totalConstantEnergy += mainDataTablesFilterByYear[i].totalEmission;
|
||
}
|
||
if (mainDataTablesFilterByYear[i].sector?.tag === "Ulaşım") {
|
||
totalTransport += mainDataTablesFilterByYear[i].totalEmission;
|
||
}
|
||
if (mainDataTablesFilterByYear[i].sector?.tag === "Atık") {
|
||
totalWaste += mainDataTablesFilterByYear[i].totalEmission;
|
||
}
|
||
}
|
||
|
||
console.log('Calculated totals:', { totalConstantEnergy, totalTransport, totalWaste });
|
||
|
||
let total = totalConstantEnergy + totalTransport + totalWaste;
|
||
|
||
const processedData = [
|
||
{
|
||
sector: { tag: "Sabit Enerji" },
|
||
totalEmission: totalConstantEnergy,
|
||
percentage: ((totalConstantEnergy / total) * 100).toFixed(2) + "%",
|
||
},
|
||
{
|
||
sector: { tag: "Ulaşım" },
|
||
totalEmission: totalTransport,
|
||
percentage: ((totalTransport / total) * 100).toFixed(2) + "%",
|
||
},
|
||
{
|
||
sector: { tag: "Atık" },
|
||
totalEmission: totalWaste,
|
||
percentage: ((totalWaste / total) * 100).toFixed(2) + "%",
|
||
},
|
||
{
|
||
sector: { tag: "Genel Toplam" },
|
||
totalEmission: `${editNumbers(total)} tCO₂e`,
|
||
percentage: "100,00%",
|
||
},
|
||
];
|
||
|
||
console.log('Setting mainDataTables:', processedData);
|
||
setMainDataTables(processedData);
|
||
} else {
|
||
console.log('No mainDataTablesFilterByYear data found. Length:', mainDataTablesFilterByYear?.length);
|
||
console.log('mainDataTablesStore state:', mainDataTablesStore);
|
||
}
|
||
}, [mainDataTablesFilterByYear]);
|
||
|
||
useEffect(() => {
|
||
console.log('mainDataTables changed for pie chart:', mainDataTables);
|
||
let newChartData = mainDataTables.filter(
|
||
(data) => data.sector.tag != "Genel Toplam"
|
||
);
|
||
console.log('Setting pieChartData:', newChartData);
|
||
setPieChartData(newChartData);
|
||
}, [mainDataTables]);
|
||
|
||
useEffect(() => {
|
||
if (!mainDataTables) return;
|
||
|
||
const sectorTags = ["Genel Toplam", "Sabit Enerji", "Ulaşım", "Atık"];
|
||
|
||
const filteredData = mainDataTables.filter((data) =>
|
||
sectorTags.includes(data.sector.tag)
|
||
);
|
||
|
||
const summaryData = {
|
||
areaName: selectedDataCenter?.label || "Seçili Veri Merkezi",
|
||
totalEmission: filteredData.find(
|
||
(data) => data.sector.tag === "Genel Toplam"
|
||
)?.totalEmission,
|
||
constantEnergyTotalEmission: editNumbers(
|
||
filteredData.find((data) => data.sector.tag === "Sabit Enerji")
|
||
?.totalEmission
|
||
),
|
||
transportTotalEmission: editNumbers(
|
||
filteredData.find((data) => data.sector.tag === "Ulaşım")?.totalEmission
|
||
),
|
||
wasteTotalEmission: editNumbers(
|
||
filteredData.find((data) => data.sector.tag === "Atık")?.totalEmission
|
||
),
|
||
};
|
||
|
||
setSummaryData(summaryData);
|
||
}, [mainDataTables, selectedDataCenter]);
|
||
|
||
const calculateResult = (data, filterTag) => {
|
||
const filteredData = data.filter((item) => item.sector?.tag === filterTag);
|
||
|
||
if (filterTag === "Ulaşım") {
|
||
setTransportSubSectorData(filteredData);
|
||
}
|
||
|
||
const result = filteredData.reduce((result, item) => {
|
||
const existingItem = result.find(
|
||
(resultItem) =>
|
||
resultItem.sector.id === item.sector.id &&
|
||
resultItem.subSector.id === item.subSector.id
|
||
);
|
||
if (existingItem) {
|
||
existingItem.totalEmission += item.totalEmission;
|
||
} else {
|
||
result.push({
|
||
sector: item.sector,
|
||
subSector: item.subSector,
|
||
totalEmission: item.totalEmission,
|
||
});
|
||
}
|
||
return result;
|
||
}, []);
|
||
|
||
return calculateData(result);
|
||
};
|
||
|
||
const calculateData = (filteredData) => {
|
||
if (filteredData?.length > 0) {
|
||
const totalEmission = filteredData.reduce(
|
||
(sum, item) => sum + item.totalEmission,
|
||
0
|
||
);
|
||
|
||
const updatedData = filteredData.map((item) => {
|
||
const percentage = ((item.totalEmission / totalEmission) * 100).toFixed(
|
||
2
|
||
);
|
||
return { ...item, percentage };
|
||
});
|
||
|
||
updatedData.push({
|
||
subSector: { tag: "Genel Toplam" },
|
||
totalEmission: `${editNumbers(totalEmission)} tCO₂e`,
|
||
percentage: "100,00",
|
||
});
|
||
|
||
return updatedData;
|
||
}
|
||
};
|
||
|
||
useEffect(() => {
|
||
if (mainDataTablesFilterByYear?.length > 0) {
|
||
const newConstantEnergyData = calculateResult(
|
||
mainDataTablesFilterByYear,
|
||
"Sabit Enerji"
|
||
);
|
||
setConstantEnergyData(newConstantEnergyData);
|
||
|
||
const newTransportData = calculateResult(
|
||
mainDataTablesFilterByYear,
|
||
"Ulaşım"
|
||
);
|
||
setTransportData(newTransportData);
|
||
|
||
const newWasteData = calculateResult(mainDataTablesFilterByYear, "Atık");
|
||
setWasteData(newWasteData);
|
||
}
|
||
}, [mainDataTablesFilterByYear]);
|
||
|
||
const toggleDropdown = () => {
|
||
setDropdownOpen(!dropdownOpen);
|
||
};
|
||
|
||
const handleOptionSelect = (option) => {
|
||
setSelectedOption(option);
|
||
|
||
const optionsMap = {
|
||
"TÜM SEKTÖRLER": {
|
||
showConstantEnergy: true,
|
||
showWaste: true,
|
||
showTransport: true,
|
||
},
|
||
"Sabit Enerji": {
|
||
showConstantEnergy: true,
|
||
showWaste: false,
|
||
showTransport: false,
|
||
},
|
||
Ulaşım: {
|
||
showConstantEnergy: false,
|
||
showWaste: false,
|
||
showTransport: true,
|
||
},
|
||
Atık: {
|
||
showConstantEnergy: false,
|
||
showWaste: true,
|
||
showTransport: false,
|
||
},
|
||
};
|
||
|
||
const { showConstantEnergy, showWaste, showTransport } = optionsMap[option];
|
||
setShowConstantEnergy(showConstantEnergy);
|
||
setShowWaste(showWaste);
|
||
setShowTransport(showTransport);
|
||
};
|
||
|
||
const handleBringButtonPressed = () => {
|
||
console.log('Getir button pressed');
|
||
console.log('Current state:', {
|
||
selectedDataCenter,
|
||
filterOptions,
|
||
dataCenterVMs,
|
||
filter
|
||
});
|
||
setFilter(!filter);
|
||
setBringGraphics(true);
|
||
};
|
||
|
||
const handleSelect = () => {
|
||
setBringGraphics(false);
|
||
setMainDataTables([]);
|
||
setMainDataTablesFilterByYear([]);
|
||
setPieChartData([]);
|
||
setIndexNumber(null);
|
||
setConstantEnergyData([]);
|
||
setShowConstantEnergy(false);
|
||
setTransportData([]);
|
||
setTransportSubSectorData([]);
|
||
setShowTransport(false);
|
||
setWasteData([]);
|
||
setShowWaste(false);
|
||
setSelectedOption(t("EmissionSources.sectors"));
|
||
};
|
||
|
||
const handleDownload = async () => {
|
||
setIsPDFDownloading(true);
|
||
|
||
const result = await Swal.fire({
|
||
title: `PDF çıktısı almak istediginize emin misiniz?`,
|
||
icon: "question",
|
||
showCancelButton: true,
|
||
confirmButtonText: "Evet",
|
||
cancelButtonText: t("Cruds.cancel"),
|
||
customClass: {
|
||
confirmButton: "btn btn-primary",
|
||
cancelButton: "btn btn-danger ml-1",
|
||
},
|
||
buttonsStyling: false,
|
||
});
|
||
if (result.value !== null && result.value === true) {
|
||
const input = [document.getElementById("graphics-container1")];
|
||
if (constantEnergyData && showConstantEnergy) {
|
||
input.push(
|
||
document.getElementById("graphics-container2"),
|
||
document.getElementById("graphics-container3")
|
||
);
|
||
}
|
||
if (transportData && showTransport) {
|
||
input.push(
|
||
document.getElementById("graphics-container4"),
|
||
document.getElementById("graphics-container5"),
|
||
document.getElementById("graphics-container6")
|
||
);
|
||
}
|
||
if (wasteData && showWaste) {
|
||
input.push(document.getElementById("graphics-container-waste"));
|
||
}
|
||
|
||
const generatePDF = async () => {
|
||
const doc = new jsPDF("p", "mm");
|
||
|
||
for (let i = 0; i < input.length; i++) {
|
||
const a = input[i];
|
||
|
||
const canvas = await html2canvas(a);
|
||
|
||
const imgWidth = 208;
|
||
const pageHeight = 295;
|
||
const imgHeight = (canvas.height * imgWidth) / canvas.width;
|
||
let heightLeft = imgHeight;
|
||
let position = 0;
|
||
heightLeft -= pageHeight;
|
||
const img = canvas.toDataURL("image/png");
|
||
doc.addImage(
|
||
img,
|
||
"PNG",
|
||
0,
|
||
position,
|
||
imgWidth,
|
||
imgHeight,
|
||
"",
|
||
"FAST"
|
||
);
|
||
while (heightLeft >= 0) {
|
||
position = heightLeft - imgHeight;
|
||
doc.addPage();
|
||
doc.addImage(
|
||
canvas,
|
||
"PNG",
|
||
0,
|
||
position,
|
||
imgWidth,
|
||
imgHeight,
|
||
"",
|
||
"FAST"
|
||
);
|
||
heightLeft -= pageHeight;
|
||
}
|
||
if (input.length > i + 1) {
|
||
doc.addPage();
|
||
}
|
||
}
|
||
|
||
doc.save("rapor.pdf");
|
||
setIsPDFDownloading(false);
|
||
};
|
||
|
||
generatePDF();
|
||
} else {
|
||
setIsPDFDownloading(false);
|
||
}
|
||
};
|
||
|
||
const handleCheckboxChange = (componentName) => {
|
||
setHideComponents((prevState) => ({
|
||
...prevState,
|
||
[componentName]: !prevState[componentName],
|
||
}));
|
||
};
|
||
|
||
return (
|
||
<div style={{ marginTop: "2%", marginBottom: "2%" }}>
|
||
<Card>
|
||
<CardHeader className="border-bottom">
|
||
<CardTitle tag="h4">Reports</CardTitle>
|
||
<Button
|
||
className="ml-2"
|
||
color="primary"
|
||
onClick={handleDownload}
|
||
disabled={isPDFDownloading}
|
||
>
|
||
<Download size={15} />
|
||
<span className="align-middle ml-50">
|
||
{isPDFDownloading ? "İndiriliyor..." : "PDF"}
|
||
</span>
|
||
</Button>
|
||
</CardHeader>
|
||
</Card>
|
||
<Row className="mx-0 mt-1 mb-50">
|
||
<Col sm="6" md="6">
|
||
<div className="d-flex align-items-center mb-1">
|
||
<Label className="mr-1 h5" for="datacenter-filter">
|
||
{t("DataCenter.title")}
|
||
</Label>
|
||
<Select
|
||
className="react-select w-100"
|
||
id="datacenter-filter"
|
||
closeMenuOnSelect={true}
|
||
menuPlacement="auto"
|
||
placeholder=""
|
||
filterOption={customFilterForSelect}
|
||
options={dataCenterOptions}
|
||
onChange={(value) => {
|
||
handleSelect();
|
||
setFilterOptions({
|
||
sector: "",
|
||
area: "",
|
||
city: "",
|
||
district: "",
|
||
neighborhood: "",
|
||
year: filterOptions.year,
|
||
});
|
||
setSelectedDataCenter(value);
|
||
}}
|
||
/>
|
||
</div>
|
||
</Col>
|
||
<Col sm="6" md="3">
|
||
<div className="d-flex align-items-center mb-1">
|
||
<Label className="mr-1 h5" for="year-select">
|
||
{t("DataInput.year")}
|
||
</Label>
|
||
<Select
|
||
id="year-select"
|
||
isClearable={false}
|
||
closeMenuOnSelect={true}
|
||
maxMenuHeight={150}
|
||
menuPlacement="auto"
|
||
className="react-select w-100"
|
||
placeholder=""
|
||
options={renderYearOptions()}
|
||
defaultValue={filterOptions?.year}
|
||
onChange={(value) => {
|
||
handleSelect();
|
||
setFilterOptions({
|
||
...filterOptions,
|
||
year: value,
|
||
});
|
||
}}
|
||
/>
|
||
</div>
|
||
</Col>
|
||
<Col sm="6" md="3">
|
||
<div className="d-flex align-items-center justify-content-between">
|
||
<div className="d-flex align-items-center">
|
||
<Button
|
||
color="primary"
|
||
onClick={handleBringButtonPressed}
|
||
disabled={!(selectedDataCenter && filterOptions.year)}
|
||
>
|
||
<span className="align-middle ml-50">Getir</span>
|
||
</Button>
|
||
<Button
|
||
color="secondary"
|
||
onClick={() => dispatch(testMainDataTables())}
|
||
className="ml-2"
|
||
>
|
||
<span className="align-middle ml-50">Test Data</span>
|
||
</Button>
|
||
</div>
|
||
{mainDataTables?.length > 1 && (
|
||
<div className="ml-2">
|
||
<input
|
||
id="hide-tables-checkbox"
|
||
className="form-check-input"
|
||
type="checkbox"
|
||
role="switch"
|
||
checked={hideTables}
|
||
onChange={(e) => {
|
||
setHideTables(e.target.checked);
|
||
}}
|
||
/>
|
||
<label
|
||
htmlFor="hide-tables-checkbox"
|
||
className="form-check-label h6"
|
||
>
|
||
Tabloları sakla
|
||
</label>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</Col>
|
||
</Row>
|
||
{mainDataTables?.length > 1 && (
|
||
<Row className="mx-0 mt-1 mb-1 d-flex justify-content-end">
|
||
<ColorPicker
|
||
selectedColors={selectedColors}
|
||
setSelectedColors={setSelectedColors}
|
||
/>
|
||
</Row>
|
||
)}
|
||
{mainDataTables?.length === 0 && bringGraphics && (
|
||
<Label>Gösterilecek bir veri bulunmamaktadır</Label>
|
||
)}
|
||
<div id="graphics-container1">
|
||
{mainDataTables?.length > 1 && isPDFDownloading && (
|
||
<>
|
||
<PdfHeader
|
||
areaName={summaryData.areaName}
|
||
year={filterOptions?.year?.value}
|
||
/>
|
||
<Row className="mx-0 mt-2 mb-5 justify-content-center">
|
||
<span style={{ fontSize: "30px" }} className="w-75 text-left p-1">
|
||
{summaryData.areaName} idari sınırları içerisindeki toplam sera
|
||
gazı emisyonu <b>{summaryData.totalEmission}</b> olarak ortaya
|
||
çıkmıştır. Hesaplanan emisyon değerinin sektör bazlı dağılımına
|
||
bakıldığında; Sabit Enerji sektöründe{" "}
|
||
<b>{summaryData.constantEnergyTotalEmission} tCO₂e</b>, Ulaşım
|
||
sektöründe <b>{summaryData.transportTotalEmission} tCO₂e </b>
|
||
ve Atık sektöründe <b>
|
||
{summaryData.wasteTotalEmission} tCO₂e
|
||
</b>{" "}
|
||
sera gazı emisyonu gerçekleştiği görülmektedir.
|
||
</span>
|
||
</Row>
|
||
</>
|
||
)}
|
||
{mainDataTables?.length > 1 && (
|
||
<>
|
||
<Row className="mx-0 mt-1 mb-5 justify-content-center">
|
||
{!hideTables &&
|
||
!(isPDFDownloading && hideComponents["sectors-dataTable"]) && (
|
||
<Col sm="9" md="9">
|
||
{!isPDFDownloading && (
|
||
<input
|
||
type="checkbox"
|
||
checked={!hideComponents["sectors-dataTable"]}
|
||
onChange={() =>
|
||
handleCheckboxChange("sectors-dataTable")
|
||
}
|
||
/>
|
||
)}
|
||
<DataTable
|
||
title={
|
||
<h5
|
||
style={{
|
||
textAlign: "end",
|
||
fontWeight: "bold",
|
||
fontSize: `${isPDFDownloading ? "30px" : ""}`,
|
||
}}
|
||
>
|
||
{selectedDataCenter?.label || "Seçili Veri Merkezi"} Sera Gazı Emisyon Dağılımı
|
||
</h5>
|
||
}
|
||
className="react-dataTable mt-1 border-black"
|
||
columns={serverSideColumnsOfMain}
|
||
data={mainDataTables}
|
||
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["sectors-pie-chart"]) && (
|
||
<div
|
||
style={{
|
||
width: `35%`,
|
||
}}
|
||
>
|
||
{!isPDFDownloading && (
|
||
<input
|
||
type="checkbox"
|
||
checked={!hideComponents["sectors-pie-chart"]}
|
||
onChange={() => handleCheckboxChange("sectors-pie-chart")}
|
||
/>
|
||
)}
|
||
<PieChart
|
||
data={pieChartData}
|
||
setIndexNumber={setIndexNumber}
|
||
type="sector"
|
||
colors={selectedColors}
|
||
/>
|
||
</div>
|
||
)}
|
||
{indexNumber != null && (
|
||
<div
|
||
style={{
|
||
width: `35%`,
|
||
marginLeft: "5%",
|
||
}}
|
||
>
|
||
{!isPDFDownloading && (
|
||
<input
|
||
type="checkbox"
|
||
checked={indexNumber != null ? true : false}
|
||
onChange={() => setIndexNumber(null)}
|
||
/>
|
||
)}
|
||
|
||
<PieChart
|
||
data={[constantEnergyData, transportData, wasteData]}
|
||
indexNumber={indexNumber}
|
||
type="subSector"
|
||
colors={selectedColors}
|
||
/>
|
||
</div>
|
||
)}
|
||
</Row>
|
||
</>
|
||
)}
|
||
</div>
|
||
{mainDataTables?.length > 1 && !isPDFDownloading && (
|
||
<Row className="mx-0 my-5 justify-content-center">
|
||
<Col sm="4" md="4">
|
||
<Dropdown isOpen={dropdownOpen} toggle={toggleDropdown}>
|
||
<DropdownToggle caret color="primary" className="w-100">
|
||
{selectedOption
|
||
? selectedOption.toUpperCase()
|
||
: t("EmissionSources.sectors")}
|
||
</DropdownToggle>
|
||
<DropdownMenu className="w-100">
|
||
<DropdownItem
|
||
key={"all-sectors"}
|
||
className="w-100"
|
||
onClick={() => handleOptionSelect("TÜM SEKTÖRLER")}
|
||
>
|
||
TÜM SEKTÖRLER
|
||
</DropdownItem>
|
||
{pieChartData
|
||
.filter((data) => data.totalEmission != 0)
|
||
.map((data, index) => (
|
||
<DropdownItem
|
||
key={index}
|
||
className="w-100"
|
||
onClick={() => handleOptionSelect(data.sector.tag)}
|
||
>
|
||
{data.sector.tag.toUpperCase()}
|
||
</DropdownItem>
|
||
))}
|
||
</DropdownMenu>
|
||
</Dropdown>
|
||
</Col>
|
||
</Row>
|
||
)}
|
||
{showConstantEnergy && constantEnergyData && (
|
||
<ConstantEnergyGraphics
|
||
mainDataTablesFilterByYear={mainDataTablesFilterByYear}
|
||
constantEnergyData={constantEnergyData}
|
||
isPDFDownloading={isPDFDownloading}
|
||
hideTables={hideTables}
|
||
colors={selectedColors}
|
||
hideComponents={hideComponents}
|
||
handleCheckboxChange={handleCheckboxChange}
|
||
areaName={summaryData.areaName}
|
||
year={filterOptions?.year?.value}
|
||
/>
|
||
)}
|
||
{showTransport && transportData && (
|
||
<TransportGraphics
|
||
transportData={transportData}
|
||
transportSubSectorData={transportSubSectorData}
|
||
isPDFDownloading={isPDFDownloading}
|
||
hideTables={hideTables}
|
||
colors={selectedColors}
|
||
hideComponents={hideComponents}
|
||
handleCheckboxChange={handleCheckboxChange}
|
||
areaName={summaryData.areaName}
|
||
year={filterOptions?.year?.value}
|
||
/>
|
||
)}
|
||
{showWaste && wasteData && (
|
||
<WasteGraphics
|
||
wasteData={wasteData}
|
||
isPDFDownloading={isPDFDownloading}
|
||
hideTables={hideTables}
|
||
colors={selectedColors}
|
||
hideComponents={hideComponents}
|
||
handleCheckboxChange={handleCheckboxChange}
|
||
areaName={summaryData.areaName}
|
||
year={filterOptions?.year?.value}
|
||
/>
|
||
)}
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default Graphics;
|