SisdaiCajasBigotes ​

El componente <SisdaiCajasBigotes/> se utiliza para generar diagramas de cajas y bigotes que son útiles para visualizar distribuciones. A continuación se explica su uso.

Ejemplo de implementación:

html
<SisdaiGraficas>
  <SisdaiCajasBigotes
    :datos="datos"
    :variables="variables"
    :nombre_indice="'nombre_empresa'"
  >
  </SisdaiCajasBigotes>
</SisdaiGraficas>

API ​

Propiedades ​

  • datos: Conjunto de datos a visualizar. Consiste en un arreglo de objetos en dónde cada objeto corresponde a un elemento de la distribución y debe incluir una categoría y un valor numérico.
    • Tipo: Array
    • Valor predeterminado: undefined
    • Requerido: Sí

Ejemplo de datos:

json
[
  {
    "nombre_empresa": "Empresa A",
    "acciones_vendidas": 180
  },
  {
    "nombre_empresa": "Empresa B",
    "acciones_vendidas": 178
  },
  {
    "nombre_empresa": "Empresa C",
    "acciones_vendidas": 467
  },
  {
    "nombre_empresa": "Empresa A",
    "acciones_vendidas": 264
  },
...
]

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:

nombre_empresaacciones_vendidas
Empresa A180
Empresa B178
Empresa C467
Empresa A264
......

En este ejemplo, nombre_empresa indica las categorías con las que se agruparán los datos, mientras que acciones_vendidas es el valor numérico utilizado para calcular los cuartiles y otros otros elementos estadísticos de cada subconjunto de los datos. Cabe mencionar que los nombres 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 descritas a continuación nos permiten especificar el nombre de las claves (o columnas).

  • variables: Arreglo de objetos que contienen información sobre el color y el nombre de la clave asociada a la variable numérica en datos. Si consideramos el caso anterior de datos, un ejemplo de variables es:

    • Tipo: Array

    • Valor predeterminado: undefined

    • Requerido: Sí

      json
        {
    "id": "acciones_vendidas",
    "nombre": "Acciones vendidas",
    "color": "#2c7fb8"
  },

      Esta propiedad incluye un validador para verificar que el objeto contenga 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.
      • nombre: su valor 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 del diagrama especificando en formatos RGB, hexadecimal u otro formato reconocido por CSS.

  • nombre_indice:especifica la clave que se utiliza para las categorías que se usarán para agrupar al conjunto de datos. Por defecto es "categoria", pero si los datos usan otro nombre, esta propiedad debe especificarse. Con el ejemplo anterior de datos tendría que especificarse como "nombre_empresa"

    • Tipo: String
    • Valor predeterminado: "categoria"
    • 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 cajas y bigotes"
    • 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.
  • creaCajasBigotes: 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 cajas y bigotes.

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 del diagrama asociado la categoría más cercana indicada por el cursor. Los valores que devuelve el objeto corresponden a la categoría "categoria", el bigote superior "max",el tercer cuartil "q3", el promedio "promedio", la mediana "mediana", el primer cuartil "q1" y el bigote inferior "min". Generalmente se usa esta propiedad expuesta 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.

  • 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 cajasbigotesejemplos from '../../assets/datos/cajas_bigotes_ejemplo_1.json'

import { ref } from 'vue'
const datos_dinamicos = ref(cajasbigotesejemplos)
const variables_dinamicas = ref({
  id: 'acciones_vendidas',
  nombre: 'Acciones vendidas',
  color: '#2c7fb8',
})
const lasCajasBigotes = ref()
</script>

<template>
  <SisdaiGraficas
    :titulo_eje_y="'título del eje y'"
    :titulo_eje_x="'título del eje x'"
  >
    <template #globo-informacion>
      <SisdaiGraficasGloboInfo :ancho="200">
        <p>
          <b>{{ lasCajasBigotes?.datos_hover?.categoria }}</b
          ><br />
          Bigote superior: {{ lasCajasBigotes?.datos_hover?.max }}<br />
          Tercer cuartil: {{ lasCajasBigotes?.datos_hover?.q3 }}<br />
          Promedio:
          {{ lasCajasBigotes?.datos_hover?.promedio.toLocaleString('en')
          }}<br />
          Mediana: {{ lasCajasBigotes?.datos_hover?.mediana }}<br />
          Primer cuartil: {{ lasCajasBigotes?.datos_hover?.q1 }}<br />
          Bigote inferior: {{ lasCajasBigotes?.datos_hover?.min }}<br />
        </p>
      </SisdaiGraficasGloboInfo>
    </template>
    <SisdaiCajasBigotes
      ref="lasCajasBigotes"
      :datos="datos_dinamicos"
      :variables="variables_dinamicas"
      :nombre_indice="'nombre_empresa'"
    />
  </SisdaiGraficas>
</template>
vue
<script setup>
import { ref } from 'vue'
import cajasbigotesejemplos1 from '../../assets/datos/cajas_bigotes_ejemplo_1.json'
import cajasbigotesejemplos2 from '../../assets/datos/cajas_bigotes_ejemplo_2.json'
const base = ref(1)
const datos_dinamicos = ref(cajasbigotesejemplos1)
const variables_dinamicas = ref({
  id: 'acciones_vendidas',
  nombre: 'Acciones vendidas',
  color: 'red',
})
function alternaDatos() {
  if (base.value === 1) {
    variables_dinamicas.value = {
      id: 'metrica',
      nombre: 'Metrica',
      color: '#2c7fb8',
    }
    datos_dinamicos.value = cajasbigotesejemplos2

    base.value = 2
  } else {
    variables_dinamicas.value = {
      id: 'acciones_vendidas',
      nombre: 'Acciones vendidas',
      color: 'red',
    }
    datos_dinamicos.value = cajasbigotesejemplos1

    base.value = 1
  }
}
</script>

<template>
  <SisdaiGraficas
    :titulo_eje_y="'título del eje y'"
    :titulo_eje_x="'título del eje x'"
    class="con-panel-encabezado-vis"
  >
    <template #panel-encabezado-vis>
      <div>
        <p class="vis-titulo-visualizacion">Ejemplo con datos dinámicos</p>
        <p class="vis-instruccional">
          Da click en el botón para alternar la base de datos
        </p>
        <button
          @click="alternaDatos"
          class="boton-chico"
        >
          Alternar datos
        </button>
      </div>
    </template>
    <SisdaiCajasBigotes
      :datos="datos_dinamicos"
      :variables="variables_dinamicas"
      :nombre_indice="base === 1 ? 'nombre_empresa' : 'nombre_categoria'"
    />
  </SisdaiGraficas>
</template>