Instalamos estas dos dependencias
npm i chart.js react-chartjs-2
Introducción
Construye un dashboard de productos con Next.js
Configuración del proyecto
Inicializando nuestro proyecto con Next.js
Configuración de ESLint y Prettier
Integrando PostCSS y TailwindCSS a nuestro proyecto
Configuración del archivo jsconfig.js
Cómo integrar componentes predefinidos con TailwindUI
Commons Components
Creación del layout principal e integración de los Page Components
Autenticación
Creando la lógica del componente login
Presentación de la API
Creación del custom hook useAuth
Autenticándonos en la API usando Axios
Obteniendo el token de la API
Guardado del token en una cookie para mantener la sesión
Usando nuestro useAuth para cargar la información del usuario
Integración de la API
Obteniendo la lista de productos desde la API
Creando el componente Chart
Implementación de nuestro componente Chart en el dashboard
Conexión del modal para crear productos
Construcción del modal para crear productos
Inserción de los datos del producto en la API
Creación del componente Alert
Implementación de nuestro componente Alert
Eliminado de productos en la API
Creación y cargado de datos para actualizar un producto
Actualizado del producto en la API
Implementación del logout
Deploy a producción
Haciendo el deploy de nuestra aplicación en Vercel
Conexión de un subdominio a nuestra aplicación
Cierre
Continúa alimentando tu proyecto
Conclusiones y cierre del curso
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Si ya tienes una cuenta,
Iniciar sesiónAportes 6
Preguntas 0
Ordenar por:
Clase #17: Creando el componente Chart 17/31 📈
Chart.js
Chart.js es una manera de incluir gráficos animados e interactivos de JavaScript basados en HTML5 en el sitio web de forma gratuita (enlace: aquí).
Para instarlo, en la consola se ejecuta: npm install chart.js react-chartjs-2
Continuando con el Proyecto: 🔨
Vamos a VSC y en la ruta src/commons creamos el archivo Chart.js
Inicialmente se debe hacer el import de lo que acabamos de instalar, para ellos se toma en cuenta características que vamos a manipular del chart como:
- CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend
Para conocer mas elementos en el enlace (aquí) se encuentra la API de Chart.js
Para los tipos de gráficos que queremos, podemos revisar la documentación en el enlace (aquí), para la clase se usa la etiqueta <Bar /> (enlace: aquí) y se definen algunas características, en el enlace (aquí) se encuentra un ejemplo para chart de tipo Bar en forma vertical.
La estructura de Chart.js por el momento queda:
import {Chart as ChartJS, CategoryScale, LinearScale,
BarElement, Title, Tooltip, Legend} from 'chart.js';
import {Bar} from 'react-chartjs-2';
ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend);
export const Chart = ({ charData}) => {
return(
<>
<Bar
data={charData}
options={{
title: {
display: true,
text: 'Category',
fontSize: 20,
},
legend: {
display: true,
position: 'right',
},
}}
/>
</>
);
};
Chart.js
import { Chart as ChartJS, CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend } from "chart.js";
import { Bar } from "react-chartjs-2";
ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend);
export const Chart = ({ chartData }) => {
return (
<>
<Bar
data={chartData}
options={{
title: {
display: true,
text: "Category",
fontSize: 20,
},
legend: {
display: true,
position: "right",
}
}}
/>
</>
)
}
Si estás en el 2023 ENERO, primero que todo Feliz Año, jaja segundo, debes realizar una actualización con la estructuración de los options={} del <Bar>
const Chart = ({ chartData }: any) => {
return (
<>
<Bar
data={chartData}
options={{
plugins: {
title: {
display: true,
text: 'Category',
font: {
size: 20,
},
},
legend: {
display: true,
position: 'right',
},
},
}}
/>
</>
);
};
found 101 vulnerabilities (10 low, 33 moderate, 44 high, 14 critical)
Por si alguien lo esta trabajando con typescript en el 2023:
import {Chart as ChartJS, CategoryScale, LinearScale,
BarElement, Title, Tooltip, Legend} from 'chart.js';
import {Bar} from 'react-chartjs-2';
ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend);
interface Dataset {
data: (number | [number, number] | null)[];
label: string;
backgroundColor?: string;
borderColor?: string;
borderWidth?: number;
}
interface ChartData {
labels: string[];
datasets: Dataset[];
}
export const Chart = ({ charData}: { charData: ChartData }) => {
return(
<>
<Bar
data={charData}
options={{
plugins: {
title: {
display: true,
text: 'Category',
font: {
size: 20,
},
},
legend: {
display: true,
position: 'right',
},
},
}}
/>
</>
);
};
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?
o inicia sesión.