1 files changed, 62 insertions, 6 deletions

diff --git a/app/assets/javascripts/monitoring/components/charts/stacked_column.vue b/app/assets/javascripts/monitoring/components/charts/stacked_column.vue
index 66ba20c125f..ac31d107e63 100644
--- a/app/assets/javascripts/monitoring/components/charts/stacked_column.vue
+++ b/app/assets/javascripts/monitoring/components/charts/stacked_column.vue
@@ -2,8 +2,11 @@
 import { GlResizeObserverDirective } from '@gitlab/ui';
 import { GlStackedColumnChart } from '@gitlab/ui/dist/charts';
 import { getSvgIconPathContent } from '~/lib/utils/icon_utils';
-import { chartHeight } from '../../constants';
+import { chartHeight, legendLayoutTypes } from '../../constants';
+import { s__ } from '~/locale';
 import { graphDataValidatorForValues } from '../../utils';
+import { getTimeAxisOptions, axisTypes } from './options';
+import { timezones } from '../../format_date';
 
 export default {
   components: {
@@ -18,6 +21,36 @@ export default {
       required: true,
       validator: graphDataValidatorForValues.bind(null, false),
     },
+    timezone: {
+      type: String,
+      required: false,
+      default: timezones.LOCAL,
+    },
+    legendLayout: {
+      type: String,
+      required: false,
+      default: legendLayoutTypes.table,
+    },
+    legendAverageText: {
+      type: String,
+      required: false,
+      default: s__('Metrics|Avg'),
+    },
+    legendCurrentText: {
+      type: String,
+      required: false,
+      default: s__('Metrics|Current'),
+    },
+    legendMaxText: {
+      type: String,
+      required: false,
+      default: s__('Metrics|Max'),
+    },
+    legendMinText: {
+      type: String,
+      required: false,
+      default: s__('Metrics|Min'),
+    },
   },
   data() {
     return {
@@ -28,7 +61,14 @@ export default {
   },
   computed: {
     chartData() {
-      return this.graphData.metrics.map(metric => metric.result[0].values.map(val => val[1]));
+      return this.graphData.metrics.map(({ result }) => {
+        // This needs a fix. Not only metrics[0] should be shown.
+        // See https://gitlab.com/gitlab-org/gitlab/-/issues/220492
+        if (!result || result.length === 0) {
+          return [];
+        }
+        return result[0].values.map(val => val[1]);
+      });
     },
     xAxisTitle() {
       return this.graphData.x_label !== undefined ? this.graphData.x_label : '';
@@ -37,10 +77,17 @@ export default {
       return this.graphData.y_label !== undefined ? this.graphData.y_label : '';
     },
     xAxisType() {
-      return this.graphData.x_type !== undefined ? this.graphData.x_type : 'category';
+      // stacked-column component requires the x-axis to be of type `category`
+      return axisTypes.category;
     },
     groupBy() {
-      return this.graphData.metrics[0].result[0].values.map(val => val[0]);
+      // This needs a fix. Not only metrics[0] should be shown.
+      // See https://gitlab.com/gitlab-org/gitlab/-/issues/220492
+      const { result } = this.graphData.metrics[0];
+      if (!result || result.length === 0) {
+        return [];
+      }
+      return result[0].values.map(val => val[0]);
     },
     dataZoomConfig() {
       const handleIcon = this.svgs['scroll-handle'];
@@ -49,11 +96,15 @@ export default {
     },
     chartOptions() {
       return {
-        dataZoom: this.dataZoomConfig,
+        xAxis: {
+          ...getTimeAxisOptions({ timezone: this.timezone }),
+          type: this.xAxisType,
+        },
+        dataZoom: [this.dataZoomConfig],
       };
     },
     seriesNames() {
-      return this.graphData.metrics.map(metric => metric.series_name);
+      return this.graphData.metrics.map(metric => metric.label);
     },
   },
   created() {
@@ -94,6 +145,11 @@ export default {
       :width="width"
       :height="height"
       :series-names="seriesNames"
+      :legend-layout="legendLayout"
+      :legend-average-text="legendAverageText"
+      :legend-current-text="legendCurrentText"
+      :legend-max-text="legendMaxText"
+      :legend-min-text="legendMinText"
     />
   </div>
 </template>