function MainComponent() { const [inputValue, setInputValue] = React.useState(''); const [customLine, setCustomLine] = React.useState([]); const data = [ { peneira: 4.75, zonaInferior: 0, zonaOtimaInferior: 0, zonaOtimaSuperior: 5, zonaSuperior: 10 }, { peneira: 2.36, zonaInferior: 0, zonaOtimaInferior: 10, zonaOtimaSuperior: 20, zonaSuperior: 25 }, { peneira: 1.18, zonaInferior: 5, zonaOtimaInferior: 20, zonaOtimaSuperior: 30, zonaSuperior: 50 }, { peneira: 0.6, zonaInferior: 15, zonaOtimaInferior: 35, zonaOtimaSuperior: 55, zonaSuperior: 70 }, { peneira: 0.3, zonaInferior: 50, zonaOtimaInferior: 65, zonaOtimaSuperior: 85, zonaSuperior: 95 }, { peneira: 0.15, zonaInferior: 85, zonaOtimaInferior: 90, zonaOtimaSuperior: 95, zonaSuperior: 100 } ]; const generatePoints = (key)=>{ return data.map((d)=>{ const x = d.peneira / 4.75 * 100; const y = 100 - d[key]; return `${x},${y}`; }).join(" "); }; const handleInputChange = (e)=>{ setInputValue(e.target.value); }; const handleSubmit = (e)=>{ e.preventDefault(); setCustomLine((prevCustomLine)=>[ ...prevCustomLine, inputValue.split(',').map(Number) ]); setInputValue(''); }; const customLinePoints = customLine.map((line)=>line.map((customValue, index)=>{ const x = data[index].peneira / 4.75 * 100; const y = 100 - customValue; return `${x},${y}`; }).join(" ")); return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center h-screen", __source: { fileName: "", lineNumber: 40, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-roboto text-[#121212] text-lg mb-4", __source: { fileName: "", lineNumber: 41, columnNumber: 7 }, __self: this }, "Granulometry Chart"), /*#__PURE__*/ React.createElement("svg", { className: "w-full max-w-3xl h-[400px]", viewBox: "0 0 100 100", __source: { fileName: "", lineNumber: 42, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("polyline", { fill: "none", stroke: "#FF4136", strokeWidth: "2", points: generatePoints('zonaInferior'), __source: { fileName: "", lineNumber: 43, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("polyline", { fill: "none", stroke: "#2ECC40", strokeWidth: "2", points: generatePoints('zonaOtimaInferior'), __source: { fileName: "", lineNumber: 44, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("polyline", { fill: "none", stroke: "#2ECC40", strokeWidth: "2", points: generatePoints('zonaOtimaSuperior'), __source: { fileName: "", lineNumber: 45, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("polyline", { fill: "none", stroke: "#FF4136", strokeWidth: "2", points: generatePoints('zonaSuperior'), __source: { fileName: "", lineNumber: 46, columnNumber: 9 }, __self: this }), customLinePoints.map((points)=>/*#__PURE__*/ React.createElement("polyline", { key: points, fill: "none", stroke: "#0074D9", strokeWidth: "2", points: points, __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("form", { className: "flex flex-col items-center mt-4", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 51, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { className: "border-2 border-gray-300 p-2", type: "text", placeholder: "Digite os valores separados por vírgula", name: "customValues", value: inputValue, onChange: handleInputChange, __source: { fileName: "", lineNumber: 52, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "bg-blue-500 text-white p-2 mt-2", type: "submit", __source: { fileName: "", lineNumber: 60, columnNumber: 9 }, __self: this }, "Adicionar Linha"))); }