function MainComponent() { const [chartData, setChartData] = React.useState([]); const processData = (csvData)=>{ const data = {}; const lines = csvData.split("\n"); const categories = lines[0].split(","); categories.forEach((category)=>{ data[category] = []; }); for(let i = 1; i < lines.length; i++){ const currentline = lines[i].split(","); categories.forEach((category, index)=>{ data[category].push(Number(currentline[index]) || currentline[index]); }); } setChartData(Object.entries(data).map(([label, values])=>({ label, values }))); }; const handleFileUpload = (event)=>{ event.preventDefault(); const file = event.target.csvFile.files[0]; const reader = new FileReader(); reader.onload = function(e) { processData(e.target.result); }; reader.readAsText(file); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#f5f5f5]", __source: { fileName: "", lineNumber: 36, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "mb-8 text-3xl font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 37, columnNumber: 7 }, __self: this }, "CSVデータのグラフ表示"), /*#__PURE__*/ React.createElement("form", { className: "mb-4", onSubmit: handleFileUpload, __source: { fileName: "", lineNumber: 38, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "file", name: "csvFile", className: "mb-4 font-roboto", accept: ".csv", __source: { fileName: "", lineNumber: 39, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "px-6 py-2 text-white bg-blue-500 font-roboto hover:bg-blue-700", __source: { fileName: "", lineNumber: 40, columnNumber: 9 }, __self: this }, "アップロード")), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-4xl", __source: { fileName: "", lineNumber: 42, columnNumber: 7 }, __self: this }, chartData.length > 0 ? chartData.map((item, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "w-full h-40 bg-white shadow-md mb-4", __source: { fileName: "", lineNumber: 45, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-roboto text-[#121212] text-center", __source: { fileName: "", lineNumber: 46, columnNumber: 15 }, __self: this }, item.label), /*#__PURE__*/ React.createElement("ul", { className: "flex h-full items-end justify-around", __source: { fileName: "", lineNumber: 47, columnNumber: 15 }, __self: this }, item.values.map((value, i)=>/*#__PURE__*/ React.createElement("li", { key: i, className: "w-1/12 h-full bg-blue-500", style: { height: `${value}%` }, __source: { fileName: "", lineNumber: 49, columnNumber: 19 }, __self: this }))))) : /*#__PURE__*/ React.createElement("div", { className: "w-full h-[400px] bg-white shadow-md", __source: { fileName: "", lineNumber: 55, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-center font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 56, columnNumber: 13 }, __self: this }, "グラフがここに表示されます")))); }