SisdaiDona ​

El componente <SisdaiDona/> se utiliza para representar la distribución de una totalidad entre diferentes categorías mediante gráficos de dona o pastel. A continuación se detalla su uso y configuración.

Ejemplo de implementación:

html
<SisdaiGraficas>
  <SisdaiDona
    :datos="datos"
    :variables="variables"
  >
  </SisdaiDona>
</SisdaiGraficas>

API ​

Propiedades ​

  • datos: Conjunto de datos a visualizar.Consiste en un arreglo de objetos en dónde cada objeto corresponde a un segmento de la dona y debe incluir una clave asociada al nombre de la categoría y otra clave asociada al número que representa el segmento.
    • Tipo: Array
    • Valor predeterminado: undefined
    • Requerido: Sí

Ejemplo de datos:

json
[
  { "categoria": "cat_A", "cantidad": 210 },
  { "categoria": "cat_B", "cantidad": 120 },
  { "categoria": "cat_C", "cantidad": 85 },
  { "categoria": "cat_D", "cantidad": 52 }
]

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
cat_A210
cat_B120
cat_C85
cat_D52

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, nombre_indice y clave_cantidad descritas a continuación nos permiten especificar el nombre de las claves (o columnas).

  • variables: Arreglo de objetos que contienen información sobre las categorías, como un id que debe coincidir con los identificadores o nombres que se usan en datospara cada segmento . También tienen información sobre el color y un nombre que puede ser alternativo al que se usa en datos:

    • Tipo: Array
    • Valor predeterminado: undefined
    • Requerido: Sí
      json
      [
  {
    "id": "cat_A",
    "nombre": "Categoría A",
    "color": "#FFCE00"
  },
  {
    "id": "cat_B",
    "nombre": "Categoría B",
    "color": "#FA5600"
  },
  {
    "id": "cat_C",
    "nombre": "Categoría C",
    "color": "#C7690D"
  },
  {
    "id": "cat_D",
    "nombre": "Categoría D",
    "color": "#FF9F4D"
  }
]

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

      • id: su valor es un String y debe coincidir con alguna categoría de datos.
      • nombre: su valor es un String que proporciona una descripció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 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: "categoria"
    • Requerido: Sí

  • clave_cantidad: Especifica el nombre de la clave empleada para referir la cantidad o valor asociada a cada segmento de la dona u categoría. Por defecto es "cantidad" y en el ejemplo anterior no tendría que especificarse, pero si en datos se usará una clave distinta para referir la cantidad, dicha clave tendrá que especificarse aquí.

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

  • radio_interno:Define el radio interno de la dona, que controla el tamaño del hueco central. Es un valor numérico entre 0 y 0.5. Si se establece en 0, se obtendrá una gráfica de pastel.

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

  • radio_externo: Define el radio externo de la dona y debe ser mayor que el radio interno. Es un valor numérico entre 0 y 0.5. Ambas propiedades en conjunto sirven para calibrar el grosor y tamaño de la dona.

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

  • variables_visibles: Arreglo opcional que especifica qué segmentos (identificador por id) serán mostrados en el gráfico. Los segmentos que no estén incluidos en el arreglo, no se visualizarán.

    • Tipo: Array
    • Valor predeterminado: undefined
    • Requerido: No

  • color_dona_fondo: Especifica el color de fondo de la dona para las áreas no asignadas a ningún segmento. Por defecto utiliza la variable de sisdai-css "var(--fondo)", pero se puede definir cualquier formato de color admitido por CSS.

    • Tipo: String
    • Valor predeterminado: "var(--fondo)"
    • 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

Ejemplos ​

vue
<script setup>
import { ref } from 'vue'
const laDona = ref()
const variables = ref([
  { id: 'fut', nombre: 'Futbol', color: '#fb4c56' },
  { id: 'natacion', nombre: 'Natación', color: '#023b88' },
  { id: 'basquet', nombre: 'Básquetbol', color: '#19a7ac' },
  { id: 'ciclismo', nombre: 'Ciclismo', color: '#046b4f' },
  { id: 'box', nombre: 'Boxeo', color: '#f9af05' },
])
const laGrafica = ref()
</script>
<template>
  <SisdaiGraficas
    :margenes="{ arriba: 0, abajo: 0, derecha: 0, izquierda: 0 }"
    ref="laGrafica"
  >
    <template #globo-informacion>
      <SisdaiGraficasGloboInfo :ancho="216">
        <p>
          <span
            class="globo-informacion-punto-color"
            :style="{
              background: variables.filter(
                d => d.id === laDona?.datos_hover?.categoria
              )[0]?.color,
            }"
          ></span
          >{{
            variables.filter(d => d.id === laDona?.datos_hover?.categoria)[0]
              ?.nombre
          }}: {{ laDona?.datos_hover?.cantidad }} |
          {{ laDona?.datos_hover?.porcentaje }} %
        </p>
      </SisdaiGraficasGloboInfo>
    </template>
    <template #panel-encabezado-vis>
      <div>
        <p class="vis-titulo-visualizacion">
          Actividades deportivas realizadas por estudiantes de secundaria
        </p>
        <p class="vis-fecha-actualizacion">Última actualización: 14/05/2023</p>
        <p class="vis-instruccional">
          Se presentan las cinco actividades deportivas más practicadas por
          estudiantes de secundaria en su tiempo libre. Pasa el cursor por
          encima de cada segmento para conocer el detalle.
        </p>
      </div>
    </template>
    <SisdaiDona
      ref="laDona"
      :datos="[
        { categoria: 'fut', cantidad: 93 },
        { categoria: 'natacion', cantidad: 52 },
        { categoria: 'basquet', cantidad: 31 },
        { categoria: 'ciclismo', cantidad: 24 },
        { categoria: 'box', cantidad: 12 },
      ]"
      :variables="variables"
      :nombre_indice="'categoria'"
    />
    <template #panel-pie-vis>
      <div>
        <div v-if="laGrafica?.vistaActiva === 'grafica'">
          <p class="vis-titulo-leyenda">Actividades deportivas</p>
          <SisdaiNomenclatura :variables="variables"></SisdaiNomenclatura>
        </div>

        <p class="vis-fuente">
          Fuente: Los datos que se visualizan en este gráfico son hipotéticos
        </p>
      </div>
    </template>
  </SisdaiGraficas>
</template>
vue
<script setup>
import { ref, watch } from 'vue'
import datos_donas_1 from '../../assets/datos/donas_1.json'
import datos_donas_2 from '../../assets/datos/donas_2.json'
import datos_donas_3 from '../../assets/datos/donas_3.json'
datos_donas_2
datos_donas_3
const contador = ref(0)
const variables_1 = [
  { id: 'Variable A', color: '#FFCE00', nombre: 'Var A' },
  { id: 'Variable B', color: '#FA5600', nombre: 'Var B' },
  { id: 'Variable C', color: '#C7690D', nombre: 'Var C' },
  { id: 'Variable D', color: '#FF9F4D', nombre: 'Var D' },
  { id: 'Variable E', color: '#FFAC99', nombre: 'Var E' },
]
const variables_2 = [
  { id: 'Categoría A', color: '#253494', nombre: 'cat A' },
  { id: 'Categoría B', color: '#2c7fb8', nombre: 'cat B' },
  { id: 'Categoría C', color: '#41b6c4', nombre: 'cat C' },
  { id: 'Categoría D', color: '#7fcdbb', nombre: 'cat D' },
]
const variables_3 = [
  { id: 'Categoría 1', color: '#FFCE00', nombre: 'Var 1' },
  { id: 'Categoría 2', color: '#FA5600', nombre: 'Var 2' },
  { id: 'Categoría 3', color: '#C7690D', nombre: 'Var 3' },
]
const datos = ref(datos_donas_1)
const variables = ref(variables_1)
watch(contador, nv => {
  if (nv === 0) {
    datos.value = datos_donas_1
    variables.value = variables_1
  } else if (nv === 1) {
    datos.value = datos_donas_2
    variables.value = variables_2
  } else {
    datos.value = datos_donas_3
    variables.value = variables_3
  }
})
</script>
<template>
  <SisdaiGraficas
    :margenes="{ arriba: 10, abajo: 10, derecha: 10, izquierda: 10 }"
  >
    <template #panel-encabezado-vis>
      <div>
        <p class="vis-titulo-visualizacion">Ejemplo de donas</p>
        <button
          class="boton-chico"
          @click="contador = (contador + 1) % 3"
        >
          Cambia datos y variables
        </button>
      </div>
    </template>
    <SisdaiDona
      :datos="datos"
      :variables="variables"
      :nombre_indice="'categoria'"
    />
  </SisdaiGraficas>
</template>