examen 1
This commit is contained in:
parent
5f17062259
commit
c33f99b225
BIN
app/favicon.ico
BIN
app/favicon.ico
Binary file not shown.
|
Before Width: | Height: | Size: 25 KiB |
54
app/funciones.js
Normal file
54
app/funciones.js
Normal file
@ -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 <canvas id="myChart" width="400" height="200"></canvas>;
|
||||
};
|
||||
|
||||
export default ChartComponent;
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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 (
|
||||
<html lang="en">
|
||||
<body
|
||||
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
|
||||
>
|
||||
<body>
|
||||
{children}
|
||||
</body>
|
||||
</html>
|
||||
|
||||
144
app/page.js
144
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 (
|
||||
<div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
|
||||
<main className="flex flex-col gap-8 row-start-2 items-center sm:items-start">
|
||||
<Image
|
||||
className="dark:invert"
|
||||
src="https://nextjs.org/icons/next.svg"
|
||||
alt="Next.js logo"
|
||||
width={180}
|
||||
height={38}
|
||||
priority
|
||||
<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'
|
||||
/>
|
||||
<ol className="list-inside list-decimal text-sm text-center sm:text-left font-[family-name:var(--font-geist-mono)]">
|
||||
<li className="mb-2">
|
||||
Get started by editing{" "}
|
||||
<code className="bg-black/[.05] dark:bg-white/[.06] px-1 py-0.5 rounded font-semibold">
|
||||
app/page.js
|
||||
</code>
|
||||
.
|
||||
</li>
|
||||
<li>Save and see your changes instantly.</li>
|
||||
</ol>
|
||||
|
||||
<div className="flex gap-4 items-center flex-col sm:flex-row">
|
||||
<a
|
||||
className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5"
|
||||
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<Image
|
||||
className="dark:invert"
|
||||
src="https://nextjs.org/icons/vercel.svg"
|
||||
alt="Vercel logomark"
|
||||
width={20}
|
||||
height={20}
|
||||
/>
|
||||
Deploy now
|
||||
</a>
|
||||
<a
|
||||
className="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:min-w-44"
|
||||
href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Read our docs
|
||||
</a>
|
||||
</div>
|
||||
</main>
|
||||
<footer className="row-start-3 flex gap-6 flex-wrap items-center justify-center">
|
||||
<a
|
||||
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
|
||||
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
<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}
|
||||
>
|
||||
<Image
|
||||
aria-hidden
|
||||
src="https://nextjs.org/icons/file.svg"
|
||||
alt="File icon"
|
||||
width={16}
|
||||
height={16}
|
||||
/>
|
||||
Learn
|
||||
</a>
|
||||
<a
|
||||
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
|
||||
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<Image
|
||||
aria-hidden
|
||||
src="https://nextjs.org/icons/window.svg"
|
||||
alt="Window icon"
|
||||
width={16}
|
||||
height={16}
|
||||
/>
|
||||
Examples
|
||||
</a>
|
||||
<a
|
||||
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
|
||||
href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<Image
|
||||
aria-hidden
|
||||
src="https://nextjs.org/icons/globe.svg"
|
||||
alt="Globe icon"
|
||||
width={16}
|
||||
height={16}
|
||||
/>
|
||||
Go to nextjs.org →
|
||||
</a>
|
||||
</footer>
|
||||
Enter
|
||||
</button>
|
||||
</div>
|
||||
{/* Tablero */}
|
||||
<Tablero data={data} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
export default Home;
|
||||
|
||||
19
package-lock.json
generated
19
package-lock.json
generated
@ -8,6 +8,7 @@
|
||||
"name": "expreciones-algebraicas",
|
||||
"version": "0.1.0",
|
||||
"dependencies": {
|
||||
"chart.js": "^4.4.4",
|
||||
"next": "14.2.11",
|
||||
"react": "^18",
|
||||
"react-dom": "^18"
|
||||
@ -230,6 +231,12 @@
|
||||
"@jridgewell/sourcemap-codec": "^1.4.14"
|
||||
}
|
||||
},
|
||||
"node_modules/@kurkle/color": {
|
||||
"version": "0.3.2",
|
||||
"resolved": "https://registry.npmjs.org/@kurkle/color/-/color-0.3.2.tgz",
|
||||
"integrity": "sha512-fuscdXJ9G1qb7W8VdHi+IwRqij3lBkosAm4ydQtEmbY58OzHXqQhvlxqEkoz0yssNVn38bcpRWgA9PP+OGoisw==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@next/env": {
|
||||
"version": "14.2.11",
|
||||
"resolved": "https://registry.npmjs.org/@next/env/-/env-14.2.11.tgz",
|
||||
@ -1185,6 +1192,18 @@
|
||||
"url": "https://github.com/chalk/chalk?sponsor=1"
|
||||
}
|
||||
},
|
||||
"node_modules/chart.js": {
|
||||
"version": "4.4.4",
|
||||
"resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.4.4.tgz",
|
||||
"integrity": "sha512-emICKGBABnxhMjUjlYRR12PmOXhJ2eJjEHL2/dZlWjxRAZT1D8xplLFq5M0tMQK8ja+wBS/tuVEJB5C6r7VxJA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@kurkle/color": "^0.3.0"
|
||||
},
|
||||
"engines": {
|
||||
"pnpm": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/chokidar": {
|
||||
"version": "3.6.0",
|
||||
"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
|
||||
|
||||
11
package.json
11
package.json
@ -9,14 +9,15 @@
|
||||
"lint": "next lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"chart.js": "^4.4.4",
|
||||
"next": "14.2.11",
|
||||
"react": "^18",
|
||||
"react-dom": "^18",
|
||||
"next": "14.2.11"
|
||||
"react-dom": "^18"
|
||||
},
|
||||
"devDependencies": {
|
||||
"postcss": "^8",
|
||||
"tailwindcss": "^3.4.1",
|
||||
"eslint": "^8",
|
||||
"eslint-config-next": "14.2.11"
|
||||
"eslint-config-next": "14.2.11",
|
||||
"postcss": "^8",
|
||||
"tailwindcss": "^3.4.1"
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user