Chart.vue 1.24 KB
Newer Older
Sascha Herzinger's avatar
Sascha Herzinger committed
1
<template>
2
  <div class="fjs-chart" @mousedown.capture="focusControlPanel">
3
    <slot/>
Sascha Herzinger's avatar
Sascha Herzinger committed
4
5
6
7
  </div>
</template>

<script>
8
  import ResizeObserver from 'resize-observer-polyfill'
Sascha Herzinger's avatar
Sascha Herzinger committed
9
  export default {
10
    name: 'chart',
11
12
13
14
15
    data () {
      return {
        observer: null
      }
    },
16
    mounted () {
17
18
      this.observer = new ResizeObserver(this.resize)
      this.observer.observe(this.$el)
19
20
21
22
      window.addEventListener('load', this.resize)
      this.resize()
    },
    beforeDestroy () {
23
      this.observer.disconnect()
24
25
26
27
      window.removeEventListener('load', this.resize)
    },
    methods: {
      resize () {
28
29
        const width = this.$el.getBoundingClientRect().width - 1
        const height = this.$el.getBoundingClientRect().height - 1
30
        const fontSize = Math.ceil((height < width ? height : width) / 50)
31
        this.$el.style['font-size'] = fontSize + 'pt'
32
        this.$emit('resize', width, height)
33
34
      },
      focusControlPanel () {
35
        const controlPanel = this.$children.find(d => d.$options.name === 'control-panel')
36
        controlPanel.focus()
37
38
      }
    }
Sascha Herzinger's avatar
Sascha Herzinger committed
39
40
41
42
43
  }
</script>

<style lang="sass" scoped>
  .fjs-chart
44
45
    width: 100%
    height: 100%
46
    box-sizing: border-box
Sascha Herzinger's avatar
Sascha Herzinger committed
47
    &:hover
48
      box-shadow: inset 0 0 0 2px #29D5FF
Sascha Herzinger's avatar
Sascha Herzinger committed
49
</style>