Commit e49a2dc0 authored by Brandon Labuschagne's avatar Brandon Labuschagne Committed by Mark Florian

Integration commit for GlSingleStat

This commit handles updating the two occurances
of the GlSingleStat component - to match the new
specification.
parent 50b64375
......@@ -45,12 +45,18 @@ export default {
}
if (this.graphData?.maxValue) {
formatter = getFormatter(SUPPORTED_FORMATS.percent);
return formatter(this.queryResult / Number(this.graphData.maxValue), defaultPrecision);
formatter = getFormatter(SUPPORTED_FORMATS.number);
return formatter(
(this.queryResult / Number(this.graphData.maxValue)) * 100,
defaultPrecision,
);
}
formatter = getFormatter(SUPPORTED_FORMATS.number);
return `${formatter(this.queryResult, defaultPrecision)}${this.queryInfo.unit ?? ''}`;
return `${formatter(this.queryResult, defaultPrecision)}`;
},
unit() {
return this.graphData?.maxValue ? '%' : this.queryInfo.unit;
},
graphTitle() {
return this.queryInfo.label;
......@@ -60,6 +66,6 @@ export default {
</script>
<template>
<div>
<gl-single-stat :value="statValue" :title="graphTitle" variant="success" />
<gl-single-stat :value="statValue" :title="graphTitle" :unit="unit" variant="success" />
</div>
</template>
......@@ -22,14 +22,14 @@ export default {
{
key: 'anomalousTraffic',
title: anomalous.title,
value: `${Math.round(anomalous.value * 100)}%`,
value: `${Math.round(anomalous.value * 100)}`,
unit: '%',
variant: 'warning',
},
{
key: 'totalTraffic',
title: nominal.title,
value: engineeringNotation(nominal.value),
variant: 'secondary',
},
];
},
......
......@@ -4,7 +4,8 @@ exports[`StatisticsSummary component renders the anomalous traffic percentage 1`
<gl-single-stat-stub
class="col-sm-6 col-md-4 col-lg-3"
title="Anomalous"
value="20%"
unit="%"
value="20"
variant="warning"
/>
`;
......@@ -14,6 +15,6 @@ exports[`StatisticsSummary component renders the nominal traffic count 1`] = `
class="col-sm-6 col-md-4 col-lg-3"
title="Total"
value="100"
variant="secondary"
variant="muted"
/>
`;
......@@ -27,8 +27,12 @@ describe('Single Stat Chart component', () => {
describe('computed', () => {
describe('statValue', () => {
it('should interpolate the value and unit props', () => {
expect(findChart().props('value')).toBe('1.00MB');
it('should display the correct value', () => {
expect(findChart().props('value')).toBe('1.00');
});
it('should display the correct value unit', () => {
expect(findChart().props('unit')).toBe('MB');
});
it('should change the value representation to a percentile one', () => {
......@@ -36,7 +40,8 @@ describe('Single Stat Chart component', () => {
graphData: singleStatGraphData({ max_value: 120 }, { value: 91 }),
});
expect(findChart().props('value')).toContain('75.83%');
expect(findChart().props('value')).toBe('75.83');
expect(findChart().props('unit')).toBe('%');
});
it('should display NaN for non numeric maxValue values', () => {
......
......@@ -876,10 +876,10 @@
resolved "https://registry.yarnpkg.com/@gitlab/tributejs/-/tributejs-1.0.0.tgz#672befa222aeffc83e7d799b0500a7a4418e59b8"
integrity sha512-nmKw1+hB6MHvlmPz63yPwVs1qQkycHwsKgxpEbzmky16Y6mL4EJMk3w1b8QlOAF/AIAzjCERPhe/R4MJiohbZw==
"@gitlab/ui@25.12.2":
version "25.12.2"
resolved "https://registry.yarnpkg.com/@gitlab/ui/-/ui-25.12.2.tgz#ad47680da4b067140e8d48a04e807352660b9cca"
integrity sha512-y+uks00z+4kivTYu+l2mrjYT3nfnBS+xKWIUQ9xrkZVCC069V+DffPK+jVRzzhQ67hOMP5LVdaUEOcUplgFvGA==
"@gitlab/ui@26.0.0":
version "26.0.0"
resolved "https://registry.yarnpkg.com/@gitlab/ui/-/ui-26.0.0.tgz#7fa93726478042b1570b2bd3b909217a31177b36"
integrity sha512-X22mc3qVBAkfAZ2DRqbPnJ6upzjWlzGLWmHR4l+3MhOBbMBi4EXIuF19nixC5u8bjCMGkK3wMIiZj3C3HsmQ7A==
dependencies:
"@babel/standalone" "^7.0.0"
"@gitlab/vue-toasted" "^1.3.0"
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment