Group

Introducción

Este componente renderizará un conjunto de ir-chart. La misma se compone de dos partes, una de renderizado y otra de logica ir-chart-group-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 charts con la siguiente estructura y un type para identificar el componente a renderizar, desde la capa de datos.

  {
    "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 del grupo.
hasLegends	Boolean	true	false	Determina la generación de leyendas del grupo teniendo en cuenta los datos de cada IrChart.
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.
charts	Array	[]	true	Arreglo de charts a renderizar. Aquí se detallan las propiedades de cada chart.
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.
titleStyles	Object	{}	false	Determina atributos de estilo que se aplicarán al título del IrChartGroup, 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 IrChartGroup, acepta todos los atributos de css aplicables a un texto. Debería tener esta estructura: { "fontSize": "35px" }

Código fuente

<template>
  <ir-chart-group-bone v-bind="$attrs" v-on="$listeners">
    <div slot-scope="{ charts, title, legends, groupStyle, legendsStyle, titleStyle, type, containerStyle }" v-on="$listeners" style="height: 100%;">
      <div style="position: relative; display: flex; flex-direction: column;
        padding: 10px; justify-content: center; align-items: center; overflow: hidden;" :style="{ ...containerStyle }">
        <div style="width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center;">
          <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 :style="manageGroupStyle(groupStyle)" style="position: relative; display: flex; justify-content: center; align-items: center;">
          <template v-for="{ data, chartOptions }, i in charts">
            <ir-chart :key="i"
              v-bind="{ data, chartOptions, type }"
              :style="{ ...chartOptions.chartStyle }">
            </ir-chart>
          </template>
        </div>
      </div>
    </div>
  </ir-chart-group-bone>
</template>

<script>
import { chartGroupComponentName } from '../../constants'
import IrChartGroupBone from './IrChartGroupBone.vue'
export default {
  name: chartGroupComponentName,
  components: {
    IrChartGroupBone
  },
  data() {
    return {
      defaultGroupStyle: {
        "width": '100%',
        "flex-direction": 'row',
      }
    }
  },
  methods: {
    manageGroupStyle(groupStyle) {
      return !!groupStyle ? groupStyle : this.defaultGroupStyle
    }
  }
}
</script>

<style scoped>
</style>