SisdaiBarras ​

El componente <SisdaiBarras/> permite construir gráficos de barras. A continuación, se detalla su uso y configuración:

Ejemplo de implementación:

html
<SisdaiGraficas>
  <SisdaiBarras
    :datos="datos"
    :variables="variables"
    :nombre_indice="'nombre'"
  >
  </SisdaiBarras>
</SisdaiGraficas>

API ​

Propiedades ​

  • datos: Conjunto de datos a visualizar.Consiste en una arreglo de objetos en dónde cada uno corresponde a una categoría principal. Estos objetos contienen la información necesaria para construir una barra, la cual puede estar conformada por otros rectángulos apilados o bien por un conjunto de barras agrupadas.
    • Tipo: Array
    • Valor predeterminado: undefined
    • Requerido: Sí

Ejemplo de datos:

json
[
  { "categoria": "aguascalientes", "cantidad_1": 100, "cantidad_2": 100 },
  { "categoria": "baja_california", "cantidad_1": 80, "cantidad_2": 50 },
  { "categoria": "baja_california_sur", "cantidad_1": 20, "cantidad_2": 90 },
  { "categoria": "zacatecas", "cantidad_1": 20, "cantidad_2": 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 archivo .csv con la siguiente estructura equivalente:

categoriacantidad_1cantidad_2
aguascalientes100100
baja_california8050
baja_california_sur2090
zacatecas2015

En este ejemplo, categoria representa la categoría principal y cantidad_1 y cantidad_2 corresponden a los valores numéricos que representa la magnitud de dichas subcategorías. Cabe mencionar que el nombre de las claves en los diccionarios (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 permiten especificar el nombre de las claves (o columnas).

  • variables: Arreglo de objetos en donde cada uno contiene información de las subcategorías incluidas en el conjunto de datos, así como sus respectivos colores.

    • Tipo: Array

    • Valor predeterminado: undefined

    • Requerido: Sí

      Por ejemplo:

      json
      [
  {
    "id": "cantidad_1",
    "nombre": "Cantidad 1",
    "color": "pink"
  },
  {
    "id": "cantidad_2",
    "nombre": "Cantidad 2",
    "color": "orange"
  }
]

      Esta propiedad incluye un validador para verificar que todos los objetos contengan las siguiente 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: especifica la clave que se utiliza para las categorías principales. Por defecto es "categoria" pero si los datos usan otro nombre, esta propiedad debe especificarse.

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

  • separacion: determina el espacio en blanco entre barras. El valor oscila entre 0 y 1. Por defecto es 0.2 y significa que el 20% de la gráfica será espacio en blanco.

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

  • acomodo: define cómo se mostrarán las barras cuando hay múltiples subcategorías. Admite los valores "apiladas" o "agrupadas".

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

  • padding_agrupadas: ajusta la separación entre barras agrupadas, con valores entre 0 y 1. Para ver su efecto, se debe tener la propiedad acomodo en "agrupadas". Por defecto es 0.1, lo cual significa que para un subgrupo barras el 10% será espacio en blanco.

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

  • 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 dona"
    • 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 los datos.
  • creaBarras: 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 barras.

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.

  • escalaBanda: Es la función de D3 d3.scaleBand que se emplea en el eje horizontal. Es útil cuando se desean agregar elementos al gráfico que se basen en la escala categórica

  • escalaSubBanda: Es la función de D3 d3.scaleBand que se emplea en el eje horizontal cuando la la propiedad acomodo toma el valor de "agrupadas". Esta escala controla la separación entre las barras dentro de cada grupo, permitiendo que las subcategorías se visualicen de manera agrupada.

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

Ejemplos ​

vue
<script setup>
import { ref } from 'vue'
const lasBarras = ref()
const variablesCheckeadas = ref()

const variables = ref([
  { id: 'predeterminado_1', nombre: 'Predeterminado 1', color: '#000565' },
  { id: 'predeterminado_2', nombre: 'Predeterminado 2', color: '#4974F3' },
])
</script>
<template>
  <SisdaiGraficas
    :titulo_eje_y="'Título de eje Y'"
    :titulo_eje_x="'Título de eje X'"
    :margenes="{ arriba: 10, abajo: 20, derecha: 30, izquierda: 40 }"
  >
    <template #panel-encabezado-vis>
      <div>
        <p class="vis-titulo-visualizacion">Título de visualización</p>
        <p class="vis-fecha-actualizacion">Ultima actualización: 14/05/2023</p>
        <p class="vis-instruccional">
          Descripción o texto instruccional. Pasa el cursor por encima de la
          gráfica para más información.
        </p>
      </div>
    </template>
    <template #globo-informacion>
      <SisdaiGraficasGloboInfo :ancho="240">
        <p>
          {{ lasBarras?.datos_hover?.categoria }} <br />
          <span
            class="globo-informacion-punto-color"
            :style="{
              background: '#000565',
            }"
          ></span>
          <b> Predeterminado 1</b>:
          {{ lasBarras?.datos_hover?.predeterminado_1.toLocaleString('en') }}
          <br />
          <span
            class="globo-informacion-punto-color"
            :style="{
              background: '#4974F3',
            }"
          ></span>
          <b> Predeterminado 2</b>:
          {{ lasBarras?.datos_hover?.predeterminado_2.toLocaleString('en') }}
          <br />
        </p>
      </SisdaiGraficasGloboInfo>
    </template>
    <SisdaiBarras
      ref="lasBarras"
      :datos="[
        {
          predeterminado_1: 4500,
          predeterminado_2: 3700,
          categoria: '2018',
        },
        {
          predeterminado_1: 1000,
          predeterminado_2: 4400,
          categoria: '2019',
        },
        {
          predeterminado_1: 2100,
          predeterminado_2: 4300,
          categoria: '2020',
        },
        {
          predeterminado_1: 6000,
          predeterminado_2: 1200,
          categoria: '2021',
        },
        {
          predeterminado_1: 3000,
          predeterminado_2: 3000,
          categoria: '2022',
        },
      ]"
      :variables="
        variablesCheckeadas ? variablesCheckeadas.variables_activas : variables
      "
      :nombre_indice="'categoria'"
    />
    <template #panel-pie-vis>
      <div>
        <p class="vis-titulo-leyenda">Título de la leyenda</p>
        <SisdaiChecks
          ref="variablesCheckeadas"
          :variables="variables"
        ></SisdaiChecks>
      </div>
    </template>
  </SisdaiGraficas>
</template>
vue
<script setup>
import { ref } from 'vue'
const lasBarras = ref()
const variablesCheckeadas = ref()

const variables = ref([
  { id: 'hasta_45', nombre: 'Hata 45 años', color: '#1BB584' },
  { id: 'de_46_60', nombre: 'De 46 a 60 años', color: '#409FFF' },
  { id: 'mas_de_60', nombre: 'Más de 60 años', color: '#6D6DFC' },
])
</script>
<template>
  <SisdaiGraficas
    :titulo_eje_y="'Título de eje Y'"
    :titulo_eje_x="'Título de eje X'"
    :margenes="{ arriba: 10, abajo: 50, derecha: 30, izquierda: 45 }"
  >
    <template #panel-encabezado-vis>
      <div>
        <p class="vis-titulo-visualizacion">Título de visualización</p>
        <p class="vis-fecha-actualizacion">Ultima actualización: 14/05/2023</p>
        <p class="vis-instruccional">
          Descripción o texto instruccional. Pasa el cursor por encima de la
          gráfica para más información.
        </p>
      </div>
    </template>
    <template #globo-informacion>
      <SisdaiGraficasGloboInfo :ancho="230">
        <p>
          <b> {{ lasBarras?.datos_hover?.categoria }} </b><br />
          <span
            class="globo-informacion-punto-color"
            :style="{
              background: '#1BB584',
            }"
          ></span>
          <b> Hasta 45 años</b>:
          {{ lasBarras?.datos_hover?.hasta_45.toLocaleString('en') }}
          <br />
          <span
            class="globo-informacion-punto-color"
            :style="{
              background: '#409FFF',
            }"
          ></span>
          <b> De 46 a 60 años</b>:
          {{ lasBarras?.datos_hover?.de_46_60.toLocaleString('en') }} <br />
          <span
            class="globo-informacion-punto-color"
            :style="{
              background: '#6D6DFC',
            }"
          ></span>
          <b> Más de 60 años</b>:
          {{ lasBarras?.datos_hover?.mas_de_60.toLocaleString('en') }}
        </p>
      </SisdaiGraficasGloboInfo>
    </template>
    <SisdaiBarras
      ref="lasBarras"
      :datos="[
        {
          hasta_45: 10000,
          de_46_60: 4500,
          mas_de_60: 2700,
          categoria: 'Candidatas',
        },
        {
          hasta_45: 9200,
          de_46_60: 4400,
          mas_de_60: 2600,
          categoria: 'Nivel 1',
        },
        {
          hasta_45: 9100,
          de_46_60: 4300,
          mas_de_60: 2500,
          categoria: 'Nivel 2',
        },
        {
          hasta_45: 9000,
          de_46_60: 4200,
          mas_de_60: 2400,
          categoria: 'Nivel 3',
        },
        {
          hasta_45: 8900,
          de_46_60: 4100,
          mas_de_60: 2300,
          categoria: 'Eméritas',
        },
      ]"
      :variables="
        variablesCheckeadas ? variablesCheckeadas.variables_activas : variables
      "
      :acomodo="'agrupadas'"
      :angulo_etiquetas_eje_x="-30"
      :nombre_indice="'categoria'"
    />
    <template #panel-pie-vis>
      <div>
        <p class="vis-titulo-leyenda">Título de la leyenda</p>
        <SisdaiChecks
          ref="variablesCheckeadas"
          :variables="variables"
        ></SisdaiChecks>
      </div>
    </template>
  </SisdaiGraficas>
</template>