SisdaiSeriesTiempo ​

El componente <SisdaiSeriesTiempo/> sirve para graficar datos temporales, permitiendo visualizar la evolución de valores a lo largo del tiempo. A continuación, se detalla su uso y configuración.

Ejemplo de implementación:

<SisdaiGraficas>
  <SisdaiSeriesTiempo
    :datos="datos"
    :variables="variables"
    :formato_temporal="'%d/%m/%Y'"
    :nombre_indice="'nombre_fecha'"
  >
  </SisdaiSeriesTiempo>
</SisdaiGraficas>

API ​

Propiedades ​

• datos: Conjunto de datos a visualizar. Consiste en un arreglo de objetos en dónde cada objeto está asociado a una fecha y a los valores muestreados vinculados a dicha fecha.

• Tipo: Array

• Valor predeterminado: undefined

• Requerido: Sí

Ejemplo de datos:

json

[
  { "fecha": "01-01-2021", "ags": 100, "bc": 100 },
  { "fecha": "01-02-2021", "ags": 80, "bc": 50 },
  { "fecha": "01-03-2021", "ags": 20, "bc": 90 },
  { "fecha": "01-04-2021", "ags": 20, "bc": 15 }
]

El arreglo mostrado anteriormente puede ser el objeto resultante de la importación de datos mediante la biblioteca D3.js o utilizando algún complemento (plugin) como plugin-dsv, para procesar un un archivo .csv con la siguiente estructura equivalente:

fecha	ags	bc
01-01-2021	100	100
01-02-2021	80	50
01-03-2021	20	90
01-04-2021	20	15

Cabe mencionar que los nombres de las claves en los objetos (o de las columnas desde el punto de vista de la tabla) no necesariamente deben coincidir con los del ejemplo mostrado. Las propiedades `variables` y `nombre_indice` descritas a continuación nos permiten especificar el nombre de las claves (o columnas).

• variables: Arreglo de objetos que contienen la información de las series de tiempo representadas en los datos.

  • Tipo: Array
  • Valor predeterminado: undefined
  • Requerido: Sí

En relación con el ejemplo empleado en datos, variables podría tener la siguiente estructura:

json

[
  {
    "id": "ags",
    "nombre": "Aguascalientes",
    "color": "pink"
  },
  {
    "id": "bc",
    "nombre": "Baja California",
    "color": "orange"
  }
]

Esta propiedad incluye un validador para verificar que todos los objetos contengan las siguientes tres claves:

• id: su valor es un String que debe coincidir con alguna subcategoría de datos, equivalente a uno de los nombres de las columnas que contienen información numérica.
• nombre: su valor es un String que proporciona una descriçión más detallada sobre el id y que puede ser empleado para globos de información.
• color: Es un String que define el color de la serie especificado en formatos RGB, hexadecimal u otro formato reconocido por CSS.

• nombre_indice: Especifica la clave empleada para la columna temporal. Por defecto es "fecha" y con el ejemplo anterior de datos podría no especificarse esta propiedad, pero si datos emplea otra clave para la temporalidad, esta propiedad tendrá que especificarse.

  • Tipo: String
  • Valor predeterminado: "fecha"
  • Requerido: Sí

• formato_temporal: Especifica el formato de las fechas en los datos. Este formato es procesado por la función de D3 d3.timeParse y que sirve para transformar un formato de texto a un formato temporal dentro del contexto de JavaScript. En esta documentación se explica cómo especificar formatos para D3.

  • Tipo: String
  • Valor predeterminado: "%d-%m-%Y"
  • Requerido: Sí

• alineacion_eje_y: determina la posición del eje vertical. Las opciones válidas son 'izquierda' o 'derecha'.

  • Tipo: String
  • Valor predeterminado: "izquierda"
  • Requerido: No

• angulo_etiquetas_eje_y: es un valor numérico entre -90 y 90 que indica el ángulo de rotación de las etiquetas del eje vertical.

  • Tipo: Number
  • Valor predeterminado: 0
  • Requerido: No

• angulo_etiquetas_eje_x: es un valor numérico entre -90 que indica el ángulo de rotación de las etiquetas eje horizontal.

  • Tipo: Number
  • Valor predeterminado: 0
  • Requerido: No

• tabla_caption: es un texto que se inserta en el elemento <caption> de la tabla asociada a la gráfica.

  • Tipo: String
  • Valor predeterminado: "Tabla de datos de la gráfica de series de tiempo"
  • Requerido: No

Métodos ​

• calcularEscalas: Este método se ejecuta al montar el componente o cuando se detectan cambios en las propiedadesdatos, variables o en las dimensiones del componente contenedor <SisdaiGraficas>. Calcula escalas necesarias para graficar los datos.
• creaSeries: Este método se ejecuta al montar el componente o cuando se detectan cambios en las propiedades datos, variables o en las dimensiones del componente contenedor <SisdaiGraficas> .Crea y actualiza el gráfico de series de tiempo.

Propiedades expuestas ​

• datos_hover: propiedad reactiva que se actualiza según la posición del cursor cuando se usa el slot globo-informacion.Devuelve un Object con los datos asociados a la fecha más cercana indicada por el cursor. Generalmente se usa esta propiedad para llenar el componente de SisdaiGraficasGloboInfo con información.
• escalaTemporal: Es la función de D3 d3.scaleTime que se emplea en el eje horizontal. Es útil cuando se desean agregar elementos al gráfico que se basen en la escala temporal.
• escalaLineal: Es la función de D3 d3.scaleLinear que se emplea en el eje vertical. Es útil cuando se desean agregar elementos al gráfico que dependan de esta escala.
• conversionTemporal: Es la función de D3 d3.timeParse que tiene como argumento el formato_temporal que se haya especificado en las propiedades. Puede ser útil cuando se desea agregar elementos usando la escalaTemporal y antes de ello los argumentos de dicha escala deben convertirse de String a un tipo de objeto Date.

Ejemplos ​

<script setup>
import { ref } from 'vue'
const laSerie = ref()
</script>
<template>
  <SisdaiGraficas
    :titulo_eje_y="'título del eje y'"
    :titulo_eje_x="'título del eje x'"
    :margenes="{ arriba: 30, abajo: 70, derecha: 30, izquierda: 40 }"
  >
    <template #globo-informacion>
      <SisdaiGraficasGloboInfo :ancho="200">
        <p>
          <span
            class="globo-informacion-punto-color"
            :style="{ background: laSerie?.datos_hover?.color }"
          ></span>

          {{ laSerie?.datos_hover?.nombre }}:
          {{ laSerie?.datos_hover?.[laSerie?.datos_hover?.id] }}
        </p>
      </SisdaiGraficasGloboInfo>
    </template>
    <SisdaiSeriesTiempo
      ref="laSerie"
      :datos="[
        { fecha: '01-01-2015', cantidad_1: 100, cantidad_2: 10 },
        { fecha: '01-01-2016', cantidad_1: 80, cantidad_2: 20 },
        { fecha: '01-01-2017', cantidad_1: 50, cantidad_2: 30 },
        { fecha: '01-01-2018', cantidad_1: 100, cantidad_2: 40 },
        { fecha: '01-01-2019', cantidad_1: 80, cantidad_2: 35 },
        { fecha: '01-01-2020', cantidad_1: 40, cantidad_2: 24 },
        { fecha: '01-01-2021', cantidad_1: 70, cantidad_2: 50 },
      ]"
      :variables="[
        {
          id: 'cantidad_1',
          nombre: 'Cantidad 1',
          color: 'blue',
        },
        {
          id: 'cantidad_2',
          nombre: 'Cantidad 1',
          color: 'red',
        },
      ]"
      :nombre_indice="'fecha'"
      :angulo_etiquetas_eje_x="-45"
    />
  </SisdaiGraficas>
</template>

<script setup>
import { ref, watch } from 'vue'
import numero_de_conglomerados from '../../assets/datos/numero_de_conglomerados.json'
const datos = ref(numero_de_conglomerados)
const variables = ref([
  {
    id: 'num_conglomerados_no_acum',
    nombre: 'No acumulado',
    color: '#B726FC',
  },
])

const visualizando = ref('num_conglomerados_no_acum')
watch(visualizando, nv => {
  if (nv === 'num_conglomerados_no_acum') {
    variables.value = [
      {
        id: 'num_conglomerados_no_acum',
        nombre: 'No acumulado',
        color: '#B726FC',
      },
    ]
  } else {
    variables.value = [
      {
        id: 'num_conglomerados_acum',
        nombre: 'Acumulado',
        color: '#7C38FB',
      },
    ]
  }
})
</script>
<template>
  <SisdaiGraficas
    class="con-panel-encabezado-vis"
    :titulo_eje_y="'título del eje y'"
    :titulo_eje_x="'título del eje x'"
    :margenes="{ arriba: 30, abajo: 70, derecha: 30, izquierda: 40 }"
  >
    <template #panel-encabezado-vis>
      <div>
        <button
          class="boton-chico"
          @click="
            visualizando === 'num_conglomerados_no_acum'
              ? (visualizando = 'num_conglomerados_acum')
              : (visualizando = 'num_conglomerados_no_acum')
          "
        >
          Cambiar variable
        </button>
      </div>
    </template>
    <SisdaiSeriesTiempo
      :datos="datos"
      :variables="variables"
      :angulo_etiquetas_eje_x="-45"
      :nombre_indice="'anio_mes'"
      :formato_temporal="'%Y-%m'"
    />
  </SisdaiGraficas>
</template>

<script setup>
import { onMounted, ref, watch } from 'vue'
import numero_de_conglomerados from '../../assets/datos/resistencia_por_ARV_contra_tiempo_pivot.json'
const datos = ref(numero_de_conglomerados)

const miGrafica = ref(),
  rectangulo = ref(),
  serieDeTiempo = ref()
onMounted(() => {
  rectangulo.value = miGrafica.value.grupoFrente.append('rect')
})
watch(
  () => serieDeTiempo.value?.escalaLineal,
  nv => {
    if (nv.range()[0] > 0) {
      rectangulo.value
        .attr(
          'width',
          serieDeTiempo.value.escalaTemporal(
            serieDeTiempo.value.conversionTemporal('2020-07')
          ) -
            serieDeTiempo.value.escalaTemporal(
              serieDeTiempo.value.conversionTemporal('2020-03')
            )
        )
        .attr('height', miGrafica.value.grafica()._grupoVis.alto)
        .attr('y', 0)
        .attr(
          'x',
          serieDeTiempo.value.escalaTemporal(
            serieDeTiempo.value.conversionTemporal('2020-03')
          )
        )
        .style('fill', 'rgba(180,180,180,1)')
    }
  }
)
</script>
<template>
  <SisdaiGraficas
    ref="miGrafica"
    class="con-panel-encabezado-vis"
    :titulo_eje_y="'Resistencia (%)'"
    :titulo_eje_x="'Fecha'"
    :margenes="{ arriba: 30, abajo: 70, derecha: 30, izquierda: 40 }"
  >
    <template #panel-encabezado-vis> </template>
    <SisdaiSeriesTiempo
      ref="serieDeTiempo"
      :datos="datos"
      :variables="[
        { id: 'Compleja', nombre: 'Compleja', color: '#445DE1' },
        { id: 'INSTI', nombre: 'INSTI', color: '#F8C63D' },
        { id: 'NNRTI', nombre: 'NNRTI', color: '#FF2112' },
        { id: 'NRTI', nombre: 'NRTI', color: '#E98F41' },
        { id: 'PI', nombre: 'PI', color: '#A52424' },
      ]"
      :angulo_etiquetas_eje_x="-45"
      :nombre_indice="'fecha_toma'"
      :formato_temporal="'%Y-%m'"
    />
  </SisdaiGraficas>
</template>