Creando la interacción con el gráfico

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

Clase anteriorSiguiente clase

José Daniel Calle Briceño

student•

Josue Cerron Tuesta

student•

Esto vale oro!

Sergio Castro García

student•

Gracias !!!!

José Daniel Calle Briceño

student•

Josue Cerron Tuesta

student•

Gracias bro!

Matías Daniel Cravero

student•

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

student•

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

student•

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

student•

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>

Ricardo Alexis López Cadena

student•

¿Y esto que tiene que ver con Vue "práctico"?

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.

Julian David Alzate Cuervo

student•

El touch como se podría implementar para versión web de la aplicación?

Julian David Alzate Cuervo

student•

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

student•

esta clase de conclucion para el grafico me gusto mucho, vale la pena la paciencia para aprender ok.

Jose Alejandro Pantoja Giraldo

student•

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

student•

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

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;
};

<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>

Creando la interacción con 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?