Opciones avanzadas ​

En este apartado se exploran otras posibilidades que ofrece la biblioteca sisdai-graficas para personalizar las visualizaciones.

Añadiendo nomenclatura ​

El componente <SisdaiNomenclatura/> se puede emplear para mostrar la nomenclatura asociada a una gráfica. Este componente sólo admite la propiedad variables. A continuación se muestra un ejemplo de su uso:

vue
<script setup>
import { ref } from 'vue'

const variables = ref([
  {
    id: 'cantidad_1',
    nombre: 'Cantidad 1',
    color: 'pink',
  },
  {
    id: 'cantidad_2',
    nombre: 'Cantidad 2',
    color: 'orange',
  },
  {
    id: 'cantidad_3',
    nombre: 'Cantidad 3',
    color: 'cyan',
  },
])
</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 nomenclatura</p>
      </div>
    </template>
    <SisdaiBarras
      :datos="[
        {
          categoria: 'aguascalientes',
          cantidad_1: 100,
          cantidad_2: 100,
          cantidad_3: 60,
        },
        {
          categoria: 'baja_cal',
          cantidad_1: 80,
          cantidad_2: 100,
          cantidad_3: 60,
        },
        {
          categoria: 'baja_cal_sur',
          cantidad_1: 20,
          cantidad_2: 50,
          cantidad_3: 60,
        },
        {
          categoria: 'zacatecas',
          cantidad_1: 20,
          cantidad_2: 100,
          cantidad_3: 60,
        },
      ]"
      :variables="variables"
      :nombre_indice="'categoria'"
    />
    <template #panel-pie-vis>
      <div>
        <div class="vis-titulo-leyenda">Leyenda</div>
        <SisdaiNomenclatura :variables="variables"></SisdaiNomenclatura>
      </div>
    </template>
  </SisdaiGraficas>
</template>

Añadiendo checks ​

El componente <SisdaiChecks/> se puede emplear para mostrar la nomenclatura junto con controladores. Este componente sólo admite la propiedad variables y debe conectarse con la gráfica como se muestra en el siguiente ejemplo:

vue
<script setup>
import { ref } from 'vue'
const variablesCheckeadas = ref()
const variables = ref([
  {
    id: 'cantidad_1',
    nombre: 'Cantidad 1',
    color: 'pink',
  },
  {
    id: 'cantidad_2',
    nombre: 'Cantidad 2',
    color: 'orange',
  },
  {
    id: 'cantidad_3',
    nombre: 'Cantidad 3',
    color: 'cyan',
  },
])
</script>

<template>
  <div
    class="contenedor-vis borde-redondeado-8 con-panel-encabezado-vis con-panel-pie-vis"
  >
    <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 inputs checks</p>
        </div>
      </template>
      <SisdaiBarras
        :datos="[
          {
            categoria: 'aguascalientes',
            cantidad_1: 100,
            cantidad_2: 100,
            cantidad_3: 60,
          },
          {
            categoria: 'baja_cal',
            cantidad_1: 80,
            cantidad_2: 100,
            cantidad_3: 60,
          },
          {
            categoria: 'baja_cal_sur',
            cantidad_1: 20,
            cantidad_2: 50,
            cantidad_3: 60,
          },
          {
            categoria: 'zacatecas',
            cantidad_1: 20,
            cantidad_2: 100,
            cantidad_3: 60,
          },
        ]"
        :variables="
          variablesCheckeadas
            ? variablesCheckeadas.variables_activas
            : variables
        "
        :nombre_indice="'categoria'"
      />
      <template #panel-pie-vis>
        <div>
          <div class="vis-titulo-leyenda">Leyenda</div>
          <SisdaiChecks
            ref="variablesCheckeadas"
            :variables="variables"
          ></SisdaiChecks>
        </div>
      </template>
    </SisdaiGraficas>
  </div>
</template>

Globo de información ​

El componente <SisdaiGraficasGloboInfo/> se puede emplear dentro del template #globo-informacion para mostrar la información de las visualizaciones. Actualmente sólo se ha implementado para gráficos de barras y donas. Puedes insertar los datos asociados a la posición del cursor haciendo una referencia a la gráfica y accediendo a la variable datos_hover cómo se muestra a continuación:

vue
<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>
          <span
            class="globo-informacion-punto-color"
            style="background: pink"
          ></span>
          Cantidad 1: {{ lasBarras?.datos_hover?.cantidad_1 }}
          <br />
          <span
            class="globo-informacion-punto-color"
            style="background: orange"
          ></span>
          Cantidad 2: {{ lasBarras?.datos_hover?.cantidad_2 }}
        </p>
      </SisdaiGraficasGloboInfo>
    </template>
    <SisdaiBarras
      :datos="[
        { categoria: 'categoría 1', cantidad_1: 100, cantidad_2: 100 },
        { categoria: 'categoría 2', cantidad_1: 80, cantidad_2: 100 },
        { categoria: 'categoría 3', cantidad_1: 20, cantidad_2: 100 },
        { categoria: 'categoría 4', cantidad_1: 20, cantidad_2: 100 },
      ]"
      :variables="[
        {
          id: 'cantidad_1',
          nombre: 'Cantidad 1',
          color: 'pink',
        },
        {
          id: 'cantidad_2',
          nombre: 'Cantidad 2',
          color: 'orange',
        },
      ]"
      ref="lasBarras"
      :nombre_indice="'categoria'"
    />
    <template #panel-pie-vis>
      <div>
        <div class="vis-titulo-leyenda">Datos asociados al cursor:</div>
        <p>
          {{ lasBarras?.datos_hover }}
        </p>
      </div>
    </template>
  </SisdaiGraficas>
</template>
<script setup>
import { ref } from 'vue'
const lasBarras = ref()
</script>

Combinación de gráficas ​

vue
<script setup>
import cajasbigotesejemplos from './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',
})
</script>

<template>
  <SisdaiGraficas
    :titulo_eje_y="'título del eje y'"
    :titulo_eje_x="'título del eje x'"
    :margenes="{ arriba: 30, abajo: 20, derecha: 30, izquierda: 40 }"
  >
    <SisdaiBarras
      :datos="[
        { categoria: 'Empresa A', cantidad_1: 100, cantidad_2: 100 },
        { categoria: 'Empresa B', cantidad_1: 80, cantidad_2: 100 },
        { categoria: 'EmpresaC', cantidad_1: 20, cantidad_2: 100 },
      ]"
      :variables="[
        {
          id: 'cantidad_1',
          nombre: 'Cantidad 1',
          color: 'pink',
        },
        {
          id: 'cantidad_2',
          nombre: 'Cantidad 2',
          color: 'orange',
        },
      ]"
      :separacion="0.6"
      :alineacion_eje_y="'derecha'"
      :nombre_indice="'categoria'"
    />
    <SisdaiCajasBigotes
      :datos="datos_dinamicos"
      :variables="variables_dinamicas"
      :nombre_indice="'nombre_empresa'"
    />
  </SisdaiGraficas>
</template>

Elementos de fondo y de frente ​

En este ejemplo se muestra cómo añadir elementos tanto al fondo como al frente de la gráfica, como dos rectángulos en el fondo y una línea en el frente. Esto se logra accediendo a las referencias expuestas grupoFondo y grupoFrente de SisdaiGraficas, junto con las escalas escalaLineal y escalaBanda de SidadiCajasBigotes

vue
<script setup>
import cajasbigotesejemplos from './cajas_bigotes_ejemplo_1.json'

import { onMounted, ref, watch } from 'vue'
const laGrafica = ref()
const cajasBigotes = ref()
const datos_dinamicos = ref(cajasbigotesejemplos)
const variables_dinamicas = ref({
  id: 'acciones_vendidas',
  nombre: 'Acciones vendidas',
  color: '#2c7fb8',
})
const rect_fondo_1 = ref(),
  rect_fondo_2 = ref(),
  linea_frente = ref()
onMounted(() => {
  // Usamos los métodos heredados de select en d3 como el .append
  rect_fondo_1.value = laGrafica.value.grupoFondo.append('rect')
  rect_fondo_2.value = laGrafica.value.grupoFondo.append('rect')
  linea_frente.value = laGrafica.value.grupoFrente.append('line')
})
watch(
  () => cajasBigotes.value?.escalaLineal,
  nv => {
    if (nv.range()[0] > 0) {
      rect_fondo_1.value
        .attr('width', cajasBigotes.value.escalaBanda.range()[1])
        .attr('height', nv(0) - nv(500))
        .attr('y', nv(500))
        .style('fill', 'rgba(80,200,80,.5)')
      rect_fondo_2.value
        .attr('width', cajasBigotes.value.escalaBanda.range()[1])
        .attr('height', nv(500) - nv(nv.domain()[1]))
        .attr('y', nv(nv.domain()[1]))
        .style('fill', 'rgba(200,80,80,.5)')
      linea_frente.value
        .attr('x1', 0)
        .attr('y1', nv(250))
        .attr('x2', cajasBigotes.value.escalaBanda.range()[1])
        .attr('y2', nv(250))
        .style('stroke', 'black')
        .style('stroke-dasharray', '3 3')
        .style('stroke-width', '3px')
    }
  }
)
</script>

<template>
  <SisdaiGraficas
    ref="laGrafica"
    class="con-panel-encabezado-vis"
    :titulo_eje_y="'título del eje y'"
    :titulo_eje_x="'título del eje x'"
    :margenes="{ arriba: 30, abajo: 20, derecha: 30, izquierda: 40 }"
  >
    <template #panel-encabezado-viz>
      <div>
        <p class="vis-titulo-visualizacion">
          Ejemplo con elementos de fondo y de frente
        </p>
      </div>
    </template>
    <SisdaiCajasBigotes
      :datos="datos_dinamicos"
      :variables="variables_dinamicas"
      :nombre_indice="'nombre_empresa'"
      ref="cajasBigotes"
    />
  </SisdaiGraficas>
</template>

Rotación de ejes ​

En este ejemplo se implementa el uso de una función para rotar los ejes de la gráfica.

vue
<script setup>
import cajasbigotesejemplos from './cajas_bigotes_ejemplo_1.json'

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

<template>
  <SisdaiGraficas
    ref="laGrafica"
    class="con-panel-encabezado-vis"
    :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 #panel-encabezado-vis>
      <div>
        <div>
          <p class="vis-titulo-visualizacion">
            Ejemplo rotacion de eje horizontal
          </p>
        </div>
        <label for="angulo-x">ángulo x: {{ angulo_x }}</label>

        <input
          id="angulo-x"
          type="range"
          v-model="angulo_x"
          min="-90"
          max="90"
          step="1"
        />
        <label for="angulo-y">ángulo y: {{ angulo_y }}</label>

        <input
          id="angulo-y"
          type="range"
          v-model="angulo_y"
          min="-90"
          max="90"
          step="1"
        />
      </div>
    </template>
    <SisdaiCajasBigotes
      :datos="datos_dinamicos"
      :variables="variables_dinamicas"
      :nombre_indice="'nombre_empresa'"
      :angulo_etiquetas_eje_x="parseInt(angulo_x)"
      :angulo_etiquetas_eje_y="parseInt(angulo_y)"
      ref="cajasBigotes"
    />
  </SisdaiGraficas>
</template>

Narrativa ​

El siguiente ejemplo muestra cómo se puede combinar el uso de sisdai-graficas con sisdai-componentes para construir una narrativa visual. Se recomienda consultar sisdai-componentes para conocer más sobre el funcionamiento del componente <SisdaiNarrativa>

Seccion activa: -1
Posicion depurador: 0

Viñeta 0

Viñeta 1

Viñeta 2

Viñeta 3

vue
<script setup>
import SisdaiNarrativa from 'sisdai-componentes/src/componentes/narrativa/SisdaiNarrativa.vue'
import { ref, watch } from 'vue'
const laDona = ref()
const variables_visibles = ref([])

const variables = ref([
  { id: 'Variable A', nombre: 'Variable A', color: '#a1c5ff' },
  { id: 'Variable B', nombre: 'Variable B', color: '#5188e0' },
  { id: 'Variable C', nombre: 'Variable C', color: '#51c96f' },
  { id: 'Variable D', nombre: 'Variable D', color: '#c9c351' },
])
const miNarrativa = ref()
watch(
  () => miNarrativa.value?.seccion_visible,
  nv => {
    if (nv === -1) {
      variables_visibles.value = []
    } else if (nv === 0) {
      variables_visibles.value = ['Variable A']
    } else if (nv === 1) {
      variables_visibles.value = ['Variable A', 'Variable B']
    } else if (nv === 2) {
      variables_visibles.value = ['Variable A', 'Variable B', 'Variable C']
    } else if (nv === 3) {
      variables_visibles.value = [
        'Variable A',
        'Variable B',
        'Variable C',
        'Variable D',
      ]
    }
  }
)
</script>

<template>
  <SisdaiNarrativa ref="miNarrativa">
    <template #contenido-fondo-sticky>
      <SisdaiGraficas class="p-t-10">
        <SisdaiDona
          ref="laDona"
          :datos="[
            { categoria: 'Variable A', cantidad: 20 },
            { categoria: 'Variable B', cantidad: 20 },
            { categoria: 'Variable C', cantidad: 30 },
            { categoria: 'Variable D', cantidad: 10 },
          ]"
          :variables="variables"
          :variables_visibles="variables_visibles"
          :nombre_indice="'categoria'"
        />
        <template
          #panel-pie-vis
          v-if="miNarrativa?.seccion_visible === 3"
        >
          <SisdaiNomenclatura :variables="variables"></SisdaiNomenclatura>
        </template>
      </SisdaiGraficas>
    </template>
    <div class="vineta p-1 contenedor">
      <div class="contenedor-vineta contenedor alineacion-centrada">
        <p class="p-2 texto-centrado">Viñeta 0</p>
      </div>
    </div>
    <div class="vineta p-1 contenedor">
      <div class="contenedor-vineta contenedor alineacion-centrada">
        <p class="p-2 texto-centrado">Viñeta 1</p>
      </div>
    </div>
    <div class="vineta p-1 contenedor">
      <div class="contenedor-vineta contenedor alineacion-centrada">
        <p class="p-2 texto-centrado">Viñeta 2</p>
      </div>
    </div>
    <div class="vineta p-1 contenedor">
      <div class="contenedor-vineta contenedor alineacion-centrada">
        <p class="p-2 texto-centrado">Viñeta 3</p>
      </div>
    </div>
  </SisdaiNarrativa>
</template>
<style scoped>
.contenedor-vineta {
  background: var(--color-conahcyt-3);
  color: var(--color-conahcyt-0);

  max-width: 354px;
}
.vineta {
  position: absolute;
}
</style>