VSA metrics: Only render decimal places for floats

Changelog: changed

app/assets/javascripts/cycle_analytics/components/value_stream_metrics.vue

@@ -86,6 +86,10 @@ export default {
         redirectTo(links[0].url);
       }
     },
+    getDecimalPlaces(value) {
+      const parsedFloat = parseFloat(value);
+      return Number.isNaN(parsedFloat) || Number.isInteger(parsedFloat) ? 0 : 1;
+    },
   },
 };
 </script>
@@ -104,7 +108,7 @@ export default {
         :title="metric.label"
         :unit="metric.unit || ''"
         :should-animate="true"
-        :animation-decimal-places="1"
+        :animation-decimal-places="getDecimalPlaces(metric.value)"
         :class="{ 'gl-hover-cursor-pointer': hasLinks(metric.links) }"
         tabindex="0"
         @click="clickHandler(metric)"

spec/features/cycle_analytics_spec.rb

@@ -134,7 +134,7 @@ RSpec.describe 'Value Stream Analytics', :js do
       end
 
       it 'can filter the metrics by date' do
-        expect(metrics_values).to match_array(["21.0", "2.0", "1.0", "0.0"])
+        expect(metrics_values).to match_array(%w[21 2 1 0])
 
         set_daterange(from, to)
 

spec/frontend/cycle_analytics/value_stream_metrics_spec.js

@@ -88,12 +88,12 @@ describe('ValueStreamMetrics', () => {
       });
 
       describe.each`
-        index | value                   | title                   | unit                   | clickable
-        ${0}  | ${metricsData[0].value} | ${metricsData[0].title} | ${metricsData[0].unit} | ${false}
-        ${1}  | ${metricsData[1].value} | ${metricsData[1].title} | ${metricsData[1].unit} | ${false}
-        ${2}  | ${metricsData[2].value} | ${metricsData[2].title} | ${metricsData[2].unit} | ${false}
-        ${3}  | ${metricsData[3].value} | ${metricsData[3].title} | ${metricsData[3].unit} | ${true}
-      `('metric tiles', ({ index, value, title, unit, clickable }) => {
+        index | value                   | title                   | unit                   | animationDecimalPlaces | clickable
+        ${0}  | ${metricsData[0].value} | ${metricsData[0].title} | ${metricsData[0].unit} | ${0}                   | ${false}
+        ${1}  | ${metricsData[1].value} | ${metricsData[1].title} | ${metricsData[1].unit} | ${0}                   | ${false}
+        ${2}  | ${metricsData[2].value} | ${metricsData[2].title} | ${metricsData[2].unit} | ${0}                   | ${false}
+        ${3}  | ${metricsData[3].value} | ${metricsData[3].title} | ${metricsData[3].unit} | ${1}                   | ${true}
+      `('metric tiles', ({ index, value, title, unit, animationDecimalPlaces, clickable }) => {
         it(`renders a single stat component for "${title}" with value and unit`, () => {
           const metric = findMetrics().at(index);
           expect(metric.props()).toMatchObject({ value, title, unit: unit ?? '' });
@@ -111,6 +111,11 @@ describe('ValueStreamMetrics', () => {
             expect(redirectTo).not.toHaveBeenCalled();
           }
         });
+
+        it(`will render ${animationDecimalPlaces} decimal places for the ${title} metric with the value "${value}"`, () => {
+          const metric = findMetrics().at(index);
+          expect(metric.props('animationDecimalPlaces')).toBe(animationDecimalPlaces);
+        });
       });
 
       it('will not display a loading icon', () => {