We will create a separate component for the dashboard indicators, as follows:
- In the components folder, create a new ProductionIndicator.vue component.
- Declare a template that displays a progress bar, a title, and additional info text:
<template>
<div class="production-indicator">
<loading-progress :progress="value" />
<div class="title">{{ title }}</div>
<div class="info">{{ info }}</div>
</div>
</template>
- Add the value, title, and info props:
<script>
export default {
props: {
value: {
type: Number,
required: true,
},
title: String,
info: [String, Number],
},
}
</script>
- Back in our ProductionDashboard component, let's compute the average of the values and the rate of errors:
computed: {
length () {
return this.measures.length
},
average () {
if (!this.length) return 0
let total = this.measures.reduce(
(total, measure) => total += measure.value,
0
)
return total / this.length
},
errorRate () {
if (!this.length) return 0
let total = this.measures.reduce(
(total, measure) => total += measure.error ? 1 : 0,
0
)
return total / this.length
},
},
In the preceding code snippet, we cached the length of the measures array in a length computed property.
- Add two indicators in the templates - one for the average value and one for the error rate:
<template>
<div class="production-dashboard">
<h1>Production Dashboard</h1>
<section class="indicators">
<ProductionIndicator
:value="average / 100"
title="Average"
:info="Math.round(average)"
/>
<ProductionIndicator
class="danger"
:value="errorRate"
title="Errors"
:info="`${Math.round(errorRate * 100)}%`"
/>
</section>
</div>
</template>
Don't forget to import ProductionIndicator into the component!
The indicators should look like this:
