static/scripts/data-visualisation.js

document.addEventListener("DOMContentLoaded", function () {
	const fileInput = document.getElementById("data-upload");
	const fileName = document.getElementById("file-name");
	const promptInput = document.getElementById("visualization-prompt");
	const visualizeBtn = document.getElementById("visualize-btn");
	const loadingContainer = document.getElementById("loading-container");
	const resultsSection = document.getElementById("results-section");
	const img_chart = document.getElementById("results-chart");
	const newVisualizationBtn = document.getElementById("new-visualization-btn");
	const downloadChartBtn = document.getElementById("download-chart-btn");
	const downloadCodeBtn = document.getElementById("download-code-btn");

	fileInput.addEventListener("change", function () {
		if (this.files && this.files[0]) {
			fileName.textContent = this.files[0].name;
		} else {
			fileName.textContent = "No Data chosen";
		}
	});

	visualizeBtn.addEventListener("click", async function () {
		try {
			if (fileInput.files.length === 0) {
				showNotification("warning", "No file chosen ...");
				return;
			}
			const prompt = promptInput.value.trim();
			if (!prompt) {
				showNotification("warning", "discribe your needs ...");
				return;
			}

			loadingContainer.style.display = "block";
			visualizeBtn.disabled = true;

			const formdata = new FormData();
			formdata.append("file", fileInput.files[0]);
			formdata.append("user_need", prompt);
			const response = await fetch("/plot", {
				method: "POST",
				body: formdata,
			});
			const result = await response.json();

			if (result.error) {
				showNotification("error", result.error);
				return;
			}
			const url = URL.createObjectURL(result.plot);
			img_chart.src = url;
			resultsSection.style.display = "block";
			resultsSection.scrollIntoView({ behavior: "smooth" });
		} catch (error) {
			showNotification("error", error);
		} finally {
			loadingContainer.style.display = "none";
			visualizeBtn.disabled = false;
		}
	});

	newVisualizationBtn.addEventListener("click", function () {
		fileInput.files = [];
		//fileName.textContent = "No Data chosen";
		promptInput.value = "";
		resultsSection.style.display = "none";

		document.querySelector(".upload").scrollIntoView({ behavior: "smooth" });
	});

	downloadChartBtn.addEventListener("click", function () {
		const link = document.createElement("a");
		link.download = "chart_visualization.png";
		link.href = img_chart.src;
		document.body.appendChild(link);
		link.click();
		document.body.removeChild(link);
	});

	downloadCodeBtn.addEventListener("click", function () {
		const codeContent = document.getElementById("code-content").innerText;
		const blob = new Blob([codeContent], { type: "text/plain" });
		const url = URL.createObjectURL(blob);

		const a = document.createElement("a");
		a.href = url;
		a.download = "visualization_code.py";
		document.body.appendChild(a);
		a.click();
		document.body.removeChild(a);
		URL.revokeObjectURL(url);
	});
});