Notes

import React, {useRef } from "react";
import html2canvas from "html2canvas";
import jsPDF from "jspdf";
import ChartPDFIconLabel from "./ChartCommonPdfDownload";
import PopUpPDFIcon from "./PopUpPDFIconCommonComponent";
import { useLocation } from "react-router-dom";
import domtoimage from "dom-to-image";


const ChartToPDF = ({ chartComponent, filename, myStyle, chartName,chartPdfStyle,chartDataAvailable ,popcharts,popcharts1,customizedLegend}) => {
let location = useLocation();
const parameters = new URLSearchParams(location.search);
const PDF_SUB_ID = parameters.get("PDF_SUB_ID")
? parameters.get("PDF_SUB_ID")
: "";
const SUB_ID = parameters.get("SUB_ID") ? parameters.get("SUB_ID") : "";

const chartRef = useRef(null);

const captureChart = async () => {

const hiddenContainer = document.createElement('div');
hiddenContainer.style.position = 'absolute';
hiddenContainer.style.left = '-9999px';
document.body.appendChild(hiddenContainer);

const chartClone = chartRef.current.cloneNode(true);
hiddenContainer.appendChild(chartClone);
// const allDivElements = chartClone.querySelectorAll('div');
// allDivElements.forEach((divElement) => {
// divElement.style.border = "4px solid red !important";
// });

const hideDIV = chartClone.querySelector("#HideDIV");
const hideDIV1 = chartClone.querySelector("#HideDIV1");
const hideDIV2 = chartClone.querySelector("#HideDIV2");
const hideDIV3 = chartClone.querySelector("#HideDIV3");
const hideDIV4 = chartClone.querySelector("#HideDIV4");
const hideDIV5 = chartClone.querySelector("#HideDIV5");
const ShowDIV = chartClone.querySelector("#ShowDIV");
const ShowDIV1 = chartClone.querySelector("#ShowDIV1");
const TitleDIV = chartClone.querySelector("#TitleDIV");
const TitleDIV1 = chartClone.querySelector("#TitleDIV1");
const MainTitleDIV = chartClone.querySelector("#MainTitleDIV");
const MainTitleDIV2 = chartClone.querySelector("#MainTitleDIV2");
const ShowDIVPageTitle = chartClone.querySelector("#ShowDIVPageTitle");
const enodebLinechart = chartClone.querySelector("#enodebLinechart");
const pdfcontainerdiv = chartClone.querySelector("#PieChartIDcont")
const HighChartCointnerPieID = chartClone.querySelector("#HighChartCointnerPieID")
const HighChartCointnerBarID = chartClone.querySelector("#HighChartCointnerBarID")
const CDDCCPieChartHeadingID = chartClone.querySelector("#CDDCCPieChartHeadingID")
const Popuppie = chartClone.querySelector("#Popuppie");
const ShowDIVMaintitleChart = chartClone.querySelector(
"#ShowDIVMaintitleChart"
);
const ShowDIVPageTitleChart = chartClone.querySelector(
"#ShowDIVPageTitleChart"
);
const ShowDIVPageTitleChartMobileChart = chartClone.querySelector(
"#ShowDIVPageTitleChartMobileChart"
);
const pdfFilter = chartClone.querySelector("#pdfFilter");
const PdfFirstDiv = chartClone.querySelector("#PdfFirstDiv");
const ExportSingleSelect = chartClone.querySelector("#ExportSingleSelect");
const FWAComponent = chartClone.querySelector("#FWAComponent");
const PDFThirdD = chartClone.querySelector("#PDFThirdD");
const FivegPdfChartTitle = chartClone.querySelector("#FivegPdfChartTitle");
const MdnpdfLegendsID = chartClone.querySelector("#MdnpdfLegendsID");
// const svgElements = chartClone.querySelectorAll("svg");
const highcharts1id = chartClone.querySelector("#highcharts-75khe9p-8")
const highcharts1id2 = chartClone.querySelector(".highcharts-container")
const highcharts1id3 = chartClone.querySelector("data-highcharts-chart")
const highcharts1id4 = chartClone.querySelector(".highcharts-root")
const highcharts1id5 = chartClone.querySelector(".highcharts-background")

const ComponentScroll = chartClone.querySelector(".Component-horizontalScrollContainer-12")
if (pdfcontainerdiv) {
pdfcontainerdiv.style.marginLeft = "-5rem";
// pdfcontainerdiv.style.marginTop = "-5rem";
pdfcontainerdiv.style.border = "none !important";
pdfcontainerdiv.style.zIndex = "1";
pdfcontainerdiv.style.boxShadow = "10px 10px 10px 10px white";
pdfcontainerdiv.style.background = "white";

}
if(ComponentScroll){
ComponentScroll.style.overflowX = "hidden";
ComponentScroll.style.overflowX = "hidden";
}
if(CDDCCPieChartHeadingID){
CDDCCPieChartHeadingID.style.height= "10vh";
}
if(HighChartCointnerBarID){
// HighChartCointnerBarID.style.marginLeft = "-5rem";
HighChartCointnerBarID.style.border = "none !important";
HighChartCointnerBarID.style.zIndex = "1";
HighChartCointnerBarID.style.boxShadow = "10px 10px 10px 10px white";
HighChartCointnerBarID.style.background = "white";
HighChartCointnerBarID.style.overflow = "hidden";
}
if(HighChartCointnerPieID){
HighChartCointnerPieID.style.marginLeft = "10rem";
HighChartCointnerPieID.style.border = "none !important";
HighChartCointnerPieID.style.zIndex = "1";
HighChartCointnerPieID.style.boxShadow = "10px 10px 10px 10px white";
HighChartCointnerPieID.style.background = "white";
}
if(MdnpdfLegendsID){
MdnpdfLegendsID.style.boxShadow = "10px 10px 10px 10px white";
MdnpdfLegendsID.style.background = "white";
MdnpdfLegendsID.style.height = "10rem";
}
if (hideDIV) {
hideDIV.style.display = "none";
hideDIV.style.border = "none";
}
if (hideDIV1) {
hideDIV1.style.display = "none";
}
if (hideDIV2) {
hideDIV2.style.display = "none";
}
if (hideDIV3) {
hideDIV3.style.display = "none";
}
if (hideDIV4) {
hideDIV4.style.display = "none";
}
if (hideDIV5) {
hideDIV5.style.display = "none";
}
if (ShowDIV) {
ShowDIV.style.display = "block";
}

if (Popuppie) {
Popuppie.style.display = "block";
// Popuppie.style.marginLeft = "3rem";
}
if (ShowDIV1) {
ShowDIV1.style.display = "block";
ShowDIV1.style.marginLeft = "0rem";
}
if (pdfFilter) {
pdfFilter.style.position = "relative";
pdfFilter.style.right = "1rem";
// pdfFilter.style.top = "-5rem";
}
if (PdfFirstDiv) {
PdfFirstDiv.style.position = "relative";
PdfFirstDiv.style.left = "1rem";
}
if (FWAComponent) {
FWAComponent.style.position = "relative";
FWAComponent.style.top = "-5rem";
}
if (PDFThirdD) {
PDFThirdD.style.position = "relative";
PDFThirdD.style.left = "-2rem";
}

if (enodebLinechart) {
enodebLinechart.style.width = "100%"
}

if (ExportSingleSelect) {
ExportSingleSelect.style.position = "relative";
ExportSingleSelect.style.right = "1rem";
}
if (FivegPdfChartTitle) {
FivegPdfChartTitle.style.position = "relative";
FivegPdfChartTitle.style.left = "-0.4rem";
}

if (MainTitleDIV) {
MainTitleDIV.style.position = "relative";
MainTitleDIV.style.left = "0.7rem";
MainTitleDIV.style.display = "block";
// MainTitleDIV.style.left="";
}
if (MainTitleDIV2) {
MainTitleDIV2.style.position = "relative";
MainTitleDIV2.style.left = "0.3rem";
MainTitleDIV2.style.display = "block";
}
if (ShowDIVPageTitle) {
ShowDIVPageTitle.style.display = "block";
ShowDIVPageTitle.style.position = "relative";
ShowDIVPageTitle.style.left = "-2rem";
}
if (ShowDIVPageTitleChart) {
// ShowDIVPageTitleChart.style.display = "block";
ShowDIVPageTitleChart.style.position = "relative";
ShowDIVPageTitleChart.style.left = "-2rem";
}
if (ShowDIVPageTitleChartMobileChart) {
// ShowDIVPageTitleChartMobileChart.style.display = "block";
ShowDIVPageTitleChartMobileChart.style.position = "relative";
ShowDIVPageTitleChartMobileChart.style.left = "-2.5rem";
}

if (ShowDIVMaintitleChart && chartName==="Band Distribution") {

ShowDIVMaintitleChart.style.display = "block";
ShowDIVMaintitleChart.style.left = "-1.4rem";
ShowDIVMaintitleChart.style.position = "relative";
}
if (TitleDIV && chartName !== "CustomerPieChart") {
TitleDIV.style.marginLeft = "2.5rem";
// TitleDIV.style.zIndex = "30";
}else if (TitleDIV && chartName === "CustomerPieChart") {
const mediaQuery = window.matchMedia("(max-width: 1366px)");
function handleResolutionChange(mediaQuery) {
if (mediaQuery.matches) {
// Adjust alignment for smaller resolutions
TitleDIV.style.position = "relative";
TitleDIV.style.left = "-40.3rem";
TitleDIV.style.width = "80vw";
TitleDIV.style.zIndex = "11";
TitleDIV.style.height = "10vh"
} else {
TitleDIV.style.position = "relative";
TitleDIV.style.left = "-56.5rem";
TitleDIV.style.width = "80vw";
TitleDIV.style.zIndex = "11";
TitleDIV.style.height = "10vh"
}
}
handleResolutionChange(mediaQuery);
mediaQuery.addEventListener("change", handleResolutionChange);
}
if (TitleDIV1) {
// TitleDIV1.style.position = "relative";
// TitleDIV1.style.left = "10rem";
// TitleDIV1.style.width = "80vw";
TitleDIV1.style.marginLeft = "2.1rem";
TitleDIV1.style.zIndex = "11";
TitleDIV1.style.height = "10vh"
}
let dataUrl;
if (customizedLegend === true) {
const canvas = await html2canvas(chartClone);
// Clean up the hidden container
document.body.removeChild(hiddenContainer);
dataUrl = canvas.toDataURL();
} else {
dataUrl = await domtoimage.toPng(chartClone);
document.body.removeChild(hiddenContainer);
}

return dataUrl;
// const canvas = await html2canvas(chartClone);

// // Clean up the hidden container
// document.body.removeChild(hiddenContainer);

// return canvas.toDataURL();
// const dataUrl = await domtoimage.toPng(chartClone);
// document.body.removeChild(hiddenContainer);

// return dataUrl;
};

const downloadChartAsPdf = async () => {
let imgData = await captureChart();
const pdf = new jsPDF('landscape', 'mm', 'a4');

const imgProps = pdf.getImageProperties(imgData);
const pdfWidth = pdf.internal.pageSize.getWidth();
const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width;

let width = chartPdfStyle.width
let height = chartPdfStyle.height
// const xPos = (pdf.internal.pageSize.getWidth() - scaledWidth) / 2;
// const yPos = (pdf.internal.pageSize.getHeight() - scaledHeight) / 2;
// pdf.addImage(imgData, "PNG", 0, 0, pdf.internal.pageSize.getWidth(), pdf.internal.pageSize.getHeight()-50);
pdf.addImage(
imgData,
"PNG",
10,
15,
width,
height
);
pdf.save(`${filename}.pdf`);
};

return (
<div style={{ width: "100%" }}>
{PDF_SUB_ID === "" &&
SUB_ID === "" &&
chartDataAvailable &&
!popcharts ? (
<div style={myStyle} id={`${popcharts1 ? "HideDIV" : "HideDIV2"}`}>
<ChartPDFIconLabel handleClick={downloadChartAsPdf} />


</div>
) : (
<div style={myStyle}>
{PDF_SUB_ID === "" && SUB_ID === "" && chartDataAvailable ? (
<PopUpPDFIcon handleClick={downloadChartAsPdf} />
) : null}

</div>
)}

<div ref={chartRef}>{chartComponent}</div>
</div>
);

};

export default ChartToPDF;