diff options
Diffstat (limited to 'app/assets/javascripts/monitoring/components/charts/heatmap.vue')
-rw-r--r-- | app/assets/javascripts/monitoring/components/charts/heatmap.vue | 34 |
1 files changed, 11 insertions, 23 deletions
diff --git a/app/assets/javascripts/monitoring/components/charts/heatmap.vue b/app/assets/javascripts/monitoring/components/charts/heatmap.vue index ed888ef022c..12add274a90 100644 --- a/app/assets/javascripts/monitoring/components/charts/heatmap.vue +++ b/app/assets/javascripts/monitoring/components/charts/heatmap.vue @@ -1,5 +1,4 @@ <script> -import { GlResizeObserverDirective } from '@gitlab/ui'; import { GlHeatmap } from '@gitlab/ui/dist/charts'; import { formatDate, timezones, formats } from '../../format_date'; import { graphDataValidatorForValues } from '../../utils'; @@ -8,9 +7,6 @@ export default { components: { GlHeatmap, }, - directives: { - GlResizeObserverDirective, - }, props: { graphData: { type: Object, @@ -61,26 +57,18 @@ export default { return this.graphData.metrics[0]; }, }, - methods: { - onResize() { - if (this.$refs.heatmapChart) return; - const { width } = this.$refs.heatmapChart.$el.getBoundingClientRect(); - this.width = width; - }, - }, }; </script> <template> - <div v-gl-resize-observer-directive="onResize"> - <gl-heatmap - ref="heatmapChart" - v-bind="$attrs" - :data-series="chartData" - :x-axis-name="xAxisName" - :y-axis-name="yAxisName" - :x-axis-labels="xAxisLabels" - :y-axis-labels="yAxisLabels" - :width="width" - /> - </div> + <gl-heatmap + ref="heatmapChart" + v-bind="$attrs" + :responsive="true" + :data-series="chartData" + :x-axis-name="xAxisName" + :y-axis-name="yAxisName" + :x-axis-labels="xAxisLabels" + :y-axis-labels="yAxisLabels" + :width="width" + /> </template> |