Componente

Introducción

Este componente renderizará un gráfico. El mismo se compone de dos partes, una de renderizado y otra de logica ir-chart-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 en la entrada de la capa de datos un objeto con la siguiente estructura.

  {
    "type": "donut",
    "chartOptions": {
      "title": 'Disponibilidad de unidades',
      "pieHole": 0.5,
      "legend": {
        "position": "right"
      },
      "colors": ['#e00000', '#00e0e0'],
      "slices": [
        {
          "key": "Unidades disponibles",
          "offset": 0.05
        }
      ],
      "chartStyle": {
        "width": "35%"
      }
    },
    "headers": ["Disponibildad de unidades", "Cantidad de unidades"],
    "data": [
      {
        "key": "Unidades no disponibles",
        "value": 11
      },
      {
        "key": "Unidades disponibles",
        "value": 2
      }
    ]
  }

Ejemplo

Propiedades

Propiedad	Tipo	Default	Requerido	Descripción
type	String	donut	false	Determina el tipo de gráfico.
chartOptions	Object	{}	false	Determina ciertas propiedades del gráfico. Aquí se detallan las propiedades.
headers	Array	[]	true	Determina los encabezados del gráfico, es decir, los nombres de cada columna (no se muestra en el tipo de gráfico donut pero es necesario). Por ejemplo, en el ejemplo anterior, se usa Estado de las unidades como nombre de la primer columna y Cantidad de unidades como nombre de la segunda columna.
data	Array	[]	true	Determina la data a mostrar en el gráfico. Tiene la siguiente estructura [ { "key": "Unidades no disponibles", "value": 11 }, { "key": "Unidades disponibles", "value": 2 } ]

Propiedades de chartOptions

Propiedad	Tipo	Default	Requerido	Descripción
title	String	``	false	Título del gráfico.
legend	Object/String	right	false	Determina la posición y otras propiedades de las leyendas. Posibles valores: labeled/right/left/top/bottom/none Puede tener la siguiente estructura: "legend": { "position": "right", }
colors	Array	[ "#2F4F4F", "#483D8B", "#9932CC", "#8B0000", "#000080", "#00FF00", "#0000FF", "#9400D3", "#000080", "#00FF00", "#0000FF", "#9400D3", "#FF0000" ]	false	Determina el arreglo de colores disponibles. Puede tener la siguiente estructura: [ {key: "Unidades disponibles", color: "#2F4F4F"} ] Donde el key determina a que dato se le asigna el color.
pieHole	Number	0.35	false	Determina el diámetro del agujero que contiene en tipo de gráfico donut.
slices	Array	[]	false	Determina que parte del gráfico se desplaza y cuánto. La estructura sería la siguiente: [ { "key": "Unidades disponibles" // Determina el dato que se desplaza. "offset": 0.05 } ]
chartStyle	Object	{}	false	Determina atributos de css que se le quieran aplicar al gráfico. La estructura sería la siguiente: { "width": "35%" }

Código fuente

<template>
  <ir-chart-bone v-bind="$attrs" v-on="$listeners">
    <div slot-scope="{ chartData, chartOptions, type, containerStyle, title, titleClasses }" v-on="$listeners" style="height: 100%;">
      <div :style="{ ...containerStyle }" style="height: 100%;">
        <div style="width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center;">
          <h1 :class="titleClasses">
            {{title}}
          </h1>
          <GChart :style="$attrs.props && $attrs.props.styleChart ? $attrs.props.styleChart : null"
            v-bind="{ type: getType(type), data: chartData, options: manageChartArea(chartOptions, type) }"
          />
        </div>
      </div>
    </div>
  </ir-chart-bone>
</template>

<script>
import { chartComponentName } from '../../constants'
import { GChart } from 'vue-google-charts/legacy'
import IrChartBone from './IrChartBone.vue'
export default {
  name: chartComponentName,
  components: {
    IrChartBone,
    GChart
  },
  data() {
    return {
    }
  },
  methods: {
    getType(type) {
      return type === 'donut' ? 'PieChart' : type
    },
    manageChartArea(chartOptions, type) {
      return { ...chartOptions,
        pieHole: ((typeof chartOptions.pieHole) !== 'undefined' ? chartOptions.pieHole : (type === 'donut' ? 0.35 : 0)),
        pieSliceText: (!!chartOptions.pieSliceText ? chartOptions.pieSliceText : 'value'),
        backgroundColor: {
          fill: "#00000000",
          fillOpacity: 0
        },
        chartArea: {
          height: "30px",
          backgroundColor: {
            fill: "#00000000",
            fillOpacity: 0
          }
        }
      }
    }
  }
}
</script>

<style scoped>
</style>