laue/src/widgets/legend.js

Modern charts for Vue.js

import widget from '../mixins/widget'
import {extend} from '../utils/core'

export default {
  name: 'LaLegend',

  mixins: [widget],

  props: {
    selectable: Boolean,

    /**
     * ^(top|bottom|left|right)(-(start|center|end))?$
     */
    placement: {
      type: String,
      default: 'bottom'
    },

    color: String
  },

  preload({data, parent}) {
    const {placement = 'bottom'} = data
    let space = [0, 0, 0, 0]

    switch (placement.match(/^(\w+)-?/)[1]) {
      case 'bottom':
        space[2] = 50
        break
      case 'top':
        space[0] = 50
        break
      case 'left':
        space[3] = 100
        break
      case 'right':
        space[1] = 100
        break
      default:
        break
    }

    parent.addSpace(space)
  },

  computed: {
    curColor() {
      return this.color || this.Plane.textColor
    },

    position() {
      return this.placement.match(/^(\w+)(-(\w+))?$/)[1]
    },

    align() {
      return this.placement.match(/^(\w+)(-(\w+))?$/)[3]
    },

    pos() {
      const {position, align} = this
      const pos = {}

      if (position === 'top' || position === 'bottom') {
        switch (align) {
          case 'start':
            pos.left = 0
            break
          case 'end':
            pos.right = 0
            break
          default:
            pos.left = '50%'
            pos.transform = 'translateX(-50%)'
            break
        }
        if (position === 'top') {
          pos.top = 0
        } else {
          pos.bottom = 0
        }
      } else {
        switch (align) {
          case 'start':
            pos.top = 0
            break
          case 'end':
            pos.bottom = 0
            break
          default:
            pos.top = '50%'
            pos.transform = 'translateY(-50%)'
            break
        }
        if (position === 'left') {
          pos.left = 0
        } else {
          pos.right = 0
        }
      }

      return pos
    }
  },

  created() {
    this.$set(this.store, 'hidden', [])
  },

  render(h) {
    const {curColor, pos, position, selectable, store} = this
    const {hidden} = store
    const slot = this.$scopedSlots.default

    return h(
      'div',
      {
        class: 'la-legend',
        style: extend(
          {
            position: 'absolute'
          },
          pos
        )
      },
      Object.keys(store.props).map(id =>
        h(
          'div',
          {
            style: {
              display:
                position === 'left' || position === 'right' ?
                  'block' :
                  'inline-block',
              marginRight: '10px',
              marginLeft: '5px',
              color: curColor,
              cursor: selectable ? 'pointer' : 'nromal'
            },
            on: {
              click: () => {
                if (!selectable) {
                  return
                }
                id = Number(id)
                const index = hidden.indexOf(id)

                if (index < 0) {
                  hidden.push(id)
                } else {
                  hidden.splice(index, 1)
                }
              }
            }
          },
          slot ?
            slot({
              color: store.colors[id],
              label: store.labels[id],
              prop: store.props[id]
            }) :
            [
              h('span', {
                style: {
                  backgroundColor: store.colors[id],
                  height: '10px',
                  width: '10px',
                  borderRadius: '50%',
                  display: 'inline-block',
                  marginRight: '5px'
                }
              }),
              h(
                'span',
                {
                  style:
                      hidden.indexOf(Number(id)) > -1 ?
                        {
                          textDecoration: 'line-through'
                        } :
                        {}
                },
                store.labels[id]
              )
            ]
        )
      )
    )
  }
}