const data = [ { en: "Fukuoka-shi Kuko-sen", st: "Tojinmachi", dist: "8 min walk", loc: "Fukuoka-shi Chuo-ku Jigyohama", price: 53, area: 62.5, layout: "2LDK", renovation: 2019, structure: "RC", contract: "2024/01-2024/03", usage: "Commercial" }, { en: "Fukuoka-shi Kuko-sen", st: "Tojinmachi", dist: "9 min walk", loc: "Fukuoka-shi Chuo-ku Jigyohama", price: 75, area: 82.5, layout: "3LDK", renovation: 2020, structure: "RC", contract: "2022/10-2022/12", usage: "Commercial" }, { en: "Fukuoka-shi Kuko-sen", st: "Tojinmachi", dist: "11 min walk", loc: "Fukuoka-shi Chuo-ku Jigyohama", price: 34, area: 42.5, layout: "1LDK", renovation: 2020, structure: "RC", contract: "2022/10-2022/12", usage: "Commercial" }, { en: "Fukuoka-shi Kuko-sen", st: "Tojinmachi", dist: "11 min walk", loc: "Fukuoka-shi Chuo-ku Jigyohama", price: 42, area: 62.5, layout: "2LDK", renovation: 2020, structure: "RC", contract: "2021/10-2021/12", usage: "Commercial" }, { en: "Fukuoka-shi Kuko-sen", st: "Tojinmachi", dist: "11 min walk", loc: "Fukuoka-shi Chuo-ku Jigyohama", price: 53, area: 72.5, layout: "3LDK", renovation: 2019, structure: "RC", contract: "2023/10-2023/12", usage: "Commercial" } ]; function MainComponent() { const [selectedChart, setSelectedChart] = React.useState('priceVsArea'); const [language, setLanguage] = React.useState('javascript'); const [code, setCode] = React.useState(''); const [output, setOutput] = React.useState(''); const [error, setError] = React.useState(''); const runCode = async ()=>{ try { const response = await fetch('/integrations/code-runner/', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ code, language }) }); if (response.ok) { const result = await response.json(); setOutput(result.stdout); setError(result.stderr); } else { setError('Failed to run code'); } } catch (err) { setError('Error: ' + err.message); } }; const renderChart = ()=>{ if (selectedChart === 'priceVsArea') { return /*#__PURE__*/ React.createElement("div", { className: "w-full h-[400px] bg-gray-200 flex flex-col justify-center items-center", __source: { fileName: "", lineNumber: 39, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold mb-4", __source: { fileName: "", lineNumber: 40, columnNumber: 11 }, __self: this }, "Price vs Area"), /*#__PURE__*/ React.createElement("div", { className: "w-full h-64 bg-white flex justify-center items-center", __source: { fileName: "", lineNumber: 41, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-3/4 h-full bg-blue-200 flex justify-around items-end", __source: { fileName: "", lineNumber: 42, columnNumber: 13 }, __self: this }, data.map((item, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "bg-blue-500 w-8", style: { height: `${item.price * 2}px` }, __source: { fileName: "", lineNumber: 44, columnNumber: 17 }, __self: this }))))); } else if (selectedChart === 'layoutVsRenovation') { return /*#__PURE__*/ React.createElement("div", { className: "w-full h-[400px] bg-gray-200 flex flex-col justify-center items-center", __source: { fileName: "", lineNumber: 52, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold mb-4", __source: { fileName: "", lineNumber: 53, columnNumber: 11 }, __self: this }, "Layout vs Renovation"), /*#__PURE__*/ React.createElement("div", { className: "w-full h-64 bg-white flex justify-center items-center", __source: { fileName: "", lineNumber: 54, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-3/4 h-full bg-green-200 flex justify-around items-start", __source: { fileName: "", lineNumber: 55, columnNumber: 13 }, __self: this }, data.map((item, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "bg-green-500 w-8", style: { height: `${(2023 - item.renovation) * 20}px` }, __source: { fileName: "", lineNumber: 57, columnNumber: 17 }, __self: this }, item.layout))))); } else if (selectedChart === 'priceVsContract') { return /*#__PURE__*/ React.createElement("div", { className: "w-full h-[400px] bg-gray-200 flex flex-col justify-center items-center", __source: { fileName: "", lineNumber: 65, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold mb-4", __source: { fileName: "", lineNumber: 66, columnNumber: 11 }, __self: this }, "Price vs Contract"), /*#__PURE__*/ React.createElement("div", { className: "w-full h-64 bg-white flex justify-center items-center", __source: { fileName: "", lineNumber: 67, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-3/4 h-full bg-red-200 flex justify-around items-end", __source: { fileName: "", lineNumber: 68, columnNumber: 13 }, __self: this }, data.map((item, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "bg-red-500 w-8", style: { height: `${item.price}px` }, __source: { fileName: "", lineNumber: 70, columnNumber: 17 }, __self: this }, item.contract))))); } return null; }; return /*#__PURE__*/ React.createElement("div", { className: "w-full h-screen flex flex-col items-center", __source: { fileName: "", lineNumber: 81, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold mb-6", __source: { fileName: "", lineNumber: 82, columnNumber: 7 }, __self: this }, "Real Estate Charts"), /*#__PURE__*/ React.createElement("div", { className: "w-full flex justify-center mb-4", __source: { fileName: "", lineNumber: 83, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: `px-4 py-2 mx-2 ${selectedChart === 'priceVsArea' ? 'bg-blue-500 text-white' : 'bg-gray-300'}`, onClick: ()=>setSelectedChart('priceVsArea'), __source: { fileName: "", lineNumber: 84, columnNumber: 9 }, __self: this }, "Price vs Area"), /*#__PURE__*/ React.createElement("button", { className: `px-4 py-2 mx-2 ${selectedChart === 'layoutVsRenovation' ? 'bg-blue-500 text-white' : 'bg-gray-300'}`, onClick: ()=>setSelectedChart('layoutVsRenovation'), __source: { fileName: "", lineNumber: 90, columnNumber: 9 }, __self: this }, "Layout vs Renovation"), /*#__PURE__*/ React.createElement("button", { className: `px-4 py-2 mx-2 ${selectedChart === 'priceVsContract' ? 'bg-blue-500 text-white' : 'bg-gray-300'}`, onClick: ()=>setSelectedChart('priceVsContract'), __source: { fileName: "", lineNumber: 96, columnNumber: 9 }, __self: this }, "Price vs Contract")), renderChart(), /*#__PURE__*/ React.createElement("div", { className: "w-full p-4", __source: { fileName: "", lineNumber: 104, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold mb-4", __source: { fileName: "", lineNumber: 105, columnNumber: 9 }, __self: this }, "Code Runner"), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 106, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "language", className: "block text-sm font-medium text-gray-700 mb-1", __source: { fileName: "", lineNumber: 107, columnNumber: 11 }, __self: this }, "Language"), /*#__PURE__*/ React.createElement("select", { id: "language", name: "language", value: language, onChange: (e)=>setLanguage(e.target.value), className: "w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-orange-500", __source: { fileName: "", lineNumber: 108, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "javascript", __source: { fileName: "", lineNumber: 109, columnNumber: 13 }, __self: this }, "JavaScript"), /*#__PURE__*/ React.createElement("option", { value: "python", __source: { fileName: "", lineNumber: 110, columnNumber: 13 }, __self: this }, "Python"), /*#__PURE__*/ React.createElement("option", { value: "java", __source: { fileName: "", lineNumber: 111, columnNumber: 13 }, __self: this }, "Java"), /*#__PURE__*/ React.createElement("option", { value: "c++", __source: { fileName: "", lineNumber: 112, columnNumber: 13 }, __self: this }, "C++"), "// Add other languages as required")), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 116, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "code", className: "block text-sm font-medium text-gray-700 mb-1", __source: { fileName: "", lineNumber: 117, columnNumber: 11 }, __self: this }, "Code"), /*#__PURE__*/ React.createElement("textarea", { id: "code", name: "code", value: code, onChange: (e)=>setCode(e.target.value), rows: "6", className: "w-full p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-orange-500", __source: { fileName: "", lineNumber: 118, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: runCode, className: "bg-orange-500 text-white py-2 px-4 rounded-md hover:bg-orange-600 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2", __source: { fileName: "", lineNumber: 120, columnNumber: 9 }, __self: this }, "Run Code"), output && /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 122, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-bold", __source: { fileName: "", lineNumber: 123, columnNumber: 13 }, __self: this }, "Output:"), /*#__PURE__*/ React.createElement("pre", { className: "bg-gray-100 p-2 rounded-md", __source: { fileName: "", lineNumber: 124, columnNumber: 13 }, __self: this }, output)), error && /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 128, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-bold", __source: { fileName: "", lineNumber: 129, columnNumber: 13 }, __self: this }, "Error:"), /*#__PURE__*/ React.createElement("pre", { className: "bg-gray-100 p-2 rounded-md text-red-500", __source: { fileName: "", lineNumber: 130, columnNumber: 13 }, __self: this }, error)))); }