SisdaiAreasApiladasOrdenadas ​

El componente <SisdaiAreasApiladasOrdenadas/> se utiliza para graficar datos temporales de distintas categorías que conforman una totalidad y que, además, se ordenan de mayor a menor a lo largo del tiempo.

Ejemplo de implementación:

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

API ​

Propiedades ​

  • datos: Conjunto de datos a visualizar. Es 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 anterior podría ser el resultado de importar un archivo .csv usando la biblioteca D3.js o algún plugin como plugin-dsv con la siguiente estructura:

fechaagsbc
01-01-2021100100
01-02-20218050
01-03-20212090
01-04-20212015
Cabe mencionar que el nombre 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. Las propiedades `variables` y `nombre_indice` permiten especificar el nombre de las claves (o columnas).

  • variables: Arreglo de objetos en donde cada uno contiene información de las variables o series de tiempo incluidas en el conjunto de 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 un nombre de las columnas con valores numéricos.
  • nombre: es un String que proporciona una descripción más detallada sobre el id y que puede ser útil para mostrar globos de información.
  • color: es un String que define el color de cada categoría, en formato RGB, hexadecimal u otro formato reconocido por CSS.
  • nombre_indice: define la clave que se utiliza para la columna temporal.Por defecto es "fecha", pero si los datos usan otro nombre, esta propiedad debe especificarse.
    • Tipo: String
    • Valor predeterminado: "fecha"
    • Requerido: Sí
  • formato_temporal: Especifica el formato temporal de la variable de tiempo. Es un parámetro que se introduce a 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
  • ancho_barra: Valor entre 0 y 1 que especifica la fracción del espacio total que ocupan las barras. El valor predeterminado es 0.3. Sin embargo, si la fracción resulta en barras de más de 20px de ancho, el componente limitará el ancho a 20px para evitar visualizaciones desproporcionadas.
    • Tipo: Number
    • Valor predeterminado: 0.3
    • 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 áreas apiladas ordenadas"
    • Requerido: No

Métodos ​

  • calcularEscalas: 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>. Calcula escalas necesarias para graficar.

  • creaAreas: 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 áreas apiladas ordenadas.

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 ​

vue
<script setup>
import { ref } from 'vue'
const misAreasApiladasOrdenadas = 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">
        <template>
          <p>{{ misAreasApiladasOrdenadas?.datos_hover?.fecha }}</p>
          <p>
            Cantidad: {{ misAreasApiladasOrdenadas?.datos_hover?.cantidad_1 }}
          </p>
        </template>
      </SisdaiGraficasGloboInfo>
    </template>
    <SisdaiAreasApiladasOrdenadas
      ref="misAreasApiladasOrdenadas"
      :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',
        },
      ]"
      :nombre_indice="'fecha'"
      :angulo_etiquetas_eje_x="-45"
    />
  </SisdaiGraficas>
</template>
vue
<script setup>
import { computed, ref } from 'vue'
import datos_consorcio from '../../assets/datos/consorcio_variantes_todas.json'
const lasAreasApiladas = ref()
const datos = ref(datos_consorcio)
const variables = ref([
  { id: 'Omicron', color: '#FFCE00', nombre: 'Omicron' },
  { id: 'Delta', color: '#FA5600', nombre: 'Delta' },
  { id: 'Gamma', color: '#C7690D', nombre: 'Gamma' },
  { id: 'Beta', color: '#FF9F4D', nombre: 'Beta' },
  { id: 'Alpha', color: '#FFAC99', nombre: 'Alpha' },
  { id: 'Mu', color: '#29037B', nombre: 'Mu' },
  { id: 'Lambda', color: '#A359D9', nombre: 'Lambda' },
  {
    id: 'variantes_restantes',
    color: '#bcbcbc',
    nombre: 'Variantes restantes',
  },
])
const variablesCheckeadas = ref()
const variablesDinamicas = computed(() =>
  variablesCheckeadas.value
    ? variablesCheckeadas.value?.variables_activas
    : variables.value
)
</script>
<template>
  <SisdaiGraficas
    :titulo_eje_y="'título del eje y'"
    :titulo_eje_x="'título del eje x'"
    :margenes="{ arriba: 10, abajo: 40, derecha: 30, izquierda: 40 }"
  >
    <template #globo-informacion>
      <SisdaiGraficasGloboInfo :ancho="200">
        <p>{{ lasAreasApiladas?.datos_hover?.fecha_1 }}</p>
        <p>
          <span
            v-for="(variable, i) in variablesDinamicas"
            :key="i"
          >
            <span
              class="globo-informacion-punto-color"
              :style="{ background: variable.color }"
            ></span>
            {{ variable.nombre }}:
            {{ lasAreasApiladas?.datos_hover?.[variable.id] }}
            <br />
          </span>
        </p>
      </SisdaiGraficasGloboInfo>
    </template>
    <template #panel-encabezado-vis>
      <div>
        <p class="vis-titulo-visualizacion">
          Evolución de variantes del virus SARS-CoV-2
        </p>
        <p class="vis-fecha-actualizacion">Última actualización: 14/05/2023</p>
      </div>
    </template>
    <SisdaiAreasApiladasOrdenadas
      ref="lasAreasApiladas"
      :datos="datos"
      :variables="variablesDinamicas"
      :angulo_etiquetas_eje_x="-45"
      :nombre_indice="'fecha_2'"
      :formato_temporal="'%d/%m/%Y'"
    />
    <template #panel-pie-vis>
      <div>
        <div class="vis-titulo-leyenda">Variantes del virus SARS-CoV-2</div>
        <SisdaiChecks
          ref="variablesCheckeadas"
          :variables="variables"
        ></SisdaiChecks>
      </div>
    </template>
  </SisdaiGraficas>
</template>