function MainComponent() { const [redComplexCt, setRedComplexCt] = React.useState(0); const [pgCt, setPgCt] = React.useState(0); const [tdCt, setTdCt] = React.useState(0); const [tfCt, setTfCt] = React.useState(0); const result = redComplexCt + pgCt + tdCt + tfCt; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-gray-50", __source: { fileName: "", lineNumber: 10, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white shadow-md rounded-lg p-8 w-[400px]", __source: { fileName: "", lineNumber: 11, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold mb-4 font-roboto", __source: { fileName: "", lineNumber: 12, columnNumber: 9 }, __self: this }, "自動計算アプリ"), /*#__PURE__*/ React.createElement("form", { __source: { fileName: "", lineNumber: 13, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 14, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-bold mb-2 font-roboto", htmlFor: "redComplexCt", __source: { fileName: "", lineNumber: 15, columnNumber: 13 }, __self: this }, "RedComplexのCt値"), /*#__PURE__*/ React.createElement("input", { className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline", id: "redComplexCt", type: "number", name: "redComplexCt", value: redComplexCt, onChange: (e)=>setRedComplexCt(parseFloat(e.target.value)), placeholder: "数値を入力", __source: { fileName: "", lineNumber: 18, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 28, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-bold mb-2 font-roboto", htmlFor: "pgCt", __source: { fileName: "", lineNumber: 29, columnNumber: 13 }, __self: this }, "Pg菌のCt値"), /*#__PURE__*/ React.createElement("input", { className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline", id: "pgCt", type: "number", name: "pgCt", value: pgCt, onChange: (e)=>setPgCt(parseFloat(e.target.value)), placeholder: "数値を入力", __source: { fileName: "", lineNumber: 32, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 42, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-bold mb-2 font-roboto", htmlFor: "tdCt", __source: { fileName: "", lineNumber: 43, columnNumber: 13 }, __self: this }, "Td菌のCt値"), /*#__PURE__*/ React.createElement("input", { className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline", id: "tdCt", type: "number", name: "tdCt", value: tdCt, onChange: (e)=>setTdCt(parseFloat(e.target.value)), placeholder: "数値を入力", __source: { fileName: "", lineNumber: 46, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 56, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-bold mb-2 font-roboto", htmlFor: "tfCt", __source: { fileName: "", lineNumber: 57, columnNumber: 13 }, __self: this }, "Tf菌のCt値"), /*#__PURE__*/ React.createElement("input", { className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline", id: "tfCt", type: "number", name: "tfCt", value: tfCt, onChange: (e)=>setTfCt(parseFloat(e.target.value)), placeholder: "数値を入力", __source: { fileName: "", lineNumber: 60, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "text-xl font-roboto mt-4", __source: { fileName: "", lineNumber: 71, columnNumber: 9 }, __self: this }, "結果: ", /*#__PURE__*/ React.createElement("span", { id: "result", __source: { fileName: "", lineNumber: 72, columnNumber: 15 }, __self: this }, result)), /*#__PURE__*/ React.createElement("div", { className: "w-full h-[300px] mt-8", __source: { fileName: "", lineNumber: 74, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("canvas", { id: "resultChart", width: "400", height: "300", __source: { fileName: "", lineNumber: 75, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 78, columnNumber: 7 }, __self: this }, ` @import url('https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.css'); `)); React.useEffect(()=>{ const ctx = document.getElementById('resultChart').getContext('2d'); new Chart(ctx, { type: 'bar', data: { labels: [ 'RedComplex', 'Pg菌', 'Td菌', 'Tf菌', '合計' ], datasets: [ { label: 'Ct値', data: [ redComplexCt, pgCt, tdCt, tfCt, result ], backgroundColor: [ 'rgba(75, 192, 192, 0.2)', 'rgba(75, 192, 192, 0.2)', 'rgba(75, 192, 192, 0.2)', 'rgba(75, 192, 192, 0.2)', 'rgba(153, 102, 255, 0.2)' ], borderColor: [ 'rgba(75, 192, 192, 1)', 'rgba(75, 192, 192, 1)', 'rgba(75, 192, 192, 1)', 'rgba(75, 192, 192, 1)', 'rgba(153, 102, 255, 1)' ], borderWidth: 1 } ] }, options: { scales: { yAxes: [ { ticks: { beginAtZero: true } } ] } } }); }, [ redComplexCt, pgCt, tdCt, tfCt, result ]); }