Creando la interacción con el gráfico
Contenido del curso
Creando la interacción con el gráfico
Contenido del curso
José Daniel Calle Briceño
Josue Cerron Tuesta
Sergio Castro García
José Daniel Calle Briceño
Josue Cerron Tuesta
Matías Daniel Cravero
Yefreilee Danny Samuel Parra
Alvaro Jose Bertin Sanchez
Miguel Angel Reyes Moreno
Ricardo Alexis López Cadena
Seba Cardoso
Diana Martinez
Julian David Alzate Cuervo
Julian David Alzate Cuervo
victor rodriguez
Jose Alejandro Pantoja Giraldo
Daniel Velasquez Aguirre
Esto vale oro!
Gracias !!!!
Gracias bro!
Muy buena clase, la verdad estoy sorprendido para bien, con la cantidad de cosas que se pueden hacer de forma nativa con JS!
Mas allá de si tuvo la mejor explicación o no, hay que admitir que la profesora es una genia, y ojala algún dia pueda tener los conocimientos que ella tiene, me encanta toda la clase, aunque esta bastante compleja!
Si alguien quiere hacerlo para que funcione en web tambien (cuando el cursor pase por encima de la grafica):
<svg @touchstart="tap" @touchmove="tap" @touchend="untap" @mousemove="move" @mouseleave="untap" viewBox="0 0 300 200" >
const move = (event) => { showPointer.value = true; const target = event.target; const elementWidth = target.getBoundingClientRect().width; // avoid errors if (elementWidth <= 0) { return; } const elementX = target.getBoundingClientRect().x; const mouseX = event.clientX; pointer.value = ((mouseX - elementX) * 300) / elementWidth; };
Graphic.vue:
<template> <div> <svg @touchstart="tap" @touchmove="tap" @touchend="untap" viewBox="0 0 300 200" > <line stroke="#c4c4c4" stroke-width="2" x1="0" :y1="zero" x2="300" :y2="zero" /> <polyline fill="none" stroke="#0689b0" stroke-width="2" :points="points" /> <line v-show="showPointer" stroke="#04b500" stroke-width="2" :x1="pointer" y1="0" :x2="pointer" y2="200" /> </svg> <p>Últimos 30 días</p> </div> </template> <script setup> import { defineProps, toRefs, computed, ref } from "vue"; const props = defineProps({ amounts: { type: Array, default: () => [], }, }); const { amounts } = toRefs(props); const amountToPixels = (amount) => { const min = Math.min(...amounts.value); const max = Math.max(...amounts.value); const amountAbs = amount + Math.abs(min); const minMax = Math.abs(max) + Math.abs(min); return 200 - ((amountAbs * 100) / minMax) * 2; }; const zero = computed(() => { return amountToPixels(0); }); const points = computed(() => { const total = amounts.value.length; return amounts.value.reduce((points, amount, index) => { const x = (300 / total) * (index + 1); const y = amountToPixels(amount); return `${points} ${x},${y}`; }, "0, 100"); }); const showPointer = ref(false); const pointer = ref(0); const tap = ({ target, touches }) => { showPointer.value = true; const elementWidth = target.getBoundingClientRect().width; const elementX = target.getBoundingClientRect().x; const touchX = touches[0].clientX; pointer.value = ((touchX - elementX) * 300) / elementWidth; }; const untap = () => { showPointer.value = false; }; </script> <style scoped> svg { width: 100%; } p { text-align: center; } </style>
¿Y esto que tiene que ver con Vue "práctico"?
no se
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.
El touch como se podría implementar para versión web de la aplicación?
creo que se podría usar w3js para gráficas por el estilo o alguna librería que sea open source, sin embargo es muy valioso ver alternativas como esta para conocer lo poderoso que es JS
esta clase de conclucion para el grafico me gusto mucho, vale la pena la paciencia para aprender ok.
Me intere mucho los llamados touch, pero todo el cuento de la grafica la verdad en mi caso no me ha gustado mucho q digamos.
Es muy interesante, como resolvemos estos problemas que son aplicables a la vida real, la cantidad de nuevos conceptos, eventos, funciones de JS aplicadas, y muchos usos que podemos darle. solo me queda la duda de por que el profesor multiplica los 300 y luego los divide en el elementWidth, que también es 300, y el dice por que no sabemos el tamaño del dispositivo, pero, el elementWidth es el tamaño que asignamos. es decir hace un operación de extra innecesaria? por que así fuera el width del svg variable (reactiva) el elementWidth tomaria ese valor.
tal vez no me entienda y es por esto que no solo Profesor jejeje
