text: import { debounce } from '@/utils'
  
  export default {
    data() {
      return {
        $_sidebarElm : null,
        $_resizeHandler : null
      }
    },
    mounted() {
      this.initListener()
    },
    activated() {
      if ( !this.$_resizeHandler ) {
        // avoid duplication init
        this.initListener()
      }
  
      // when keep-alive chart activated, auto resize
      this.resize()
    },
    beforeDestroy() {
      this.destroyListener()
    },
    deactivated() {
      this.destroyListener()
    },
    methods : {
      // use $_ for mixins properties
      // https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential
      $_sidebarResizeHandler( e ) {
        if ( e.propertyName === 'width' ) {
          this.$_resizeHandler()
        }
      },
      initListener() {
        this.$_resizeHandler = debounce( () => {
          this.resize()
        }, 100 )
        window.addEventListener( 'resize', this.$_resizeHandler )
  
        this.$_sidebarElm = document.getElementsByClassName( 'sidebar-container' )[0]
        this.$_sidebarElm && this.$_sidebarElm.addEventListener( 'transitionend', this.$_sidebarResizeHandler )
      },
      destroyListener() {
        window.removeEventListener( 'resize', this.$_resizeHandler )
        this.$_resizeHandler = null
  
        this.$_sidebarElm && this.$_sidebarElm.removeEventListener( 'transitionend', this.$_sidebarResizeHandler )
      },
      resize() {
        const { chart } = this
        chart && chart.resize()
      }
    }
  }
  