Group Bone

Introducción

Éste componente no está encargado de renderizar, es de uso interno del componente IrChartGroup. Guía de uso parte lógica

Código fuente

<script>
const props = {
  charts: {
    type: Array,
    required: true
  },
  title: {
    type: String,
    default: ''
  },
  hasLegends: {
    type: Boolean,
    default: true
  },
  titleStyle: {
    type: Object,
    default: () => ({
      fontSize: '40px'
    })
  },
  legendsStyle: {
    type: Object,
    required: false
  },
  type: {
    type: String,
    default: 'donut'
  },
  legends: {
    type: Array,
    required: false
  },
  colors: {
    type: Array,
    required: false
  },
  groupStyle: {
    type: Object,
    required: false
  },
  containerStyle: {
    type: Object,
    required: false
  }
}
import { normalizeProps, assignCamelToSnake } from '../../helpers/propsGenerator';
const mergedProps = normalizeProps(props)
import { chartGroupComponentName, defaultColors } from '../../constants'
import { generateLegendsColors } from '../../helpers/mapLegendsColors'
export default {
  name: chartGroupComponentName + 'Bone',
  props: mergedProps,
  data() {
    return {
      onlyLegends: [],
      coloredLegends: [],
      legendsLocal: [],
      chartsLocal: [],
      legendGeneratorsByTypes: [
        {
          type: 'donut',
          generator: this.donutLegendGenerator
        },
        {
          type: 'bar',
          generator: this.barLegendGenerator
        },
      ]
    }
  },
  methods: {
    generateLegend() {
      let type = this.legendGeneratorsByTypes.find( type => type.type === this.type )
      if (!!type)
        return type.generator()
      return []
    },
    donutLegendGenerator() { // determina el generador de leyenda que se va a usar dependiendo del tipo de gráfico que se quiera mostrar
      this.setLegends() // Genera las leyendas según la data de cada gráfico
      let currentLegends = this.legends
      if (!!currentLegends && currentLegends.length > 0) // En caso de tener leyendas en la propiedad this.legends (ocurre únicamente cuando se usa un IrChartIterator)
        this.coloredLegends = this.filterLegends(currentLegends, this.onlyLegends) // Filtra las leyendas que necesita (ya tienen con colores)
      else
        this.coloredLegends = generateLegendsColors(this.onlyLegends, this.colors, defaultColors) // En caso de no tener leyendas las genera con colores
      if (this.hasLegends) // Caso de tener que mostrar leyendas
        return this.coloredLegends // Devuelve las leyendas con colores
      else return [] // Devuelve array vacío
    },
    setLegends() { // Genera las leyendas según la data de cada gráfico
      this.charts.forEach(( { data } ) => {
        data.forEach(( { key } ) => {
          if (!this.onlyLegends.some(legend => legend === key))
            this.onlyLegends.push(key)
        })
      })
    },
    filterLegends(currentLegends, legends) { // Filtra de las leyendas que recibe de IrChartIterator, sólo las que necesita (las que recibe de IrChartIterator ya tienen colores)
      return currentLegends.filter(( { legend } ) => {
        return legends.some(legendAux => legend === legendAux)
      })
    },
    getColoredCharts() { // Agrega los colores a los IrChart
      return this.charts.map(chart => {
        let { data } = chart
        return { ...chart, chartOptions: { ...chart.chartOptions, colors: this.mapChartColors(data) } }
      })
    },
    mapChartColors(data) {
      // Ordena los colores según al dato del IrChart que corresponda en un arreglo de la forma ['####', '####']
      // Donde el primer color es para el primer dato del IrChart
      let colorsAux = []
      data.forEach(( { key: dataKey } ) => {
        let { color } = this.coloredLegends.find(( { legend: colorKey } ) => dataKey === colorKey)
        colorsAux.push(color)
      })
      return colorsAux
    },
    generateCharts() {
      // Agrega los headers al arreglo de la data (necesario para paquete gCharts) y convierte la data
      // que viene desde la BD con la estructura [{key: '', value: ''}] a la estructura ['', '']
      return this.getColoredCharts().map(chart => {
        let { headers, data } = chart
        return { ...chart, data: [ headers, ...data.map(( { key, value } ) => [ key, value ]) ] }
      })
    },
    barLegendGenerator() {
      return []
    },
  },
  created(){
    assignCamelToSnake(mergedProps, this)
  },
  mounted() {
    this.legendsLocal = this.generateLegend()
    this.chartsLocal = this.generateCharts()
  },
  render() {
    return this.$scopedSlots.default({
      legends: this.legendsLocal,
      charts: this.chartsLocal,
      title: this.title,
      titleStyle: this.titleStyle,
      groupStyle: this.groupStyle,
      legendsStyle: this.legendsStyle,
      type: this.type,
      containerStyle: this.containerStyle
    })
  },
}
</script>