slider

app/funciones.js

@@ -1,8 +1,9 @@
 import React, { useEffect } from 'react';
 import { Chart, registerables } from 'chart.js';
+import zoomPlugin from 'chartjs-plugin-zoom';
 
-// Registra los módulos necesarios de Chart.js
+// Registra los módulos necesarios de Chart.js y el plugin de zoom
-Chart.register(...registerables);
+Chart.register(...registerables, zoomPlugin);
 
 const Tablero = ({ labels, dataPoints }) => {
     useEffect(() => {
@@ -42,12 +43,43 @@ const Tablero = ({ labels, dataPoints }) => {
                         title: {
                             display: true,
                             text: 'X'
-                        }
+                        },
+                        zoom: {
+                            enabled: true,
+                            mode: 'x', // Habilita el zoom en el eje X
+                        },
+                        pan: {
+                            enabled: true,
+                            mode: 'x', // Habilita el desplazamiento en el eje X
+                        },
                     },
                     y: {
                         title: {
                             display: true,
                             text: 'f(x)'
+                        },
+                        zoom: {
+                            enabled: true,
+                            mode: 'y', // Habilita el zoom en el eje Y
+                        },
+                        pan: {
+                            enabled: true,
+                            mode: 'y', // Habilita el desplazamiento en el eje Y
+                        },
+                    }
+                },
+                plugins: {
+                    zoom: {
+                        pan: {
+                            enabled: true,
+                            mode: 'xy', // Permite el desplazamiento en ambos ejes
+                        },
+                        zoom: {
+                            enabled: true,
+                            mode: 'xy', // Permite el zoom en ambos ejes
+                            speed: 0.1, // Velocidad de zoom
+                            sensitivity: 3, // Sensibilidad del zoom
+                            threshold: 2, // Umbral de activación del zoom
                         }
                     }
                 }
@@ -58,7 +90,7 @@ const Tablero = ({ labels, dataPoints }) => {
         return () => myChart.destroy();
     }, [labels, dataPoints]);
 
-    return <canvas id="myChart" width="400" height="200"></canvas>;
+    return <canvas id="myChart" width="400" height="175"></canvas>;
 };
 
 export default Tablero;

app/page.js

@@ -32,47 +32,50 @@ const Home = () => {
     };
 
     return (
-        <div className="container border-2">
+        <div className="flex">
-            <h1>Exprecion algebraica</h1>
+            <div className='border-2'>
-            <form onSubmit={handleSubmit}>
+                <h1>Exprecion algebraica</h1>
-                <div>
+                <form onSubmit={handleSubmit}>
-                    <label>
+                    <div>
-                    Exprecion:
+                        <label>
-                        <input
+                        Exprecion:
-                            type="text"
+                            <input
-                            value={expression}
+                                type="text"
-                            onChange={(e) => setExpression(e.target.value)}
+                                value={expression}
-                            placeholder="e.g., x^2 + 2*x + 1"
+                                onChange={(e) => setExpression(e.target.value)}
-                            required
+                                placeholder="e.g., x^2 + 2*x + 1"
-                        />
+                                required
-                    </label>
+                            />
-                </div>
+                        </label>
-                <div>
+                    </div>
-                    <label>
+                    <div>
-                        valor inicial:
+                        <label>
-                        <input className='border-4'
+                            valor inicial:
-                            type="number"
+                            <input className='border-4'
-                            step="0.1"
+                                type="number"
-                            value={start}
+                                step="0.1"
-                            onChange={(e) => setStart(e.target.value)}
+                                value={start}
-                            required
+                                onChange={(e) => setStart(e.target.value)}
-                        />
+                                required
-                    </label>
+                            />
-                </div>
+                        </label>
-                <div>
+                    </div>
-                    <label>
+                    <div>
-                        Valor final
+                        <label>
-                        <input className='border-4'
+                            Valor final
-                            type="number"
+                            <input className='border-4'
-                            step="0.1"
+                                type="number"
-                            value={end}
+                                step="0.1"
-                            onChange={(e) => setEnd(e.target.value)}
+                                value={end}
-                            required
+                                onChange={(e) => setEnd(e.target.value)}
-                        />
+                                required
-                    </label>
+                            />
-                </div>
+                        </label>
-                <button type="submit" className='bg-black text-white font-bold px-6 py-1 rounded-3xl'>Generar Grafica</button>
+                    </div>
-            </form>
+                    <button type="submit" className='bg-black text-white font-bold px-6 py-1 rounded-3xl'>Generar Grafica</button>
+                </form>
+            </div>
+
             {data.labels.length > 0 && <Tablero labels={data.labels} dataPoints={data.dataPoints} />}
         </div>
     );

package.json

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