Allows average and max legend text in time series wrapper to be overwritten by props

app/assets/javascripts/monitoring/components/charts/time_series.vue

 <script>
-import { __ } from '~/locale';
+import { s__, __ } from '~/locale';
 import { GlLink, GlButton } from '@gitlab/ui';
 import { GlAreaChart, GlLineChart, GlChartSeriesLabel } from '@gitlab/ui/dist/charts';
 import dateFormat from 'dateformat';
@@ -52,6 +52,16 @@ export default {
       required: false,
       default: () => [],
     },
+    legendAverageText: {
+      type: String,
+      required: false,
+      default: s__('Metrics|Avg'),
+    },
+    legendMaxText: {
+      type: String,
+      required: false,
+      default: s__('Metrics|Max'),
+    },
   },
   data() {
     return {
@@ -260,7 +270,6 @@ export default {
         <slot></slot>
       </div>
     </div>
-
     <component
       :is="glChartComponent"
       ref="chart"
@@ -271,6 +280,8 @@ export default {
       :thresholds="thresholds"
       :width="width"
       :height="height"
+      :average-text="legendAverageText"
+      :max-text="legendMaxText"
       @updated="onChartUpdated"
     >
       <template v-if="tooltip.isDeployment">

changelogs/unreleased/internationalization-time-series-wrapper.yml

+---
+title: Provides internationalization support to chart legends
+merge_request: 16832
+author:
+type: added

locale/gitlab.pot

@@ -9858,6 +9858,9 @@ msgstr ""
 msgid "Metrics|Add metric"
 msgstr ""
 
+msgid "Metrics|Avg"
+msgstr ""
+
 msgid "Metrics|Check out the CI/CD documentation on deploying to an environment"
 msgstr ""
 
@@ -9888,6 +9891,9 @@ msgstr ""
 msgid "Metrics|Legend label (optional)"
 msgstr ""
 
+msgid "Metrics|Max"
+msgstr ""
+
 msgid "Metrics|Must be a valid PromQL query."
 msgstr ""
 

spec/javascripts/monitoring/charts/time_series_spec.js

@@ -60,6 +60,18 @@ describe('Time series component', () => {
       expect(timeSeriesChart.find('.js-graph-widgets').text()).toBe(mockWidgets);
     });
 
+    it('allows user to override max value label text using prop', () => {
+      timeSeriesChart.setProps({ legendMaxText: 'legendMaxText' });
+
+      expect(timeSeriesChart.props().legendMaxText).toBe('legendMaxText');
+    });
+
+    it('allows user to override average value label text using prop', () => {
+      timeSeriesChart.setProps({ legendAverageText: 'averageText' });
+
+      expect(timeSeriesChart.props().legendAverageText).toBe('averageText');
+    });
+
     describe('methods', () => {
       describe('formatTooltipText', () => {
         const mockDate = deploymentData[0].created_at;