reultado final

2024-09-13 15:47:35 -06:00 · 2024-09-13 15:47:35 -06:00 · 1f7395d719
commit 1f7395d719
parent c33f99b225
5 changed files with 229 additions and 62 deletions
--- a/app/funciones.js
+++ b/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
-        const ctx = document.getElementById("myChart").getContext("2d");
+        // Verifica si el canvas está disponible
+        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 => ({
-                label: dataset.label,
-                borderColor: dataset.borderColor,
-                data: dataset.data,
-                fill: dataset.fill
-            }))
+            datasets: [{
+                label: 'f(x)',
+                borderColor: 'rgba(75, 192, 192, 1)',
+                data: dataPoints,
+                fill: false
+            }]
        };

-        // Crear el gráfico
-        const myLineChart = new Chart(ctx, {
+        // Configuración del gráfico
+        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();
-    }, [labels, datasets]); // Re-renderiza el gráfico cuando cambien los datos
+        return () => myChart.destroy();
+    }, [labels, dataPoints]);

    return <canvas id="myChart" width="400" height="200"></canvas>;
 };

-export default ChartComponent;
+export default Tablero;
--- a/app/globals.css
+++ b/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;
+}
--- a/app/page.js
+++ b/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 rangoX = Number(document.getElementById("rangox").value);
-    const xi = Number(document.getElementById("xi").value);
+    const handleSubmit = (e) => {
+        e.preventDefault();

-    // Generar una lista de números desde xi hasta rangoX
-    const labels = [];
-    const values = [];
-    for (let i = xi; i <= rangoX; i++) {
-      labels.push(i);
-      values.push(i); // Puedes ajustar la función aquí si deseas otros valores
-    }
+        // Convert inputs to numbers
+        const startX = parseFloat(start);
+        const endX = parseFloat(end);

-    setData({ labels, values });
-  };
+        // Generate labels and data points
+        const labels = [];
+        const dataPoints = [];
+        for (let x = startX; x <= endX; x += 0.1) {
+            labels.push(x.toFixed(1));
+            try {
+                const y = evaluate(expression, { x });
+                dataPoints.push(y);
+            } catch (error) {
+                console.error("Error evaluating expression", error);
+                dataPoints.push(null);
+            }
+        }

-  return (
-    <div className="p-5">
-      {/* Entradas */}
-      <div className='border-2 p-5 w-60'>
-        <h1>Datos:</h1>
-        <input
-          id="rangox"
-          type="number"
-          className="border-4 rounded-3xl px-2"
-          placeholder='Escribe el límite en X'
-        />
-        <br />
-        <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 */}
-      <Tablero data={data} />
-    </div>
-  );
+        setData({ labels, dataPoints });
+    };
+
+    return (
+        <div className="container border-2">
+            <h1>Exprecion algebraica</h1>
+            <form onSubmit={handleSubmit}>
+                <div>
+                    <label>
+                    Exprecion:
+                        <input
+                            type="text"
+                            value={expression}
+                            onChange={(e) => setExpression(e.target.value)}
+                            placeholder="e.g., x^2 + 2*x + 1"
+                            required
+                        />
+                    </label>
+                </div>
+                <div>
+                    <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;
+
--- a/package-lock.json
+++ b/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",
--- a/package.json
+++ b/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"