diff options
Diffstat (limited to 'app/assets/javascripts/monitoring/components/charts/stacked_column.vue')
-rw-r--r-- | app/assets/javascripts/monitoring/components/charts/stacked_column.vue | 46 |
1 files changed, 18 insertions, 28 deletions
diff --git a/app/assets/javascripts/monitoring/components/charts/stacked_column.vue b/app/assets/javascripts/monitoring/components/charts/stacked_column.vue index a53f899f752..0cf39448d6b 100644 --- a/app/assets/javascripts/monitoring/components/charts/stacked_column.vue +++ b/app/assets/javascripts/monitoring/components/charts/stacked_column.vue @@ -1,5 +1,4 @@ <script> -import { GlResizeObserverDirective } from '@gitlab/ui'; import { GlStackedColumnChart } from '@gitlab/ui/dist/charts'; import { getSvgIconPathContent } from '~/lib/utils/icon_utils'; import { s__ } from '~/locale'; @@ -12,9 +11,6 @@ export default { components: { GlStackedColumnChart, }, - directives: { - GlResizeObserverDirective, - }, props: { graphData: { type: Object, @@ -125,32 +121,26 @@ export default { console.error('SVG could not be rendered correctly: ', e); }); }, - onResize() { - if (!this.$refs.chart) return; - const { width } = this.$refs.chart.$el.getBoundingClientRect(); - this.width = width; - }, }, }; </script> <template> - <div v-gl-resize-observer-directive="onResize"> - <gl-stacked-column-chart - ref="chart" - v-bind="$attrs" - :bars="chartData" - :option="chartOptions" - :x-axis-title="xAxisTitle" - :y-axis-title="yAxisTitle" - :x-axis-type="xAxisType" - :group-by="groupBy" - :width="width" - :height="height" - :legend-layout="legendLayout" - :legend-average-text="legendAverageText" - :legend-current-text="legendCurrentText" - :legend-max-text="legendMaxText" - :legend-min-text="legendMinText" - /> - </div> + <gl-stacked-column-chart + ref="chart" + v-bind="$attrs" + :responsive="true" + :bars="chartData" + :option="chartOptions" + :x-axis-title="xAxisTitle" + :y-axis-title="yAxisTitle" + :x-axis-type="xAxisType" + :group-by="groupBy" + :width="width" + :height="height" + :legend-layout="legendLayout" + :legend-average-text="legendAverageText" + :legend-current-text="legendCurrentText" + :legend-max-text="legendMaxText" + :legend-min-text="legendMinText" + /> </template> |