Legend CounterReady
Legend counter is used to display a set of counters with labels and corresponding values, styled according to their status. It supports translation for labels and offers size customization.
<script setup lang="ts">
import type { Counter } from '~/components/LegendCounter.vue'
const counters = ref<Counter[]>([
{ label: 'notStarted', value: 45 },
{ label: 'processing', value: 6 },
{ label: 'submitted', value: 100 },
{ label: 'incorrectAmount', value: 0 },
])
</script>
<template>
<LegendCounter :counters />
</template>Usage
This section includes guidelines for designers and developers about the usage of this pattern in different contexts.
Do
- Use this component to display counters (auxiliary information) for distinct categories or statuses.
- Ensure the label corresponds to one of the predefined statuses:
notStarted,processing,submitted, orincorrectAmount. - Provide meaningful numeric values or default to
0if no value is available. - Use the size prop to adjust the size of the counters to fit the design requirements.
Don’t
- Don't use this component for non-status-related counters; it is designed specifically for predefined statuses.
- Avoid providing excessively large or negative numbers as value, as it may break visual consistency.
- Don't use this component if translations for label are unavailable or unclear.
- Use counters sparingly as you can overwhelm users and reduce the effectiveness of the feedback. Instead, balance the need for each section and display the strictly necessary.
Integration
This product pattern is currently only available to use in the New Frontend for Provet Cloud (using Vue & Nuxt).
Troubleshooting
If you experience any issues while using this pattern, please ask for support in the #vet-frontend Slack channel.