Creación de las coordenadas en el gráfico

Clase 13 de 21 • Curso Práctico de Vue.js

Clase anteriorSiguiente clase

Miguel Angel Reyes Moreno

student•

Compleja la clase 😅

Felix Torres Javier Antonio

student•

Esto es lo más complejo de toda la aplicación!

Excelente!!!

Diana Martinez

student•

Hola, sin duda el componente del gráfico es el más interesante pero también el más complicado del curso, si sienten que es demasiado para ustedes, no hay ningún problema en saltarse hasta las clases del próximo componente si es necesario.

Recuerden que siempre pueden tomar el código del repositorio del curso si es necesario.

Sergio Castro García

student•

noooooooooooo esta muy interesante profesora, y lo enseñas de forma muy digerible

Sam Leonetti

student•

Para que se utilizan los "..." delante de amounts.value (Min 16:34) ??

Santiago Gil

student•

Los 3 puntos hacen referencia al spread operator, la profe dijo que para el método Math.min() y Math.max() se deben de agregar una serie de argumentos, mas no un array, es decir, de la siguiente forma:

Math.min(10, 20, 30, -20);

no de esta


const numberList = [10, 20, 30, -20];
Math.min(numberList);

El spread operator lo que hace es que distribuye los elementos de un elemento iterable en el contexto en el que se encuentre...

En este enlace escribí un post específicamente dedicado al uso del spread operator 🤗 https://www.instagram.com/p/CiYlipBLsEF/

Santiago Gil

student•

Para los que tengan la misma duda, acá ahondo un poco más acerca del spread operator:

https://flower-timpani-138.notion.site/Spread-Operator-b2d18a34e1964b81bfa2ed030e2e6149

Javier Andrés Moreno Tocarruncho

student•

🤯

Yefreilee Danny Samuel Parra

student•

Quede loco con esta clase xD, espero en algún momento poder saber tanto como la profe xD

JOSE MANUEL MONTAÑO SAENZ

student•

Si el objetivo es entrar a cada uno de los valores que el array de amounts trae, ¿por que se usa reducer() y no map()?

Roberto D Aguilar

student•

La función reduce() se utiliza en lugar de map() cuando el objetivo es obtener un único valor agregado a partir de todos los valores del array. Mientras que map() se utiliza para transformar cada elemento de un array y devolver un nuevo array con esos elementos modificados, reduce() permite realizar una operación acumulativa en todos los valores del array y retornar un único resultado. En este caso, si el objetivo es entrar a cada uno de los valores del array de amounts, reduce() podría ser útil para obtener la suma total de todos los valores, por ejemplo.

Maximiliano Chamena

student•

Hola Diana, no logré entender lo que ocurre en el: return Array(xTamaño).fill(100)... nose a que hace referencia ese 100px. gracias

Diana Martinez

student•

con Array(xTamaño) creamos un array con cierto número de elementos, y luego a ese array lo rellenamos con fill, con el valor de 100 en cada uno de los elementos del array: [100, 100, 100, ...]

Jose Alejandro Pantoja Giraldo

student•

Busquen los conceptos de:

Spread operator
Array()
.fill()
.reduce()
Math. SI quieren entender que fue lo q hizo le profe, hasta q no los buscas de una fuente q entiendas como se usan, el ejemplo no sera del todo claro

Alberto Ivan Cortez Malacara

student•

Yo hice esta variante, espero les funcione

const points = amounts.value
  .map((amount, index) => {
    const x = (index / (amounts.value.length - 1)) * 300
    const y = 90 - (amount / Math.max(...amounts.value)) * 90
    return `${x},${y}`
  })
  .join(' ')
```const points = amounts.value  .map((amount, index) => {    const x = (index / (amounts.value.length - 1)) \* 300    const y = 90 - (amount / Math.max(...amounts.value)) \* 90    return `${x},${y}`  })  .join(' ')

Alberto Ivan Cortez Malacara

student•

const points = amounts.value
  .map((amount, index) => {
    const x = (index / (amounts.value.length - 1)) * 300
    const y = 90 - (amount / Math.max(...amounts.value)) * 90
    return `${x},${y}`
  })
  .join(' ')

const points = amounts.value
  .map((amount, index) => {
    const x = (index / (amounts.value.length - 1)) * 300
    const y = 90 - (amount / Math.max(...amounts.value)) * 90
    return `${x},${y}`
  })
  .join(' ')
```const points = amounts.value  .map((amount, index) => {    const x = (index / (amounts.value.length - 1)) \* 300    const y = 90 - (amount / Math.max(...amounts.value)) \* 90    return `${x},${y}`  })  .join(' ')

const points = amounts.value
  .map((amount, index) => {
    const x = (index / (amounts.value.length - 1)) * 300
    const y = 90 - (amount / Math.max(...amounts.value)) * 90
    return `${x},${y}`
  })
  .join(' ')

Creación de las coordenadas en el gráfico

Introducción

Construye una aplicación para el control de tus gastos con Vue.js

Creación del proyecto

Setup inicial

Splashscreen

Header y contenido

Layout

Vista

Resumen de datos

Agregando formato a la moneda

Componente del historial

Lista del historial

El botón para agregar

Formulario para agregar

Gráfico

Creación del SVG del gráfico

Creación de las coordenadas en el gráfico

Creación de la lógica del gráfico

Creando la interacción con el gráfico

Modelo

Modelo de datos

Agregar y quitar

Persistencia del modelo

Últimos detalles de nuestra aplicación

Cierre

Poniendo nuestra aplicación en producción en Netlify

¿Quieres más cursos de Vue?