Chart Bone

Introducción

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

Código fuente

<script>
const props = {
  data: {
    type: Array,
    required: true
  },
  headers: {
    type: Array,
    required: false
  },
  chartOptions: {
    type: Object,
    required: true
  },
  type: {
    type: String,
    default: 'PieChart'
  },
  containerStyle: {
    type: Object,
    required: false
  }
}
import { normalizeProps, assignCamelToSnake } from '../../helpers/propsGenerator';
const mergedProps = normalizeProps(props)
import { chartComponentName } from '../../constants'
export default {
  name: chartComponentName + 'Bone',
  props: mergedProps,
  data() {
    return {
      localData: [],
      localChartOptions: [],
      title: '',
      titleClasses: ''
    }
  },
  methods: {
    generateData() {
      // Agrega los headers al arreglo de la data (necesario para paquete gCharts), en caso de que este componente
      // se esté usando aislado (sin IrChartGroup) y convierte la data
      // que viene desde la BD con la estructura [{key: '', value: ''}] a la estructura ['', '']
      let dataAux = [ ...this.data ]
      if (!!this.headers)
        dataAux.unshift(this.headers)
      return dataAux.map(info => {
        if (!!info.key)
          return [info.key, info.value]
        return info
      })
    },
    manageSlicesProps() {
      // Convierte la data de propiedades de slices de la estructura que viene desde la
      // BD [{key: '', offset: '', anotherProp: ''}] a la estructura {"1": { offset: '', anotherProp: '' }}
      // necesaria para el paquete gCharts
      if ((typeof this.chartOptions.slices) === 'undefined')
        return this.chartOptions
      let newSlices = {}
      this.chartOptions.slices.forEach(slice => {
        let sliceAux = { ...slice }
        let dataIndex = this.localData.findIndex(info => info[0] === sliceAux.key)
        if (dataIndex !== -1) {
          delete sliceAux.key
          newSlices[dataIndex] = { ...sliceAux }
        }
      })
      return this.manageTitle({ ...this.chartOptions, slices: newSlices })
    },
    /**
    * Actualiza las opciones de título y clases de título.
    * @param {Object} options - Las opciones para el título.
    * @param {string} options.title - El nuevo título.
    * @param {string[]} options.titleClasses - Las clases CSS para aplicar al título.
    * @returns {Object} - Las opciones actualizadas sin la propiedad "title".
    */
    manageTitle(options) {
      if (options.title) {
        this.titleClasses = options.titleClasses
        this.title = options.title
        delete options.title
      }
      return options
    }
  },
  created(){
    assignCamelToSnake(mergedProps, this)
  },
  mounted() {
    this.localData = this.generateData()
    this.localChartOptions = this.manageSlicesProps()
  },
  render() {
    return this.$scopedSlots.default({
      chartData: this.localData,
      chartOptions: this.localChartOptions,
      type: this.type,
      containerStyle: this.containerStyle,
      title: this.title,
      titleClasses: this.titleClasses
    })
  }
}
</script>