diff options
author | Fernando Arias <farias@gitlab.com> | 2019-04-05 05:19:23 +0000 |
---|---|---|
committer | Mike Greiling <mike@pixelcog.com> | 2019-04-05 05:19:23 +0000 |
commit | e0725fa436708209f431fc874d1ee148bbfb50f0 (patch) | |
tree | 834120f95f856355a988098151237b05414e5650 /app/assets/javascripts/vue_shared/components/resizable_chart | |
parent | b54d466caeed724c73f4447c6ad26b7755262968 (diff) | |
download | gitlab-ce-e0725fa436708209f431fc874d1ee148bbfb50f0.tar.gz |
Dynamic vuln graph dimensions
* Fix up graph resize logic if navbar is collapsed
Add snapshot
Diffstat (limited to 'app/assets/javascripts/vue_shared/components/resizable_chart')
-rw-r--r-- | app/assets/javascripts/vue_shared/components/resizable_chart/resizable_chart_container.vue | 40 |
1 files changed, 40 insertions, 0 deletions
diff --git a/app/assets/javascripts/vue_shared/components/resizable_chart/resizable_chart_container.vue b/app/assets/javascripts/vue_shared/components/resizable_chart/resizable_chart_container.vue new file mode 100644 index 00000000000..1f3d248e991 --- /dev/null +++ b/app/assets/javascripts/vue_shared/components/resizable_chart/resizable_chart_container.vue @@ -0,0 +1,40 @@ +<script> +import { debounceByAnimationFrame } from '~/lib/utils/common_utils'; +import $ from 'jquery'; + +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> |