No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Aprende todo un fin de semana sin pagar una suscripci贸n 馃敟

Aprende todo un fin de semana sin pagar una suscripci贸n 馃敟

Reg铆strate

Comienza en:

5D
16H
46M
22S
Curso Profesional de Next.js

Curso Profesional de Next.js

Oscar Barajas Tavares

Oscar Barajas Tavares

Implementaci贸n de nuestro componente Chart en el dashboard

18/31
Recursos

Aportes 16

Preguntas 3

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

Clase #18: Implementaci贸n de nuestro componente Chart en el dashboard 18/31 馃搳



M茅todo reduce:

El m茅todo reduce() aplica una funci贸n a un acumulador y a cada valor de una array (de izquierda a derecha) para reducirlo a un 煤nico valor. Fuente: aqu铆


La sintaxis es: arr.reduce(callback(accumulator, currentValue), initialValue)

Donde arr es un arreglo no vac铆o; callback es la funci贸n que se ejecuta con cada valor del arreglo (excepto el primer valor si no se indica el valor inicial); accumulator como su nombre lo dice es el encargado de guardar o acumular los valores por cada llamada de la funci贸n callback; currentValue es el valor actual que se pasa desde el arreglo; initialValue es opcional, en caso de que no se indique, el m茅todo seleccionar谩 al primer valor del arreglo como valor inicial y actuar谩 como acumulador en la primera llamada de la funci贸n callback.

Ejemplo: tenemos una array con costos y las funci贸n consiste en una suma:

const number = [1800, 50, 300, 20, 100] 
//脡ste es el arr

function sum_reducer(accumaltor, currentValue) {
	return accumulator + currentValue;
} //La funci贸n sum_reduce es la funci贸n callback

let sum = numbers.reduce(sum_reduce) //no se especifica el initialValue

/*El resultado de sum es 21 porque 1800 se convirti贸 en el initialValue y por lo tanto el accumulator y 50 el currentValue, luego la suma de 1800 + 50 = 1850 se convierte en el accumulator y el siguiente n煤mero 300 se convierte en currentValue y as铆 hasta sumar todos los elementos del array*/

let summation = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, initialValue);
/*En caso de que indiquen un valor inicial por ejemplo initialValue = 10, el primer elemento 1800 ser铆a el currentValue y el resultado final ser铆a 31:*/

Operadores de incremento con b= ++a; y b = a++;


Es importante recordar c贸mo funcionan el operador de incrementar y las posiciones de lado izquierdo y derecho y c贸mo afectan a las variables. Fuente: aqu铆

Ejemplo:

let x = 3;
const y = x++; //Aqu铆 primero asigna el valor de 'x' a 'y', luego incrementa 'x' en uno
console.log(`x:${x}, y:${y}`);
// output: "x:4, y:3"

let x = 3;
const x = ++y; //Aqu铆 primero incrementa en uno a 'x' y luego asigna a 'y' el valor de 'x'
console.log(`x:${x}, y:${y}`);
// output: "a:4, b:4"

Continuando con el Proyecto: 馃敤


Ir a VSC al archivo index.js de la ruta src/pages/dasboard, vamos a eliminar la constante people, como queremos mostrar las barras de los gr谩ficos hacemos el import de Chart con:

import { Chart } from '@common/Chart'


Dentro del return, antes del primer div se agrega la etiqueta <Chart /> con la clase que indica que se le agrega 2 rem de margin bottom: 鈥渕b-8鈥 y 0.5 rem de margin top: "mt-2" (Fuente: aqu铆):

<Chart className="mb-8 mt-2" chartData={data} />


Antes del return y dentro de la funci贸n Dashboard() la l贸gica queda:

//Con categoryNames se conoce cu谩ntos elementos est谩n dentro de las categor铆as
  const categoryNames = products?.map((product) => product.category);
  //Con categoryCount se conocen los nombres de las categor铆as
  const categoryCount = categoryNames?.map((category) => category.name);

  /* console.log(categoryNames);
  console.log(categoryCount);*/

  //Con countOcurrences se conoce el n煤mero de ocurrencias (frecuencia) que aparece cada categor铆a
  //L贸giga constante = (array, value) => array.reduce((a,v) => (v === value? a + 1: a), 0);
  const countOcurrences = (arr) => arr.reduce((prev, curr) => ((prev[curr] = ++prev[curr] || 1), prev), {});
  /* console.log(countOcurrences(categoryCount)) */
  //El objeto data contiene la informaci贸n necesaria para el gr谩fico
  const data = {
    datasets: [
      {
        label: 'Categories',
        data: countOcurrences(categoryCount),
        borderWidth: 2,
        backgroundColor: ['#ffbb11', '#c0c0c0', '#50AF95', '#f3ba2f', '#2a71d0'],
      },
    ],
  };


Dato importante: c贸mo realizar la operaci贸n de reduce en countOcurrences:

//Si colocamos solo 3 productos para mostrar en el dashboard

const categoryNames = products?.map((product) => product.category);

/*La salida de categoryNames nos trae toda la informaci贸n por cada producto
(3)聽[{鈥, {鈥, {鈥]
        1. 0:聽{id:聽1,聽name:聽'Clothes',聽image:聽'https://api.lorem.space/image/fashion?w=640&h=480&r=3714'}
        2. 1:聽{id:聽3,聽name:聽'Furniture',聽image:聽'https://api.lorem.space/image/furniture?w=640&h=480&r=9014'}
        3. 2:聽{id:聽3,聽name:聽'Furniture',聽image:聽'https://api.lorem.space/image/furniture?w=640&h=480&r=9014'}
        4. length:聽3
        5. [[Prototype]]:聽Array(0)
*/

const categoryCount = categoryNames?.map((category) => category.name);

/*Con categoryCount se obtiene un arreglo con todas las categor铆as en este caso de 3 productos
(3)聽['Clothes', 'Furniture', 'Furniture']
        1. 0:聽"Clothes"
        2. 1:聽"Furniture"
        3. 2:聽"Furniture"
        4. length:聽3
        5. [[Prototype]]:聽Array(0)

*/


const countOcurrences = (arr) => arr.reduce((prev, curr) => ((prev[curr] = ++prev[curr] || 1), prev), {});

/*Con countOcurrences para estos 3 productos tenemos que el array es {Clothes, Furniture, Furniture}
     0        1         2
Funci贸n: (prev[curr] = ++prev[curr] || 1)

Para la primera iteraci贸n:
prev = {} es vac铆o porque se le indic贸 con llaves {}
curr = {Clothes}
La funci贸n: si {} == Clothes entonces {Clothes} se incrementa en 1 si no se crea {Clothes : 1}, en este caso se cumpli贸 el lado derecho y se crea 1 Clothes

Para la segunda iteraci贸n:
prev = {Clothes : 1} as铆 qued贸 en la primera iteraci贸n
curr = {Furniture}
La funci贸n: 驴En {Clothes : 1} hay un Furniture? Como no hay, entonces  se crea y agrega { Furniture : 1}, se cumpli贸 el lado derecho

Para la tercera iteraci贸n:
prev = {Clothes : 1, Furniture : 1} as铆 qued贸 en la segunda iteraci贸n
curr = {Furniture}
La funci贸n: 驴En {Clothes : 1, Furniture : 1} hay un Furniture? Como si hay, entonces  se incrementa Furniture { Furniture : 2}, se cumpli贸 el lado izquierdo */

console.log(countOcurrences(categoryCount));
//La salida queda: {Clothes : 1, Furniture : 2}

Si quieren que sirva lo de legend, lo deben pasar por dentro de plugins: { legend {鈥}, as铆 dice los docs

una cosa es saber y otra totalmente distinta es ense帽ar, deben evaluar que tipo de estrategias son m谩s pedag贸gicas para facilitar el aprendizaje tienen dev麓s muy buenos pero eso no lo hace buenos profes.

Muy buena la librer铆a chart-js!! 馃憣

Alguien podr矛a explicarme como se est谩 implementando Reduce en esta clase? La verdad es que no se explic贸 para nada鈥 estoy muy confundido

Hace tiempo me mentalice que estos cursos eran para tener una idea general de c贸mo funcionan est谩s tecnolog铆as, de esta forma no se me hace tan frustrante verlos, porque la verdad es que no explica nada鈥

Podemos usar el siguiente c贸digo para hacerlo de manera m谩s legible reducir un arreglo que tiene elementos repetidos para obtener otro arreglo con los elementos apareciendo una sola vez en dicho array:
.

const categories = Array.from(new Set([
    "categoria-1",
    "categoria-1",
    "categoria-1",

    "categoria-2",
    "categoria-2",
    "categoria-2",

    "categoria-3",
    "categoria-3",
    "categoria-3",
]))

console.log(categories)

//output: ["categoria-1", "categoria-2", "categoria-3"]

.
En el c贸digo del proyecto ser铆a algo as铆:
.

const categories =  new Set(categoryCount);
//Luego "categories" se utiliza como data

.
Espero a haber ayudado馃榿馃挌

El 鈥渙ffset鈥 en la primera paginaci贸n prefiero ponerlo en 0 para que empiece a hacer fetch desde el elemento 0 del array.

Muy genial esta clase

Si alguien tiene en error en la parte de Chart.register(), cambielon a chartJS.register().

Me estoy rompiendo la cabeza por no poder entender por que tengo este error:

la parte del codigo correspondiente esta tal cual la hizo Oscar:

 const categoryNames = products?.data.map((product) => product.category);
  const categoryCount = categoryNames?.map((category) => category.name);

Lo mas raro, es que cuando comento ambas lineas, y las voy descomentando una a la vez, no me tira ese error, pero no me muestra el dashboard. En el momento que refresco la pagina, nuevamente aparece este error.
Ayuda por favor 馃槮

M谩s Simple?


.
Para hacer m谩s comprensible la l贸gica para contar la frecuencia de ocurrencia de cada categor铆a, he simplificado el callmack del m茅todo reduce de las siguiente manera:
Recuerden que tambi茅n se puede acceder al valor de una clave en un objeto de esta manera:

  • objectName[keyName]
  //Logic for the chart
  const categoryNames = products?.map((product) => product.category.name);

  const reducer = (acumulatorObject, current) => {
      if  ( acumulatorObject[current] ) {
        acumulatorObject[current] += 1 //Si la categoria actual 'current' ya exist铆a en el objeto acumulador, entonces incrementamos uno a su valor.
      } else {
        acumulatorObject[current] = 1 //Si no exist铆a, creamos la clave y le asignamos el valor de uno.
      }
      return acumulatorObject; //retornamos el objeto acumulador actualizado.
  };
  const categoryOccurence = categoryNames.reduce(reducer, {})

  const data = {
    datasets: [
      {
        label: 'Categories',
        data: categoryOccurence,
        borderWidth: 2,
        backgroundColor: ['#d32244', '#c0c0c0', '#50AF95', '#f3ba2f', '#2a71d0'],
      },
    ],
  };

Gracias a los compa帽eros cuyos comentarios anteriores y me ayudaron a entenderlo 馃槂

tambi茅n podemos evitarnos crear un nuevo array en una nueva linea de c贸digo de esta forma

const categories = products?.map(product => product?.category).map(category => category.name);

y lo pasar铆amos igual

const data = {
    datasets: [{
    label: 'Categories',
    data: countOccurrences(categories), // **
    borderWidth: 2,
    backgroundColor: ['#ffbb11','#c0c0c0', '#50AF95', 'f3ba2f', '#2a71d0']
    }]
}

o incluso evitarnos crear un nuevo arreglo y una nueva funcion, de esta forma

const categories = products?.map(product => product?.category).map(category => category.name).reduce((prev, curr) => ((prev[curr] = ++prev[curr] || 1), prev), {});

y lo pasar铆amos as铆

const data = {
    datasets: [{
    label: 'Categories',
    data: categories,
    borderWidth: 2,
    backgroundColor: ['#ffbb11','#c0c0c0', '#50AF95', 'f3ba2f', '#2a71d0']
    }]
}

Chart.js

Creo que la API deber铆a resetearse a la data por default, si es que hay alguna manera. No se si la gente lo har谩 con intenci贸n pero con tanta data basura se termina da帽ando la misma API para los ejemplos.