reultado final

app/funciones.js

@@ -4,40 +4,50 @@ import { Chart, registerables } from 'chart.js';
 // Registra los módulos necesarios de Chart.js
 Chart.register(...registerables);
 
-const ChartComponent = ({ labels = [], datasets = [] }) => {
+const Tablero = ({ labels, dataPoints }) => {
     useEffect(() => {
-        // Asegúrate de que el canvas se renderice correctamente
+        // Verifica si el canvas está disponible
-        const ctx = document.getElementById("myChart").getContext("2d");
+        const canvas = document.getElementById("myChart");
+        if (!canvas) {
+            console.error("Canvas element not found");
+            return;
+        }
 
-        // Crear los datos para el gráfico
+        const ctx = canvas.getContext("2d");
+        
+        // Verifica si el contexto es válido
+        if (!ctx) {
+            console.error("Failed to get canvas context");
+            return;
+        }
+
+        // Datos del gráfico
         const data = {
             labels: labels,
-            datasets: datasets.map(dataset => ({
+            datasets: [{
-                label: dataset.label,
+                label: 'f(x)',
-                borderColor: dataset.borderColor,
+                borderColor: 'rgba(75, 192, 192, 1)',
-                data: dataset.data,
+                data: dataPoints,
-                fill: dataset.fill
+                fill: false
-            }))
+            }]
         };
 
-        // Crear el gráfico
+        // Configuración del gráfico
-        const myLineChart = new Chart(ctx, {
+        const myChart = new Chart(ctx, {
             type: 'line',
             data: data,
             options: {
                 scales: {
                     x: {
-                        beginAtZero: true,
                         title: {
                             display: true,
                             text: 'X'
                         }
                     },
                     y: {
-                        beginAtZero: true,
                         title: {
                             display: true,
-                            text: 'Y'
+                            text: 'f(x)'
                         }
                     }
                 }
@@ -45,10 +55,10 @@ const ChartComponent = ({ labels = [], datasets = [] }) => {
         });
 
         // Limpieza del gráfico cuando el componente se desmonte
-        return () => myLineChart.destroy();
+        return () => myChart.destroy();
-    }, [labels, datasets]); // Re-renderiza el gráfico cuando cambien los datos
+    }, [labels, dataPoints]);
 
     return <canvas id="myChart" width="400" height="200"></canvas>;
 };
 
-export default ChartComponent;
+export default Tablero;

app/globals.css

@@ -2,3 +2,23 @@
 @tailwind components;
 @tailwind utilities;
 
+.container {
+    max-width: 800px;
+    margin: 0 auto;
+    padding: 20px;
+    text-align: center;
+}
+
+form {
+    margin-bottom: 20px;
+}
+
+label {
+    display: block;
+    margin-bottom: 10px;
+}
+
+input {
+    margin: 0 10px;
+    padding: 5px;
+}

app/page.js

@@ -1,55 +1,84 @@
 "use client";
 import React, { useState } from 'react';
 import Tablero from './funciones';
+import { evaluate } from 'mathjs';
+
 const Home = () => {
-  const [data, setData] = useState({ labels: [], values: [] });
+    const [expression, setExpression] = useState('');
+    const [start, setStart] = useState('');
+    const [end, setEnd] = useState('');
+    const [data, setData] = useState({ labels: [], dataPoints: [] });
 
-  const handleClick = () => {
+    const handleSubmit = (e) => {
-    const rangoX = Number(document.getElementById("rangox").value);
+        e.preventDefault();
-    const xi = Number(document.getElementById("xi").value);
 
-    // Generar una lista de números desde xi hasta rangoX
+        // Convert inputs to numbers
+        const startX = parseFloat(start);
+        const endX = parseFloat(end);
+
+        // Generate labels and data points
         const labels = [];
-    const values = [];
+        const dataPoints = [];
-    for (let i = xi; i <= rangoX; i++) {
+        for (let x = startX; x <= endX; x += 0.1) {
-      labels.push(i);
+            labels.push(x.toFixed(1));
-      values.push(i); // Puedes ajustar la función aquí si deseas otros valores
+            try {
+                const y = evaluate(expression, { x });
+                dataPoints.push(y);
+            } catch (error) {
+                console.error("Error evaluating expression", error);
+                dataPoints.push(null);
+            }
         }
 
-    setData({ labels, values });
+        setData({ labels, dataPoints });
     };
 
     return (
-    <div className="p-5">
+        <div className="container border-2">
-      {/* Entradas */}
+            <h1>Exprecion algebraica</h1>
-      <div className='border-2 p-5 w-60'>
+            <form onSubmit={handleSubmit}>
-        <h1>Datos:</h1>
+                <div>
+                    <label>
+                    Exprecion:
                         <input
-          id="rangox"
+                            type="text"
-          type="number"
+                            value={expression}
-          className="border-4 rounded-3xl px-2"
+                            onChange={(e) => setExpression(e.target.value)}
-          placeholder='Escribe el límite en X'
+                            placeholder="e.g., x^2 + 2*x + 1"
+                            required
                         />
-        <br />
+                    </label>
-        <input
-          id="xi"
-          type="number"
-          className="mt-4 border-4 rounded-3xl px-2"
-          placeholder='Escribe el inicio en X'
-        />
-        <br />
-        <button
-          id='btne'
-          className='mt-2 px-6 py-1 bg-blue-500 rounded-full text-white font-bold'
-          onClick={handleClick}
-        >
-          Enter
-        </button>
                 </div>
-      {/* Tablero */}
+                <div>
-      <Tablero data={data} />
+                    <label>
+                        valor inicial:
+                        <input className='border-4'
+                            type="number"
+                            step="0.1"
+                            value={start}
+                            onChange={(e) => setStart(e.target.value)}
+                            required
+                        />
+                    </label>
+                </div>
+                <div>
+                    <label>
+                        Valor final
+                        <input className='border-4'
+                            type="number"
+                            step="0.1"
+                            value={end}
+                            onChange={(e) => setEnd(e.target.value)}
+                            required
+                        />
+                    </label>
+                </div>
+                <button type="submit" className='bg-black text-white font-bold px-6 py-1 rounded-3xl'>Generar Grafica</button>
+            </form>
+            {data.labels.length > 0 && <Tablero labels={data.labels} dataPoints={data.dataPoints} />}
         </div>
     );
 };
 
 export default Home;
+

package-lock.json

@@ -9,6 +9,7 @@
       "version": "0.1.0",
       "dependencies": {
         "chart.js": "^4.4.4",
+        "mathjs": "^13.1.1",
         "next": "14.2.11",
         "react": "^18",
         "react-dom": "^18"
@@ -33,6 +34,18 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/@babel/runtime": {
+      "version": "7.25.6",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.25.6.tgz",
+      "integrity": "sha512-VBj9MYyDb9tuLq7yzqjgzt6Q+IBQLrGZfdjOekyEirZPHxXWoTSGUTMrpsfi58Up73d13NfYLv8HT9vmznjzhQ==",
+      "license": "MIT",
+      "dependencies": {
+        "regenerator-runtime": "^0.14.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/@eslint-community/eslint-utils": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz",
@@ -1278,6 +1291,19 @@
         "node": ">= 6"
       }
     },
+    "node_modules/complex.js": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/complex.js/-/complex.js-2.1.1.tgz",
+      "integrity": "sha512-8njCHOTtFFLtegk6zQo0kkVX1rngygb/KQI6z1qZxlFI3scluC+LVTCFbrkWjBv4vvLlbQ9t88IPMC6k95VTTg==",
+      "license": "MIT",
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "type": "patreon",
+        "url": "https://www.patreon.com/infusion"
+      }
+    },
     "node_modules/concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -1392,6 +1418,12 @@
         }
       }
     },
+    "node_modules/decimal.js": {
+      "version": "10.4.3",
+      "resolved": "https://registry.npmjs.org/decimal.js/-/decimal.js-10.4.3.tgz",
+      "integrity": "sha512-VBBaLc1MgL5XpzgIP7ny5Z6Nx3UrRkIViUkPUdtl9aya5amy3De1gsUUSB1g3+3sExYNjCAsAznmukyxCb1GRA==",
+      "license": "MIT"
+    },
     "node_modules/deep-equal": {
       "version": "2.2.3",
       "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-2.2.3.tgz",
@@ -1723,6 +1755,12 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/escape-latex": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/escape-latex/-/escape-latex-1.2.0.tgz",
+      "integrity": "sha512-nV5aVWW1K0wEiUIEdZ4erkGGH8mDxGyxSeqPzRNtWP7ataw+/olFObw7hujFWlVjNsaDFw5VZ5NzVSIqRgfTiw==",
+      "license": "MIT"
+    },
     "node_modules/escape-string-regexp": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
@@ -2337,6 +2375,19 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/fraction.js": {
+      "version": "4.3.7",
+      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz",
+      "integrity": "sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==",
+      "license": "MIT",
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "type": "patreon",
+        "url": "https://github.com/sponsors/rawify"
+      }
+    },
     "node_modules/fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
@@ -3222,6 +3273,12 @@
         "@pkgjs/parseargs": "^0.11.0"
       }
     },
+    "node_modules/javascript-natural-sort": {
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/javascript-natural-sort/-/javascript-natural-sort-0.7.1.tgz",
+      "integrity": "sha512-nO6jcEfZWQXDhOiBtG2KvKyEptz7RVbpGP4vTD2hLBdmNQSsCiicO2Ioinv6UI4y9ukqnBpy+XZ9H6uLNgJTlw==",
+      "license": "MIT"
+    },
     "node_modules/jiti": {
       "version": "1.21.6",
       "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.6.tgz",
@@ -3404,6 +3461,29 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/mathjs": {
+      "version": "13.1.1",
+      "resolved": "https://registry.npmjs.org/mathjs/-/mathjs-13.1.1.tgz",
+      "integrity": "sha512-duaSAy7m4F+QtP1Dyv8MX2XuxcqpNDDlGly0SdVTCqpAmwdOFWilDdQKbLdo9RfD6IDNMOdo9tIsEaTXkconlQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@babel/runtime": "^7.25.4",
+        "complex.js": "^2.1.1",
+        "decimal.js": "^10.4.3",
+        "escape-latex": "^1.2.0",
+        "fraction.js": "^4.3.7",
+        "javascript-natural-sort": "^0.7.1",
+        "seedrandom": "^3.0.5",
+        "tiny-emitter": "^2.1.0",
+        "typed-function": "^4.2.1"
+      },
+      "bin": {
+        "mathjs": "bin/cli.js"
+      },
+      "engines": {
+        "node": ">= 18"
+      }
+    },
     "node_modules/merge2": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
@@ -4218,6 +4298,12 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/regenerator-runtime": {
+      "version": "0.14.1",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
+      "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==",
+      "license": "MIT"
+    },
     "node_modules/regexp.prototype.flags": {
       "version": "1.5.2",
       "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.2.tgz",
@@ -4395,6 +4481,12 @@
         "loose-envify": "^1.1.0"
       }
     },
+    "node_modules/seedrandom": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/seedrandom/-/seedrandom-3.0.5.tgz",
+      "integrity": "sha512-8OwmbklUNzwezjGInmZ+2clQmExQPvomqjL7LFqOYqtmuxRgQYqOD3mHaU+MvZn5FLUeVxVfQjwLZW/n/JFuqg==",
+      "license": "MIT"
+    },
     "node_modules/semver": {
       "version": "7.6.3",
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz",
@@ -4908,6 +5000,12 @@
         "node": ">=0.8"
       }
     },
+    "node_modules/tiny-emitter": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.1.0.tgz",
+      "integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==",
+      "license": "MIT"
+    },
     "node_modules/to-regex-range": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
@@ -5063,6 +5161,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/typed-function": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/typed-function/-/typed-function-4.2.1.tgz",
+      "integrity": "sha512-EGjWssW7Tsk4DGfE+5yluuljS1OGYWiI1J6e8puZz9nTMM51Oug8CD5Zo4gWMsOhq5BI+1bF+rWTm4Vbj3ivRA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 18"
+      }
+    },
     "node_modules/typescript": {
       "version": "5.6.2",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.6.2.tgz",

package.json

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "chart.js": "^4.4.4",
+    "mathjs": "^13.1.1",
     "next": "14.2.11",
     "react": "^18",
     "react-dom": "^18"