File size: 2,004 Bytes
76a7a50 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 | <!--
Matomo - free/libre analytics platform
@link https://matomo.org
@license https://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
-->
<template>
<div class="metricValue">
<div
class="metricValue__title"
:class="{ 'metricValue__title--documented': !!documentation }"
:title="documentation || title"
v-tooltips="{ duration: 200, delay: 200 }"
>{{ title }}</div>
<div class="metricValue__primary">
<span class="metricValue__number">{{ value }}</span>
<slot name="evolution" />
</div>
<div
v-if="hasSecondary"
class="metricValue__secondary"
>
<span class="metricValue__secondaryValue">{{ secondaryValue }}</span>
<span
v-if="secondaryLabel"
class="metricValue__secondaryLabel"
>{{ secondaryLabel }}</span>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { Tooltips } from 'CoreHome';
export default defineComponent({
name: 'MetricValue',
directives: {
Tooltips,
},
props: {
title: {
type: String,
required: true,
},
// Pre-formatted value (e.g. "9,527" or "4min 22s"); rendered verbatim, no formatting here.
value: {
type: [String, Number],
required: true,
},
// Optional secondary line. Value and label are kept separate so they can be
// styled independently (e.g. "9,527" darker, "unique visitors" grey). Matomo
// hands these out separately as metric.value + metric.description.
secondaryValue: [String, Number],
secondaryLabel: String,
// Optional metric documentation; when set it is shown as the title tooltip (otherwise the
// tooltip falls back to the full title so a clipped title stays recoverable on hover).
documentation: String,
},
computed: {
hasSecondary(): boolean {
return this.secondaryValue !== undefined
&& this.secondaryValue !== null
&& this.secondaryValue !== '';
},
},
});
</script>
|