diff --git a/app/funciones.js b/app/funciones.js index 8a0271b..cffa387 100644 --- 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 ; }; -export default ChartComponent; +export default Tablero; diff --git a/app/globals.css b/app/globals.css index a90f074..f03a194 100644 --- 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; +} diff --git a/app/page.js b/app/page.js index 3d92584..381d4d5 100644 --- 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 ( -
- {/* Entradas */} -
-

Datos:

- -
- -
- -
- {/* Tablero */} - -
- ); + setData({ labels, dataPoints }); + }; + + return ( +
+

Exprecion algebraica

+
+
+ +
+
+ +
+
+ +
+ +
+ {data.labels.length > 0 && } +
+ ); }; export default Home; + diff --git a/package-lock.json b/package-lock.json index bfc3a08..ede7f0d 100644 --- 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", diff --git a/package.json b/package.json index d3b857c..b42f04e 100644 --- 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"