SisdaiAlluvial ​

El componente <SisdaiAlluvial/>, permite generar diagramas de flujo de tipo Alluvial. Es ideal para representar flujo y/o conexiones entre diferentes datos.

Ejemplo de implementación:

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

API ​

Propiedades ​

  • datos: Conjunto de datos a visualizar. Consiste en un objeto que contiene dos claves principales: "nodos" cuyo valor es un arreglo de objetos que representan cada nodo con su respectivo nombre e id, y "enlaces", que es un arreglo de objetos que define las conexiones entre los nodos, especificando la fuente, el objetivo y los valores asociados a cada enlace.

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

Ejemplo de datos:

json
{
  "nodos": [
    { "name": "Nodo 0", "id": "nodo0" },
    { "name": "Nodo 1", "id": "nodo1" },
    { "name": "Nodo 2", "id": "nodo2" },
    { "name": "Nodo 3", "id": "nodo3" }
  ],
  "enlaces": [
    { "source": "Nodo 0", "target": "Nodo 2", "value": "1" },
    { "source": "Nodo 1", "target": "Nodo 2", "value": "1" }
    { "source": "Nodo 2", "target": "Nodo 3", "value": "2" }
  ]
}

Para este tipo de visualización no se recomienda usar archivos .csv, por lo que se sugiere importar los datos desde un archivo en formato .json.

  • variables: Un arreglo de objetos que contiene la configuración gráfica para cada nodo o enlace dentro de los datos.
    • Tipo: Array
    • Valor predeterminado: undefined
    • Requerido: Sí

Ejemplo de variables:

json
[
  {
    "id": "nodo0",
    "color": "pink"
  },
  {
    "id": "nodo1",
    "color": "orange"
  },
  {
    "id": "enlaces",
    "color": "#2c7fb8"
  }
]

Esta propiedad incluye un validador que asegura que cada objeto en el arreglo contenga las siguientes dos 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 contiene información numérica.
  • color: es un String que define el color de cada categoría, en formato RGB, hexadecimal u otro formato reconocido por CSS.

Métodos ​

  • creaAlluvial: Este método crea y actualiza el diagrama cuando detecta cambios en datos, variables o en otros elementos del componente contenedor<SisdaiGraficas>, como margenes o las dimensiones del SVG.

Propiedades expuestas ​

  • datos_hover: Esta propiedad expuesta se actualiza cuando el cursor se posiciona sobre uno de los rectángulos (nodos) o en algún enlace y devuelve un Object con los datos asociados al elemento generado por D3. Generalmente se usa esta propiedad para llenar el componente de SisdaiGraficasGloboInfo con información.
    • Si el cursor está sobre un enlace, devuelve un objeto con la clave tipo: "enlace", junto con las claves target, source y value entre otros que asigna automáticamente D3.
    • Si el cursor está sobre un nodo, devuelve un objeto con la clave tipo:"nodo", además de los datos name, id y value entre otros que asigna automáticamente D3.

Ejemplos ​

El siguiente ejemplo muestra el funcionamiento del componente con un conjunto de datos simples y un globo de información condicional:

vue
<script setup>
import { ref } from 'vue'
const elAlluvial = ref()
</script>
<template>
  <SisdaiGraficas
    :margenes="{ arriba: 30, abajo: 70, derecha: 30, izquierda: 40 }"
  >
    <template #panel-encabezado-vis>
      <p class="vis-titulo-visualizacion">Ejemplo básico</p>
    </template>
    <template #globo-informacion>
      <SisdaiGraficasGloboInfo :ancho="180">
        <p v-if="elAlluvial?.datos_hover?.tipo === 'nodo'">
          {{ elAlluvial?.datos_hover?.name }} <br />
          Valor: {{ elAlluvial?.datos_hover?.value }}
        </p>
        <p v-else-if="elAlluvial?.datos_hover?.tipo === 'enlace'">
          {{ elAlluvial?.datos_hover?.source?.name }} →
          {{ elAlluvial?.datos_hover?.target?.name }}<br />
          Valor: {{ elAlluvial?.datos_hover?.value }}
        </p>
      </SisdaiGraficasGloboInfo>
    </template>
    <SisdaiAlluvial
      ref="elAlluvial"
      :datos="{
        nodos: [
          { name: 'Nodo 0', id: 'nodo0' },
          { name: 'Nodo 1', id: 'nodo1' },
          { name: 'Nodo 2', id: 'nodo2' },
        ],
        enlaces: [
          { source: 'Nodo 0', target: 'Nodo 2', value: 1 },
          { source: 'Nodo 1', target: 'Nodo 2', value: 1 },
        ],
      }"
      :variables="[
        { id: 'nodo0', color: '#2c7fb8' },
        { id: 'nodo1', color: '#2c7fb8' },
        { id: 'nodo2', color: '#2c7fb8' },
        {
          id: 'enlaces',
          color: '#2c7fb8',
        },
      ]"
    />
  </SisdaiGraficas>
</template>

Como se observa en el ejemplo anterior, cuando el cursor está dentro del gráfico en un área en blanco, el globo de información se queda sin contenido. Para evitar esto y mostrar el globo solo cuando el cursor está sobre un elemento visual, se puede usar la directiva v-show como se muestra en el siguiente ejemplo:

vue
<script setup>
import { ref } from 'vue'
import datos_energia from '../../assets/datos/alluvial_balance_energia.json'

const datos = ref(datos_energia)
const elAlluvial = ref()
</script>
<template>
  <SisdaiGraficas
    :alto="800"
    :margenes="{ arriba: 30, abajo: 30, derecha: 30, izquierda: 30 }"
  >
    <template #panel-encabezado-vis>
      <p class="vis-titulo-visualizacion">Ejemplo complejo</p>
      <p class="vis-instruccional">
        Pasa el cursor sobre el gráfico para explorar el funcionamiento
      </p>
    </template>
    <template #globo-informacion>
      <SisdaiGraficasGloboInfo
        :ancho="180"
        v-show="
          (elAlluvial?.datos_hover?.tipo === 'nodo') |
            (elAlluvial?.datos_hover?.tipo === 'enlace')
        "
      >
        <p v-if="elAlluvial?.datos_hover?.tipo === 'nodo'">
          {{ elAlluvial?.datos_hover?.name }} <br />
          Valor: {{ elAlluvial?.datos_hover?.value.toLocaleString('en') }}
        </p>
        <p v-else-if="elAlluvial?.datos_hover?.tipo === 'enlace'">
          {{ elAlluvial?.datos_hover?.source?.name }} →
          {{ elAlluvial?.datos_hover?.target?.name }}<br />
          Valor: {{ elAlluvial?.datos_hover?.value.toLocaleString('en') }}
        </p>
      </SisdaiGraficasGloboInfo>
    </template>
    <SisdaiAlluvial
      ref="elAlluvial"
      :datos="datos"
      :variables="[
        { id: 'node0', color: '#999' },
        { id: 'node1', color: '#999' },
        { id: 'node2', color: '#999' },
        { id: 'node3', color: '#000000' },
        { id: 'node4', color: '#85200c' },
        { id: 'node5', color: '#f00' },
        { id: 'node6', color: '#4a86e8' },
        { id: 'node7', color: '#9900ff' },
        { id: 'node8', color: '#783f04' },
        { id: 'node9', color: '#0000ff' },
        { id: 'node10', color: '#0ff' },
        { id: 'node11', color: '#0ff' },
        { id: 'node12', color: '#6d9eeb' },
        { id: 'node13', color: '#ff0' },
        { id: 'node14', color: '#b45f06' },
        { id: 'node15', color: '#999' },
        { id: 'node16', color: '#999' },
        { id: 'node17', color: '#999' },
        { id: 'node18', color: '#999' },
        { id: 'node19', color: '#999' },
        { id: 'node20', color: '#999' },
        { id: 'node21', color: '#999' },
        { id: 'node22', color: '#999' },
        { id: 'node23', color: '#999' },
        { id: 'node24', color: '#999' },
        { id: 'node25', color: '#999' },
        { id: 'node26', color: '#999' },
        { id: 'node27', color: '#999' },
        { id: 'node28', color: '#999' },
        { id: 'node29', color: '#999' },
        { id: 'node30', color: '#cc4125' },
        { id: 'node31', color: '#000000' },
        { id: 'node32', color: '#666666' },
        { id: 'node33', color: '#999' },
        { id: 'node34', color: '#b7b7b7' },
        { id: 'node35', color: '#cccccc' },
        { id: 'node36', color: '#c9daf8' },
        { id: 'node37', color: '#6d9eeb' },
        { id: 'node38', color: '#ff00ff' },
        { id: 'node39', color: '#999' },
        { id: 'node40', color: '#00ff00' },
        { id: 'node41', color: '#00ff00' },
        {
          id: 'enlaces',
          color: 'purple',
        },
      ]"
    />
  </SisdaiGraficas>
</template>