function CsvFileUploader({ onFileUpload, inputClassName }) { return /*#__PURE__*/ React.createElement("section", { className: "my-8 flex justify-center", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "file", accept: ".csv", onChange: onFileUpload, className: inputClassName, name: "csvUpload", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this })); } function CsvFileUploaderStory() { const handleFileUpload = (event)=>{ // placeholder for file upload handling logic }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 21, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(CsvFileUploader, { onFileUpload: handleFileUpload, inputClassName: "upload-btn", __source: { fileName: "", lineNumber: 22, columnNumber: 7 }, __self: this })); } function MainComponent() { const [data, setData] = React.useState(null); const handleFileUpload = (e)=>{ const file = e.target.files[0]; const reader = new FileReader(); reader.onload = async (event)=>{ const text = event.target.result; const parsedData = parseCSV(text); setData(parsedData); await fetch('/api/db/test-985', { method: 'POST', body: JSON.stringify({ query: `INSERT INTO customer_activity (name, avg_work_time, avg_tasks_completed, total_work_time, total_tasks_completed, work_time_every_20_days, tasks_completed_every_20_days) VALUES (?, ?, ?, ?, ?, ?, ?)`, values: parsedData.map((d)=>[ d.name, d.avgWorkTime, d.avgTasksCompleted, d.totalWorkTime, d.totalTasksCompleted, JSON.stringify(d.workTimeEvery20Days), JSON.stringify(d.tasksCompletedEvery20Days) ]) }) }); }; reader.readAsText(file); }; const parseCSV = (text)=>{ const lines = text.split("\n").slice(2); return lines.map((line)=>{ const values = line.split(","); return { name: values[0], avgWorkTime: parseFloat(values[1]), avgTasksCompleted: parseFloat(values[2]), totalWorkTime: parseFloat(values[3]), totalTasksCompleted: parseFloat(values[4]), workTimeEvery20Days: values.slice(5, 25).map((v)=>parseFloat(v)), tasksCompletedEvery20Days: values.slice(25).map((v)=>parseFloat(v)) }; }); }; const renderChart = (title, dataKey, chartType)=>{ const chartData = data?.map((item)=>({ name: item.name, value: item[dataKey] })); return /*#__PURE__*/ React.createElement("div", { className: "chart bg-[#1c1c1c] p-[20px] shadow rounded-lg", __source: { fileName: "", lineNumber: 44, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-semibold text-[#00bcd4]", __source: { fileName: "", lineNumber: 45, columnNumber: 9 }, __self: this }, title), /*#__PURE__*/ React.createElement("div", { className: "h-[300px] border border-[#00bcd4]", __source: { fileName: "", lineNumber: 46, columnNumber: 9 }, __self: this }, data && /*#__PURE__*/ React.createElement(ChartComponent, { chartType: chartType, data: chartData, __source: { fileName: "", lineNumber: 47, columnNumber: 20 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex justify-end mt-2", __source: { fileName: "", lineNumber: 49, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-[#00bcd4] hover:text-[#008ba3] transition", __source: { fileName: "", lineNumber: 50, columnNumber: 11 }, __self: this }, "シェア"))); }; return /*#__PURE__*/ React.createElement("div", { className: "font-roboto bg-[#121212] text-white", __source: { fileName: "", lineNumber: 57, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-[#1c1c1c] p-[20px] shadow-md", __source: { fileName: "", lineNumber: 58, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold text-center text-[#00bcd4]", __source: { fileName: "", lineNumber: 59, columnNumber: 9 }, __self: this }, "統計データ"), /*#__PURE__*/ React.createElement("nav", { className: "flex justify-center mt-2", __source: { fileName: "", lineNumber: 60, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "mx-4 text-lg text-[#00bcd4]", __source: { fileName: "", lineNumber: 61, columnNumber: 11 }, __self: this }, "ホーム"), /*#__PURE__*/ React.createElement("a", { href: "#", className: "mx-4 text-lg text-[#00bcd4]", __source: { fileName: "", lineNumber: 62, columnNumber: 11 }, __self: this }, "アップロード"), /*#__PURE__*/ React.createElement("a", { href: "#", className: "mx-4 text-lg text-[#00bcd4]", __source: { fileName: "", lineNumber: 63, columnNumber: 11 }, __self: this }, "サポート"))), /*#__PURE__*/ React.createElement("main", { className: "p-4", __source: { fileName: "", lineNumber: 66, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement(CsvFileUploader, { onFileUpload: handleFileUpload, inputClassName: "upload-btn", __source: { fileName: "", lineNumber: 67, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("section", { className: "my-8 grid grid-cols-1 gap-4 md:grid-cols-2", __source: { fileName: "", lineNumber: 68, columnNumber: 9 }, __self: this }, renderChart("平均稼働時間の棒グラフ", "avgWorkTime", "bar"), renderChart("平均タスク完了数の棒グラフ", "avgTasksCompleted", "bar"), renderChart("累計稼働時間の折れ線グラフ", "totalWorkTime", "line"), renderChart("累計タスク完了数の折れ線グラフ", "totalTasksCompleted", "line"), renderChart("20日毎の稼働時間の棒グラフ", "workTimeEvery20Days", "bar"), renderChart("20日毎のタスク完了数の棒グラフ", "tasksCompletedEvery20Days", "bar"))), /*#__PURE__*/ React.createElement("footer", { className: "bg-[#1c1c1c] p-[20px] text-center mt-8", __source: { fileName: "", lineNumber: 77, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-400", __source: { fileName: "", lineNumber: 78, columnNumber: 9 }, __self: this }, "© 2023 会社情報"), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-400", __source: { fileName: "", lineNumber: 79, columnNumber: 9 }, __self: this }, "利用規約 | プライバシーポリシー")), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 81, columnNumber: 7 }, __self: this }, ` .upload-btn { background-color: #00bcd4; border: none; padding: 10px 20px; color: #ffffff; font-size: 16px; cursor: pointer; transition: background-color 0.3s; } .upload-btn:hover { background-color: #008ba3; } .chart { margin: 40px 0; } .border-neon { border-color: #39ff14; } `)); } function ChartComponent({ chartType, data }) { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 106, columnNumber: 10 }, __self: this }, chartType, " chart data: ", JSON.stringify(data)); }