diff --git a/app/favicon.ico b/app/favicon.ico
deleted file mode 100644
index 718d6fe..0000000
Binary files a/app/favicon.ico and /dev/null differ
diff --git a/app/funciones.js b/app/funciones.js
new file mode 100644
index 0000000..8a0271b
--- /dev/null
+++ b/app/funciones.js
@@ -0,0 +1,54 @@
+import React, { useEffect } from 'react';
+import { Chart, registerables } from 'chart.js';
+
+// Registra los módulos necesarios de Chart.js
+Chart.register(...registerables);
+
+const ChartComponent = ({ labels = [], datasets = [] }) => {
+ useEffect(() => {
+ // Asegúrate de que el canvas se renderice correctamente
+ const ctx = document.getElementById("myChart").getContext("2d");
+
+ // Crear los datos para el gráfico
+ const data = {
+ labels: labels,
+ datasets: datasets.map(dataset => ({
+ label: dataset.label,
+ borderColor: dataset.borderColor,
+ data: dataset.data,
+ fill: dataset.fill
+ }))
+ };
+
+ // Crear el gráfico
+ const myLineChart = 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'
+ }
+ }
+ }
+ }
+ });
+
+ // Limpieza del gráfico cuando el componente se desmonte
+ return () => myLineChart.destroy();
+ }, [labels, datasets]); // Re-renderiza el gráfico cuando cambien los datos
+
+ return ;
+};
+
+export default ChartComponent;
diff --git a/app/globals.css b/app/globals.css
index 13d40b8..a90f074 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -2,26 +2,3 @@
@tailwind components;
@tailwind utilities;
-:root {
- --background: #ffffff;
- --foreground: #171717;
-}
-
-@media (prefers-color-scheme: dark) {
- :root {
- --background: #0a0a0a;
- --foreground: #ededed;
- }
-}
-
-body {
- color: var(--foreground);
- background: var(--background);
- font-family: Arial, Helvetica, sans-serif;
-}
-
-@layer utilities {
- .text-balance {
- text-wrap: balance;
- }
-}
diff --git a/app/layout.js b/app/layout.js
index 9800bf8..ff0eb35 100644
--- a/app/layout.js
+++ b/app/layout.js
@@ -1,17 +1,5 @@
-import localFont from "next/font/local";
import "./globals.css";
-const geistSans = localFont({
- src: "./fonts/GeistVF.woff",
- variable: "--font-geist-sans",
- weight: "100 900",
-});
-const geistMono = localFont({
- src: "./fonts/GeistMonoVF.woff",
- variable: "--font-geist-mono",
- weight: "100 900",
-});
-
export const metadata = {
title: "Create Next App",
description: "Generated by create next app",
@@ -20,9 +8,7 @@ export const metadata = {
export default function RootLayout({ children }) {
return (
-
+
{children}
diff --git a/app/page.js b/app/page.js
index 7f0afc2..3d92584 100644
--- a/app/page.js
+++ b/app/page.js
@@ -1,101 +1,55 @@
-import Image from "next/image";
+"use client";
+import React, { useState } from 'react';
+import Tablero from './funciones';
+const Home = () => {
+ const [data, setData] = useState({ labels: [], values: [] });
+
+ const handleClick = () => {
+ const rangoX = Number(document.getElementById("rangox").value);
+ const xi = Number(document.getElementById("xi").value);
+
+ // 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
+ }
+
+ setData({ labels, values });
+ };
-export default function Home() {
return (
-
-
-
+ {/* Entradas */}
+
+
Datos:
+
-
- -
- Get started by editing{" "}
-
- app/page.js
-
- .
-
- - Save and see your changes instantly.
-
-
-
-
-
+ Enter
+
+