All files / app/assets/javascripts/vue_shared/components/resizable_chart resizable_chart_container.vue

100% Statements 12/12
100% Branches 0/0
100% Functions 5/5
100% Lines 12/12

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41  12x 12x       8x           8x 8x     8x     8x     8x         3x 3x 3x           63x          
<script>
import $ from 'jquery';
import { debounceByAnimationFrame } from '~/lib/utils/common_utils';
 
export default {
  data() {
    return {
      width: 0,
      height: 0,
    };
  },
  beforeDestroy() {
    this.contentResizeHandler.off('content.resize', this.debouncedResize);
    window.removeEventListener('resize', this.debouncedResize);
  },
  created() {
    this.debouncedResize = debounceByAnimationFrame(this.onResize);
 
    // Handle when we explicictly trigger a custom resize event
    this.contentResizeHandler = $(document).on('content.resize', this.debouncedResize);
 
    // Handle window resize
    window.addEventListener('resize', this.debouncedResize);
  },
  methods: {
    onResize() {
      // Slot dimensions
      const { clientWidth, clientHeight } = this.$refs.chartWrapper;
      this.width = clientWidth;
      this.height = clientHeight;
    },
  },
};
</script>
 
<template>
  <div ref="chartWrapper">
    <slot :width="width" :height="height"> </slot>
  </div>
</template>