static/scripts/dataViz.js

const fileContainer = document.querySelector(".file-container");
const label = document.querySelector("#label-input");
const inputFile = document.querySelector("#document-input");
const form = document.querySelector("form");
const prompt_txt = document.querySelector("#text-prompt");
const result_section = document.querySelector(".result");
const chart_wrapper = result_section.querySelector(".chart-wrapper");

let file = null;
const notifications = document.querySelector(".notifications");
const toast = (message, type) => {
	const notification = document.createElement("div");

	notification.innerHTML = `
		<i class="fa fa-xmark close" onclick="this.parentNode.remove()"></i>
        <i class="fa-solid ${
					type === "error" ? "fa-circle-xmark" : "fa-triangle-exclamation"
				} icon"></i>
    
      <div class="notification-content">
        <h3>${type}</h3>
        <p>${message}</p>
      </div>
    `;
	notification.classList.add(...["notification", type]);
	notifications.appendChild(notification);
	setTimeout(() => {
		notification.remove();
	}, 10000);
};

function clear() {
	file = null;
	label.style.display = "flex";
	fileContainer.innerHTML = "";
}
const upload = (fileData) => {
	file = fileData;
	const ext = file.name.split(".").pop();

	if (ext === "pdf") {
		label.style.display = "none";
		fileContainer.innerHTML = `
        <div class="file-wrapper">
                    <i class="fa fa-file-excel"></i>
                    <p>
                        ${file.name}
                    </p>
                    <button id='btn-clear' type="button" ><i class="fa fa-close" ></i></button>
        </div>
        `;
		document
			.querySelector("#btn-clear")
			.addEventListener("click", (e) => clear(e));
	} else {
		console.error("file is not supported");
		toast("file is not supported", "error");
	}
};

inputFile.addEventListener("change", (e) => {
	e.preventDefault();
	if (inputFile.files[0]) upload(inputFile.files[0]);
});

label.addEventListener("dragover", (e) => {
	e.preventDefault();
});
label.addEventListener("drop", (e) => {
	e.preventDefault();
	if (e.dataTransfer.files[0]) upload(e.dataTransfer.files[0]);
});
form.addEventListener("submit", (e) => {
	e.preventDefault();
	const prompt = prompt_txt.value.trim();
	if (prompt && file) {
		showchart("");
	} else {
		console.log("no file selected or no prompted");
	}
});
const showchart = (url) => {
	chart_wrapper.innerHTML = `
        <i class="fas fa-download" id="btn-download" onclick='download()'></i>
        <img src=${url} id="chart">
        `;
	result_section.style.display = "block";
	result_section.scrollIntoView({ behavior: "smooth" });
};

const download = () => {
	const imageurl = document.querySelector("#chart").src;
	const a = document.createElement("a");
	a.href = imageurl;
	a.download = "SmartDoc-chart.jpg";
	document.body.appendChild(a);
	a.click();
	document.body.removeChild(a);
};