function FileUpload() { const [error, setError] = useState(null); const [upload, { loading }] = useUpload(); const [file, setFile] = useState(null); const [dragActive, setDragActive] = useState(false); const handleDrag = useCallback((e)=>{ e.preventDefault(); e.stopPropagation(); if (e.type === "dragenter" || e.type === "dragover") { setDragActive(true); } else if (e.type === "dragleave") { setDragActive(false); } }, []); const handleDrop = useCallback((e)=>{ e.preventDefault(); e.stopPropagation(); setDragActive(false); if (e.dataTransfer.files && e.dataTransfer.files[0]) { setFile(e.dataTransfer.files[0]); } }, []); const handleFileChange = useCallback((e)=>{ if (e.target.files && e.target.files[0]) { setFile(e.target.files[0]); } }, []); const handleUpload = useCallback(async ()=>{ const { url, error } = await upload({ file }); if (error) { setError(error); return; } setFile(null); }, [ file, upload ]); return /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-xl mx-auto p-6", __source: { fileName: "", lineNumber: 42, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { onDragEnter: handleDrag, onDragLeave: handleDrag, onDragOver: handleDrag, onDrop: handleDrop, className: `w-full rounded-lg border-2 border-dashed p-8 text-center ${dragActive ? "border-blue-500 bg-blue-50" : "border-gray-300"}`, __source: { fileName: "", lineNumber: 43, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 52, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-file-upload text-4xl text-gray-400", __source: { fileName: "", lineNumber: 53, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "text-lg font-roboto", __source: { fileName: "", lineNumber: 54, columnNumber: 11 }, __self: this }, "Drag and drop your CSV or Excel file here"), /*#__PURE__*/ React.createElement("div", { className: "text-sm text-gray-500", __source: { fileName: "", lineNumber: 57, columnNumber: 11 }, __self: this }, "or"), /*#__PURE__*/ React.createElement("label", { className: "inline-block", __source: { fileName: "", lineNumber: 58, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "file", className: "hidden", accept: ".csv,.xlsx,.xls", onChange: handleFileChange, name: "file-upload", __source: { fileName: "", lineNumber: 59, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "px-4 py-2 text-sm font-medium text-white bg-blue-500 rounded-md hover:bg-blue-600 cursor-pointer", __source: { fileName: "", lineNumber: 66, columnNumber: 13 }, __self: this }, "Choose File"))), file && /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 72, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-sm text-gray-600", __source: { fileName: "", lineNumber: 73, columnNumber: 13 }, __self: this }, file.name), /*#__PURE__*/ React.createElement("button", { onClick: handleUpload, disabled: loading, className: "mt-2 px-4 py-2 text-sm font-medium text-white bg-green-500 rounded-md hover:bg-green-600", __source: { fileName: "", lineNumber: 74, columnNumber: 13 }, __self: this }, loading ? "Uploading..." : "Upload File")), error && /*#__PURE__*/ React.createElement("div", { className: "mt-4 text-sm text-red-500", __source: { fileName: "", lineNumber: 83, columnNumber: 19 }, __self: this }, error))); } function FileUploadStory() { return /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 91, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(FileUpload, { __source: { fileName: "", lineNumber: 92, columnNumber: 7 }, __self: this })); } function VisualizationCard({ title, description, children }) { return /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-lg p-6 max-w-2xl", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-roboto font-bold mb-4", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, title), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 font-roboto mb-6", __source: { fileName: "", lineNumber: 5, columnNumber: 7 }, __self: this }, description), /*#__PURE__*/ React.createElement("div", { className: "bg-gray-50 rounded-lg p-4 min-h-[300px]", __source: { fileName: "", lineNumber: 6, columnNumber: 7 }, __self: this }, children)); } function VisualizationCardStory() { return /*#__PURE__*/ React.createElement("div", { className: "p-8 bg-gray-100", __source: { fileName: "", lineNumber: 13, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(VisualizationCard, { title: "Monthly Revenue", description: "This chart shows our monthly revenue trends over the past year.", __source: { fileName: "", lineNumber: 14, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-center h-[300px] text-gray-400 font-roboto", __source: { fileName: "", lineNumber: 18, columnNumber: 9 }, __self: this }, "Chart goes here"))); } function MainComponent() { const [data, setData] = useState(null); const [processing, setProcessing] = useState(false); const [error, setError] = useState(null); const handleFileProcessed = async (file)=>{ setProcessing(true); setError(null); try { const response = await fetch("/api/process-data", { method: "POST", body: file }); const result = await response.json(); setData(result); } catch (err) { setError("Error processing file"); } finally{ setProcessing(false); } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-50 p-8", __source: { fileName: "", lineNumber: 24, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto", __source: { fileName: "", lineNumber: 25, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold text-gray-900 mb-4 font-roboto", __source: { fileName: "", lineNumber: 26, columnNumber: 9 }, __self: this }, "Data Pattern Explorer"), /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-sm p-6 mb-8", __source: { fileName: "", lineNumber: 30, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-lg text-gray-600 font-roboto mb-6", __source: { fileName: "", lineNumber: 31, columnNumber: 11 }, __self: this }, "Upload your data file to discover hidden patterns and insights through interactive visualizations. We'll analyze your data and present it in multiple chart types to help you better understand the relationships and trends."), /*#__PURE__*/ React.createElement(FileUpload, { onFileProcessed: handleFileProcessed, __source: { fileName: "", lineNumber: 38, columnNumber: 11 }, __self: this }), processing && /*#__PURE__*/ React.createElement("div", { className: "text-center py-4", __source: { fileName: "", lineNumber: 41, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin text-blue-500 text-2xl", __source: { fileName: "", lineNumber: 42, columnNumber: 15 }, __self: this })), error && /*#__PURE__*/ React.createElement("div", { className: "text-red-500 text-center py-4", __source: { fileName: "", lineNumber: 47, columnNumber: 13 }, __self: this }, error)), data && data.suggestedCharts && /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6", __source: { fileName: "", lineNumber: 52, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement(VisualizationCard, { title: "Bar Chart Analysis", description: `Comparing ${data.suggestedCharts[0].columns.join(" vs ")}`, __source: { fileName: "", lineNumber: 53, columnNumber: 13 }, __self: this }, data.suggestedCharts[0].type), /*#__PURE__*/ React.createElement(VisualizationCard, { title: "Time Series Trends", description: `Analyzing ${data.suggestedCharts[1].columns.join(" over time with ")}`, __source: { fileName: "", lineNumber: 60, columnNumber: 13 }, __self: this }, data.suggestedCharts[1].type), /*#__PURE__*/ React.createElement(VisualizationCard, { title: "Scatter Plot Relations", description: `Correlation between ${data.suggestedCharts[2].columns.join(" and ")}`, __source: { fileName: "", lineNumber: 67, columnNumber: 13 }, __self: this }, data.suggestedCharts[2].type), /*#__PURE__*/ React.createElement(VisualizationCard, { title: "Distribution Breakdown", description: `Distribution of ${data.suggestedCharts[3].columns.join(" by ")}`, __source: { fileName: "", lineNumber: 74, columnNumber: 13 }, __self: this }, data.suggestedCharts[3].type), /*#__PURE__*/ React.createElement(VisualizationCard, { title: "Heat Map Intensity", description: `Intensity mapping of ${data.suggestedCharts[4].columns.join(", ")}`, __source: { fileName: "", lineNumber: 81, columnNumber: 13 }, __self: this }, data.suggestedCharts[4].type)))); }