function SecchiDiskDepthInput({ value, onChange }) { return /*#__PURE__*/ React.createElement("input", { type: "number", name: "secchiDiskDepth", className: "border border-gray-300 p-2 rounded", value: value, onChange: onChange, step: "0.01", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }); } function SecchiDiskDepthInputStory() { const [value, setValue] = React.useState(''); const handleChange = (e)=>{ setValue(e.target.value); }; return /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 22, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(SecchiDiskDepthInput, { value: value, onChange: handleChange, __source: { fileName: "", lineNumber: 23, columnNumber: 7 }, __self: this })); } function MainComponent() { const [results, setResults] = React.useState({ ocr: "--", planktonRespiration: "--", benthicRespiration: "--", reaeration: "--", gpp: "--" }); const handleSubmit = (e)=>{ e.preventDefault(); const formData = new FormData(e.target); const fishSpecies = formData.get("fishSpecies"); const fishMass = parseFloat(formData.get("fishMass")); const waterTemperature = parseFloat(formData.get("waterTemperature")); const secchiDiskDepth = parseFloat(formData.get("secchiDiskDepth")); const pondDepth = parseFloat(formData.get("pondDepth")); const windVelocity = parseFloat(formData.get("windVelocity")); const saturationLevel = parseFloat(formData.get("saturationLevel")); const doLevel = parseFloat(formData.get("doLevel")); const i0Toa = parseFloat(formData.get("i0Toa")); const speciesConstants = { pangasius: { a: 0.364, b: -0.03 }, indianMajorCarp: { a: 0.283, b: -0.041 }, chineseCarp: { a: 0.325, b: -0.03 }, nileTilapia: { a: 0.179, b: -0.035 }, pabdaCatfish: { a: 0.354, b: -0.0411 }, shingiCatfish: { a: 0.297, b: -0.0219 }, koiClimbingPerch: { a: 0.126, b: -0.048 }, commonCarp: { a: 0.204, b: -0.051 } }; const { a, b } = speciesConstants[fishSpecies]; const ocr = a * Math.pow(fishMass / 1000, b) * Math.pow(1.024, waterTemperature - 20); const prespr = -1.133 + 0.00381 * secchiDiskDepth + 0.0000145 * Math.pow(secchiDiskDepth, 2) + 0.0812 * waterTemperature - 0.000749 * Math.pow(waterTemperature, 2) - 0.000349 * secchiDiskDepth * waterTemperature; const bresp = 0.061 / pondDepth; const reaer = (0.03 * Math.sqrt(windVelocity) - 0.0132 * windVelocity + 0.0015 * Math.pow(windVelocity, 2)) * (saturationLevel - doLevel); const chl_a = Math.pow(10, 2.33 - 0.94 * Math.log(secchiDiskDepth)); const ext_w = 0.594 * Math.exp(-0.00594 * 440); const kc = 0.0604 + 0.7546 * ext_w; const ext = ext_w + kc * chl_a; const zeu = 4.6 / ext; const zmax = 4.6 / ext_w; const i0 = i0Toa * Math.exp(-0.097 - 0.649 * Math.pow(chl_a, 0.363)); const pmax = 0.126 * i0 * zeu; const rad = 490 * Math.exp(-(0.0604 + 0.7546 * ext_w) * zmax); const phar = 0.43 * rad; const gpp = (1 - zeu / zmax) * pmax * phar; setResults({ ocr: ocr.toFixed(2), planktonRespiration: prespr.toFixed(2), benthicRespiration: bresp.toFixed(2), reaeration: reaer.toFixed(2), gpp: gpp.toFixed(2) }); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center p-4 font-sans", __source: { fileName: "", lineNumber: 62, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl mb-4 font-bold", __source: { fileName: "", lineNumber: 63, columnNumber: 7 }, __self: this }, "Fish Species Calculator"), /*#__PURE__*/ React.createElement("form", { className: "space-y-4 w-[300px]", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 64, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col", __source: { fileName: "", lineNumber: 65, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "mb-1 font-semibold", __source: { fileName: "", lineNumber: 66, columnNumber: 11 }, __self: this }, "Fish Species"), /*#__PURE__*/ React.createElement("select", { name: "fishSpecies", className: "border border-gray-300 p-2 rounded", __source: { fileName: "", lineNumber: 67, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "pangasius", __source: { fileName: "", lineNumber: 68, columnNumber: 13 }, __self: this }, "Pangasius"), /*#__PURE__*/ React.createElement("option", { value: "indianMajorCarp", __source: { fileName: "", lineNumber: 69, columnNumber: 13 }, __self: this }, "Indian Major Carp"), /*#__PURE__*/ React.createElement("option", { value: "chineseCarp", __source: { fileName: "", lineNumber: 70, columnNumber: 13 }, __self: this }, "Chinese Carp"), /*#__PURE__*/ React.createElement("option", { value: "nileTilapia", __source: { fileName: "", lineNumber: 71, columnNumber: 13 }, __self: this }, "Nile Tilapia"), /*#__PURE__*/ React.createElement("option", { value: "pabdaCatfish", __source: { fileName: "", lineNumber: 72, columnNumber: 13 }, __self: this }, "Pabda Catfish"), /*#__PURE__*/ React.createElement("option", { value: "shingiCatfish", __source: { fileName: "", lineNumber: 73, columnNumber: 13 }, __self: this }, "Shingi Catfish"), /*#__PURE__*/ React.createElement("option", { value: "koiClimbingPerch", __source: { fileName: "", lineNumber: 74, columnNumber: 13 }, __self: this }, "Koi Climbing Perch"), /*#__PURE__*/ React.createElement("option", { value: "commonCarp", __source: { fileName: "", lineNumber: 75, columnNumber: 13 }, __self: this }, "Common Carp"))), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col", __source: { fileName: "", lineNumber: 78, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "mb-1 font-semibold", __source: { fileName: "", lineNumber: 79, columnNumber: 11 }, __self: this }, "Fish Mass (grams)"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "fishMass", className: "border border-gray-300 p-2 rounded", __source: { fileName: "", lineNumber: 80, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col", __source: { fileName: "", lineNumber: 82, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "mb-1 font-semibold", __source: { fileName: "", lineNumber: 83, columnNumber: 11 }, __self: this }, "Water Temperature (°C)"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "waterTemperature", className: "border border-gray-300 p-2 rounded", __source: { fileName: "", lineNumber: 84, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col", __source: { fileName: "", lineNumber: 86, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "mb-1 font-semibold", __source: { fileName: "", lineNumber: 87, columnNumber: 11 }, __self: this }, "Secchi Disk Depth (m)"), /*#__PURE__*/ React.createElement(SecchiDiskDepthInput, { name: "secchiDiskDepth", __source: { fileName: "", lineNumber: 88, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col", __source: { fileName: "", lineNumber: 90, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "mb-1 font-semibold", __source: { fileName: "", lineNumber: 91, columnNumber: 11 }, __self: this }, "Average Pond Depth (m)"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "pondDepth", className: "border border-gray-300 p-2 rounded", __source: { fileName: "", lineNumber: 92, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col", __source: { fileName: "", lineNumber: 94, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "mb-1 font-semibold", __source: { fileName: "", lineNumber: 95, columnNumber: 11 }, __self: this }, "Wind Velocity (m/s)"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "windVelocity", className: "border border-gray-300 p-2 rounded", __source: { fileName: "", lineNumber: 96, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col", __source: { fileName: "", lineNumber: 98, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "mb-1 font-semibold", __source: { fileName: "", lineNumber: 99, columnNumber: 11 }, __self: this }, "Saturation Level at Given Temperature"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "saturationLevel", className: "border border-gray-300 p-2 rounded", __source: { fileName: "", lineNumber: 100, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col", __source: { fileName: "", lineNumber: 102, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "mb-1 font-semibold", __source: { fileName: "", lineNumber: 103, columnNumber: 11 }, __self: this }, "Existing DO Level in Pond (mg/L)"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "doLevel", className: "border border-gray-300 p-2 rounded", __source: { fileName: "", lineNumber: 104, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col", __source: { fileName: "", lineNumber: 106, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "mb-1 font-semibold", __source: { fileName: "", lineNumber: 107, columnNumber: 11 }, __self: this }, "I0,toa (W/m²)"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "i0Toa", className: "border border-gray-300 p-2 rounded", __source: { fileName: "", lineNumber: 108, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("button", { className: "bg-blue-500 text-white py-2 rounded font-semibold", __source: { fileName: "", lineNumber: 110, columnNumber: 9 }, __self: this }, "Calculate")), /*#__PURE__*/ React.createElement("div", { className: "mt-6 w-[300px] p-4 border border-gray-300 rounded", __source: { fileName: "", lineNumber: 112, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-bold", __source: { fileName: "", lineNumber: 113, columnNumber: 9 }, __self: this }, "Results"), /*#__PURE__*/ React.createElement("div", { className: "mt-2", __source: { fileName: "", lineNumber: 114, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between", __source: { fileName: "", lineNumber: 115, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 116, columnNumber: 13 }, __self: this }, "OCR:"), /*#__PURE__*/ React.createElement("span", { name: "ocrResult", __source: { fileName: "", lineNumber: 117, columnNumber: 13 }, __self: this }, results.ocr)), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between", __source: { fileName: "", lineNumber: 119, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 120, columnNumber: 13 }, __self: this }, "Plankton Respiration:"), /*#__PURE__*/ React.createElement("span", { name: "planktonRespirationResult", __source: { fileName: "", lineNumber: 121, columnNumber: 13 }, __self: this }, results.planktonRespiration)), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between", __source: { fileName: "", lineNumber: 123, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 124, columnNumber: 13 }, __self: this }, "Benthic Respiration:"), /*#__PURE__*/ React.createElement("span", { name: "benthicRespirationResult", __source: { fileName: "", lineNumber: 125, columnNumber: 13 }, __self: this }, results.benthicRespiration)), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between", __source: { fileName: "", lineNumber: 127, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 128, columnNumber: 13 }, __self: this }, "Reaeration:"), /*#__PURE__*/ React.createElement("span", { name: "reaerationResult", __source: { fileName: "", lineNumber: 129, columnNumber: 13 }, __self: this }, results.reaeration)), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between", __source: { fileName: "", lineNumber: 131, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 132, columnNumber: 13 }, __self: this }, "Gross Primary Production:"), /*#__PURE__*/ React.createElement("span", { name: "gppResult", __source: { fileName: "", lineNumber: 133, columnNumber: 13 }, __self: this }, results.gpp))))); }