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
Gracias bro!
Matías Daniel Cravero
Muy buena clase, la verdad estoy sorprendido para bien, con la cantidad de cosas que se pueden hacer de forma nativa con JS!
Yefreilee Danny Samuel Parra
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!
Alvaro Jose Bertin Sanchez
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; };
Miguel Angel Reyes Moreno
Ricardo Alexis López Cadena
¿Y esto que tiene que ver con Vue "práctico"?
Seba Cardoso
no se
Diana Martinez
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.
Julian David Alzate Cuervo
El touch como se podría implementar para versión web de la aplicación?
Julian David Alzate Cuervo
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
victor rodriguez
esta clase de conclucion para el grafico me gusto mucho, vale la pena la paciencia para aprender ok.
Jose Alejandro Pantoja Giraldo
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.
Daniel Velasquez Aguirre
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
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>
