Strip trailing decimal zeros from Metrics axis59651-remove-unnecessary-decimal-places-on-chart-axes

3 files changed, 21 insertions, 2 deletions

diff --git a/app/assets/javascripts/monitoring/components/charts/area.vue b/app/assets/javascripts/monitoring/components/charts/area.vue
index c43791f2426..ed504246ef3 100644
--- a/app/assets/javascripts/monitoring/components/charts/area.vue
+++ b/app/assets/javascripts/monitoring/components/charts/area.vue
@@ -1,7 +1,7 @@
 <script>
 import { GlAreaChart, GlChartSeriesLabel } from '@gitlab/ui/dist/charts';
 import dateFormat from 'dateformat';
-import { debounceByAnimationFrame } from '~/lib/utils/common_utils';
+import { debounceByAnimationFrame, roundOffFloat } from '~/lib/utils/common_utils';
 import { getSvgIconPathContent } from '~/lib/utils/icon_utils';
 import Icon from '~/vue_shared/components/icon.vue';
 import { chartHeight, graphTypes, lineTypes } from '../../constants';
@@ -111,7 +111,7 @@ export default {
         yAxis: {
           name: this.yAxisLabel,
           axisLabel: {
-            formatter: value => value.toFixed(3),
+            formatter: num => roundOffFloat(num, 3).toString(),
           },
         },
         series: this.scatterSeries,
diff --git a/changelogs/unreleased/59651-remove-unnecessary-decimal-places-on-chart-axes.yml b/changelogs/unreleased/59651-remove-unnecessary-decimal-places-on-chart-axes.yml
new file mode 100644
index 00000000000..fea34099135
--- /dev/null
+++ b/changelogs/unreleased/59651-remove-unnecessary-decimal-places-on-chart-axes.yml
@@ -0,0 +1,5 @@
+---
+title: Remove unnecessary decimals on Metrics chart axis
+merge_request: 29468
+author:
+type: fixed
diff --git a/spec/javascripts/monitoring/charts/area_spec.js b/spec/javascripts/monitoring/charts/area_spec.js
index 56609665b88..ac7e0bb12a1 100644
--- a/spec/javascripts/monitoring/charts/area_spec.js
+++ b/spec/javascripts/monitoring/charts/area_spec.js
@@ -214,6 +214,20 @@ describe('Area component', () => {
       });
     });
 
+    describe('chartOptions', () => {
+      describe('yAxis formatter', () => {
+        let format;
+
+        beforeEach(() => {
+          format = areaChart.vm.chartOptions.yAxis.axisLabel.formatter;
+        });
+
+        it('rounds to 3 decimal places', () => {
+          expect(format(0.88888)).toBe('0.889');
+        });
+      });
+    });
+
     describe('scatterSeries', () => {
       it('utilizes deployment data', () => {
         expect(areaChart.vm.scatterSeries.data).toEqual([