Iterator

Introducción

Este componente renderizará un conjunto de ir-chart-groups. La misma se compone de dos partes, una de renderizado y otra de logica ir-chart-iterator-bone, esta ultima será la encargada de el manejo de los datos así sean ingresados por propiedades o por consulta a la capa de datos.

Uso

El componente espera recibir un arreglo de items con la siguiente estructura y un type para identificar el componente a renderizar, desde la capa de datos.

  {
    "groupOptions": {
      "title": "Título de grupo",
      "hasLegends": false
    },
    "charts": [
      {
        "chartOptions": {
          "legend": "none"
        },
        "headers": ["Task", "Hours per Day"],
        "data": [
          {
            "key": "Work",
            "value": 11
          },
          {
            "key": "Eat",
            "value": 2
          }
        ]
      }
    ]
  }

Ejemplo

Propiedad	Tipo	Default	Requerido	Descripción
title	String	``	false	Título general del iterator.
hasLegends	Boolean	true	false	Determina la generación de leyendas en el iterator (leyendas generales).
type	String	donut	false	Determina el tipo de gráfico que se renderizará. Por ahora la única opción es 'donut'. Se implementarán más tipos de gráficos más adelante.
iteratorStyle	Object	{row: true}	false	Determina los estilos para el contenedor, acepta cualquier tipo de atributo css. Con {row: true} los elementos se ubican en una grilla.
groups	Array	[]	false	Arreglo de grupos a renderizar. Aquí se detallan las propiedades de cada grupo.
colors	Array	[ "#2F4F4F", "#483D8B", "#9932CC", "#8B0000", "#000080", "#00FF00", "#0000FF", "#9400D3", "#000080", "#00FF00", "#0000FF", "#9400D3", "#FF0000" ]	false	Determina el arreglo de colores disponibles, esta lista se usa para todos los IrCharts que se rendericen dentro de este componente. Puede tener la siguiente estructura: [ {key: "Unidades disponibles", color: "#2F4F4F"} ] Donde el key determina a que dato se le asigna el color.
titleStyle	Object	{}	false	Determina atributos de estilo que se aplicarán al título del IrChartIterator, acepta todos los atributos de css aplicables a un texto. Debería tener esta estructura: { "fontSize": "35px" }
legendsStyle	Object	{}	false	Determina atributos de estilo que se aplicarán a las leyendas del IrChartIterator, acepta todos los atributos de css aplicables a un texto. Debería tener esta estructura: { "fontSize": "35px" }
containerStyle	Object	{}	false	Determina atributos de estilo que se aplicarán a los contenedores de cada grupo dentro del IrChartIterator, acepta todos los atributos de css aplicables a un contenedor. Debería tener esta estructura: { "width": "auto", "height": "100%", "min-width": "30rem", "box-shadow": "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)", "border-radius": "20px" }
items_fcn	String	undefined	false	Nombre de la función a ejecutarse en la DB, la respuesta se utilizará para reemplazar el arreglo de items.
args_items_fcn	Object	{}	false	Parámetros de la función que se ejecuta con el nombre proveniente de la propiedad "items_fcn" (ésta propiedad queda inutilizada si no se envía "items_fcn"). IMPORTANTE la función descripta en la propiedad "items_fcn" va a recibir los prámetros que incluya esta propiedad y además un parámetro extra "filtros" que va a tener como valor un array hecho string con los valores de los campos del formulario de filtro. En caso de no poseer filtros, el parámetro se envía como un string vacío.
filtros_fcn	String	undefined	false	Nombre de la función a ejecutarse en la DB, la respuesta se utilizará para reemplazar el arreglo de filtros.
args_filtros_fcn	Object	{}	false	Parámetros de la función que se ejecuta con el nombre proveniente de la propiedad "filtros_fcn" (ésta propiedad queda inutilizada si no se envía "filtros_fcn")
filtros	Array	[]	false	Arreglo de campos del formulario de filtro (igual formato que la propiedad "campo" del componente "Formulario"). IMPORTANTE Los filtros no se mostrarán si la propiedad "items_fcn" no está setteada.
cache_items	Boolean	true	false	Activa un cache de los items del iterator, el cual permitirá que al navegar por el sitio se almacenen en el equipo del usuario los items consultados por items_fcn, para mostrar temporalmente mientras se consulta la información actualizada a la DB. Esto dará una mejor performance al iterator, ya que mostrará contenido mas rápido.

Código fuente

<template>
  <ir-chart-iterator-bone v-bind="$attrs" v-on="$listeners">
    <div slot-scope="{ title, legends, groups, filtros, submitForm, iteratorStyle, titleStyle, legendsStyle }" v-on="$listeners">
      <template>
        <ir-form v-if="filtros.length !== 0 && isFiltros" :campos="filtros" data-cy="form-filtro" flat>
          <template v-slot:footer>
            <v-btn dark v-on="submitForm" data-cy="aplicar-filtro">Apply filters</v-btn>
          </template>
        </ir-form>
        <div v-if="filtros.length !== 0 && visibleFields(filtros)" style="width: 100%; position: relative;">
          <div class="d-flex flex-row actionPosition">
            <v-tooltip bottom>
              <template v-slot:activator="{ on, attrs }">
                <v-btn
                  data-cy="form-filtro-show"
                  class="d-inline-flex mx-2"
                  fab
                  small
                  dark
                  v-on="on"
                  @click="mostrarFiltros"
                >
                  <v-icon dark>
                    {{isFiltros ? 'mdi-filter-off' : 'mdi-filter'}}
                  </v-icon>
                </v-btn>
              </template>
              <span>
                {{isFiltros ? 'Hide filters' : 'Show filters'}}
              </span>
            </v-tooltip>
          </div>
        </div>
      </template>
      <div style="width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding-top: 15px; padding-bottom: 15px;">
        <h1 :style="titleStyle">
          {{title}}
        </h1>
        <div style="width: 100%; display: flex; flex-wrap: wrap; gap: 2px 16px; justify-content: center;">
          <div v-for="{ color, legend }, i in legends"
            :key="i + '-' + legend + '-' + color"
            style="display: flex; flex-direction: row; gap: 4px; justify-content: center; align-items: center;"
          >
            <div :style="'background-color: ' + color + '; border-radius: 100%; height: 8px; width: 8px;'"></div>
            <p style="margin: 0px;" :style="legendsStyle">{{legend}}</p>
          </div>
        </div>
      </div>
      <div v-if="groups.length > 0" :style="{ ...iteratorStyle, ...(!!iteratorStyle && iteratorStyle.row === false ? listStyle : rowStyle) }"
        style="position: relative; display: flex;">
        <ir-chart-group v-for="group, i in groups" :key="i"
          v-bind="{ ...group }" :style="getGroupContainerStyle(group.containerStyle)" />
      </div>
    </div>
  </ir-chart-iterator-bone>
</template>

<script>
import { chartIteratorComponentName } from '../../constants'
import IrChartIteratorBone from './IrChartIteratorBone.vue'
export default {
  name: chartIteratorComponentName,
  components: {
    IrChartIteratorBone
  },
  data() {
    return {
      listStyle: {
        "flex-wrap": "wrap",
        "gap": "10px",
        "align-items": "center",
        "justify-content": "center"
      },
      rowStyle: {
        "flex-direction": "row",
        "gap": "10px",
        "align-items": "center",
        "justify-content": "start",
        "padding": "20px",
        "overflow-x": "scroll"
      },
      defaultGroupStyle: {
        "width": "auto",
        "height": "100%",
        "min-width": "30rem",
        "box-shadow": "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",
        "border-radius": "20px"
      },
      isFiltros: false
    }
  },
  methods: {
    getGroupContainerStyle(style) {
      return !!style ? style : this.defaultGroupStyle
    },
    mostrarFiltros() {
      this.isFiltros = !this.isFiltros
    },
    visibleFields(filtros) {
      let filtrosAux = filtros.filter(filtro => filtro.props.visible)
      return filtrosAux.length > 0
    },
  }
}
</script>
<style scoped>
.actionPosition {
  position: absolute;
  right: -27px;
  top: 0px;
  z-index: 10;
}
</style>