Dynamic vuln graph dimensions

* Fix up graph resize logic if navbar is collapsed

Add snapshot

2 files changed, 43 insertions, 0 deletions

diff --git a/app/assets/javascripts/contextual_sidebar.js b/app/assets/javascripts/contextual_sidebar.js
index 67fcdd082a2..03dea1ec0a5 100644
--- a/app/assets/javascripts/contextual_sidebar.js
+++ b/app/assets/javascripts/contextual_sidebar.js
@@ -41,6 +41,9 @@ export default class ContextualSidebar {
         this.toggleCollapsedSidebar(value, true);
       }
     });
+    this.$page.on('transitionstart transitionend', () => {
+      $(document).trigger('content.resize');
+    });
 
     $(window).on('resize', () => _.debounce(this.render(), 100));
   }
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>