Commit abc2b648 authored by Ezekiel Kigbo's avatar Ezekiel Kigbo Committed by Natalia Tepluhina

Added unit prop to shared metric card

Updates specs for the metric card and
the time metrics card components
parent c3e79104
<script>
import MetricCard from '../../shared/components/metric_card.vue';
import { timeMetricsData as mockTimeMetricsData } from '../../../../../../spec/frontend/analytics/cycle_analytics/mock_data';
export default {
name: 'TimeMetricsCard',
components: {
MetricCard,
},
props: {
groupPath: {
type: String,
required: true,
},
additionalParams: {
type: Object,
required: false,
default: null,
},
},
data() {
return {
data: [],
loading: false,
};
},
watch: {
additionalParams() {
this.fetchData();
},
},
mounted() {
this.fetchData();
},
methods: {
fetchData() {
this.data = mockTimeMetricsData;
},
},
render() {
return this.$scopedSlots.default({
metrics: this.data,
loading: this.loading,
});
},
};
</script>
......@@ -22,6 +22,13 @@ export default {
default: false,
},
},
methods: {
valueText(metric) {
const { value = null, unit = null } = metric;
if (!value) return '-';
return unit ? `${value} ${unit}` : value;
},
},
};
</script>
......@@ -39,12 +46,7 @@ export default {
ref="metricItem"
class="js-metric-card-item flex-grow text-center"
>
<h3 class="my-2">
<template v-if="metric.value === null"
>-</template
>
<template v-else>{{ metric.value }}</template>
</h3>
<h3 class="my-2">{{ valueText(metric) }}</h3>
<p class="text-secondary gl-font-sm mb-2">{{ metric.label }}</p>
</div>
</div>
......
......@@ -53,6 +53,10 @@ const getStageByTitle = (stages, title) =>
stages.find(stage => stage.title && stage.title.toLowerCase().trim() === title) || {};
export const recentActivityData = getJSONFixture(fixtureEndpoints.recentActivityData);
export const timeMetricsData = [
{ label: 'Lead time', value: '2', unit: 'days' },
{ label: 'Cycle time', value: '1.5', unit: 'days' },
];
export const customizableStagesAndEvents = getJSONFixture(
fixtureEndpoints.customizableCycleAnalyticsStagesAndEvents,
......
......@@ -5,9 +5,9 @@ import MetricCard from 'ee/analytics/shared/components/metric_card.vue';
const defaultProps = {
title: 'My fancy title',
metrics: [
{ key: 'first_metric', value: 10, label: 'First metric' },
{ key: 'first_metric', value: 10, label: 'First metric', unit: 'days' },
{ key: 'second_metric', value: 20, label: 'Yet another metric' },
{ key: 'third_metric', value: null, label: 'Metric without value' },
{ key: 'third_metric', value: null, label: 'Metric without value', unit: 'parsecs' },
],
isLoading: false,
};
......@@ -93,6 +93,24 @@ describe('MetricCard', () => {
).toContain(value);
});
});
describe('units', () => {
it(`renders when there is a value`, () => {
expect(
findMetricItem()
.at(0)
.text(),
).toContain('10 days');
});
it(`does not render without a value`, () => {
expect(
findMetricItem()
.at(2)
.text(),
).toContain('-');
});
});
});
});
});
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